/* ============================================================================
   Calibrated — "Calibrated Scope" predictions page (upcoming + past/results).
   Same toned-down Signal design language as landing.css, separate sheet because
   the two views use divergent component class systems (e.g. .track means the
   record band on the landing page but the driver rail here).
   ============================================================================ */
:root{
  --bg:#0B1119; --panel:#121B27; --line:#23303F;
  --ink:#E6ECF3; --dim:#93A4B8;
  --green:#46E0A0; --cyan:#4FC8E6; --amber:#F2B544;
  --disp:"Chakra Petch",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --r:10px; --sp:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.disp{font-family:var(--disp);letter-spacing:.02em}
.label{font-family:var(--disp);text-transform:uppercase;letter-spacing:.13em;font-size:12px;color:var(--dim);font-weight:600}

/* header */
header{position:sticky;top:0;z-index:20;background:rgba(11,17,25,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.04em;display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(70,224,160,.15)}
.nav nav{display:flex;gap:24px}
.nav nav a{font-family:var(--disp);font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--dim);padding:6px 2px;border-bottom:2px solid transparent}
.nav nav a:hover,.nav nav a.active{color:var(--ink);border-color:var(--green)}

/* page head */
.phead{padding:40px 0 8px}
.phead h1{font-family:var(--disp);font-weight:700;font-size:34px;margin:0 0 6px;letter-spacing:.01em}
.thesis{color:var(--ink);font-size:16px;max-width:60ch;margin:0 0 4px}
.thesis b{color:var(--green);font-weight:600}

/* track-record instrument */
.instrument{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin:20px 0 8px;display:grid;grid-template-columns:240px 1fr;gap:0}
.scopebox{padding:18px;border-right:1px solid var(--line)}
.scopebox svg{display:block;width:100%;height:auto}
.scopebox figcaption{font-size:11px;color:var(--dim);margin-top:6px;text-align:center;letter-spacing:.04em}
.metrics{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.brierrow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brierbig{font-family:var(--mono);font-weight:600;font-size:40px;color:var(--green);line-height:1}
.brierbig small{font-size:13px;color:var(--dim)}
.acc{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--cyan)}
.metnote{font-size:13px;color:var(--dim);max-width:54ch}
.baselines{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:12px;color:var(--ink);background:#0d1622;border:1px solid var(--line);border-radius:6px;padding:5px 9px}
.chip b{color:var(--dim);font-weight:400}
.chip.win{border-color:rgba(70,224,160,.45)}
.chip.win b{color:var(--green)}
.stamp{font-family:var(--mono);font-size:11px;color:var(--dim)}

/* sections */
.sec{padding:34px 0 8px}
.sechead{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sechead h2{font-family:var(--disp);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.16em;margin:0;color:var(--ink)}
.sechead .rule{flex:1;height:1px;background:var(--line)}
.sechead .count{font-family:var(--mono);font-size:12px;color:var(--dim)}

.grid{display:grid;gap:16px}

/* prediction card */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;position:relative}
.card.first{border-color:rgba(70,224,160,.4)}
.ctop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.meta{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.02em}
.meta .ev{color:var(--ink)}
.badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tag{font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:5px;border:1px solid var(--line);color:var(--dim)}
.tag.recent{color:var(--green);border-color:rgba(70,224,160,.45)}
.tag.committed{color:var(--cyan);border-color:rgba(79,200,230,.45)}
.tag.thin{color:var(--amber);border-color:rgba(242,181,68,.5)}
.tag.correct{color:#0B1119;background:var(--green);border-color:var(--green)}
.tag.miss{color:var(--amber);border-color:var(--amber)}
.cd{font-family:var(--mono);font-size:13px;color:var(--amber)}

/* gauge */
.teams{display:flex;justify-content:space-between;align-items:baseline;margin:4px 0 6px}
.tname{font-family:var(--disp);font-size:17px;font-weight:600}
.tA{color:var(--green)} .tB{color:var(--cyan)}
.tpct{font-family:var(--mono);font-size:17px;font-weight:600}
.gauge{height:12px;border-radius:6px;overflow:hidden;display:flex;border:1px solid var(--line);position:relative}
.gauge .fa{background:var(--green)} .gauge .fb{background:var(--cyan)}
/* GAUGE TEAM LABELS — short token rides each coloured fill (colour-blind cue). */
.gtag{position:absolute;top:50%;transform:translateY(-50%);max-width:44%;line-height:1;
  font-family:var(--mono);font-size:9.5px;font-weight:700;color:#06241A;letter-spacing:.04em;z-index:2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtag.a{left:8px} .gtag.b{right:8px}
.favors{font-size:12.5px;color:var(--dim);margin-top:7px}
.favors b{color:var(--ink);font-weight:600}

/* driver deflection */
.drivers{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.drow{display:grid;grid-template-columns:148px 1fr 54px;align-items:center;gap:10px;margin:5px 0}
.dlabel{font-size:12.5px;color:var(--ink)}
.dlabel .lim{color:var(--amber);font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;margin-left:4px}
.track{position:relative;height:14px}
.track::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--line)}
.bar{position:absolute;top:2px;height:10px;border-radius:3px;animation:grow .8s cubic-bezier(.2,.7,.3,1) both}
.bar.left{right:50%;background:var(--green);transform-origin:right center}
.bar.right{left:50%;background:var(--cyan);transform-origin:left center}
.bar.lim{opacity:.55;background-image:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(11,17,25,.5) 3px,rgba(11,17,25,.5) 5px)}
/* baseline anchor — the favourite prior; outlined + a divider so it reads as the STARTING POINT */
.bar.left.anchor{background:color-mix(in srgb,var(--green) 24%,transparent);border:1px solid var(--green)}
.bar.right.anchor{background:color-mix(in srgb,var(--cyan) 24%,transparent);border:1px solid var(--cyan)}
.drow.anchor{border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:2px}
.drow.anchor .dlabel{color:var(--ink);font-weight:600}
.dmag{font-family:var(--mono);font-size:12px;color:var(--dim);text-align:right}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.dcap{font-size:11.5px;color:var(--dim);margin-top:10px;line-height:1.45}

/* thin / withheld / commit */
.thinband{margin-top:12px;border-left:2px solid var(--amber);background:rgba(242,181,68,.06);padding:9px 12px;border-radius:0 6px 6px 0;font-size:12.5px;color:var(--ink)}
.commit{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;font-size:12px;color:var(--dim);line-height:1.5}
.commit .hash{font-family:var(--mono);color:var(--ink)}
.commit b{color:var(--ink);font-weight:600}
/* copyable fingerprint chip — abbreviated label, click copies the full 64-char hash */
.fp{appearance:none;-webkit-appearance:none;font:inherit;background:none;border:0;padding:0;margin:0;
  cursor:pointer;display:inline-flex;align-items:center;gap:5px;vertical-align:baseline;
  font-family:var(--mono);color:var(--cyan)}
.fp__short{border-bottom:1px dotted transparent}
.fp:hover .fp__short,.fp:focus-visible .fp__short{border-bottom-color:currentColor}
.fp__ic{opacity:.6;font-size:.95em}
.fp:hover .fp__ic,.fp:focus-visible .fp__ic{opacity:1}
.fp.copied{color:var(--green)}
.withheld{border:1px dashed var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:4px;background:repeating-linear-gradient(135deg,transparent,transparent 10px,rgba(35,48,63,.18) 10px,rgba(35,48,63,.18) 11px)}
.withheld .wt{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--ink)}
.withheld .wm{font-family:var(--mono);font-size:12px;color:var(--dim)}
.withheld .wr{font-size:13px;color:var(--ink)}
.withheld .wr b{color:var(--amber)}

/* result extras */
.result{margin-top:6px;font-size:14px}
.result .out{font-family:var(--disp);font-weight:600}
.scorednote{font-size:13px;color:var(--dim);margin-bottom:16px;max-width:64ch}
.scorednote b{color:var(--ink);font-weight:600}

/* footer */
footer{border-top:1px solid var(--line);margin-top:48px;padding:24px 0 40px}
.legal{font-size:12px;color:var(--dim);line-height:1.7;max-width:80ch}
.legal a{color:var(--ink)}
.legal .age{font-family:var(--mono);color:var(--amber)}

/* status line (loading / honest empty / error) */
.status{font-size:14px;color:var(--dim);padding:14px 0}
.status strong{color:var(--ink);font-weight:600}

/* TOOLTIP — plain term on the surface, the precise detail one hover/focus away */
.term{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;background:none;border:0;
  border-bottom:1px dotted var(--cyan);padding:0;cursor:help;position:relative;
  text-transform:inherit;letter-spacing:inherit}
.term .tip{position:absolute;left:0;bottom:calc(100% + 8px);width:max-content;max-width:260px;
  background:#0d1726;border:1px solid var(--line);border-radius:8px;padding:9px 11px;
  font-family:var(--body);font-size:12.5px;font-weight:400;line-height:1.45;color:var(--ink);
  text-transform:none;letter-spacing:normal;text-align:left;white-space:normal;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .14s ease,transform .14s ease;
  z-index:80;box-shadow:0 10px 28px rgba(0,0,0,.45);pointer-events:none}
.term:hover .tip,.term:focus .tip{opacity:1;visibility:visible;transform:translateY(0)}
.term.r .tip{left:auto;right:0}
@media(max-width:560px){.term .tip{max-width:220px}}
@media(prefers-reduced-motion:reduce){.term .tip{transition:none}}

:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:3px}

@media (max-width:720px){
  .instrument{grid-template-columns:1fr}
  .scopebox{border-right:none;border-bottom:1px solid var(--line)}
  .drow{grid-template-columns:118px 1fr 46px;gap:7px}
  .phead h1{font-size:28px}
  .brierbig{font-size:34px}
}
@media (prefers-reduced-motion:reduce){.bar{animation:none}}