
/* Site chrome layered over the palette _SLATE_CSS defines. Tokens only —
   no literal colours here, so the two stylesheets can never disagree. */

.site-nav { position:sticky; top:0; z-index:60; background:rgba(13,15,24,.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); }
.site-nav .inner { max-width:1140px; margin:0 auto; padding:0 20px; height:56px;
  display:flex; align-items:center; gap:24px; }
.site-nav .brand { display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:1rem; color:var(--text);
  text-decoration:none; white-space:nowrap; letter-spacing:-.01em; }
.site-nav .brand .mark { height:17px; width:auto; flex:none; color:var(--accent); }
.site-nav .brand .wordmark span { color:var(--accent); }
.site-nav .links { display:flex; gap:20px; overflow-x:auto; scrollbar-width:none; }
.site-nav .links::-webkit-scrollbar { display:none; }
.site-nav a.nl { color:var(--muted); text-decoration:none; font-size:.86rem;
  font-weight:500; white-space:nowrap; padding:18px 0 16px;
  border-bottom:2px solid transparent; }
.site-nav a.nl:hover { color:var(--text); }
.site-nav a.nl.on { color:var(--text); border-bottom-color:var(--accent); }
.site-nav a.nl:focus-visible, .site-nav .brand:focus-visible,
a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

.page-head { padding:34px 0 20px; border-bottom:1px solid var(--border);
  margin-bottom:24px; }
.page-head h1 { margin:0; font-size:1.75rem; font-weight:700;
  letter-spacing:-.015em; text-wrap:balance; }
.page-head h1 span { color:var(--accent); }
.page-head p { color:var(--muted); font-size:.9rem; margin:10px 0 0;
  max-width:68ch; line-height:1.6; }
h2.sec { font-size:1.06rem; margin:36px 0 13px; font-weight:650; letter-spacing:-.01em; }
h2.sec .hint { color:var(--muted); font-weight:400; font-size:.8rem;
  margin-left:9px; letter-spacing:0; }
p.note { color:var(--muted); font-size:.83rem; line-height:1.6; max-width:74ch;
  margin:11px 0 0; }

.hero { background:linear-gradient(170deg,var(--surface) 0%,var(--bg) 100%);
  border:1px solid var(--border); border-radius:14px; padding:30px 28px; margin-bottom:24px; }
.hero .eyebrow { color:var(--accent); font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; }
.hero h1 { margin:11px 0 0; font-size:2.05rem; font-weight:700;
  letter-spacing:-.025em; text-wrap:balance; }
.hero p { color:var(--muted); margin:11px 0 0; max-width:62ch; line-height:1.6;
  font-size:.93rem; }
.hero .cta { display:inline-block; margin-top:19px; background:var(--accent);
  color:#08101f; font-weight:650; font-size:.87rem; padding:10px 19px;
  border-radius:7px; text-decoration:none; }
.hero .cta:hover { filter:brightness(1.08); }
.hero .cta.ghost { background:none; color:var(--text);
  border:1px solid var(--border2); margin-left:8px; }

.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(152px,1fr)); gap:12px; }
.kpi { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:15px 16px; }
.kpi .k { color:var(--muted); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.08em; font-weight:600; }
.kpi .v { font-size:1.5rem; font-weight:700; margin-top:7px;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.kpi .n { color:var(--muted); font-size:.74rem; margin-top:4px; line-height:1.45; }
.kpi .v.good { color:var(--green); }
.kpi .v.bad  { color:var(--red); }

.dwrap { overflow-x:auto; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:2px 18px 6px; }
.dtable { width:100%; border-collapse:collapse; font-size:.84rem; min-width:640px; }
.dtable th { text-align:left; font-size:.65rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
  border-bottom:1px solid var(--border2); padding:12px 12px 9px 0; white-space:nowrap; }
.dtable td { padding:9px 12px 9px 0; border-bottom:1px solid var(--border);
  vertical-align:middle; }
.dtable tr:last-child td { border-bottom:none; }
.dtable tbody tr:hover { background:var(--surface2); }
.dtable .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.dtable th.num { text-align:right; }
.dtable .sub { color:var(--muted); font-size:.76rem; }
.dtable .tm { display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-weight:600; }
.dtable .tm img { width:19px; height:19px; object-fit:contain; flex:none; }
.dtable tr.tot td { border-top:1px solid var(--border2); font-weight:650;
  border-bottom:none; }

.pill { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.67rem;
  font-weight:700; letter-spacing:.03em; white-space:nowrap; }
.pill.w    { background:rgba(62,207,142,.16); color:var(--green); border:1px solid rgba(62,207,142,.30); }
.pill.l    { background:rgba(224,92,107,.15); color:var(--red);   border:1px solid rgba(224,92,107,.30); }
.pill.p    { background:var(--surface3); color:var(--muted); border:1px solid var(--border2); }
.pill.hold { background:rgba(91,140,245,.15); color:var(--accent); border:1px solid rgba(91,140,245,.32); }

.seasons { display:grid; grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); gap:9px; }
.seasons a { display:block; text-align:center; padding:14px 6px; background:var(--surface);
  border:1px solid var(--border); border-radius:8px; color:var(--text);
  text-decoration:none; font-weight:650; font-variant-numeric:tabular-nums; }
.seasons a:hover { border-color:var(--accent); color:var(--accent); }
.seasons a .mini { display:block; color:var(--muted); font-size:.68rem;
  font-weight:500; margin-top:3px; }

.chart-card { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 18px 12px; overflow-x:auto; }
.chart-card h3 { margin:0 0 4px; font-size:.92rem; font-weight:650; }
.chart-card .cap { color:var(--muted); font-size:.78rem; margin:0 0 13px; }

.weeklist { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.weeklist a { display:block; padding:14px 15px; background:var(--surface);
  border:1px solid var(--border); border-radius:9px; text-decoration:none; color:var(--text); }
.weeklist a:hover { border-color:var(--accent); }
.weeklist a .wk { display:block; font-weight:650; font-size:.94rem; }
.weeklist a .mt { display:block; color:var(--muted); font-size:.75rem; margin-top:3px; }

.disclaimer { background:var(--surface); border:1px solid var(--border);
  border-left:3px solid #ffaa33; border-radius:7px; padding:13px 16px;
  color:var(--muted); font-size:.79rem; line-height:1.62; margin:26px 0 0; max-width:80ch; }
.foot { margin-top:50px; padding-top:22px; border-top:1px solid var(--border);
  color:var(--muted); font-size:.78rem; line-height:1.62; }
.foot p { margin:7px 0 0; max-width:80ch; }
.foot a { color:var(--muted); }
.dl { display:inline-block; margin-top:14px; font-size:.8rem; color:var(--accent);
  text-decoration:none; border:1px solid var(--border2); border-radius:6px;
  padding:7px 13px; }
.dl:hover { border-color:var(--accent); }
.empty { background:var(--surface); border:1px dashed var(--border2);
  border-radius:var(--radius); padding:30px 24px; color:var(--muted);
  font-size:.88rem; line-height:1.6; text-align:center; }

@media (max-width:640px) {
  .site-nav .inner { gap:14px; padding:0 12px; }
  .site-nav .brand { font-size:.9rem; gap:7px; }
  .site-nav .brand .mark { height:15px; }
  .page-head { padding:24px 0 16px; }
  .page-head h1 { font-size:1.36rem; }
  .hero { padding:21px 17px; }
  .hero h1 { font-size:1.5rem; }
  .hero .cta.ghost { margin-left:0; margin-top:8px; }
  .dwrap { padding:2px 12px 6px; }
  .kpi .v { font-size:1.32rem; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }
