:root{
    --ink:#0F3B33;          /* deep teal-forest text */
    --ink-soft:#4A6B63;
    --forest:#0E5C52;       /* deep teal header (was forest green) */
    --forest-2:#12786B;     /* secondary teal */
    --water:#12A594;        /* fresh teal accent (was leaf green) */
    --water-deep:#0E7C70;   /* deep teal accent */
    --sand:#F2FBFA;         /* icy aqua paper/background (was warm sand) */
    --sand-dim:#E3F3F0;
    --ember:#D9A544;        /* sandy gold, used sparingly */
    --ember-soft:#E6BE72;
    --seafoam:#4CAF87;
    --seafoam-deep:#2E7A58; /* seafoam darkened for text: 4.75:1 on the open-pill bg; raw --seafoam is ~2.5:1, border/background only */      /* secondary aquatic accent -- "good" state */
    --coral:#E07856;        /* warm counterpoint -- "poor" state */
    --coral-deep:#C0503A;   /* "caution" state */
    --sky:#3DA9DD;          /* air-weather accent, distinct from the water-teal readings */
    --sky-deep:#2A82AE;
    --card:#FFFFFF;
    --line:#D8ECE7;
    --mono:'JetBrains Mono', monospace;
    --serif:'Baloo 2', sans-serif;
    --sans:'Inter', sans-serif;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--sans);}
  .app{background:radial-gradient(120% 60% at 15% 0%, rgba(61,169,221,.10), transparent 55%), radial-gradient(110% 60% at 100% 0%, rgba(76,175,135,.10), transparent 50%);}
  ::selection{background:var(--ember-soft);color:#fff;}

  /* ---------- shell ---------- */
  .app{max-width:1180px;margin:0 auto;padding:0 20px 60px;}
  header.top{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--forest);color:#fff;border-radius:20px;
    padding:26px 30px;margin-top:22px;flex-wrap:wrap;gap:14px;
  }
  .brand{display:flex;align-items:center;gap:14px;}
  .brand svg,.brand img{flex:none;}
  .brand h1{display:flex;align-items:baseline;gap:8px;}
  .brand h1 .by{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.02em;color:#B7D6C4;}
  .brand h1{font-family:var(--serif);font-weight:700;font-size:28px;margin:0;letter-spacing:0;color:#fff;}
  .brand .tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#B7D6C4;margin-top:2px;}
  .coords{font-family:var(--mono);font-size:11.5px;color:#CFE6DA;text-align:right;line-height:1.6;}
  .coords-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#8FB6A1;margin-top:8px;margin-bottom:3px;}
  .coords select#globalMonth{cursor:pointer;}
  .ff-tw-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:#CFE6DA;background:#173F2D;border:1px solid #2E5C46;border-radius:8px;padding:8px 14px;text-decoration:none;transition:background .2s ease,border-color .2s ease;white-space:nowrap;}
  .ff-tw-back:hover{background:#1E4A34;border-color:#3F8F5F;color:#fff;}

  nav.tabs{
    display:flex;gap:4px;margin:22px 0 26px;background:var(--sand-dim);
    border:1px solid var(--line);border-radius:14px;padding:5px;
    overflow-x:auto;
  }
  nav.tabs button{
    font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-soft);
    background:none;border:none;padding:10px 16px;cursor:pointer;white-space:nowrap;
    border-radius:10px;transition:.15s;
  }
  nav.tabs button:hover{color:var(--ink);}
  nav.tabs button.active{color:#fff;background:var(--forest);}
.species-toggle{display:flex;gap:8px;margin:0 0 22px;}
.species-toggle button{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px 16px;cursor:pointer;transition:.15s;}
.species-toggle button:hover{border-color:var(--water);}
.species-toggle button.active{color:#fff;background:var(--water-deep);border-color:var(--water-deep);}

/* ---------- BEST WATER THIS WEEK ---------- */
.tw-top-picks{margin:0 0 18px;padding:16px 18px;border-radius:14px;color:#fff;}
#twTopPicksFavorites{background:linear-gradient(135deg, var(--ink) 0%, var(--ember) 100%);}
#twTopPicksTrout{background:linear-gradient(135deg, var(--forest) 0%, var(--water-deep) 100%);}
#twTopPicksNative{background:linear-gradient(135deg, var(--ink) 0%, var(--sky-deep) 100%);}
.tw-top-picks-title{margin:0 0 10px;font-family:var(--serif);font-size:16px;color:#fff;}
.tw-top-picks-list{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
.tw-pick-card{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:8px 12px;cursor:pointer;font-family:var(--sans);text-align:left;min-width:150px;transition:background .2s ease;}
.tw-pick-card:hover{background:rgba(255,255,255,.18);}
.tw-pick-name{font-size:12.5px;font-weight:600;color:#fff;}
.tw-pick-state{font-size:10.5px;color:rgba(255,255,255,.72);font-family:var(--mono);letter-spacing:.04em;}
.tw-top-picks-meta{margin-top:10px;font-size:10.5px;color:rgba(255,255,255,.72);font-family:var(--mono);}
.feeding-badge{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.03em;padding:2px 8px;border-radius:10px;color:#fff;}
.feeding-badge.rating-prime{background:var(--water);}
.feeding-badge.rating-good{background:var(--seafoam);}
.feeding-badge.rating-fair{background:var(--ember);color:var(--ink);}
.feeding-badge.rating-poor{background:var(--coral);}
.feeding-badge.rating-caution{background:var(--coral-deep);}
@media(max-width:600px){.tw-pick-card{min-width:130px;}}

  .view{display:none;animation:fade .25s ease;}
  .view.active{display:block;}
  @keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

  h2.section-title{font-family:var(--serif);font-size:22px;font-weight:600;margin:0 0 4px;}
  p.section-sub{font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);margin:0 0 20px;max-width:560px;}

  /* ---------- MAP ---------- */
  .map-wrap{
    display:grid;grid-template-columns:1.35fr 1fr;gap:22px;
  }
  @media(max-width:820px){.map-wrap{grid-template-columns:1fr;}}
  .map-frame{
    border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;
    height:480px;
  }

  .detail-panel{
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;
    min-height:340px;display:flex;flex-direction:column;
  }
  .detail-panel .empty{margin:auto;text-align:center;color:var(--ink-soft);font-size:13.5px;font-family:var(--mono);}
  .detail-panel .empty svg{opacity:.4;margin-bottom:10px;}
  .dp-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--water-deep);margin-bottom:6px;}
  .dp-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;}
  .dp-title{font-family:var(--serif);font-size:21px;font-weight:600;margin:0;}
  .fav-toggle{
    font-family:var(--mono);font-size:11px;padding:10px 14px;border-radius:20px;
    border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;
    white-space:nowrap;flex-shrink:0;
  }
  .fav-toggle.is-fav{border-color:var(--water);color:var(--water-deep);background:#F0F7F3;}
  .dp-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
  .chip{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--line);color:var(--ink-soft);background:#fff;}
  .chip.diff-easy{border-color:#7DA679;color:#4A6B45;}
  .chip.diff-moderate{border-color:var(--ember-soft);color:var(--ember);}
  .chip.diff-hard{border-color:#B04B3E;color:#B04B3E;}
  .chip.diff-unrated{border-color:var(--line);color:var(--ink-soft);}
  .dp-desc{font-size:13.5px;line-height:1.65;color:var(--ink-soft);margin-bottom:14px;}
  .dp-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12.5px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);}
  .dp-meta div span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--water-deep);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;}

  .nearby-list{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
  .nearby-loading, .nearby-empty{font-family:var(--mono);font-size:12px;color:var(--ink-soft);}
  .nearby-item{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;
    text-decoration:none;color:var(--ink);font-size:12.5px;
  }
  .nearby-item:hover{border-color:var(--water);}
  .nearby-item .nb-name{font-weight:600;}
  .nearby-item .nb-type{font-family:var(--mono);font-size:10px;color:var(--water-deep);text-transform:uppercase;letter-spacing:.05em;}
  .nearby-item .nb-dist{font-family:var(--mono);font-size:11px;color:var(--ink-soft);white-space:nowrap;}

  /* ---------- LOCATION LIST (find water) ---------- */
  .loc-search-row{display:flex;gap:8px;margin-bottom:6px;}
  .loc-search{
    width:100%;box-sizing:border-box;font-family:var(--sans);font-size:14px;padding:11px 16px;
    border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);margin:0;flex:1;
  }
  .loc-search:focus{outline:none;border-color:var(--water);}
  .near-me-btn{
    flex:none;font-family:var(--sans);font-size:13px;font-weight:600;white-space:nowrap;
    padding:0 16px;min-height:44px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--water-deep);cursor:pointer;transition:.15s;
  }
  .near-me-btn:hover{border-color:var(--water);}
  .near-me-btn:disabled{opacity:.6;cursor:default;}
  .near-me-btn[data-active="1"]{background:var(--water-deep);border-color:var(--water-deep);color:#fff;}
  .near-me-status{font-size:12px;color:var(--ink-soft);margin:0 0 14px;min-height:1em;}
  .loc-dist{
    flex:none;font-family:var(--mono);font-size:10.5px;color:var(--water-deep);background:var(--sand-dim);
    border-radius:10px;padding:2px 7px;white-space:nowrap;
  }
  .loc-empty{color:var(--ink-soft);font-size:13px;padding:6px 0 12px;}
  .loc-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px 24px;}
  .loc-state h3{
    font-family:var(--serif);font-size:16px;font-weight:700;margin:0 0 10px;
    padding-bottom:8px;border-bottom:1px solid var(--line);color:var(--forest);
  }
  .loc-state ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
  .loc-state li{display:flex;align-items:center;gap:6px;}
  .loc-state li a{
    display:block;font-family:var(--sans);font-size:13px;color:var(--ink-soft);
    text-decoration:none;padding:5px 0;border-bottom:1px solid transparent;
    background:none;border-left:none;border-right:none;border-top:none;
    text-align:left;width:auto;flex:1;cursor:pointer;
  }
  .loc-state li a:hover{color:var(--water-deep);text-decoration:underline;}
  .star-btn{
    background:none;border:none;padding:0;margin:0;cursor:pointer;font-size:14px;
    line-height:1;color:var(--ink-soft);flex-shrink:0;width:16px;
  }
  .star-btn.is-fav{color:var(--ember,#C97A3A);}

  /* ---------- ACCESS POINTS ---------- */
  .filters{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
  .filters select, .filters input{
    font-family:var(--sans);font-size:13px;padding:8px 12px;border:1px solid var(--line);
    border-radius:14px;background:#fff;color:var(--ink);
  }
  .ap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
  .ap-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;transition:.15s;}
  .ap-card:hover{border-color:var(--water);transform:translateY(-2px);}
  .ap-card .state-tag{font-family:var(--mono);font-size:10.5px;color:var(--water-deep);letter-spacing:.08em;}
  .ap-card h3{font-family:var(--serif);font-size:17px;margin:4px 0 8px;}
  .ap-card p{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:0 0 10px;}
  .ap-card .chips{display:flex;gap:6px;flex-wrap:wrap;}

  /* ---------- HATCH CHART ---------- */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;}
  table.hatch{width:100%;min-width:560px;border-collapse:collapse;font-size:13px;}
  table.hatch th, table.hatch td{border:1px solid var(--line);padding:9px 10px;text-align:left;}
  table.hatch th{background:var(--water-deep);color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;}
  table.hatch tr:nth-child(even){background:#EEF5EF;}
  table.hatch td.fly{font-family:var(--mono);font-size:11.5px;color:var(--ember);}

  .hp-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:6px 0 8px;}
  .hp-card .dp-eyebrow{margin-bottom:4px;}
  .hp-card h4{font-family:var(--serif);font-size:18px;margin:0 0 8px;}
  .hp-card .hp-fly{font-family:var(--mono);font-size:12px;color:var(--ember);margin-top:8px;}
  .hint{font-family:var(--mono);font-size:11px;color:var(--water-deep);margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);}
  .clarity-note{background:var(--sand);border-radius:10px;padding:12px 14px;margin:0 0 20px;font-size:12.5px;color:var(--ink-soft);line-height:1.5;}
  .clarity-note a{color:var(--water-deep);font-weight:600;text-decoration:none;}
  .clarity-note a:hover{text-decoration:underline;}

  .weather-panel{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;}
  .weather-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
  .weather-head h3{font-family:var(--serif);font-size:19px;margin:0;}
  .weather-eyebrow{font-family:var(--mono);font-size:10.5px;color:var(--water-deep);text-transform:uppercase;letter-spacing:.08em;}
  .weather-pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
  .weather-pill{background:var(--sand);border-radius:20px;padding:10px 20px;display:flex;flex-direction:column;gap:2px;min-width:100px;}
  .weather-pill .label{font-family:var(--mono);font-size:10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;}
  .weather-pill .value{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink);}
  .weather-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:20px;}
  .weather-tile{background:var(--sand);border-radius:10px;padding:12px 14px;}
  .weather-tile .label{font-family:var(--mono);font-size:10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;}
  .weather-tile .value{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink);}
  .forecast-head{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--water-deep);margin-bottom:6px;}
  .forecast-list{display:flex;flex-direction:column;}
  .forecast-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);font-size:13px;}
  .forecast-row:last-child{border-bottom:none;}
  .forecast-row .day{font-weight:600;width:82px;flex:none;}
  .forecast-row .cond{color:var(--ink-soft);flex:1;}
  .forecast-row .range{font-family:var(--mono);font-size:12.5px;white-space:nowrap;flex:none;}
  .weather-error{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);}
  .weather-refresh-btn{
    font-family:var(--mono);font-size:11.5px;color:var(--water-deep);background:#fff;
    border:1px solid var(--line);border-radius:20px;padding:11px 16px;margin-top:8px;
    cursor:pointer;transition:border-color .15s,color .15s;
  }
  .weather-refresh-btn:hover{border-color:var(--water);color:var(--water-deep);}

  .river-panel{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;}
  .river-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
  .river-head h3{font-family:var(--serif);font-size:19px;margin:0;}
  .river-eyebrow{font-family:var(--mono);font-size:10.5px;color:var(--water-deep);text-transform:uppercase;letter-spacing:.08em;}
  .river-pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
  .river-pills .weather-pill .range{font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);margin-top:1px;}
  .gauge-tags{font-family:var(--mono);font-size:10.5px;color:var(--water-deep);margin-bottom:12px;}
