/* Salmon Counts — Harbor theme (Mock G, picked 2026-11-02), phone-first, tight spacing */
:root{
  color-scheme: dark;
  --bg:#12283D; --panel:#1C3A54; --panel2:#25496A;
  --ink:#F4F1EA; --muted:#C9D6E1; --faint:#A3BACB;
  --line:#33536F; --rowline:#3D5F7D; --accent:#FF9E57;
  --accent2:#E86A17; --ok:#4CC38A; --warn:#FF9E57;
  --bad:#F58A68; --badfill:#D9481F; --steel:#7FA6C0;
  --cond:"Arial Narrow","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.45}
a{color:var(--accent)}
main{max-width:1000px;margin:0 auto;padding:10px 12px 22px}
.top{max-width:1000px;margin:0 auto;padding:10px 12px 2px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.brand{font-family:var(--cond);font-size:21px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.top nav a{margin-left:14px;font-size:14px;text-decoration:none}
h1{font-family:var(--cond);font-size:26px;margin:8px 0 4px;line-height:1.15;letter-spacing:-.01em}
h2{font-size:16px;margin:2px 0 8px}
.tag{color:var(--accent);font-size:16px;margin:0 0 6px;font-weight:600}
.sub{color:var(--muted);font-size:13px;margin:2px 0 8px}
.intro p{margin:4px 0}
.badge{background:var(--panel2);border:1px solid var(--line);
  padding:1px 8px;border-radius:20px;font-size:12.5px;white-space:nowrap}
.card{background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;margin:10px 0}
.mapcard{padding:6px}
.mapwrap{position:relative}
#akmap{width:100%;height:auto;display:block;touch-action:none}
#akmap .land path{fill:#1D3A56;stroke:#33536F;stroke-width:.7}
#akmap .pin .dot{stroke:#12283D;stroke-width:2;cursor:pointer}
#akmap .pin.ok .dot{fill:var(--ok)} #akmap .pin.warn .dot{fill:var(--warn)}
#akmap .pin.bad .dot{fill:var(--badfill)}
#akmap .pin .hit{fill:transparent}
#akmap .pinlab{fill:var(--ink);font-size:30px;paint-order:stroke;
  stroke:#12283D;stroke-width:5;pointer-events:none}
.mapbtns{position:absolute;top:6px;right:6px;display:flex;gap:4px}
.mapbtns button{background:var(--panel2);color:var(--ink);
  border:1px solid var(--line);border-radius:6px;min-width:38px;height:38px;
  font-size:17px;cursor:pointer}
.mapnote{color:var(--faint);font-size:12px;margin:4px 4px 2px}
ul.rank{list-style:none;margin:0;padding:0}
ul.rank li{border-top:1px solid var(--line)}
ul.rank li:first-child{border-top:none}
ul.rank a{display:flex;align-items:center;gap:8px;padding:8px 2px;
  text-decoration:none;color:var(--ink);flex-wrap:wrap}
.dot{width:11px;height:11px;border-radius:50%;flex:none}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)}
.dot.bad{background:var(--badfill)}
.rname{flex:1 1 160px;font-weight:600}
.rfinal{font-weight:700}
.rvs{color:var(--muted);font-size:13px}
.crumb{margin:4px 0}
.verdict .vlabel{color:var(--accent);font-size:13px;margin:0;
  text-transform:uppercase;letter-spacing:.6px}
.verdict .vfinal{font-size:34px;font-weight:800;margin:2px 0 0;line-height:1.1}
.verdict .vsub{color:var(--muted);margin:0 0 8px}
.chip{display:inline-block;padding:2px 9px;border-radius:20px;
  font-size:13px;border:1px solid var(--line);background:var(--panel2)}
.chip.ok{border-color:var(--accent2);color:var(--ok)}
.chip.bad{border-color:var(--bad);color:var(--bad)}
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:.6}
.chart .ylab,.chart .xlab{fill:var(--faint);font-size:11.5px}
.chart .ylab{text-anchor:end}
.chart .band{fill:var(--accent);opacity:.16}
.chart .medline{fill:none;stroke:var(--faint);stroke-width:1.6;
  stroke-dasharray:5 4}
.chart .curline{fill:none;stroke:var(--accent);stroke-width:2.4}
.chart .bar{fill:var(--steel)}
.chart .peaklab{fill:var(--muted);font-size:12px}
.chart .track{fill:var(--panel2)}
.chart .goalband{fill:var(--ok);opacity:.55}
.chart .medtick{stroke:var(--faint);stroke-width:2}
.chart .finmark{fill:var(--ink)}
.chart .finlab{fill:var(--ink);font-size:12.5px;font-weight:700}
.legend{color:var(--muted);font-size:12.5px;margin:4px 0 0}
.legend .sw{display:inline-block;width:14px;height:8px;margin:0 4px 0 8px;
  border-radius:2px}
.legend .sw.cur{background:var(--accent)}
.legend .sw.med{background:var(--faint)}
.legend .sw.bnd{background:var(--accent);opacity:.3}
table.tab{width:100%;border-collapse:collapse;font-size:14px}
table.tab th,table.tab td{text-align:right;padding:4px 6px;
  border-top:1px solid var(--line)}
