/* Flathead Fishing: blue and green neo-brutalism on white (docs/04). One family, hard edges. */
:root {
  --ink: #000000; --paper: #FFFFFF; --lake: #2B4CFF; --run: #39C77A; --grey: #E9E9E9;
  /* --run as a line on white is 2.2:1; lines and hatching that carry meaning use this (4.4:1). */
  --run-line: #1F8A4C;
  --font: "Archivo", system-ui, sans-serif;
  --body: 18px; --lh-body: 1.5; --lh-display: 0.95; --track-display: -0.02em;
  --rule: 3px; --shadow: 6px 6px 0 var(--ink); --shadow-sm: 4px 4px 0 var(--ink);
  --gutter: 24px; --max: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--body)/var(--lh-body) var(--font); }
a { color: var(--ink); }
:focus-visible { outline: 3px solid var(--lake); outline-offset: 3px; }
.num { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.s12 { grid-column: span 12; } .s7 { grid-column: span 7; } .s5 { grid-column: span 5; }
.s4 { grid-column: span 4; } .s8 { grid-column: span 8; } .s6 { grid-column: span 6; }
.prose { max-width: 70ch; }

/* Nav and footer */
.nav { border-bottom: var(--rule) solid var(--ink); }
.nav .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; padding-top: 16px; padding-bottom: 16px; }
.wordmark { font-weight: 900; font-size: 24px; text-decoration: none; letter-spacing: -0.01em; }
.tag { border: 2px solid var(--ink); font-size: 14px; font-weight: 600; padding: 0 6px; }
.links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 600; }
.links a { text-decoration: none; } .links a:hover { text-decoration: underline; }
.foot { border-top: var(--rule) solid var(--ink); margin-top: 64px; padding: 24px 0 48px; font-size: 14px; font-weight: 500; }
.foot .links { margin: 0 0 12px; }

/* Type */
.display { font-size: clamp(40px, 14vw, 64px); font-weight: 900; line-height: var(--lh-display);
  letter-spacing: var(--track-display); margin: 48px 0 16px; }
.keyword { font-size: 42px; font-weight: 800; line-height: 1.05; margin: 40px 0 24px; }
h2, .h2 { font-size: 42px; font-weight: 800; line-height: 1.05; margin: 0 0 16px; letter-spacing: var(--track-display); }
h3 { font-size: 24px; font-weight: 800; margin: 0 0 8px; }
.small, .quiet { font-size: 14px; font-weight: 500; }
.updated { font-size: 14px; font-weight: 500; margin: 0 0 24px; }
.section { border-top: var(--rule) solid var(--ink); padding: 48px 0; }
.section:first-of-type { border-top: 0; }

