/* Fishing License Guide: angler.css
   One stylesheet. Phone first (360px), then wider. Every colour is a variable
   with a dark-water version below; component rules use the variables only. */

/* Fonts: own copies (SIL Open Font License, fonts/OFL-barlow.txt), so no visitor
   details go to Google before the cookie box is answered. 11 Nov 2026. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/barlow-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  /* water and shore */
  --shore: #f6f8fa;          /* page */
  --sheet-edge: #dde5eb;     /* either side of the page on wide screens */
  --shallows: #e6eff5;       /* title band */
  --deck: #ffffff;           /* cards */
  --pale: #f6f9fb;           /* table heads, quiet rows */
  --hull: #10263a;           /* main text, navy */
  --driftwood: #3f586b;      /* second text */
  --murk: #5a6f80;           /* quiet text */
  --seam: #d9e3ea;           /* card edges */
  --seam-soft: #e3e9ed;      /* rules inside cards */
  --line-control: #788ea0;   /* form control edges (3:1) */
  --field: #ffffff;
  --current: #175a86;        /* links */
  /* blaze orange */
  --flare: #e8590c;          /* large fills */
  --on-flare: #ffffff;
  --ember: #b84607;          /* orange text and buttons */
  --on-ember: #ffffff;
  --flare-wash: #fdecdf;
  --flare-edge: #f4cdb0;
  /* lake blue, reed green, sand amber */
  --lake-wash: #e3eef7;
  --lake-ink: #1d5f8f;
  --lake-edge: #c8dbea;
  --reed: #2c6b4c;
  --reed-wash: #e1f0e7;
  --reed-edge: #b9d9c6;
  --on-reed: #ffffff;
  --sand: #8a5a00;
  --sand-wash: #fbefd2;
  --sand-edge: #ecd49a;
  --sand-deep: #c98a00;
  --sand-ink: #4d3500;
  --salt-wash: #ddebf5;
  --salt-ink: #175a86;
  /* header and calculator result */
  --dock: #10263a;
  --on-dock: #ffffff;
  --dock-sub: #dbe8f1;
  --reck-bg: #10263a;
  --reck-ink: #e8eff0;
  --reck-sub: #a9c3d3;
  --reck-rule: #33506a;
  --reck-total: #ffb17f;
  --reck-gap: #ffd28a;
  --reck-link: #ffffff;
  --reck-req: #ffb59a;
  --reck-edge: #8fb0c6;      /* buttons on the navy result panel (3:1) */
  /* cost map */
  --lvl0: #eef2f4; --lvl1: #e2eff5; --lvl2: #a8cfe2; --lvl3: #4f8db8; --lvl4: #174f78;
  --lvl-edge: #c3dbe7;
  --lvl-ink-deep: #ffffff;
  /* sharing */
  --fb: #1877f2;
  --on-fb: #ffffff;
  --focus: #e8590c;
  --lift: 0 1px 2px rgba(16, 38, 58, 0.05), 0 6px 18px rgba(16, 38, 58, 0.06);
  /* type and shape */
  --type-head: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, system-ui, sans-serif;
  --type-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bend: 0.875rem;
  --bend-s: 0.5rem;
  --gutter: 1rem;
  --lbl: min(7rem, 34vw);
}

@media (prefers-color-scheme: dark) {
  :root {
    --shore: #0e1c27;
    --sheet-edge: #070f16;
    --shallows: #132838;
    --deck: #172f42;
    --pale: #1b3549;
    --hull: #e6eef4;
    --driftwood: #b4c6d4;
    --murk: #97adbe;
    --seam: #2c475c;
    --seam-soft: #243d51;
    --line-control: #7893a8;
    --field: #0f2333;
    --current: #8cc4ec;
    --flare: #e8590c;
    --on-flare: #ffffff;
    --ember: #f39a62;
    --on-ember: #1c0d04;
    --flare-wash: #3a2416;
    --flare-edge: #6b3e22;
    --lake-wash: #183650;
    --lake-ink: #a3d2f3;
    --lake-edge: #2d5373;
    --reed: #8fd4ae;
    --reed-wash: #173a2a;
    --reed-edge: #2f6448;
    --on-reed: #0e1c27;
    --sand: #f2c46b;
    --sand-wash: #33280e;
    --sand-edge: #6a5320;
    --sand-deep: #d9a234;
    --sand-ink: #f6dca0;
    --salt-wash: #183650;
    --salt-ink: #a3d2f3;
    --dock: #0a1824;
    --on-dock: #f2f6f9;
    --dock-sub: #c2d4e2;
    --reck-bg: #0a1824;
    --reck-ink: #e3ecf0;
    --reck-sub: #a3bccd;
    --reck-rule: #2a4558;
    --reck-total: #ffb17f;
    --reck-gap: #ffd28a;
    --reck-link: #ffffff;
    --reck-req: #ffb59a;
    --reck-edge: #7f9fb5;
    --lvl0: #1d3446; --lvl1: #1f4058; --lvl2: #2f6588; --lvl3: #6aa6d1; --lvl4: #a9d6f5;
    --lvl-edge: #2c4f69;
    --lvl-ink-deep: #0a1824;
    --fb: #4b93f5;
    --on-fb: #0a1824;
    --focus: #ff8a4c;
    --lift: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.25);
  }
}

@media (min-width: 48rem) {
  :root { --gutter: 1.5rem; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--sheet-edge);
  color: var(--hull);
  font-family: var(--type-body);
  font-size: 1.125rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
@media (min-width: 48rem) { body { font-size: 1.1875rem; } }
a { color: var(--current); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--ember); }
h1, h2, h3, .h3-size { font-family: var(--type-head); font-weight: 700; line-height: 1.08; overflow-wrap: break-word; }
h1 { font-size: clamp(2.1rem, 1.2rem + 4vw, 3.4rem); margin: 0 0 0.75rem; }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.1rem); margin: 0 0 0.75rem; }
h3, .h3-size { font-size: 1.3rem; margin: 1.4em 0 0.5em; }
p { margin: 0 0 0.8em; }
small, .fine { font-size: 0.88rem; color: var(--driftwood); }
.faint { color: var(--murk); }
img, video, iframe { max-width: 100%; height: auto; }
svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
details > summary { cursor: pointer; min-height: 2.75rem; padding-block: 0.625rem; }
select, input, textarea, button { font: inherit; color: inherit; }

/* The page sits on a sheet; wide screens see a deeper shade either side */
.sheet {
  max-width: 78rem; margin-inline: auto; background: var(--shore);
  min-height: 100vh; min-height: 100dvh;
}
@media (min-width: 79rem) { .sheet { box-shadow: 0 0 0 1px var(--seam); } }
.reach { max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }
main { padding-bottom: 2rem; }
main section { margin: 0 0 2.5rem; scroll-margin-top: 1rem; min-width: 0; }

