/* docs.css — docs.kautuka.dev (with tokens-kautuka.css) and
   devkrity.com/narad/docs/ incl. generated spec.html (with tokens-narad.css).
   Same template, brand comes from the token file. Tokens only.
   Load: base.css → tokens-<brand>.css → docs.css → navigation.css
   spec.html is generated by scripts/build.mjs: restyle with CSS only. */

.docs { background:var(--color-bg); }
.docs .layout { display:grid; grid-template-columns:17.5rem minmax(0,1fr); min-height:100vh; }

/* ---------- Sidebar (paper, not a coloured slab) ---------- */
.docs .layout > nav { position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; padding:var(--space-l) var(--space-m); border-right:var(--border-hair) solid var(--color-line); background:var(--color-bg); }
.docs .home { display:inline-flex; align-items:center; gap:.625rem; min-height:var(--tap); color:var(--color-heading); text-decoration:none; font:700 1.1875rem/1 var(--font-brand); letter-spacing:var(--brand-tracking); }
.docs .home { --brand-mark-size:28px; }
.docs .home small { display:block; margin-top:.25rem; font:400 var(--step--1)/1 var(--font-sans); letter-spacing:0; color:var(--color-muted); }
.guide-links { display:block; margin-top:var(--space-l); }
.guide-group { display:grid; margin-bottom:var(--space-m); }
.guide-group > span { margin-bottom:var(--space-3xs); font:600 var(--step--1)/1.4 var(--font-sans); color:var(--color-muted); } /* sentence-case group label, not mono caps */
.guide-links a { display:flex; align-items:center; min-height:var(--tap); padding:0 .75rem; margin-left:-.75rem; border-radius:var(--radius-s); color:var(--color-text); text-decoration:none; font-size:var(--step-0); }
.guide-links a:hover { background:var(--color-surface); color:var(--color-heading); }
.guide-links a[aria-current="page"] { background:var(--color-surface); color:var(--color-heading); font-weight:600; box-shadow:inset 3px 0 0 var(--color-accent-line); }
.guide-links a.docs-back { margin-top:var(--space-m); color:var(--color-muted); }

/* ---------- Main column ---------- */
.docs main { min-width:0; padding:clamp(2rem, 1rem + 4vw, 5rem) var(--gutter) var(--space-3xl); }
.docs main > * { max-width:44rem; }
.docs main > .guide-grid, .docs main > table, .docs main > .table-scroll { max-width:60rem; }
.docs-breadcrumb { font-size:var(--step--1); color:var(--color-muted); }
.docs main h1 { margin-top:var(--space-2xs); font-size:var(--step-5); line-height:1.05; }
.docs main h1 em { font-style:normal; }
.docs main h2 { margin-top:var(--space-2xl); font-size:var(--step-3); }
.docs main h3 { margin-top:var(--space-xl); font-size:var(--step-1); }
.docs main h4 { margin-top:var(--space-l); font:600 var(--step-0)/1.3 var(--font-sans); }
.docs main p, .docs main ul, .docs main ol, .docs main dl, .docs main pre, .docs main table { margin-top:var(--space-s); }
.docs main li + li { margin-top:var(--space-2xs); }
.docs main ul:not([class]), .docs main ol:not([class]) { padding-left:1.25rem; }
.docs .meta { font:400 var(--step--1)/1.5 var(--font-sans); color:var(--color-muted); }
.docs-name-note { margin-bottom:var(--space-2xs); font-size:var(--step--1); color:var(--color-muted); }
.docs-intro { font-size:var(--step-1); color:var(--color-muted); }
.docs main dt { margin-top:var(--space-s); font-weight:600; color:var(--color-heading); }
.docs main dd { margin:var(--space-3xs) 0 0; color:var(--color-muted); }
.docs main hr { margin:var(--space-2xl) 0; border:0; border-top:var(--border-hair) solid var(--color-line); }

/* code + tables (also the generated spec) */
.docs main pre { overflow-x:auto; padding:var(--space-s) var(--space-m); border:var(--border-hair) solid var(--color-line); border-radius:var(--radius-s); background:var(--color-code-bg); color:var(--color-code-text); font:400 .875rem/1.6 var(--font-mono); }
.docs main pre code { padding:0; background:none; color:inherit; font-size:inherit; }
.docs main table { display:block; overflow-x:auto; width:100%; max-width:60rem; border-collapse:collapse; font-size:var(--step--1); line-height:1.45; }
.docs main th, .docs main td { padding:.625rem .75rem; text-align:left; vertical-align:top; border-bottom:var(--border-hair) solid var(--color-line); }
.docs main thead th { border-bottom:var(--border-hair) solid var(--color-heading); font-weight:600; color:var(--color-heading); white-space:nowrap; }
.docs main td code { white-space:nowrap; }

/* ---------- Guide cards: no eyebrows; title + one line ---------- */
.guide-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-s); margin-top:var(--space-xl); }
.guide-card { position:relative; display:grid; gap:var(--space-3xs); padding:var(--space-m); border:var(--border-hair) solid var(--color-line); border-radius:var(--radius-m); background:var(--color-card); color:var(--color-text); text-decoration:none; transition:border-color var(--dur) var(--ease); }
.guide-card:hover { border-color:var(--color-line-ui); color:var(--color-text); }
.guide-card b { font:600 var(--step-1)/1.3 var(--font-sans); color:var(--color-heading); }
.guide-card small { font-size:var(--step--1); color:var(--color-muted); line-height:1.5; }
.guide-card > span { display:none; } /* old mono eyebrows: retired */
.guide-card i { position:absolute; top:var(--space-m); right:var(--space-m); font-style:normal; color:var(--color-muted); }
.guide-card-primary { border-color:var(--color-line-ui); box-shadow:inset 0 3px 0 var(--color-accent-line); }
.docs-notice { display:flex; gap:var(--space-xs); align-items:baseline; margin-top:var(--space-xl); padding:var(--space-s) var(--space-m); border-radius:var(--radius-m); background:var(--color-surface); font-size:var(--step--1); }
.docs-footer { grid-column:2; padding:var(--space-l) var(--gutter); border-top:var(--border-hair) solid var(--color-line); font-size:var(--step--1); color:var(--color-muted); }
.docs-footer a { display:inline-flex; align-items:center; min-height:var(--tap); color:var(--color-text); }

@media (max-width:900px) {
  .docs .layout { grid-template-columns:1fr; }
  .docs .layout > nav { position:sticky; height:auto; }
  .docs-footer { grid-column:1; }
  .guide-grid { grid-template-columns:1fr; }
  .docs main { overflow-wrap:anywhere; }
  .docs main pre, .docs main td code { overflow-wrap:normal; }
}