/* The board */
.board { width: 100%; border-collapse: collapse; border: var(--rule) solid var(--ink);
  box-shadow: var(--shadow); font-size: 24px; font-weight: 500; margin: 8px 0 16px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.board th { text-align: left; font-size: 14px; font-weight: 600; padding: 10px 16px;
  border-bottom: var(--rule) solid var(--ink); }
.board td { height: 88px; padding: 0 16px; border-top: var(--rule) solid var(--ink); vertical-align: middle; }
.board td + td, .board th + th { border-left: var(--rule) solid var(--ink); }
.board .water { font-weight: 700; }
.board .water a { text-decoration: none; }
.board tr:hover .water a { text-decoration: underline; }
.board .sub { display: none; font-size: 16px; font-weight: 500; }
.board .verdict { font-weight: 900; white-space: nowrap; }
.v-on { background: var(--run); }
.v-off, .v-nodata { background: var(--grey); }
.board td.v-nodata { border-style: dashed; }
.board .first, .board .second { white-space: nowrap; }
.stale { font-size: 14px; font-weight: 600; }
.chatter { color: var(--muted, #666); }  /* decision 46: unverified community counts */
.teaser { border-left: 3px solid #8884; padding: 4px 12px; margin: 12px 0; }  /* decision 47: shop teasers */
.teaser-head { font-weight: 600; margin: 0; }

/* Buttons and forms */
.btn { display: inline-block; border: var(--rule) solid var(--ink); box-shadow: var(--shadow-sm);
  padding: 14px 20px; font: 700 18px/1.2 var(--font); text-decoration: none; cursor: pointer;
  background: var(--paper); color: var(--ink); transition: transform 120ms, box-shadow 120ms; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 20px; margin: 24px 0 8px; }
.field { font: 500 18px/1.2 var(--font); border: var(--rule) solid var(--ink); padding: 13px 14px;
  background: var(--paper); color: var(--ink); width: 100%; border-radius: 0; }
.signup { display: flex; gap: 12px; margin: 12px 0 8px; }
.signup .field { flex: 1; }
.notice { border: var(--rule) solid var(--ink); padding: 12px 16px; font-weight: 600; margin: 16px 0; }
.notice.ok { background: var(--run); }
.error { font-weight: 700; }
.hp { position: absolute; left: -10000px; }

/* Water page hero */
.verdict-label { font-size: clamp(40px, 14vw, 64px); font-weight: 900; line-height: var(--lh-display); letter-spacing: var(--track-display); margin: 0; }
.stamp { display: inline-block; font-size: clamp(40px, 14vw, 64px); font-weight: 900; line-height: 1; letter-spacing: var(--track-display);
  border: var(--rule) solid var(--ink); padding: 6px 14px; margin: 8px 0 24px; }
.facts { list-style: none; padding: 0; margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.facts li { margin: 4px 0; }
.gauge { width: 100%; max-width: 320px; height: auto; display: block; }
.nogauge { background: var(--grey); border: var(--rule) dashed var(--ink); min-height: 320px; padding: 24px; font-size: 24px; font-weight: 700; display: flex; align-items: center; }
details { border: var(--rule) solid var(--ink); padding: 12px 16px; margin: 24px 0; }
summary { font-weight: 700; cursor: pointer; }
.list { padding-left: 20px; }
.spark { width: 100%; height: auto; display: block; }
.spark path { fill: none; stroke: var(--ink); stroke-width: 2; }
/* The staff gauge: a blue ruler with white ticks, black rules for the median and the band. */
.gauge .ruler { fill: var(--lake); stroke: var(--ink); stroke-width: 3; }
.gauge .tick { stroke: var(--paper); stroke-width: 3; }
.gauge .tick-label { fill: var(--paper); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gauge .mark { stroke: var(--ink); stroke-width: 3; }
.gauge .mark-label { fill: var(--ink); font-size: 16px; font-weight: 600; }
.gauge .now { fill: var(--ink); }
.gauge .now-value { fill: var(--ink); font-size: 32px; font-weight: 900; font-variant-numeric: tabular-nums; }

/* Month grid (docs/05): typical run = green outline, this year's run = green fill, the legal
   season = a black rule on its own row, run months outside it = hatched. Each band is one bar:
   only its first and last months close it off. */
.months { width: 100%; border-collapse: collapse; border: var(--rule) solid var(--ink); font-size: 16px; table-layout: fixed; margin-bottom: 24px; }
.months col.label { width: 30%; }
.months th, .months td { border: 1px solid var(--ink); padding: 8px 4px; text-align: center; }
.months th[scope="row"] { text-align: left; font-weight: 700; padding-left: 10px; }
.months .note { font-weight: 700; }
.months abbr { text-decoration: none; }
.months td.typ { border-top: var(--rule) solid var(--run-line); border-bottom: var(--rule) solid var(--run-line); }
.months td.typ.start { border-left: var(--rule) solid var(--run-line); }
.months td.typ.end { border-right: var(--rule) solid var(--run-line); }
.months td.model { background: var(--run); }
.months td.closed { background: repeating-linear-gradient(135deg, var(--run-line) 0 3px, var(--paper) 3px 8px); }
.months td.typ:not(.end), .months td.event:not(.end), .months td.legal:not(.end) { border-right-style: hidden; }
.months td.event { border-top: var(--rule) solid var(--ink); border-bottom: var(--rule) solid var(--ink); }
.months td.event.start { border-left: var(--rule) solid var(--ink); }
.months td.event.end { border-right: var(--rule) solid var(--ink); }
.months tr.legal th { font-size: 13px; padding-top: 4px; padding-bottom: 4px; }
.months tr.legal td { padding: 0; }
.months td.legal { background: linear-gradient(var(--ink), var(--ink)) top / 100% 4px no-repeat border-box; }
.bands { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.bands .item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bands .key { display: inline-block; width: 28px; height: 14px; flex: none; }
.bands .key.typ { border: var(--rule) solid var(--run-line); }
.bands .key.model { background: var(--run); }
.bands .key.legal { background: linear-gradient(var(--ink), var(--ink)) center / 100% 4px no-repeat; }
.bands .key.closed { background: repeating-linear-gradient(135deg, var(--run-line) 0 3px, var(--paper) 3px 8px); border: 1px solid var(--ink); }
.regs { padding-left: 20px; margin: 8px 0 16px; }
.regs li { margin: 6px 0; }
.stamp-sm { font-size: 28px; padding: 2px 8px; margin: 0 0 0 6px; }

/* Ranked lists (docs/06): stacked blocks with 3px rules, the verdict stamp filled, no cards. */
.lead { font-size: 22px; font-weight: 600; max-width: 70ch; margin: 0 0 12px; }
.ranked { list-style: none; padding: 0; margin: 32px 0 0; }
.ranked > li { border-top: var(--rule) solid var(--ink); padding: 24px 0 8px; }
.ranked p { max-width: 70ch; margin: 8px 0; }
.ranked .today .stamp-sm { margin: 0 8px 0 0; font-size: 20px; }

/* The quiz (docs/07): one question a screen, chips with 3px rules and the hard shadow. */
.progress { display: flex; gap: 4px; margin: 24px 0 8px; }
.back { font-weight: 600; text-decoration: underline; }
.quiz-form .btn-primary { margin-top: 8px; }
.progress .seg { flex: 1; height: 3px; background: var(--grey); }
.progress .seg.on { background: var(--ink); }
.ask { border: 0; padding: 0; margin: 24px 0; }
.ask legend { padding: 0; }
.question { font-size: 42px; font-weight: 800; line-height: 1.05; letter-spacing: var(--track-display); margin: 0 0 16px; }
.question.sub { display: block; font-size: 24px; margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips label { border: var(--rule) solid var(--ink); box-shadow: var(--shadow-sm); padding: 12px 16px; font-weight: 700; cursor: pointer; background: var(--paper); }
.chips input { position: absolute; opacity: 0; }
.chips label:has(input:checked) { background: var(--ink); color: var(--paper); }
.chips label:has(input:focus-visible) { outline: 3px solid var(--lake); outline-offset: 3px; }
.why { font-size: 24px; font-weight: 600; line-height: 1.3; max-width: 40ch; }
.plan { border: var(--rule) solid var(--ink); box-shadow: var(--shadow); padding: 16px 20px; margin: 16px 0 24px; }
.plan p { max-width: 70ch; }
.plan .h2 { font-size: 32px; }
.alt { border-top: var(--rule) solid var(--ink); padding: 12px 0; }

/* Tester pages */
.qr { max-width: 340px; border: var(--rule) solid var(--ink); margin: 16px 0; }
.qr svg { display: block; width: 100%; height: auto; }
.status { font-weight: 700; }
.reasons, .scores { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.card img { max-width: 160px; height: auto; margin-top: 8px; display: block; }
.card { border: var(--rule) solid var(--ink); box-shadow: var(--shadow-sm); padding: 16px; margin: 16px 0; }
.results { display: flex; gap: 12px; }
.results label { flex: 1; text-align: center; border: var(--rule) solid var(--ink); padding: 14px 0; font-weight: 700; cursor: pointer; }
.results input { position: absolute; opacity: 0; }
.results label:has(input:checked) { background: var(--run); }
fieldset { border: 0; padding: 0; margin: 0 0 20px; }
legend { font-weight: 700; margin-bottom: 6px; }
select, textarea, input[type=file] { font: inherit; width: 100%; padding: 10px; border: var(--rule) solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); }

@media (min-width: 900px) {
  .display { font-size: 96px; }
  .verdict-label, .stamp { font-size: 96px; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .display { margin-top: 32px; }
  .nav .links { margin-left: 0; }
  .grid > * { grid-column: 1 / -1; }
  .board { font-size: 18px; }
  .board th { padding: 8px; }
  .board td { height: 64px; padding: 0 8px; }
  .months { font-size: 14px; }
  .months col.label { width: 40%; }
  .months th, .months td { padding: 6px 2px; }
  .months th[scope="row"] { padding-left: 6px; }
  .board .species, .board .second { display: none; }
  .board .sub { display: block; }
  .signup { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }