/* Hallmark · macrostructure: Long Document (manifesto, then tables) · tone: technical, warm · anchor hue: gold 85
 * theme: custom 'lantern counting room, coin triad, one parchment ledger' (shared site tokens, css/tokens.css)
 * pre-emit critique: P5 H4 E4 S5 R5 V4
 * css/modules/legit.css: owned by the legit builder. Tokens only (var(--...)); no raw colors.
 * Page shape: one reading column (72ch) for the manifesto; tables and the freshness board widen to 960px. */

.legit { display: grid; gap: var(--space-16); }
.legit > section { display: grid; gap: var(--space-5); max-width: 72ch; }
.legit > section.legit-wide { max-width: 960px; }
.legit h2 { max-width: 30ch; }
.legit p, .legit li { color: var(--text-secondary); }
.legit p.lede { color: var(--text-secondary); }
.legit strong { color: var(--text-primary); font-weight: 600; }

/* Hero: the pledge in display type, a gold rule that draws once on reveal */
.legit-hero { gap: var(--space-6); }
.legit-hero .legit-kicker { color: var(--text-muted); font-size: var(--text-sm); }
.legit-pledge {
  margin: 0; padding-left: var(--space-5); border-left: var(--ledger-tick) solid var(--color-gold);
  font-family: var(--font-display); font-weight: var(--display-wght); font-stretch: var(--display-wdth);
  font-variation-settings: "wdth" var(--display-wdth); font-style: normal; letter-spacing: -0.02em; line-height: 1.12;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.4rem); color: var(--text-primary); max-width: 24ch; overflow-wrap: anywhere; min-width: 0;
}
.legit-hero .rule-draw { max-width: 72ch; }

/* The five lines: ledger rows, each with its reason */
.legit-lines { list-style: none; }
.legit-lines .ledger-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding-block: var(--space-4); }
.legit-lines .legit-line-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text-primary); letter-spacing: -0.01em; }
.legit-lines p { font-size: var(--text-sm); max-width: 66ch; }

/* The pipeline: a true sequence, so numbered */
.legit-steps { list-style: none; counter-reset: step; display: grid; gap: var(--space-3); }
.legit-steps li { counter-increment: step; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.legit-steps li::before { content: counter(step); font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-gold); font-size: var(--text-sm); line-height: 1.55; border-top: 1px solid var(--border-subtle); padding-top: 2px; }
.legit-steps p { font-size: var(--text-sm); }
.legit-steps .mono { color: var(--text-muted); font-size: var(--text-xs); }
.legit-disclosure { padding: var(--space-4) var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-control); color: var(--text-primary); }

/* Source table */
.legit table.cards th, .legit table.cards td { font-size: var(--text-sm); }
.legit table.cards td:first-child { color: var(--text-primary); font-weight: 600; }
.legit table.cards .chip { margin-right: var(--space-1); }
@media (max-width: 639px) {
  .legit table.cards tr { position: relative; grid-template-columns: minmax(0, 1fr); }
  .legit table.cards td { padding-left: var(--space-4); }
  .legit table.cards tr::after { content: ""; position: absolute; left: 0; top: 50%; width: var(--ledger-tick); height: 60%; transform: translateY(-50%); background: var(--color-gold); }
}

/* Freshness board (legit.js) */
.legit-fresh-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.legit-fresh-row.is-stale-row::before { background: var(--color-ruby); }
.legit-fresh-main { display: grid; gap: 2px; min-width: 0; }
.legit-fresh-name { color: var(--text-primary); font-weight: 600; }
.legit-fresh-row .stamp { max-width: none; }
.legit-fresh-src { color: var(--text-muted); }
.legit-fresh-used { color: var(--text-muted); }
.legit-fresh-figure { display: grid; grid-template-columns: 28px auto; gap: var(--space-2); align-items: center; justify-items: end; font-size: var(--text-sm); }
.legit-fresh-figure .ring { color: currentColor; }
.legit-fresh-figure .ring-fill { transition: none; }
.legit-fresh-figure.is-stale .ring-fill { stroke-dashoffset: 0 !important; }
.ring-none { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 3px dashed var(--border-strong); }
.legit-fresh-age { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.legit-fresh-note { margin-top: var(--space-3); }
.legit [data-freshness-board] .empty { font-size: var(--text-sm); }
.legit [data-freshness-board] > p.muted { font-size: var(--text-sm); }

/* Estimate anatomy */
.legit-formula { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); }
.legit-formula code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-primary); overflow-wrap: anywhere; }
.legit-formula .stamp { max-width: none; }
.legit-labels { list-style: none; display: grid; gap: var(--space-2); }
.legit-labels li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: baseline; font-size: var(--text-sm); }

/* Privacy */
.legit-privacy .row { gap: var(--space-3) var(--space-4); }
.legit-privacy .btn { min-width: 160px; }
.legit-privacy [data-privacy-state] { font-size: var(--text-sm); }

/* FAQ: native details, hairline rows */
.legit-faq details { border-bottom: 1px solid var(--border-subtle); padding-block: var(--space-1); }
.legit-faq details:first-of-type { border-top: 1px solid var(--border-subtle); }
.legit-faq summary { font-weight: 600; color: var(--text-primary); padding-block: var(--space-2); }
.legit-faq summary:hover { color: var(--color-gold); }
.legit-faq details > p { padding: 0 0 var(--space-4); font-size: var(--text-sm); }
.legit-faq details[open] > p { animation: legit-fade var(--dur-fast) var(--ease-out); }
@keyframes legit-fade { from { opacity: 0; } to { opacity: 1; } }

/* Tools: every page, one line each */
.legit-tools .ledger-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.legit-tools .legit-tool-name { color: var(--text-primary); font-weight: 600; }
.legit-tools p { font-size: var(--text-sm); }
.legit-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Blizzard credit */
.legit-credit { font-size: var(--text-sm); }
.legit-credit ul { list-style: none; display: grid; gap: var(--space-2); }
.legit-credit li { font-size: var(--text-sm); }
.legit-credit .stamp { max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .legit-faq details[open] > p { animation: none; }
  .legit-fresh-figure .ring-fill { stroke-dashoffset: 0 !important; }
}