/* ─────────────────────────────────────────────────────────────────────────────
   examples.css — the example gallery (/examples/) and the viewer shell that
   frames each UI-only demo. Loaded after steel.css; it borrows that file's
   tokens and adds nothing to the token set.
   ───────────────────────────────────────────────────────────────────────────── */

/* ══ VIEWER SHELL ══════════════════════════════════════════════════════════
   Toolbar and stage are both fixed, so the shell page itself never scrolls and
   the demo keeps an honest 100vh box to size itself against. Anything that let
   the outer page flow would double-scroll on iOS. */

body.viewer{
  margin:0; height:100%; overflow:hidden;
  background:var(--steel-950);
  overscroll-behavior:none;
}
html:has(body.viewer){height:100%; overflow:hidden}

.vbar{
  position:fixed; inset:0 0 auto 0; z-index:10;
  height:46px; display:flex; align-items:center; gap:14px;
  padding:0 14px; padding-left:max(14px,env(safe-area-inset-left));
  padding-right:max(14px,env(safe-area-inset-right));
  background:var(--steel-950); border-bottom:1px solid var(--steel-700);
  color:var(--steel-200); font-family:var(--font-sans);
}

.vback{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--steel-300);
  padding:7px 12px 7px 9px; border:1px solid var(--steel-700);
  transition:color .18s, border-color .18s;
}
.vback:hover{color:#fff; border-color:var(--arc-bright)}
.vback .vchev{font-size:1.05rem; line-height:0; margin-top:-1px}

.vtitle{
  display:flex; align-items:baseline; gap:10px; min-width:0; flex:1;
  font-size:.9rem; color:#f4f6f8; letter-spacing:-.01em;
}
.vtitle b{font-family:var(--font-display); font-weight:700; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.vtitle .vmark{
  width:13px; height:13px; flex-shrink:0; align-self:center;
  border:2px solid var(--arc-bright); background:linear-gradient(135deg,#1b232c,#0b0e13);
}
.vtitle .vkind{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--straw-bright); white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--straw-bright) 40%, transparent);
  padding:3px 7px; flex-shrink:0;
}

