/* Docs layout. Sidebar + measured column. Inherits every token from
   style.css — this file adds structure, never a new palette. */

.docs-shell{
  display:grid;gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:1fr;
  padding-block:clamp(2rem,5vw,3.5rem);
  align-items:start;
}
@media (min-width:900px){
  .docs-shell{grid-template-columns:210px minmax(0,1fr)}
  .docs-nav{position:sticky;top:84px}
}

.docs-nav-title{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-mut);margin:0 0 .75rem;
}
.docs-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.docs-nav a{
  display:block;padding:.34rem .6rem;margin-left:-.6rem;border-radius:2px;
  font-size:.875rem;color:var(--ink-dim);text-decoration:none;
  border-left:2px solid transparent;
}
.docs-nav a:hover{color:var(--ink);background:var(--panel)}
.docs-nav a.on{color:var(--ink);border-left-color:var(--amber);background:var(--panel)}

.docs-body{max-width:74ch}
.docs-body h1{font-size:clamp(1.9rem,4.5vw,2.6rem);line-height:1.06;margin:.2rem 0 1.1rem}
.docs-body h2{font-size:clamp(1.2rem,2.4vw,1.45rem);margin:2.4rem 0 .5rem}
.docs-body h3{font-size:1rem;margin:1.9rem 0 .35rem;color:var(--ink)}
.docs-body p{margin:.85rem 0;color:var(--ink-dim);font-size:.9375rem}
.docs-body p.lede{color:var(--ink);font-size:1.0625rem}
.docs-body strong{color:var(--ink);font-weight:500}
.docs-body em{color:var(--ink);font-style:normal;border-bottom:1px solid #8A5A1E}
.docs-body a{color:var(--amber);text-underline-offset:3px}
.docs-body .term{margin:1.1rem 0}
.docs-body .grid{margin:1.4rem 0}
.docs-body .cell h3{margin-top:0}
.docs-body .cell a{text-decoration:none}
.docs-body .cell a:hover{text-decoration:underline;text-underline-offset:3px}

/* Callout: used only where a reader can genuinely be misled. */
.docs-body .callout{
  border:1px solid var(--rule);border-left:2px solid var(--amber);
  background:var(--panel);border-radius:0 3px 3px 0;
  padding:.85rem 1rem;margin:1.3rem 0;font-size:.9375rem;
}

.docs-body .scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:3px;margin:1.3rem 0}
.docs-body table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:440px}
.docs-body th,.docs-body td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-dim)}
.docs-body thead th{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-mut);font-weight:400;background:var(--panel);white-space:nowrap;
}
.docs-body tbody tr:last-child td{border-bottom:0}
.docs-body td strong{color:var(--ink)}
.docs-body td.crit{color:#E86A5A}
.docs-body td.hi{color:var(--amber)}

/* previous / next */
.pn-row{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:3px;margin-top:3rem;overflow:hidden}
.pn{flex:1 1 40%;background:var(--panel);padding:.9rem 1.1rem;text-decoration:none;color:var(--ink);font-size:.9375rem}
.pn:hover{background:var(--raised)}
.pn span{display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mut);margin-bottom:.2rem}
.pn.next{text-align:right}