/* ============================================================
   DESIGN TOKENS — TrailWaterMaps brand: "Iron / Bone"
   Iron chrome (#1f1915, the parent icon's ground), warm Bone paper
   panels, Saddle leather for links and secondary accents, River blue
   for water. Survey-flagging orange stays reserved for the live data
   readout only, and every colour that carries meaning (flow status,
   trout classes, tiers, hazards, public land) is left as it was.
   Type: Barlow Condensed 700 for the wordmark and headings, Barlow
   for body and UI, IBM Plex Mono for flows, coordinates and data.
   ============================================================ */
:root{
  --ink:#1f1915;            /* Iron (app chrome) */
  --ink-2:#2e2620;
  --paper:#f4eee4;          /* Bone */
  --paper-2:#fffcf6;
  --line:#d6ccc0;
  --txt:#2a211b;
  --txt-dim:#5e534a;
  --river:#236b8f;          /* River */
  --river-dim:#a3c4d6;
  --saddle:#8b532f;          /* leather accent */
  --link:#985535;            /* Saddle, tuned for text */
  --flag:#e8590c;           /* survey flagging orange — live data only */
  /* flow status ramp: dry bank -> green -> blue -> red */
  --st-vlow:#8a5a2b;
  --st-low:#a98a2f;
  --st-avg:#2f7d4f;
  --st-high:#2563a8;
  --st-vhigh:#b3261e;
  --st-na:#7a857d;
  --radius:10px;
  --shadow:0 4px 18px rgba(31,25,21,.18);
  --sheet-h:62vh;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  font-family:"Barlow",system-ui,sans-serif;
  color:var(--txt);background:var(--paper);
  font-size:15px;line-height:1.45;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.disp{font-family:"Barlow Condensed","Barlow",sans-serif;letter-spacing:.02em}

/* ---------- App bar ---------- */
#appbar{
  position:fixed;inset:0 0 auto 0;z-index:1200;
  background:var(--ink);color:#f4eee4;
  display:flex;align-items:center;gap:10px;
  padding:max(8px,env(safe-area-inset-top)) 12px 8px 14px;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
#appbar h1{
  display:flex;align-items:center;gap:9px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:19px;line-height:1.05;letter-spacing:.04em;text-transform:uppercase;
}
/* The brand mark, in Bone. Stroke 11 of 108 units: the brand's 8.5–9 goes
   to mush below 2 px, and at 26 px tall that is where it would land. */
#appbar .brandmark{
  flex:0 0 auto;width:26px;height:26px;
  fill:none;stroke:var(--paper);stroke-width:11;stroke-linecap:round;stroke-linejoin:round;
}
#appbar .wordmark{display:block;min-width:0}
#appbar h1 small{
  display:block;font-family:"Barlow",system-ui,sans-serif;font-weight:500;
  font-size:10.5px;letter-spacing:.08em;color:#b3a596;text-transform:uppercase;margin-top:2px;
}
#appbar .spacer{flex:1}
/* On a phone the tagline took a second and third line — about a fifth of
   an iPhone screen. Title only. At 375 px the mark and the buttons leave
   too little for "TRAILWATERMAPS" on one line, so the name may break once,
   after "TRAILWATER" (the <wbr> in index.html; it is one word, so without
   it the line would clip): two tight lines fit inside the 38 px buttons,
   so the bar is no taller than one line would make it. */
@media (max-width:767px){
  #appbar{gap:8px}
  #appbar h1{min-width:0;flex:0 1 auto;gap:7px;font-size:16px;line-height:1;letter-spacing:.02em}
  #appbar .brandmark{width:24px;height:24px}
  #appbar h1 small{display:none}
}
#updated{
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:#b3a596;
  text-align:right;line-height:1.3;white-space:nowrap;
}
#updated b{color:var(--flag);font-weight:600}
.iconbtn{
  width:38px;height:38px;border-radius:9px;flex:0 0 auto;
  display:grid;place-items:center;background:var(--ink-2);color:#ece4d8;
  border:1px solid #4a3d33;font-size:17px;
}
.iconbtn:active{transform:scale(.94)}
.iconbtn[hidden]{display:none}
.iconbtn.spin svg{animation:spin 1s linear infinite}
/* Five header buttons (the account button made five) don't fit a phone at
   38 px with 8 px gaps: at 375 px the title would be cut. Up to 430 px wide
   (every iPhone, most Androids) they shrink to 34 px with 5 px gaps, and the
   spacer gives up its two gaps to an auto margin on the flows readout. */
@media (max-width:430px){
  #appbar{gap:5px;padding-left:12px;padding-right:10px}
  #appbar .spacer{display:none}
  #updated{margin-left:auto}
  #appbar .iconbtn{width:34px;height:34px}
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Filter chips ---------- */
#chips{
  position:fixed;z-index:1100;left:0;right:0;
  top:calc(54px + env(safe-area-inset-top));
  display:flex;gap:6px;overflow-x:auto;padding:8px 12px;
  scrollbar-width:none;
}
#chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:99px;padding:7px 13px;font-size:12.5px;font-weight:600;
  color:var(--txt-dim);box-shadow:0 1px 4px rgba(31,25,21,.12);
}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.6}

/* ---------- Map ---------- */
#map{position:fixed;inset:0;z-index:1}
.leaflet-control-attribution{font-size:9px}
/* the app bar floats over the map, so the top-left stack (Change Region, menus)
   needs clearance, and so do the top-right controls, or the Change Region button
   hides behind the title */
.leaflet-top.leaflet-left{margin-top:var(--appbar-h,94px)}
/* zoom lives bottom-right above the locate button: thumb-sized on touch,
   and 8px right margin so its 2px border lines up with the 44px locate dot */
.leaflet-control-zoom{margin:0 8px 10px 0 !important}
.leaflet-touch .leaflet-control-zoom a{width:44px;height:44px;line-height:44px;font-size:22px}
.leaflet-control-zoom.loc-hide{display:none}
.leaflet-top.leaflet-right{margin-top:calc(var(--appbar-h,94px) + 2px)}

/* ---------- flow animation ----------
   A dashed overlay stroke crawling downstream. The dash period is 31
   (5 on, 26 off) and every keyframe walks exactly one period, so the
   pattern is seamless and only the duration differs between speeds.
   Subtle on purpose: it should read as current, not as a barber pole. */
.flow-line{
  stroke-dasharray: 6 24;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation-name: flowdrift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: stroke-dashoffset;
}
/* Negative offset walks the pattern FORWARD along the path — checked against
   a straight left-to-right test path, not assumed. One whole period per
   cycle (6+24) so the loop is seamless. */
@keyframes flowdrift{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-30; } }

/* Speed carries the reading. Ungauged water gets `calm` — one neutral pace
   shared by all of it, never a stand-in for a number the app doesn't have. */
.flow-vlow  { animation-duration: 9.5s; opacity:.80; }
.flow-low   { animation-duration: 7.0s; opacity:.85; }
.flow-avg   { animation-duration: 5.0s; opacity:.90; }
.flow-high  { animation-duration: 3.4s; opacity:.95; }
.flow-vhigh { animation-duration: 2.2s; opacity:1;   }
.flow-calm  { animation-duration: 6.0s; opacity:.80; }

/* Someone who asks for less motion gets none: the layer is never built. */
@media (prefers-reduced-motion: reduce){
  .flow-line{ animation: none; display:none; }
}

/* ---------- lakes ----------
   Still water needs its own signal. Rivers drift downstream; a lake has no
   direction to point, so its outline breathes instead — slow enough to read
   as "water", never as "loading". */
.lake-shape{
  animation: lakeshimmer 7s ease-in-out infinite;
}
@keyframes lakeshimmer{
  0%,100%{ stroke-opacity:.55; stroke-width:1.8; }
  50%    { stroke-opacity:1;   stroke-width:2.8; }
}
@media (prefers-reduced-motion: reduce){
  .lake-shape{ animation:none; stroke-opacity:.9; }
}
.lake-label{
  transform:translate(-50%,-50%); white-space:nowrap; cursor:pointer;
  padding:2px 8px; border-radius:99px;
  background:rgba(14,95,114,.88); color:#eaf7fb;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.lake-label span{
  font:700 10.5px "Barlow Condensed",sans-serif;
  letter-spacing:.1em; text-transform:uppercase;
}
.lake-label::before{ content:"≈ "; opacity:.75; }

/* river labels */
/* River lines sit on a USGS topo sheet that is already full of thin blue
   hydrography, brown contours and black section lines. A soft white halo
   separates the coloured line from all of that without making it heavier —
   the cartographer's casing trick. One filter on the pane is far cheaper on
   a phone than giving 181 polylines a second casing path each.
   Pane selectors: map.createPane("riversPane") gets the class
   "leaflet-rivers-pane" — Leaflet drops "Pane" and wraps the rest — not
   "riversPane". Written the second way, this rule and the chooser's rules
   below silently matched nothing. */
.leaflet-rivers-pane > svg{
  filter: drop-shadow(0 0 1.6px rgba(255,255,255,.95))
          drop-shadow(0 0 3px rgba(255,255,255,.55));
}

.riv-label{
  background:none;border:none;box-shadow:none;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;
  color:#10405a;text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 8px #fff;
  white-space:nowrap;
}

/* access point markers — boat-ramp logo on a role-colored sign */
.ap{
  display:grid;place-items:center;width:28px;height:28px;border-radius:7px;
  color:#fff;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.45);
}
.ap svg{width:18px;height:18px;display:block}
.ap.launch{background:#1d7a46}
.ap.takeout{background:#8c4a1d}
.ap.both{background:var(--river)}
.ap.wade{background:#5b6e3a;border-radius:50%}
.ap.sel-put{outline:3px solid #1d7a46;outline-offset:2px;z-index:1000}
.ap.sel-take{outline:3px solid #8c4a1d;outline-offset:2px;z-index:1000}
/* tiny role corner tab so put-in vs take-out reads without arrows */
.ap.launch::after,.ap.takeout::after{
  content:"";position:absolute;top:-5px;right:-5px;width:11px;height:11px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.ap.launch::after{background:#3ad17a}   /* put-in: bright green dot */
.ap.takeout::after{background:#e8590c}  /* take-out: orange dot */
.ap{position:relative}

/* gauge dot on map */
.gdot{
  width:14px;height:14px;border-radius:50%;border:2.5px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.45);
}

/* ---------- Bottom sheet / side panel ---------- */
#sheet{
  position:fixed;z-index:1300;left:0;right:0;bottom:0;
  background:var(--paper);border-radius:18px 18px 0 0;
  box-shadow:0 -8px 30px rgba(31,25,21,.35);
  max-height:88vh;height:var(--sheet-h);
  transform:translateY(110%);transition:transform .28s cubic-bezier(.3,.9,.3,1);
  display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
#sheet.open{transform:translateY(0)}
#sheet.tall{height:88vh}
#grab{padding:9px 0 4px;display:grid;place-items:center;flex:0 0 auto;touch-action:none}
#grab::before{content:"";width:42px;height:5px;border-radius:3px;background:#c9bcab}
#sheetbody{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 14px 24px;flex:1}
#sheethead{display:flex;align-items:flex-start;gap:10px;padding:2px 14px 10px;border-bottom:1px solid var(--line);flex:0 0 auto}
#sheethead .swatch{width:14px;height:14px;border-radius:4px;margin-top:6px;flex:0 0 auto}
#sheethead h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:24px;line-height:1.05;text-transform:uppercase;letter-spacing:.02em}
#sheethead .sub{font-size:11.5px;color:var(--txt-dim);margin-top:2px}
#sheethead .x{margin-left:auto;width:32px;height:32px;border-radius:8px;background:#e8dfd2;color:var(--txt-dim);font-size:16px;flex:0 0 auto}

@media (min-width:900px){
  #sheet{left:auto;right:14px;bottom:14px;top:calc(110px + env(safe-area-inset-top));
    width:420px;height:auto !important;max-height:none;border-radius:14px;
    transform:translateX(120%);}
  #sheet.open{transform:translateX(0)}
  #grab{display:none}
}

/* ---------- Flow card (signature element: the staff gauge) ---------- */
.flowcard{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;margin:12px 0;box-shadow:0 1px 4px rgba(31,25,21,.08);
}
.flowcard .gname{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-dim)}
.flowrow{display:flex;align-items:baseline;gap:8px;margin-top:4px;flex-wrap:wrap}
.cfs{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:30px;color:var(--ink);line-height:1}
.cfs small{font-size:13px;color:var(--txt-dim);font-weight:500}
.badge{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;
  padding:4px 10px;border-radius:6px;
}
/* staff gauge bar */
.staff{position:relative;height:34px;margin:12px 2px 2px}
.staff .bar{position:absolute;left:0;right:0;top:14px;height:8px;border-radius:4px;
  background:linear-gradient(90deg,var(--st-vlow) 0 14%,var(--st-low) 14% 32%,var(--st-avg) 32% 58%,var(--st-high) 58% 80%,var(--st-vhigh) 80% 100%);opacity:.9}
.staff .tick{position:absolute;top:8px;width:2px;height:20px;background:var(--ink);opacity:.85}
.staff .tick::after{content:"median";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-dim);font-weight:700}
.staff .cur{position:absolute;top:4px;width:14px;height:14px;border-radius:50%;
  background:var(--flag);border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);
  transform:translateX(-50%);transition:left .5s ease}
.flowmeta{display:flex;gap:14px;margin-top:10px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--txt-dim);flex-wrap:wrap}
.flowmeta b{color:var(--txt);font-weight:600}
.plain{margin-top:10px;font-size:13px;background:var(--paper);border-radius:8px;padding:9px 10px;border:1px solid var(--line)}
.stale{margin-top:8px;font-size:11px;color:#92400e;background:#fef3c7;border:1px solid #fcd34d;border-radius:7px;padding:6px 9px}
.goodflow{margin-top:8px;font-size:12px;font-weight:600;border-radius:7px;padding:6px 9px}
.goodflow.in{color:#1e5a35;background:#e3f3e8;border:1px solid #bfe3cc}
.goodflow.out{color:#7a4a12;background:#fbeee0;border:1px solid #f0cfa6}
/* Water temperature under the flow number, and the trout-stress note in the
   warning amber (not survey orange, which is the live readout's alone). */
.wtemp{margin-top:6px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--txt-dim)}
.wtemp b{color:var(--ink);font-weight:600}
.tempwarn{margin-top:6px;font-size:12px;line-height:1.35;color:#92400e;background:#fef3c7;border:1px solid #fcd34d;border-radius:7px;padding:6px 9px}

/* Wind & weather (NWS hourly). Gauge-paper panel like the flow card; windy
   hours wear the warning amber, strong wind a darker brown-amber. Teal,
   orange, closure red and the trout-class colours are all spoken for. */
.wxcard{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;margin:12px 0;box-shadow:0 1px 4px rgba(31,25,21,.08)}
.wxcard .gname{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-dim)}
.wx-now{margin-top:5px;font-size:13px;line-height:1.4;color:var(--txt)}
.wx-now b{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--ink)}
.wx-dim{color:var(--txt-dim)}
.wx-wtxt.wx-w1{color:#92400e;font-weight:700}
.wx-wtxt.wx-w2{color:#5a2a06;font-weight:700}
/* six cells fit a phone; if they ever don't, the strip scrolls, not the page */
.wx-strip{display:flex;gap:4px;margin-top:9px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.wx-cell{flex:1 0 44px;text-align:center;background:var(--paper);border:1px solid var(--line);
  border-radius:7px;padding:5px 2px 4px;font-family:"IBM Plex Mono",monospace}
.wx-h{font-size:10px;font-weight:600;color:var(--txt-dim);text-transform:uppercase}
.wx-t{font-size:13px;font-weight:600;color:var(--ink);margin-top:1px}
.wx-wind{font-size:11px;color:var(--txt);margin-top:2px;white-space:nowrap}
.wx-wind small{display:block;font-size:8.5px;color:var(--txt-dim)}
.wx-pop{font-size:10px;color:var(--river);min-height:13px;margin-top:1px}
.wx-cell.wx-w1{background:#fef3c7;border-color:#fcd34d}
.wx-cell.wx-w1 .wx-wind{color:#92400e;font-weight:700}
.wx-cell.wx-w2{background:#f6c26b;border-color:#b45309}
.wx-cell.wx-w2 .wx-wind{color:#5a2a06;font-weight:700}
.wx-sum{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--txt)}
.wx-src{margin-top:6px;font-size:10.5px;line-height:1.35;color:var(--txt-dim)}
.wx-off{margin-top:5px;font-size:12.5px;color:var(--txt-dim)}

/* ---------- Sections list ---------- */
.secthead{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--txt-dim);
  margin:18px 0 8px;display:flex;align-items:center;gap:8px}
.secthead::after{content:"";flex:1;height:1px;background:var(--line)}
.sec{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 12px;margin-bottom:9px;
}
.sec .top{display:flex;align-items:center;gap:8px}
.sec h3{font-size:14.5px;font-weight:700;flex:1;line-height:1.25}
.klass{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  padding:3px 7px;border-radius:5px;border:1px solid;white-space:nowrap}
.k1{color:#1d7a46;border-color:#9fceb2;background:#eef8f1}
.k2{color:#946000;border-color:#e3c787;background:#fdf6e5}
.k3{color:#b3261e;border-color:#e3a09b;background:#fdeeed}
.k0{color:var(--txt-dim);border-color:var(--line);background:var(--paper)}   /* a section nobody has rated */
.sec .meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;font-size:12px;color:var(--txt-dim)}
.sec .meta b{color:var(--txt)}
.sec .time{font-family:"IBM Plex Mono",monospace}
.sec .est{font-size:10px;color:var(--txt-dim)}
.sec .beg{display:inline-block;font-size:10.5px;font-weight:700;color:#1d7a46;background:#eef8f1;border:1px solid #9fceb2;border-radius:5px;padding:2px 7px;margin-top:7px}
.sec .notes{margin-top:7px;font-size:12px;color:var(--txt-dim)}
/* A low-head dam on an Iowa section: the warning amber the stale-reading
   note uses, not red, which on this map means closed water. */
.sec .dam{margin-top:7px;font-size:12px;line-height:1.35;color:#92400e;background:#fef3c7;border:1px solid #fcd34d;border-radius:7px;padding:6px 9px}
.sec .dam b{color:#7a3608}
.sec .nofloat{margin-top:8px;font-size:11px;color:var(--txt-dim)}
/* Iowa water-trail designation, between the class line and the blurb */
.wtrow{margin:8px 2px 0;font-size:12px;line-height:1.4;color:var(--txt-dim)}
.wtrow b{color:var(--txt)}
.wtrow a{color:var(--link);font-weight:700;white-space:nowrap}
.sec .shuttle{margin-top:6px;font-size:11.5px;color:var(--txt-dim)}
.sec .shuttle b{color:var(--txt)}
.sec .zoom{margin-top:8px;font-size:12px;font-weight:700;color:var(--river)}
.fishnote{background:var(--paper-2);border:1px dashed var(--line);border-radius:var(--radius);padding:10px 12px;font-size:12.5px;color:var(--txt-dim);margin-bottom:9px}

/* ---------- Legend & modal ---------- */
#scrim{position:fixed;inset:0;z-index:1400;background:rgba(31,25,21,.5);display:none}
#scrim.show{display:block}
#legend{
  position:fixed;z-index:1500;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw,420px);max-height:82vh;overflow-y:auto;
  background:var(--paper);border-radius:14px;box-shadow:var(--shadow);
  padding:16px;display:none;
}
#legend.show{display:block}
#legend h2{font-family:"Barlow Condensed",sans-serif;font-size:20px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.lg-row{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:13px}
.lg-line{width:30px;height:4px;border-radius:2px;flex:0 0 auto}
.lg-note{font-size:11.5px;color:var(--txt-dim);margin:10px 0 4px}
#legend .x{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:8px;background:#e8dfd2;font-size:15px}
/* The key: swatch-led one-liners in a 2-column grid; the long notes live in the fold */
.lg-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:2px}
#legend > h2{margin-bottom:2px}
.lg-actions .rp-open{margin:0}
#legend h3.lg-h{font-family:"Barlow Condensed",sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--txt-dim);margin:12px 0 5px;padding-bottom:3px;border-bottom:1px solid var(--line)}
#legend h3.lg-h small{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:none}
.lg-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px}
.lg-ic{display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.2;min-width:0}
.lg-ic i{font-style:normal;color:var(--txt-dim);font-size:10.5px}
.lg-wide{margin-top:5px}
.lg-i{flex:0 0 28px;display:flex;align-items:center;justify-content:center;gap:1px}
.lg-i .ap{width:22px;height:22px;border-radius:6px;border-width:1.5px}
.lg-i .ap svg{width:14px;height:14px}
.lg-i .ap.wade{border-radius:50%}
.lg-i .gdot{width:12px;height:12px;border-width:2px}
.lg-i svg{flex:0 0 auto}
.lg-i.lg-multi{flex:0 0 auto;gap:0}
.lg-i.lg-multi svg{width:16px;height:16px;margin:0 -1px}
.lg-sw{flex:0 0 28px;height:4px;border-radius:2px;display:inline-block}
.lg-focus{background:var(--river);box-shadow:0 0 0 2px #e2b33c}
.lg-tape{flex:0 0 28px}
.lg-chips{display:flex;flex-wrap:wrap;gap:6px 14px}
.lg-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.lg-chip i{width:10px;height:10px;border-radius:50%}
#legend .lg-tight{margin:5px 0 0}
.lg-st{margin:4px 0;font-size:12px;gap:8px}
.lg-st .badge{flex:0 0 112px;text-align:center;font-size:12px;padding:3px 8px}
.lg-more{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.lg-more summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 12px;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;cursor:pointer;list-style:none;font-family:"Barlow Condensed",sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;-webkit-tap-highlight-color:transparent}
.lg-more summary::-webkit-details-marker{display:none}
.lg-more summary::after{content:"\25BE";font-size:16px;color:var(--txt-dim);transition:transform .15s}
.lg-more[open] summary::after{transform:rotate(180deg)}
.lg-more h2{font-size:16px}

/* offline pill */
#netpill{
  position:fixed;z-index:1250;left:50%;transform:translateX(-50%);
  bottom:max(14px,env(safe-area-inset-bottom));
  background:#3a2c12;color:#fcd34d;font-size:11.5px;font-weight:600;
  border-radius:99px;padding:7px 14px;box-shadow:var(--shadow);display:none;
}
#netpill.show{display:block}

/* skeleton shimmer */
.skel{position:relative;overflow:hidden;background:#e6ddd0;border-radius:6px;color:transparent !important}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:sh 1.2s infinite}
@keyframes sh{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}
:focus-visible{outline:3px solid var(--flag);outline-offset:2px}

/* ---------- zone picker ----------
   The opening chooser: coverage areas drawn over a country-wide view. Cards
   are plain DOM markers so they stay legible at zoom 4, where a Leaflet
   tooltip would be too small to read and too fiddly to tap. */
#btn-zones{
  font:700 12px "Barlow Condensed",sans-serif; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 11px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:var(--paper-2); color:var(--txt);
  box-shadow:0 1px 4px rgba(31,25,21,.2);
}
#btn-far{
  font:700 12px "Barlow Condensed",sans-serif; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 11px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:var(--paper-2); color:var(--txt);
  box-shadow:0 1px 4px rgba(31,25,21,.2);
}
#btn-far{ display:none; margin-top:6px; }
body.zones-open #btn-far{ display:block; }

#btn-zones:hover{ background:var(--paper); }

/* "Jump to…" — the named-area list that shares the Change Region control.
   Only while the chooser is up, beside the button rather than under it, so
   the Alaska button and the menus below don't move. Width is capped to what
   is left of a 375 px phone, height to half the screen, and it scrolls. */
.zonectl{ position:relative; }
#jump{ display:none; position:absolute; top:0; left:calc(100% + 6px);
       width:min(210px, calc(100vw - 168px)); }
body.zones-open #jump{ display:block; }
#jump-btn{
  font:700 12px "Barlow Condensed",sans-serif; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 11px; border-radius:9px; cursor:pointer; display:flex; align-items:center; gap:4px;
  border:1px solid var(--line); background:var(--paper-2); color:var(--txt);
  box-shadow:0 1px 4px rgba(31,25,21,.2);
}
#jump-btn .mcaret{ display:inline-block; margin-left:4px; transition:transform .15s; }
#jump-btn[aria-expanded="true"]{ background:var(--paper); }
#jump-btn[aria-expanded="true"] .mcaret{ transform:rotate(180deg); }
#jumplist{ margin-top:6px; background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:4px; box-shadow:var(--shadow); max-height:50vh; max-height:50dvh; overflow:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
#jumplist[hidden]{ display:none; }
#jumplist button{ display:block; width:100%; text-align:left; cursor:pointer;
  font:600 12.5px 'Barlow',system-ui,sans-serif; line-height:1.25; color:var(--txt);
  padding:8px 8px; min-height:36px; border-radius:8px; }
#jumplist button:hover, #jumplist button:active{ background:var(--paper-2); }
#jumplist .jl-group{ font:700 11px "Barlow Condensed",sans-serif; letter-spacing:.07em;
  text-transform:uppercase; color:var(--txt-dim); padding:10px 8px 3px;
  border-top:1px solid var(--line); margin-top:2px; }
#jumplist .jl-group:first-child{ border-top:0; margin-top:0; }

.zone-card{
  transform:translate(-50%,-50%);
  width:144px; text-align:center;
  padding:6px 9px; border-radius:10px;
  background:rgba(31,25,21,.92); color:#f4eee4;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 3px 10px rgba(0,0,0,.35);
  cursor:pointer; pointer-events:auto;
}
.zone-card:hover{ background:rgba(31,25,21,.99); border-color:rgba(255,255,255,.45); }
/* Only the parks carry a card now, and each wears a crest: the arrowhead
   silhouette reads as "national park" long before the name is legible. Laid
   out as a row so the badge doesn't make the card taller — layoutZoneCards()
   measures the card, so a taller one would reserve more space and drop out
   of tight zones sooner. */
.zone-card.park{ border-color:#d9a441; display:flex; align-items:center;
                 gap:7px; text-align:left; }
.zone-card.park .zc-text{ flex:1 1 auto; min-width:0; }
.zc-crest{ flex:0 0 auto; width:19px; height:23px; display:block;
           filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); }
.zone-card.tight .zc-crest{ width:15px; height:18px; }
.zone-card.mini  .zc-crest{ width:13px; height:16px; }
.zone-card.mini.park{ gap:5px; }
.zone-card.empty{ opacity:.72; }
.zc-label{ font:700 13px "Barlow Condensed",sans-serif; letter-spacing:.05em;
           text-transform:uppercase; line-height:1.15; }
.zc-count{ font:600 10.5px "IBM Plex Mono",monospace; color:#7fd4b4; margin-top:4px; }
.zc-short{ display:none; }
.zone-card.empty .zc-count{ color:#c8a94e; font-style:italic; }
/* A cell with no room for a full card gets a smaller one rather than a
   card shoved outside its own zone — the name staying inside the boundary
   matters more than the card keeping one size. */
.zone-card.tight{ width:104px; padding:4px 6px; border-radius:8px; }
.zone-card.tight .zc-label{ font-size:11px; letter-spacing:.03em; }
.zone-card.tight .zc-count{ font-size:9px; margin-top:2px; }
.zone-card.mini{ width:max-content; max-width:96px; padding:3px 6px; border-radius:7px; }
.zone-card.mini .zc-label{ display:none; }
.zone-card.mini .zc-short{ display:block; font:700 10px "Barlow Condensed",sans-serif;
                           letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.zone-card.mini .zc-count{ display:none; }
/* A named region that crosses state lines. Deliberately quiet — it is a
   place name on a map, not a control: no box, no shadow, nothing to tap. */
.region-label{
  transform:translate(-50%,-50%); text-align:center; white-space:nowrap;
  color:#1d3b4a; text-shadow:0 0 3px #fff, 0 0 6px #fff, 0 0 9px rgba(255,255,255,.9);
  pointer-events:none; user-select:none;
}
.region-label span{
  display:block; font:600 13px "Barlow Condensed",sans-serif;
  letter-spacing:.22em; text-transform:uppercase;
}
.region-label small{
  display:block; margin-top:1px; font:500 9px "IBM Plex Mono",monospace;
  letter-spacing:.14em; color:#4a6675;
}
.zone-tip{ font-family:"Barlow",system-ui,sans-serif; }

/* while the chooser is up, the river furniture would just be noise */
body.zones-open .leaflet-rivers-pane,
body.zones-open .leaflet-marker-pane,
body.zones-open .riv-label{ opacity:.25; transition:opacity .25s; }
/* …and they mustn't take the click either. Gauge dots and access markers
   live in Leaflet's marker pane at z-index 600, above the zone pane, so
   while the chooser is up a tap aimed at a zone was landing on whatever
   river furniture happened to be under it and opening that river's sheet.
   Zone cards are markers in zonePane, so they keep their clicks. */
body.zones-open .leaflet-rivers-pane,
body.zones-open .leaflet-land-pane,
body.zones-open .leaflet-allGauge-pane,
body.zones-open .leaflet-marker-pane,
body.zones-open .riv-label{ pointer-events:none; }
/* Leaflet marks every interactive marker and path pointer-events:auto, and
   a child that opts back in is hit-tested even when its pane says none —
   so the children have to be named too. */
body.zones-open .leaflet-marker-pane > *,
body.zones-open .leaflet-rivers-pane path,
body.zones-open .leaflet-land-pane path,
body.zones-open .leaflet-allGauge-pane path{ pointer-events:none !important; }
body.zones-open .leaflet-zone-pane{ opacity:1; }

/* Closed water — hazard tape over the river. The bar pulses very slightly so
   it reads as a warning rather than as map furniture; the dashes don't move,
   because a closure isn't going anywhere. */
.closed-bar{ animation: closedpulse 3.4s ease-in-out infinite; }
@keyframes closedpulse{ 0%,100%{ opacity:.24 } 50%{ opacity:.42 } }
.closed-line{ pointer-events: stroke; }
@media (prefers-reduced-motion: reduce){ .closed-bar{ animation:none; opacity:.34 } }

/* ---------- river classes ---------- */
#chipbar{margin-top:6px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.chipcol{display:flex;flex-direction:column;gap:4px}
/* menu buttons match #btn-zones; panels open under their button */
#chipbar .menubtn{font:700 13px "Barlow Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase;
  min-height:40px;padding:0 12px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:4px;
  border:1px solid var(--line);background:var(--paper-2);color:var(--txt);box-shadow:0 1px 4px rgba(31,25,21,.2)}
#chipbar .menubtn .mcaret{display:inline-block;margin-left:4px;transition:transform .15s}
#chipbar .menubtn[aria-expanded="true"] .mcaret{transform:rotate(180deg)}
#chipbar .menubtn[aria-expanded="true"]{background:var(--paper)}
#chipbar .menupanel{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:var(--shadow);max-height:calc(100vh - 330px);max-height:calc(100dvh - 330px);overflow:auto;
  -webkit-overflow-scrolling:touch}
#chipbar .menupanel[hidden]{display:none}
#chipbar .menupanel button{font:600 13px 'Barlow',system-ui,sans-serif;padding:0 12px;min-height:40px;min-width:150px;
  border-radius:9px;border:1px solid var(--line);background:var(--paper-2);color:var(--txt-dim);text-align:left;
  cursor:pointer}
#chipbar .menupanel button::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  border:2px solid var(--tc);margin-right:8px;vertical-align:-1px}
#chipbar .menupanel button.on{color:var(--txt);border-color:var(--tc)}
#chipbar .menupanel button.on::before{background:var(--tc)}
/* an option inside a chip ("Every USGS gauge" under Gauges): indented and a
   size smaller, so it reads as part of the chip above it, not a ninth chip */
#chipbar .menupanel button.sub{margin:-1px 0 2px 18px;min-width:132px;min-height:34px;font-size:12px}
#chipbar .menupanel button.sub[hidden]{display:none}

/* ---------- empty-map nudge (app.js "EMPTY-MAP NUDGE") ----------
   Teal, the water colour: survey orange is reserved for live data. The ring
   breathes outward; with reduced motion it is a still ring instead. */
#chipbar .menubtn.nudge{border-color:var(--river);animation:iconnudge 2.2s ease-out infinite}
@keyframes iconnudge{
  0%  {box-shadow:0 0 0 0 rgba(35,107,143,.55),0 1px 4px rgba(31,25,21,.2)}
  70% {box-shadow:0 0 0 10px rgba(35,107,143,0),0 1px 4px rgba(31,25,21,.2)}
  100%{box-shadow:0 0 0 0 rgba(35,107,143,0),0 1px 4px rgba(31,25,21,.2)}
}
@media (prefers-reduced-motion:reduce){
  #chipbar .menubtn.nudge{box-shadow:0 0 0 3px rgba(35,107,143,.45),0 1px 4px rgba(31,25,21,.2)}
}
body.touring #chipbar .menubtn.nudge{animation:none;box-shadow:0 1px 4px rgba(31,25,21,.2);border-color:var(--line)}
#icontip{position:fixed;z-index:1150;display:none;align-items:flex-start;background:var(--paper-2);color:var(--txt);
  border:1px solid var(--line);border-left:3px solid var(--river);border-radius:11px;box-shadow:var(--shadow)}
#icontip.show{display:flex}
body.touring #icontip,body.zones-open #icontip{display:none}
#icontip .it-text{flex:1;min-width:0;text-align:left;font-size:12.5px;line-height:1.35;color:var(--txt);padding:8px 2px 8px 10px}
#icontip .it-x{flex:0 0 auto;width:36px;height:36px;margin:2px 2px 0 0;border-radius:8px;color:var(--txt-dim);font-size:13px}
/* the pointer: left edge when beside the button, top edge when under it */
#icontip::before{content:"";position:absolute;left:-9px;top:50%;margin-top:-7px;
  border:7px solid transparent;border-left:0;border-right:7px solid var(--river)}
#icontip.below::before{left:22px;top:-9px;margin-top:0;border:7px solid transparent;border-top:0;border-bottom:7px solid var(--river)}

/* ---------- river focus (app.js "RIVER FOCUS") ----------
   An open river's sheet fades the rest of the water: one opacity on the
   rivers pane, not a restyle of every line. The open river is redrawn at
   full strength over a gold casing in its own pane (focusPane), so it isn't
   faded with them. Its current and its label keep full strength too. */
#map.rv-focus .leaflet-rivers-pane{opacity:.32}
#map.rv-focus .leaflet-flow-pane path:not(.rv-on){opacity:.25}
#map.rv-focus .riv-label:not(.rv-on){color:rgba(16,64,90,.42);text-shadow:0 0 3px rgba(255,255,255,.8)}
.leaflet-focus-pane > svg{filter:drop-shadow(0 1px 2px rgba(70,48,0,.35))}
.tier-sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.tierline{display:flex;align-items:flex-start;gap:8px;margin:10px 2px 0}
.tierbadge{flex:none;font:700 11px 'Barlow Condensed',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;color:#fff;background:var(--tc)}
.tierwhy{font-size:11.5px;color:var(--txt-dim);line-height:1.35}

.flowsrc{ font-size:10.5px; color:var(--txt-dim); margin-top:4px; letter-spacing:.02em; }

/* ---------- my location ----------
   Blue dot with a white ring: the same blue as the gauge dots, so the halo
   (a slow pulse nothing else on the map does) is what tells them apart.
   Teal for the button states — orange is live flow and red is closures. */
.loc-ctl{ margin:0 10px calc(14px + env(safe-area-inset-bottom)) 0; }
.loc-ctl.loc-hide, body.zones-open .loc-ctl{ display:none; }
#btn-locate{
  width:44px; height:44px; border-radius:50%; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--paper-2); color:var(--txt-dim);
  box-shadow:0 1px 4px rgba(31,25,21,.2);
}
#btn-locate:hover{ background:var(--paper); }
#btn-locate.located{ color:var(--river); border-color:var(--river); }
#btn-locate.following{ background:var(--river); border-color:var(--river); color:#fff; }
.loc-icon{ background:none; border:0; }
.loc-icon span{ position:absolute; left:50%; top:50%; pointer-events:none; }
.loc-core{
  width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  background:#1a73e8; border:3px solid #fff; box-sizing:border-box;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.loc-halo{
  width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  background:rgba(26,115,232,.35); animation:locpulse 2.4s ease-out infinite;
}
@keyframes locpulse{ from{transform:scale(1);opacity:.9} to{transform:scale(3.2);opacity:0} }
/* A wedge pointing up from the dot, turned to the heading from JS. */
.loc-wedge{
  display:none; width:0; height:0; margin:0 0 0 -7px;
  border-left:7px solid transparent; border-right:7px solid transparent;
  border-bottom:12px solid #1a73e8; transform-origin:7px 20px; top:calc(50% - 20px) !important;
}
#locpill{
  position:fixed;z-index:1260;left:50%;transform:translateX(-50%);
  bottom:max(70px,calc(56px + env(safe-area-inset-bottom)));max-width:90vw;text-align:center;
  background:var(--ink);color:#f4eee4;font-size:12px;font-weight:600;
  border-radius:99px;padding:7px 14px;box-shadow:var(--shadow);display:none;
}
#locpill.show{display:block}
/* One-time "show where you are?" ask. Over the map and chooser, under the
   sheet and the Field Book; the wrapper ignores taps so only the card takes them. */