.vtools{display:flex; align-items:center; gap:8px; flex-shrink:0}
.vwide,.vfull{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--steel-300);
  border:1px solid var(--steel-700); background:transparent;
  padding:8px 11px; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  transition:color .18s, border-color .18s, background .18s;
}
.vwide:hover,.vfull:hover{color:#fff; border-color:var(--arc-bright)}
/* an explicit display beats the UA rule for [hidden], so restate it */
.vwide[hidden]{display:none}
/* Arc blue carries white text (5.30:1) — see the accent-foreground rule. */
.vwide[aria-pressed="true"]{background:var(--arc); border-color:var(--arc); color:#fff}
.vfull .vfullicon{font-size:.85rem; line-height:0}

.vstage{position:fixed; inset:46px 0 0 0; overflow:hidden; background:#eceff3}
.vstage iframe{display:block; width:100%; height:100%; border:0}

/* "Web view" on a phone: render the demo at a real desk width and scale the
   whole frame down, so the desktop layout stays proportional instead of
   collapsing. --vs is set by examples.js from the stage width. */
.vstage.wide iframe{
  width:1280px; height:calc(100% / var(--vs, 1));
  transform:scale(var(--vs,1)); transform-origin:top left;
}

@media (max-width:620px){
  /* Give the demo's name the room instead of the chrome around it: the label
     is what tells someone which of the eight they are looking at. */
  .vbar{gap:9px; padding:0 10px}
  .vtitle .vkind{display:none}
  .vback .vbacklabel{display:none}
  .vback{padding:7px 9px}
  .vtitle{font-size:.84rem; gap:8px}
  .vtools{gap:6px}
  .vwide,.vfull{font-size:.62rem; padding:7px 8px; letter-spacing:.04em}
  .vfull .vfullicon{display:none}
}

/* ══ GALLERY ═══════════════════════════════════════════════════════════════ */

/* The hero already ends on the scan card's own border, so the usual 96px
   section lead-in below it reads as a hole rather than a rest. */
.ex-hero{padding:56px 0 60px}
.ex-grp{padding-top:56px}
.ex-grp .ex-num{border-top:none; padding-top:0}
.ex-hero h1{font-size:clamp(2rem,4.6vw,3.1rem); font-weight:800; margin:18px 0 16px}
.ex-hero .lede{font-size:1.1rem; color:var(--body); max-width:40em}
.ex-hero .lede b{color:var(--ink)}

/* Scan-to-open card. The QR is inline SVG so it stays crisp on a projector. */
.ex-scan{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center;
  border:1px solid var(--line); background:var(--panel); padding:20px 24px;
  margin-top:30px; max-width:560px;
}
.ex-scan .qr{width:132px; height:132px; display:block; background:#fff; padding:8px}
.ex-scan .qr svg{width:100%; height:100%; display:block; shape-rendering:crispEdges}
.ex-scan .k{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-ink)}
.ex-scan .u{font-family:var(--font-display); font-weight:800; font-size:1.32rem;
  color:var(--ink); letter-spacing:-.02em; margin:8px 0 6px; word-break:break-word}
.ex-scan p{font-size:.88rem; color:var(--muted)}
@media (max-width:560px){
  .ex-scan{grid-template-columns:1fr; justify-items:start; gap:16px}
}

/* Group header: EXAMPLE 01 / 02 / 03 */
.ex-grp{scroll-margin-top:80px}
.ex-grp + .ex-grp{margin-top:12px}
.ex-num{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:26px; margin-bottom:8px;
}
.ex-num .n{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-fg); background:var(--accent);
  padding:5px 11px; flex-shrink:0;
}
.ex-num h2{font-size:clamp(1.5rem,3vw,2.05rem); font-weight:800}
.ex-num .sub{
  width:100%; font-size:1rem; color:var(--muted); max-width:46em; margin-top:2px;
}
.ex-num .sub b{color:var(--body)}

/* Status flag on a group: LIVE PRODUCT vs UI PROTOTYPE. Straw and weld are
   fills, never small text — these use the -ink/-bright text tokens. */
.ex-flag{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.13em;
  text-transform:uppercase; padding:4px 9px; border:1px solid currentColor;
  flex-shrink:0; align-self:center;
}
.ex-flag.live{color:var(--pos-text)}
.ex-flag.proto{color:var(--caution-text)}

/* Card grid — reuses .prod from steel.css for the card body itself. */
.ex-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:26px 0 52px}
.ex-grid.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.ex-grid,.ex-grid.two{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.ex-grid,.ex-grid.two{grid-template-columns:1fr}}

a.prod{cursor:pointer}
a.prod:hover .go{gap:11px}
.prod .go{transition:gap .18s}

/* The credential readout on the live-product cards — the brand's hairline
   instrument strip: mono label left, mono value right. */
.ex-cred{
  margin-top:16px; border:1px solid var(--line); background:var(--fill);
}
.ex-cred .r{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:8px 12px; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:.72rem;
}
.ex-cred .r:last-child{border-bottom:none}
.ex-cred .r .k{color:var(--muted); letter-spacing:.05em}
.ex-cred .r .v{color:var(--ink); text-align:right; word-break:break-all}

/* Two-line note under a group */
.ex-note{
  font-size:.9rem; color:var(--muted); max-width:46em; margin:-30px 0 52px;
  border-left:2px solid var(--line); padding-left:16px;
}
.ex-note b{color:var(--body)}

/* How-to-show strip */
.ex-how{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:8px}
.ex-how .h{background:var(--panel); padding:20px}
.ex-how .h .t{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent-ink)}
.ex-how .h h3{font-size:1.02rem; font-weight:700; margin:8px 0 7px}
.ex-how .h p{font-size:.88rem; color:var(--muted)}
@media (max-width:760px){.ex-how{grid-template-columns:1fr}}