.to-guide {
  position: absolute; left: -100rem; top: 0; z-index: 9;
  background: var(--dock); color: var(--on-dock); padding: 0.6rem 0.9rem;
}
.to-guide:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Header ---------- */
.topwater { background: var(--dock); color: var(--on-dock); }
.topwater-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; min-height: 3.75rem; padding-block: 0.25rem; }
.logo { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; color: var(--on-dock); text-decoration: none; font: 700 1.5rem/1.1 var(--type-head); }
.logo:hover { color: var(--on-dock); }
.logo-plate { background: var(--flare); color: var(--on-flare); border-radius: 0.25rem; padding: 0.2rem 0.45rem 0.15rem; font: 700 1.05rem/1 var(--type-head); }
.topwater-nav { display: flex; flex-wrap: wrap; column-gap: 1.1rem; row-gap: 0; }
.topwater-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--dock-sub); text-decoration: none; font-weight: 600; font-size: 1em; }
@media (min-width: 48rem) {
  .logo { font-size: 2rem; gap: 0.7rem; }
  .logo-plate { font-size: 1.35rem; padding: 0.25rem 0.55rem 0.2rem; }
}
.topwater-nav a:hover { color: var(--on-dock); text-decoration: underline; }

/* ---------- Breadcrumb trail and title band ---------- */
.wake { background: var(--shallows); font-size: 0.88rem; color: var(--murk); padding-top: 0.4rem; }
.wake ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.wake li { display: inline-flex; align-items: center; min-width: 0; }
.wake li + li::before { content: "›"; margin: 0 0.55rem; color: var(--murk); }
.wake a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--driftwood); }
.title-band {
  background: var(--shallows); margin-inline: calc(-1 * var(--gutter)); padding: 0.4rem var(--gutter) 1.75rem;
  margin-bottom: 2rem;
}
.title-band > h1:first-child { padding-top: 1rem; }
.lure { font-size: 1.06em; color: var(--driftwood); max-width: 65ch; }
.title-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; color: var(--driftwood); font-size: 0.95rem; }
.price-yr { color: var(--ember); }
.weigh-in {
  display: inline-flex; align-items: center; gap: 0.5rem; background: var(--reed-wash); color: var(--reed);
  border: 1.5px solid var(--reed-edge); border-radius: var(--bend-s); padding: 0.3rem 0.8rem 0.3rem 0.55rem; font-weight: 700;
}
.weigh-in svg { width: 1.25rem; height: 1.25rem; flex: none; }
.weigh-in circle { fill: currentColor; }
.weigh-in path { fill: none; stroke: var(--on-reed); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* The three promises under each page title */
.pledge {
  display: grid; grid-template-columns: minmax(0, 1fr); margin: 1rem 0 0; max-width: 56rem;
  background: var(--deck); border: 1px solid var(--seam); border-left: 0.375rem solid var(--flare); border-radius: 0.375rem;
}
.pledge > div { padding: 0.5rem 0.9rem; border-top: 1px dashed var(--seam); min-width: 0; }
.pledge > div:first-child { border-top: 0; }
.pledge dt { font: 700 1rem/1.2 var(--type-head); color: var(--ember); }
.pledge dd { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--driftwood); line-height: 1.4; }
@media (min-width: 48rem) {
  .pledge { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pledge > div { border-top: 0; border-left: 1px dashed var(--seam); }
  .pledge > div:first-child { border-left: 0; }
}

/* Known gaps in the data, shown openly */
.gap-box {
  background: var(--sand-wash); border: 1px solid var(--sand-edge); border-radius: var(--bend-s);
  padding: 0.75rem 1rem; margin: 0.9rem 0 0; font-size: 0.93rem; color: var(--sand-ink); max-width: 56rem;
}
.gap-box p { margin: 0 0 0.4rem; }
.gap-box ul { margin: 0; padding-left: 1.1rem; }
.gap-box li { margin-bottom: 0.25rem; }
.gap-box a { color: var(--sand-ink); font-weight: 600; }
section.gap-box { margin-bottom: 1.25rem; }
.gap-note { background: var(--sand-wash); border-left: 0.3rem solid var(--sand-deep); border-radius: 0.375rem; padding: 0.55rem 0.8rem; margin: 0 0 0.75rem; font-size: 0.92rem; color: var(--sand-ink); }
.gap-line { display: block; color: var(--sand); font-weight: 600; font-size: 0.86rem; }
.wtag.gap-tag { background: var(--sand-wash); color: var(--sand); text-decoration: none; }
a.wtag { display: inline-flex; align-items: center; min-height: 1.75rem; }

/* ---------- Section headings ---------- */
section > h2, .sec-top h2 {
  padding-bottom: 0.5rem;
  background: linear-gradient(var(--flare), var(--flare)) left bottom / 2.75rem 0.25rem no-repeat;
}
.sec-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.9rem; }
.sec-top h2 { margin-bottom: 0; }
.h-aside { font: 500 0.9rem var(--type-body); color: var(--murk); margin-left: 0.4rem; vertical-align: middle; }
.fresh-check {
  display: inline-block; font-size: 0.92rem; font-weight: 700; color: var(--reed); background: var(--reed-wash);
  border: 1.5px solid var(--reed-edge); border-radius: 0.375rem; padding: 0.1rem 0.6rem;
}
.fresh-check::before { content: "✓ "; }

/* ---------- Quick answer: licence card and price tiles ---------- */
.quick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin: 0 0 2.5rem; align-items: start; }
@media (min-width: 48rem) { .quick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.permit, .quick-cost { background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); box-shadow: var(--lift); min-width: 0; }
.permit-band {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.75rem; padding: 0.4rem 1.1rem;
  background: var(--flare); color: var(--on-flare); font: 700 1.2rem/1.25 var(--type-head);
  border-radius: calc(var(--bend) - 1px) calc(var(--bend) - 1px) 0 0;
}
.permit-body { padding: 1rem 1.2rem 0.9rem; }
.permit-body h2, .quick-h { font-size: 1.75rem; margin: 0 0 0.3rem; }
.say-big { font-size: 1.12em; }
.permit-free { font-weight: 700; margin: 0.75rem 0 0.25rem; }
.permit-stub {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem;
  border-top: 2px dashed var(--seam); padding: 0.6rem 1.2rem 0.75rem; font-size: 0.88rem; color: var(--driftwood);
}
.exempt-list { list-style: none; padding: 0; margin: 0 0 0.4rem; }
.exempt-list li { position: relative; padding-left: 1.25rem; margin: 0.25rem 0; font-size: 0.95rem; }
.exempt-list li::before { content: ""; position: absolute; left: 0.2rem; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 2px solid var(--driftwood); }
.quick-cost { padding: 0.9rem 0.85rem 1.1rem; }
@media (min-width: 30rem) { .quick-cost { padding: 1rem 1.1rem 1.15rem; } }
.water-h { font-weight: 700; color: var(--driftwood); margin: 0.75rem 0 0.4rem; font-size: 0.95rem; }
.quick-h + .water-h { margin-top: 0.25rem; }
.cost-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.4rem), 1fr)); gap: 0.5rem; }
.cost-tiles li { background: var(--lake-wash); border-radius: var(--bend-s); padding: 0.4rem 0.45rem; min-width: 0; container-type: inline-size; }
.cost-tiles small { display: block; font-size: 0.88rem; font-weight: 600; color: var(--driftwood); }
/* The price scales with its own tile, so "$115.85" never splits, whatever the font or text size */
.cost-tiles b { display: block; font: 700 clamp(1.05rem, 5vw, 2.2rem)/1.05 var(--type-head); font-size: clamp(1.05rem, 24cqi, 2.2rem); color: var(--lake-ink); overflow-wrap: anywhere; }
.cost-tiles li.cheapest { background: var(--flare-wash); }
.cost-tiles li.cheapest b { color: var(--ember); }
.quick-cost > .fine { margin-top: 0.75rem; }

