/* ============================================================================
   Skytale docs: page CSS. Tokens + components come from ../design-system/.
   Adds the docs shell (sidebar + content grid) and doc typography only.
   ============================================================================ */

/* ---- shell ---- */
.docs-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
}
@media (max-width: 900px) { .docs-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---- sidebar: the rail runs full height; the nav inside is sticky ---- */
.sidebar { border-right: 1px solid var(--line); }
.sidebar-in {
  position: sticky; top: 56px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  padding: var(--s6) var(--s5) var(--s8);
}
.sidebar .label { display: block; margin-top: var(--s5); }
.sidebar .label:first-child { margin-top: 0; }
.sidenav { list-style: none; margin-top: var(--s3); display: grid; gap: 2px; }
.sidenav a {
  display: block;
  font-family: var(--mono); font-size: var(--t-mono);
  color: var(--ink-2); text-decoration: none;
  padding: 6px 10px; border-left: 1px solid var(--line);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.sidenav a:hover { color: var(--ink); border-left-color: var(--line-2); }
.sidenav a[aria-current="page"] {
  color: var(--brass-text); border-left-color: var(--brass);
}
@media (max-width: 900px) {
  .sidebar {
    display: none;
    position: fixed; inset: 56px 0 0 0; z-index: 40;
    background: var(--bg0);
    border-right: none;
    overflow-y: auto;
  }
  .sidebar.open { display: block; }
  .sidebar-in { position: static; max-height: none; padding: var(--s5) var(--gutter) var(--s8); }
}
.menu-btn { display: none; }
@media (max-width: 900px) { .menu-btn { display: inline-block; } }

/* ---- content ---- */
.doc-main {
  padding: clamp(28px, 4vw, 52px) var(--gutter) clamp(48px, 7vw, 88px);
  min-width: 0;
}
.doc-main > h1 {
  font-size: var(--t-h2); font-weight: 600;
  letter-spacing: -0.022em; line-height: 1.12;
  margin-top: var(--s4);
}
.doc-lede { margin-top: var(--s4); color: var(--ink-2); max-width: 62ch; font-size: var(--t-lede); line-height: 1.7; }
.doc-sec { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.doc-sec > h2 {
  font-size: 1.25rem; font-weight: 580; letter-spacing: -0.014em; line-height: 1.25;
  padding-top: var(--s5); border-top: 1px solid var(--line);
}
.doc-sec > h3 { font-size: 1rem; font-weight: 580; margin-top: var(--s5); }
.doc-sec p, .doc-main > p { margin-top: var(--s3); color: var(--ink-2); max-width: 66ch; }
.doc-sec p strong, .doc-main p strong { color: var(--ink); font-weight: 540; }
.doc-sec ul { margin-top: var(--s3); padding-left: 1.2em; color: var(--ink-2); max-width: 64ch; }
.doc-sec li { margin-top: 6px; }
.doc-sec li::marker { color: var(--ghost); }
code {
  font-family: var(--mono); font-size: 0.85em;
  background: var(--bg2); border: 1px solid var(--line);
  padding: 1px 5px; color: var(--ink);
  overflow-wrap: anywhere;
}
.term code, .pane-bd code { background: none; border: none; padding: 0; font-size: inherit; color: inherit; }
.doc-main .term { margin-top: var(--s4); max-width: 760px; }
.doc-main a { color: var(--brass-text); text-decoration: underline; text-underline-offset: 3px; }
.doc-main .sidenote {
  margin-top: var(--s4); max-width: 640px;
  border: 1px solid var(--line); border-left: 2px solid var(--brass);
  background: var(--bg1); padding: var(--s4) var(--s5);
  font-size: var(--t-small); color: var(--ink-2);
}
.doc-main .sidenote .label { display: block; margin-bottom: var(--s2); }

/* ---- reference entries ---- */
.ref { margin-top: var(--s5); border: 1px solid var(--line); background: var(--bg1); max-width: 820px; }
.ref-hd {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3);
  padding: 12px 18px; background: var(--bg2); border-bottom: 1px solid var(--line);
}
.ref-hd .name { font-family: var(--mono); font-size: 0.9375rem; color: var(--ink); font-weight: 500; }
.ref-hd .name::before { content: "$ tally "; color: var(--brass-text); }
.ref-bd { padding: var(--s4) 18px var(--s5); }
.ref-bd .sum { color: var(--ink-2); font-size: var(--t-small); max-width: 64ch; }
.ref-bd .usage {
  margin-top: var(--s3);
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.8; color: var(--ink);
  background: var(--bg2); border: 1px solid var(--line); padding: 8px 12px;
  overflow-x: auto; white-space: pre;
}
.ref-bd dl { margin-top: var(--s3); display: grid; gap: 6px; }
.ref-bd dl div { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--s4); }
@media (max-width: 640px) { .ref-bd dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.ref-bd dt { font-family: var(--mono); font-size: 0.75rem; color: var(--brass-text); overflow-wrap: anywhere; }
.ref-bd dd { font-size: var(--t-small); color: var(--ink-2); }

/* ---- verb index chips ---- */
.verb-index { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2); max-width: 820px; }
.verb-index a {
  font-family: var(--mono); font-size: var(--t-mono); color: var(--ink-2);
  border: 1px solid var(--line); background: var(--bg1);
  padding: 6px 12px; text-decoration: none;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.verb-index a:hover { color: var(--ink); border-color: var(--line-2); }

/* ---- doc cards on the home page ---- */
.doc-cards {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4); max-width: 820px;
}
@media (max-width: 720px) { .doc-cards { grid-template-columns: minmax(0, 1fr); } }
.doc-cards .card { padding: var(--s5); }
.doc-cards .card a { text-decoration: none; color: inherit; }
.doc-cards .card h3 { margin-top: var(--s3); }

/* ---- prev / next footer links ---- */
.pager {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: var(--s5); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: var(--s4); max-width: 820px;
}
.pager a {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em;
  color: var(--brass-text); text-decoration: none;
}
.pager a::before { content: "[ "; color: var(--ghost); }
.pager a::after { content: " ]"; color: var(--ghost); }
.pager a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- small screens (rendered-screenshot audit 2026-07-07): terminal blocks
   scroll like .usage does; topbar button labels never wrap. ---- */
.pane-bd { overflow-x: auto; }
.theme-btn, .menu-btn { white-space: nowrap; }