/* built by tools/build_site.py */
/* The map page (static/map.html): layout, the search pill, the panel, the footer. Type and paper colors come
   from common.css; band colors for the river lines live here so the map follows the day and night theme. */
/* River lines lean blue, like water: the three good bands run deep river blue to slate, Marginal and Poor keep the site's
   amber and red because they are warnings, and a reach without a score is a pale steel blue drawn thinner. Matt, Sep 18. */
:root{--b-ex:#1c5d78;--b-vg:#3c88a3;--b-good:#5b7d90;--b-marg:#a7741f;--b-poor:#b23a2a;--b-closed:#b23a2a;--b-na:#7b93a6;--hdh:54px}
html[data-theme="night"]{--b-ex:#7ecbe6;--b-vg:#a9c9db;--b-good:#d9e5ee;--b-marg:#E9DDBD;--b-poor:#E8794F;--b-closed:#E8794F;--b-na:#8ea3b5}
body.mappage .c-Excellent{color:var(--b-ex)}body.mappage .c-VeryGood{color:var(--b-vg)}body.mappage .c-Good{color:var(--b-good)}
/* after dark the topo tiles stay but are turned down: the relief and the place names remain readable, the paper goes dusk */
html[data-theme="night"] .leaflet-tile-pane{filter:brightness(.58) saturate(.72) contrast(1.06)}
body.mappage{margin:0;overflow-x:hidden}
body.mappage header.top{position:relative;z-index:40}
body.mappage .detail{z-index:200}
/* The map stops short of the bottom of the window so the footer's first lines show beneath it: a reader can see there is a
   page below the map and scroll to it (Matt, Sep 18). */
.mapwrap{display:flex;flex-direction:column;height:calc(100dvh - var(--hdh) - 128px);min-height:460px}
/* The stage is the map column and, on a desktop, the card beside it: the card never covers the state (Matt, Sep 18). On a phone the
   card is a sheet over the map (the phone rules below). */
.stage{flex:1;position:relative;min-height:0;background:var(--paper3)}
.mapcol{position:absolute;inset:0}
.lmap{position:absolute;inset:0;z-index:0;background:var(--paper3)}
.leaflet-container{font-family:var(--body);background:var(--paper3)}
.leaflet-control-attribution{font:400 10px var(--body)!important;background:var(--paper)!important;color:var(--ink3)!important;opacity:.88}
.leaflet-control-attribution a{color:var(--ink3)!important}
.leaflet-bar{border:1px solid var(--rule2)!important;box-shadow:none!important;border-radius:6px!important;overflow:hidden}
.leaflet-bar a{background:var(--paper)!important;color:var(--ink)!important;border-bottom-color:var(--rule)!important}
.leaflet-tooltip.tt{font:400 13px var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--rule2);border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.08);padding:3px 8px}
.leaflet-tooltip.tt::before{display:none}
.rl{font:italic 400 13px var(--display);color:var(--ink);white-space:nowrap;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;letter-spacing:.01em;text-shadow:0 0 3px var(--paper),0 0 6px var(--paper)}
.z-lo .rl{display:none}
.you{transform:translate(-50%,-50%)}
.you span{display:block;width:14px;height:14px;border-radius:50%;background:var(--ink);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--ink),0 0 0 9px rgba(28,26,23,.14)}
.you i{position:absolute;left:20px;top:-3px;font:400 12.5px var(--body);white-space:nowrap;color:var(--ink);text-shadow:0 0 3px var(--paper),0 0 3px var(--paper),0 0 4px var(--paper)}
.stage .boot{position:absolute;inset:0;z-index:35;margin:0;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--paper)}
.stage .boot[hidden]{display:none}
.toast{position:absolute;z-index:45;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--on-ink);font-size:14px;padding:10px 16px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.2);max-width:calc(100% - 32px)}
/* the search pill */
.search{position:absolute;z-index:30;top:12px;left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 32px))}
.search .box{display:flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--rule2);border-radius:999px;padding:5px 6px 5px 16px;box-shadow:0 8px 28px rgba(0,0,0,.14)}
.search .mag{width:16px;height:16px;flex:none;color:var(--ink3)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 16.5px var(--body);color:var(--ink);padding:7px 0;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--ink3)}
.search input::-webkit-search-cancel-button{display:none}
.search .clr{border:0;background:none;color:var(--ink3);font-size:20px;line-height:1;padding:2px 6px;cursor:pointer;display:none}
.search.has .clr{display:block}
.search .loc{flex:none;display:inline-flex;align-items:center;gap:7px;border:0;background:var(--ink);color:var(--on-ink);border-radius:999px;padding:9px 14px;cursor:pointer;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.search .loc svg{width:14px;height:14px}
.search .loc[disabled]{opacity:.65;cursor:default}
.search .dd{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--paper);border:1px solid var(--rule2);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.18);display:none;max-height:min(460px,62vh);overflow-y:auto}
.search .dd.on{display:block}
.dd .g{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding:9px 14px 3px;border-top:1px solid var(--rule)}
.dd .g:first-child{border-top:0}
.dd .it{display:flex;align-items:baseline;gap:10px;padding:8px 14px;cursor:pointer;font-size:15.5px;color:var(--ink)}
.dd .it:hover,.dd .it.k{background:var(--paper2)}
.dd .it small{color:var(--ink3);font-size:12.5px;margin-left:auto;white-space:nowrap}
.dd .it .bw{font:500 10.5px var(--mono);letter-spacing:.04em;text-transform:uppercase}
.dd .it.act{font-style:italic;color:var(--ink2);border-top:1px solid var(--rule)}
.dd .none{padding:12px 14px;color:var(--ink3);font-size:14px;font-style:italic}
/* the panel */
.panel{position:absolute;z-index:25;top:66px;right:16px;bottom:16px;width:380px;background:var(--paper);border:1px solid var(--rule2);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.18);overflow-y:auto;color:var(--ink)}
.panel.hid{display:none}
.panel .handle{display:none}
.panel .pl{padding:14px 18px 20px}
.panel .ph{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.panel .ph h3{font:italic 400 22px/1.15 var(--display);margin:0;letter-spacing:.005em}
.panel .ph .back{margin-left:auto;flex:none;background:none;border:0;cursor:pointer;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);padding:4px 0}
.panel .sub{font-size:14.5px;color:var(--ink2);margin:0 0 10px;font-style:italic;line-height:1.4}
.panel .sub b{font-style:normal;font-weight:500;color:var(--ink)}
.panel .sub a{color:inherit}
.panel .note{font-size:12.5px;color:var(--ink3);font-style:italic;line-height:1.4}
.panel .msg{padding:8px 0 12px;font-size:15.5px;color:var(--ink2);line-height:1.45}
.panel .lnk{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule2);text-underline-offset:3px}
.li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:9px 0;border-top:1px solid var(--rule);cursor:pointer}
.li .r,.li .n{grid-column:1}
.li .sc{grid-column:2;grid-row:1/3;align-self:center;text-align:right;line-height:1.05}
.li .r{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.li .n{font-size:16px;line-height:1.25}
.li .sc b{font:400 26px/1 var(--display);display:block}
.li .sc small{font:500 10px var(--mono);letter-spacing:.05em;text-transform:uppercase;display:block;margin-top:2px}
.li .mi{font:400 12px var(--mono);color:var(--ink3);letter-spacing:.02em}
.li:hover{background:var(--paper2)}
.li.busy{opacity:.5}
.li.rv .n{font:italic 400 18px/1.15 var(--display)}
.li.rv .sc small+small{color:var(--ink3);font-weight:400;letter-spacing:.06em;font-size:9.5px}
.panel .members{font-size:14px;color:var(--ink2);border-left:2px solid var(--rule2);padding:2px 0 2px 10px;margin:10px 0 12px}
.panel .members b{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:block;margin-bottom:2px}
/* the corner controls */
.mapctl{position:absolute;z-index:18;left:16px;bottom:34px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;pointer-events:none}
.mapctl>*{pointer-events:auto}
.legend{display:flex;gap:10px;flex-wrap:wrap;font:400 11.5px var(--body);color:var(--ink2);background:var(--paper);padding:5px 10px;border-radius:4px;border:1px solid var(--rule);opacity:.94}
.legend i{display:inline-block;width:14px;height:3px;vertical-align:middle;margin-right:5px;border-radius:2px}
.legend i.dash{background:repeating-linear-gradient(90deg,var(--b-closed) 0 4px,transparent 4px 7px)}
.stampline{font:400 10.5px var(--mono);color:var(--ink3);letter-spacing:.02em;background:var(--paper);padding:3px 8px;border-radius:3px;opacity:.94}
.stampline b{font-weight:500;color:var(--ink2)}
.stampline.stale b{color:var(--amber)}
.stampline.stale::after{content:" · older than usual";color:var(--amber)}
/* the peek strip and the footer */
.peek{flex:none;height:44px;width:100%;border:0;border-top:1px solid var(--rule2);background:var(--paper);color:var(--ink2);font:italic 400 15px var(--display);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.peek:hover{color:var(--ink)}
/* The footer is the site's index: the rivers by basin as a full-width directory (a band dot before each name, no
   wrapping, no rules), then the about column and the site's lists. Links underline only on hover. */
footer.site{background:var(--paper);border-top:1px solid var(--rule2);padding:40px 32px 44px;color:var(--ink);position:relative}
footer.site .totop{position:absolute;right:32px;top:14px;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);text-decoration:none;border:0}
footer.site .rindex{max-width:1280px;margin:0 auto 38px;padding-bottom:30px;border-bottom:1px solid var(--rule)}
footer.site .rhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;margin:0 0 20px}
footer.site .rhead h4{margin:0}
footer.site .rlede{margin:0;font-size:14.5px;color:var(--ink2);max-width:none}
footer.site .rlegend{display:flex;flex-wrap:wrap;gap:6px 14px;font:400 12.5px var(--body);color:var(--ink3);margin-left:auto}
footer.site .rlegend span{display:inline-flex;align-items:center;gap:6px}
footer.site .dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;background:var(--b-na);opacity:.55}
footer.site .dot.b-Excellent{background:var(--b-ex);opacity:1}footer.site .dot.b-VeryGood{background:var(--b-vg);opacity:1}footer.site .dot.b-Good{background:var(--b-good);opacity:1}
footer.site .dot.b-Marginal{background:var(--b-marg);opacity:1}footer.site .dot.b-Poor{background:var(--b-poor);opacity:1}
footer.site .dot.b-Closed{background:transparent;border:1.5px dashed var(--b-closed);opacity:1;width:7px;height:7px}
footer.site .basins{columns:4;column-gap:40px}
footer.site .basin{break-inside:avoid;margin:0 0 22px}
footer.site .basin h5{font:italic 400 17px var(--display);letter-spacing:-.01em;color:var(--ink);margin:0 0 6px}
footer.site .basin ul{list-style:none;margin:0;padding:0}
footer.site .basin li{display:flex;align-items:center;gap:9px;font-size:14.5px;line-height:1.35;padding:3px 0;color:var(--ink);white-space:nowrap}
footer.site .basin li a{color:var(--ink);text-decoration:none;border:0}
footer.site .basin li a:hover{text-decoration:underline;text-decoration-color:var(--ink3);text-underline-offset:3px}
footer.site .basin li .bw{margin-left:6px;font:500 9.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--b-closed)}
footer.site .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer.site .fdrawn{max-width:none;font-size:13.5px;line-height:1.55;color:var(--ink3);margin:4px 0 0}
footer.site .fdrawn b{color:var(--ink2);font-weight:500}
footer.site .fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;max-width:1280px;margin:0 auto}
footer.site .fabout .fleuron{font-size:20px;margin:0 0 14px;color:var(--ink)}
footer.site p{font-size:15px;line-height:1.5;color:var(--ink2);margin:0 0 10px;max-width:38em}
footer.site .fsm{font-size:13px;color:var(--ink3)}
footer.site h4{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 8px}
footer.site ul+h4{margin-top:18px}
footer.site ul{list-style:none;margin:0 0 6px;padding:0}
footer.site li{font-size:14.5px;line-height:1.45;margin:0 0 5px;color:var(--ink2)}
footer.site a{color:var(--ink);text-decoration:none;border:0}
footer.site .fcols a:hover,footer.site .colophon-line a:hover{text-decoration:underline;text-decoration-color:var(--ink3);text-underline-offset:3px}
footer.site .fbottom{display:flex;justify-content:space-between;align-items:baseline;gap:32px;max-width:1280px;margin:30px auto 0;border-top:1px solid var(--rule);padding-top:14px}
footer.site .colophon-line{margin:0;font-size:13px;color:var(--ink3);line-height:1.5;max-width:70em}
footer.site .fnote{margin:0;white-space:nowrap}
/* desktop: the card is a column beside the map; this block sits after the card's base rules on purpose, so it wins */
@media (min-width:641px){
  .stage{display:flex;flex-direction:row;align-items:stretch}
  .mapcol{position:relative;inset:auto;flex:1;min-width:0}
  .panel{position:relative;top:auto;right:auto;bottom:auto;flex:none;width:380px;margin:12px 16px 12px 0;align-self:stretch}
}
@media (max-width:640px){
  /* Phone (Matt, Sep 18): no sheet over the map. The page stacks: the map with Montana filling its width, then the list in the
     flow beneath it, then the footer. Tapping a river or Find me fits the map and scrolls the page back to it. */
  footer.site{padding:28px 16px 36px}
  footer.site .totop{position:static;display:inline-block;margin-bottom:16px}
  footer.site .rhead{gap:6px 12px}footer.site .rlegend{margin-left:0}
  footer.site .basins{columns:2;column-gap:22px}footer.site .basin li{font-size:13.5px}
  footer.site .fcols{grid-template-columns:1fr;gap:26px}
  footer.site .fbottom{flex-direction:column;gap:8px}footer.site .fnote{white-space:normal}
  .mapwrap{height:auto;min-height:0}
  .stage{display:block;flex:none;position:relative}
  .mapcol{position:relative;inset:auto;height:clamp(300px,64vw + 96px,420px)}
  .search{top:10px;width:calc(100% - 20px)}
  .search .loc span{display:none}.search .loc{padding:9px 10px}
  .panel{position:static;top:auto;right:auto;bottom:auto;width:auto;height:auto;margin:0;border:0;border-top:1px solid var(--rule2);border-radius:0;box-shadow:none;overflow:visible}
  .panel .handle{display:none}
  .panel .pl{padding:16px 16px 22px}
  .mapctl{left:10px;bottom:10px;gap:4px}.legend{display:none}
  .leaflet-control-zoom{display:none}
  .peek{display:none}
}