/* /wind/ (D-015, Concept E). Light page in the site's shell (base.css: fonts, hero, breadcrumb, footer).
   Mode language: Live = green dot, What if = orange dashed square, Replay = teal triangle, Typical = navy square.
   Each is a color AND a glyph AND a word; the map gets a matching frame and badge. */
.wind-page{--mist:#EEF2F3;--ink:#22303B;--muted:#56636D;--soft:#5E6B75;--line:#DCE3E7;--card:#fff;--link:#1f6fb2;
 --live:#1E8E4E;--liveT:#187A42;--sim:#C8641A;--simT:#A84E0E;--rep:#0F7C80;--repT:#0D6E72;--typ:#1F4E79;
 /* Lake Day wind words, light to dark; the hue drifts from aqua to ink so neighbours differ in hue as well as
    lightness (Light, Light-Moderate and Moderate fill most of the heatmap) */
 --b0:#ECF1F3;--b1:#B7E7EC;--b2:#7FCAE7;--b3:#559FDA;--b4:#3874BD;--b5:#2D4D8B;--b6:#1A2C53;
 --f1:var(--font-primary);--f2:var(--font-secondary);background:var(--mist);color:var(--ink);
 /* one gutter for the breadcrumb, the stage and the text, so every left edge lines up (content 1280 px at most) */
 --gut:max(clamp(16px,4vw,64px),calc((100vw - 1280px) / 2))}
