/* SPDX-License-Identifier: MIT */
/* guide.css — the block-system for the developer guide (gifts-guide.html).
 *
 * WHY THIS FILE EXISTS (Block Principle, Test-by-Removal): the guide's derived
 * decision index and the authored provability list both carried long-form prose
 * ("the honest edge") inside narrow table cells, so the essay-length column
 * wrapped into an unreadable ribbon against three scan-length columns. A table
 * implies equal-weight, scan-length cells; this content has TWO registers — a
 * scan surface (name + role + one-line what) and a read surface (the edge
 * paragraph). This stylesheet re-blocks that content: each tool is a CARD whose
 * scan line is dense and whose edge prose sits below at a real reading measure.
 *
 * It rides the site design tokens (design/tokens.css) and the chrome shell
 * (design/shell.css) — it OWNS only the .guide-* blocks the shell does not.
 * No new palette, no new type family: the warm-cream/persimmon/Fraunces-Spectral
 * -Spline register IS the site brand (the Score band grammar), held deliberately.
 */

/* ---- the guide column: hold body prose to a readable measure --------------- */
.guide .room { max-width: min(74ch, 92vw); margin: 0 auto; }

/* ---- page-level reading rhythm (typography IS the hierarchy, web-scaffold
 * Step 4): the two PART headings frame the page's two halves; ledes and thesis
 * lines set the reading measure; the hint is the quiet scan instruction. ------ */
.guide-part { margin-top: calc(var(--rhythm) * 2.5); }
.guide-part-heading {
  font-family: var(--font-display);
  font-size: var(--size-headline-lg);
  line-height: var(--lh-headline);
  color: var(--ink);
  margin: 0 0 var(--gap-tight) 0;
}
.guide-part-lede, .guide-thesis {
  font-family: var(--font-body);
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
  color: var(--ink);
  max-width: 68ch;
  margin: 0 0 var(--gap) 0;
}
.guide-hint {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--muted);
  max-width: 70ch;
}

/* the grammar's role legend + joins — definition lists, not naked bullets */
.guide-roles, .guide-joins { list-style: none; margin: var(--gap) 0; padding: 0; }
.guide-roles > li, .guide-joins > li {
  padding: var(--gap-tight) 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  max-width: 72ch;
}
.guide-roles > li:last-child, .guide-joins > li:last-child { border-bottom: none; }
.guide-roles code, .guide-joins code { font-family: var(--font-mono); font-size: var(--size-code); }

/* worked pipelines — each a small block with its shape line set in mono */
.guide-pipeline { margin: calc(var(--rhythm) * 1.6) 0; max-width: 72ch; }
.guide-pipeline > h3 {
  font-family: var(--font-display);
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
  color: var(--ink);
  margin: 0 0 var(--gap-tight) 0;
}
.guide-pipeline-shape {
  font-family: var(--font-mono);
  font-size: var(--size-code);
  line-height: var(--lh-code);
  color: var(--ink);
  background: var(--ground);
  padding: var(--gap-tight) var(--gap);
  border-radius: 2px;
  margin: 0 0 var(--gap-tight) 0;
  overflow-x: auto;
}
.guide-pipeline-edge, .guide-worked-note {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--ink);
  max-width: 68ch;
}
.guide-worked-note { color: var(--muted); border-top: 1px solid var(--hairline); padding-top: var(--gap); }

/* ---- role group: a real headline, not a tracked-caps eyebrow --------------- */
.guide-role {
  font-family: var(--font-display);
  font-size: var(--size-headline);
  line-height: var(--lh-headline);
  font-weight: var(--weight-headline);
  color: var(--ink);
  margin: calc(var(--rhythm) * 2.2) 0 0 0;
  padding-bottom: var(--gap-tight);
  border-bottom: 2px solid var(--hairline);
}
.guide-role-gloss {
  display: block;
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  color: var(--muted);
  margin-top: 0.2em;
}

/* ---- the tool card list — hairline-separated blocks, no card kit ------------ */
.guide-tools { list-style: none; margin: var(--gap) 0 0 0; padding: 0; }
.guide-tool {
  padding: var(--gap) 0;
  border-bottom: 1px solid var(--hairline);
}
.guide-tool:last-child { border-bottom: none; }