/* Buttons: squared-off so a two-line label stays a neat block */
.cast-btn {
  display: inline-block; min-height: 2.75rem; padding: 0.65rem 1.1rem; margin-top: 0.25rem;
  background: var(--ember); color: var(--on-ember); border: 2px solid var(--ember); border-radius: var(--bend-s);
  font-weight: 700; line-height: 1.3; text-decoration: none; text-align: center; max-width: 100%; cursor: pointer;
}
.cast-btn:hover { background: var(--hull); border-color: var(--hull); color: var(--shore); }
.cast-btn[target="_blank"]::after { content: "\00a0↗"; }
.cast-btn.alt { background: var(--deck); color: var(--hull); border-color: var(--hull); }
.cast-btn.alt:hover { background: var(--hull); color: var(--shore); }

/* ---------- Two columns: contents list and body ---------- */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.body-col { min-width: 0; }
.on-page { min-width: 0; margin-bottom: 1.5rem; background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); padding: 0.1rem 0.9rem 0.4rem; font-size: 0.95rem; }
.on-page summary { font-weight: 700; }
.on-page ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); column-gap: 0.9rem; }
.on-page li { min-width: 0; }
.on-page a { display: flex; align-items: center; min-height: 2.75rem; padding: 0.2rem 0; color: var(--driftwood); text-decoration: none; line-height: 1.25; }
.on-page a:hover { color: var(--ember); text-decoration: underline; }
@media (min-width: 60rem) {
  .two-col { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 2.25rem; }
  .on-page { position: sticky; top: 0.75rem; align-self: start; background: none; border: 0; padding: 0; }
  .on-page ol { display: block; border-left: 2px solid var(--seam); }
  .on-page a { padding: 0.15rem 0 0.15rem 0.75rem; min-height: 2.25rem; }
}

/* ---------- Water tags and source labels ---------- */
.wtag { display: inline-block; font-size: 0.82rem; font-weight: 700; line-height: 1.5; padding: 0 0.4rem; border-radius: 0.3rem; margin-right: 0.2rem; vertical-align: 0.05em; }
.wtag.freshwater { background: var(--reed-wash); color: var(--reed); }
.wtag.saltwater { background: var(--salt-wash); color: var(--salt-ink); }
.wtag.aged { background: var(--flare-wash); color: var(--ember); }
.wtag.second { background: var(--sand-wash); color: var(--sand); }
.cite { font-size: 0.86rem; }
.cite a {
  display: inline-block; max-width: 100%; margin: 0.15rem 0.2rem 0.15rem 0; padding: 0.12rem 0.5rem;
  background: var(--lake-wash); color: var(--lake-ink); border: 1px solid var(--lake-edge); border-radius: 0.375rem;
  font-weight: 600; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; vertical-align: middle;
}
.cite a::after, .rule-link::after { content: "\00a0↗"; }
.cite a.second { background: var(--sand-wash); border-color: var(--sand-edge); color: var(--sand); }
.cite a.cite-plus { padding-inline: 0.45rem; }
.cite a.cite-plus::before { content: "+"; }
.cite a:hover, .rule-link:hover { background: var(--deck); color: var(--lake-ink); }
.rule-link {
  display: inline-block; max-width: 100%; margin: 0.15rem 0.25rem 0.15rem 0; padding: 0.12rem 0.5rem;
  background: var(--flare-wash); color: var(--ember); border: 1px solid var(--flare-edge); border-radius: 0.375rem;
  font-size: 0.86rem; font-weight: 700; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere;
}
.see-also { font-size: 0.88rem; margin-left: 0.3rem; }
.see-also::after { content: "\00a0→"; }

/* ---------- Scroll boxes and tables ---------- */
.side-scroll { overflow-x: auto; max-width: 100%; margin-bottom: 1rem; -webkit-overflow-scrolling: touch; }
.side-scroll > table { min-width: min(20rem, 100%); }
table { border-collapse: separate; border-spacing: 0; }
.trip-table, .fold, .pair-table {
  width: 100%; background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend);
  box-shadow: var(--lift); font-size: 0.95rem;
}
.trip-table th, .trip-table td, .fold th, .fold td, .pair-table th, .pair-table td {
  padding: 0.65rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--seam-soft);
}
.trip-table thead th, .fold thead th { background: var(--pale); font-size: 0.88rem; font-weight: 600; color: var(--driftwood); }
.trip-table thead th:first-child, .fold thead th:first-child, .pair-table thead th:first-child { border-top-left-radius: calc(var(--bend) - 1px); }
.trip-table thead th:last-child, .fold thead th:last-child, .pair-table thead th:last-child { border-top-right-radius: calc(var(--bend) - 1px); }
.trip-table tbody tr:last-child > *, .fold tbody:last-child tr:last-child > *, .pair-table tbody tr:last-child > * { border-bottom: 0; }
.trip-table .amt-col, .fold .amt-col, .pair-table .amt-col { text-align: right; }
.trip-table td.amt-col { font: 700 1.3rem/1.3 var(--type-head); }
.trip-table tbody th { font-weight: 600; }
.fold tbody th { font-weight: 600; }
.fold .price-cell { font-weight: 700; font-size: 1.05rem; }
.fold tr.row-group th { background: var(--pale); font: 700 0.86rem var(--type-body); color: var(--driftwood); }
.fold tr.special-row td { color: var(--driftwood); }
.note-cell p { margin: 0 0 0.25rem; font-size: 0.9rem; }
.all-states td.amt-col { font-weight: 700; }
.fold tbody.fish + tbody.fish tr:first-child > * { border-top: 2px solid var(--seam); }
.limit-table .fish-cont { display: none; }
.limit-table tr.fish-note td { font-size: 0.88rem; color: var(--driftwood); background: var(--pale); }
.limit-table tr.yearly td { background: var(--sand-wash); }

/* Phones: wide tables fold into one card per row (limits: one card per fish) */
@media (max-width: 43.99rem) {
  table.fold, .fold tbody, .fold tr, .fold td, .fold tbody th { display: block; width: 100%; }
  table.fold { background: none; border: 0; box-shadow: none; }
  .fold thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fold tr { background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); box-shadow: var(--lift); margin-bottom: 0.75rem; padding: 0.4rem 0; }
  .fold td, .fold tbody th { border: 0; padding: 0.3rem 0.9rem; }
  .fold [data-col] { display: flow-root; padding-left: calc(0.9rem + var(--lbl)); }
  .fold [data-col]::before {
    content: attr(data-col); float: left; width: var(--lbl); margin-left: calc(-1 * var(--lbl)); padding-right: 0.6rem;
    font-size: 0.84rem; font-weight: 700; color: var(--murk); line-height: 1.9; overflow-wrap: break-word;
  }
  .fold tr > :first-child { padding-left: 0.9rem; font-size: 1.04rem; }
  .fold tr > :first-child::before { content: none; }
  .fold .amt-col { text-align: left; }
  .fold tr.row-group { background: none; border: 0; box-shadow: none; padding: 0.5rem 0 0; margin: 0; }
  .fold tr.row-group th { background: none; padding: 0 0 0.4rem; }
  .fold tbody.fish + tbody.fish tr:first-child > * { border-top: 0; }
  .fold tbody:last-child tr:last-child > * { border-bottom: 0; }
  /* Limits: the whole fish (its rules, notes and source) is one card */
  .limit-table tbody.fish { background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); box-shadow: var(--lift); margin-bottom: 0.9rem; }
  .limit-table tbody.fish tr { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
  .limit-table tr.fish-more { border-top: 1px dashed var(--seam); }
  .limit-table .fish-cont { display: inline; color: var(--murk); }
  .limit-table tr.fish-note { background: var(--pale); border-top: 1px solid var(--seam-soft); border-radius: 0 0 calc(var(--bend) - 1px) calc(var(--bend) - 1px); padding: 0.5rem 0; }
  .limit-table tr.fish-note td { background: none; }
  .limit-table tr.yearly { background: var(--sand-wash); border-radius: calc(var(--bend) - 1px); }
  .limit-table tr.yearly td { background: none; }
}

/* Tables fit a phone (LAYOUT_RULES 27e, 11 Nov 2026): no word is split inside a cell; phone numbers,
   amounts and dates stay on one line; every table of 3+ columns folds into cards like .fold */
.trip-table :is(th, td), .fold :is(th, td), .pair-table :is(th, td) { overflow-wrap: normal; word-break: normal; }
.nobreak { white-space: nowrap; }
@media (max-width: 43.99rem) {
  table[data-fold]:not(.fold), [data-fold]:not(.fold) tbody, [data-fold]:not(.fold) tr, [data-fold]:not(.fold) td, [data-fold]:not(.fold) tbody th { display: block; width: 100%; }
  table[data-fold]:not(.fold) { background: none; border: 0; box-shadow: none; min-width: 0; }
  table[data-fold] caption { display: block; text-align: left; }
  [data-fold]:not(.fold) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  [data-fold]:not(.fold) tr { background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); box-shadow: var(--lift); margin-bottom: 0.75rem; padding: 0.4rem 0; }
  [data-fold]:not(.fold) td, [data-fold]:not(.fold) tbody th { border: 0; padding: 0.3rem 0.9rem; text-align: left; }
  [data-fold]:not(.fold) [data-col] { display: flow-root; padding-left: calc(0.9rem + var(--lbl)); }
  [data-fold]:not(.fold) [data-col]::before {
    content: attr(data-col); float: left; width: var(--lbl); margin-left: calc(-1 * var(--lbl)); padding-right: 0.6rem;
    font-size: 0.84rem; font-weight: 700; color: var(--murk); line-height: 1.9;
  }
  [data-fold]:not(.fold) tr > :first-child { padding-left: 0.9rem; font-size: 1.04rem; font-weight: 700; }
}

/* ---------- Cards, lists, facts ---------- */
.slip-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0.75rem; }
.slip { background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); padding: 0.9rem 1rem; box-shadow: var(--lift); min-width: 0; }
.slip h3, .slip .h3-size { margin: 0 0 0.4rem; font-size: 1.12rem; }
.slip p { margin-bottom: 0.4rem; font-size: 0.94rem; }
.slip-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; align-items: start; }
.slip-top h3 { min-width: 0; }
.slip-top .price-cell { font-weight: 700; font-size: 1.1rem; text-align: right; margin-left: auto; }
.slip-top .price-cell small { font-weight: 400; }
.slip.must { border-color: var(--ember); box-shadow: inset 0.25rem 0 0 var(--ember), var(--lift); }
.must-line { font-weight: 700; color: var(--ember); font-size: 0.9rem; }
.stacked { list-style: none; padding: 0; margin: 0 0 0.75rem; background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); box-shadow: var(--lift); }
.stacked li { padding: 0.75rem 1rem; border-bottom: 1px solid var(--seam-soft); }
.stacked li:last-child { border-bottom: 0; }
.stacked p { margin: 0 0 0.2rem; }
.fact-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem 1.1rem; margin: 0 0 0.75rem; }
.fact-list dt { font-weight: 700; font-size: 0.93rem; }
.fact-list dd { margin: 0 0 0.6rem; }
@media (min-width: 40rem) {
  .fact-list { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); row-gap: 0.5rem; }
  .fact-list dd { margin: 0; }
}
.date-list { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.date-list li { padding: 0.6rem 0.9rem; background: var(--deck); border: 1px solid var(--seam); border-left: 0.3rem solid var(--reed); border-radius: var(--bend-s); margin-bottom: 0.5rem; box-shadow: var(--lift); }
.date-when { font-weight: 700; margin-right: 0.4rem; }
.not-yet { color: var(--sand); font-weight: 600; }
.heads-up { background: var(--sand-wash); color: var(--sand-ink); border-left: 0.3rem solid var(--sand-deep); padding: 0.6rem 0.9rem; border-radius: 0.375rem; }
.faq-item { border-bottom: 1px solid var(--seam); }
.faq-item summary { list-style: none; padding-block: 0.75rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { display: inline; font-size: 1.1rem; margin: 0; }
.faq-item summary::after { content: "+"; float: right; margin-left: 0.75rem; font-weight: 700; color: var(--ember); }
.faq-item[open] summary::after { content: "–"; }
.source-list { font-size: 0.88rem; padding-left: 1.1rem; }
.source-list li { break-inside: avoid; margin-bottom: 0.3rem; overflow-wrap: anywhere; }
@media (min-width: 48rem) { .source-list { columns: 2; } }
details.unspool summary { color: var(--lake-ink); font-weight: 600; font-size: 0.95rem; }
details.unspool p { margin: 0.4rem 0 0; }

/* "Check with the state" prompts */
.go-check {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem;
  background: var(--flare-wash); border: 1px solid var(--flare-edge); border-radius: var(--bend); padding: 0.9rem 1.1rem; margin: 0 0 1rem;
}
.go-check p { margin: 0; max-width: 65ch; color: var(--hull); min-width: 0; }
.go-check-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
.go-check .cast-btn { margin: 0; }

/* Trips table extras */
.put-on-site { margin-top: 0.75rem; background: var(--deck); border: 1px dashed var(--seam); border-radius: var(--bend-s); padding: 0 1rem 0.4rem; }
.put-on-site summary { font-weight: 700; color: var(--lake-ink); }
.put-on-site textarea {
  width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: max(1rem, 16px); line-height: 1.4;
  background: var(--field); color: var(--hull); border: 1px solid var(--line-control); border-radius: var(--bend-s); padding: 0.5rem; resize: vertical;
}

/* ---------- Calculator ---------- */
.reckoner { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); box-shadow: var(--lift); }
.reck-in { padding: 1rem; display: grid; gap: 0.9rem; align-content: start; min-width: 0; }
.reck-out { padding: 1.1rem 1.2rem; background: var(--reck-bg); color: var(--reck-ink); border-radius: 0 0 calc(var(--bend) - 1px) calc(var(--bend) - 1px); min-width: 0; }
@media (min-width: 50rem) {
  .reckoner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .reck-in { padding: 1.15rem; }
  .reck-out { border-radius: 0 calc(var(--bend) - 1px) calc(var(--bend) - 1px) 0; }
}
.reck-out a { color: var(--reck-link); }
.inp { display: grid; gap: 0.3rem; margin: 0; min-width: 0; }
.inp > span, .toggle-set legend { font-weight: 700; font-size: 0.9rem; }
.reckoner select, .reckoner input[type="number"], .match select, .match input[type="number"], .nbrs-pick select, .pick-pair select {
  font-size: max(1rem, 16px); min-height: 2.75rem; padding: 0.45rem 0.65rem; width: 100%; max-width: 100%;
  background: var(--field); color: var(--hull); border: 1px solid var(--line-control); border-radius: var(--bend-s);
}
.toggle-set { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; }
.toggle-set legend { margin-bottom: 0.35rem; padding: 0; }
.toggle-set label { position: relative; display: inline-flex; min-width: 0; }
.toggle-set label[hidden] { display: none; }
.toggle-set input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.toggle-set span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.35rem 0.85rem; cursor: pointer; font-size: 0.95rem; line-height: 1.25;
  background: var(--field); border: 1px solid var(--line-control); border-radius: var(--bend-s);
}
.toggle-set legend .st-said { display: inline; min-height: 0; padding: 0; background: none; border: 0; font: inherit; cursor: auto; }
.toggle-set input:checked + span { background: var(--hull); color: var(--shore); border-color: var(--hull); }
.toggle-set input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.day-picks { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.day-picks button {
  min-height: 2.75rem; min-width: 2.75rem; padding: 0.35rem 0.7rem; cursor: pointer; font-size: 0.95rem;
  background: var(--field); color: var(--hull); border: 1px solid var(--line-control); border-radius: var(--bend-s);
}
.day-picks button[aria-pressed="true"] { background: var(--hull); color: var(--shore); border-color: var(--hull); }
.reckoner .day-picks input[type="number"] { width: 5.5rem; }
.extra-picks { display: grid; gap: 0.5rem; }
.extra-fold > summary { font-weight: 700; font-size: 0.9rem; color: var(--lake-ink); }
.extra-fold[open] > summary { margin-bottom: 0.25rem; }
.extra-fold[hidden] { display: none; }
.tickbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.55rem; align-items: start; font-size: 0.93rem; }
.tickbox input { width: 1.25rem; height: 1.25rem; margin: 0.2rem 0 0; accent-color: var(--ember); }
.tickbox small { grid-column: 2; }
.reck-total { border-bottom: 1px solid var(--reck-rule); padding-bottom: 0.6rem; margin-bottom: 0.6rem; }
.reck-label { display: block; font-size: 0.9rem; color: var(--reck-sub); }
.reck-total strong { display: block; font: 700 clamp(2rem, 8vw, 3.4rem)/1.05 var(--type-head); color: var(--reck-total); overflow-wrap: anywhere; }
.reck-lines { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.reck-lines li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.1rem 0.75rem; padding: 0.4rem 0; border-bottom: 1px dashed var(--reck-rule); font-size: 0.95rem; }
.reck-lines li > a { min-width: 0; overflow-wrap: anywhere; }
.reck-lines li.reck-required a::after { content: " · required"; color: var(--reck-req); font-size: 0.85rem; }
.reck-amt { font-weight: 700; margin-left: auto; }
.reck-notes-h { font-size: 0.88rem; font-weight: 700; color: var(--reck-ink); margin: 0 0 0.25rem; }
.reck-notes { margin: 0 0 0.6rem; padding-left: 1.1rem; font-size: 0.88rem; color: var(--reck-ink); }
.reck-notes li { margin-bottom: 0.25rem; }
.reck-gap { font-size: 0.86rem; color: var(--reck-gap); margin: 0 0 0.5rem; }
.reck-foot { font-size: 0.86rem; color: var(--reck-sub); margin: 0; }
.reck-hint { color: var(--reck-ink); }

/* ---------- Home ---------- */
.splash { background: var(--shallows); margin-bottom: 2.5rem; }
.splash-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: 2rem; align-items: center; }
@media (min-width: 60rem) { .splash-in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem; padding-block: 2.5rem; } }
.splash-copy { min-width: 0; }
.splash h1 { font-size: clamp(2.3rem, 1.2rem + 4.4vw, 3.8rem); line-height: 1; margin-top: 0; }
.splash .lure { color: var(--hull); max-width: 36rem; }
.splash-acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.splash-acts .cast-btn { margin: 0; }
.cost-map { margin: 0; background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); box-shadow: var(--lift); padding: 0.6rem; min-width: 0; }
@media (min-width: 40rem) { .cost-map { padding: 1rem; } }
.cost-map figcaption { font-size: 0.92rem; color: var(--driftwood); margin-bottom: 0.75rem; }
.map-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 2px; }
@media (min-width: 40rem) { .map-grid { gap: 4px; } }
.map-grid li { min-width: 0; }
.map-grid a { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 0.25rem; text-decoration: none; color: var(--hull); line-height: 1.05; min-width: 0; overflow: hidden; }
.map-grid b { font: 600 clamp(0.55rem, 2.7vw, 1.05rem)/1 var(--type-head); }
.map-grid span { display: none; font-size: 0.72rem; font-weight: 600; }
@media (min-width: 40rem) { .map-grid span { display: block; } }
.map-grid a:hover, .map-grid a:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
.lvl0 { background: var(--lvl0); }
.lvl1 { background: var(--lvl1); box-shadow: inset 0 0 0 1px var(--lvl-edge); }
.lvl2 { background: var(--lvl2); }
.lvl3 { background: var(--lvl3); }
.lvl4 { background: var(--lvl4); }
.map-grid a.lvl3, .map-grid a.lvl4 { color: var(--lvl-ink-deep); }
.map-key { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.86rem; color: var(--driftwood); }
.map-key i { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 0.2rem; vertical-align: -0.1rem; margin-right: 0.4rem; }
.state-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.5rem; }
.state-list a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.6rem; align-items: center; min-height: 2.75rem;
  padding: 0.55rem 0.75rem; background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend-s);
  box-shadow: var(--lift); text-decoration: none; color: var(--hull);
}
.state-list a:hover { border-color: var(--flare); color: var(--hull); }
.st-code { font: 700 0.86rem/1 var(--type-body); background: var(--flare-wash); color: var(--ember); border-radius: 0.375rem; padding: 0.4rem 0; width: 2.5rem; text-align: center; flex: none; }
.state-list .st-code { grid-row: span 2; }
.st-name { font-weight: 700; }
.st-from { font-size: 0.86rem; color: var(--driftwood); }
.how-it-works ol { padding-left: 1.25rem; max-width: 65ch; }
.how-it-works li { margin-bottom: 0.5rem; }
.page-text { max-width: calc(65ch + 2 * var(--gutter)); padding-top: 1.25rem; }
.page-text h2 { margin-top: 1.5em; }
.page-text a { overflow-wrap: anywhere; }

