/* web.html (4 Nov 2026): PluraFusion on the web, the browser viewer and the browser CAD editor.
   Loaded after v2.css and engine.css by that page only. Every tint has its dark override. */
.page--web { --id: #c4553a; --id-soft: #f6d3c8; --id-wash: #fbe8e1; --id-tint: #fdf4f0; }
:root[data-theme="dark"] .page--web { --id: #f2a791; --id-soft: #c4553a; --id-wash: #251612; --id-tint: #1a100d; }
.page--web .lead strong { color: var(--id); }
.page--web .feat > * { min-width: 0; }

/* a quiet browser frame round the captures: three grey dots and the address, nothing more */
.bframe { display: flex; flex-direction: column; aspect-ratio: auto; }
.phead__media.bframe { aspect-ratio: auto; }
.bframe::before {
  content: attr(data-addr); display: flex; align-items: center; flex: none; height: 38px; padding: 0 16px 0 76px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--text-3);
  background:
    radial-gradient(circle at 20px 50%, var(--hair-strong, #cdd8dc) 0 5px, transparent 5.5px),
    radial-gradient(circle at 40px 50%, var(--hair-strong, #cdd8dc) 0 5px, transparent 5.5px),
    radial-gradient(circle at 60px 50%, var(--hair-strong, #cdd8dc) 0 5px, transparent 5.5px),
    var(--bg-2);
  border-bottom: 1px solid var(--hair);
}
.bframe > img, .bframe > video { flex: 1 1 auto; min-height: 0; }
.bframe .media__cap { bottom: 12px; }
.bframe.media--soon > .soon { aspect-ratio: 16 / 9; }
.bframe.media--soon::before { content: attr(data-addr); }

/* the two halves: a big marker each, so the page reads as two products of one family */
.half { display: grid; gap: 14px; justify-items: center; text-align: center; }
.half__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--id); }
.halves { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.halves a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--id-wash); color: var(--text); font-size: 15px; text-decoration: none; transition: background 0.3s var(--ease), transform 0.3s var(--ease); }
.halves a:hover { background: var(--id-soft); transform: translateY(-1px); }
.halves svg { width: 18px; height: 18px; color: var(--id); stroke-width: 1.5; }

/* what opens: a row per kind, one chip per extension (the data colour of the kind on its edge) */
.opens { display: grid; padding: 4px clamp(18px, 2.4vw, 30px); border-radius: var(--r-surface); background: var(--surface); box-shadow: var(--shadow-card); }
.opens__row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hair); }
.opens__row:first-child { border-top: 0; }
.opens__row h3 { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.opens__row ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.opens__row li { padding: 3px 11px; border-radius: 999px; background: var(--bg-2); font-family: var(--font-mono); font-size: 12.5px; color: var(--text); }
.opens__row li::before, .opens__row li::after { content: none; }
@media (max-width: 700px) { .opens__row { grid-template-columns: minmax(0, 1fr); } }

/* three plain cards: no install, no account, nothing uploaded */
.no3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.no3 article { display: grid; gap: 10px; align-content: start; padding: 26px 24px; border-radius: var(--r-surface); background: linear-gradient(160deg, var(--id-wash), var(--surface) 72%); box-shadow: var(--shadow-card); }
.no3 svg { width: 30px; height: 30px; color: var(--id); stroke-width: 1.3; }
.no3 h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; color: var(--text); }
.no3 p { color: var(--text-2); font-size: 15.5px; line-height: 1.45; }
@media (max-width: 800px) { .no3 { grid-template-columns: minmax(0, 1fr); } }

/* the family: Share, Together and the desk, one line each */
.page--web .onward a { min-width: 0; }

/* the address bar says what the frame shows; a caption over the viewer's own bottom bar would only cover it */
.bframe .media__cap { display: none; }
/* six chips read best as two rows of three */
.page--web .free { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .page--web .free { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .page--web .free { grid-template-columns: minmax(0, 1fr); } }