table.tab th:first-child,table.tab td:first-child{text-align:left}
table.tab tr.hl td{font-weight:700;background:var(--panel2)}
table.tab td.ok{color:var(--ok)} table.tab td.bad{color:var(--bad)}
details summary{cursor:pointer;color:var(--accent);padding:6px 0}
#akmap .pin.nog .dot{fill:var(--faint)}
.dot.nog{background:var(--faint)}
.maplegend{color:var(--muted);font-size:12.5px;margin:2px 4px 4px}
.maplegend .dot{display:inline-block;vertical-align:-1px;margin:0 3px 0 10px}
.maplegend .dot:first-child{margin-left:0}
.chart .bar.neg{fill:var(--badfill);opacity:.75}
.rnote{color:var(--muted);font-size:12.5px;font-weight:400}
.notice{border:1px solid var(--warn);color:var(--warn);
  border-radius:6px;padding:6px 9px;font-size:13.5px}
/* two-tier map: region pins at statewide zoom, river pins zoomed in */
#akmap[data-tier="region"] .tier-river{display:none}
#akmap[data-tier="river"] .tier-region{display:none}
#akmap .leader{stroke:var(--accent2);stroke-opacity:.55;pointer-events:none}
#akmap .pinlab.regionlab{font-weight:700}
.regions .regh{margin:14px 2px 2px;font-size:16px}
.regioncard .rcard{display:flex;align-items:center;gap:8px;
  text-decoration:none;color:var(--ink)}
.regioncard .rsum{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.rhead{flex:1 1 120px;color:var(--muted);font-size:13.5px}
.rvs.v-ok{color:var(--ok)} .rvs.v-warn{color:var(--warn)}
.rvs.v-bad{color:var(--bad)} .rvs.v-neut{color:var(--muted)}
.foot{max-width:1000px;margin:0 auto;padding:12px;color:var(--faint);
  font-size:12.5px;border-top:1px solid var(--line)}
.foot p{margin:3px 0}
/* season summary (off-season interactive chart) */
.sumctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin:2px 0 8px}
.seg{display:inline-flex;border:1px solid var(--line);
  border-radius:20px;overflow:hidden}
.segbtn{background:var(--panel2);color:var(--muted);border:0;
  padding:5px 12px;font-size:13px;cursor:pointer;font-family:inherit}
.segbtn.on{background:var(--accent2);color:#12283D;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.sumchip{display:inline-flex;align-items:center;gap:5px;
  background:transparent;color:var(--muted);border:1px solid var(--line);
  border-radius:20px;padding:4px 9px;font-size:12.5px;cursor:pointer;
  font-family:inherit}