#locask{
  position:fixed;z-index:1270;left:12px;right:12px;margin:0 auto;max-width:420px;
  bottom:calc(12px + env(safe-area-inset-bottom));display:none;gap:12px;align-items:flex-start;
  background:var(--paper);color:var(--txt);border:1px solid var(--line);border-radius:14px;
  padding:14px;box-shadow:var(--shadow);
}
#locask.show{display:flex}
#locask .la-ic{flex:none;width:38px;height:38px;border-radius:50%;background:var(--river);color:#fff;display:flex;align-items:center;justify-content:center}
#locask .la-ic svg{width:22px;height:22px}
#locask h3{font-family:"Barlow Condensed",sans-serif;font-size:20px;text-transform:uppercase;letter-spacing:.04em;line-height:1.1;margin-bottom:4px}
#locask p{font-size:13px;line-height:1.4;color:var(--txt-dim)}
#locask .la-btns{display:flex;gap:8px;margin-top:11px}
#locask .la-btns button{min-height:42px;padding:0 14px;border-radius:9px;font-size:14px;font-weight:600;background:#e8dfd2;color:var(--txt)}
#locask .la-btns #la-yes{flex:1;background:var(--river);color:#fff}

/* "Rules today" card — first thing in the sheet. Status dots are muted brick /
   amber / green / grey; the closure-tape red stays reserved for the map. */
