/* River Hatch - v1 */

:root{
  --bg:#faf8f4; --surface:#ffffff; --surface-2:#f4f1ea;
  --text:#1d2521; --muted:#6c7469; --faint:#9aa197;
  --line:#e4dfd4; --line-soft:#eeeae1;
  --accent:#2f6b4f; --accent-soft:#e6f0e9; --accent-text:#255a41; --on-accent:#ffffff;
  --river:#2d5f7c; --warn:#8a5f1a; --warn-soft:#fbf1dd;
  --shadow:0 1px 2px rgba(29,37,33,.05), 0 8px 24px rgba(29,37,33,.06);
  --shadow-sm:0 1px 2px rgba(29,37,33,.06);
  --radius:12px; --radius-sm:8px;
  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --c-dry:#b0751d; --c-emerger:#2b7f80; --c-nymph:#7a6234;
  --c-terrestrial:#4d8b3a; --c-streamer:#3a6fa0; --c-wet:#7a5a9a; --c-other:#6c7469;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#13161a; --surface:#1b1f24; --surface-2:#22272d;
    --text:#e9e7e2; --muted:#9aa199; --faint:#727a72;
    --line:#2b3138; --line-soft:#242a30;
    --accent:#6cbd93; --accent-soft:#1d2f27; --accent-text:#8ed3ac; --on-accent:#0e1f17;
    --river:#7fb3d1; --warn:#d9ab5e; --warn-soft:#2c2417;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --c-dry:#d8a04a; --c-emerger:#54b0b1; --c-nymph:#b39a5f;
    --c-terrestrial:#7dbb64; --c-streamer:#6fa3d4; --c-wet:#a98cc9; --c-other:#9aa199;
  }
}
:root[data-theme="dark"]{
  --bg:#13161a; --surface:#1b1f24; --surface-2:#22272d;
  --text:#e9e7e2; --muted:#9aa199; --faint:#727a72;
  --line:#2b3138; --line-soft:#242a30;
  --accent:#6cbd93; --accent-soft:#1d2f27; --accent-text:#8ed3ac; --on-accent:#0e1f17;
  --river:#7fb3d1; --warn:#d9ab5e; --warn-soft:#2c2417;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --c-dry:#d8a04a; --c-emerger:#54b0b1; --c-nymph:#b39a5f;
  --c-terrestrial:#7dbb64; --c-streamer:#6fa3d4; --c-wet:#a98cc9; --c-other:#9aa199;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;font-weight:600}
button{font:inherit;color:inherit}
[hidden]{display:none !important}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
/* The mayfly is landscape (roughly 4:3), not the square the old fish mark was.
   Height is fixed and width follows the artwork so it is never squashed. */
.brand-mark{display:flex;align-items:center;height:32px}
.brand-mark img{height:32px;width:auto}
/* Raster artwork cannot inherit currentColor, so there are two files and CSS
   picks one. Three states, matching the rest of the sheet: an explicit light
   choice, an explicit dark choice, and the system default with no attribute.

   Every selector below is scoped to .brand-mark deliberately. A bare
   ".mark-dark{display:none}" is one class and LOSES to ".brand-mark img",
   which is a class plus an element - so both marks rendered side by side. */
.brand-mark .mark-dark{display:none}
.brand-mark .mark-light{display:block}
:root[data-theme="dark"] .brand-mark .mark-light{display:none}
:root[data-theme="dark"] .brand-mark .mark-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-mark .mark-light{display:none}
  :root:not([data-theme="light"]) .brand-mark .mark-dark{display:block}
}
.brand-text{font-family:var(--serif);font-size:19px;letter-spacing:.01em;
  display:flex;flex-direction:column;line-height:1.08}
/* "FLY FISHING CO." - spelt correctly here. The supplied logo artwork has it
   as FISHINC, which is why the wordmark image is not used on the site; see
   docs/LOGO.md. */
.brand-text small{font:600 8.5px/1.5 var(--sans);letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:12px}
.badge-v{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:4px 10px;
}
.icon-btn{
  display:grid;place-items:center;width:34px;height:34px;
  background:none;border:1px solid var(--line);border-radius:9px;cursor:pointer;color:var(--muted);
}
.icon-btn:hover{color:var(--text);border-color:var(--muted)}
.icon-btn svg{width:17px;height:17px}

/* ---------- beta banner ---------- */
/* Deliberately the loudest thing on the page. It is a promise that rough edges
   are expected and a standing invitation to report them. */
