/* Foretec Energy Bench: foretec.be colours and logo; type set like a research publication
   (Source Serif 4 headings and figures, Source Sans 3 text and tables with tabular numerals) */
:root{
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"Source Code Pro",ui-monospace,monospace;
  /* the Foretec wordmark face: titles lean forward like the logo */
  --brand:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* display faces, subset via the Google Fonts text= parameter: wide heavy for the LIVE bug,
     Futura (Jost where Futura is not installed) for the podium numerals */
  --display:"Archivo","Arial Black",sans-serif;
  --futura:Futura,"Futura PT",Jost,"Century Gothic",sans-serif;
  --onair:#D7263D;
  --ground:#E6F0F2; --surface:#FFFFFF; --raise:#F1F7F8;
  --ink:#0B1F3A; --ink2:#4E6578; --rule:#C6D9E0;
  --blue:#3F6C8B; --blue-ink:#3F6C8B; --blue-soft:#DCE9EF;
  --amber:#B24B77; --amber-soft:#F7E4EC;
  --green:#24735A; --green-soft:#D9EDE3;
  --shadow:none;
  /* leaderboard additions */
  --muted:#6B7F8F; --grid:#E3ECEF;
  --bt:#8D99A4; --bt-ink:#76838F; --bt-soft:#EEF1F3; --band:rgba(11,31,58,.055);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948; --s9:#2f4b2f;
  --heat-live-lo:#cde2fb; --heat-live-hi:#184f95; --heat-bt-lo:#F0F2F4; --heat-bt-hi:#5F6B76;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B1F3A; --surface:#12294A; --raise:#0E2442;
    --ink:#E6F0F2; --ink2:#7DAAC7; --rule:#1E3B60;
    --blue:#7DAAC7; --blue-ink:#9CC3D9; --blue-soft:#152F52;
    --amber:#FFC1DD; --amber-soft:#2C1A28;
    --green:#7FCBAA; --green-soft:#12332A;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -14px rgba(0,0,0,.75);
    --muted:#6F8DA6; --grid:#183253;
    --bt:#7C8C9C; --bt-ink:#8D9DAD; --bt-soft:#172C47; --band:rgba(230,240,242,.05);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767; --s9:#a8c8a0;
    --heat-live-lo:#1A3558; --heat-live-hi:#6da7ec; --heat-bt-lo:#172C47; --heat-bt-hi:#93A1AE;
  }
}
:root[data-theme="dark"]{
  --ground:#0B1F3A; --surface:#12294A; --raise:#0E2442;
  --ink:#E6F0F2; --ink2:#7DAAC7; --rule:#1E3B60;
  --blue:#7DAAC7; --blue-ink:#9CC3D9; --blue-soft:#152F52;
  --amber:#FFC1DD; --amber-soft:#2C1A28;
  --green:#7FCBAA; --green-soft:#12332A;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -14px rgba(0,0,0,.75);
  --muted:#6F8DA6; --grid:#183253;
  --bt:#7C8C9C; --bt-ink:#8D9DAD; --bt-soft:#172C47; --band:rgba(230,240,242,.05);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767; --s9:#a8c8a0;
  --heat-live-lo:#1A3558; --heat-live-hi:#6da7ec; --heat-bt-lo:#172C47; --heat-bt-hi:#93A1AE;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:150px; font-size:106.25%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern","liga";
}
.wrap{max-width:1060px; margin:0 auto; padding:0 28px}
@media(max-width:560px){ .wrap{padding:0 16px} }

h1,h2,h3{font-family:var(--brand); font-style:italic; text-wrap:balance; margin:0}
h1{font-size:clamp(2.1rem,4.6vw,3.1rem); font-weight:900; line-height:1.08; letter-spacing:-.034em}
/* one size for every section and panel title; Standings, the page's headline, is the only larger one */
h2,h3{font-size:1.35rem; font-weight:800; line-height:1.2; letter-spacing:-.024em}
#standings h2{font-size:clamp(2rem,3.8vw,2.6rem); font-weight:900; letter-spacing:-.034em}
p{margin:0}
a{color:var(--blue-ink)}

.lede{font-size:1.12rem; color:var(--ink2); line-height:1.62}
.num{font-variant-numeric:tabular-nums lining-nums}
.mono{font-size:.84rem; font-variant-numeric:tabular-nums; color:var(--ink2)}
.code{font-family:var(--mono); font-size:.84em; color:var(--ink)}

