/* ═══════════════════════════════════════════════════════════════
   lmbo.fun · manual.css · THE DEALER LOT
   /docs, the owner's manual: the glovebox booklet (DESIGN.md §6).
   Sticker pages on paper, numbered chapters, a left index of tabbed
   dividers. Tokens only; raw values are geometry.
   ═══════════════════════════════════════════════════════════════ */

.manual { display: grid; gap: var(--space-6); padding-bottom: var(--space-6); }
.manual-top {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--space-5) var(--grid-gap);
  align-items: stretch;
  padding-top: var(--space-5);
}
.manual-top .page-head { grid-column: 1 / span 7; padding-block: var(--space-4); }
.manual-windshield { grid-column: 8 / -1; min-height: 230px; }

.manual-layout {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--space-5) var(--grid-gap);
  align-items: start;
}

/* the index: tabbed dividers sticking out of the booklet */
.manual-index { grid-column: 1 / span 3; position: sticky; top: var(--space-4); }
.manual-index ol { display: grid; gap: var(--space-2); }
.manual-index a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font: 800 var(--t-small)/1.2 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-right-width: 8px;                    /* the divider's tab edge */
}
.manual-index a:hover { background: var(--sticker); }
.manual-index a[aria-current] { background: var(--sticker); border-right-color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.manual-tab-n { font: 700 var(--t-label)/1 var(--font-mono); letter-spacing: 0; }

/* the pages */
.manual-pages { grid-column: 4 / -1; display: grid; gap: var(--space-5); min-width: 0; }
.manual-page {
  display: grid; gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--sticker);
  border: 2px solid var(--ink);
  scroll-margin-top: var(--space-4);
  min-width: 0;
}
.manual-head { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 3px solid var(--ink); }
.manual-head h2 { font: 800 var(--t-h1)/.95 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.manual-n {
  display: inline-grid; place-items: center;
  flex: none;
  width: 40px; height: 40px;
  font: 700 var(--t-body)/1 var(--font-mono);
  color: var(--sticker);
  background: var(--ink);
}
.manual-page p, .manual-page li { font: 400 var(--t-body)/1.6 var(--font-ui); max-width: 68ch; }
.manual-page .fine { font-size: var(--t-small); }
.manual-sub { margin-top: var(--space-3); font: 800 var(--t-h2)/1 var(--font-display); text-transform: uppercase; }
.manual-list { display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style: square; }
.manual-steps { display: grid; gap: var(--space-3); padding-left: var(--space-6); list-style: decimal; }
.manual-steps li::marker { font: 700 var(--t-small) var(--font-mono); }
.manual-words { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--paper-2); border: 2px solid var(--ink); }
.manual-words dt { font: 800 var(--t-small)/1.5 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.manual-words dd { margin: 0; font: 400 var(--t-small)/1.5 var(--font-ui); }
.manual-table { overflow-x: auto; border: 2px solid var(--ink); }
.manual-table .lot-state { padding: var(--space-4); }
.manual-miles td:first-child { font-family: var(--font-mono); font-weight: 700; }
.manual-lap td { color: var(--ink-2); }

@media (max-width: 1023px) {
  .manual-top .page-head, .manual-windshield { grid-column: 1 / -1; }
  .manual-windshield { min-height: 190px; }
  .manual-index, .manual-pages { grid-column: 1 / -1; }
  .manual-index { position: static; }
  .manual-index ol { display: flex; flex-wrap: wrap; }
  .manual-index a { border-right-width: 2px; border-bottom-width: 6px; }
}
@media (max-width: 560px) {
  .manual-page { padding: var(--space-4); }
  .manual-words { grid-template-columns: minmax(0, 1fr); }
}