/* ---------- Comparing states ---------- */
.pair-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; margin: 0 0 2rem; }
.pair-top a {
  display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.75rem 1rem; text-decoration: none; color: var(--hull);
  background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); box-shadow: var(--lift); font: 600 1.45rem/1.15 var(--type-head);
}
.pair-vs { font: 600 1.4rem var(--type-head); color: var(--ember); text-align: center; }
@media (min-width: 40rem) {
  .pair-top { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; align-items: center; }
  .pair-top a:last-child { flex-direction: row-reverse; justify-content: flex-start; text-align: right; }
}
.pair-table thead th { background: var(--shallows); font: 600 1.3rem/1.2 var(--type-head); padding: 0.8rem 0.9rem; }
.pair-table thead a { color: var(--hull); }
.pair-table tbody th { background: var(--pale); font-weight: 600; font-size: 0.9rem; color: var(--hull); width: 24%; border-right: 1px solid var(--seam-soft); }
.pair-table td p { margin: 0 0 0.25rem; }
.pair-table td.amt-col { font-weight: 700; font-size: 1.05rem; }
.pair-table tr.row-group th { background: var(--pale); font-size: 0.86rem; color: var(--driftwood); width: auto; }
.pair-table tr.yr-row td, .pair-table tr.yr-row th { font-size: 0.86rem; font-weight: 400; color: var(--driftwood); }
.pair-table td.wins { background: var(--reed-wash); }
.pair-table td.wins::after {
  content: "✓ Cheaper"; display: inline-block; margin-top: 0.2rem; padding: 0 0.5rem; border-radius: 0.375rem;
  background: var(--reed-wash); color: var(--reed); border: 1.5px solid var(--reed-edge); font: 700 0.86rem var(--type-body);
}
.pair-table td.amt-col.wins::after { display: block; width: fit-content; margin-left: auto; }
.pair-card { background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); box-shadow: var(--lift); }
.pair-card .pair-table { border: 0; box-shadow: none; }
.pair-st { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; text-decoration: none; }
.cost-chip { display: inline-block; background: var(--lake-wash); border-radius: var(--bend-s); padding: 0.4rem 0.8rem; margin-bottom: 0.4rem; max-width: 100%; }
.cost-chip small { display: block; font-weight: 600; color: var(--driftwood); font-size: 0.88rem; }
.cost-chip strong { font: 700 clamp(1.5rem, 6vw, 2.1rem)/1.05 var(--type-head); color: var(--lake-ink); overflow-wrap: anywhere; }
.pair-card td.wins { background: transparent; }
.pair-card td.wins .cost-chip { background: var(--reed-wash); }
.pair-card td.wins .cost-chip strong { color: var(--reed); }
.fish-name, .kv-line { display: block; }
.fish-name { color: var(--murk); }
.pair-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pair-list li { min-width: 0; max-width: 100%; }
.pair-list a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.3rem 0.8rem; max-width: 100%;
  background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend-s); text-decoration: none; font-size: 0.93rem; line-height: 1.25;
}
.pair-list a:hover { border-color: var(--flare); }
.pick-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.65rem; background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); box-shadow: var(--lift); padding: 0.75rem 0.9rem; }
.pick-pair label { font-weight: 700; font-size: 0.93rem; }
.pick-pair select { width: auto; flex: 1 1 10rem; }
.pick-pair button {
  min-height: 2.75rem; padding: 0.4rem 1rem; cursor: pointer; font-weight: 700;
  background: var(--hull); color: var(--shore); border: 1px solid var(--hull); border-radius: var(--bend-s);
}
.match { display: grid; gap: 1.1rem; margin-bottom: 2.75rem; }
.match-in {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 0.9rem 1.1rem; align-items: start;
  background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); box-shadow: var(--lift); padding: 1rem;
}
.match-out { min-height: 20rem; min-width: 0; }
@media (min-width: 30rem) { .toggle-set.span2 { grid-column: span 2; } }
.nbrs { background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); box-shadow: var(--lift); padding: 1rem; }
@media (min-width: 40rem) { .nbrs { padding: 1.25rem 1.4rem; } }
.nbrs-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 0.75rem 1.5rem; margin-bottom: 0.9rem; }
.nbrs-top > div { min-width: 0; max-width: 36rem; }
.nbrs-top h2 { margin-bottom: 0.25rem; }
.nbrs-top p { margin: 0; color: var(--driftwood); }
.nbrs-pick { width: min(14rem, 100%); }
.nbrs-set { border-top: 1px solid var(--seam-soft); padding-top: 0.75rem; }
.nbrs-set + .nbrs-set { margin-top: 0.75rem; }
.nbrs-on .nbrs-set { border-top: 0; padding-top: 0; }
.nbrs-set h3 { margin: 0 0 0.6rem; font-size: 1.12rem; }
.nbrs-set h3 span { font: 600 0.86rem var(--type-body); color: var(--murk); margin-left: 0.4rem; }
.nbrs-set .pair-list { margin: 0; }

/* ---------- Free days and guides ---------- */
.free-today { background: var(--deck); border: 2px solid var(--seam); border-radius: var(--bend); padding: 1rem 1.2rem; box-shadow: var(--lift); }
.free-today.is-free { border-color: var(--reed-edge); background: var(--reed-wash); }
.free-today h2 { margin-bottom: 0.4rem; }
.free-today .say-big { margin: 0 0 0.25rem; font-weight: 600; }
.buy-steps { padding-left: 1.4rem; display: grid; gap: 0.5rem; max-width: 65ch; }

