/* legacy-pages.css—v2 design overlay for sub-pages
 *
 * Loaded alongside styles.css on every sub-page (playbook, author-playbooks,
 * experiments, style-guide, grader, archive, snapshots). Re-themes the legacy
 * class names emitted by generate_site.py with v2 design tokens so the whole
 * site renders consistently with the new home.
 *
 * Sub-pages keep their existing HTML structure; this stylesheet replaces the
 * embedded <style> blocks that previously shipped per page.
 */

/* ── Base palette / typography (matches styles.css; defensive in case
       a sub-page is loaded standalone) ──────────────────────────────────── */

html, body {
  background: var(--bg-0);
  color: var(--t-1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

body { min-height: 100vh; }

a { color: var(--go); text-decoration: none; }
a:hover { color: var(--t-1); }

code, pre, .mono { font-family: var(--font-mono); }

/* ── Site-nav (legacy header bar) re-themed to match home subnav ──────── */

.site-nav {
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  height: 44px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}

.nav-links { display: flex; align-items: center; gap: 0; }

.nav-links a {
  color: var(--t-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 14px;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover { color: var(--t-1); background: var(--bg-2); }
.nav-links a.active { color: var(--t-1); border-bottom-color: var(--go); }

.nav-sep { display: none; }

.theme-toggle {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--t-3);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--t-1); border-color: var(--line-bright); }

/* ── Container + base type ────────────────────────────────────────────── */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 28px 80px;
}

h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--t-1);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--t-2);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 28px 0 12px;
}

h3 { font-size: 14px; color: var(--t-1); margin: 16px 0 8px; }

.sub, .subtitle, .intro, .platform-intro {
  color: var(--t-3);
  font-size: 13px;
  margin-bottom: 24px;
}

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t-3);
  margin-bottom: 6px;
}

.run-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 24px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.run-label { font-size: 15px; font-weight: 600; color: var(--t-1); }
.run-meta, .run-status, .meta { color: var(--t-3); font-size: 12px; font-family: var(--font-mono); }
.run-expand-hint { font-family: var(--font-mono); font-size: 11px; color: var(--t-4); }

.footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--t-4);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* ── Tile grid (playbook + author-playbooks pattern) ──────────────────── */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.tile-grid-compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.pb-tile, .exp-card, .hcard {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--t-4);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.pb-tile:hover, .exp-card:hover, .hcard:hover {
  background: var(--bg-3);
  border-color: var(--line-bright);
}
.pb-tile.open, .pb-tile.expanded, .hcard.expanded {
  border-color: var(--go);
  border-left-color: var(--go);
  background: var(--bg-3);
}

.tile-label, .tile-claim, .exp-title, .hcard-hl {
  font-size: 13px;
  color: var(--t-1);
  margin-bottom: 6px;
  line-height: 1.4;
}
.tile-action, .exp-meta, .hcard-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-3);
}
.tile-toggle, .hcard-toggle {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Drawer body—hidden by default, revealed when parent has .expanded.
   Mirrors the home tile pattern. */
.pb-detail, .past-run-details, .hist-details, .hcard-criteria {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  color: var(--t-2);
  font-size: 13px;
  line-height: 1.55;
}
.pb-tile.expanded .pb-detail,
.pb-tile.open .pb-detail,
.hcard.expanded .hcard-criteria,
.hist-day.expanded .hist-details,
.past-run-summary.expanded .past-run-details { display: block; }
.hist-day.expanded .hist-details { display: flex; flex-direction: column; gap: 4px; }
.hcard, .hist-day { cursor: pointer; }
.hcard-toggle { color: var(--t-4); margin-left: 6px; font-size: 11px; }
.hcard:not(.expanded) .hcard-toggle::before { content: '▸'; }
.hcard.expanded .hcard-toggle::before { content: '▾'; }
.hist-day:not(.expanded) .hist-expand::before { content: '▸ '; }
.hist-day.expanded .hist-expand::before { content: '▾ '; }

/* ── Confidence + verdict pills ───────────────────────────────────────── */

.conf-badge, .conf-dir, .tier-badge, .vert-badge, .method-badge,
.tag, .chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--t-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.conf-high, .tier-bonferroni-fail, .ld-bonferroni-fail {
  background: rgba(56,189,248,.10);
  border-color: rgba(56,189,248,.30);
  color: var(--conf-high);
}
.conf-mod, .tier-directional, .ld-directional {
  background: rgba(192,132,252,.10);
  border-color: rgba(192,132,252,.30);
  color: var(--conf-mod);
}
.conf-low, .tier-underpowered, .tier-untested,
.ld-underpowered, .ld-untested {
  background: rgba(148,163,184,.08);
  border-color: rgba(148,163,184,.30);
  color: var(--conf-low);
}

.tag-green { background: var(--go-bg); border-color: var(--go-line); color: var(--go); }
.tag-red   { background: var(--skip-bg); border-color: var(--skip-line); color: var(--skip); }

.method-llm { background: rgba(168,85,247,.10); border-color: rgba(168,85,247,.30); color: var(--ent-accent); }
.method-obj { background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.30); color: var(--go); }

