/* ============================================================================
 * guides.css — component + layout styles for `scaffold guides` reference pages.
 *
 * Pairs with lib/dashboard-theme.css (the token source) and src/guides/chrome.ts
 * (the behavior). Styles the guide CHROME (.topbar, .layout, .rail, nav.toc,
 * .content) and the markdown DIRECTIVES (callouts, sev chips, filter-tables,
 * charts, tabs, citations) plus base prose typography.
 *
 * DESIGN SYSTEM: all COLORS come from dashboard-theme.css tokens, and spacing
 * uses the --sp-* scale wherever it maps. The few structural layout constants
 * (topbar height, rail/drawer width, chart label column, card min) are declared
 * as local custom properties below; a handful of sub-scale UI values (chip/bar
 * sizing, em-based inline-code padding) and the responsive breakpoint are
 * literal because no token expresses them. Both themes are covered because every
 * color is a token.
 * ==========================================================================*/

:root {
  --topbar-h: 52px;       /* sticky topbar height; rail sticky offset keys off it */
  --rail-w: 260px;        /* desktop TOC sidebar column */
  --drawer-w: 280px;      /* mobile off-canvas TOC drawer */
  --card-min: 260px;      /* index card min track width */
  --chart-label-w: 90px;  /* chart row label column min */
}

/* ── Base / reset on top of the token base in dashboard-theme.css ─────────── */
.content a { color: var(--accent); text-decoration: none; }
.content a:hover { text-decoration: underline; }
.content strong { font-weight: var(--fw-semi); }
.content hr { border: 0; border-top: 1px solid var(--border-light); margin: var(--sp-6) 0; }

/* Consistent keyboard focus for every interactive control (a11y). */
.topbar button:focus-visible,
.copy-btn:focus-visible,
.tab-btn:focus-visible,
.filter-input:focus-visible,
nav.toc a:focus-visible,
.guide-card:focus-visible,
.content a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* ── Topbar ────────────────────────────────────────────────────────────────*/
.topbar {
  position: sticky; top: 0; z-index: 60; height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--page-pad);
  background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.topbar h1 {
  flex: 1; min-width: 0; margin: 0;
  font-size: var(--text-lg); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar button {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-3); font-size: var(--text-base);
  line-height: 1; cursor: pointer; font-family: inherit;
}
.topbar button:hover { background: var(--bg-hover); border-color: var(--accent); }
.nav-toggle { display: none; }

/* ── Layout: sticky sidebar TOC + reading-width content ──────────────────── */
.layout {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: var(--sp-8); padding: 0 var(--page-pad);
}
.rail {
  position: sticky; top: var(--topbar-h); align-self: start;
  height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  padding: var(--sp-5) 0; border-right: 1px solid var(--border-light);
}
.content { min-width: 0; padding: var(--sp-6) 0 var(--sp-10); }

/* Backdrop behind the mobile drawer (toggled with the rail via chrome.ts). */
.rail-backdrop { display: none; }
/* In-drawer close button — hidden on desktop (the rail is a static sidebar). */
.rail-close { display: none; }

/* ── Table of contents (scrollspy marks a.active) ────────────────────────── */
nav.toc ul { list-style: none; margin: 0; padding: 0; }
nav.toc li { margin: 0; }
nav.toc a {
  display: block; padding: var(--sp-1) var(--sp-3); line-height: 1.35;
  color: var(--text-muted); font-size: var(--text-sm);
  text-decoration: none; border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
nav.toc a:hover { color: var(--text); background: var(--bg-hover); }
nav.toc a.active {
  color: var(--accent); border-left-color: var(--accent);
  background: var(--accent-glow); font-weight: var(--fw-medium);
}
nav.toc li.toc-3 a { padding-left: var(--sp-6); font-size: var(--text-xs); }

/* ── Prose typography ──────────────────────────────────────────────────────*/
.content h2 {
  font-size: var(--text-xl); letter-spacing: var(--ls-tight);
  margin: var(--sp-8) 0 var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-light); scroll-margin-top: calc(var(--topbar-h) + var(--sp-3));
}
.content h3 {
  font-size: var(--text-lg); margin: var(--sp-5) 0 var(--sp-2);
  scroll-margin-top: calc(var(--topbar-h) + var(--sp-3));
}
.content p { margin: var(--sp-3) 0; line-height: var(--lh-relaxed); }
.content ul, .content ol { margin: var(--sp-3) 0; padding-left: var(--sp-6); }
.content li { margin: var(--sp-1) 0; line-height: var(--lh-relaxed); }
.content blockquote {
  margin: var(--sp-3) 0; padding: var(--sp-1) var(--sp-4);
  border-left: 3px solid var(--border); color: var(--text-muted);
}

/* ── Inline code + code blocks (chrome.ts wraps <pre> in .code + .copy-btn) ──*/
.content code {
  font-family: var(--font-mono); font-size: 0.85em;
  background: var(--bg-inset); padding: 0.12em 0.4em; border-radius: var(--radius-sm);
}
.content .code { position: relative; margin: var(--sp-3) 0; }
.content .code pre {
  margin: 0; padding: var(--sp-3) var(--sp-4); overflow-x: auto;
  background: var(--bg-inset); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); font-family: var(--font-mono);
  font-size: var(--text-sm); line-height: var(--lh-relaxed);
}
.content .code pre code { background: none; padding: 0; font-size: inherit; }
.copy-btn {
  position: absolute; top: var(--sp-1); right: var(--sp-1);
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted);
  border-radius: var(--radius-sm); font-size: var(--text-xs); padding: var(--sp-1) var(--sp-2);
  cursor: pointer; opacity: 0.85; font-family: inherit;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent); opacity: 1; }