/* ---------- header (foretec.be) ---------- */
header.top{border-bottom:1px solid var(--rule); background:var(--ground); position:sticky; top:0; z-index:20}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:78px}
.mark{
  text-decoration:none;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:900; font-style:italic; font-size:2.05rem; letter-spacing:-.032em;
  line-height:1; color:var(--ink);
}
@media(max-width:520px){ .mark{font-size:1.6rem} }
/* logo lockup: the Foretec wordmark, a hairline, then the product name in the serif */
.brand{display:flex; align-items:baseline; gap:14px; min-width:0}
.brand-rule{align-self:center; width:1.5px; height:1.7rem; background:var(--ink); opacity:.28; flex:none}
.product{font-family:var(--brand); font-size:1.5rem; font-weight:600; letter-spacing:-.03em; word-spacing:-.06em;
  line-height:1; color:var(--ink); text-decoration:none; white-space:nowrap}
.product b{font-weight:800; color:var(--blue-ink); text-decoration:underline; text-decoration-thickness:.14em; text-underline-offset:.16em; text-decoration-color:var(--blue)}
/* broadcast "on air" bug next to the product name */
.onair{align-self:center; display:inline-flex; align-items:center; gap:6px; padding:4px 8px 4px 7px; border-radius:2px; background:var(--onair); color:#fff;
  font-family:var(--display); font-stretch:125%; font-weight:800; font-size:.66rem; letter-spacing:.06em; line-height:1; white-space:nowrap; flex:none}
.onair i{width:7px; height:7px; border-radius:50%; background:#fff; animation:onair 1.4s ease-in-out infinite}
@keyframes onair{0%,100%{opacity:1} 50%{opacity:.2}}
.top-nav{display:flex; gap:24px; align-items:center}
.top-nav a{font-size:.86rem; color:var(--ink2); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px}
.top-nav a:hover{color:var(--ink); border-bottom-color:var(--rule)}
.top-nav a.cta{color:var(--ink); font-weight:500; border-bottom-color:var(--blue)}
@media(max-width:640px){ .top-nav a.hide-sm{display:none} }

/* ---------- hero ---------- */
.hero{padding-top:78px; padding-bottom:56px}
.hero .eyebrow{margin-bottom:16px; color:var(--blue-ink)}
.hero .lede{margin-top:24px; max-width:62ch}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px}
@media(max-width:760px){ .facts{grid-template-columns:1fr; gap:22px} }
.fact hr{border:0; border-top:2px solid var(--rule); margin:0 0 14px}
.fact .n{font-family:var(--serif); font-size:1.9rem; font-weight:600; color:var(--blue-ink)}
.fact p{margin-top:8px; font-size:.94rem; color:var(--ink2); line-height:1.55}
.updated{margin-top:34px}
.key{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:12px; font-size:.9rem; color:var(--ink2)}
.key b{color:var(--ink); font-weight:600}
.key .k-bt,.key .k-live{display:inline-block; width:22px; height:3px; border-radius:2px}
.key .k-bt{background:var(--bt); border-top:1px dashed var(--bt)}
.key .k-live{background:linear-gradient(90deg,var(--s1),var(--s2),var(--s3)); margin-left:12px}

/* ---------- filters ---------- */
.filterbar{position:sticky; top:78px; z-index:15; background:var(--ground); border-bottom:1px solid var(--rule)}
@media(max-width:820px){ .filterbar{position:static} html{scroll-padding-top:90px} }
.filters{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 22px; padding-top:12px; padding-bottom:12px}
.field{display:grid; gap:6px}
label,.lbl{font-size:.8rem; font-weight:600; color:var(--ink2)}
select{
  font:inherit; font-size:.9rem; color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:2px;
  padding:7px 32px 7px 10px; appearance:none; cursor:pointer; min-width:120px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234E6578' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
select:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
.seg{display:inline-flex; border:1px solid var(--rule); border-radius:2px; background:var(--surface)}
.seg button{
  font:inherit; font-size:.88rem; font-weight:500; color:var(--ink2); background:none; border:0; border-left:1px solid var(--rule);
  border-radius:0; padding:6px 13px; cursor:pointer; white-space:nowrap;
}
.seg button:first-child{border-left:0}
.seg button:hover{color:var(--ink); background:var(--raise)}
.seg button[aria-checked="true"]{background:var(--ink); color:var(--ground)}
.seg button:disabled{opacity:.4; cursor:not-allowed; background:none}
.seg button:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ---------- sections (foretec.be) ---------- */
section{padding:78px 0; border-top:1px solid var(--rule)}
#standings{border-top:0; padding-top:40px}
.sec-head{margin-bottom:18px}
.sec-head .lede{margin-top:12px; max-width:66ch; font-size:1rem}
.sec-head.row{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap}
.sub-h{margin-top:52px; margin-bottom:18px}
.sub{margin:8px 0 18px; color:var(--ink2); font-size:.94rem; max-width:70ch}

.panel{background:var(--surface); border:1px solid var(--rule); border-radius:3px; box-shadow:var(--shadow)}
.panel + .panel{margin-top:16px}
.tablewrap{overflow-x:auto}
.chart-panel{padding:18px 18px 12px; overflow:hidden}
.panel-head{margin:-18px -18px 14px; padding:14px 18px; border-bottom:1px solid var(--rule); background:var(--raise)}
.chart-box{position:relative; height:340px}
.chart-box.tall{height:380px}
@media(max-width:640px){ .chart-box,.chart-box.tall{height:290px} }
.legend{display:flex; flex-wrap:wrap; gap:6px 20px; padding:12px 4px 2px; font-size:.84rem; color:var(--ink2)}
.legend button{display:flex; align-items:center; gap:7px; background:none; border:0; padding:2px 0; color:inherit; font:inherit; cursor:pointer; border-radius:0}
.legend button:hover{color:var(--ink); opacity:1}
.legend button[aria-pressed="false"]{opacity:.38; text-decoration:line-through}
.legend i{display:inline-block; width:22px; border-top:2.4px solid currentColor}
.legend .actual i{border-top:3px solid var(--ink)}

/* ---------- podium ---------- */
.podium{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:18px}
@media(max-width:820px){ .podium{grid-template-columns:1fr} }
.pod{background:var(--surface); border:1px solid var(--rule); border-radius:3px; padding:22px 22px 18px; display:flex; flex-direction:column; gap:14px}
.pod.lead{border-top:3px solid var(--ink); padding-top:20px}
/* numeral | model name centred on the numeral | phase tag top right */
.pod-top{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:16px}
.pod-top .tag{align-self:start}
/* the place as a display numeral: Futura Medium */
.pod .place{font-family:var(--futura); font-size:4.8rem; font-weight:500; font-variant-numeric:lining-nums;
  line-height:1; margin:-6px 0 -10px -3px; color:var(--ink)}
.pod:not(.lead) .place{color:var(--ink2)}
@media(max-width:820px){ .pod .place{font-size:4rem} }
.pod .name{font-weight:700; font-size:1.2rem; line-height:1.15; overflow-wrap:anywhere; display:flex; align-items:center; gap:9px}
.pod .name i{width:10px; height:10px; border-radius:50%; display:inline-block; flex:none}
.pod .stats{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule); padding-top:12px}
.pod .stat span{display:block; font-size:.8rem; color:var(--ink2)}
.pod .stat b{display:block; font-family:var(--serif); font-size:1.7rem; font-weight:600; font-variant-numeric:lining-nums; color:var(--ink); margin-top:2px; line-height:1.2}
.is-bt .pod{background:var(--bt-soft); box-shadow:none}
.is-bt .pod.lead{border-top-color:var(--bt)}
.is-bt .pod .name,.is-bt .pod .stat b,.is-bt .pod .place{color:var(--bt-ink)}
.tag{font-size:.76rem; font-weight:600; padding:1px 7px; border-radius:2px; white-space:nowrap}
.tag.bt{background:var(--bt-soft); color:var(--bt-ink); border:1px solid var(--rule)}
.tag.live{background:var(--blue-soft); color:var(--blue-ink)}
.tag.pending{color:var(--ink2); border:1px dashed var(--rule)}

