/* Southwest River Watch: shared styles for the river maps (San Juan, Escalante, Moab).
   Same look as the Virgin map (public/virgin/index.html), trimmed to what watch.js draws. */
:root{--ink:#08171f;--panel:#0e2431;--panel2:#14313f;--line:#1f4557;
 --text:#e4f0f5;--dim:#8bb0c0;--ok:#5ad6a0;--warn:#ffc247;--surge:#ff8a3d;--flood:#ff4230;
 --glass:rgba(8,23,31,.9);--panelW:400px;--sheetVis:150px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--text);
 font-family:"Inter","Helvetica Neue",Helvetica,system-ui,sans-serif;font-size:16px;line-height:1.4}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #7fdcea;outline-offset:2px}
a{color:#7fdcea}

#app{position:fixed;inset:0}
#map{position:absolute;inset:0;background:#0a1a22;touch-action:none;overflow:hidden}
.leaflet-container{background:#0a1a22;font-family:inherit}
.leaflet-control-attribution{background:rgba(8,23,31,.75)!important;color:#6b8a99!important;font-size:10px!important}
.leaflet-control-attribution a{color:#8bb0c0!important}
.leaflet-bottom{bottom:var(--sheetVis)}
.rlbl{background:none;border:0;box-shadow:none;color:#cbb08f;font-size:11px;font-weight:600;
 text-shadow:0 0 3px #000,0 0 7px #000,0 0 10px #000;padding:0;white-space:nowrap}
.rlbl:before{display:none}
/* mountains (river.js mountains, peaks): old-map lettering in sand, quieter than the river */
.rmtn,.rpk{background:none;border:0;box-shadow:none;padding:0;white-space:nowrap;color:#d9bf92;text-shadow:0 0 3px #000,0 0 7px #000;pointer-events:none}
.rmtn:before,.rpk:before{display:none}
.rmtn{font:italic 500 11.5px/1 Georgia,"Times New Roman",serif;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.rpk{font:italic 500 11px/1 Georgia,"Times New Roman",serif;opacity:.9}
.rpk-tri{width:0!important;height:0!important;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid #d9bf92;
 filter:drop-shadow(0 0 2px #000);background:none}
.gt{background:rgba(8,23,31,.9);border:1px solid var(--line);border-radius:6px;color:var(--text);
 font-size:12.5px;font-weight:700;padding:1px 6px;box-shadow:none;font-variant-numeric:tabular-nums}
.gt:before{display:none}
.gt i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;vertical-align:middle}
.gt.tr{font-size:11px;font-weight:600;padding:0 5px;opacity:.8;color:#b9d2dd;border-color:#1a3a49}
.gt.sel{border-color:#7fdcea}

/* "this river continues on its own map" chip at a branch's end */
.rlink-wrap{background:none;border:0}
/* styled like the place labels (.rlbl), in river blue, so the map's own river stays the focus */
.leaflet-container a.rlink,.rlink{display:inline-block;transform:translate(calc(-100% - 8px),-50%);white-space:nowrap;color:#9fe3f2;
 font-size:11px;font-weight:600;text-decoration:none;text-shadow:0 0 3px #000,0 0 7px #000,0 0 10px #000}
.leaflet-container a.rlink:hover{color:#fff;text-decoration:underline}
#dbody .golink{display:inline-block;margin-top:4px;border:1px solid #3a7f96;background:#123d4c;color:#e4f0f5;border-radius:8px;padding:6px 12px;text-decoration:none;font-weight:600}

.lakechip{display:inline-block;transform:translate(-50%,-50%);white-space:nowrap;background:rgba(8,23,31,.92);border:1px solid #2f6278;
 border-radius:99px;color:#cfe0e6;font-size:12px;font-weight:600;padding:3px 10px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.lakechip b{color:#7fdcea}
.key .lakek{display:inline-block;width:18px;height:10px;border-radius:3px;background:rgba(63,182,211,.4);border:1px solid #8fe6f5;margin-right:6px;vertical-align:-1px}
.lake .big b{font-size:26px;font-weight:730;letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums}
.lake .big b em{font-size:13px;font-style:normal;color:var(--dim);font-weight:500;margin-left:4px}
.lake p{margin:2px 0 8px}
.lake svg{display:block;width:100%;height:auto}
.lkbar{position:relative;height:8px;border-radius:99px;background:#16323d;margin:10px 0 34px}
.lkfill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#2c6f86,#7fdcea)}
.lkm{position:absolute;top:-3px;width:2px;height:14px;background:#cfe0e6;transform:translateX(-1px)}
.lkm small{position:absolute;top:16px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10.5px;line-height:1.2;color:var(--dim);text-align:center}
.lkm.lo small{left:0;transform:none;text-align:left}.lkm.hi small{left:auto;right:0;transform:none;text-align:right}

/* header */
#hud{position:absolute;top:0;left:0;right:0;z-index:900;padding:10px 62px 0 10px;
 padding-top:max(10px,env(safe-area-inset-top));pointer-events:none}
#hud>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:9px;background:var(--glass);border:1px solid var(--line);
 border-radius:12px;padding:8px 8px 8px 13px}
.brand h1{min-width:0;flex:0 1 auto;margin:0;font-size:17px;font-weight:750;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand h1 a{color:inherit;text-decoration:none}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;animation:bp 2.4s ease-in-out infinite}
@keyframes bp{0%,100%{opacity:1}50%{opacity:.25}}
#meta{margin-left:auto;font-size:12.5px;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
#refresh{width:30px;height:30px;border-radius:8px;font-size:17px;color:var(--dim);flex:none}
@media (max-width:420px){.brand h1{font-size:15.5px}.brand{gap:7px;padding-left:11px}}
@media (max-width:480px){.brand h1 .w{display:none}}
.wx{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px;padding:8px 12px;border-radius:10px;
 background:#3a1409;border:1px solid #6b2410;cursor:pointer;width:100%;text-align:left}
.wx.watch{background:var(--glass);border-color:var(--line);padding:5px 11px;gap:8px;width:max-content;max-width:100%}
.wx i{width:9px;height:9px;border-radius:50%;background:var(--flood);flex:none;box-shadow:0 0 0 4px rgba(255,66,48,.22)}
.wx.watch i{width:7px;height:7px;background:var(--warn);box-shadow:none}
.wx>div{flex:1 1 0;min-width:0}
.wx.watch>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx b{font-size:14.5px;font-weight:700;letter-spacing:-.015em;color:#ffdccb;margin-right:6px}
.wx.watch b{font-size:12.5px;font-weight:650;color:#ffe6ae}
.wx span{font-size:13px;color:#e0b9a5}
.wx.watch span{font-size:12.5px;color:#d7c79d}
#rdr{display:flex;align-items:center;gap:9px;margin-top:6px;padding:6px 6px 6px 11px;border-radius:10px;
 background:var(--glass);border:1px solid var(--line);font-size:12.5px;color:var(--dim);width:max-content;max-width:100%;
 font-variant-numeric:tabular-nums}
#rdr[hidden]{display:none}
#rdr .prog{display:none}
#rdr.playing{flex-wrap:wrap;background:#2a2410;border-color:#8a6d1c;color:#ffd27a}
#rdr.playing .prog{display:block;flex-basis:100%;height:4px;border-radius:2px;background:#4a3d16;overflow:hidden}
#rdr.playing .prog b{display:block;height:100%;width:0;background:#ffd27a;transition:width .5s linear}
.leaflet-radar-pane .leaflet-layer{transition:opacity .6s ease}

/* map controls */
#ctl{position:absolute;right:10px;top:max(10px,env(safe-area-inset-top));z-index:900;display:flex;flex-direction:column;gap:6px}
#ctl button{width:42px;height:42px;border-radius:11px;background:var(--glass);border:1px solid var(--line);
 display:grid;place-items:center;color:var(--text)}
#ctl button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#ctl .zoom{display:flex;flex-direction:column;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:var(--glass)}
#ctl .zoom button{border:0;border-radius:0;background:none;font-size:21px;font-weight:500}
#ctl .zoom button+button{border-top:1px solid var(--line)}
#ctl button[aria-pressed="true"]{background:#123d4c;border-color:#3fa8c4;color:#bff0fb}

/* map key (desktop) */
.key div{display:flex;align-items:center;gap:9px;margin:4px 0;font-size:12.5px;color:var(--dim)}
.key i{flex:none;display:inline-block}
.key .dot2{width:9px;height:9px;border-radius:50%}
.key .dash{width:26px;height:0;border-top:2px dashed #a9e3f2}
.key .thick{width:26px;height:6px;border-radius:3px;background:#48c8e0}
#mapkey{display:none}

/* bottom sheet (phone) / side panel (desktop) */
#sheet{position:absolute;left:0;right:0;bottom:0;z-index:950;height:calc(100% - 52px);
 background:var(--ink);border-radius:18px 18px 0 0;border-top:1px solid var(--line);
 box-shadow:0 -10px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;
 transform:translateY(calc(100% - var(--sheetVis)));transition:transform .26s cubic-bezier(.2,.8,.2,1)}
#sheet.drag{transition:none}
.grab{flex:none;touch-action:none;cursor:grab;padding:0 0 2px}
.handle{width:40px;height:5px;border-radius:3px;background:#2f5566;margin:8px auto 6px}
#status{display:flex;gap:11px;width:100%;text-align:left;padding:4px 14px 10px}
#status i{width:4px;border-radius:2px;background:var(--ok);flex:none;align-self:stretch}
#status b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
#status span{display:block;font-size:13.5px;color:var(--dim);margin-top:2px}
.views{display:flex;gap:6px;padding:0 14px 10px;overflow-x:auto;scrollbar-width:none}
.views::-webkit-scrollbar{display:none}
.views button{white-space:nowrap;border:1px solid var(--line);border-radius:16px;padding:5px 12px;font-size:13px;color:var(--dim)}
.views button.on{color:var(--text);border-color:#3a7f96;background:var(--panel2)}
.sbody{flex:1;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--line);
 padding-bottom:calc(var(--sheetHid,0px) + 90px + env(safe-area-inset-bottom))}

/* detail card pinned to the top of the list */
.detail{position:relative;margin:10px 10px 6px;border:1px solid #2f6278;border-radius:12px;background:var(--panel)}
.detail[hidden]{display:none}
#dclose{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:9px;font-size:23px;color:var(--dim)}
#dbody{padding:12px 14px 14px;font-size:13.5px;color:var(--dim);line-height:1.5}
#dbody>:first-child{padding-right:36px}
#dbody .dt{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.015em;margin:0 0 4px}
#dbody .big b{font-size:26px;font-weight:730;letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums}
#dbody .big b em{font-size:13px;font-style:normal;color:var(--dim);font-weight:500;margin-left:4px;letter-spacing:0}
#dbody h3{margin:12px 0 3px;font-size:12.5px;font-weight:700;color:var(--text)}
#dbody p{margin:0 0 6px}
#dbody .nws{white-space:pre-line;font-size:12.5px}
#dbody svg{display:block;width:100%;height:auto;margin:6px 0 2px}
#dbody .cats{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}
#dbody .cats span{border:1px solid var(--line);border-radius:8px;padding:2px 7px;font-size:12px;font-variant-numeric:tabular-nums}
#dbody .cats span.hit{border-color:var(--flood);color:#ffd9d2}
#dbody .hide{margin-top:10px;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:13px;color:var(--text)}

/* sections + list */
.sec{padding:15px 14px;border-bottom:1px solid var(--line)}
.sec h2{margin:0 0 3px;font-size:15px;font-weight:700;letter-spacing:-.015em}
.sec p{margin:0 0 9px;font-size:13px;color:var(--dim)}
.sec[hidden]{display:none}
table{width:100%;border-collapse:collapse;font-size:14px}
td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top}
td:last-child{text-align:right;font-variant-numeric:tabular-nums}
td small{display:block;font-size:12px;color:var(--dim)}
td .pl{font-size:14.5px;font-weight:650;color:var(--text)}
td .at{font-size:16px;font-weight:700;color:var(--text)}
tr.past{opacity:.55}
.ghead{padding:15px 14px 5px;border-bottom:1px solid var(--line)}
.ghead b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em}
.ghead span{font-size:12.5px;color:var(--dim)}
.g{display:block;width:100%;text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);border-left:3px solid transparent}
.g.sel{background:var(--panel)}
.g.stale{opacity:.6}
.r1{display:flex;align-items:baseline;gap:10px}
.r1 span{font-size:15px;font-weight:600;letter-spacing:-.015em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r1 strong{font-size:22px;font-weight:730;letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
.r1 strong em{font-size:12px;font-style:normal;color:var(--dim);font-weight:500;margin-left:3px;letter-spacing:0}
.r2{display:flex;align-items:center;gap:10px;margin-top:2px;font-size:12.5px;color:var(--dim);flex-wrap:wrap}
.r2 svg{margin-left:auto;flex:none}
.alerts{display:block;padding:14px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;background:var(--panel);width:100%;text-align:left}
.alerts b{display:block;font-size:15px;font-weight:650}
.alerts span{font-size:13px;color:var(--dim)}
details.how{padding:12px 14px 22px}
details.how summary{font-size:13.5px;color:var(--dim);cursor:pointer}
details.how p,details.how li{font-size:13px;color:var(--dim);line-height:1.55}
details.how ul{padding-left:18px}
.legal{margin:0;padding:6px 14px 20px;font-size:11.5px;line-height:1.5;color:#6b8a99}
.legal a{color:#8bb0c0}
.err{padding:0 14px;color:var(--flood);font-size:14px}
.err:not(:empty){padding:12px 14px}
.skel{padding:14px;color:var(--dim);font-size:13.5px}

@media (min-width:900px){
  #map{right:var(--panelW)}
  #hud{left:12px;right:auto;top:12px;padding:0;width:min(620px,calc(100% - var(--panelW) - 90px))}
  .views{flex-wrap:wrap;overflow:visible}
  #ctl{right:calc(var(--panelW) + 12px);top:12px}
  .leaflet-bottom{bottom:0}
  #mapkey{display:block;position:absolute;z-index:850;bottom:28px;right:calc(var(--panelW) + 12px);
    background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
  #sheet{left:auto;top:0;width:var(--panelW);height:auto;border-radius:0;border-top:0;
    border-left:1px solid var(--line);box-shadow:none;transform:none!important}
  .handle{display:none}
  .grab{cursor:default;padding-top:12px}
  #status{cursor:default}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* the river before the data: a thin line draws itself in and breathes, then grows into its real width */
.rskel{stroke-dasharray:1;stroke-dashoffset:1;animation:rdraw 2.4s ease-out forwards}
.rskel.wait{animation:rdraw 2.4s ease-out forwards,rbreathe 1.8s ease-in-out 2.4s infinite}
@keyframes rdraw{to{stroke-dashoffset:0}}
@keyframes rbreathe{50%{opacity:.35}}
.rgrow{animation:rgrow 1.6s cubic-bezier(.2,.7,.2,1)}
@keyframes rgrow{from{stroke-width:1.5px;stroke:#5cc4e6;stroke-opacity:.8}}
@media (prefers-reduced-motion:reduce){.rskel,.rgrow{animation:none!important}.rskel{stroke-dasharray:none}}

/* the control column can tuck away (only its show/hide button stays); bigger map on desktop slides the panel off */
#ctl.min>*:not(#ctltog){display:none}
#ctltog svg{transition:transform .2s}
#ctl.min #ctltog svg{transform:rotate(180deg)}
@media (min-width:900px){
  #map,#ctl,#mapkey{transition:right .26s}
  #sheet{transition:transform .26s}
  #app.full #map{right:0}
  #app.full #ctl,#app.full #mapkey{right:12px}
  #app.full #sheet{transform:translateX(100%)!important}
}
.key .rampk{width:26px;height:8px;border-radius:4px;background:linear-gradient(90deg,#2c5f78,#3fa8c4,#7fdcea,#eaf4f2,#ffd27a,#ff8a3d,#ff4230)}
/* gauge card extras: chart period, notes, budget */
.per{display:flex;gap:6px;margin:6px 0 10px}
.per button{border:1px solid var(--line);border-radius:14px;padding:4px 11px;font-size:12.5px;color:var(--dim);background:none}
.per button.on{color:var(--text);background:#123d4c;border-color:#3fa8c4}
.cap{margin-top:10px;padding:10px 12px;border:1px solid #34506a;background:#101f2c;border-radius:9px;font-size:13px;color:var(--dim);line-height:1.5}
.cap b{color:var(--text)}
.cap table.bud{width:100%;margin:6px 0;font-size:12.5px}.cap table.bud td:last-child{text-align:right;white-space:nowrap}.cap small{opacity:.75}
#etasec .more{color:#7fdcea;font-size:13px;padding:6px 0;background:none;border:0}
#etasec tr[hidden]{display:none}
#etasec td.passed{color:#ff8a3d;font-size:13px;text-align:left}
/* washes to watch */
.wsub{margin:0 0 8px;font-size:12.5px;color:var(--dim);line-height:1.45}
.wrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 0;border:0;border-top:1px solid var(--line);background:none;color:inherit;font:inherit;cursor:pointer}
.wrow>div{flex:1;min-width:0}
.wrow.on b{color:#ffd27a}
.wrow b{display:block;font-size:14px;color:var(--text)}
.wrow small{font-size:12px;color:var(--dim)}
.wrow .wl{flex:none;text-align:right;font-size:12px;color:var(--dim);max-width:46%}
.wrow .wl i{display:inline-block;font-style:normal;font-weight:650;padding:2px 8px;border-radius:10px;margin-bottom:2px}
.wrow .wl i.l0{background:none;padding:0;color:var(--dim);font-weight:500}
.wrow .wl i.l1{background:none;padding:0;color:#9fc0cf}.wrow .wl i.l2{background:none;padding:0;color:#ffc247}
.wrow .wl i.l3{background:#3b2a10;color:#ffc247}
.winfo{padding:0 0 10px;font-size:12.5px;color:var(--dim);line-height:1.5}
.winfo p{margin:0 0 6px}.winfo b{color:var(--text)}
.wsrc{font-size:11.5px}.wsrc summary{cursor:pointer;color:var(--dim);text-decoration:underline dotted}