/* Three Years to Pilot — design tokens and layout.
   Season bands are a CSS gradient on .track, not markup. */

:root {
  --paper:#F7F6F2; --surface:#FFFFFF; --ink:#0E2E2B; --ink-2:#3F605B; --ink-3:#7A918D;
  --line:#D9DDD6; --line-2:#E9ECE6; --ember:#B84F16;
  --dry:#F1E9D8; --wet:#E3EAEE; --bar:#2C5450; --bar-soft:#9FB5B1;
  --labelw:290px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0B1817; --surface:#122423; --ink:#E7EDEA; --ink-2:#A6BCB7; --ink-3:#6E8783;
    --line:#22403D; --line-2:#1A302E; --ember:#E07437;
    --dry:#1E2A24; --wet:#17252A; --bar:#61958E; --bar-soft:#33524E;
  }
}
:root[data-theme="dark"] {
  --paper:#0B1817; --surface:#122423; --ink:#E7EDEA; --ink-2:#A6BCB7; --ink-3:#6E8783;
  --line:#22403D; --line-2:#1A302E; --ember:#E07437;
  --dry:#1E2A24; --wet:#17252A; --bar:#61958E; --bar-soft:#33524E;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1240px;margin:0 auto;padding:48px 28px 80px}

/* ---- header ---- */
header{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:26px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;margin:0 0 10px}
h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(38px,6vw,60px);
  line-height:1.02;margin:0 0 12px;letter-spacing:-.015em;text-wrap:balance}
.sub{margin:0;max-width:62ch;color:var(--ink-2);font-size:16px}
.stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:26px}
.stat b{display:block;font-size:27px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.stat.em b{color:var(--ember)}

/* ---- headings ---- */
h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:31px;
  margin:56px 0 6px;letter-spacing:-.01em}
.lede{margin:0 0 20px;color:var(--ink-2);max-width:64ch}

/* ---- controls ---- */
.tools{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;margin:0 0 18px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font:inherit;font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:2px;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;letter-spacing:.02em}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.key{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--ink-2)}
.key i{display:inline-block;width:15px;height:11px;vertical-align:-1px;margin-right:6px;border-radius:1px}
.k-dry{background:var(--dry)} .k-wet{background:var(--wet)}
.k-bar{background:var(--bar)} .k-soft{background:var(--bar-soft)}
.k-mile{background:var(--ember);width:9px;height:9px;transform:rotate(45deg);margin-right:9px}

/* ---- chart shell ---- */
.scroll{overflow-x:auto;border:1px solid var(--line);background:var(--surface);border-radius:3px}
.chart{min-width:940px}
.head{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}

/* every row: label column + a 12-column track */
.row{display:grid;grid-template-columns:var(--labelw) 1fr;align-items:stretch;
  border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:0}

.lbl{padding:6px 14px 6px 16px;display:flex;gap:10px;align-items:baseline;
  background:var(--surface);border-right:1px solid var(--line);position:sticky;left:0;z-index:2;
  min-height:30px}
.lid{font-size:11px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;
  flex:0 0 auto;letter-spacing:.03em}
.lname{font-size:13px;color:var(--ink-2);line-height:1.32}
.lname.strong{color:var(--ink);font-weight:600;font-size:13.5px}

/* THE SEASON GROUND — one gradient, not 1,260 divs.
   Per year: Q1 wet, Q2+Q3 dry, Q4 wet. Repeats every four columns (33.3333%). */
.track{
  display:grid;grid-template-columns:repeat(12,1fr);align-items:center;
  min-height:30px;position:relative;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 8.3333%,
      var(--line-2) 8.3333% calc(8.3333% + 1px),
      transparent calc(8.3333% + 1px) 8.3333%),
    repeating-linear-gradient(90deg,
      var(--wet) 0 8.3333%,
      var(--dry) 8.3333% 25%,
      var(--wet) 25% 33.3333%);
}

.bar{height:9px;background:var(--bar-soft);border-radius:1.5px;margin:0 2px;position:relative;z-index:1}
.bar.critical{background:var(--bar);height:11px}
.bar[data-status="done"]{opacity:.45}
.bar[data-status="in-progress"]{outline:1.5px solid var(--ember);outline-offset:1.5px}

/* ---- header rows ---- */
.yrow .yc{font-family:"Instrument Serif",Georgia,serif;font-size:19px;padding:11px 10px 4px;
  color:var(--ink);border-left:1px solid var(--line);grid-column:span 4}
.yrow .yc.pilot{color:var(--ember)}
.qc{font-size:11px;font-weight:600;letter-spacing:.07em;color:var(--ink-3);
  padding:2px 10px 9px;border-left:1px solid var(--line-2)}
.qc.dry{color:var(--ink-2)}
.head .track{background:none;min-height:0}

/* ---- summary + milestones ---- */
.srow .lbl{flex-direction:column;gap:1px;justify-content:center;min-height:38px}
.srow .track{min-height:38px}
.sbar{height:15px;background:var(--bar);opacity:.92}
.mrow .track{min-height:76px;align-items:start}
.mrow .lbl{align-items:center;min-height:76px}
.mstack{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 3px 8px}
.dia{width:9px;height:9px;background:var(--ember);transform:rotate(45deg);flex:0 0 auto}
.mlab{font-size:10.5px;line-height:1.25;text-align:center;color:var(--ink-2);max-width:96px}
.mlab em{font-style:normal;color:var(--ink-3);font-weight:600}

/* ---- lanes ---- */
.lane{border-top:1px solid var(--line)}
.lanehd{margin:0;padding:11px 16px 9px;font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);background:var(--surface);position:sticky;left:0}
.lanehd span{color:var(--ink-3);font-weight:600;margin-left:7px;letter-spacing:.03em}
.row.hidden{display:none}
.lane.hidden{display:none}

.tip{position:absolute;left:0;bottom:17px;background:var(--ink);color:var(--paper);
  font-size:11.5px;padding:5px 9px;border-radius:2px;white-space:nowrap;opacity:0;
  pointer-events:none;transition:opacity .12s;z-index:9}
.bar:hover .tip{opacity:1}

/* ---- pilot table ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line-2);vertical-align:top}
thead th{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line)}
tbody th{font-weight:600;white-space:nowrap}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

.note{font-size:13.5px;color:var(--ink-2);border-left:2px solid var(--ember);
  padding:2px 0 2px 15px;margin:22px 0;max-width:66ch}
footer{margin-top:64px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3)}
.err{border-left:2px solid var(--ember);padding:10px 0 10px 15px;color:var(--ink)}
.err code{font-size:13px;background:var(--line-2);padding:1px 5px;border-radius:2px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:640px){ .wrap{padding:34px 16px 60px} :root{--labelw:190px} }