/* ---------- After the page: where prices come from, passing it on ---------- */
.afterword { display: grid; gap: 1rem; margin: 0.5rem auto 0; padding-bottom: 1.5rem; }
.afterword > section { margin: 0; min-width: 0; }
.catch-log { background: var(--deck); border: 1px solid var(--seam); border-radius: 0.375rem; padding: 1.1rem 1.1rem 1rem; }
@media (min-width: 48rem) { .catch-log { padding: 1.4rem 1.6rem 1.2rem; } }
.log-steps { list-style: none; counter-reset: prov; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.log-steps li { counter-increment: prov; min-width: 0; }
.log-steps li::before {
  content: counter(prov); display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-bottom: 0.35rem;
  border-radius: 50%; background: var(--hull); color: var(--shore); font: 700 0.95rem/1 var(--type-head);
}
.log-steps li::before { margin-right: 0.5rem; vertical-align: 0.1rem; }
.log-steps b { font: 700 1.2rem/1.2 var(--type-head); }
@media (min-width: 48rem) {
  .log-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .log-steps li { padding: 0.25rem 1.1rem; border-left: 2px dashed var(--seam); }
  .log-steps li:first-child { border-left: 0; padding-left: 0; }
  .log-steps li::before { display: grid; margin-right: 0; }
  .log-steps b { display: block; }
}
.log-foot { margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--seam-soft); color: var(--driftwood); font-size: 0.95rem; }
.pass-on {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  background: var(--flare-wash); border: 1px solid var(--flare-edge); border-radius: 0.375rem; padding: 1rem 1.1rem;
}
.pass-copy { min-width: 0; flex: 1 1 18rem; }
.pass-copy h2 { font-size: 1.45rem; margin: 0 0 0.15rem; }
.pass-copy p { margin: 0; color: var(--driftwood); }
.pass-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
.pass-btns a, .pass-btns button {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.4rem 0.95rem; cursor: pointer;
  background: var(--deck); color: var(--hull); border: 1.5px solid var(--hull); border-radius: var(--bend-s);
  font-weight: 600; font-size: 0.98rem; line-height: 1.25; text-decoration: none;
}
.pass-btns a:hover, .pass-btns button:hover { background: var(--hull); color: var(--shore); }
.pass-btns [hidden] { display: none; }
.pass-btns svg { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pass-btns .pass-native { background: var(--ember); color: var(--on-ember); border-color: var(--ember); font-weight: 700; }
.pass-f { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; flex: none; border-radius: 50%; background: var(--fb); color: var(--on-fb); font: 700 1rem/1 var(--type-body); }

/* ---------- Footer ---------- */
.pagefoot { background: var(--deck); color: var(--driftwood); border-top: 1px solid var(--seam); padding: 1.75rem 0 1.25rem; font-size: 0.93rem; }
.pagefoot-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 2rem; }
.pagefoot-say { max-width: 65ch; }
.pagefoot-name { font: 700 1.3rem/1.2 var(--type-head); color: var(--hull); margin-bottom: 0.4rem; }
.pagefoot-links { display: flex; flex-direction: column; min-width: 0; }
.pagefoot-h { font-weight: 700; color: var(--hull); margin: 0; }
.pagefoot-links a { display: flex; align-items: center; min-height: 2.75rem; color: var(--hull); font-weight: 600; }
.pagefoot-fine { font-size: 0.86rem; color: var(--murk); margin: 0.5rem 0 0; border-top: 1px solid var(--seam-soft); padding-top: 0.75rem; }
@media (min-width: 40rem) {
  .pagefoot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pagefoot-say, .pagefoot-fine { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .pagefoot-in { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .pagefoot-say { grid-column: auto; }
}


/* visit-count question (count.js): UK and EU visitors only, live site only */
.pagefoot-choice { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; text-align: left; }
.pagefoot-choice[hidden] { display: none; }
.castnote { position: fixed; z-index: 60; left: max(1rem, env(safe-area-inset-left, 0px)); right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); max-width: 30rem; margin: 0; padding: 1.1rem 1.25rem 1.25rem;
  background: var(--deck); color: var(--hull); border: 1px solid var(--seam); border-top: 5px solid var(--current); border-radius: 8px;
  box-shadow: 0 0.5rem 2rem rgba(16, 38, 58, 0.3); font-size: 1rem; line-height: 1.5; }
.castnote-head { margin: 0 0 0.4rem; font-size: 1.2rem; color: var(--hull); }
.castnote p { margin: 0 0 0.9rem; }
.castnote a { color: var(--current); }
.castnote-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.castnote-btn { flex: 1 1 8rem; min-height: 2.75rem; padding: 0 1rem; border: 2px solid var(--current); border-radius: 6px;
  background: var(--current); color: #ffffff; font: inherit; font-weight: 700; cursor: pointer; }
.castnote-btn:hover, .castnote-btn:focus-visible { background: var(--hull); border-color: var(--hull); }
@media print { .castnote, .pagefoot-choice { display: none !important; } }

/* phones: the two buttons stack, Accept all on top (Kevin, 11 Nov 2026) */
@media (max-width: 40em) { .castnote-row { flex-direction: column; } .castnote-btn { flex: 0 0 auto; width: 100%; } .castnote-btn[data-answer="yes"] { order: -1; } }

/* ---------- Tool first (11 Nov 2026): the tool opens the page ---------- */
.trip-first { margin: 0 0 2.25rem; }
.title-band + .trip-first { margin-top: 0; }
/* tool sits right under the title (Kevin, 11 Nov 2026: less gap so the state box shows on the first phone screen) */
.title-band .lure:last-child { margin-bottom: 0; }
.title-band:has(+ .trip-first) { padding-bottom: 0.75rem; margin-bottom: 0.75rem; }
.splash { margin-bottom: 1.25rem; }
.tool-tag { margin: 0 0 0.15rem; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; color: var(--ember); }
.trip-first > h2 { margin-bottom: 0.85rem; }
.tool-say { margin: 0.7rem 0 0; max-width: 65ch; font-size: 0.95rem; color: var(--driftwood); }
.title-after { margin: 0 0 2rem; }
.title-after .pledge { margin-top: 0.75rem; }
.splash-in { display: block; padding-block: 1.6rem 1.4rem; }
.splash-in .lure { margin-bottom: 0; }
.map-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2.5rem; align-items: center; }
@media (min-width: 60rem) { .map-sec { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.map-copy { min-width: 0; }
.map-copy .pledge { max-width: none; }
.map-copy .pledge { grid-template-columns: minmax(0, 1fr); }
.map-copy .pledge > div { border-left: 0; border-top: 1px dashed var(--seam); }
.map-copy .pledge > div:first-child { border-top: 0; }

/* Inside the navy result panel: the answer, then passing it to the crew, then what next */
.reck-ans { min-width: 0; }
.crew-call { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed var(--reck-rule); }
.crew-call[hidden] { display: none; }
.crew-say { margin: 0 0 0.55rem; font-size: 0.9rem; color: var(--reck-sub); }
.crew-btns { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.crew-btns a, .crew-btns button {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.35rem 0.8rem; max-width: 100%;
  background: transparent; color: var(--reck-ink); border: 1.5px solid var(--reck-edge); border-radius: var(--bend-s);
  font: 600 0.93rem/1.2 var(--type-body); text-decoration: none; cursor: pointer; text-align: left;
}
.crew-btns a:hover, .crew-btns button:hover { background: var(--reck-ink); color: var(--reck-bg); border-color: var(--reck-ink); }
.crew-btns [hidden] { display: none; }
.crew-btns svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crew-btns .crew-fb svg { fill: currentColor; stroke: none; }
.crew-btns .crew-sheet { background: var(--flare); color: var(--on-flare); border-color: var(--flare); font-weight: 700; }
.crew-own { margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--reck-sub); }
.crew-own[hidden] { display: none; }
.crew-own input {
  display: block; width: 100%; margin-top: 0.25rem; min-height: 2.75rem; padding: 0.4rem 0.6rem; font-size: max(1rem, 16px);
  background: var(--field); color: var(--hull); border: 1px solid var(--line-control); border-radius: var(--bend-s);
}
.next-casts { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed var(--reck-rule); }
.next-h { margin: 0; font-weight: 700; font-size: 0.9rem; }
.next-casts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.next-casts li { min-height: 2.75rem; display: flex; align-items: center; }
.next-casts a { display: inline-block; padding-block: 0.65rem; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.next-casts a::after { content: "\00a0→"; }
.reck-out .next-casts a { color: var(--reck-link); }

/* "Forget my details": what this device remembers, and the way to clear it */
.keepnet { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--driftwood); }
.keepnet[hidden], .keepnet button[hidden] { display: none; }
.keepnet span { min-width: 0; }
.keepnet button {
  min-height: 2.75rem; padding: 0.3rem 0.85rem; cursor: pointer; font-weight: 600; font-size: 0.93rem;
  background: var(--deck); color: var(--hull); border: 1.5px solid var(--line-control); border-radius: var(--bend-s);
}
.keepnet button:hover { border-color: var(--ember); color: var(--ember); }
.keep-always { margin-top: 0.4rem; }

/* Long reference lists fold away on state pages; the headings stay */
.tackle-fold { margin: 0.75rem 0 1.25rem; min-width: 0; }
.tackle-fold > summary {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem;
  padding-inline: 1rem; background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend-s); box-shadow: var(--lift);
  font-weight: 700; color: var(--lake-ink); line-height: 1.35;
}
.tackle-fold > summary::-webkit-details-marker { display: none; }
.tackle-fold > summary::after {
  content: "Show ▾"; flex: none; margin-left: auto; padding: 0.05rem 0.55rem; border-radius: 0.375rem;
  background: var(--lake-wash); color: var(--lake-ink); font-size: 0.86rem;
}
.tackle-fold[open] > summary { margin-bottom: 0.75rem; }
.tackle-fold[open] > summary::after { content: "Hide ▴"; }
.tackle-fold > summary:hover { border-color: var(--flare); }

/* "When does my license expire?": choices on the left, the license card with its end date on the right */
.lapse { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); box-shadow: var(--lift); }
.lapse-in { display: grid; gap: 0.9rem; align-content: start; padding: 1rem; min-width: 0; }
.lapse-out { padding: 1rem; min-width: 0; background: var(--pale); border-top: 1px solid var(--seam); border-radius: 0 0 calc(var(--bend) - 1px) calc(var(--bend) - 1px); }
@media (min-width: 50rem) {
  .lapse { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .lapse-in { padding: 1.15rem; }
  .lapse-out { padding: 1.15rem; border-top: 0; border-left: 1px solid var(--seam); border-radius: 0 calc(var(--bend) - 1px) calc(var(--bend) - 1px) 0; }
}
.lapse select, .lapse input[type="date"] {
  font-size: max(1rem, 16px); min-height: 2.75rem; padding: 0.45rem 0.65rem; width: 100%; max-width: 100%;
  background: var(--field); color: var(--hull); border: 1px solid var(--line-control); border-radius: var(--bend-s);
}
.lapse .inp[hidden] { display: none; }
.lapse-hint { margin: 0; color: var(--driftwood); }
.lapse-card { background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend); box-shadow: var(--lift); min-width: 0; }
.lapse-band {
  margin: 0; padding: 0.4rem 1rem; background: var(--flare); color: var(--on-flare); font: 700 1.15rem/1.25 var(--type-head);
  border-radius: calc(var(--bend) - 1px) calc(var(--bend) - 1px) 0 0; overflow-wrap: anywhere;
}
.lapse-unsure .lapse-band { background: var(--sand-deep); color: var(--hull); }
.lapse-body { padding: 0.85rem 1rem 0.9rem; }
.lapse-body > p { margin: 0 0 0.4rem; }
.lapse-label { display: block; font-size: 0.92rem; color: var(--driftwood); }
.lapse-big { display: block; margin: 0.1rem 0 0.35rem; font: 700 clamp(1.7rem, 7vw, 2.6rem)/1.05 var(--type-head); color: var(--hull); overflow-wrap: anywhere; }
.lapse-unsure .lapse-big { font-size: clamp(1.3rem, 5vw, 1.7rem); }
.lapse-left {
  display: inline-block; margin: 0 0 0.45rem; padding: 0.05rem 0.55rem; border-radius: 0.375rem; font-weight: 700; font-size: 0.95rem;
  color: var(--reed); background: var(--reed-wash); border: 1.5px solid var(--reed-edge);
}
.lapse-left.soon { color: var(--sand); background: var(--sand-wash); border-color: var(--sand-edge); }
.lapse-left.gone { color: var(--ember); background: var(--flare-wash); border-color: var(--flare-edge); }
.lapse-also { font-size: 0.9rem; color: var(--driftwood); }
.lapse-pair { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.lapse-pair li { padding-top: 0.6rem; border-top: 1px dashed var(--seam); min-width: 0; }
.lapse-pair .lapse-cal { display: flex; width: fit-content; margin-top: 0.15rem; }
.lapse-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.lapse-cal, .lapse-print {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.4rem 0.9rem; max-width: 100%;
  border-radius: var(--bend-s); font-weight: 700; line-height: 1.25; text-align: left; cursor: pointer;
}
.lapse-cal { background: var(--ember); color: var(--on-ember); border: 2px solid var(--ember); }
.lapse-cal:hover { background: var(--hull); border-color: var(--hull); color: var(--shore); }
.lapse-print { background: var(--deck); color: var(--hull); border: 1.5px solid var(--hull); }
.lapse-print:hover { background: var(--hull); color: var(--shore); }
.lapse-cal svg, .lapse-print svg { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lapse-stub {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 0.75rem; padding: 0.55rem 1rem 0.65rem;
  border-top: 2px dashed var(--seam); font-size: 0.88rem; color: var(--driftwood);
}
.lapse-rule { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--driftwood); }
.lapse-out .next-casts { border-top-color: var(--seam); }
.lapse-out .next-h { color: var(--hull); }
.lapse-out .next-casts a { color: var(--current); }
.lapse-box { margin: 1.75rem 0 0; scroll-margin-top: 1rem; }
.lapse-box h3 { margin-top: 0; }
.lapse-box > .fine { margin: 0.6rem 0 0; }

/* ---------- Paper ---------- */
.print-head, .print-only { display: none; }
@media print {
  @page { margin: 14mm; }
  body, .sheet { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .topwater-nav, .wake, .on-page, .afterword, .to-guide, .pagefoot-links, .pagefoot-choice, .castnote,
  .crew-call, .keepnet, .lapse-acts, .lapse-cal, .put-on-site, .tool-say, .next-casts, [data-fl-ad] { display: none !important; }
  .print-head { display: block !important; margin: 0 0 0.6rem; font-size: 0.85rem; color: #000; overflow-wrap: anywhere; }
  .print-only { display: block !important; }
  .reckoner, .lapse, .lapse-card, .slip, .fold, .trip-table { box-shadow: none !important; }
  .reck-out, .lapse-out { background: #fff !important; color: #000 !important; border: 0 !important; border-top: 2px solid #000 !important; border-radius: 0 !important; }
  .reck-out a, .reck-label, .reck-foot, .reck-notes, .reck-notes-h, .reck-gap, .reck-hint, .lapse-out a { color: #000 !important; }
  .reck-total strong { color: #000 !important; }
  .reck-lines a::after, .reck-foot a::after, .lapse-rule .cite a::after { content: " (" attr(href) ")"; font-weight: 400; font-size: 0.8em; overflow-wrap: anywhere; }
  .lapse-band { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; }
  a { color: #000; }
  /* "Print this trip cost" / "Print": only that tool and its answer */
  html.print-one .pr-path > :not(.pr-path):not(.pr-keep) { display: none !important; }
  html.print-one .pr-keep { margin: 0 !important; }
  html.print-one .reck-in, html.print-one .lapse-in { display: none !important; }
  html.print-one .reckoner, html.print-one .lapse { display: block; border: 0; }
}

/* Species pages: "Pick a state" opens that state's region fold-out (11 Nov 2026) */
.state-hop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: 0.4rem; }
.state-hop li { min-width: 0; }
.state-hop a {
  display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.3rem 0.6rem; min-width: 0;
  background: var(--deck); border: 1px solid var(--seam); border-radius: var(--bend-s); box-shadow: var(--lift);
  color: var(--hull); font-weight: 600; font-size: 0.95rem; line-height: 1.2; text-decoration: none; overflow-wrap: break-word;
}
@media (min-width: 48rem) { .state-hop { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); } }
@media (max-width: 23.99rem) { .state-hop .st-code { display: none; } }  /* 360px phones: the name needs the room */
.state-hop a:hover, .state-hop a:focus-visible { border-color: var(--flare); color: var(--ember); }
.state-hop .st-code { width: 2.3rem; padding: 0.3rem 0; }
.limit-table tbody.fish { scroll-margin-top: 1rem; }
#hop-to-state { margin-bottom: 1.25rem; }
.hop-warn { margin-bottom: 0.5rem; }