/* ---------- tables (foretec.be) ---------- */
table{width:100%; border-collapse:collapse; font-size:.92rem; font-variant-numeric:tabular-nums lining-nums}
th{text-align:left; font-size:.82rem; color:var(--ink2); font-weight:600; border-bottom:1px solid var(--ink2); padding:14px 16px 8px; white-space:nowrap; background:var(--surface); vertical-align:bottom}
td{border-bottom:1px solid var(--rule); padding:11px 16px; vertical-align:middle; line-height:1.5; white-space:nowrap}
td:first-child{font-weight:600}
tr:last-child td{border-bottom:0}
th.r,td.r{text-align:right}
td.v{font-size:.92rem}
td.v.best{color:var(--blue-ink); font-weight:700}
td.model i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:9px}
td.desc{color:var(--ink2); white-space:normal; min-width:280px; font-weight:400}
td.kind{font-family:var(--mono); font-size:.8rem; color:var(--ink2); font-weight:400}
tr.is-bt td,tr.is-bt td.v.best{color:var(--bt-ink)}
tr.is-bt td.v.best{font-weight:600}
td.pos{font-weight:400; color:var(--ink2); width:36px}
.bar{display:flex; align-items:center; gap:12px; min-width:190px}
.bar span{height:6px; border-radius:1px}
.bar b{font-weight:600; font-size:.9rem}
td.empty{padding:28px; text-align:center; color:var(--ink2); font-weight:400; white-space:normal}

.heat th,.heat td{text-align:center; padding:8px 6px}
.heat th:first-child,.heat td:first-child{text-align:left; padding-left:16px; position:sticky; left:0; z-index:1}
.heat td:first-child{background:var(--surface)}
.heat td.cell{font-size:.82rem; min-width:40px; border:2px solid var(--surface)}
.heat th.is-bt{color:var(--bt-ink)}
.heat th.live{color:var(--blue-ink); font-weight:500}
.heat td.avg{font-weight:600}

/* ---------- explorer ---------- */
.x-meta{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; padding:0 4px 12px}
.x-meta b{color:var(--ink); font-weight:500}
#x-card.is-bt{background:var(--bt-soft)}
#x-card.is-bt .panel-head{background:transparent}
.x-table{margin:14px -18px -12px; border-top:1px solid var(--rule)}

/* ---------- method (foretec.be steps) ---------- */
ol.steps{list-style:none; padding:0; margin:0}
ol.steps li{display:grid; grid-template-columns:58px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--rule)}
ol.steps li:first-child{border-top:1px solid var(--rule)}
@media(max-width:600px){ ol.steps li{grid-template-columns:40px 1fr; gap:14px} }
ol.steps .st{font-family:var(--serif); font-size:1.15rem; font-variant-numeric:oldstyle-nums; color:var(--ink2); padding-top:0}
ol.steps p{margin-top:6px; color:var(--ink2); font-size:.95rem; max-width:72ch}

/* ---------- footer (foretec.be) ---------- */
footer{border-top:1px solid var(--rule); padding:36px 0 60px; color:var(--ink2); font-size:.85rem}
.foot{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
.foot-mark{font-family:Inter,system-ui,sans-serif; font-weight:900; font-style:italic; letter-spacing:-.032em; font-size:1.2rem; color:var(--ink)}
.foot-mark span{font-family:var(--brand); font-style:normal; font-weight:600; letter-spacing:-.03em; word-spacing:-.06em; margin-left:6px; padding-left:10px; border-left:1.5px solid var(--rule)}
.foot-mark span b{font-weight:800; color:var(--blue-ink); text-decoration:underline; text-decoration-thickness:.14em; text-underline-offset:.16em; text-decoration-color:var(--blue)}

/* explanations on hover / focus / tap */
.tip{display:none; position:fixed; z-index:60; max-width:min(320px, calc(100vw - 16px)); padding:10px 12px 11px; background:var(--ink); color:var(--ground);
  border-radius:2px; box-shadow:0 8px 24px rgba(11,31,58,.22); font-size:.8rem; line-height:1.5; white-space:normal; pointer-events:none}
.tip.on{display:block}
.tip b{display:block; margin-bottom:3px; font-size:.86rem; font-weight:700}
[data-tip]{cursor:help}
.lbl[data-tip],[data-tip] > .lbl,.stat span[data-tip]{text-decoration:underline dotted; text-decoration-color:var(--ink2); text-underline-offset:3px}
/* sortable headers */
th button.sort{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; color:inherit}
th button.sort:hover{color:var(--ink)}
th button.sort:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
th button.sort i{font-style:normal; font-size:.62rem; opacity:.3}
th[aria-sort="ascending"] button.sort,th[aria-sort="descending"] button.sort{color:var(--ink)}
th[aria-sort="ascending"] button.sort i,th[aria-sort="descending"] button.sort i{opacity:1}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} html{scroll-behavior:auto} }