.sumchip .cdot{width:9px;height:9px;border-radius:50%;
  background:var(--c,#7FA6C0);display:inline-block;opacity:.45}
.sumchip.on{color:var(--ink);border-color:var(--c,#7FA6C0)}
.sumchip.on .cdot{opacity:1}
.sumchip[disabled]{opacity:.35;cursor:default}
.sumchart .yrline{fill:none;stroke-width:1.6}
.sumchart .yrline.head{stroke-width:2.6}
.sumchart .typband{fill:var(--accent);opacity:.14}
.sumchart .typline{fill:none;stroke:var(--faint);stroke-width:1.6;
  stroke-dasharray:5 3}
.sumchart .sumgoal{fill:var(--ok);opacity:.16}
.sumchart .goallab{fill:var(--ok);font-size:11.5px}
.sumchart .endlab{font-size:11.5px;font-weight:700}
/* Season Board (homepage; Alaska design trickled down 2026-11-02) */
.tally{border-top:3px solid var(--accent2)}
.tally p{margin:0;font-size:15.5px}
.blegend h2{font-family:var(--cond);font-size:18px;margin:0 0 4px;letter-spacing:-.01em}
.blegend p{margin:0}
.bctl{margin:12px 0 4px}
.bchips{gap:6px}
.bchip{min-height:36px;padding:4px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:13.5px;font-weight:600;line-height:1.2;font-family:inherit;cursor:pointer}
.bchip.on{background:var(--accent2);border-color:var(--accent2);color:#12283D}
.bsort{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
.bsort select{min-height:36px;margin-left:6px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:13.5px;font-weight:600;font-family:inherit}
#bcount{margin:6px 0 0;min-height:16px}
.bgroup{margin-top:16px}
.bgroup h2{font-family:var(--cond);font-size:21px;margin:0 0 6px;color:var(--accent);letter-spacing:-.01em}
.brows{display:flex;flex-direction:column;gap:12px}
.brow{background:var(--panel);border:1px solid var(--rowline);border-radius:10px;padding:12px}
.bhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;color:var(--ink);text-decoration:none}
.bname{font-family:var(--cond);font-weight:700;font-size:19px;line-height:1.2;letter-spacing:-.01em}
.brun{display:block;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:1px;letter-spacing:0}
.bfinal{font-weight:800;font-size:21px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bcap{display:block;font-weight:400;font-size:11.5px;color:var(--muted);white-space:normal}
.bmid{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:5px;flex-wrap:wrap}
.bvs{font-size:13.5px;font-weight:600}
.bvs.up{color:var(--ok)}
.bvs.down{color:var(--bad)}
.bvs.flat{color:var(--muted)}
.bpill{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.bpill.fcbelow,.bpill.behind{color:var(--bad);border-color:var(--bad)}
.bpill.fcabove,.bpill.ahead{color:var(--ok);border-color:var(--ok)}
.bpill.nofc,.bpill.onpace,.bpill.unknown{color:var(--muted)}
.bgauge{margin-top:8px}
.bgtrack{position:relative;height:10px;background:var(--panel2);border-radius:5px}
.bgband{position:absolute;top:0;height:10px;background:var(--ok);opacity:.45;border-radius:3px}
.bgband.fc{background:var(--ok);opacity:.5}
.bgtick{position:absolute;top:-3px;width:3px;height:16px;background:var(--accent2);border-radius:1px}
.bgdot{position:absolute;top:1px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--ink);border:2px solid var(--bg)}
.bgcap{margin:4px 0 0;font-size:11.5px;color:var(--faint)}
.bnote{font-size:12.5px;color:var(--muted);margin:8px 0 0}
.bexp{margin-top:8px;min-height:34px;background:none;border:1px solid var(--line);border-radius:8px;color:var(--accent);font-size:13.5px;font-weight:600;font-family:inherit;padding:3px 12px;cursor:pointer}
.bchev{display:inline-block;margin-left:4px}
.bchart{margin-top:8px}
.bcttl{font-weight:700;margin:0 0 4px;font-size:14.5px}
.chart .bar.head{fill:var(--accent2)}
.chart .fcline{stroke:var(--badfill);stroke-width:1.6}
/* Explorer (homepage section below the board) */
.xpl{display:flex;flex-direction:column}
.xctl{order:1}
.xrow{display:flex;gap:8px;align-items:flex-start;margin:6px 0}
.xlab{flex:0 0 118px;font-size:12.5px;color:var(--muted);padding-top:9px;font-weight:600}
.xpl .chips{display:flex;flex-wrap:wrap;gap:6px}
.xchip{min-height:36px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:13px;font-weight:600;line-height:1.2;font-family:inherit;cursor:pointer}
.xchip.on{background:var(--accent2);border-color:var(--accent2);color:#12283D}
.xchip .cdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,#7FA6C0);margin-right:6px;opacity:.9}
.xpl .seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;vertical-align:middle}
.xpl .seg button{min-height:36px;padding:4px 12px;background:var(--panel2);color:var(--ink);border:0;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer}
.xpl .seg button.on{background:var(--accent2);color:#12283D}
.xpl .seg.off{opacity:.45}
#xbuild{order:2;display:none;margin-top:10px;align-self:flex-start;min-height:42px;background:none;border:1px solid var(--line);border-radius:8px;color:var(--accent);font-size:14px;font-weight:600;font-family:inherit;padding:6px 14px;cursor:pointer}
.xverdict{order:3;font-size:15.5px;font-weight:600;margin:10px 0 2px;min-height:20px}
.xchartwrap{order:4}
#xtime{order:5;overflow-x:auto}
#xnote{order:6}
#xload{order:7}
#xchart .yrline{fill:none;stroke-width:1.6}
#xchart .yrline.head{stroke-width:2.6}
#xlegend .xsw{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 4px 0 10px}
#xlegend .xsw:first-child{margin-left:0}
.xsl-row{position:relative;height:30px;margin-top:2px}
.xsl-track{position:absolute;left:0;right:0;top:12px;height:6px;background:var(--panel2);border-radius:3px}
.xsl-win{position:absolute;top:12px;height:6px;background:var(--accent2);border-radius:3px;opacity:.75}
.xsl-row input[type=range]{position:absolute;left:0;width:100%;top:3px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;height:24px}
.xsl-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:22px;height:24px;border-radius:6px;background:var(--accent);border:2px solid var(--bg);cursor:ew-resize}
.xsl-row input[type=range]::-moz-range-thumb{pointer-events:auto;width:20px;height:22px;border-radius:6px;background:var(--accent);border:2px solid var(--bg);cursor:ew-resize}
.xsl-pan{height:12px;margin-top:2px;border-radius:6px;background:var(--panel2);cursor:grab;touch-action:none}
.xsl-lab{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin:4px 0 0}
.xreset{min-height:30px;background:none;border:1px solid var(--line);border-radius:8px;color:var(--accent);font-size:12.5px;font-weight:600;font-family:inherit;padding:2px 10px;cursor:pointer}
.xreset[disabled]{opacity:.4;cursor:default}
@media (max-width:480px){
  .xverdict{order:1}
  #xtime{order:2}
  .xchartwrap{order:3}
  #xbuild{order:4;display:block}
  .xctl{order:5;display:none}
  .xpl.open .xctl{display:block}
  .xchip{min-height:42px}
  .xpl .seg button{min-height:42px}
  .xlab{flex-basis:96px;padding-top:11px}
  .xsl-row input[type=range]::-webkit-slider-thumb{width:26px;height:28px}
}
