/* Lake-effect snow tracker (lakesnow.html). Owner's map-page rule: the map fills the window height, controls and panels
   in a right sidebar; stacked on phones. Site tokens from mf.css. */
.ls-page{background:var(--bg)}
.ls{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:0;height:calc(100vh - 64px);height:calc(100dvh - 64px)}
.ls-mapcol{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--line)}
.ls-bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line)}
.ls-seg{display:flex;gap:4px}
.ls-seg button,.ls-tabs button,.ls-play,.ls-step,.ls-zoom button,.ls-mini button{font:600 12.5px Inter,system-ui,sans-serif;padding:5px 10px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.ls-seg button[aria-pressed="true"],.ls-tabs button[aria-selected="true"],.ls-mini button[aria-pressed="true"]{background:var(--navy);color:#f4efe5;border-color:var(--navy)}
.ls-seg button small{font-weight:500;opacity:.7;margin-left:4px}
.ls-sel{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.ls-sel select{font:500 12.5px Inter,system-ui,sans-serif;padding:5px 8px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--ink);max-width:230px}
.ls-chk{font-size:12.5px;display:flex;align-items:center;gap:4px;color:var(--ink-2);white-space:nowrap}
.ls-mapbox{position:relative;flex:1;min-height:0;background:#dfe6ec;overflow:hidden;touch-action:none}
.ls-mapbox canvas{display:block;width:100%;height:100%;cursor:crosshair}
.ls-legend{position:absolute;right:8px;bottom:8px;background:#fffefbee;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:11px;color:var(--ink-2);max-width:270px;pointer-events:none}
.ls-legend .bar{display:flex;height:10px;border-radius:2px;overflow:hidden;margin:3px 0 2px;border:1px solid #0001}
.ls-legend .bar i{flex:1}
.ls-legend .tk{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px}
.ls-legend .ck{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.ls-legend .ck span{display:inline-flex;align-items:center;gap:3px}
.ls-legend .ck i{width:10px;height:10px;border-radius:2px;display:inline-block}
.ls-read{position:absolute;z-index:3;background:rgba(13,16,20,.94);color:#f4efe5;font-size:12px;line-height:1.45;padding:7px 9px;border-radius:8px;box-shadow:0 6px 18px #0004;max-width:260px;pointer-events:none}
.ls-read b{color:#fff}.ls-read span{color:#d9c49a}
.ls-zoom{position:absolute;left:8px;bottom:8px;display:flex;flex-direction:column;gap:4px}
.ls-zoom button{width:34px;height:34px;padding:0;font-size:17px;background:#fffefbee}
.ls-msg{position:absolute;inset:auto 0 45% 0;text-align:center;font-size:14px;color:var(--ink-2)}
.ls-msg:empty{display:none}
.ls-time{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--card);border-top:1px solid var(--line)}
.ls-time input{flex:1;min-width:0;accent-color:#b8975a}
.ls-time .vt{font:700 13px var(--mono);white-space:nowrap}
.ls-time .lead{font:500 12px var(--mono);color:var(--ink-3);white-space:nowrap}
.ls-play{min-width:38px}
.ls-side{overflow-y:auto;padding:10px 12px 30px;background:var(--bg);min-height:0}
.ls-warn{font-size:12.5px;line-height:1.45;margin:2px 0 8px;padding:8px 10px;border-radius:8px;background:#fff3d6;border:1px solid #e8cf8f;color:#5a4410}
.ls-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 10px}
.ls-tabs button{padding:5px 8px;font-size:12px}
.ls-tabs button i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.ls-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 10px;box-shadow:var(--shadow)}
.ls-h{font-size:13px;font-weight:700;margin:0 0 8px;display:flex;align-items:center;gap:6px;letter-spacing:.01em}
.ls-empty{font-size:12.5px;color:var(--ink-3)}
.ls-big{display:flex;align-items:center;gap:12px}
.ls-big .num{font:800 40px/1 Inter,system-ui,sans-serif;min-width:64px;text-align:center;border-radius:10px;padding:8px 6px;color:#fff}
.ls-big .cat{font-weight:700;font-size:15px}
.ls-big .sub{font-size:12px;color:var(--ink-2);line-height:1.45}
.ls-spark{width:100%;height:auto;display:block;margin-top:8px;cursor:pointer}
.ls-spark text{font:9.5px Inter,system-ui,sans-serif;fill:var(--ink-3)}
.ls-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
.ls-kv div{background:var(--line-2);border-radius:7px;padding:5px 8px;font-size:11.5px;color:var(--ink-2)}
.ls-kv b{display:block;font:700 14px Inter,system-ui,sans-serif;color:var(--ink)}
.ls-axis{font-size:12.5px;line-height:1.5;margin-top:8px;color:var(--ink-2)}
.ls-axis b{color:var(--ink)}
.ls-g{display:grid;grid-template-columns:118px minmax(0,1fr) 54px;align-items:center;gap:4px 8px;padding:5px 0;border-top:1px solid var(--line-2);font-size:12px}
.ls-g:first-of-type{border-top:0}
.ls-g .nm{color:var(--ink);font-weight:600;line-height:1.25;display:flex;align-items:center;gap:4px}
.ls-g .nm small{display:block;font-weight:500;color:var(--ink-3);font-size:10.5px}
.ls-g .val{font:700 12px var(--mono);text-align:right}
.ls-gb{position:relative;height:14px;border-radius:4px;overflow:hidden;display:flex;border:1px solid #0001}
.ls-gb i{height:100%}
.ls-gb .mk{position:absolute;top:-2px;bottom:-2px;width:3px;margin-left:-1.5px;background:var(--navy);border-radius:2px;box-shadow:0 0 0 1.5px #fff}
.ls-g .wt{grid-column:2/4;font-size:10.5px;color:var(--ink-3);margin-top:-2px}
.ls-st-g{color:#1e7a46}.ls-st-a{color:#a36a00}.ls-st-r{color:#b3261e}.ls-st-n{color:var(--ink-3)}
.ls-tbl{overflow-x:auto;margin:0 -4px}
.ls-tbl table{border-collapse:separate;border-spacing:1px;font-size:10.5px;min-width:100%}
.ls-tbl th{font-weight:600;color:var(--ink-3);text-align:left;white-space:nowrap;padding:1px 4px;position:sticky;left:0;background:var(--card);z-index:1}
.ls-tbl thead th{position:static;text-align:center;font-family:var(--mono);font-size:9.5px;padding:0 1px}
.ls-tbl td{min-width:15px;height:15px;border-radius:2px;text-align:center;font:600 9px var(--mono);color:#fff;cursor:pointer}
.ls-tbl td.cur{outline:2px solid var(--navy);outline-offset:0}
.ls-tbl .g{background:#2e8b57}.ls-tbl .a{background:#e0a526}.ls-tbl .r{background:#c8473d}.ls-tbl .n{background:#cfd5db}
.ls-note{font-size:11.5px;color:var(--ink-3);line-height:1.45;margin:6px 0 0}
.ls-ap{border-top:1px solid var(--line-2);padding:8px 0}
.ls-ap:first-of-type{border-top:0;padding-top:2px}
.ls-ap h3{margin:0;font-size:13px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.ls-ap h3 b{font-family:var(--mono)}
.ls-ap h3 small{font-weight:500;color:var(--ink-3);font-size:11.5px}
.ls-ap h3 .pill{margin-left:auto;font:700 11px Inter,system-ui,sans-serif;color:#fff;border-radius:999px;padding:2px 8px}
.ls-ap .row{font-size:12px;color:var(--ink-2);line-height:1.5;margin-top:3px}
.ls-ap .row b{color:var(--ink)}
.ls-ap .shadow{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#efe7d6;color:#6e5529;border-radius:4px;padding:1px 5px;margin-right:4px}
.ls-strip{display:flex;gap:1px;margin-top:3px}
.ls-strip i{flex:1;height:9px;border-radius:1px}
.ls-mini{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 6px}
.ls-mini button{padding:3px 8px;font-size:11.5px}
.ls-src p{font-size:11.5px;color:var(--ink-2);line-height:1.5;margin:0}
.ls-bt table{width:100%;border-collapse:collapse;font-size:11.5px}
.ls-bt th,.ls-bt td{padding:3px 4px;border-bottom:1px solid var(--line-2);text-align:right}
.ls-bt th:first-child,.ls-bt td:first-child{text-align:left}
@media(max-width:900px){
  .ls{display:block;height:auto}
  .ls-mapcol{height:72vh;height:72dvh;border-right:0;border-bottom:1px solid var(--line)}
  .ls-side{overflow:visible;padding:10px 12px 30px}
  .ls-bar{gap:6px 10px;padding:6px 10px}
  .ls-sel select{max-width:180px}
}
@media(max-width:520px){
  .ls-mapcol{height:66vh;height:66dvh}
  .ls-chk{font-size:11.5px}
  .ls-legend{max-width:190px;font-size:10px;padding:4px 6px}
  .ls-legend .ck{display:none}
  .ls-g{grid-template-columns:96px minmax(0,1fr) 50px}
  .ls-big .num{font-size:32px;min-width:54px}
}