/* the hero as on /dam/ (the family's other new pages): 256 px, quiet grey nav pills; phones use the tab bar only */
.wind-page .page-hero{height:256px;background-image:url('/wind/hero-1600.jpg')} /* resized copies of the site's 2 MB hero photo */
@media (max-width:600px){.wind-page .page-hero{height:240px;background-image:url('/wind/hero-900.jpg')}.wind-page .top-nav{display:none}.wind-page .brand-logo{width:40px;height:40px}}
.wind-page .breadcrumb{max-width:none;padding:1rem var(--gut) 0}
.stage a,.windmain a{color:var(--link)} /* not the hero nav, footer or tab bar: they keep base.css's colours */
.wind-page button{font:inherit;color:inherit}
.wind-page :focus-visible{outline:3px solid var(--link);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.no-js .modes,.no-js .lakebox,.no-js .js-only{display:none!important}
.no-js .stage{grid-template-columns:minmax(0,520px);min-height:0;background:none} /* without scripts: the reading only, then the text */
.b0{fill:var(--b0);background:var(--b0)}.b1{fill:var(--b1);background:var(--b1)}.b2{fill:var(--b2);background:var(--b2)}.b3{fill:var(--b3);background:var(--b3)}
.b4{fill:var(--b4);background:var(--b4)}.b5{fill:var(--b5);background:var(--b5)}.b6{fill:var(--b6);background:var(--b6)}

/* ---------- stage: panel column + lake column ---------- */
.stage{display:grid;grid-template-columns:minmax(340px,410px) minmax(0,1fr);gap:clamp(16px,2.5vw,40px);
 padding:14px var(--gut) 20px;background:var(--mist)} /* the land around the lake is the map's own (relief.webp) */
.mast{align-self:start;padding-top:4px}
.panel{background:rgba(255,255,255,.92);border-radius:18px;padding:.9rem 1.1rem 1.05rem;box-shadow:0 10px 30px rgba(34,48,59,.08);border-top:4px solid var(--live);transition:border-color .2s}
.stage.sim .panel{border-top-color:var(--sim)}.stage.rep .panel{border-top-color:var(--rep)}
.stage.live.stale .panel,.stage.live.stale .readout{border-top-color:#A9B4BC} /* an old reading is not live: grey, hollow dot */
.modes{display:flex;background:#E4E9EC;border-radius:99px;padding:3px;gap:2px;margin-bottom:.85rem}
.modes button{flex:1;font:600 .84rem var(--f1);border:0;background:transparent;color:var(--muted);padding:.55rem .4rem;border-radius:99px;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;gap:.45rem;min-height:40px}
.modes button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.ic{display:inline-block;flex:none;vertical-align:-1px}
.ic{width:11px;height:11px;background:center/contain no-repeat}
.ic.live{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='%231E8E4E'/%3E%3C/svg%3E")}
.ic.sim{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.25' y='1.25' width='9.5' height='9.5' rx='1.5' fill='none' stroke='%23C8641A' stroke-width='2' stroke-dasharray='3 1.75'/%3E%3C/svg%3E")}
.ic.rep{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 1L11 6L2 11Z' fill='%230F7C80'/%3E%3C/svg%3E")}
.ic.stale{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.25' fill='none' stroke='%2356636D' stroke-width='1.5'/%3E%3C/svg%3E")}
.ic.typ{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1' y='1' width='10' height='10' rx='2' fill='%231F4E79'/%3E%3C/svg%3E")}
.wait{font-size:.95rem;color:var(--muted)}
.state{display:flex;align-items:center;gap:.4rem;font:600 .8rem var(--f1);flex-wrap:wrap;margin:0}
.stage.live .state b{color:var(--liveT)}.stage.live.stale .state b{color:var(--muted)}.stage.sim .state b{color:var(--simT)}.stage.rep .state b{color:var(--repT)}
.state .what{color:var(--muted);font-weight:500}
.speed{font:700 2.9rem/1 var(--f1);margin:.35rem 0 0;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:.5rem}
.speed small{font-size:1rem;color:var(--muted);font-weight:600;margin-left:-.3rem}
.speed .dir{font:600 1.05rem var(--f1);flex-basis:100%;margin-top:.3rem}
.speed.calm small{display:none}.speed.calm .dir{font-weight:500;color:var(--muted)} /* calm: the word is the answer, the speed under it */
.wordline{margin:.5rem 0 0;font-size:1rem;color:#33424D}.wordline b{font-family:var(--f1);font-weight:700}
.acts{display:flex;flex-wrap:wrap;gap:.35rem;margin:.55rem 0 0;padding:0;list-style:none}
.acts li{font-size:.86rem;border:1px solid var(--line);border-radius:99px;padding:.1rem .55rem;background:#fff}.acts b{font-weight:600}
.waves{font-size:.92rem;margin:.65rem 0 0;color:#33424D}
.waves:empty:not(.keep){display:none} /* .keep: a line that will fill in keeps its place (wind.js steadyLayout) */
.sub2{font-size:.86rem;color:var(--soft);margin:.55rem 0 0}
/* Now: the 30-year average for this hour and month (typical: navy square), so a reading can be judged as usual or not */
.typnow{display:flex;gap:.45rem;align-items:flex-start;font-size:.86rem;color:var(--soft);margin:.5rem 0 0;padding-top:.5rem;border-top:1px solid #EDF1F4}
.typnow .ic{margin-top:.32em}
.ctl{margin-top:.7rem}
.ctl label{display:flex;justify-content:space-between;font:600 .8rem var(--f1);color:var(--muted);margin-top:.55rem}
.ctl output{color:var(--ink)}
.ctl input[type=range]{width:100%;margin-top:.25rem;height:28px}
.ctl.sim input{accent-color:var(--sim)}.ctl.rep input{accent-color:var(--rep)}
.repnote{font-size:.86rem;color:var(--repT);background:#E6F3F3;border-radius:10px;padding:.45rem .65rem;margin:0}
.tmrow{display:flex;gap:.5rem;align-items:center}
.play{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:.8rem;color:var(--repT)}
.presets{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.6rem;position:relative}
.presets button{font:600 .76rem var(--f1);padding:.4rem .65rem;border-radius:99px;border:1px solid var(--line);background:#fff;cursor:pointer;min-height:32px}
.presets button[aria-pressed=true]{border-color:var(--rep);color:var(--repT);background:#E6F3F3}

/* the lake */
.lakebox{position:relative;margin:0;align-self:start;display:flex;flex-direction:column;align-items:stretch;border-radius:20px;border:2px solid transparent;transition:border-color .2s}
.stage.sim .lakebox{border:2px dashed rgba(200,100,26,.7)}
.stage.rep .lakebox{border-color:rgba(15,124,128,.55)}
.lakesvg{min-height:400px;container-type:inline-size;display:flex;align-items:center;justify-content:center;position:relative}
.lakebox{overflow:hidden;overflow:clip} /* the land fades out inside the frame */
.lakehead,.cap{position:relative;z-index:2}
.lakesvg .relief,.lakesvg canvas{position:absolute;pointer-events:none;max-width:none}
.lakesvg canvas.shade{image-rendering:auto}
.lakesvg svg.lake{position:relative}
.lakewait{color:var(--soft);font-size:.9rem}
svg.lake{width:100%;height:max(420px,calc(100svh - 450px));max-height:760px;display:block;margin-top:4px;overflow:visible}
/* never taller than the drawing at the column's width (1000 x 1046), or a narrow column gets a small lake in a tall box */
svg.lake{height:min(max(420px,calc(100svh - 450px)),104.6cqw)}
.lake .shore path{fill:none;stroke:#5D93BC;stroke-width:1.4;vector-effect:non-scaling-stroke}
/* place names: water names in italics, as on a chart; quiet, with a paper halo */
.lake .names text{font-family:var(--f2);font-style:italic;fill:#4E5D68;paint-order:stroke;stroke:rgba(244,240,229,.9);stroke-linejoin:round}
.lake .names text.dam{font-family:var(--f1);font-style:normal;font-weight:600;fill:var(--ink)}
.rough{fill:#fff;stroke:#13304F}
.sens circle{fill:var(--rep);stroke:#fff}
.sens text{font-family:var(--f1);font-weight:600;paint-order:stroke;stroke:rgba(244,240,229,.9);stroke-linejoin:round;fill:var(--repT)}
/* the line that says what the map shows, under the mode badge */
.lakehead{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;padding:12px 14px 0}
.badge{display:inline-flex;align-items:center;gap:.45rem;font:700 .72rem var(--f1);letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.92);border-radius:99px;padding:.32rem .7rem;box-shadow:0 2px 8px rgba(34,48,59,.08);margin:0}
.stage.live .badge{color:var(--liveT)}.stage.sim .badge{color:var(--simT)}.stage.rep .badge{color:var(--repT)}.stage.live.stale .badge{color:var(--muted)}
.says{font:600 1.1rem/1.38 var(--f1);color:var(--ink);margin:0;max-width:40em;text-wrap:pretty;min-height:1.38em}
/* a narrow map column (tablets): the badge leads the sentence on its line, as on phones, so the line takes less height */
.lakebox{container:lakebox/inline-size}
@container lakebox (max-width:560px){.lakehead{display:block}.lakehead .badge{vertical-align:2px;margin-right:.35rem}.lakehead{padding:10px 10px 0}.badge{font-size:.66rem}.lakehead .says{display:inline;font-size:.98rem}.badge .bdate{display:none}}
.cmpbox{position:absolute;right:12px;top:64px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.compass{width:76px;height:76px;display:block}
.compass .o{fill:rgba(255,255,255,.92);stroke:#CFD8DD}.compass text{font:700 13px var(--f1);fill:var(--muted)}.compass text.c{font-size:15px;fill:var(--ink)}
.compass .ar{stroke:var(--ink);stroke-width:3.5;stroke-linecap:round}.compass .ah{fill:var(--ink)}
.compass .calm{fill:none;stroke:var(--ink);stroke-width:3}.compass .calmd{fill:var(--ink)}
.cmpl{margin:0;font:700 .74rem var(--f1);color:var(--ink);background:rgba(255,255,255,.92);border-radius:99px;padding:.12rem .5rem;white-space:nowrap}
.cmpl:empty{display:none}
.cap{font-size:.84rem;color:var(--soft);display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.2rem;padding:.5rem 14px .7rem}
.wkey{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;color:var(--muted);font-weight:600}
.stage.calm .wk-wind,.stage.calm .wk-ramp,.stage.calm .wk-rough{visibility:hidden} /* hidden in place: a calm reading in Replay does not resize the map */
.wkey .mdl{font-weight:400;color:var(--soft);margin-left:.1rem}
.ramp{display:inline-block;width:90px;height:9px;border-radius:5px;background:linear-gradient(90deg,#CDE2F0,#8EBEE0,#2F6FA6,#13304F)}
/* the wind lines: a white line fading in from its tail, on water */
.wkey .windmk{display:inline-block;width:26px;height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff) center/16px 2px no-repeat,#6E9FC8}
.wkey .roughmk{display:inline-block;width:11px;height:11px;transform:rotate(45deg);background:#fff;border:2px solid #13304F;margin:0 .1rem}

/* ---------- body ---------- */
.windmain{padding:2.4rem var(--gut) 3.5rem;line-height:1.5}
.windmain>section:first-child{margin-top:0}
/* the page's sections, under the reading (desktop: beside the map) */
.jump{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.jump a{font:600 .8rem var(--f1);text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:99px;padding:.4rem .8rem}
.windmain section{margin-top:3.4rem}
.kicker{display:flex;align-items:center;gap:.45rem;font:600 .8rem var(--f1);margin:0 0 .45rem}
.kicker.typ{color:var(--typ)}.nw{white-space:nowrap}.kicker.rep{color:var(--repT)}
.windmain h2{font:700 clamp(1.45rem,2.6vw,1.9rem)/1.15 var(--f1);margin:0}
.windmain .h2b{margin-top:3rem}
.intro{max-width:68ch;color:var(--muted);margin:.45rem 0 0}
.card{background:var(--card);border-radius:20px;box-shadow:0 6px 24px rgba(34,48,59,.06);padding:1.2rem 1.3rem}
.card h3{font:700 1rem var(--f1);margin:0}
.srow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;margin-top:1.4rem}
.scard{background:#fff;border-radius:20px;padding:1rem 1rem .9rem;box-shadow:0 6px 24px rgba(34,48,59,.06);display:flex;flex-direction:column}
.scard h3{font:700 1.08rem var(--f1);margin:0}.scard h3 span{font:500 .85rem var(--f2);color:var(--soft);margin-left:.3rem}
.scard p{font-size:.95rem;color:#33424D;margin:.5rem 0 0}.scard p b{font-weight:600}
.rose{width:100%;height:auto;display:block}
.rose-grid{fill:none;stroke:#E3E8EB}.rose path{stroke:#fff;stroke-width:.5}
.rose-calm{fill:#fff;stroke:#DDE3E7}.rose-calm-t{font:700 14px var(--f1);fill:var(--ink)}.rose-calm-l{font:400 11px var(--f2);fill:var(--soft)}
.rose-card{font:700 15px var(--f1);fill:var(--muted)}
.bar{display:flex;height:10px;border-radius:4px;overflow:hidden;margin-top:.55rem}
.bar span{display:block;height:100%}
.legend,.hkey{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.86rem;color:var(--muted);margin:1rem 0 0;padding:0;list-style:none}
.legend i,.hkey i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:.35rem;vertical-align:-1px}
.legend i.b0,.hkey i.b0{border:1px solid #cfd8df}
.numbers{margin-top:.9rem;font-size:.92rem}
.numbers summary{font:600 .86rem var(--f1);cursor:pointer;color:var(--link);display:inline-block}
.tscroll{overflow-x:auto;margin-top:.6rem;-webkit-overflow-scrolling:touch}
.windmain table{border-collapse:collapse;background:#fff;border-radius:12px;font-size:.88rem;min-width:100%}
.windmain caption{text-align:left;font-size:.85rem;color:var(--muted);padding:.4rem 0}
.windmain th,.windmain td{padding:.35rem .6rem;border-bottom:1px solid #EDF1F4;text-align:left;white-space:nowrap}
.windmain td{font-variant-numeric:tabular-nums}
.heatwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.6rem;margin-top:3rem;align-items:center}
.heatcard h2{font-size:clamp(1.3rem,2.2vw,1.6rem)!important}
.heatcard .c{font-size:.92rem;color:var(--muted);margin:.3rem 0 0}
.heathost{min-height:200px;position:relative;border-radius:8px}
/* the card for the cell being read: shown at once, no delay (pointer, tap, or the arrow keys) */
svg.heat{touch-action:pan-y;cursor:default}
.heat .hring{fill:none;stroke:var(--ink);stroke-width:2;pointer-events:none}
.heat .hhour rect{fill:var(--ink)}.heat .hhour text{font:700 11.5px var(--f1);fill:#fff}
.heat .axis.m.on{fill:var(--ink);font-weight:700}
.heat .axis{transition:opacity .12s}
.htip{position:absolute;left:0;top:0;z-index:5;width:max-content;max-width:min(290px,100%);pointer-events:none;background:#fff;color:#33424D;
 border-radius:12px;padding:.6rem .8rem .65rem;font-size:.84rem;line-height:1.38;box-shadow:0 12px 32px rgba(19,48,79,.18),0 1px 3px rgba(19,48,79,.14)}
.htip::after{content:'';position:absolute;left:var(--ax,50%);bottom:-6px;width:12px;height:12px;margin-left:-6px;background:#fff;transform:rotate(45deg);border-radius:2px}
.htip.below::after{bottom:auto;top:-6px}
.htip p{margin:0}
.htip .tt-h{font:700 .78rem var(--f1);letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.htip .tt-v{display:flex;align-items:center;gap:.45rem;margin-top:.3rem;font-size:.95rem;color:var(--ink)}
.htip .tt-v i{width:14px;height:14px;border-radius:4px;flex:none}.htip .tt-v i.b0{border:1px solid #cfd8df}
.htip .tt-v b{font:700 1rem var(--f1);white-space:nowrap}.htip .tt-v span{color:#33424D;font-variant-numeric:tabular-nums;white-space:nowrap}
.htip .tt-c{font-size:.8rem;color:var(--soft);margin-top:.1rem;padding-left:calc(14px + .45rem)}
.htip .tt-m{margin-top:.45rem;padding-top:.45rem;border-top:1px solid #EDF1F4;font-size:.8rem}
.htip .tt-s{margin-top:.3rem;font-size:.74rem;color:var(--soft);display:flex;align-items:center;gap:.35rem}
.htip .tt-s::before{content:'';width:9px;height:9px;border-radius:2px;background:var(--typ);flex:none}
.heat{width:100%;height:auto;display:block;margin-top:.8rem}
.axis{font:400 12px var(--f2);fill:#5E6B75}.axis.m{font-weight:600;fill:#33424D}
.ann{font:600 12px var(--f1);fill:#13304F;paint-order:stroke;stroke:#fff;stroke-width:3px}
.annl{stroke:#13304F;stroke-width:1.2;fill:none}
.facts{list-style:none;display:grid;gap:1rem;margin:0;padding:0}
.facts li{padding-left:1rem;border-left:3px solid #C9D9E8;font-size:1rem}.facts b{font-family:var(--f1);font-weight:700}
.agree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.2rem}
.agree .card p{font-size:.93rem;color:#33424D;margin:.5rem 0 0}
.agree .card .lkey{margin-top:.3rem}
.map3d{padding:0;overflow:hidden}.map3d img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;background:#DDE5EA}.map3d h3,.map3d p{padding:0 1.3rem}.map3d h3{margin-top:1rem}.map3d p{padding-bottom:1.2rem}
.dn{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.5rem}
.dn figure{margin:0;text-align:center}.dn figcaption{font:600 .82rem var(--f1);color:var(--muted)}
.dn .rose-card{font-size:16px}.dn .rose-calm-t{font-size:16px}.dn .rose-calm-l{font-size:12px}
.nws{width:100%;height:auto;display:block;margin-top:.5rem}
.lkey{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:.86rem;color:var(--muted);margin:0}
.lkey span::before{content:'';display:inline-block;width:22px;vertical-align:middle;margin-right:.4rem}
.k-ktpl::before{border-top:2.5px solid var(--typ)}.k-nws::before{border-top:2px dashed #7D8B97}
.k-lake::before{border-top:2.5px solid var(--rep)}.k-air::before{border-top:2px dashed #7D8B97}.k-chop::before{border-top:1.5px dotted #A84E0E}
.line{fill:none;stroke-linejoin:round}.line.ktpl{stroke:var(--typ);stroke-width:2.4}.line.nws{stroke:#7D8B97;stroke-width:2;stroke-dasharray:5 4}
.line.lake{stroke:var(--rep);stroke-width:1.8}.line.air{stroke:#7D8B97;stroke-width:1.4;stroke-dasharray:4 3}
.chopl{stroke:#A84E0E;stroke-width:1;stroke-dasharray:2 3}
.grid{stroke:#EDF1F4}.grid.day{stroke:#DCE3E8}
.tick{fill:var(--rep)}
.cursor{stroke:var(--sim);stroke-width:1.5}.cursor-d{fill:var(--rep);stroke:#fff;stroke-width:2}
.repcard{margin-top:1.3rem;border-top:4px solid var(--rep)}
.repsrc{font-size:.86rem;color:var(--repT);margin:.4rem 0 0}
.rchart{cursor:crosshair;min-height:210px}
.replay{width:100%;height:auto;display:block;margin-top:.6rem}
.hint{font-size:.9rem;color:var(--muted);margin:.5rem 0 0}
.linkbtn{background:none;border:0;color:var(--link);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1rem}
.cmp div{background:#F4F7F8;border-radius:12px;padding:.8rem .9rem}.cmp b{font:700 1.02rem var(--f1);display:block}.cmp span{font-size:.9rem;color:#33424D;display:block;margin-top:.2rem}
#q details{border-bottom:1px solid var(--line);padding:.9rem 0}
#q summary{font:600 1.02rem var(--f1);cursor:pointer}
#q details p{margin:.5rem 0 0;max-width:70ch;color:#33424D}
.src{font-size:.92rem;color:#33424D}.src ol{padding-left:1.2rem;display:grid;gap:.55rem;margin-top:.9rem;max-width:90ch}
.src .how{margin-top:1.1rem;background:#fff;border-radius:12px;padding:.8rem 1rem}

@media (max-width:1100px){.agree{grid-template-columns:1fr 1fr}.map3d{grid-column:1/-1}.map3d img{aspect-ratio:21/9}}
@media (max-width:980px){.srow{grid-template-columns:1fr 1fr}.heatwrap{grid-template-columns:1fr}}
/* tablet: a narrower panel, so the lake column stays wide enough to read (the two columns keep the controls and the
   lake on screen together while you drag) */
@media (max-width:1000px){.stage{grid-template-columns:minmax(290px,330px) minmax(0,1fr)}}
/* phone: mode switch, then the reading (Now) or the lake (What if, Replay) */
@media (max-width:760px){
 .stage{display:flex;flex-direction:column;min-height:0;gap:0;padding:8px 16px 16px}
 .mast,.panel{display:contents}
 .modes{order:1;margin-bottom:0}
 .lakebox{order:2;min-height:0;margin-top:.7rem;display:block;align-self:stretch} /* full width even when its key is laid over the map */
 .lakesvg{min-height:0;display:block}
 svg.lake{max-height:none;height:auto;aspect-ratio:1000/1046}
 svg.lake{height:min(104.6cqw,64svh);aspect-ratio:auto}
 /* answer first: in Now the reading comes before the map; in What if and Replay the map comes first and the controls
    sit right under it, so you can drag and watch */
 .stage.live .readout{order:2}.stage.live .lakebox{order:3}
 .readout{order:3;background:rgba(255,255,255,.94);border-radius:18px;padding:.8rem 1rem 1rem;box-shadow:0 10px 30px rgba(34,48,59,.08);margin-top:.7rem;border-top:4px solid var(--live);display:flex;flex-direction:column}
 .stage.sim .readout{border-top-color:var(--sim)}.stage.rep .readout{border-top-color:var(--rep)}
 .no-js .readout{order:0;margin-top:0}
 .compass{width:58px;height:58px}.cmpbox{right:4px}.cmpl{font-size:.68rem}
 .lakehead{padding:2px 2px 0;gap:.3rem}.badge{font-size:.66rem}.says{font-size:.98rem}.badge .bdate{display:none} /* the day buttons give the date */
 /* the state line, then the sliders right under the map, so you can drag and watch (E-REVIEW round 1) */
 .readout .nowlive{display:contents}.readout>*,.nowlive>*{order:3}.readout .wait,.readout .state{order:0}.readout .ctl{order:1;margin-top:.4rem;margin-bottom:.6rem}
 .cap{padding:0 6px 6px;gap:.2rem .9rem}
 .stage .jump{order:5;margin-top:.9rem}
 .ramp{width:60px}
 /* What if and Replay: drag and watch. A shorter map, its key on the empty land at its upper left (under the badge), and no repeated
    state line (the badge on the map says it), so on a phone the map and both sliders (or the time slider and the
    reading) fit one screen above Safari's toolbar and the tab bar. The model note is in the panel text. */
 .stage.sim svg.lake,.stage.rep svg.lake{height:min(104.6cqw,44svh)}
 /* the key on the land at the map's lower left (the drawing's south-west corner is land) */
 .stage.sim .cap,.stage.rep .cap{position:absolute;left:6px;bottom:6px;display:grid;justify-items:start;gap:.15rem;padding:.3rem .45rem;font-size:.72rem;pointer-events:none;background:rgba(246,243,234,.9);border-radius:8px}
 .stage.sim .cap .ramp,.stage.rep .cap .ramp{width:36px}
 .stage.sim .cap .lg,.stage.rep .cap .lg{display:none}
 /* the mode badge leads the sentence, on one line with it */
 .lakehead{display:block}.lakehead .badge{vertical-align:2px;margin-right:.35rem}.lakehead .says{display:inline}
 .stage.sim .readout .state,.stage.rep .readout .state,.stage.rep .ctl.rep label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .stage.rep .ctl.rep{display:contents}
 .stage.rep .ctl.rep>*{order:3}.stage.rep .ctl.rep .repnote,.stage.rep .ctl.rep .tmrow{order:1}
 .stage.rep .repnote{margin-bottom:.4rem}
 .stage.rep .readout .speed,.stage.rep .readout .wordline{order:2}
 .stage.rep .readout .speed{margin-top:.5rem}
 .srow{gap:.7rem}.scard{padding:.75rem}.scard h3 span{display:block;margin:0}.scard p{font-size:.88rem}
}
@media (max-width:760px){.cmp,.agree{grid-template-columns:1fr}.map3d img{aspect-ratio:16/9}}
/* phones and touch tablets: the Replay day chips are one row that scrolls sideways, not three rows of 44 px buttons */
@media (max-width:760px),(pointer:coarse){
 #days{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:.7rem -1rem 0;padding:0 1rem 2px;scroll-padding:0 1rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 1rem,#000 calc(100% - 1.5rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 1rem,#000 calc(100% - 1.5rem),transparent)}
 #days::-webkit-scrollbar{display:none}
 #days button{flex:none}
}
/* touch: 44 px targets */
@media (pointer:coarse){
 .modes button{min-height:44px}
 .presets button{min-height:44px;padding:.4rem .8rem;font-size:.82rem}
 .play{width:44px;height:44px}
 .ctl input[type=range]{height:44px;margin-top:0}
 .jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 .95rem}
 .numbers summary{padding:.7rem 0}
}
@media (max-width:400px){.srow{grid-template-columns:1fr 1fr}}