/**
 * Style guide — the living design-system document.
 * Loaded only by the "Style guide" page template.
 */

.doc{max-width:1160px;margin:0 auto;padding:0 32px 160px;position:relative;z-index:1}
.doc .sec{margin-top:120px;position:relative;scroll-margin-top:110px}
.doc .sec > .idx{font-family:var(--f-mono);font-size:12px;color:var(--fg-dim);
  letter-spacing:.14em;margin-bottom:12px}
.doc .sec > h2{font-family:var(--f-display);font-size:clamp(30px,4vw,46px);line-height:1.06;
  letter-spacing:-.022em;font-weight:900;font-stretch:85%}
.doc .sec > .sub{color:var(--fg-subtle);margin-top:14px;max-width:64ch;font-size:17px}
.doc h3{font-family:var(--f-display);font-size:22px;font-weight:800;font-stretch:85%;
  letter-spacing:-.012em;margin:52px 0 8px}
.doc .note{font-size:15px;color:var(--fg-subtle);max-width:66ch;margin-bottom:20px;line-height:1.6}
.doc .note b,.doc .sub b{color:var(--fg);font-weight:600}
.doc code{font-family:var(--f-mono);font-size:.86em;background:var(--w-06);
  color:var(--accent);padding:2px 6px;border-radius:5px}
.doc em.hl{font-style:normal;color:var(--fg)}

/* ── token ladder ── */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.rung{background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--card-radius);padding:24px;position:relative;overflow:hidden}
.rung::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--w-12),transparent)}
.rung .n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-dim);font-weight:600}
.rung .rh{font-family:var(--f-display);font-size:18px;font-weight:800;font-stretch:85%;
  margin:10px 0 8px;letter-spacing:-.01em}
.rung p{font-size:14px;color:var(--fg-subtle);line-height:1.55}
.rung pre{font-family:var(--f-mono);font-size:11.5px;line-height:1.8;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--border-hair);color:var(--fg-dim);
  overflow-x:auto;white-space:pre}
.rung pre b{color:var(--accent);font-weight:500}
.rung pre i{color:var(--fg-muted);font-style:normal}

/* ── swatches ──
   NOT .chip — reusing that class meant inheriting display:inline-flex and the
   ::before dot, so every swatch shrank to 30px and grew a grey pip in it. */
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:14px;margin-top:26px}
.sw{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-md);
  padding:14px;transition:border-color var(--t-2) var(--e-out)}
.sw:hover{border-color:var(--border)}
.sw .band{display:block;width:100%;height:64px;border-radius:10px;margin-bottom:12px;
  border:1px solid var(--w-08)}
.sw .nm{font-size:13.5px;font-weight:600;font-family:var(--f-display)}
.sw .hx{font-family:var(--f-mono);font-size:11px;color:var(--fg-dim);text-transform:uppercase;margin-top:2px}
.sw .cr{font-family:var(--f-mono);font-size:10.5px;font-weight:600;margin-top:9px;
  padding-top:9px;border-top:1px solid var(--border-hair)}
.cr.ok{color:var(--accent)} .cr.no{color:var(--danger)} .cr.na{color:var(--fg-dim)}
.sw .u{font-size:12px;color:var(--fg-subtle);margin-top:7px;line-height:1.45}

/* ── specimen stage ── */
.stage{background:var(--bg-void);border:1px solid var(--border-hair);
  border-radius:var(--card-radius);padding:32px;margin:20px 0 34px}
.stage .cap{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-dim);font-weight:600;margin-bottom:22px}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ── do / don't ── */
.dd{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.dd > div{background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--r-md);padding:22px}
.dd .do{border-left:2px solid var(--accent)}
.dd .no{border-left:2px solid var(--danger)}
.dd .ddh{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;margin:0 0 14px}
.dd .do .ddh{color:var(--accent)} .dd .no .ddh{color:var(--danger)}
.dd ul{list-style:none;padding:0}
.dd li{font-size:14px;color:var(--fg-subtle);margin-bottom:10px;line-height:1.55;
  padding-left:16px;position:relative}
.dd li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:1px;background:var(--fg-dim)}

/* ── code block ── */
pre.code{font-family:var(--f-mono);font-size:12.5px;line-height:1.85;background:var(--bg-void);
  border:1px solid var(--border-hair);border-radius:var(--r-md);padding:24px;overflow-x:auto;
  color:var(--fg-subtle);margin:18px 0}
pre.code:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
pre.code .c{color:var(--fg-dim)}
pre.code .k{color:var(--accent)}
pre.code .s{color:var(--fg)}

/* ── the substrate specimen ── */
.substrate{position:relative;height:340px;border-radius:var(--card-radius);overflow:hidden;
  background:var(--bg-void);border:1px solid var(--border-hair)}
.substrate canvas{display:block;width:100%;height:100%}
.substrate .hud{position:absolute;left:20px;bottom:18px;display:flex;gap:10px;
  align-items:center;pointer-events:none}
.substrate .hud .t{font-family:var(--f-mono);font-size:11px;color:var(--fg-dim);letter-spacing:.06em}
.substrate .ctl{position:absolute;right:18px;bottom:16px;display:flex;gap:8px}

/* ── tables inside the doc ── */
.doc table{width:100%;border-collapse:collapse;font-size:14.5px;margin:20px 0 30px}
.doc th{text-align:left;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-dim);font-weight:600;padding:0 18px 12px 0;
  border-bottom:1px solid var(--border)}
.doc td{padding:14px 18px 14px 0;border-bottom:1px solid var(--border-hair);
  color:var(--fg-subtle);vertical-align:top}
.doc td:first-child{color:var(--fg);font-weight:500}
.doc tbody tr{transition:background var(--t-1) var(--e-out)}
.doc tbody tr:hover{background:var(--w-04)}

@media(max-width:900px){
  .ladder,.dd{grid-template-columns:1fr}
  .doc{padding:0 20px 100px}
}