/* Local viewer chrome. Product tokens come from ../tokens.css. */
:root {
  --ds-bg: #f1f0ed; --ds-frame: #ffffff; --ds-line: #e3e2de; --ds-ink: #191919; --ds-muted: #6b6a66;
  --ds-hover: rgba(0,0,0,.045); --ds-active: rgba(0,0,0,.075); --ds-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-sources: #f1f0ed;
}
[data-theme="dark"] {
  --ds-bg: #151515; --ds-frame: #1e1e1d; --ds-line: #2f2f2d; --ds-ink: #ecebe7; --ds-muted: #a19f99;
  --ds-hover: rgba(255,255,255,.05); --ds-active: rgba(255,255,255,.09);
  --ds-sources: #22221f;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ds-bg); color: var(--ds-ink); font: 400 15px/1.55 var(--ds-ui); -webkit-font-smoothing: antialiased; }

/* ---------- scrollbars (match theme) ---------- */
html { scrollbar-color: var(--ds-line) var(--ds-frame); scrollbar-width: thin; }
.ds-side, .ds-main, .ds-frame, .md pre, .fl, .tk, .ty { scrollbar-color: var(--ds-line) var(--ds-frame); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ds-frame); }
::-webkit-scrollbar-thumb { background: var(--ds-line); border: 2px solid var(--ds-frame); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-muted); }
::-webkit-scrollbar-corner { background: var(--ds-frame); }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.ds { display: flex; flex-direction: column; min-height: 100vh; }
.ds-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); flex: 1; min-height: 0; }
.ds-hero-slot:empty, .ds-strip-slot:empty { display: none; }
.ds-strip-slot { position: sticky; top: 0; z-index: 30; }

/* ---------- sidebar ---------- */
.ds-side { position: sticky; top: var(--strip-h, 0px); height: calc(100vh - var(--strip-h, 0px)); overflow-y: auto; padding: 18px 12px 24px; display: flex; flex-direction: column; gap: 2px; background: var(--ds-frame); border-right: 1px solid var(--ds-line); }
.ds-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 14px; min-height: 36px; }
.ds-brand b { font: 600 15px/20px var(--ds-ui); }
.ds-brand > div { display: flex; align-items: center; min-height: 32px; }
.ds-brand span { display: block; font: 500 13px/20px var(--ds-ui); color: var(--ds-ink); letter-spacing: .01em; }
.ds-wordmark {
  display: inline-block;
  padding: 3px 10px 4px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mark);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  font-style: italic;
  letter-spacing: .01em;
  border-radius: 4px;
  margin-bottom: 4px;
}
.ds-theme { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--ds-line); border-radius: 999px; background: var(--ds-frame); cursor: pointer; }
.ds-theme svg { width: 16px; height: 16px; }
.ds-search { flex: none; margin: 0 4px 10px; height: 34px; padding: 0 12px; border: 1px solid var(--ds-line); border-radius: 10px; background: var(--ds-frame); color: var(--ds-ink); font: inherit; font-size: 14px; }
.ds-nav-label { font-size: 12px; color: var(--ds-muted); padding: 14px 10px 4px; }
.ds-link { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; text-decoration: none; font-size: 14px; line-height: 20px; color: var(--ds-ink); }
.ds-link:hover { background: var(--ds-hover); }
.ds-link.is-on { background: var(--ds-active); font-weight: 500; }
.ds-link small { margin-left: auto; color: var(--ds-muted); font-size: 12px; }
.ds-sub { padding-left: 14px; }
.ds-sub .ds-link { font-size: 13.5px; padding: 4px 10px; }
.ds-side-foot { margin-top: auto; padding: 18px 10px 0; font-size: 12px; color: var(--ds-muted); }