.rulescard{background:var(--paper-2);border:1px dashed var(--line);border-radius:var(--radius);padding:10px 12px;margin:2px 0 9px}
.rc-status{display:flex;align-items:flex-start;gap:9px}
.rc-dot{flex:none;width:11px;height:11px;border-radius:50%;margin-top:3px}
.rc-head{font-size:14px;font-weight:700;color:var(--txt);line-height:1.25}
.rc-sub{font-size:11.5px;color:var(--txt-dim);line-height:1.35;margin-top:1px}
.rc-desig{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.rc-dsub{font-size:11.5px;color:var(--txt-dim);line-height:1.3}
.rc-dsub a{color:inherit;text-decoration:underline}
.rc-lic{font-size:12.5px;color:var(--txt);line-height:1.35;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.rc-tags{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:8px}
.rc-lab{font-size:10.5px;color:var(--txt-dim);flex-basis:100%}
/* No season row above it: the licence line leads, without a rule over it. */
.rc-lic.rc-lead{margin-top:0;padding-top:0;border-top:0}
.rc-desig + .rc-lic.rc-lead{margin-top:0}
/* Iowa low-head dams, in the card: the warning amber a dam on a section card
   wears, not red, which on this map means closed water. */
.rc-dam{margin-top:9px;font-size:12px;line-height:1.4;color:#92400e;background:#fef3c7;border:1px solid #fcd34d;border-radius:7px;padding:6px 9px}
.rc-dam a{color:#7a3608}
.rc-dam b{color:#7a3608}

/* The sheet's folds (Regulations, more gauges, the ungauged detail) share one
   summary row: thumb height, its own caret, teal like every other tap target. */
details.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:8px;
  min-height:40px;padding:10px 2px 6px;font-size:13px;font-weight:700;color:var(--river)}
details.fold>summary>span{min-width:0}    /* a long label wraps beside the caret, not under it */
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"\25B8";flex:none;width:12px;font-size:13px}
details.fold[open]>summary::before{content:"\25BE"}
details.rulesfull{margin-bottom:9px}
.rf-hint{font-size:11px;font-weight:500;color:var(--txt-dim)}
.rg-text{margin-top:8px;font-size:12px;line-height:1.45;color:var(--txt)}
.rg-sp{margin-top:4px}
.rg-sub{font-weight:700;color:var(--txt);margin:2px 0 4px}
.rg-src{font-size:10.5px;color:var(--txt-dim);margin-top:8px}
.rg-src a{color:var(--link)}
.rg-law{font-size:12px;line-height:1.4}
.rg-law blockquote{margin:6px 0 2px;padding-left:9px;border-left:2px solid var(--line);font-size:11.5px;line-height:1.4;color:var(--txt-dim)}
details.morefold{margin:-4px 0 6px}
/* Ungauged small-stream water: one line, the detail folded under it. */
.flowcard.ungauged{padding:10px 12px}
.ung-line{font-size:14px;font-weight:600;color:var(--txt);line-height:1.3}
.ung-more{margin-top:4px}
.ung-more>summary{font-size:12.5px;font-weight:500;min-height:36px;padding-top:8px}
/* The description: blurb, fishing note and wade tip, no headings between. */
.desc{margin:0 2px}
.desc .wtrow{margin:0 0 8px}
.desc p{font-size:13.5px;line-height:1.45;margin:0 0 9px}
.rp-search{margin-top:4px}

/* ---------- Field Book ---------- */
/* Row above the sheet body; buttons are 44px tall for a thumb. Teal marks
   "on" — orange stays reserved for live flow data. */
/* It may shrink and scroll: with Notes and Trips both open it can be taller
   than a 62vh sheet, and it must stay inside the sheet rather than run off it. */
#fbrow{flex:0 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 8px;border-bottom:1px solid var(--line)}
.fb-btn{min-height:44px;padding:0 12px;border-radius:var(--radius);border:1px solid var(--line);background:var(--paper-2);
  color:var(--txt-dim);font-size:13.5px;font-weight:600;white-space:nowrap;flex:1 1 auto}
.fb-btn.on{background:var(--river);border-color:var(--river);color:#fff}
.fb-btn.has{color:var(--river);border-color:var(--river-dim)}
.fb-btn:active{transform:scale(.97)}
.fb-ta{display:none;flex:1 0 100%;position:relative}
.fb-ta.show{display:block}
.fb-ta textarea{width:100%;min-height:76px;resize:vertical;font:inherit;font-size:16px;line-height:1.4;color:var(--txt);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:9px 10px}
.fb-ta textarea:focus{outline:2px solid var(--river-dim);border-color:var(--river)}
.fb-saved{position:absolute;right:10px;bottom:8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--river);pointer-events:none}
.fb-saved.warn{color:#8a2a24}   /* same red as .fbt-err: the note did not save */
.fb-links{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.fb-links a{display:flex;align-items:center;min-height:40px;padding:0 12px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--river);font-size:13px;font-weight:600;text-decoration:none}
.fb-note{font-size:10.5px;color:var(--txt-dim);margin:2px 0 4px}
/* Trips list under the row. It scrolls inside itself so a long history can't
   squeeze the sheet body to nothing; buttons stay 36px+ for a thumb. */
.fb-btn[hidden]{display:none}
.fb-trips{display:none;flex:1 0 100%;max-height:min(240px,32vh);overflow-y:auto;-webkit-overflow-scrolling:touch}
.fb-trips.show{display:block}
.fbt-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:6px 6px 6px 10px;margin-bottom:6px}
.fbt-main{flex:1 1 140px;min-width:0;display:flex;flex-direction:column;gap:1px}
.fbt-when{font-size:13px;font-weight:600;color:var(--txt)}
.fbt-note{font-size:12px;color:var(--txt-dim);line-height:1.35;overflow-wrap:anywhere}
/* Conditions saved with a trip: quieter than the note, and allowed to wrap —
   a forecast line runs past 375 px with a long NWS phrase in it. */
.fbt-cond{font-size:12px;color:var(--txt-dim);line-height:1.35;overflow-wrap:anywhere}
.fbt-acts{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto}
.fbt-ask{font-size:12.5px;font-weight:600;color:var(--txt)}
.fbt-btn{min-height:36px;padding:0 12px;border-radius:var(--radius);border:1px solid var(--line);background:var(--paper);
  color:var(--txt);font-size:13px;font-weight:600;white-space:nowrap}
.fbt-btn:active{transform:scale(.97)}
.fbt-primary{background:var(--river);border-color:var(--river);color:#fff}
.fbt-danger{background:#8a2a24;border-color:#8a2a24;color:#fff}
.fbt-addb{width:100%;min-height:40px;border-style:dashed;color:var(--river)}
.fbt-form{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px 8px;padding:2px 4px 2px 0}
.fbt-form label{display:flex;flex-direction:column;gap:2px;flex:1 1 130px;font-size:11px;font-weight:600;color:var(--txt-dim)}
.fbt-form label.fbt-wide{flex-basis:100%}
.fbt-form input{min-height:38px;font:inherit;font-size:16px;color:var(--txt);background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:0 8px;width:100%}
.fbt-form input:focus{outline:2px solid var(--river-dim);border-color:var(--river)}
.fbt-err{flex:1 0 100%;font-size:12px;color:#8a2a24;min-height:0}
.fbt-err:empty{display:none}
.fbt-form .fbt-acts{margin-left:0}
/* "Trip logged · Undo" — same look as Float Mode's toast, plus one action. */
#fbtoast{position:fixed;z-index:1340;left:50%;transform:translateX(-50%);bottom:max(80px,calc(70px + env(safe-area-inset-bottom)));max-width:92vw;
  background:var(--ink);color:#f4eee4;font-size:12.5px;font-weight:600;border-radius:99px;padding:4px 6px 4px 16px;box-shadow:var(--shadow);
  display:none;align-items:center;gap:10px;white-space:nowrap}
#fbtoast.show{display:flex}
#fbtoast button{min-height:36px;padding:0 14px;border-radius:99px;background:var(--ink-2);border:1px solid #4a3d33;color:var(--river-dim);font-weight:700;font-size:13px}
#fbtoast button[hidden]{display:none}
#fbtoast:has(button[hidden]){padding-right:16px}

#book{position:fixed;z-index:1600;inset:0;display:none;flex-direction:column;background:var(--paper);
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
#book.show{display:flex}
@media (min-width:900px){
  #book{inset:auto 14px 14px auto;top:calc(110px + env(safe-area-inset-top));width:420px;border-radius:14px;
    box-shadow:var(--shadow);overflow:hidden;padding:0}
}
#book-head{display:flex;align-items:center;gap:10px;padding:12px 14px 8px;background:var(--ink);color:#f4eee4;flex:0 0 auto}
#book-head h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:24px;line-height:1.05;text-transform:uppercase;letter-spacing:.04em}
#book-head .x{margin-left:auto;width:40px;height:40px;border-radius:9px;background:var(--ink-2);border:1px solid #4a3d33;color:#ece4d8;font-size:16px}
#book-tabs{display:flex;background:var(--ink);padding:0 8px;flex:0 0 auto}
#book-tabs button{flex:1;min-height:42px;padding:0 4px;font-size:13px;font-weight:600;color:#b3a596;border-bottom:3px solid transparent}
#book-tabs button.on{color:#fff;border-bottom-color:var(--river-dim)}
#book-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 14px 20px}
.bk-row{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;min-height:44px}
.bk-row:active{background:var(--paper)}
.bk-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bk-name{font-size:15px;font-weight:700;color:var(--txt);line-height:1.25}
.bk-place{font-size:11.5px;color:var(--txt-dim)}
.bk-fished{font-size:11.5px;font-weight:600;color:var(--river)}
.bk-snip{font-size:12.5px;color:var(--txt-dim);line-height:1.35;margin-top:2px}
.bk-full{font-size:13px;color:var(--txt);line-height:1.4;margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}
.bk-row .badge{flex:0 0 auto;margin-top:1px}
.bk-empty{text-align:center;color:var(--txt-dim);font-size:13.5px;line-height:1.5;padding:36px 18px}
.bk-intro{font-size:12.5px;color:var(--txt-dim);margin-bottom:12px}
.bk-res{background:var(--paper-2);border:1px dashed var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:10px}
.bk-res .bk-name{display:block;text-align:left;min-height:32px;margin-bottom:4px}
#book-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:10px 14px 12px;background:var(--paper)}
#book-foot p{font-size:10.5px;color:var(--txt-dim);margin-top:6px}
.bk-btns{display:flex;align-items:center;gap:8px}
.bk-btns button{min-height:40px;padding:0 16px;border-radius:var(--radius);border:1px solid var(--line);background:var(--paper-2);font-size:13.5px;font-weight:600}
#book-msg{font-size:11.5px;color:var(--txt-dim);min-width:0}

/* Stream-access law row in the Rules card; the quote folds away. */
.rc-law{margin-top:4px}
.rc-law summary{font-size:11.5px;color:var(--river);cursor:pointer;min-height:28px;display:flex;align-items:center}
.rc-law blockquote{margin:4px 0 6px;padding-left:9px;border-left:2px solid var(--line);font-size:11.5px;line-height:1.4;color:var(--txt-dim)}
.rc-law a{color:var(--link)}

/* Field Book: Offline tab */
.of-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:8px 0 4px}
.of-bar>i{display:block;height:100%;width:0;background:var(--river)}
.of-box{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin:10px 0}
.of-box input[type=text]{width:100%;min-height:40px;font-size:14px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);margin:6px 0}
.of-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.of-area{display:flex;align-items:center;gap:8px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px;margin-bottom:8px}
.of-area .of-main{flex:1;min-width:0}
.of-area b{display:block;font-size:13.5px;color:var(--txt)}
.of-area span{font-size:11.5px;color:var(--txt-dim)}
.of-area .fb-btn{min-height:40px;flex:0 0 auto}

/* All USGS gauges popup */
.ag-pop{min-width:190px}
.ag-pop .gname{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:2px}
.ag-pop .cfs{color:var(--flag)}
.ag-pop .ag-note{font-size:12px;color:var(--txt-dim);margin-top:4px}
.ag-pop a{display:inline-block;margin-top:6px;font-size:12px}
.tl-pop{max-width:250px}
.tl-title{font-weight:700;font-size:14px;margin-bottom:2px}
.tl-label{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--txt-dim);margin-top:8px}
.tl-warn{font-weight:600;margin-top:6px}
.hz-icon{background:none;border:0}
.hz-icon svg{display:block;overflow:visible}

/* ---------- Float Mode (js/float.js) ----------
   Two cards over the map: the planner and the live panel. Above the sheet
   (1300), below the scrim and the Field Book. Orange stays reserved for the
   live readout, which is the ETA here. */
.sec .floatbtns{display:flex;gap:8px;margin-top:8px}
.sec .floatbtns .zoom{flex:1;margin-top:0;display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;
  border:1px solid var(--river);border-radius:var(--radius);text-decoration:none;font-size:13px}
.sec .floatbtns .floatgo{background:var(--river);color:#fff}
.floatcard{
  position:fixed;z-index:1320;left:12px;right:12px;margin:0 auto;max-width:440px;
  bottom:calc(12px + env(safe-area-inset-bottom));display:none;
  background:var(--paper);color:var(--txt);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px 14px;box-shadow:var(--shadow);max-height:62vh;overflow-y:auto;
}
.floatcard.show{display:block}
@media (min-width:900px){ .floatcard{left:14px;right:auto;margin:0;bottom:14px;width:400px} }
.fp-head{display:flex;gap:10px;align-items:flex-start}
.fp-head>div{flex:1;min-width:0}
.fp-head h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:21px;line-height:1.1;text-transform:uppercase;letter-spacing:.02em}
.fp-head .x{width:40px;height:40px;border-radius:9px;background:#e8dfd2;color:var(--txt-dim);font-size:16px;flex:0 0 auto}
.fp-meta{font-size:12px;color:var(--txt-dim);margin-top:2px}
.fp-ends{font-size:12.5px;margin:8px 0;line-height:1.5}
.fp-ends .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:baseline}
.fp-ends .dot.put{background:#1d7a46}.fp-ends .dot.take{background:#8c4a1d}
.fp-ends .arrow{color:var(--txt-dim);margin:0 3px}
.fp-craft{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}   /* four crafts in the West, two on an Iowa water trail */
.fp-craft button{min-height:44px;padding:0 2px;border-radius:9px;border:1px solid var(--line);background:var(--paper-2);font-size:12.5px;font-weight:600}
.fp-craft button.on{background:var(--river);border-color:var(--river);color:#fff}
.fp-launch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 6px;font-size:13px;font-weight:600}
.fp-launch input{min-height:44px;font:inherit;font-size:16px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--paper-2);color:var(--txt)}
.fp-est{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:9px 12px;margin-bottom:8px}
.fp-big{font-size:21px;font-weight:600;color:var(--flag);line-height:1.2}
.fp-sub{font-size:12px;color:var(--txt-dim);margin-top:1px}
.fp-hist{font-size:12.5px;margin-top:6px}
.fp-small{font-size:10.5px;color:var(--txt-dim);margin-top:4px}
.fp-warn{background:#fbeeee;border:1px solid #e3b3b0;color:#8a2a24;border-radius:var(--radius);padding:8px 10px;font-size:12.5px;margin-bottom:8px}
.fp-btns,.fl-btns{display:flex;gap:8px;flex-wrap:wrap}
.fp-btns button,.fl-btns button,.fl-take button{flex:1;min-height:46px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--paper-2);font-size:14px;font-weight:700}
.fp-btns .go,.fl-btns .go,.fl-take .go{background:var(--river);border-color:var(--river);color:#fff}
.fp-btns .go{flex:1 1 100%}
.fp-btns button:disabled{opacity:.45}
.fl-btns .end{background:#3a1d1a;border-color:#3a1d1a;color:#fff}
.fl-head{display:flex;align-items:center;gap:8px}
.fl-title{flex:1;min-width:0;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.fl-min{width:44px;height:36px;border-radius:9px;background:#e8dfd2;color:var(--txt-dim);font-size:13px}
.fl-eta{display:flex;align-items:baseline;justify-content:space-between;margin:6px 0 4px}
.fl-eta .lbl{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-dim)}
.fl-eta .big{font-size:32px;font-weight:600;color:var(--flag);line-height:1}
.fl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0}
.fl-grid>div{background:var(--paper-2);border:1px solid var(--line);border-radius:9px;padding:6px 8px;display:flex;flex-direction:column}
.fl-grid span{font-size:15px;font-weight:600;color:var(--flag)}
.fl-grid i{font-style:normal;font-size:10.5px;color:var(--txt-dim)}
.fl-status{font-size:12.5px;color:var(--txt-dim);margin:4px 0}
.fl-status.warn{color:#8a2a24;font-weight:700}
.fl-take{display:flex;align-items:center;gap:10px;background:#eef8f1;border:1px solid #9fceb2;border-radius:var(--radius);padding:8px 10px;margin:6px 0;font-weight:700;font-size:13.5px}
.fl-take span{flex:1}.fl-take button{flex:0 0 auto}
.fl-wake{display:flex;align-items:center;gap:10px;min-height:40px;font-size:13px;font-weight:600}
.fl-wake input{width:22px;height:22px}
.fl-note{font-size:10.5px;color:var(--txt-dim);margin:4px 0 8px;line-height:1.4}
.floatcard.collapsed{padding:6px;max-height:none;gap:6px}
.floatcard.collapsed.show{display:flex}
.fl-pill{flex:1;display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:0 14px;border-radius:10px;background:var(--ink);color:#f4eee4;font-size:14px;font-weight:600}
.fl-pill .mono{color:#ffb27a}
.fl-pillend{min-height:46px;padding:0 14px;border-radius:10px;background:var(--river);color:#fff;font-weight:700;font-size:13.5px}
#floattoast{position:fixed;z-index:1340;left:50%;transform:translateX(-50%);bottom:max(80px,calc(70px + env(safe-area-inset-bottom)));max-width:90vw;
  background:var(--ink);color:#f4eee4;font-size:12.5px;font-weight:600;border-radius:99px;padding:8px 16px;box-shadow:var(--shadow);display:none;text-align:center}
#floattoast.show{display:block}
.fl-row .bk-main{gap:3px}
.fl-del{flex:0 0 auto;width:44px;height:44px;margin:-6px -8px -6px 0;border-radius:9px;font-size:24px;line-height:1;color:var(--txt-dim)}
.fl-del:active{background:#f0dcda;color:#8a2a24}

/* ---------- Lake trips (js/laketrip.js) ----------
   The planner and live panel reuse Float Mode's card (.floatcard, fp-*,
   fl-*); only what a lake adds is here. */
.lp-launch select{flex:1;min-width:0;max-width:72%;min-height:44px;font:inherit;font-size:16px;padding:0 8px;
  border:1px solid var(--line);border-radius:9px;background:var(--paper-2);color:var(--txt)}
.lp-craft{grid-auto-flow:row;grid-template-columns:repeat(6,1fr);margin-bottom:8px}   /* five crafts: three over two */
.lp-craft button{grid-column:span 2}
.lp-craft button:nth-child(4){grid-column:2 / span 2}
.lp-info{list-style:none;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;margin:0 0 10px;font-size:12.5px;line-height:1.4;color:var(--txt-dim)}
.lp-info li+li{margin-top:3px}
.lp-info b{color:var(--txt)}
.lt-status{font-size:12.5px;color:var(--txt-dim);margin:4px 0;line-height:1.4}
.lt-status .warn{color:#8a2a24;font-weight:700}
/* Start fishing in the lake's Field Book row: an action, not an on/off, so
   it is outlined in teal; filled while a trip runs; dimmed while a float does. */
.fb-btn.fb-lakego{color:var(--river);border-color:var(--river)}
.fb-btn.fb-lakego.on{background:var(--river);color:#fff}
.fb-btn.fb-lakego.busy{color:var(--txt-dim);border-color:var(--line);opacity:.7}
.fbt-track{font-size:12.5px;font-weight:600;color:var(--river);line-height:1.35;overflow-wrap:anywhere}
.fbt-fixed{flex:1 0 100%;font-size:12px;color:var(--txt-dim);line-height:1.35}

/* ---------- Report an issue ---------- */
#report,#account{position:fixed;z-index:1700;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);display:none;flex-direction:column;
  width:min(94vw,440px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);background:var(--paper);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
#report.show,#account.show{display:flex}
#report-head,#account-head{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;background:var(--ink);color:#f4eee4;flex:0 0 auto}
#report-head h2,#account-head h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.04em}
#report-head .x,#account-head .x{margin-left:auto;width:40px;height:40px;border-radius:9px;background:var(--ink-2);border:1px solid #4a3d33;color:#ece4d8;font-size:16px}
#report-body,#account-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 14px calc(16px + env(safe-area-inset-bottom))}
#report label{display:block;font-size:12px;font-weight:700;color:var(--txt-dim);margin:10px 0 4px}
#report input[type=text],#report input[type=email],#report textarea{width:100%;font:inherit;font-size:16px;color:var(--txt);background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;min-height:44px}
#report textarea{resize:vertical;min-height:110px}
.rp-note{font-size:11px;color:var(--txt-dim);margin-top:4px}
.rp-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
#rp-msg{font-size:12.5px;color:var(--st-vhigh);margin-top:10px;min-height:0}
#rp-actions{margin-top:12px}
#rp-send,.rp-close{width:100%;min-height:46px;border-radius:var(--radius);background:var(--river);color:#fff;font-size:15px;font-weight:700}
#rp-send:disabled{background:#b3a596}
#rp-off{font-size:12.5px;color:var(--txt-dim);text-align:center}
#rp-done p{font-size:15px;margin:6px 0 14px;overflow-wrap:anywhere}
.rp-link,.rp-open{min-height:40px;padding:0 4px;background:none;color:var(--link);font-size:12.5px;font-weight:600;text-decoration:underline}
.rp-open{display:block;margin:0 0 6px}
.rp-wrap{margin-top:12px;text-align:center}

/* ---------- Account (js/account.js) and the sign-in form (js/signin.js) ----------
   The sheet is the report form's card (grouped above). The .si- form is also
   used by admin.html, so it is styled by class, not under #account. */
.si-step label,.ac-form label{display:block;font-size:12px;font-weight:700;color:var(--txt-dim);margin:10px 0 4px}
.si-step input,.ac-form input{width:100%;font:inherit;font-size:16px;color:var(--txt);background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;min-height:44px}
.si-step input:disabled,.ac-form input:disabled{color:var(--txt-dim)}
.si-step[hidden]{display:none}
.si-codein{font-family:"IBM Plex Mono",ui-monospace,monospace !important;font-size:22px !important;letter-spacing:.35em;text-align:center}
.si-go{display:block;width:100%;min-height:46px;margin-top:12px;border-radius:var(--radius);background:var(--river);color:#fff;font-size:15px;font-weight:700}
.si-go:disabled{background:#b3a596}
.si-sent{font-size:13.5px;margin:2px 0 2px;overflow-wrap:anywhere}
.si-links{display:flex;justify-content:space-between;gap:8px;margin-top:6px}
.si-links button{min-height:40px;padding:0 4px;color:var(--link);font-size:13px;font-weight:600;text-decoration:underline}
.si-links button:disabled{color:var(--txt-dim);text-decoration:none}
.si-msg,.ac-msg{font-size:12.5px;color:var(--st-vhigh);margin-top:10px;overflow-wrap:anywhere}
.si-msg:empty,.ac-msg:empty{display:none}
.si-msg.ok,.ac-msg.ok{color:var(--st-avg)}
.ac-intro{font-size:13.5px;line-height:1.45;margin:2px 0 4px}
.ac-flash{font-size:13px;font-weight:600;color:#1f5a37;background:#e3eee2;border-radius:8px;padding:8px 10px;margin:2px 0 10px}
.ac-who{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin:2px 0 4px}
.ac-k{display:block;font-size:11px;font-weight:700;color:var(--txt-dim);text-transform:uppercase;letter-spacing:.06em}
.ac-email{display:block;font-size:15px;overflow-wrap:anywhere}
.ac-note{display:block;font-size:11px;color:var(--txt-dim);margin-top:2px}
.ac-inline{display:flex;gap:8px}
.ac-inline input{flex:1;min-width:0}
.ac-inline button{flex:0 0 auto;min-height:44px;padding:0 18px;border-radius:var(--radius);background:var(--river);color:#fff;font-weight:700}
.ac-inline button:disabled{background:#b3a596}
.ac-retry{min-height:32px;padding:0 4px;color:var(--link);font-weight:600;text-decoration:underline}
.ac-btn{display:block;width:100%;min-height:46px;margin-top:14px;border-radius:var(--radius);background:#e8dfd2;color:var(--txt);font-size:15px;font-weight:700}
.ac-danger{margin-top:18px;padding-top:8px;border-top:1px solid var(--line)}
.ac-dangerlink{min-height:40px;padding:0 4px;color:var(--st-vhigh);font-size:13px;font-weight:600;text-decoration:underline}
.ac-confirm{background:#fbeceb;border:1px solid #e3b6b2;border-radius:var(--radius);padding:10px 12px;margin-top:4px}
.ac-confirm[hidden]{display:none}
.ac-confirm p{font-size:13px;line-height:1.45;margin-bottom:8px}
.ac-confirm .ac-msg{margin:0 0 8px}
.ac-confirm-btns{display:flex;gap:8px}
.ac-confirm-btns button{flex:1;min-height:44px;border-radius:9px;font-weight:700;background:#e8dfd2;color:var(--txt)}
.ac-confirm-btns .ac-del-yes{background:var(--st-vhigh);color:#fff}
.ac-confirm-btns button:disabled{opacity:.6}
/* Signed in: a small dot on the person button. */
#btn-account{position:relative}
#btn-account.signed-in::after{content:"";position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;
  background:var(--river-dim);box-shadow:0 0 0 2px var(--ink-2)}

/* ---------- Welcome card + guided tour (js/tour.js) ----------
   Above everything (the Field Book is 1600, the report form 1700). The
   spotlight is one ring whose giant box-shadow dims the rest of the screen;
   #tour-block sits under it to swallow taps so the demo can't be driven. */
#welcome{position:fixed;inset:0;z-index:1800;display:none;align-items:center;justify-content:center;padding:16px;
  background:rgba(31,25,21,.62);overflow-y:auto}
#welcome.show{display:flex}
#welcome .wl-card{width:100%;max-width:420px;margin:auto;background:var(--paper);border-radius:16px;padding:20px 18px 16px;box-shadow:var(--shadow);border-top:4px solid var(--river)}
#welcome h2{font-family:"Barlow Condensed",sans-serif;font-size:26px;line-height:1.05;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);margin-bottom:10px}
#welcome p{font-size:14px;line-height:1.45;color:var(--txt);margin:0 0 10px}
#welcome .wl-btns{display:flex;flex-direction:column;gap:8px;margin-top:14px}
#welcome .wl-btns button{min-height:46px;border-radius:10px;font-size:15px;font-weight:700;background:#e8dfd2;color:var(--txt)}
#welcome .wl-btns #wl-go{background:var(--river);color:#fff}
#tour-block{position:fixed;inset:0;z-index:1810;display:none}
#tour-block.show{display:block}
#tour-block.dim{background:rgba(31,25,21,.62)}
#tour-ring{position:fixed;z-index:1820;display:none;pointer-events:none;border-radius:12px;
  box-shadow:0 0 0 9999px rgba(31,25,21,.62);outline:2px solid #fff;outline-offset:-1px}
@media (prefers-reduced-motion:no-preference){ #tour-ring{transition:left .18s,top .18s,width .18s,height .18s} }
#tour-tip{position:fixed;z-index:1830;display:none;background:var(--paper);color:var(--txt);border-radius:14px;
  padding:12px 14px 12px;box-shadow:var(--shadow);border-top:3px solid var(--river)}
#tour-tip.show{display:block}
#tour-tip .tt-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
#tour-tip .tt-n{font:600 11px "IBM Plex Mono",monospace;color:var(--txt-dim)}
#tour-tip .tt-end{min-height:40px;padding:0 4px 0 12px;font-size:12.5px;font-weight:600;color:var(--txt-dim)}
#tour-tip h3{font-family:"Barlow Condensed",sans-serif;font-size:21px;line-height:1.1;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
#tour-tip .tt-text{font-size:13.5px;line-height:1.4;color:var(--txt)}
#tour-tip .tt-extra{display:none;gap:8px;margin-top:10px}
#tour-tip .tt-extra button{flex:1;min-height:42px;border-radius:9px;font-size:14px;font-weight:600;background:#e8dfd2;color:var(--txt)}
#tour-tip .tt-nav{display:flex;gap:8px;margin-top:10px}
#tour-tip .tt-nav button{flex:1;min-height:44px;border-radius:9px;font-size:14.5px;font-weight:700;background:#e8dfd2;color:var(--txt)}
#tour-tip .tt-nav .tt-next{background:var(--river);color:#fff}
#tour-tip .tt-nav button:disabled{opacity:.4}
#tour-tip .tt-primary{background:var(--river) !important;color:#fff !important}