/* ── Lift indicators ──────────────────────────────────────────────────── */

.lift-high, .lift-pos { color: var(--go); font-family: var(--font-mono); font-weight: 500; }
.lift-neg { color: var(--skip); font-family: var(--font-mono); font-weight: 500; }

/* ── Tables (agg-tbl pattern) ─────────────────────────────────────────── */

.agg-tbl, .table-wrap table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
}
.agg-tbl th, .table-wrap th {
  background: var(--bg-2);
  color: var(--t-3);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.agg-tbl td, .table-wrap td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--t-2);
}
.agg-tbl tr:last-child td, .table-wrap tr:last-child td { border-bottom: none; }
.agg-tbl tr:hover td, .table-wrap tr:hover td { background: var(--bg-2); color: var(--t-1); }

.cnt-cell { font-family: var(--font-mono); color: var(--t-2); text-align: right; }
.agg-tbl th.num, .table-wrap th.num,
.agg-tbl td.num, .table-wrap td.num { text-align: right; }
.agg-tbl th.center, .table-wrap th.center,
.agg-tbl td.center, .table-wrap td.center { text-align: center; }

/* ── Grader-specific ──────────────────────────────────────────────────── */

.chips, .badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-lbl { color: var(--t-3); font-family: var(--font-mono); font-size: 10px; }
.chip-val { color: var(--t-1); font-family: var(--font-mono); font-size: 11px; }

.cr-pass    { color: var(--go); }
.cr-fail    { color: var(--skip); }
.cr-pending { color: var(--t-4); }
.cr-info-on { color: var(--t-1); }
.cr-info-off{ color: var(--t-4); }
.cr-badge   { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--bg-3); }

.btn-run, .run-btn, .export-btn {
  background: var(--go-bg);
  color: var(--go);
  border: 1px solid var(--go-line);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.btn-run:hover, .run-btn:hover, .export-btn:hover {
  background: var(--go); color: var(--bg-0);
}
.btn-cancel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--t-2);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
}

.pass-bar {
  background: var(--bg-3);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.pass-fill {
  background: var(--go);
  height: 100%;
}

.hist-strip {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}
.hist-day {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-3);
  min-width: 80px;
  flex: 0 0 80px;
  align-self: flex-start;        /* expanded tiles don't stretch siblings */
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hist-day:hover { border-color: var(--line-bright); }
.hist-date { color: var(--t-4); }
.hist-avg  { color: var(--t-1); font-size: 16px; line-height: 1.1; }
.hist-expand { color: var(--t-4); font-size: 9px; margin-top: 2px; }
.hist-n    { color: var(--t-1); font-size: 11px; }
.hist-issue { color: var(--skip); margin-top: 2px; font-size: 9px; line-height: 1.3; }
.hist-day.expanded {
  /* expanded tile widens to fit inline headline lists */
  flex: 0 0 auto;
  min-width: 280px;
  max-width: 360px;
}
.hist-list-head {
  font-size: 10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--t-3);
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.hist-hl-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
}
.hist-hl-list li {
  padding: 2px 0;
  color: var(--t-2);
  word-break: break-word;
  white-space: normal;
}
.hist-hl-list li .hl-text { color: var(--t-1); }

/* ── Experiments-specific ─────────────────────────────────────────────── */

.exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.exp-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.exp-field { font-family: var(--font-mono); font-size: 11px; color: var(--t-2); }
.field-label { color: var(--t-3); display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }
.exp-priority { font-family: var(--font-mono); font-size: 11px; color: var(--test); }
.exp-platform { color: var(--t-3); font-family: var(--font-mono); font-size: 11px; }
.exp-empty { color: var(--t-4); font-style: italic; padding: 24px; text-align: center; }

.exp-report-list { list-style: none; padding: 0; margin: 0; }
.exp-report-list li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.exp-report-list li:last-child { border-bottom: none; }
.exp-report-verdict { font-family: var(--font-mono); font-size: 10px; color: var(--t-3); }

/* ── Style-guide-specific ─────────────────────────────────────────────── */

.platform-section { margin-bottom: 32px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 16px 0; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.legend-item { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--t-3); }
.legend-dot, .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--t-4); }
.dot.tag-green { background: var(--go); }
.dot.tag-red   { background: var(--skip); }

.rule {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--go);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.rule-text { font-size: 13px; color: var(--t-1); }
.rule-context, .rule-context-body { font-size: 12px; color: var(--t-3); margin-top: 6px; }
.rule-note { font-family: var(--font-mono); font-size: 11px; color: var(--t-3); }
.rule-top, .rh, .priority-heading { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--t-3); margin-bottom: 6px; }

/* ── Misc widgets ─────────────────────────────────────────────────────── */

.callout, .caveat, .warn {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--test);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 10px 0;
  color: var(--t-2);
  font-size: 13px;
}
.warn { border-left-color: var(--skip); }


/* Run-now modal on /grader/—generate_grader.py emits the markup;
   this stylesheet sizes + animates it. */
