/* ============================================================
   THE MACHINE, LIVE — page styles for the Proof of Work site.
   Built on the F2F Web Standard tokens (tokens.css). Paper,
   ink, one wheat-gold accent. No gradients. Status hues are
   functional only.
   ============================================================ */

.wrap{max-width:var(--grid-max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* — nav — */
.live-nav{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--line)}
.live-nav .brand{font-family:var(--font-display);font-weight:560;font-size:1.25rem;color:var(--ink);text-decoration:none;padding:.8rem 0}
.live-nav .brand span{color:var(--accent-text)}
.nav-links{display:flex;gap:1.4rem}
.nav-links a{font-family:var(--font-grotesk);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--accent-text)}

/* — hero — */
.live-hero{padding-top:var(--space-xl);max-width:960px}
.live-hero h1{font-size:var(--step-5);letter-spacing:var(--track-display);line-height:var(--lead-display);margin:.4rem 0 1rem}
.live-hero .lede{font-size:var(--step-1);line-height:var(--lead-snug);color:var(--ink-soft);max-width:62ch}
.built-stamp{font-family:var(--font-grotesk);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:1.2rem}

/* — dials — */
.dials{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:var(--space-l)}
.dial{border:1px solid var(--line-strong);background:var(--paper-2);padding:1.6rem 1.6rem 1.3rem}
.dial-label{font-family:var(--font-grotesk);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.dial-num{font-family:var(--font-grotesk);font-weight:480;font-size:clamp(4rem,9vw,6.5rem);line-height:1;color:var(--ink);margin:.5rem 0 .4rem;font-variant-numeric:tabular-nums}
.dial-prefix{color:var(--accent-text)}
.dial-unit{font-size:.35em;color:var(--muted);margin-left:.35rem;letter-spacing:.1em}
.dial-note{color:var(--ink-soft);line-height:var(--lead-snug);max-width:52ch;margin:0}
.stamp{font-family:var(--font-grotesk);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:.9rem 0 0}
.read-note{margin-top:1.4rem;border-left:3px solid var(--accent);padding:.4rem 0 .4rem 1rem;color:var(--ink-soft);max-width:70ch}

/* — sections — */
.live-sec{margin-top:var(--space-section)}
.sec-head{max-width:760px;margin-bottom:var(--space-l)}
.sec-head h2{font-size:var(--step-4);letter-spacing:var(--track-display);line-height:1.08;margin:.3rem 0 .6rem}
.sec-sub{color:var(--ink-soft);font-size:var(--step-0);line-height:var(--lead-snug);margin:0}

/* — swarm map — */
.map{border:1px solid var(--line-strong);background:var(--paper-2);padding:clamp(1.2rem,3vw,2.4rem)}
.map-top{display:grid;grid-template-columns:1fr 64px 1fr;align-items:stretch;max-width:880px;margin:0 auto var(--space-m)}
.map-link{align-self:center;height:2px;background:var(--accent);position:relative}
.map-link::after{content:"";position:absolute;right:-1px;top:-4px;border-left:9px solid var(--accent);border-top:5px solid transparent;border-bottom:5px solid transparent}
.map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.node{border:1px solid var(--line-strong);background:var(--paper);padding:1.2rem 1.2rem 1rem}
.node-root{border-width:2px}
.node-op{border-color:var(--accent)}
.node-head{display:flex;align-items:center;gap:.55rem;margin:0 0 .5rem}
.node-name{font-family:var(--font-display);font-weight:560;font-size:1.15rem;color:var(--ink)}
.node-big{font-family:var(--font-grotesk);font-size:1.6rem;font-weight:480;color:var(--ink);margin:.2rem 0;font-variant-numeric:tabular-nums}
.node-role{color:var(--ink-soft);line-height:var(--lead-snug);margin:0}
.node .stamp{margin-top:.7rem}
.dot{width:.72rem;height:.72rem;border-radius:50%;flex:none}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn)}
.dot.info{background:var(--info)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,125,79,.45)}70%{box-shadow:0 0 0 9px rgba(46,125,79,0)}100%{box-shadow:0 0 0 0 rgba(46,125,79,0)}}
.dot.pulse{animation:pulse 2.6s var(--ease-3) infinite}