.beta-bar{
  background:#f2b705;
  border-bottom:1px solid rgba(0,0,0,.16);
  color:#221a00;
}
.beta-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 24px}
.beta-tag{
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  background:#221a00;color:#f2b705;border-radius:4px;padding:3px 9px;flex:none;
}
.beta-text{font-size:13.5px;line-height:1.45}
.beta-text a{color:#221a00;font-weight:700;text-underline-offset:2px}
.beta-text a:hover{opacity:.7}
/* The bar is a fixed colour in both themes on purpose - a "beta" notice that
   quietly recedes in dark mode is not doing its job. */
@media (max-width:560px){
  .beta-in{padding:9px 16px;gap:8px}
  .beta-text{font-size:12.5px}
}
@media print{ .beta-bar{display:none} }

/* ---------- hero + search ---------- */
/* Wide enough that "Build your fly box…and take it with you." stays on one
   line rather than breaking mid-phrase. */
.hero{padding:56px 0 28px;max-width:860px}
.hero h1{font-family:var(--serif);font-size:40px;line-height:1.16;letter-spacing:-.01em;font-weight:400}
.hero h1 em{color:var(--accent-text);font-style:italic}
.hero-sub{margin:16px 0 0;color:var(--muted);font-size:14px}
.hero-sub strong{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

.searchbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.field{position:relative;display:flex}
.field-grow{flex:1 1 320px;min-width:240px}
.field-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--faint);pointer-events:none}
.field input,.field select{
  width:100%;background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 14px;font:inherit;outline:none;box-shadow:var(--shadow-sm);
}
.field input{padding-left:38px}
.field select{cursor:pointer;padding-right:32px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.result-count{margin:0 0 14px;font-size:13px;color:var(--muted)}
.empty{padding:48px 0;text-align:center;color:var(--muted)}

/* ---------- river cards ---------- */
.river-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding-bottom:64px}
.river-card{
  text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 17px;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:border-color .13s,transform .13s,box-shadow .13s;
}
.river-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.river-card h3{font-family:var(--serif);font-size:18px;font-weight:500;margin-bottom:3px}
.rc-meta{font-size:12px;color:var(--muted);display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.rc-desc{font-size:13px;color:var(--muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dot{color:var(--line)}
.pill{
  display:inline-block;font-size:11px;letter-spacing:.03em;
  background:var(--surface-2);border-radius:99px;padding:2px 8px;color:var(--muted);
}

/* ---------- river head ---------- */
.back{
  display:inline-flex;align-items:center;gap:5px;margin:24px 0 20px;
  background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;padding:0;
}
.back:hover{color:var(--accent-text)}
.back svg{width:15px;height:15px}
.river-head{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;margin-bottom:32px;box-shadow:var(--shadow-sm);
}
.river-head h1{font-family:var(--serif);font-size:32px;font-weight:400;letter-spacing:-.01em}
.rh-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 14px;font-size:13px;color:var(--muted)}
.rh-desc{font-size:15px;line-height:1.6;color:var(--text);max-width:78ch;margin:0 0 14px}
.rh-long{font-size:14px;line-height:1.65;color:var(--muted);max-width:78ch;margin:0 0 16px}
.rh-facts{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:14px}
.fact-k{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin-bottom:2px}
.fact-v{font-size:13px;color:var(--text)}

/* ---------- months ---------- */
.sec-h{font-family:var(--serif);font-size:20px;font-weight:500;margin-bottom:12px}
.months{margin-bottom:34px}
.month-strip{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.mo{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 4px;cursor:pointer;text-align:center;transition:all .12s;
}
.mo-ab{font-size:13px;font-weight:600;letter-spacing:.02em}
.mo-n{font-size:10px;color:var(--faint);margin-top:2px}
.mo:hover:not(.is-closed){border-color:var(--accent);color:var(--accent-text)}
.mo.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mo.is-on .mo-n{color:var(--on-accent);opacity:.72}
.mo.is-best{border-color:var(--accent);border-style:dashed}
.mo.is-on.is-best{border-style:solid}
.mo.is-closed{opacity:.4;cursor:not-allowed;background:var(--surface-2)}
.month-note{margin:11px 0 0;font-size:12.5px;color:var(--muted)}
.month-note b{color:var(--text);font-weight:600}

/* ---------- box ---------- */
.box-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.box-sub{margin:2px 0 0;font-size:13px;color:var(--muted)}
.tiers{display:flex;gap:4px;background:var(--surface-2);border-radius:10px;padding:4px}
.tier{
  background:none;border:none;border-radius:7px;padding:7px 15px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--muted);transition:all .12s;white-space:nowrap;
}
.tier:hover{color:var(--text)}
.tier.is-on{background:var(--surface);color:var(--accent-text);box-shadow:var(--shadow-sm)}
.tier small{display:block;font-size:10.5px;font-weight:400;color:var(--faint);margin-top:1px}
.tier.is-on small{color:var(--muted)}

.layout{display:grid;grid-template-columns:1fr 306px;gap:26px;align-items:start;padding-bottom:80px}
.toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.toolbar-l,.toolbar-r{display:flex;gap:8px;flex-wrap:wrap}
.btn{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:8px 13px;font-size:13px;cursor:pointer;transition:all .12s;box-shadow:var(--shadow-sm);
}
.btn:hover{border-color:var(--muted)}
.btn-quiet{background:none;box-shadow:none;color:var(--muted)}
.btn-quiet:hover{color:var(--text)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.07);border-color:var(--accent)}

.cat-group{margin-bottom:26px}
.cat-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.cat-swatch{width:9px;height:9px;border-radius:2px;flex:none}
.cat-name{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.cat-count{font-size:12px;color:var(--faint)}

.fly{
  display:flex;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 15px;margin-bottom:7px;
  border-left:3px solid var(--cat,var(--c-other));transition:border-color .12s,opacity .12s;
}
.fly.is-off{opacity:.44}
.fly-check{flex:none;padding-top:1px}
.fly-check input{width:17px;height:17px;cursor:pointer;accent-color:var(--accent)}
.fly-thumb{
  flex:none;width:62px;height:62px;padding:0;cursor:zoom-in;
  background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:9px;overflow:hidden;display:block;
  transition:border-color .12s,transform .12s;
}
.fly-thumb:hover{border-color:var(--accent);transform:scale(1.04)}
.fly-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Placeholder art is line work on a light ground; ease it back so it reads as
   a waiting state rather than a photograph, and keep it legible in dark mode. */
.fly-thumb.is-ph{cursor:default;background:var(--surface-2)}
.fly-thumb.is-ph:hover{border-color:var(--line);transform:none}
.fly-thumb.is-ph img{object-fit:contain;opacity:.62;mix-blend-mode:multiply}
:root[data-theme="dark"] .fly-thumb.is-ph img{mix-blend-mode:normal;opacity:.5}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .fly-thumb.is-ph img{mix-blend-mode:normal;opacity:.5}
}
.fly-body{flex:1;min-width:0}
.fly-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.fly-name{font-size:15px;font-weight:600}
.fly-imit{font-size:12.5px;color:var(--muted)}
.fly-sizes{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.sz{
  font:11.5px/1 var(--mono);background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:5px;padding:4px 6px;color:var(--muted);
}
.sz.is-rec{background:var(--accent-soft);border-color:transparent;color:var(--accent-text);font-weight:600}
.fly-skus{margin-top:8px;font:11px/1.5 var(--mono);color:var(--faint);word-break:break-all}
/* Bead head option, offered on the nymphs tied both ways. */
.bead-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px;
  padding-top:9px;border-top:1px dashed var(--line)}
.bead-label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);margin-right:2px}
.bead-note{width:100%;margin-top:2px}
.bead-btn{
  background:none;border:1px solid var(--line);border-radius:99px;
  padding:4px 11px;font-size:11.5px;cursor:pointer;color:var(--muted);
  white-space:nowrap;transition:all .12s;
}
.bead-btn:hover{border-color:var(--accent);color:var(--accent-text)}
.bead-btn.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.bead-note{font-size:11.5px;color:var(--faint)}
.colour-tag{
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  border:1px solid var(--line);color:var(--muted);
  border-radius:4px;padding:2px 5px;margin-left:7px;vertical-align:1px;
}
.bead-tag{
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  background:var(--accent-soft);color:var(--accent-text);border-radius:4px;padding:2px 5px;margin-left:6px;
}

