/* ============================================================
   LEONIDA NETWORK — page layer (on top of the F2F kit)
   All values from tokens.css. Kit gaps filled here (marquee,
   tags, tables, board, forms) become kit candidates — see
   BUILD-RECEIPT.md.
   ============================================================ */

/* — status tags: square text labels, never pills (STANDARD §6) — */
.tag{
  font-family:var(--font-grotesk);font-size:var(--step--2);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--line-strong);color:var(--ink-soft);
  padding:.28em .6em .22em;display:inline-block;
}
.tag.ok{color:var(--ok);border-color:var(--ok)}
.tag.warn{color:var(--warn);border-color:var(--warn)}
.tag.spec{color:var(--muted);border-style:dashed}
.tag.on-night{border-color:var(--night-line);color:var(--night-muted)}
.tag.on-night.ok{color:#7fc79b;border-color:#7fc79b}

/* — marquee (kit template ships the markup; motion defined here) — */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:var(--space-xs)}
.marquee .track{display:flex;width:max-content;animation:marq 36s linear infinite}
.marquee .track span{
  font-family:var(--font-grotesk);font-size:var(--step--1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;padding-right:.5em;
}
.marquee .track i{font-style:normal;color:var(--accent);padding-inline:.6em}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee.night{border-color:var(--night-line);background:var(--night)}
.marquee.night .track span{color:var(--night-muted)}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* — countdown (grotesk tabular — T6) — */
.countdown{display:flex;gap:var(--space-l);flex-wrap:wrap;margin-top:var(--space-l)}
.countdown div{min-width:5.5rem}
.countdown b{
  display:block;font-family:var(--font-grotesk);font-weight:var(--w-num);
  font-variant-numeric:tabular-nums;font-size:var(--step-4);line-height:1;color:inherit;
}
.countdown span{font-family:var(--font-grotesk);font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hero-night .countdown span{color:var(--night-muted)}

/* — answer-first blocks (AEO core) — */
.qa{border-top:1px solid var(--line-strong);padding-block:var(--space-l)}
.qa h2,.qa h3{font-size:var(--step-3);margin-bottom:var(--space-s)}
.answer-first{
  border-left:3px solid var(--accent);padding-left:var(--space-m);
  font-size:var(--step-1);line-height:var(--lead-snug);color:var(--ink);
  max-width:var(--measure);margin-bottom:var(--space-m);
}
.qa .depth{color:var(--ink-soft);max-width:var(--measure)}
.qa .depth p+p{margin-top:var(--space-s)}
.qa .label-line{display:flex;gap:var(--space-xs);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-s)}

/* — ledger / data tables — */
table.ledger{width:100%;border-collapse:collapse;font-size:var(--step--1)}
table.ledger caption{text-align:left;font-family:var(--font-grotesk);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:var(--space-xs);font-size:var(--step--2)}
table.ledger th,table.ledger td{padding:.8em .9em;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.ledger thead th{font-family:var(--font-grotesk);font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong)}
table.ledger td.num,table.ledger th.num{font-variant-numeric:tabular-nums;font-family:var(--font-grotesk)}
table.ledger tr:hover td{background:color-mix(in srgb,var(--accent-pale) 35%,transparent)}
.table-scroll{overflow-x:auto}

/* — archive chronicle entries — */
.arch{border-top:1px solid var(--line-strong)}
.arch-entry{
  display:grid;grid-template-columns:clamp(8rem,16vw,13rem) 1fr;gap:var(--space-s) var(--space-l);
  padding-block:var(--space-l);border-bottom:1px solid var(--line);align-items:start;
}
.arch-entry .a-date{font-family:var(--font-grotesk);font-variant-numeric:tabular-nums;font-size:var(--step--1);color:var(--accent-text);letter-spacing:.06em;padding-top:.4em}
.arch-entry h3{font-family:var(--font-display);font-size:var(--step-2);font-weight:var(--w-head);letter-spacing:var(--track-head);margin-bottom:var(--space-2xs)}
.arch-entry p{color:var(--ink-soft);max-width:var(--measure)}
.arch-entry .src{font-size:var(--step--2);color:var(--muted);margin-top:var(--space-2xs)}
@media (max-width:680px){.arch-entry{grid-template-columns:1fr}}

/* — market board (Price Index) — */
.board{background:var(--night);color:var(--night-text)}
.board .board-head{display:flex;justify-content:space-between;gap:var(--space-m);flex-wrap:wrap;align-items:baseline;border-bottom:1px solid var(--night-line);padding-bottom:var(--space-m);margin-bottom:var(--space-l)}
.board .board-head .status{font-family:var(--font-grotesk);letter-spacing:.14em;text-transform:uppercase;font-size:var(--step--1);color:#e0a63c}
.board-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl) var(--space-2xl)}
@media (max-width:960px){.board-grid{grid-template-columns:1fr}}
.board-cat h3{font-family:var(--font-grotesk);font-size:var(--step-0);letter-spacing:.14em;text-transform:uppercase;color:var(--night-text);display:flex;justify-content:space-between;border-bottom:1px solid var(--night-line);padding-bottom:var(--space-2xs);margin-bottom:var(--space-2xs)}
.board-cat h3 span{color:var(--night-muted);font-size:var(--step--2)}
table.board-table{width:100%;border-collapse:collapse;font-size:var(--step--1)}
table.board-table td{padding:.65em .2em;border-bottom:1px solid var(--night-line);color:var(--night-muted)}
table.board-table td.inst{color:var(--night-text)}
table.board-table td.val{font-family:var(--font-grotesk);font-variant-numeric:tabular-nums;text-align:right;color:var(--night-muted);white-space:nowrap}
table.board-table td.move{font-family:var(--font-grotesk);text-align:right;width:5.5em;color:var(--night-muted)}
.board-note{color:var(--night-muted);font-size:var(--step--1);max-width:var(--measure);margin-top:var(--space-l)}

/* — compact market strip (home) — */
.market-strip{background:var(--night);color:var(--night-text)}
.market-strip .ms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-m);margin-top:var(--space-m)}
@media (max-width:960px){.market-strip .ms-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.market-strip .ms-grid{grid-template-columns:1fr}}
.market-strip .ms-cell{border-top:1px solid var(--night-line);padding-top:var(--space-s)}
.market-strip .ms-cell b{display:block;font-family:var(--font-grotesk);font-size:var(--step-1);font-weight:var(--w-num);letter-spacing:.08em;text-transform:uppercase}
.market-strip .ms-cell span{font-family:var(--font-grotesk);font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:#e0a63c}

/* — email capture / forms (honest, mailto-backed) — */
.capture{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-m);max-width:36rem}
.capture input{
  flex:1 1 16rem;font:inherit;font-size:var(--step--1);color:var(--ink);
  background:#fff;border:1px solid var(--line-strong);padding:.8em 1em;border-radius:0;
}
.capture input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.on-night-form input{background:var(--night-2);color:var(--night-text);border-color:var(--night-line)}

/* — price line on product rows — */
.price{font-family:var(--font-grotesk);font-variant-numeric:tabular-nums;font-size:var(--step-1);color:var(--ink);white-space:nowrap}

/* — two-column prose layout for guides — */
.prose{max-width:var(--measure)}
.prose p+p{margin-top:var(--space-s)}
.prose h3{font-family:var(--font-display);font-size:var(--step-2);font-weight:var(--w-head);letter-spacing:var(--track-head);margin-top:var(--space-l);margin-bottom:var(--space-2xs)}
.prose ul{padding-left:1.2em;color:var(--ink-soft)}
.prose li+li{margin-top:.35em}
.prose p{color:var(--ink-soft)}
.prose strong{color:var(--ink)}

/* — footer nav columns — */
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-l);border-top:1px solid var(--line);padding-top:var(--space-m)}
@media (max-width:680px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer h4{font-family:var(--font-grotesk);font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-2xs);font-weight:500}
.site-footer .cols a{display:block;padding-block:.22em}

/* anchor offset for in-page entry links under the fixed nav */
[id]{scroll-margin-top:7rem}