.grader-modal {
  position: fixed; inset: 0;
  background: rgba(7, 9, 13, 0.85);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
}
.grader-modal.open { display: flex; }
.grader-box {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  max-width: 600px;
  width: 92%;
}
.grader-box h3 { font-size: 16px; margin: 0 0 8px; color: var(--t-1); font-family: var(--font-sans); text-transform: none; letter-spacing: 0; }
.grader-box p { font-size: 13px; color: var(--t-2); margin: 0 0 14px; line-height: 1.5; }
.pat-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.pat-group label { font-family: var(--font-mono); font-size: 11px; color: var(--t-3); letter-spacing: 0.04em; text-transform: uppercase; }
.pat-group input {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--t-1);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.pat-group input:focus { outline: none; border-color: var(--line-bright); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

.detail-sub { color: var(--t-3); font-size: 12px; margin-top: 4px; }
.sort-icon { color: var(--t-4); font-family: var(--font-mono); font-size: 9px; }
.tier-row, .past-list, .past-section, .past-run-summary, .past-run-body { color: var(--t-2); font-size: 13px; }
.tier-hdr { color: var(--t-3); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; margin: 16px 0 6px; }
.tier-lbl { color: var(--t-1); }

/* .brand styling lives in styles.css—must match keywords console exactly.
   No override here. */

.findings { margin-top: 18px; }
.section-eyebrow { margin-top: 24px; }
.priority-section { margin: 20px 0; }

.hl-link { color: var(--t-1); }
.hl-link:hover { color: var(--go); }

.expanded { background: var(--bg-3); }

/* hide noisy theme switcher; v2 is dark-only */
.theme-toggle { display: none; }
body.light { /* legacy light-mode tokens—overridden to dark v2 */ }

/* ── Docs page (mirrors keywords console docs.jsx) ──────────────────────── */

.docs-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  height: calc(100vh - 65px);
  min-height: 0;
}
.docs-toc {
  border-right: 1px solid var(--line);
  background: var(--bg-1);
  padding: 18px 16px 40px;
  overflow-y: auto;
  font-size: 12px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100%;
}
.docs-toc .toc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-1);
  letter-spacing: -0.01em;
  font-family: var(--font-sans);
}
.docs-toc .toc-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-4);
  letter-spacing: 0.05em;
  margin-top: 2px;
  margin-bottom: 12px;
}
.toc-search {
  display: block;
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--t-1);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 8px;
  margin-bottom: 14px;
  outline: none;
}
.toc-search:focus { border-color: var(--go); background: var(--bg-1); }
.toc-empty {
  font-size: 11px; color: var(--t-4); font-style: italic;
  padding: 8px; background: var(--bg-2); border-radius: 3px; margin-bottom: 12px;
}
.toc-group { margin-bottom: 14px; }
.toc-group-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--t-4);
  margin-bottom: 4px;
  padding: 0 8px;
}
.toc-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--t-2);
  padding: 5px 8px 5px 10px;
  font-size: 12px;
  letter-spacing: -0.005em;
  border-radius: 0 3px 3px 0;
  line-height: 1.35;
  cursor: pointer;
  font-family: inherit;
}
.toc-item:hover { color: var(--t-1); background: var(--bg-2); }
.toc-item.active {
  color: var(--go);
  border-left-color: var(--go);
  background: var(--bg-2);
}
.docs-content {
  overflow-y: auto;
  padding: 0;
  scroll-behavior: smooth;
}
.docs-prose {
  max-width: 820px;
  padding: 30px 48px 120px;
  color: var(--t-1);
  font-size: 14px;
  line-height: 1.65;
}
.docs-prose section {
  padding-top: 8px;
  margin-bottom: 32px;
  scroll-margin-top: 16px;
}
.docs-part-banner {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  margin: 48px 0 24px;
  text-align: center;
}
.docs-prose section:first-of-type { margin-top: 0; }
.docs-prose h1 {
  font-size: 26px; font-weight: 600;
  letter-spacing: -0.015em;
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--t-1);
  text-transform: none;
  font-family: var(--font-sans);
}
.docs-prose section:first-child h1 { margin-top: 0; }
.docs-prose h2 {
  font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 24px 0 10px;
  color: var(--t-1);
  text-transform: none;
  font-family: var(--font-sans);
  border-bottom: none;
}
.docs-prose h3 {
  font-size: 14px; font-weight: 600;
  margin: 18px 0 6px;
  color: var(--t-1);
  text-transform: none;
  font-family: var(--font-sans);
  letter-spacing: 0;
}
.docs-prose p { margin: 0 0 12px; color: var(--t-2); }
.docs-prose .lede {
  font-size: 16px;
  color: var(--t-1);
  margin-bottom: 16px;
}
.docs-prose ul, .docs-prose ol {
  margin: 0 0 12px;
  padding-left: 22px;
  color: var(--t-2);
}
.docs-prose li { margin-bottom: 6px; line-height: 1.55; }
.docs-prose b { color: var(--t-1); font-weight: 600; }
.docs-prose em { color: var(--t-1); font-style: italic; }
.docs-prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 0 5px;
  border-radius: 3px;
  color: var(--t-1);
  word-break: break-word;
  vertical-align: baseline;
}
.docs-prose pre {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--t-1);
  margin: 8px 0 14px;
}
.docs-prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.docs-prose a {
  color: var(--go);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed rgba(74,222,128,.4);
}
.docs-prose a:hover { border-bottom-style: solid; color: var(--t-1); }
.docs-prose .note, .docs-prose .warn, .docs-prose .caveat {
  border-left: 2px solid var(--test);
  padding: 10px 14px;
  background: rgba(251,191,36,.05);
  font-size: 13px;
  color: var(--t-1);
  border-radius: 0 3px 3px 0;
  margin: 10px 0;
}
.docs-prose .warn { border-left-color: var(--skip); background: rgba(248,113,113,.05); }

.docs-tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
  font-size: 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.docs-tbl th, .docs-tbl td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--t-2);
  vertical-align: top;
}
.docs-tbl tr:last-child td { border-bottom: 0; }
.docs-tbl th {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t-4);
  font-weight: 500;
  background: var(--bg-2);
}
.docs-tbl td b { color: var(--t-1); }
.docs-tbl.kbd-tbl td:first-child { font-family: var(--font-mono); width: 140px; }

.docs-prose kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-3);
  border: 1px solid var(--line-bright);
  border-bottom-width: 2px;
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--t-1);
  margin: 0 2px;
}

/* Mobile fallback */
@media (max-width: 900px) {
  .docs-shell { grid-template-columns: 1fr; height: auto; }
  .docs-toc { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .docs-prose { padding: 24px 20px 60px; max-width: 100%; }
}