.prio{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:99px;padding:2px 7px}
.prio.p1{color:var(--accent-text);border-color:var(--accent)}

/* ---------- side rail ---------- */
.col-side{position:sticky;top:80px;display:flex;flex-direction:column;gap:16px}
.tally{
  background:var(--accent-soft);border:1px solid transparent;border-radius:var(--radius);padding:16px 18px;
}
.tally-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.tally-row:last-child{margin-bottom:0}
.tally-k{font-size:12.5px;color:var(--accent-text);opacity:.85}
.tally-v{font-family:var(--serif);font-size:25px;color:var(--accent-text);font-variant-numeric:tabular-nums}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow-sm)}
.card h3{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.hatch{padding:8px 0;border-top:1px solid var(--line-soft);font-size:13px}
.hatch:first-of-type{border-top:none;padding-top:0}
.hatch.is-now{border-left:2px solid var(--accent);padding-left:9px;margin-left:-11px}
.hatch-n{font-weight:600}
.hatch-m{color:var(--muted);font-size:12px;margin-top:1px}
.hatch-note{color:var(--faint);font-size:12px;margin-top:3px;font-style:italic}
.tip{padding:9px 0;border-top:1px solid var(--line-soft);font-size:13px;line-height:1.5}
.tip:first-of-type{border-top:none;padding-top:0}
.tip-h{font-weight:600;margin-bottom:2px}
.tip-b{color:var(--muted)}
.why{color:var(--muted);font-size:12.5px;font-style:italic;margin-top:5px}
.disclaimer{
  background:var(--warn-soft);border:1px solid transparent;border-radius:var(--radius);
  padding:13px 15px;font-size:12.5px;line-height:1.55;color:var(--warn);
}
.disclaimer b{display:block;margin-bottom:3px;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}

/* ---------- top nav ---------- */
.topnav{display:flex;gap:2px;margin-left:auto;margin-right:14px}
.navlink{
  background:none;border:none;border-radius:8px;padding:7px 13px;cursor:pointer;
  font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:6px;
}
.navlink:hover{color:var(--text);background:var(--surface-2)}
.navlink.is-on{color:var(--accent-text);background:var(--accent-soft);font-weight:500}
.nav-count{
  font-size:10.5px;font-weight:700;background:var(--accent);color:var(--on-accent);
  border-radius:99px;padding:1px 6px;min-width:17px;text-align:center;
}
.acct-btn{display:flex;align-items:center;gap:7px}
.acct-btn svg{width:16px;height:16px}
.acct-btn.is-in{color:var(--accent-text)}
.hero-tight{padding:40px 0 22px}

/* ---------- account form ---------- */
.acct-wrap{max-width:720px;padding-bottom:80px}
.fieldset{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow-sm);
}
.fieldset h3{
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px;
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:flex;flex-direction:column;gap:5px}
.fld-wide{grid-column:1 / -1}
.fld > span{font-size:12.5px;font-weight:500;color:var(--text)}
.fld input,.fld select{
  background:var(--bg);color:var(--text);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 12px;font:inherit;outline:none;width:100%;
}
.fld select{cursor:pointer}
.fld input:focus,.fld select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fld input.bad,.fld select.bad{border-color:#c0392b}
:root[data-theme="dark"] .fld input.bad,:root[data-theme="dark"] .fld select.bad{border-color:#e07a6d}
.fld small{font-size:11.5px;color:var(--faint);line-height:1.45}
.err{font-size:11.5px;color:#c0392b;font-style:normal;min-height:0}
:root[data-theme="dark"] .err{color:#e07a6d}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .err{color:#e07a6d}
  :root:not([data-theme="light"]) .fld input.bad,
  :root:not([data-theme="light"]) .fld select.bad{border-color:#e07a6d}
}
.field-block{display:block;margin-bottom:12px}
.field-block input{
  width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:9px 11px;font:inherit;outline:none;
}
.field-block input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.privacy{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;font-size:12.5px;line-height:1.55;color:var(--muted);margin-bottom:18px;
}
.privacy b{display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.06em;
  font-size:10.5px;color:var(--text)}
.gate-note{
  background:var(--warn-soft);border-radius:var(--radius);padding:13px 16px;
  font-size:13px;line-height:1.5;color:var(--warn);margin-bottom:16px;
}
/* ---------- auth states ---------- */
.check-mail{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;text-align:center;box-shadow:var(--shadow-sm);max-width:520px;
}
.cm-ico{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;
  border-radius:50%;background:var(--accent-soft);color:var(--accent-text)}
.cm-ico svg{width:25px;height:25px}
.check-mail h2{font-family:var(--serif);font-size:24px;font-weight:500;margin-bottom:10px}
.check-mail p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 10px;max-width:42ch;
  margin-left:auto;margin-right:auto}
.check-mail p b{color:var(--text)}
.cm-small{font-size:12.5px !important;color:var(--faint) !important}
.check-mail .acct-actions{justify-content:center;margin-top:18px}

.signed-in{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--accent-soft);border-radius:var(--radius);
  padding:11px 16px;margin-bottom:18px;font-size:13.5px;color:var(--accent-text);
}
.si-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.si-text{flex:1;min-width:150px}
.si-text b{font-weight:600}
.signed-in .btn{background:var(--surface)}

/* ---------- sign in ---------- */
.signin-panel{max-width:480px}
.signin-panel .fieldset{margin-bottom:14px}
.panel-lead{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 16px;max-width:44ch}
.signin-panel .fld{margin-bottom:16px}
.switch-line{
  font-size:13.5px;color:var(--muted);margin:16px 0 0;
  padding-top:14px;border-top:1px solid var(--line-soft);
}

/* ---------- consent ---------- */
.consent{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:18px;box-shadow:var(--shadow-sm);
}
.consent-row{display:flex;gap:11px;align-items:flex-start;padding:9px 0;
  font-size:13.5px;line-height:1.5;cursor:pointer}
.consent-row + .consent-row{border-top:1px solid var(--line-soft)}
.consent-row input{margin-top:3px;width:17px;height:17px;flex:none;
  accent-color:var(--accent);cursor:pointer}
.consent-row .req{display:inline-block;font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);
  background:var(--accent-soft);border-radius:4px;padding:2px 6px;margin-left:6px}
.consent-row .opt{display:block;font-style:normal;font-size:11.5px;color:var(--faint);margin-top:3px}
.consent .err{display:block;padding-left:28px;margin-top:-4px}
.linkish{
  background:none;border:none;padding:0;font:inherit;cursor:pointer;
  color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;
}
.linkish:hover{opacity:.75}

/* ---------- legal pages ---------- */
.legal{max-width:760px;padding-bottom:80px}
.legal h1{font-family:var(--serif);font-size:34px;font-weight:400;margin-bottom:6px}
.legal h2{font-family:var(--serif);font-size:20px;font-weight:500;margin:30px 0 8px}
.legal h3{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:22px 0 7px}
.draft-note a{color:var(--accent-text);text-underline-offset:2px}
.legal p,.legal li{font-size:14.5px;line-height:1.65;color:var(--text);max-width:70ch}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal li{margin-bottom:6px}
.legal-meta{font-size:12.5px !important;color:var(--muted) !important;margin-bottom:20px !important}
.legal em{color:var(--muted)}
.legal-table{border-collapse:collapse;width:100%;margin:0 0 16px;font-size:13.5px}
.legal-table th,.legal-table td{text-align:left;padding:9px 12px;border:1px solid var(--line);vertical-align:top}
.legal-table th{background:var(--surface-2);font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.legal-callout{
  background:var(--warn-soft);border:1px solid var(--warn);border-radius:var(--radius);
  padding:16px 20px;margin:22px 0;
}
.legal-callout b{display:block;font-size:15px;color:var(--warn);margin-bottom:8px}
.legal-callout p,.legal-callout li{color:var(--warn)}
.legal-callout ul{margin-bottom:0}
.draft-note{
  background:var(--surface-2);border-left:3px solid var(--muted);border-radius:var(--radius-sm);
  padding:14px 16px;margin-bottom:26px;font-size:13px;line-height:1.55;color:var(--muted);
}
.draft-note b{display:block;color:var(--text);margin-bottom:4px}
.draft-note b + b{display:inline;margin:0}

/* ---------- footer ---------- */
.sitefoot{border-top:1px solid var(--line);margin-top:40px;padding:22px 0 34px}
.sitefoot-in{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.foot-brand{font-family:var(--serif);font-size:15px;color:var(--muted)}
.foot-links{display:flex;gap:16px;font-size:13px}
.foot-note{flex:1;min-width:220px;text-align:right;font-size:12px;color:var(--faint)}
@media (max-width:640px){ .foot-note{text-align:left} }
@media print{ .sitefoot{display:none} }

.acct-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.btn-lg{padding:11px 22px;font-size:14px}
.btn-danger{color:#c0392b}
.acct-actions .btn-danger{margin-left:auto}
/* Gated actions stay clickable - clicking is how you find out why. */
.btn.is-locked{color:var(--faint)}
.btn.is-locked::before{content:"";display:inline-block;width:11px;height:11px;margin-right:6px;
  vertical-align:-1px;background:currentColor;
  -webkit-mask:var(--lock) center/contain no-repeat;mask:var(--lock) center/contain no-repeat}
.btn-primary.is-locked{color:var(--on-accent);opacity:.85}
:root{--lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E")}
.btn-danger:hover{color:#c0392b;border-color:#c0392b}
:root[data-theme="dark"] .btn-danger{color:#e07a6d}

/* ---------- editing an existing box ---------- */
.edit-banner{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:var(--radius);padding:12px 16px;margin-bottom:20px;
}
.edit-ico{display:grid;place-items:center;color:var(--accent-text);flex:none}
.edit-ico svg{width:17px;height:17px}
.edit-text{flex:1;min-width:180px;font-size:13.5px;color:var(--accent-text)}
.edit-text b{font-weight:600}
.edit-banner .btn{background:var(--surface);flex:none}

/* ---------- build a box ---------- */
.box-panel h3{margin-bottom:12px}
.picked-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.picked{
  display:flex;align-items:center;gap:9px;background:var(--surface-2);
  border-radius:8px;padding:7px 9px;font-size:12.5px;
}
.picked-n{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picked-s{font:11px var(--mono);color:var(--muted);flex:none}
.picked-x{
  flex:none;width:20px;height:20px;display:grid;place-items:center;border:none;
  background:none;color:var(--faint);cursor:pointer;border-radius:5px;font-size:15px;line-height:1;
}
.picked-x:hover{color:#c0392b;background:var(--surface)}
.picked-empty{font-size:12.5px;color:var(--faint);line-height:1.5;margin:0 0 12px}
.tally-tight{padding:12px 14px;margin-bottom:12px}
.panel-actions{display:flex;flex-direction:column;gap:7px}
.panel-actions .btn{width:100%;text-align:center}

.bfly{
  display:flex;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 15px;margin-bottom:7px;
  border-left:3px solid var(--cat,var(--c-other));
}
.bfly.is-in{border-color:var(--accent);background:var(--accent-soft)}
.bfly-body{flex:1;min-width:0}
.bfly-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.bfly-name{font-size:15px;font-weight:600}
.bfly-add{flex:none;align-self:center}
.sz-pick{
  font:11.5px/1 var(--mono);background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:5px;padding:5px 7px;color:var(--muted);cursor:pointer;
}
.sz-pick.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.sz-bulk{display:inline-flex;gap:2px;margin-left:4px}
.sz-bulk button{
  background:none;border:none;cursor:pointer;color:var(--muted);
  font-size:11.5px;padding:4px 6px;border-radius:5px;text-decoration:underline;
  text-underline-offset:2px;
}
.sz-bulk button:hover{color:var(--accent-text);background:var(--surface-2)}
.sz-tally{font-size:11px;color:var(--faint);align-self:center;margin-left:auto;white-space:nowrap}

/* ---------- saved boxes ---------- */
.sbox{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:10px;box-shadow:var(--shadow-sm);
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}
.sbox-main{flex:1;min-width:200px}
.sbox-n{font-family:var(--serif);font-size:18px;font-weight:500}
.sbox-m{font-size:12.5px;color:var(--muted);margin-top:3px}
.sbox-acts{display:flex;gap:7px;flex-wrap:wrap}
.kind{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;
  border-radius:99px;border:1px solid var(--line);color:var(--muted);
}
.kind.k-river{color:var(--accent-text);border-color:var(--accent)}
/* ---------- quantity editor ---------- */
.lb-wide{max-width:620px}
.lb-wide h3{font-family:var(--serif);font-size:21px;font-weight:500;margin-bottom:4px}
.qty-bulk{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface-2);border-radius:9px;padding:10px 12px;margin-bottom:12px;font-size:13px;
}
.qty-fill{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qty-fill-lead{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.qty-bulk label{display:flex;align-items:center;gap:7px;color:var(--muted)}
.qty-bulk input{
  width:58px;background:var(--bg);color:var(--text);border:1px solid var(--line);
  border-radius:6px;padding:6px 8px;font:inherit;text-align:center;
}
.qty-hint{font-size:11.5px;color:var(--faint);margin-left:auto}
.qty-list{
  max-height:44vh;overflow-y:auto;border:1px solid var(--line);border-radius:10px;
  padding:4px;margin-bottom:14px;
}
.qty-row{display:flex;gap:11px;align-items:center;padding:9px 8px;border-bottom:1px solid var(--line-soft)}
.qty-row:last-child{border-bottom:none}
.qty-thumb{
  flex:none;width:38px;height:38px;border-radius:7px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line-soft);
}
.qty-thumb img{width:100%;height:100%;object-fit:contain;display:block;opacity:.62}
.qty-name{flex:1;min-width:0}
.qty-n{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qty-c{font-size:11.5px;color:var(--faint)}
.qty-sizes{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;flex:none}
.qty-cell{display:flex;flex-direction:column;align-items:center;gap:3px}
.qty-cell span{font:10.5px var(--mono);color:var(--muted)}
.qty-cell input{
  width:46px;background:var(--bg);color:var(--text);border:1px solid var(--line);
  border-radius:6px;padding:5px 4px;font:inherit;font-size:13px;text-align:center;
}
.qty-cell input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.qty-cell.is-zero input{color:var(--faint);background:var(--surface-2)}
.qty-foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.qty-foot .tally{flex:1;min-width:190px;margin:0}
.qty-foot .tally-row{margin-bottom:2px}
.qty-foot .tally-v{font-size:19px}
@media (max-width:560px){
  .qty-row{flex-wrap:wrap}
  .qty-sizes{justify-content:flex-start;width:100%}
}

.lb-narrow{max-width:420px}
.lb-narrow h3{font-family:var(--serif);font-size:21px;font-weight:500;margin-bottom:4px}
.sv-sub{font-size:13px;color:var(--muted);margin:0 0 14px}
.sv-choice{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.sv-opt{
  display:flex;gap:9px;align-items:flex-start;background:var(--surface-2);
  border:1px solid transparent;border-radius:9px;padding:10px 12px;cursor:pointer;font-size:13px;
}
.sv-opt.is-on{border-color:var(--accent);background:var(--accent-soft)}
.sv-opt input{margin-top:2px;accent-color:var(--accent)}
.sv-opt b{display:block;font-weight:600}
.sv-opt span{color:var(--muted);font-size:12px}
#saveDlg .fld{margin-bottom:16px}

@media (max-width:860px){
  .grid-2{grid-template-columns:1fr}
  .topnav{margin-right:6px}
  .navlink{padding:7px 9px;font-size:12.5px}
  .acct-btn span{display:none}
}
/* Below this the four header items cannot share one row. Drop the wordmark and
   let the nav scroll rather than pushing the page sideways. */
@media (max-width:640px){
  .brand-text{display:none}
  .topnav{flex:1 1 auto;min-width:0;overflow-x:auto;margin-left:8px;
    scrollbar-width:none;-ms-overflow-style:none}
  .topnav::-webkit-scrollbar{display:none}
  .navlink{white-space:nowrap;flex:none}
  .acct-btn{padding:8px 10px}
  .sbox-acts{width:100%}
  .sbox-acts .btn{flex:1}
}

/* ---------- reports ---------- */
.river-reports{margin-top:38px;padding-top:28px;border-top:1px solid var(--line)}
.rr-sub{font-size:13px;color:var(--muted);margin:0 0 16px}

.rep{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:16px;
}
/* Never crop an angler's photograph.
   This used to be width:100% with object-fit:cover and a 460px cap, which
   crops whatever does not fit. It looked fine on a phone by accident: a card
   there is about 340px wide, so a portrait photo comes out around 450px tall
   and slips under the cap. On a 700px-wide desktop card the same photo is
   ~930px tall, so the top and bottom were sliced off - usually the angler's
   face and the fish's tail.
   contain fits the whole image inside the box whatever its shape, and the
   flex centring puts a portrait shot in the middle of the card rather than
   hard against one edge. */
.rep-photo{background:var(--surface-2);display:flex;justify-content:center;
  align-items:center;line-height:0}
.rep-photo img{max-width:100%;max-height:min(70vh,560px);width:auto;height:auto;
  object-fit:contain;display:block}
.rep-body{padding:18px 20px}
.rep-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  flex-wrap:wrap;margin-bottom:14px}
.rep-where{font-family:var(--serif);font-size:19px;font-weight:500}
.rep-where span{font-size:14px;color:var(--muted)}
.rep-when{font-size:12.5px;color:var(--muted);white-space:nowrap}
/* Labelled facts rather than a run-on line. Same pattern as the river header,
   so a report reads as part of the site rather than a caption under a photo. */
.rep-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px 18px;
  padding:13px 0;margin-bottom:14px;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.rep-facts .fact-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--faint);margin-bottom:2px}
.rep-facts .fact-v{font-size:13.5px;color:var(--text);line-height:1.4}
.rep-worked{background:var(--accent-soft);border-radius:9px;padding:11px 14px;margin-bottom:12px}
.rep-worked > span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-text);font-weight:700;display:block;margin-bottom:7px}
/* A bulleted list rather than one middot-separated run. Flies are a list of
   distinct things, and at six or eight of them the run became a wall that had
   to be read rather than scanned. */
.rep-worked ul{margin:0;padding:0 0 0 17px;list-style:disc}
.rep-worked li{font-size:13.5px;color:var(--accent-text);line-height:1.5;margin-bottom:2px}
.rep-worked li::marker{font-size:11px}
.rep-worked li:last-child{margin-bottom:0}
/* The size is the specific part - a Pheasant Tail in a 16 is different advice
   from a Pheasant Tail - so it is set apart rather than trailing the name. */
.rep-worked li b{font:600 12.5px/1 var(--mono);padding-left:2px}
.rep-worked .rw-added{font-weight:600}
.rep-worked em{font-style:normal;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  background:var(--surface);border-radius:3px;padding:2px 5px;color:var(--muted);
  margin-left:4px;white-space:nowrap}
/* The note was a bare paragraph with nothing to introduce it, so it read as a
   caption drifting under the flies. A label in the same small-caps as the
   fact grid makes it a section of the report like any other. */
.rep-notes{margin:0 0 14px}
.rep-notes > span{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:600;display:block;margin-bottom:4px}
.rep-notes p{font-size:14px;line-height:1.6;margin:0;white-space:pre-wrap}
.rep-foot{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line-soft);padding-top:13px}
.who{flex:1;font-size:12.5px;color:var(--muted)}
.rep-flag{font-size:12px;color:var(--faint);padding:6px 10px}
.rep-flag:hover{color:var(--warn)}
/* Deleting your own report is destructive and irreversible, so the control
   turns red on hover rather than sitting quietly like Flag. Colours follow
   the same three-state pattern as .err - explicit light, dark via
   [data-theme], and dark via prefers-color-scheme for the default setting. */
.rep-del{font-size:12px;color:var(--faint);padding:6px 10px}
.rep-del:hover{color:#c0392b}
:root[data-theme="dark"] .rep-del:hover{color:#e07a6d}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .rep-del:hover{color:#e07a6d}
}
.share-wrap{position:relative;display:inline-block}
.share-menu{
  position:absolute;right:0;bottom:calc(100% + 6px);z-index:20;min-width:180px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
}
.share-menu button{
  background:none;border:none;text-align:left;padding:10px 14px;font:inherit;
  font-size:13.5px;cursor:pointer;color:var(--text);
}
.share-menu button:hover{background:var(--accent-soft);color:var(--accent-text)}
.share-menu button + button{border-top:1px solid var(--line-soft)}
.single-note{font-size:13px;color:var(--muted);margin:0 0 14px}
.rep-loading{font-size:13.5px;color:var(--muted);padding:20px 0}

/* ---------- share a report ---------- */
.rp-panel{display:flex;flex-direction:column;max-height:88vh}
.rp-scroll{overflow-y:auto;padding-right:4px;margin:6px 0 14px}
.rp-actions{border-top:1px solid var(--line);padding-top:14px;flex:none}
.worked h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-text);margin:0 0 3px}
.worked p{margin:0 0 11px;font-size:12.5px;color:var(--accent-text);opacity:.85}
.flychips{display:flex;gap:7px 9px;flex-wrap:wrap;align-items:flex-start}
.flychip{background:var(--surface);border:1px solid var(--line);border-radius:99px;
  padding:7px 13px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.flychip.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.flychip .sz{font:11px var(--mono);opacity:.7}
/* A fly, then the size that caught fish. The fly is one chip; its sizes
   appear beneath it only once the fly is selected, so an unselected list
   stays a plain row of names. Sizes are optional - picking none records
   just the pattern. */
.wf{display:inline-flex;flex-direction:column;gap:5px;align-items:flex-start}
.wf.is-open{flex-basis:100%}
.wf-sizes{display:inline-flex;gap:4px;flex-wrap:wrap;padding-left:3px}
.szchip{background:var(--bg);border:1px solid var(--line);border-radius:99px;
  padding:3px 9px;font:11px var(--mono);color:var(--muted);cursor:pointer;line-height:1.5}
.szchip:hover{border-color:var(--accent);color:var(--accent-text)}
.szchip.is-on{background:var(--accent-soft);border-color:transparent;
  color:var(--accent-text);font-weight:700}
.wf-added .flychip{border-style:dashed}
.wf-added em{font-style:normal;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  background:var(--surface-2);border-radius:3px;padding:2px 5px}
.wf-added .flychip.is-on em{background:rgba(255,255,255,.25)}
.addfly{margin-top:11px;position:relative}
.field-block-in{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:9px 11px;font:inherit;outline:none}
.field-block-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);
  overflow:hidden;font-size:13.5px}
.suggest div{padding:9px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.suggest div:hover{background:var(--accent-soft);color:var(--accent-text)}
.suggest .sz{font:11px var(--mono);color:var(--faint)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:99px;
  padding:6px 13px;font-size:13px;cursor:pointer;color:var(--muted)}
.chip:hover{color:var(--text)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.fld .hint{font-style:normal;font-size:11.5px;color:var(--faint);font-weight:400;margin-left:5px}
.rp-conditions{border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 15px;margin-bottom:16px;background:var(--surface-2)}
.rp-conditions summary{cursor:pointer;font-size:13px;font-weight:600}
.rp-conditions summary em{font-style:normal;font-weight:400;color:var(--faint);margin-left:6px;font-size:11.5px}
.rp-conditions > .fld,.rp-conditions > .grid-2{margin-top:14px}
.rp-drop{width:100%;border:2px dashed var(--line);border-radius:var(--radius);
  padding:22px;text-align:center;background:var(--surface-2);cursor:pointer;
  font:inherit;color:var(--muted);font-size:13px}
.rp-drop b{display:block;color:var(--text);font-size:14.5px;margin-bottom:3px}
.rp-drop:hover{border-color:var(--accent)}
.rp-drop:disabled{opacity:.5;cursor:default;border-style:solid}
.rp-drop:disabled:hover{border-color:var(--line)}
/* Thumbnails of what is attached. Square and cropped ON PURPOSE here - this
   is a picker, where matching tiles are easier to scan than ragged ones. The
   published card never crops; see .rep-photo. */
.rp-shots{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px}
.rp-shot{position:relative;width:84px;height:84px;border-radius:var(--radius-sm);
  overflow:hidden;background:var(--surface-2)}
.rp-shot img{width:100%;height:100%;object-fit:cover;display:block}
.rp-shot-x{position:absolute;top:3px;right:3px;width:22px;height:22px;
  border:none;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;
  font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.rp-shot-x:hover{background:rgba(0,0,0,.85)}
#reportDlg textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 12px;font:inherit;resize:vertical}
#reportDlg textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;
  background:rgba(12,16,14,.72);backdrop-filter:blur(3px);
}
.lb-panel{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);max-width:520px;width:100%;
  padding:18px;
}
.lb-close{
  position:absolute;top:10px;right:10px;width:32px;height:32px;
  display:grid;place-items:center;background:var(--surface);color:var(--muted);
  border:1px solid var(--line);border-radius:8px;cursor:pointer;
}
.lb-close:hover{color:var(--text);border-color:var(--muted)}
.lb-close svg{width:15px;height:15px}
.lb-img{
  background:var(--surface-2);border-radius:10px;overflow:hidden;
  aspect-ratio:1/1;display:grid;place-items:center;
}
.lb-img img{width:100%;height:100%;object-fit:contain;display:block}
.lb-meta{padding:14px 2px 2px}
.lb-meta h3{font-family:var(--serif);font-size:20px;font-weight:500}
.lb-meta p{margin:3px 0 0;font-size:13px;color:var(--muted)}
.lb-note{color:var(--warn) !important;font-style:italic}

.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  background:var(--text);color:var(--bg);padding:11px 20px;border-radius:99px;
  font-size:13.5px;z-index:80;box-shadow:var(--shadow);
}

@media (max-width:940px){
  .layout{grid-template-columns:1fr}
  .col-side{position:static}
  .month-strip{grid-template-columns:repeat(6,1fr)}
  .hero h1{font-size:32px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .month-strip{grid-template-columns:repeat(4,1fr)}
  .box-head{flex-direction:column;align-items:stretch}
  .tiers{overflow-x:auto}
}

/* ---------- print ---------- */
@media print{
  .topbar,.searchbar,.hero,.back,.toolbar,.tiers,.months,.col-side,.toast,.fly-check,.lightbox{display:none !important}
  /* Print real photographs; a page of placeholders is just wasted ink. */
  .fly-thumb.is-ph{display:none !important}
  .fly-thumb{width:44pt;height:44pt;border:none}
  body{background:#fff;color:#000;font-size:11pt}
  .wrap{max-width:none;padding:0}
  .layout{grid-template-columns:1fr;padding:0}
  .river-head{border:none;box-shadow:none;padding:0 0 12pt;margin-bottom:12pt;border-bottom:1pt solid #999}
  .rh-long,.rh-facts,.rh-secs{display:none}
  .fly{break-inside:avoid;border:none;border-bottom:.5pt solid #ccc;border-radius:0;padding:6pt 0;margin:0}
  .fly.is-off{display:none}
  .fly-skus{color:#666}
  .cat-group{break-inside:avoid}
}

/* ---- river header: sections ------------------------------------------- */
/* Their own row under the facts. Four across on a wide screen, wrapping to
   two and then one; each is a fixed-ish column so the names line up rather
   than jostling to fit their text. */
.rh-secs{border-top:1px solid var(--line-soft);margin-top:14px;padding-top:14px}
.rh-secs .fact-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--faint);margin-bottom:9px}
.rh-secs-row{display:grid;gap:14px 22px;
  grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.rh-sec{border-left:2px solid var(--accent-soft);padding-left:11px}
.rh-sec-n{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.35}
.rh-sec-w{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.rh-sec-t{font-size:12px;color:var(--faint);font-style:italic;margin-top:2px;line-height:1.4}

/* ---- home page one-liner ---------------------------------------------- */
.hero-line{font-size:16px;line-height:1.55;color:var(--text);margin:0 0 8px;max-width:60ch}

/* ---- members-only panel ------------------------------------------------ */
/* Stands in for the feed when signed out. A plain empty page reads as broken;
   this says what is behind the door and opens it. */
.gate-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;text-align:center;box-shadow:var(--shadow-sm);margin-bottom:20px}
.gate-panel h2{font:600 19px/1.4 var(--serif);margin:0 0 8px;color:var(--text)}
.gate-panel p{font-size:14px;line-height:1.6;color:var(--muted);margin:0 auto 18px;max-width:52ch}

/* ---- angler suggestions ------------------------------------------------ */
.p-sugg{background:var(--accent-soft);color:var(--accent-text);border-color:transparent;font-weight:600}
.sugg-by{color:var(--faint);font-style:italic}
.card-sub{font-size:12px;color:var(--muted);margin:-4px 0 10px;line-height:1.45}
.card-more{font-size:12.5px;margin-top:4px}
.sg-chosen{display:flex;align-items:center;gap:10px;background:var(--surface-2);
  border-radius:var(--radius-sm);padding:10px 12px;margin:14px 0 4px}
.sg-chosen-n{flex:1;font-size:14px;font-weight:600}
.sg-block{margin-top:14px}
.sg-block h4{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-text);margin:0 0 6px}
.sg-hint{font-size:12px;color:var(--muted);margin:0 0 7px}

/* ---- section descriptions ---------------------------------------------- */
.rh-sec-d{margin-top:5px}
.rh-sec-d summary{font-size:12px;color:var(--accent-text);cursor:pointer;
  list-style:none;display:inline-block;padding:1px 0;border-bottom:1px dotted currentColor}
.rh-sec-d summary::-webkit-details-marker{display:none}
.rh-sec-d summary:hover{color:var(--accent)}
.rh-sec-d[open] summary{margin-bottom:5px}
.rh-sec-d p{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0}
.fld-hint{display:block;font-size:11.5px;color:var(--faint);margin-top:3px;line-height:1.4}

/* ---- standalone report: picking the water ------------------------------ */
.rp-where{background:var(--surface-2);border-radius:var(--radius-sm);
  padding:14px 15px;margin-bottom:16px}
.rp-where h4{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-text);margin:0 0 9px}
.rp-where-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){ .rp-where-row{grid-template-columns:1fr} }
.rp-where-row select{width:100%;background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;font:inherit}
.rp-where-note{font-size:12px;color:var(--muted);margin:9px 0 0;line-height:1.45}

/* ---- write-a-report call to action ------------------------------------- */
.rf-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.rf-actions-note{font-size:12.5px;color:var(--muted)}

/* ---- several photos on one report -------------------------------------- */
/* A single photo keeps the full-width uncropped treatment. Two or more become
   a grid, because four portrait shots stacked full-size is four screens of
   scrolling before the reader reaches the words. Tiles ARE cropped to square-
   ish - a grid of ragged shapes reads as a mistake - and the whole picture is
   one tap away. */
.rep-photo-grid{display:grid;gap:3px;background:var(--line-soft)}
.rep-photo-grid.n2{grid-template-columns:1fr 1fr}
.rep-photo-grid.n3{grid-template-columns:2fr 1fr}
.rep-photo-grid.n3 img:first-child{grid-row:span 2}
.rep-photo-grid.n4{grid-template-columns:1fr 1fr}
.rep-photo-grid img{width:100%;height:100%;max-height:none;object-fit:cover;
  display:block;aspect-ratio:4/3;cursor:zoom-in}
/* Square, not portrait. At 2/3 the hero tile drove the three-photo block to
   742px - taller than the four-photo one, so adding a picture made the card
   shorter, which is daft. Square brings it to ~495px, in line with the rest. */
.rep-photo-grid.n3 img:first-child{aspect-ratio:1/1}
@media (max-width:520px){
  .rep-photo-grid.n3{grid-template-columns:1fr 1fr}
  .rep-photo-grid.n3 img:first-child{grid-row:auto;grid-column:span 2;aspect-ratio:4/3}
}

/* ---- edit control on your own report ----------------------------------- */
.rep-edit{font-size:12px;color:var(--faint);padding:6px 10px}
.rep-edit:hover{color:var(--accent-text)}

/* ---- "anglers have reported here" strip, above the month picker --------- */
/* Full width rather than tucked into the header facts: it carries a sentence,
   and the facts column is already doing a different job. */
.river-reports-cta{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--accent-soft);border:1px solid transparent;
  border-radius:var(--radius);padding:13px 16px;margin:0 0 22px;
  cursor:pointer;color:var(--accent-text);
}
.river-reports-cta:hover{border-color:var(--accent)}
.rrc-n{
  flex:none;display:grid;place-items:center;min-width:38px;height:38px;padding:0 9px;
  background:var(--accent);color:var(--on-accent);border-radius:99px;
  font:700 16px/1 var(--sans);font-variant-numeric:tabular-nums;
}
.rrc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rrc-t b{font-size:14.5px;font-weight:600}
.rrc-t small{font-size:12.5px;color:var(--muted)}
.rrc-go{flex:none;font-size:19px;opacity:.55}
.river-reports-cta:hover .rrc-go{opacity:1}
/* No reports yet: an invitation, not an announcement, so it recedes. */
.river-reports-cta.is-empty{background:transparent;border-color:var(--line)}
.river-reports-cta.is-empty .rrc-t b{color:var(--text);font-weight:500}
@media (max-width:560px){
  .river-reports-cta{padding:12px 13px;gap:11px}
  .rrc-t b{font-size:13.5px}
}
@media print{ .river-reports-cta{display:none} }

/* ---- a fly box someone shared ------------------------------------------ */
.shared-kicker{font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent-text);font-weight:700;margin:0 0 6px}
.shared-acts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
/* A plain list, not the checkbox rows of an editable box: a visitor can read
   and copy this, never change it, and controls that do nothing are worse than
   no controls. */
.sbx-list{list-style:none;margin:0 0 18px;padding:0}
.sbx-list li{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:8px 2px;border-bottom:1px solid var(--line-soft)}
.sbx-list li:last-child{border-bottom:none}
.sbx-n{flex:1 1 220px;font-size:14px;color:var(--text)}
.sbx-s{display:flex;gap:5px;flex-wrap:wrap}
.sbx-s .sz b{font-weight:700}

/* A suggested fly that actually caught something. Stronger evidence than one
   merely proposed, so it is filled rather than tinted. */
.p-caught{background:var(--accent);color:var(--on-accent);border-color:transparent;font-weight:700}