/* compact status in the filter bar (replaces the hero) */
.status{margin-left:auto; display:grid; gap:4px; justify-items:end; font-size:.8rem; padding-bottom:4px}
.status .key{display:flex; align-items:center; gap:8px; margin:0; font-size:inherit; color:var(--ink2)}
.status .key i{display:inline-block; width:18px; height:0; border-top:2px solid}
.status .key .k-bt{border-top:2px dashed var(--bt); background:none}
.status .key .k-live{border-image:linear-gradient(90deg,var(--s1),var(--s2),var(--s3)) 1; margin-left:6px; background:none}
@media(max-width:820px){ .status{margin-left:0; justify-items:start} }

/* top-N slider */
.range{display:flex; align-items:center; gap:12px; height:34px}
.range input[type=range]{width:150px; margin:0; accent-color:var(--ink)}
.range input[type=range]:focus-visible{outline:2px solid var(--blue); outline-offset:4px}
.range span{font-size:.86rem; min-width:7.5em; color:var(--ink)}

/* inputs */
.map-panel{padding:0; overflow:hidden}
#map{height:460px; background:var(--raise)}
#map .leaflet-tile-pane{filter:saturate(.35) contrast(.92)}
.map-panel .legend{padding:10px 16px}
.legend .dot{width:10px; height:10px; border-radius:50%; border:0; display:inline-block}
.zone-tag{font-size:.9rem; color:var(--ink); padding-top:6px}
.cov-note{margin:6px 4px 0; font-size:.86rem}
td.wrap{white-space:normal; min-width:240px; font-weight:400; color:var(--ink2)}
.chip{display:inline-block; font-size:.76rem; font-weight:600;
  padding:2px 6px; margin:1px 3px 1px 0; border:1px solid var(--rule); border-radius:2px; color:var(--ink2); background:var(--raise)}
.chip.on{color:var(--blue-ink); background:var(--blue-soft); border-color:transparent}
.leaflet-container{font-family:var(--sans)}
.leaflet-tooltip{font-family:var(--sans); font-size:.8rem}

/* pipeline timeline */
.timeline-panel{padding:14px 10px 8px}
.timeline-scroll{overflow-x:auto}
#timeline{display:block; width:100%; min-width:780px; height:auto}
#timeline text{font-family:var(--sans); font-size:12px; font-variant-numeric:tabular-nums; fill:var(--ink2)}
#timeline text.lane{font-size:13.5px; font-weight:700; fill:var(--ink)}
#timeline text.day{font-size:12px; font-weight:600; fill:var(--ink)}
#timeline .band{fill:var(--raise)}
#timeline .band.delivery{fill:var(--blue-soft)}
#timeline .grid{stroke:var(--rule); stroke-width:1}
#timeline .break{stroke:var(--ink2); stroke-width:1; stroke-dasharray:2 3}
#timeline .hist{fill:var(--blue); opacity:.32}
#timeline .act{fill:var(--green); opacity:.55}
#timeline .recheck{fill:var(--green); opacity:.22}
#timeline .cut{stroke:var(--blue-ink); stroke-width:1.6; stroke-dasharray:5 3}
#timeline .gate{stroke:var(--amber); stroke-width:2}
#timeline .mk{fill:var(--surface); stroke:var(--ink); stroke-width:1.6}
#timeline .mk.score{fill:var(--ink)}
#timeline .mk.pub{fill:var(--green); stroke:var(--green)}
#timeline .mk.in{fill:var(--surface); stroke:var(--blue-ink)}
.legend .sw{display:inline-block; width:22px; height:9px; border-radius:1px}