/* scan line: the identity + the one-line what, on one reading line where it fits */
.guide-tool-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em 0.75em;
  margin-bottom: var(--gap-tight);
}
.guide-tool-id {
  font-family: var(--font-mono);
  font-size: var(--size-code);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.guide-tool-id:hover { border-bottom-color: var(--persimmon); color: var(--persimmon); }
.guide-tool-name {
  font-family: var(--font-display);
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
  color: var(--ink);
}
/* the one-line "what it does" — the scan payload, not stuffed in a column */
.guide-tool-what {
  flex-basis: 100%;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--muted);
}

/* the honest-edge prose at a real measure, set apart as the read surface.
 * A quiet left rule marks it as the "honest limit" without a caps label
 * (the set-apart block already signals the register; a "WORD —" prefix would
 * be doing no work the layout isn't). */
.guide-tool-edge {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0;
  max-width: 68ch;
  padding-left: var(--gap);
  border-left: 2px solid var(--hairline);
  /* honest-edge prose can carry long slash-joined tokens with no spaces
     (e.g. hwb()/lab()/lch()/oklab()/…) that won't wrap and push the whole
     document wide on a narrow phone — the I3 HSCROLL clearance fault at 360px.
     Break inside such a token; normal prose is unaffected. (S10.1905.) */
  overflow-wrap: break-word;
}

/* the take-it action: a quiet inline link, right-settled, not a table column */
.guide-tool-take {
  display: inline-block;
  margin-top: var(--gap-tight);
  font-family: var(--font-mono);
  font-size: var(--size-code);
  color: var(--persimmon);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.guide-tool-take:hover { border-bottom-color: var(--persimmon); }

/* ---- the authored provability list (§ "the toolchain, in the order you reach
 * for it") — same two-register block treatment as the derived tool cards, applied
 * to the hand-authored <ul class="guide-provability"> so the whole page reads as
 * one system. The lead sentence is the scan surface; the .guide-edge-inline span
 * is the honest-limit read surface, set apart with the same quiet left rule. ---- */
.guide-provability { list-style: none; margin: var(--gap) 0 0 0; padding: 0; }
.guide-provability > li {
  padding: var(--gap) 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.guide-provability > li:last-child { border-bottom: none; }
.guide-provability > li > a code { font-family: var(--font-mono); font-size: var(--size-code); }
.guide-edge-inline {
  display: block;
  margin-top: var(--gap-tight);
  padding-left: var(--gap);
  border-left: 2px solid var(--hairline);
  color: var(--ink);
  max-width: 68ch;
}
.guide-provability-thesis {
  margin-top: calc(var(--rhythm) * 1.5);
  font-family: var(--font-body);
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
  color: var(--ink);
  max-width: 68ch;
}

/* ---- maturity: this content IS two short columns — a table is honest here --- */
.guide-maturity-table { width: 100%; border-collapse: collapse; margin-top: var(--gap); }
.guide-maturity-table th {
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-emphasis);
  color: var(--ink);
  padding: var(--gap-tight) var(--gap) var(--gap-tight) 0;
  border-bottom: 2px solid var(--hairline);
}
.guide-maturity-table td {
  padding: var(--gap-tight) var(--gap) var(--gap-tight) 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: baseline;
  font-family: var(--font-body);
  font-size: var(--size-body);
}
.guide-maturity-table td code { font-family: var(--font-mono); font-size: var(--size-code); }
.guide-badge {
  font-family: var(--font-mono);
  font-size: var(--size-code);
  padding: 0.1em 0.5em;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  white-space: nowrap;
}
.guide-badge.badge-hardened { color: var(--persimmon); border-color: var(--persimmon); }
.guide-badge.badge-shipped  { color: var(--ink); }
.guide-badge.badge-landing  { color: var(--faint); font-style: italic; }

/* ---- the cabinet table: contain it so a wide row never scrolls the page ----
   The full gift cabinet (57 rows: name · maturity · link) is wider than a phone
   viewport, and with no containment it pushed document scrollWidth past the
   viewport (443px on a 390px screen) — the I3 HSCROLL clearance fault. Same
   idiom the maturity/pipeline surfaces already use: let the TABLE scroll inside
   its own box, never the page. (NOTE-10.1625-1 clearance fix, S10.1905.) */
.guide-cabinet {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

/* ---- mobile: the scan line stacks, the measure narrows gracefully ---------- */
@media (max-width: 640px) {
  .guide-tool-name { font-size: var(--size-body); }
  .guide-tool-edge { max-width: 100%; }
}