.stocking-list{display:flex;flex-direction:column;gap:8px;}
.stocking-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:13px;padding:9px 12px;background:var(--sand);border-radius:10px;}
.stocking-row .stocking-date{font-family:var(--mono);font-size:11px;color:var(--water-deep);min-width:78px;}
.stocking-row .stocking-species{font-weight:600;}
.stocking-row .stocking-detail{color:var(--ink-soft);font-size:12px;flex-basis:100%;}
  .river-sparkline{margin-bottom:14px;position:relative;}
  .river-sparkline circle{cursor:pointer;}
  .river-spark-tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-family:var(--mono);font-size:10.5px;padding:3px 7px;border-radius:6px;white-space:nowrap;transform:translate(-50%,calc(-100% - 6px));opacity:0;transition:opacity .12s ease;z-index:5;}
  .river-spark-tip.visible{opacity:1;}
  .river-map{height:180px;border-radius:12px;overflow:hidden;margin-bottom:8px;border:1px solid var(--line);background:var(--sand);}
  .river-map .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.8);}
  .river-map-legend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;color:var(--ink-soft);margin-bottom:14px;}
  .river-alert{margin-bottom:14px;}
  .alert-toggle-btn{font-family:var(--mono);font-size:11px;padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:#fff;color:var(--water-deep);cursor:pointer;}
  .alert-toggle-btn:hover{border-color:var(--water);}
  .alert-form{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--sand);}
  .alert-form-hint{font-size:12.5px;color:var(--ink-soft);margin:0 0 8px;}
  .alert-form-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
  .alert-form-row input[type="number"]{width:72px;font-family:var(--mono);font-size:12px;padding:5px 7px;border-radius:8px;border:1px solid var(--line);background:#fff;}
  .alert-form-unit{font-family:var(--mono);font-size:11px;color:var(--ink-soft);}
  .alert-form-email{width:100%;box-sizing:border-box;font-size:12.5px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:#fff;margin-bottom:8px;}
  .alert-form-optin{display:block;font-size:11.5px;color:var(--ink-soft);margin:0 0 8px;cursor:pointer;}
  .alert-form-optin input{margin-right:6px;vertical-align:middle;}
  .alert-submit-btn{font-family:var(--mono);font-size:11px;padding:6px 14px;border-radius:20px;border:1px solid var(--water);background:var(--water-deep);color:#fff;cursor:pointer;}
  .alert-submit-btn:disabled{opacity:.6;cursor:default;}
  .alert-form-msg{font-size:11.5px;margin-top:8px;}
  .alert-form-msg.is-success{color:var(--water-deep);}
  .alert-form-msg.is-error{color:var(--ember);}
  .feeding-card-wrap{border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,#fff,var(--sand-dim));box-shadow:0 16px 32px -26px rgba(14,92,82,.28);overflow:hidden;}
  .feeding-card{padding:16px 16px 15px;display:flex;align-items:center;gap:15px;}
  .feeding-card:empty{padding:0;}
  .feeding-card-wrap .river-alert{margin:0;padding:0 16px 14px;}
  .feeding-card-wrap .river-alert:not([hidden]){padding-top:12px;border-top:1px dashed var(--line);margin-top:2px;}
  .feeding-empty{font-size:12px;color:var(--ink-soft);}
  .feeding-ring{flex:none;position:relative;width:82px;height:82px;}
  .feeding-ring svg{width:82px;height:82px;}
  .feeding-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;}
  .feeding-ring-label .cap{font-family:var(--mono);font-size:7px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);}
  .feeding-ring-label .word{font-family:var(--serif);font-weight:700;font-size:13.5px;line-height:1;}
  .feeding-body{min-width:0;display:flex;flex-direction:column;gap:6px;}
  .feeding-label{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;}
  .feeding-reasons{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;}
  .feeding-reasons li{font-size:12.5px;color:var(--ink);line-height:1.45;padding-left:13px;position:relative;}
  .feeding-reasons li::before{content:'';position:absolute;left:0;top:6px;width:4px;height:4px;border-radius:999px;background:var(--water);}
  .feeding-hatch-nudge{margin-top:2px;display:flex;align-items:flex-start;gap:8px;background:linear-gradient(135deg, rgba(18,165,148,.12), rgba(76,175,135,.05));border:1px solid rgba(18,165,148,.20);border-left:3px solid var(--seafoam);border-radius:12px;padding:9px 11px;font-size:12px;color:var(--ink-soft);line-height:1.5;box-shadow:0 6px 14px -12px rgba(14,92,82,.3);}

  /* ---------- river readings grid ---------- */
  .river-readgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px;}
  .river-readgrid.single{grid-template-columns:1fr;}
  .river-readcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 13px 11px;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 18px -16px rgba(14,92,82,.22);}
  .river-readtop{display:flex;align-items:center;justify-content:space-between;gap:6px;}
  .river-readlabel{font-family:var(--mono);font-size:10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;}
  .river-readtrend{display:flex;align-items:center;gap:3px;font-family:var(--mono);font-size:10px;white-space:nowrap;}
  .river-readval{display:flex;align-items:baseline;gap:4px;}
  .river-readval .num{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink);}
  .river-readval .unit{font-size:11px;color:var(--ink-soft);}
  .river-readsub{font-size:10.5px;color:var(--ink-soft);}
  .river-readspark{display:block;margin-top:2px;}
  .river-readbar{position:relative;height:5px;border-radius:999px;background:var(--sand-dim);margin-top:3px;overflow:hidden;}
  .river-readbar span{position:absolute;top:0;bottom:0;width:6px;border-radius:999px;background:var(--water-deep);}
  .river-read-icon{display:inline-block;margin-right:4px;font-size:11px;opacity:.85;vertical-align:-1px;}

  /* ---------- weather hourly "wow" chart ---------- */
  .weather-hourly-svg{width:100%;}
  .weather-hourly-svg svg{width:100%;height:auto;display:block;}
  .weather-hourly-ticks{display:flex;justify-content:space-between;margin-top:2px;padding:0 2px;}
  .weather-hourly-tick{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--mono);font-size:8.5px;color:var(--ink-soft);flex:1;white-space:nowrap;}
  .weather-hourly-tick .ic{font-size:12px;line-height:1;}

  /* ---------- river chart card ---------- */
  .river-chartcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 15px 6px;margin-bottom:14px;box-shadow:0 10px 22px -18px rgba(14,92,82,.22);}

  .river-chart-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px;gap:8px;}
  .river-chart-head h4{font-family:var(--serif);font-weight:700;font-size:13.5px;margin:0;color:var(--ink);}
  .river-chart-head .now{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);white-space:nowrap;}

  .adhoc-banner{font-size:12.5px;color:var(--ink-soft);background:var(--sand);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:8px 0 14px;}
  .adhoc-search-btn{margin-top:10px;font-family:var(--mono);font-size:11px;padding:7px 14px;border-radius:20px;border:1px solid var(--water);background:var(--water-deep);color:#fff;cursor:pointer;}
  .adhoc-search-btn:disabled{opacity:.6;cursor:default;}
  .adhoc-station-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
  .adhoc-station-btn{width:100%;text-align:left;font-size:13px;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;}
  .adhoc-station-btn:hover{border-color:var(--water);background:var(--sand);}
  .river-map-legend .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle;}
  .river-map .leaflet-popup-content{font-family:var(--sans, inherit);font-size:12.5px;line-height:1.4;}
  .river-map .leaflet-popup-content b{color:var(--water-deep);}
  .gauge-pick-link{color:var(--water-deep);font-weight:600;text-decoration:underline;}
  .gauge-pick-link:hover{color:var(--water-deep);}
  .river-sparkline svg{width:100%;height:auto;display:block;}
  @media(max-width:480px){.weather-panel{padding:18px;}.forecast-row .day{width:64px;font-size:12.5px;}.river-panel{padding:18px;}}

  /* ---------- REGS ---------- */
  .reg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:18px;}
  .reg-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;}
  .reg-card h3{font-family:var(--serif);font-size:18px;margin:0 0 10px;}
  .reg-card ul{margin:0;padding-left:18px;font-size:13px;line-height:1.7;color:var(--ink-soft);}
  .reg-card a{color:var(--water-deep);}
  .introduced-species-list{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:12px;}
  .introduced-species-list li{padding-bottom:10px;border-bottom:1px solid var(--line);}
  .introduced-species-list li:last-child{border-bottom:none;padding-bottom:0;}
  .introduced-species-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
  .introduced-species-row strong{font-family:var(--serif);font-size:14px;color:var(--ink);font-weight:700;}
  .introduced-status-pill{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px;border:1px solid;white-space:nowrap;}
  .introduced-species-note{font-size:12.5px;line-height:1.55;color:var(--ink-soft);}

  /* ---------- SPECIES COMPLIANCE CARD (per-location, in the detail panel) ---------- */
  .compliance-card{margin-top:14px;padding-top:2px;}
  .compliance-species{padding:10px 0;border-bottom:1px solid var(--line);}
  .compliance-species:last-of-type{border-bottom:none;}
  .compliance-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .compliance-head strong{font-family:var(--serif);font-size:14px;color:var(--ink);font-weight:700;}
  .compliance-pill{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px;border:1px solid;white-space:nowrap;}
  .compliance-pill.pill-open{color:var(--seafoam-deep);border-color:var(--seafoam);background:rgba(76,175,135,.10);}
  .compliance-pill.pill-closed{color:var(--coral-deep);border-color:var(--coral-deep);background:rgba(192,80,58,.10);}
  .compliance-pill.pill-none{color:var(--ink-soft);border-color:var(--line);background:var(--sand-dim);}
  .compliance-figures{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:5px;font-size:12px;color:var(--ink-soft);}
  .compliance-figures b{color:var(--ink);font-weight:600;margin-right:3px;}
  .compliance-note{font-size:12px;line-height:1.5;color:var(--ink-soft);margin:5px 0 0;}
  .compliance-link{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--water-deep);text-decoration:underline;}
  .compliance-generic{background:var(--sand-dim);border-left:3px solid var(--line);border-radius:6px;padding:12px 14px;}
  .compliance-generic-note{font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin:8px 0 0;}
  .compliance-generic-note a{color:var(--water-deep);text-decoration:underline;}
  .disclaimer{
    font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);background:#EEF5EF;
    border-left:3px solid var(--ember);padding:10px 14px;border-radius:2px;
  }
  .disclaimer a{color:var(--water-deep);text-decoration:underline;}

  /* ---------- OFFLINE BANNER ---------- */
  .tw-offline-bar{
    display:flex;align-items:center;gap:8px;
    background:var(--ink);color:#fff;border-radius:8px;padding:9px 16px;margin:14px 0 0;
    font-family:var(--sans);font-size:12.5px;line-height:1.4;
  }
  .tw-offline-bar[hidden]{display:none;}
  /* ---------- SAFETY BANNER ---------- */
  .tw-safety-bar{
    display:flex;align-items:flex-start;gap:10px;
    background:#FBF1E6;border:1px solid var(--ember-soft);border-left:4px solid var(--ember);
    border-radius:8px;padding:12px 16px;margin:14px 0 0;
    font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink);
  }
  .tw-safety-bar strong{color:var(--forest);}
  .tw-safety-bar a{color:var(--water-deep);font-weight:600;text-decoration:underline;white-space:nowrap;}
  .tw-safety-bar .tw-safety-close{
    margin-left:auto;flex:none;background:none;border:none;cursor:pointer;
    font-size:18px;line-height:1;color:var(--ink-soft);padding:2px 4px;
  }
  .tw-safety-bar .tw-safety-close:hover{color:var(--ink);}
  @media(max-width:600px){.tw-safety-bar{flex-wrap:wrap;} .tw-safety-bar .tw-safety-close{margin-left:0;}}

  /* ---------- FOOTER DISCLAIMER ---------- */
  .tw-footer-disclaimer{
    margin-top:40px;padding:22px 20px;background:#EEF5EF;border-top:3px solid var(--ember);
    border-radius:6px;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--ink-soft);
  }
  .tw-footer-disclaimer h3{margin:0 0 10px;font-family:var(--serif);font-size:15px;color:var(--forest);}
  .tw-footer-disclaimer p{margin:0 0 10px;}
  .tw-footer-disclaimer ul{margin:0 0 10px;padding-left:20px;}
  .tw-footer-disclaimer li{margin:0 0 6px;}
  .tw-footer-disclaimer strong{color:var(--ink);}

  /* ---------- LOG ---------- */
  .log-wrap{display:grid;grid-template-columns:340px 1fr;gap:22px;}
  @media(max-width:760px){.log-wrap{grid-template-columns:1fr;}}
  form.log-form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;height:fit-content;}
  form.log-form label{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--water-deep);}
  form.log-form input, form.log-form select, form.log-form textarea{
    font-family:var(--sans);font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);width:100%;
  }
  form.log-form textarea{resize:vertical;min-height:60px;}
  form.log-form button{
    margin-top:6px;background:var(--water);color:#fff;border:none;padding:10px 14px;border-radius:8px;
    font-family:var(--sans);font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s;
  }
  form.log-form button:hover{background:var(--water-deep);}
  .log-list{display:flex;flex-direction:column;gap:10px;}
  .log-entry{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
  .log-entry .meta{font-family:var(--mono);font-size:10.5px;color:var(--water-deep);letter-spacing:.04em;margin-bottom:4px;}
  .log-entry h4{font-family:var(--serif);font-size:15.5px;margin:0 0 4px;}
  .log-entry p{font-size:12.5px;color:var(--ink-soft);margin:0;}
  .log-entry button{background:none;border:none;color:#B04B3E;cursor:pointer;padding:8px 10px;font-family:var(--mono);font-size:11px;}
  .log-empty{font-family:var(--mono);font-size:13px;color:var(--ink-soft);text-align:center;padding:40px 0;}

  /* ---------- RESPONSIVE ---------- */
  html{-webkit-text-size-adjust:100%;}
  .brand h1{font-size:clamp(20px,5vw,28px);}
  h2.section-title{font-size:clamp(18px,4vw,22px);}
  nav.tabs{-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
  nav.tabs::-webkit-scrollbar{height:4px;}
  nav.tabs::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}

  @media (max-width:900px){
    .app{padding:0 16px 50px;}
    .dp-meta{grid-template-columns:1fr 1fr;}
  }

  @media (max-width:680px){
    header.top{padding:20px 20px;border-radius:16px;}
    .coords{text-align:left;}
    nav.tabs{margin:18px 0 20px;}
    nav.tabs button{padding:9px 13px;font-size:13px;}
    .filters{flex-direction:column;align-items:stretch;}
    .filters select,.filters input{width:100%;}
    .dp-meta{grid-template-columns:1fr 1fr;gap:8px;}
    .log-entry{flex-direction:column;}
    .log-entry button{align-self:flex-end;margin-top:-6px;}
  }

  @media (max-width:440px){
    .app{padding:0 12px 40px;}
    header.top{flex-direction:column;align-items:flex-start;gap:10px;padding:18px;}
    .coords{width:100%;text-align:left;}
    .brand h1{font-size:22px;}
    .brand svg{width:32px;height:32px;}
    h2.section-title{font-size:18px;}
    p.section-sub{font-size:13px;}
    .dp-meta{grid-template-columns:1fr;}
    .ap-grid{grid-template-columns:1fr;}
    .reg-grid{grid-template-columns:1fr;}
    form.log-form{padding:14px;}
    .dp-title{font-size:19px;}
  }

  @media (hover:none){
    .ap-card:hover{transform:none;}

  }

  /* ---------- ACCESSIBILITY (v1.6.8) ---------- */
  /* Visible keyboard focus ring for every interactive control (was missing). */
  .app :focus-visible{outline:2px solid var(--water-deep);outline-offset:2px;}
  .app header.top :focus-visible{outline-color:#fff;}
  /* Respect users who ask the OS to reduce motion. */
  @media (prefers-reduced-motion:reduce){.app *,.app *::before,.app *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}}

  /* ---------- FIND WATER MAP + ATF TAB (v1.7.0, ported from flyfinz) ---------- */
  .atf-credit{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--sand);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 18px;}
  .atf-credit-logo{height:40px;width:auto;flex:0 0 auto;}
  .atf-credit-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:180px;}
  .atf-credit-text strong{font-family:var(--serif);font-size:14.5px;color:var(--ink);}
  .atf-credit-text span{font-size:12px;color:var(--ink-soft);}
  .atf-credit-link{font-size:12.5px;font-weight:700;color:var(--water-deep);text-decoration:none;white-space:nowrap;border:1px solid var(--water-deep);border-radius:8px;padding:7px 12px;transition:.15s;}
  .atf-credit-link:hover{background:var(--water-deep);color:#fff;}
  .atf-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:18px;}
  .atf-cat-checks{display:flex;flex-wrap:wrap;gap:12px;}
  .atf-cat-checks label{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
  .atf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
  .atf-card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;}
  .atf-card-photo{width:100%;height:140px;background-size:cover;background-position:center;background-color:var(--sand-dim);}
  .atf-card-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1;}
  .atf-card-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--water-deep);font-weight:700;}
  .atf-card-body h4{margin:0;font-family:var(--serif);font-size:16px;color:var(--ink);}
  .atf-card-row{font-size:12.5px;color:var(--ink-soft);}
  .atf-card-row a{color:var(--water-deep);text-decoration:none;}
  .atf-card-details{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:4px 0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
  .atf-card-cta{margin-top:auto;align-self:flex-start;font-size:12px;font-weight:700;color:#fff;background:var(--water-deep);border-radius:7px;padding:7px 12px;text-decoration:none;}
  .atf-card-cta:hover{background:var(--forest);}
  .atf-empty{font-size:13px;color:var(--ink-soft);padding:20px 0;}
  .tw-view-toggle{display:flex;gap:8px;margin:0 0 14px;}
  .tw-view-toggle button{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px 16px;cursor:pointer;transition:.15s;}
  .tw-view-toggle button:hover{border-color:var(--water);}
  .tw-view-toggle button.active{color:#fff;background:var(--forest);border-color:var(--forest);}
  .tw-map-filters{display:flex;flex-wrap:wrap;gap:10px 16px;margin:0 0 14px;padding:12px 14px;background:var(--sand);border:1px solid var(--line);border-radius:12px;}
  .tw-map-filters label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;white-space:nowrap;}
  .tw-unified-map-wrap{position:relative;margin-bottom:18px;}
  .tw-unified-map{height:520px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--sand);}
  .tw-unified-map .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.85);}
  .tw-map-cluster{width:100%;height:100%;background:var(--forest);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:13px;box-shadow:0 0 0 4px rgba(18,53,38,.25);}
  .tw-map-panel{position:absolute;top:14px;right:14px;bottom:14px;width:320px;max-width:calc(100% - 28px);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(18,38,28,.25);overflow-y:auto;z-index:1000;}
  .tw-map-panel-close{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:none;background:rgba(18,38,28,.08);color:var(--ink);font-size:18px;line-height:1;cursor:pointer;z-index:2;}
  .tw-map-panel-close:hover{background:rgba(18,38,28,.16);}
  .tw-map-panel-body{padding:16px;}
  .tw-map-panel-photo{width:100%;height:140px;background-size:cover;background-position:center;background-color:var(--sand-dim);border-radius:10px;margin-bottom:10px;}
  .tw-map-panel-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--water-deep);font-weight:700;margin-bottom:4px;}
  .tw-map-panel-body h4{margin:0 0 8px;font-family:var(--serif);font-size:17px;color:var(--ink);}
  .tw-map-panel-row{font-size:12.5px;color:var(--ink-soft);margin-bottom:5px;}
  .tw-map-panel-row a{color:var(--water-deep);text-decoration:none;}
  .tw-map-panel-details{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin:8px 0;}
  .tw-map-panel-cta{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:#fff;background:var(--water-deep);border-radius:7px;padding:7px 12px;text-decoration:none;}
  .tw-map-panel-cta:hover{background:var(--forest);}
  .tw-map-panel-cta-secondary{display:block;background:var(--sand);color:var(--water-deep);border:1px solid var(--line);margin-top:0;margin-bottom:10px;}
  .tw-map-panel-cta-secondary:hover{background:var(--sand-dim);}
  .tw-map-panel-weather{margin:4px 0 10px;}
  .tw-map-panel-weather-cond{font-size:12px;color:var(--ink-soft);margin-bottom:6px;}
  .tw-map-panel-weather-pills{display:flex;gap:6px;}
  .tw-map-panel-weather-pills .weather-pill{min-width:0;flex:1;padding:6px 4px;border-radius:10px;align-items:center;}
  .tw-map-panel-weather-pills .weather-pill .label{font-size:8.5px;}
  .tw-map-panel-weather-pills .weather-pill .value{font-size:14px;}
  .tw-map-panel-weather .weather-error{font-size:11.5px;color:var(--ink-soft);}
  /* Explicit [hidden] overrides -- display rules above would otherwise beat the attribute (see v1.6.6 offline-bar bug). */
  .tw-unified-map-wrap[hidden],.loc-cols[hidden],.tw-map-panel[hidden],.atf-empty[hidden]{display:none !important;}
  /* Panel close button: bigger touch target. */
  .tw-map-panel-close{width:36px;height:36px;}
  @media (max-width:640px){
    .tw-unified-map{height:400px;}
    .tw-map-panel{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:60vh;}
  }
  @media (max-width:600px){
    .atf-credit{flex-direction:column;align-items:flex-start;}
    .atf-grid{grid-template-columns:1fr;}
  }

  /* Samsung TV (Tizen 9 / Samsung Internet 8) draws Leaflet 1.9's
     mix-blend-mode:plus-lighter tiles blended against the map background,
     washing the whole map out to near-white. Confirmed on a 2024 Q60D with
     a side-by-side test 2026-10-05: normal blend = map visible. */
  .app .leaflet-container img.leaflet-tile{mix-blend-mode:normal;}

  /* Species tabs on the native feeding card (v1.7.7) */
  .app .feeding-species{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px;}
  .app .feeding-species button{font:inherit;font-size:12.5px;padding:8px 12px;min-height:36px;border-radius:18px;border:1px solid rgba(0,0,0,.15);background:#fff;color:inherit;cursor:pointer;}
  .app .feeding-species button.active{background:var(--water-deep);border-color:var(--water-deep);color:#fff;}

  /* "Live river data only" filter (v1.8.0) */
  .app .tw-map-filters label.tw-live-only{color:var(--water-deep);padding-left:14px;border-left:1px solid var(--line);}
  .app .tw-map-filters label.tw-live-only #twLiveCount{font-weight:500;opacity:.75;}