/* ---------- frame ---------- */
.ds-main { padding: 0; min-width: 0; background: var(--ds-frame); }
.ds-frame { background: var(--ds-frame); border: 0; border-radius: 0; min-height: 100vh; overflow: hidden; }
.ds-page { padding: 40px 40px 72px; max-width: 1040px; }
.ds-page--wide { max-width: none; }
.ds-eyebrow { font-size: 12px; color: var(--ds-muted); margin-bottom: 4px; }
.ds-h1 { font: 500 30px/1.15 var(--ds-ui); letter-spacing: -.02em; margin: 0 0 8px; }
.ds-lede { color: var(--ds-muted); margin: 0 0 28px; max-width: 70ch; }
.ds-h2 { font: 600 17px/1.3 var(--ds-ui); margin: 36px 0 12px; }

/* cover */
.ds-cover { position: relative; border-bottom: 1px solid var(--ds-line); overflow: hidden; background: var(--canvas); }
.ds-cover iframe { position: absolute; top: 0; left: 0; width: 960px; border: 0; transform-origin: 0 0; background: transparent; }

/* ---------- hero + sticky section strip (overview, full-bleed above sidebar) ---------- */
.ds-hero { position: relative; width: 100%; max-width: 1910px; margin: 0 auto; overflow: hidden; background: var(--canvas); }
.ds-hero .ds-cover { position: absolute; inset: 0; border-bottom: 0; }

.ds-nav-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: var(--ds-frame); border-bottom: 1px solid var(--ds-line);
  box-shadow: 0 10px 24px -18px rgba(0,0,0,.25);
}
.ds-hero { margin-bottom: 0; display: block; line-height: 0; }
.ds-hero .ds-cover iframe { display: block; }
/* strip now sits flush below the hero so the full SVG stays visible */
.ds-nav-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px; min-height: 96px;
  text-decoration: none; color: var(--on-navy);
  border-right: 1px solid rgba(255,255,255,.14);
  transition: filter .18s ease, transform .18s ease;
}
.ds-nav-tile:last-child { border-right: 0; }
.ds-nav-tile:hover { filter: brightness(1.06); }
.ds-nav-tile:active { transform: translateY(1px); }
.ds-nav-tile__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; }
.ds-nav-tile__icon svg { width: 32px; height: 32px; }
.ds-nav-tile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-nav-tile__text b { font: 600 17px/1.2 var(--ds-ui); letter-spacing: -.01em; }
.ds-nav-tile__text small { font-size: 12.5px; opacity: .82; }

.ds-nav-tile--brand  { background: var(--brand);         color: var(--on-navy); }
.ds-nav-tile--navy   { background: var(--navy);          color: var(--on-navy); }
.ds-nav-tile--soft   { background: var(--brand-soft);    color: var(--brand-strong); }
.ds-nav-tile--sunken { background: var(--ds-sources); color: var(--ink); }

/* ---------- floating action buttons (bottom-right) ---------- */
.ds-floaters {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: flex; flex-direction: column; gap: 12px;
}
.ds-fab {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--ds-frame); color: var(--ds-ink);
  border: 1px solid var(--ds-line); border-radius: 999px;
  cursor: pointer; padding: 0;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.3), 0 2px 6px -2px rgba(0,0,0,.15);
  transition: transform .15s ease, background .15s ease;
}
.ds-fab:hover { background: var(--ds-hover); transform: translateY(-1px); }
.ds-fab:active { transform: translateY(0); }
.ds-fab svg { width: 20px; height: 20px; }
.ds-fab--top { opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .15s ease; }
.ds-fab--top.is-visible { opacity: 1; pointer-events: auto; }
.ds-nav-tile--soft   { border-right-color: rgba(0,0,0,.08); }
.ds-nav-tile--sunken { border-right-color: rgba(0,0,0,.08); }
[data-theme="dark"] .ds-nav-tile--soft   { border-right-color: rgba(255,255,255,.08); }
[data-theme="dark"] .ds-nav-tile--sunken { border-right-color: rgba(255,255,255,.08); }