/* run tracker */
.tracker-head{margin:52px 0 0}
.tracker-head .sub-h{margin-top:0}
.tracker th,.tracker td{text-align:center; padding:6px 4px}
.tracker th:first-child,.tracker td:first-child{text-align:left; padding-left:16px; position:sticky; left:0; background:var(--surface); z-index:1}
.tracker th:first-child{background:var(--surface)}
.tracker th small{display:block; font-size:.7rem; font-weight:400; margin-top:2px}
.tracker th small.late{color:#d03b3b} .tracker th small.ok{color:var(--green)}
.trk{font:600 .86rem var(--sans); width:30px; height:26px; border-radius:2px; border:1px solid transparent; cursor:pointer; padding:0; line-height:1}
.trk.ok{background:rgba(12,163,12,.14); color:#0a7a0a; border-color:rgba(12,163,12,.35)}
.trk.part{background:var(--blue-soft); color:var(--blue-ink)}
.trk.wait{background:var(--raise); color:var(--ink2); border-color:var(--rule)}
.trk.miss{background:rgba(250,178,25,.18); color:#8a5a00; border-color:rgba(250,178,25,.5)}
.trk.late{background:rgba(236,131,90,.18); color:#a4461f; border-color:rgba(236,131,90,.5)}
.trk.err{background:rgba(208,59,59,.14); color:#b02a2a; border-color:rgba(208,59,59,.45)}
.trk[aria-pressed="true"]{outline:2px solid var(--ink); outline-offset:1px}
/* several series in one cell: a small square per series (zones in rows, targets in columns) */
.trk.grid{display:inline-grid; grid-template-columns:repeat(var(--c),9px); gap:2px; width:auto; height:auto; padding:3px; background:var(--surface); border-color:var(--rule); vertical-align:middle}
.trk.grid i{display:block; width:9px; height:9px; border-radius:1px}
.trk.grid i.ok{background:#2e9e4f} .trk.grid i.wait{background:var(--rule)} .trk.grid i.miss{background:#e0a100}
.trk.grid i.err{background:#d03b3b} .trk.grid i.late{background:#e0703a} .trk.grid i.na{background:none; box-shadow:inset 0 0 0 1px var(--rule)}
.trk-na{color:var(--ink2)}
.trk.mini{display:inline-grid; place-items:center; width:20px; height:18px; font-size:.72rem; cursor:default; vertical-align:-3px}
table.trk-series{margin-top:10px; font-size:.86rem} table.trk-series td{white-space:normal; vertical-align:top; padding:8px 12px; font-weight:400}
table.trk-series td.model{font-weight:600} table.trk-series td.na{color:var(--ink2)} table.trk-series small{color:var(--ink2)} table.trk-series small.why{font-family:var(--mono); font-size:.72rem}
/* a model with a caveat: star after the name, explained on hover/tap */
sup.caveat{color:var(--onair); font-weight:700; margin-left:1px; cursor:help}
.st-notes{margin-top:10px; font-size:.82rem; color:var(--ink2)} .st-notes span{font-weight:600; color:var(--ink)}
.trk-detail{margin-top:12px; padding:14px 18px; font-size:.9rem}
.trk-detail h4{margin:0 0 6px; font-size:1rem}
.trk-detail ul{margin:6px 0 0; padding-left:18px; color:var(--ink2); font-family:var(--mono); font-size:.78rem}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .trk.ok{color:#7fe07f} :root:not([data-theme="light"]) .trk.miss{color:#ffd27a} :root:not([data-theme="light"]) .trk.late{color:#ffb090} :root:not([data-theme="light"]) .trk.err{color:#ff9a9a} }

/* multi-page: active page in the nav, first section without a rule */
.top-nav a.on{color:var(--ink); font-weight:500; border-bottom-color:var(--ink)}
section.first{border-top:0; padding-top:48px}
@media(max-width:600px){
  /* phones: logo on the first row, the page links on a second row */
  .top-in{height:auto; flex-wrap:wrap; row-gap:8px; padding-top:12px; padding-bottom:10px}
  .mark{font-size:1.45rem}
  .brand{gap:11px}
  .brand-rule{height:1.35rem}
  .product{font-size:1.25rem}
  .onair{font-size:.6rem; padding:3px 6px; gap:5px}
  .top-nav{width:100%; gap:20px}
  .top-nav a{font-size:.86rem}
}

/* reference entries: listed below the ranking, never ranked */
tr.ref td{color:var(--ink2); background:var(--raise)}
tr.ref td.pos{font-style:italic}