/* — honest ledger (night) — */
.ledger{background:var(--night);color:var(--night-text);padding:clamp(1.6rem,4vw,3.2rem);margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding-left:var(--gutter);padding-right:var(--gutter)}
.ledger .sec-head h2{color:var(--night-text)}
.ledger .sec-sub{color:var(--night-muted)}
.ledger .eyebrow{color:var(--accent-bright)}
.ledger-rows{display:grid;gap:0}
.lrow{display:grid;grid-template-columns:minmax(180px,280px) 1fr;gap:1.6rem;padding:1.5rem 0;border-top:1px solid var(--night-line)}
.lrow-num{font-family:var(--font-grotesk);font-weight:480;font-size:clamp(2.6rem,6vw,4.2rem);line-height:1;color:var(--night-text);margin:0;font-variant-numeric:tabular-nums}
.lrow-num.neg{color:#e08a6d}
.lrow-num.warn{color:var(--accent-bright)}
.lrow-unit{display:block;font-size:.95rem;color:var(--night-muted);letter-spacing:.08em;margin-top:.45rem}
.lrow h3{color:var(--night-text);font-size:1.3rem;margin:.15rem 0 .4rem}
.lrow p{color:var(--night-muted);line-height:var(--lead-snug);margin:0;max-width:62ch}
.lrow .stamp{color:var(--night-muted);opacity:.75}

/* — how it runs — */
.runs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.run{border-top:2px solid var(--ink);padding-top:1rem}
.run-idx{font-family:var(--font-grotesk);color:var(--accent-text);font-size:.85rem;letter-spacing:.14em;margin:0}
.run h3{font-size:1.35rem;margin:.4rem 0 .5rem}
.run p{color:var(--ink-soft);line-height:var(--lead-snug);margin:0}
.steer-strip{margin-top:var(--space-l);border:1px solid var(--line-strong);background:var(--paper-2);padding:1.2rem 1.4rem;font-size:var(--step-0);color:var(--ink-soft)}
.steer-strip strong{color:var(--ink)}

/* — ticker — */
.ticker{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.ticker li{display:grid;grid-template-columns:200px 1fr;gap:1.4rem;padding:1.05rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.ticker .t-date{font-family:var(--font-grotesk);font-size:.85rem;letter-spacing:.06em;color:var(--accent-text);text-transform:uppercase}
.ticker .t-text{font-size:var(--step-0);color:var(--ink);line-height:var(--lead-snug)}
.ticker .t-links a{font-family:var(--font-grotesk);font-size:.85rem;margin-right:.9rem}

/* — motto — */
.motto-band{margin:var(--space-section) 0 var(--space-xl);text-align:left}
.motto{font-family:var(--font-display);font-weight:520;font-size:var(--step-4);letter-spacing:var(--track-display);line-height:1.12;color:var(--ink);margin:0 0 1rem}
.motto-sub{color:var(--ink-soft);max-width:62ch;line-height:var(--lead-snug)}
.motto-sub a{color:var(--accent-text)}

/* — footer — */
.site-footer{border-top:1px solid var(--line);padding:2rem 0 2.6rem;color:var(--muted)}
.site-footer a{color:var(--accent-text)}

/* — reveal (JS-set initial states only; no-JS sees the page) — */
.js .rv{opacity:0;transform:translateY(18px)}
.js .rv.in{opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease-out-expo),transform var(--dur-3) var(--ease-out-expo)}

/* — responsive — */
@media (max-width:900px){
  .map-grid,.runs{grid-template-columns:1fr 1fr}
  .dials{grid-template-columns:1fr}
}
@media (max-width:600px){
  .map-grid,.runs{grid-template-columns:1fr}
  .map-top{grid-template-columns:1fr;gap:.8rem}
  .map-link{width:2px;height:26px;justify-self:center}
  .map-link::after{right:auto;left:-4px;top:auto;bottom:-1px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:9px solid var(--accent);border-bottom:none}
  .lrow{grid-template-columns:1fr;gap:.5rem}
  .ticker li{grid-template-columns:1fr;gap:.25rem}
  .nav-links{gap:.9rem}
}

/* — reduced motion — */
@media (prefers-reduced-motion: reduce){
  .dot.pulse{animation:none}
  .js .rv{opacity:1;transform:none}
  .js .rv.in{transition:none}
}