/* ---------- markdown ---------- */
.md { font-size: 16.5px; line-height: 1.6; max-width: 78ch; }
.md h1 { font: 500 28px/1.2 var(--ds-ui); letter-spacing: -.02em; margin: 0 0 16px; }
.md h2 { font: 600 19px/1.3 var(--ds-ui); margin: 36px 0 12px; }
.md h3 { font: 600 16px/1.35 var(--ds-ui); margin: 26px 0 8px; }
.md p { margin: 0 0 14px; }
.md ul, .md ol { margin: 0 0 16px; padding-left: 22px; }
.md li { margin: 6px 0; }
.md li::marker { color: var(--ds-muted); }
.md code { font: 13.5px/1.4 var(--font-mono); background: var(--ds-hover); border: 1px solid var(--ds-line); border-radius: 6px; padding: 1px 5px; }
.md pre { background: var(--ds-hover); border: 1px solid var(--ds-line); border-radius: 12px; padding: 14px 16px; overflow-x: auto; }
.md pre code { background: none; border: 0; padding: 0; }
.md strong { font-weight: 600; }
.md table { border-collapse: collapse; font-size: 14px; margin: 0 0 16px; }
.md th, .md td { border: 1px solid var(--ds-line); padding: 6px 10px; text-align: left; }

/* ---------- token tables ---------- */
.tk { border: 1px solid var(--ds-line); border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.tk-head, .tk-row { display: grid; grid-template-columns: 200px repeat(var(--cols), 120px) minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 16px; }
.tk-head { font-size: 12px; color: var(--ds-muted); border-bottom: 1px solid var(--ds-line); padding-block: 8px; }
.tk-row + .tk-row { border-top: 1px solid var(--ds-line); }
.tk-name { font: 13px/1.3 var(--font-mono); word-break: break-all; }
.tk-usage { font-size: 13.5px; color: var(--ds-muted); }
.tk-val { display: flex; align-items: center; gap: 10px; font: 12px/1.3 var(--font-mono); color: var(--ds-muted); }
.sw { width: 36px; height: 36px; flex: none; border-radius: 10px; border: 1px solid var(--ds-line); }
.tk-group { font-size: 12px; color: var(--ds-muted); padding: 8px 16px; background: var(--ds-hover); }
.bar { height: 14px; background: var(--brand); border-radius: 3px; }
.rad { width: 56px; height: 40px; background: var(--surface-sunken); border: 1.5px solid var(--line-strong); }
.shd { width: 120px; height: 64px; border-radius: 12px; background: var(--surface); }

/* type specimens */
.ty { border: 1px solid var(--ds-line); border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.ty-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 18px 16px; align-items: baseline; }
.ty-row + .ty-row { border-top: 1px solid var(--ds-line); }
.ty-meta { font-size: 12px; color: var(--ds-muted); line-height: 1.5; }
.ty-meta b { display: block; font: 13px/1.4 var(--font-mono); color: var(--ds-ink); font-weight: 400; }
.ty-sample { color: var(--ink); overflow-wrap: anywhere; }
.fam { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--ds-line); border-radius: 14px; margin-bottom: 10px; }
.fam code { font: 12px/1.4 var(--font-mono); color: var(--ds-muted); }

/* ---------- components ---------- */
.cg { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cc { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--ds-line); border-radius: 14px; text-decoration: none; background: var(--ds-frame); }
.cc:hover { background: var(--ds-hover); }
.cc b { font-weight: 600; }
.cc span { font-size: 13.5px; color: var(--ds-muted); }
.stage { border: 1px solid var(--ds-line); border-radius: 16px; background: var(--canvas); overflow: hidden; margin: 8px 0 28px; }
.stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--ds-line); font-size: 12px; color: var(--ds-muted); background: var(--ds-frame); }
.stage iframe { display: block; width: 100%; border: 0; background: transparent; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--ds-line); border-radius: 999px; font-size: 12.5px; text-decoration: none; background: var(--ds-frame); }
.pill:hover { background: var(--ds-hover); }
.props { width: 100%; border-collapse: collapse; font-size: 13.5px; border: 1px solid var(--ds-line); border-radius: 14px; overflow: hidden; }
.props th { text-align: left; font-weight: 500; font-size: 12px; color: var(--ds-muted); padding: 8px 14px; border-bottom: 1px solid var(--ds-line); }
.props td { padding: 10px 14px; border-top: 1px solid var(--ds-line); vertical-align: top; }
.props code { font: 12.5px/1.45 var(--font-mono); }
.props td:first-child code { color: var(--ds-ink); font-weight: 500; }
.props td:nth-child(2) code { color: var(--ds-muted); white-space: pre-wrap; word-break: break-word; }
.req { font-size: 11px; color: var(--ds-muted); margin-left: 6px; }