/* ── Callouts ─ (border-color BEFORE border-left-color so the accent wins) ── */
.callout {
  margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius-sm); background: var(--bg-card);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout-note, .callout-info { background: var(--blue-bg);   border-color: var(--blue-border);   border-left-color: var(--blue); }
.callout-tip                 { background: var(--green-bg);  border-color: var(--green-border);  border-left-color: var(--green); }
.callout-warning             { background: var(--yellow-bg); border-color: var(--yellow-border); border-left-color: var(--yellow); }
.callout-danger              { background: var(--red-bg);    border-color: var(--red-border);    border-left-color: var(--red); }

/* ── Severity chips (:sev) — tight pill, sub-scale vertical padding ───────── */
.sev {
  display: inline-block; font-size: var(--text-xs); font-weight: var(--fw-semi);
  padding: 1px var(--sp-2); border-radius: 999px; line-height: 1.5;
  border: 1px solid var(--border); background: var(--bg-inset); color: var(--text-muted);
  white-space: nowrap;
}
.sev-p0   { color: var(--sev-p0);   border-color: var(--sev-p0); }
.sev-p1   { color: var(--sev-p1);   border-color: var(--sev-p1); }
.sev-p2   { color: var(--sev-p2);   border-color: var(--sev-p2); }
.sev-p3   { color: var(--sev-p3);   border-color: var(--sev-p3); }
.sev-pass { color: var(--sev-pass); border-color: var(--sev-pass); }

/* ── Citations (:cite) — inline provenance refs ──────────────────────────── */
.fp, .cite-advisory {
  font-family: var(--font-mono); font-size: 0.82em;
  padding: 0.05em 0.35em; border-radius: var(--radius-sm);
  background: var(--bg-inset); border: 1px solid var(--border-light);
}
.fp { color: var(--accent); }
.cite-advisory { color: var(--text-faint); border-style: dashed; }

/* ── Tables + filter-tables ──────────────────────────────────────────────── */
.content table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; font-size: var(--text-sm); }
.content th, .content td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-light); vertical-align: top; }
.content th {
  color: var(--text-muted); font-weight: var(--fw-semi); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--ls-wide); border-bottom-color: var(--border);
}
.content tbody tr:hover { background: var(--bg-hover); }
.content td code { white-space: nowrap; }
.filter-table { margin: var(--sp-4) 0; }
.filter-input {
  width: 100%; max-width: 320px; margin-bottom: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); font-family: inherit; font-size: var(--text-sm);
  color: var(--text); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.filter-input:focus { border-color: var(--accent); }

/* ── Charts (:::chart) — label + proportional bar (fill carries inline width%) */
.chart-block { margin: var(--sp-4) 0; }
.chart-row {
  display: grid; grid-template-columns: minmax(var(--chart-label-w), 24%) 1fr;
  align-items: center; gap: var(--sp-3); margin: var(--sp-1) 0;
}
.chart-label {
  font-size: var(--text-sm); color: var(--text-muted); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-row .chart-bar {
  height: 0.9em; min-width: 2px; background: var(--accent);
  border-radius: var(--radius-sm);
}

/* ── Tabs (::::tabs / :::tab) ─────────────────────────────────────────────── */
.tabs { margin: var(--sp-4) 0; }
.tablist { display: flex; flex-wrap: wrap; gap: var(--sp-1); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-3); }
.tab-btn {
  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: var(--sp-2) var(--sp-3); color: var(--text-muted);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tabpane { display: none; }
.tabpane.active { display: block; }

/* ── Mermaid diagrams ────────────────────────────────────────────────────── */
.content figure { margin: var(--sp-4) 0; text-align: center; }
.content figure svg, .content > svg, .content .mermaid svg { max-width: 100%; height: auto; }

/* ── Index page: category card grid ──────────────────────────────────────── */
.content .lead { color: var(--text-muted); font-size: var(--text-base); max-width: 60ch; margin-top: var(--sp-2); }
.guide-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min), 100%), 1fr));
  gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-6);
}
.guide-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: inherit; text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.guide-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); text-decoration: none; }
.guide-card-title { font-weight: var(--fw-semi); color: var(--accent); font-size: var(--text-base); }
.guide-card-desc { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--lh-normal); }

/* ── Responsive: TOC becomes an off-canvas drawer (chrome.ts toggles .open) ──*/
/* 860px is literal — media queries cannot read custom properties. Revisit it if
   --topbar-h / --rail-w / --drawer-w change (the drawer sticky offsets key off them). */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .layout { grid-template-columns: 1fr; gap: 0; }
  .rail {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: var(--drawer-w); z-index: 50;
    height: auto; background: var(--bg-card); border-right: 1px solid var(--border);
    padding: var(--sp-4); box-shadow: var(--shadow-lg);
    transform: translateX(-100%); transition: transform 0.2s ease, visibility 0.2s ease;
    /* Closed drawer is off-screen AND removed from tab order / pointer events. */
    visibility: hidden; pointer-events: none;
  }
  .rail.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
  .rail-close {
    display: block; margin-left: auto; margin-bottom: var(--sp-2);
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-3); font-size: var(--text-base);
    line-height: 1; cursor: pointer; font-family: inherit;
  }
  .rail-close:hover { background: var(--bg-hover); border-color: var(--accent); }
  .rail-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .rail-backdrop {
    display: block; position: fixed; inset: var(--topbar-h) 0 0 0;
    background: var(--scrim); z-index: 49;
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  .rail.open ~ .rail-backdrop { opacity: 1; pointer-events: auto; }
}