/* ---------- files ---------- */
.fl { border: 1px solid var(--ds-line); border-radius: 14px; overflow: hidden; }
.fl-dir { padding: 8px 16px; font-size: 12px; color: var(--ds-muted); background: var(--ds-hover); border-top: 1px solid var(--ds-line); }
.fl-dir:first-child { border-top: 0; }
.fl-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-top: 1px solid var(--ds-line); font-size: 14px; text-decoration: none; }
.fl-row:hover { background: var(--ds-hover); }
.fl-row code { font: 13px/1.4 var(--font-mono); }
.fl-row small { margin-left: auto; color: var(--ds-muted); font-size: 12px; }
.fl-row svg { width: 16px; height: 16px; color: var(--ds-muted); flex: none; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- hamburger (hidden on desktop) ---------- */
.ds-burger {
  display: none;
  align-items: center; justify-content: center;
  position: fixed; top: 14px; right: 16px; z-index: 60;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-width: 44px; max-height: 44px;
  padding: 0; line-height: 0;
  background: var(--ds-frame); color: var(--ds-ink);
  border: 1px solid var(--ds-line); border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.3);
  flex: none;
}
.ds-burger svg { width: 22px !important; height: 22px !important; display: block; flex: none; }
.ds-burger__a, .ds-burger__b, .ds-burger__c { transition: transform .2s ease, opacity .2s ease; transform-origin: 50% 50%; }
.ds-burger[aria-expanded="true"] .ds-burger__a { transform: translateY(5px) rotate(45deg); }
.ds-burger[aria-expanded="true"] .ds-burger__b { opacity: 0; }
.ds-burger[aria-expanded="true"] .ds-burger__c { transform: translateY(-5px) rotate(-45deg); }
.ds-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 45; }

@media (max-width: 820px) {
  .ds-burger { display: flex; }
  .ds-shell { grid-template-columns: 1fr; }
  .ds-side {
    position: fixed; top: 0; left: 0;
    width: min(84vw, 320px); height: 100vh;
    padding: 72px 12px 24px; z-index: 50;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 4px 0 24px -8px rgba(0,0,0,.35);
  }
  .ds-side.is-open { transform: translateX(0); }
  .ds-main { padding: 0; }
  .ds-page { padding: 24px 18px 56px; }
  .ds-h1 { font-size: 24px; }

  /* strip stacks 2x2 */
  .ds-nav-strip { grid-template-columns: 1fr 1fr; }
  .ds-nav-tile { min-height: 80px; padding: 14px 16px; gap: 12px; }
  .ds-nav-tile__icon { width: 32px; height: 32px; }
  .ds-nav-tile__icon svg { width: 26px; height: 26px; }
  .ds-nav-tile__text b { font-size: 15px; }
  .ds-nav-tile__text small { font-size: 11.5px; }

  /* reserve top-right room so the strip doesn't collide with the burger */
  .ds-nav-strip { padding-top: 0; }

  /* floating buttons move up a bit to clear mobile browser chrome */
  .ds-floaters { right: 14px; bottom: 14px; }

  /* tables */
  .tk-head { display: none; }
  .tk-row { grid-template-columns: 1fr 1fr; }
  .tk-usage { grid-column: 1 / -1; }
  .ty-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .ds-nav-strip { grid-template-columns: 1fr 1fr; }
  .ds-nav-tile__text small { display: none; }
}