@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:wght@600;700;800&family=Roboto:wght@300;400;500;700&display=swap");
:root{--bg:#f3f3f1;--panel:#fff;--line:rgba(0,0,0,.1);--line2:rgba(0,0,0,.2);--text:#151515;--muted:#707070;--cyan:#e20000;--lime:#e20000;--shadow:0 24px 70px rgba(0,0,0,.2);--mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--sans:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--sans)}body{overflow-x:hidden}button,input,select{font:inherit}button{color:inherit}.app-shell{min-height:100vh;background:radial-gradient(circle at 50% -20%,rgba(56,127,146,.18),transparent 40%),var(--bg)}
.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid var(--line)}.brand{color:var(--text);text-decoration:none;display:flex;align-items:center;gap:10px;letter-spacing:-.02em}.brand strong{color:var(--cyan)}.brand small{color:var(--muted);border-left:1px solid var(--line2);padding-left:10px;font-size:10px;text-transform:uppercase;letter-spacing:.15em}.brand-mark{width:28px;height:28px;border:1px solid rgba(97,232,255,.45);border-radius:50%;display:grid;align-content:center;gap:3px;padding:6px;box-shadow:inset 0 0 14px rgba(97,232,255,.12)}.brand-mark i{display:block;height:1px;border-radius:9px;background:var(--cyan);transform-origin:center}.brand-mark i:nth-child(1){width:9px;transform:rotate(-12deg)}.brand-mark i:nth-child(2){width:15px}.brand-mark i:nth-child(3){width:11px;margin-left:4px;transform:rotate(12deg)}
.topbar-meta,.source-pill,.utc-clock{display:flex;align-items:center}.topbar-meta{gap:22px}.source-pill{gap:8px;color:#a9bdc5;font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em}.pulse,.status-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(199,243,107,.08),0 0 14px rgba(199,243,107,.6)}.utc-clock{gap:8px;font-family:var(--mono)}.utc-clock span{color:var(--muted);font-size:10px;letter-spacing:.14em}.utc-clock strong{font-size:13px;font-weight:500}
.workspace{height:calc(100vh - 100px);min-height:670px;display:grid;grid-template-columns:292px minmax(460px,1fr) minmax(390px,34vw)}.controls-panel{padding:30px 24px 24px;border-right:1px solid var(--line);overflow-y:auto}.eyebrow{color:var(--cyan);font-size:9px;font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.18em}.controls-panel h1{margin:0;color:var(--cyan);font:500 9px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lede{color:var(--muted);font-size:12px;line-height:1.6;margin:0 0 24px}.control-section{border-top:1px solid var(--line);padding:19px 0 18px}.section-label{display:flex;gap:9px;align-items:center;color:#bed0d6;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;margin-bottom:15px}.section-label>span:first-child{color:var(--cyan);font-family:var(--mono);font-size:9px}.field-label{display:block;color:var(--muted);font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px}.field-label[hidden]{display:none}.date-row{display:grid;grid-template-columns:1fr 76px;gap:8px}
input,select{width:100%;color:var(--text);background:#08131c;border:1px solid var(--line2);border-radius:7px;outline:none;transition:border .2s,box-shadow .2s}input:focus,select:focus{border-color:rgba(97,232,255,.58);box-shadow:0 0 0 3px rgba(97,232,255,.08)}input,.wide-select{height:39px;padding:0 10px;font-family:var(--mono);font-size:11px}select{height:39px;padding:0 9px;font-size:11px}input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.55}.time-actions{display:grid;grid-template-columns:38px 1fr 38px;gap:8px;margin-top:8px}.icon-button,.quiet-button,.refresh-button{border:1px solid var(--line);background:rgba(255,255,255,.015);border-radius:7px;cursor:pointer}.icon-button{height:34px;color:#a9bdc5}.quiet-button{color:var(--muted);font-size:10px}.icon-button:hover,.quiet-button:hover,.refresh-button:hover{border-color:rgba(97,232,255,.35);color:var(--cyan)}.location-name{font-size:13px;font-weight:700;margin:-2px 0 11px}.coordinate-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.coordinate-row label{color:var(--muted);font-family:var(--mono);font-size:8px;letter-spacing:.12em}.coordinate-row input{margin-top:5px}.primary-button{width:100%;height:41px;margin-top:10px;border:0;border-radius:7px;background:var(--cyan);color:#05202a;display:flex;align-items:center;justify-content:space-between;padding:0 13px;font-size:11px;font-weight:800;cursor:pointer;box-shadow:0 10px 28px rgba(97,232,255,.12)}.primary-button:hover{background:#8cf0ff;transform:translateY(-1px)}.data-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px;border-radius:8px;background:rgba(199,243,107,.035);border:1px solid rgba(199,243,107,.12)}.data-note-icon{color:var(--lime);font-size:17px;line-height:1}.data-note p{margin:0;font-size:9px;color:var(--muted);line-height:1.5}.data-note strong{color:#cbd9dd;font-size:10px}
.map-stage{position:relative;min-width:0;overflow:hidden;border-right:1px solid var(--line);background:#07131d}#map{position:absolute;inset:0;background:#07131d}.leaflet-container{font-family:var(--sans)}.leaflet-container.polar-map{background:#0c2338}.leaflet-control-zoom{border:1px solid var(--line2)!important;box-shadow:var(--shadow)!important}.leaflet-control-zoom a{color:#abc0c8!important;background:rgba(7,16,24,.9)!important;border-color:var(--line)!important}.leaflet-control-attribution{color:#738892!important;background:rgba(7,16,24,.72)!important;font-size:8px!important}.leaflet-control-attribution a{color:#8da3ac!important}.map-toolbar{position:absolute;z-index:500;left:20px;top:20px;right:20px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.map-toolbar>div:first-child{padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:rgba(7,16,24,.78);backdrop-filter:blur(18px);box-shadow:var(--shadow)}.map-kicker{color:var(--cyan);font-family:var(--mono);font-size:8px;letter-spacing:.13em;text-transform:uppercase}.map-toolbar h2{font-size:14px;margin:5px 0 0;letter-spacing:-.02em}.load-chip{display:flex;align-items:center;gap:7px;padding:8px 10px;background:rgba(7,16,24,.8);border:1px solid var(--line);border-radius:999px;color:#a5b9c0;font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.08em;backdrop-filter:blur(12px)}.load-chip span{width:5px;height:5px;border-radius:50%;background:var(--lime)}.map-hint{position:absolute;z-index:500;left:50%;bottom:24px;transform:translateX(-50%);white-space:nowrap;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(7,16,24,.82);color:#9ab0b8;font-size:9px;backdrop-filter:blur(14px);pointer-events:none}.map-hint span{color:var(--cyan);margin-right:5px}.map-value{position:absolute;z-index:560;min-width:138px;transform:translate(14px,-50%);padding:9px 11px;border:1px solid rgba(255,255,255,.18);border-left:2px solid #e20000;border-radius:7px;background:rgba(7,12,16,.9);color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.24);backdrop-filter:blur(12px);pointer-events:none}.map-value[hidden]{display:none}.map-value span,.map-value small{display:block;color:#aab5ba;font-family:var(--mono);font-size:7px;text-transform:uppercase;letter-spacing:.07em}.map-value strong{display:block;margin:4px 0 5px;font-family:var(--mono);font-size:12px;font-weight:500}.legend{position:absolute;z-index:500;right:19px;bottom:23px;width:174px;padding:9px 10px 8px;border:1px solid var(--line);border-radius:8px;background:rgba(7,16,24,.84);backdrop-filter:blur(14px);pointer-events:none}.legend-gradient{height:6px;border-radius:999px;background:linear-gradient(90deg,#172b75,#1ec7c9,#fff17a,#d83b4b)}.legend-labels{display:flex;justify-content:space-between;margin-top:6px;color:#9bafb7;font-family:var(--mono);font-size:8px}.legend-labels strong{color:#dce8eb;font-weight:500}
.map-loading,.plot-loading{position:absolute;z-index:600;display:none;align-items:center;justify-content:center}.map-loading{left:50%;top:50%;transform:translate(-50%,-50%);gap:10px;padding:11px 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(7,16,24,.88);color:#c1d0d5;box-shadow:0 10px 28px rgba(0,0,0,.24);font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px);pointer-events:none;white-space:nowrap}.map-loading.visible,.plot-loading.visible{display:flex}.loader-ring{width:18px;height:18px;border:2px solid rgba(97,232,255,.17);border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sounding-marker{width:22px;height:22px;position:relative;border:1px solid rgba(255,255,255,.8);border-radius:50%;background:rgba(7,16,24,.55);box-shadow:0 0 0 4px rgba(97,232,255,.15),0 0 22px rgba(97,232,255,.65)}.sounding-marker:before,.sounding-marker:after{content:"";position:absolute;background:var(--cyan)}.sounding-marker:before{width:1px;height:30px;top:-5px;left:10px}.sounding-marker:after{height:1px;width:30px;left:-5px;top:10px}
.analysis-panel{min-width:0;background:linear-gradient(180deg,rgba(13,27,38,.95),rgba(8,19,28,.98));padding:28px 25px 18px;display:flex;flex-direction:column;overflow:hidden}.analysis-head{display:flex;justify-content:space-between;align-items:flex-start}.analysis-head h2{font-family:var(--mono);font-size:15px;font-weight:500;margin:7px 0 0}.refresh-button{width:34px;height:34px;color:var(--muted);font-size:17px}.tabs{display:flex;gap:3px;margin-top:23px;border-bottom:1px solid var(--line)}.tab{position:relative;border:0;background:transparent;color:var(--muted);padding:0 12px 12px;font-size:10px;font-weight:700;cursor:pointer}.tab.active{color:var(--text)}.tab.active:after{content:"";position:absolute;height:2px;left:9px;right:9px;bottom:-1px;background:var(--cyan);box-shadow:0 0 10px rgba(97,232,255,.6)}.plot-wrap{position:relative;isolation:isolate;overflow:hidden;flex:1;min-height:340px;margin-bottom:10px}.diagnostic-plot{position:absolute;inset:0;overflow:hidden}.plot-loading{inset:0;flex-direction:column;gap:7px;background:rgba(9,21,30,.88);text-align:center}.plot-loading .loader-ring{width:24px;height:24px;margin-bottom:4px}.plot-loading strong{font-size:11px}.plot-loading span{color:var(--muted);font-size:9px}.metrics{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);flex:none;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:2px;background:var(--panel)}.metrics>div{padding:10px 8px;border-right:1px solid var(--line)}.metrics>div:last-child{border-right:0}.metrics span{display:block;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}.metrics strong{display:block;margin-top:6px;font-family:var(--mono);font-size:11px;font-weight:500}.analysis-footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-family:var(--mono);font-size:8px;margin-top:13px}.analysis-footer>div{display:flex;align-items:center;gap:8px}.analysis-footer .status-dot{width:5px;height:5px;box-shadow:0 0 9px rgba(199,243,107,.4)}
.footer{height:32px;display:flex;justify-content:space-between;align-items:center;padding:0 26px;border-top:1px solid var(--line);color:#58707b;font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.07em}.toast{position:fixed;z-index:1000;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:10px 14px;border-radius:8px;background:#162631;color:#dce9ed;border:1px solid var(--line2);box-shadow:var(--shadow);font-size:10px;transition:.25s ease}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:1180px){.workspace{grid-template-columns:260px minmax(410px,1fr) 380px}.controls-panel,.analysis-panel{padding-left:18px;padding-right:18px}}@media(max-width:980px){body{overflow:auto}.workspace{height:auto;min-height:0;grid-template-columns:260px 1fr;grid-template-rows:620px 570px}.controls-panel{grid-row:1/3}.map-stage{border-right:0;border-bottom:1px solid var(--line)}.analysis-panel{grid-column:2}}@media(max-width:720px){.topbar{padding:0 15px}.source-pill{display:none}.workspace{display:block}.controls-panel{border-right:0;padding:24px 18px}.map-stage{height:500px}.analysis-panel{height:590px;padding:24px 16px 16px}.footer{padding:0 15px}.footer span:last-child{display:none}.legend{right:12px;bottom:16px}.map-hint{bottom:66px}}

/* Climaturk brand system */
.app-shell{background:#f3f3f1}.topbar{height:76px;background:#050505;border-bottom:3px solid #e20000;padding:0 24px}.brand{height:73px;gap:14px;overflow:hidden}.brand-logo{display:block;width:182px;height:70px;overflow:hidden;position:relative;flex:none}.brand-logo img{position:absolute;width:188px;height:188px;object-fit:contain;left:-3px;top:-58px}.product-name{color:#fff;border-left:1px solid rgba(255,255,255,.22);padding-left:14px;font-family:"Playfair Display",serif;font-size:15px;line-height:1.05}.product-name small{display:block;color:#9d9d9d;font-family:var(--sans);font-size:8px;text-transform:uppercase;letter-spacing:.14em;margin-top:6px}.brand-nav{display:flex;gap:24px;margin-left:auto;margin-right:28px}.brand-nav a{color:#aaa;text-decoration:none;text-transform:uppercase;font-size:9px;letter-spacing:.14em;font-weight:700;padding:29px 0 25px;border-bottom:2px solid transparent}.brand-nav a:hover,.brand-nav a.active{color:#fff;border-color:#e20000}.topbar-meta{color:#fff}.source-pill{color:#b9b9b9}.pulse,.status-dot{background:#e20000;box-shadow:0 0 0 4px rgba(226,0,0,.1),0 0 14px rgba(226,0,0,.6)}.utc-clock strong{color:#fff}.workspace{height:calc(100vh - 108px);grid-template-columns:306px minmax(500px,1fr) minmax(410px,34vw)}.controls-panel{background:#fff}.controls-panel h1{color:#e20000}.eyebrow{color:#e20000}.section-label{color:#202020}.field-label{color:#777}input,select{color:#191919;background:#fafafa;border-color:rgba(0,0,0,.16)}input:focus,select:focus{border-color:#e20000;box-shadow:0 0 0 3px rgba(226,0,0,.07)}input::-webkit-calendar-picker-indicator{filter:none}.icon-button,.quiet-button,.refresh-button{background:#fff;color:#555}.icon-button:hover,.quiet-button:hover,.refresh-button:hover{border-color:#e20000;color:#e20000}.primary-button{background:#e20000;color:#fff;box-shadow:0 10px 26px rgba(226,0,0,.17);text-transform:uppercase;letter-spacing:.06em}.primary-button:hover{background:#bd0000}.data-note{background:#faf5f5;border-color:rgba(226,0,0,.14)}.data-note-icon{color:#e20000}.data-note strong{color:#2b2b2b}.rendering-label{margin-top:13px}.mode-toggle{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(0,0,0,.16);border-radius:7px;overflow:hidden}.mode-button{height:34px;border:0;background:#fff;color:#777;font-size:10px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.mode-button+ .mode-button{border-left:1px solid rgba(0,0,0,.12)}.mode-button.active{background:#111;color:#fff}.level-control{margin-top:10px}.level-control .field-label{margin-top:0}.level-control select{font-family:var(--mono);font-size:10px}.overlay-row{margin-bottom:8px}.overlay-row:last-child{margin-bottom:0}.overlay-button{width:100%;display:flex;align-items:center;gap:7px;height:38px;padding:0 10px;border:1px solid rgba(0,0,0,.16);border-radius:7px;background:#fff;color:#555;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;text-align:left}.overlay-button:hover:not(:disabled){border-color:#e20000;color:#e20000}.overlay-button.active{background:#111;color:#fff;border-color:#111}.overlay-button:disabled{opacity:.35;cursor:not-allowed}.overlay-swatch{width:14px;height:14px;border-radius:3px;flex:none}.overlay-swatch-contour{background:repeating-linear-gradient(0deg,#111,#111 2px,transparent 2px,transparent 4px)}.overlay-button.active .overlay-swatch-contour{background:repeating-linear-gradient(0deg,#fff,#fff 2px,transparent 2px,transparent 4px)}.overlay-swatch-vector{background:linear-gradient(135deg,transparent 40%,#111 40%,#111 55%,transparent 55%),linear-gradient(90deg,#111,#111);background-size:100% 100%,70% 2px;background-repeat:no-repeat;background-position:center,left center}.overlay-button.active .overlay-swatch-vector{filter:invert(1)}.overlay-field-select{width:100%;height:32px;margin-top:6px;font-family:var(--sans);font-size:9px}.overlay-field-select[hidden]{display:none}.overlay-hint{margin:2px 0 12px;color:#8b8b8b;font-size:8px;line-height:1.45}.map-stage{border-right:1px solid rgba(0,0,0,.18)}.map-toolbar h2{font-family:"Playfair Display",serif;font-size:16px}/* The valid time is the one thing a reader needs to know without looking anywhere else, so
   it is sized to be read at a glance rather than tucked away as fine print. */
.map-toolbar h2{color:#f7fafb}.map-toolbar small{display:block;color:#eef3f5;font-family:var(--mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;margin-top:7px;white-space:nowrap}.map-overlay-summary{display:grid;gap:3px;margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.16);font-family:var(--mono);font-size:7.5px;line-height:1.3}.map-overlay-summary[hidden]{display:none}.map-overlay-summary div{display:grid;grid-template-columns:58px minmax(0,1fr);gap:6px;align-items:start}.map-overlay-summary span{color:#aebbc1;text-transform:uppercase;letter-spacing:.06em}.map-overlay-summary strong{color:#f2f6f7;font-weight:500}.load-chip span{background:#e20000}.legend{border-top:2px solid #e20000}.map-hint span{color:#ff2a2a}.analysis-panel{background:#fff}.analysis-head h2{color:#151515}.tab{color:#888}.tab.active{color:#111}.tab.active:after{background:#e20000;box-shadow:none}.plot-loading{background:rgba(10,15,20,.4)}.loader-ring{border-color:rgba(226,0,0,.12);border-top-color:#e20000}.metrics{background:#fafafa}.metrics strong{color:#151515}.analysis-footer .status-dot{background:#e20000;box-shadow:0 0 8px rgba(226,0,0,.35)}.footer{background:#050505;color:#8a8a8a;border-top:0}.climate-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 0 2px}.climate-toolbar[hidden]{display:none}.climate-toolbar label{color:#777;font-family:var(--mono);font-size:7px;text-transform:uppercase;letter-spacing:.09em}.climate-toolbar select{height:32px;margin-top:5px;font-family:var(--sans);font-size:9px}.leaflet-bar a{font-family:var(--sans)}.leaflet-tooltip.province-label{background:#080808;color:#fff;border:0;box-shadow:none;font-size:8px;padding:3px 5px}.country-outline{filter:drop-shadow(0 0 3px rgba(255,255,255,.55))}
@media(max-width:1280px){.brand-nav{display:none}.workspace{grid-template-columns:275px minmax(440px,1fr) 390px}.product-name{display:none}}@media(max-width:980px){.workspace{grid-template-columns:260px 1fr;grid-template-rows:620px 610px}.analysis-panel{height:auto}}@media(max-width:720px){.topbar{height:70px}.brand-logo{height:66px}.brand-logo img{top:-60px}.workspace{display:block}.analysis-panel{height:650px}.topbar-meta{display:none}}

/* Time aggregation and regional climatology */
.access-section{padding-top:15px;padding-bottom:15px}.access-toggle{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(0,0,0,.16);border-radius:8px;overflow:hidden}.access-toggle[hidden]{display:none}.access-button{height:34px;border:0;background:#fff;color:#777;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.access-button+ .access-button{border-left:1px solid rgba(0,0,0,.11)}.access-button.active{background:#e20000;color:#fff}.country-control{margin-top:11px}.country-control[hidden]{display:none}.country-control .field-label{margin:10px 0 6px}.country-control input{font-family:var(--mono);font-size:10px}.geography-toggle{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(0,0,0,.14);border-radius:7px;overflow:hidden}.geography-button{height:30px;border:0;background:#fff;color:#777;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;cursor:pointer}.geography-button+ .geography-button{border-left:1px solid rgba(0,0,0,.11)}.geography-button.active{background:#111;color:#fff}
.period-label{margin-top:14px}.period-toggle{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(0,0,0,.16);border-radius:8px;overflow:hidden;background:#fff}.period-toggle[hidden]{display:none}.period-button{height:34px;padding:0 3px;border:0;border-right:1px solid rgba(0,0,0,.11);background:#fff;color:#777;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.035em;cursor:pointer}.period-button:last-child{border-right:0}.period-button:hover{color:#e20000}.period-button.active{background:#111;color:#fff}.period-button:disabled{opacity:.34;cursor:not-allowed}.period-pickers{margin-top:13px}.period-picker[hidden]{display:none}.period-picker .field-label{margin-bottom:7px}.period-picker>input,.period-picker>select{font-family:var(--mono)}.season-row{grid-template-columns:minmax(0,1.35fr) minmax(72px,.65fr)}.time-actions{margin-top:8px}.aggregation-kind{margin-top:7px;color:#777;font-family:var(--mono);font-size:8px;line-height:1.35}.date-row select:disabled{opacity:.4;background:#eee}.era5-grid{image-rendering:pixelated}.climate-toolbar{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}.climate-toolbar label{min-width:0}.climate-toolbar select{padding:0 5px}.region-note{grid-column:1/-1;margin-top:1px;padding:7px 9px;border-left:2px solid #e20000;background:#faf5f5;color:#686868;font-family:var(--mono);font-size:8px;line-height:1.35}.region-note[hidden]{display:none}.analysis-panel.climate-active .plot-wrap{min-height:250px}.analysis-panel.climate-active .metrics{flex:none}.leaflet-overlay-pane .leaflet-interactive{mix-blend-mode:multiply}
.forecast-model-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:13px;border:1px solid rgba(0,0,0,.16);border-radius:8px;overflow:hidden;background:#fff}.forecast-model-button{height:34px;padding:0 4px;border:0;background:#fff;color:#777;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.025em;cursor:pointer}.forecast-model-button:nth-child(odd){border-right:1px solid rgba(0,0,0,.11)}.forecast-model-button:nth-child(-n+2){border-bottom:1px solid rgba(0,0,0,.11)}.forecast-model-button:hover:not(:disabled):not(.active){color:#e20000}.forecast-model-button.active{background:#e20000;color:#fff}.forecast-model-button:disabled{opacity:.34;cursor:not-allowed}
.tab.scale-unavailable{color:#aaa}.tab.scale-unavailable:before{content:"Hourly";position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:5px;letter-spacing:.06em;color:#e20000}.diagnostic-unavailable{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px}.diagnostic-unavailable:before{content:"↗";display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border:1px solid rgba(226,0,0,.3);border-radius:50%;color:#e20000;font-size:21px}.diagnostic-unavailable strong{font-family:"Playfair Display",serif;font-size:19px;color:#171717}.diagnostic-unavailable span{max-width:330px;margin-top:9px;color:#777;font-size:10px;line-height:1.55}.diagnostic-unavailable button{margin-top:17px;padding:9px 13px;border:0;border-radius:6px;background:#111;color:#fff;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
@media(max-width:1180px){.period-button{font-size:7px;letter-spacing:0}.climate-toolbar{grid-template-columns:1fr 1fr}.climate-toolbar label:first-child{grid-column:1/-1}.region-note{grid-column:1/-1}}
@media(max-width:720px){.climate-toolbar{grid-template-columns:1fr}.climate-toolbar label:first-child,.region-note{grid-column:auto}.analysis-panel.climate-active{height:720px}}

/* Top-level mode selector, density slider, cross-section tool and forecast placeholders */
.app-mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:14px 0 4px;border:1px solid #111;border-radius:8px;overflow:hidden}
.app-mode-button{height:38px;border:0;background:#fff;color:#444;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;cursor:pointer}
.app-mode-button + .app-mode-button{border-left:1px solid #111}
.app-mode-button:hover:not(.active){color:#e20000}
.app-mode-button.active{background:#111;color:#fff}
#control-stack[hidden]{display:none}
.forecast-note{margin-top:20px;padding:16px;border:1px dashed rgba(0,0,0,.2);border-radius:9px;background:#fafafa}
.forecast-note[hidden]{display:none}
.forecast-note strong{display:block;font-family:"Playfair Display",serif;font-size:15px;color:#171717}
.forecast-note p{margin:8px 0 0;color:#777;font-size:10px;line-height:1.55}
.forecast-curtain{position:absolute;inset:0;z-index:700;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;background:rgba(243,243,241,.93);backdrop-filter:blur(3px)}
.forecast-curtain[hidden]{display:none}
.forecast-badge{display:inline-block;padding:4px 9px;border-radius:999px;background:#e20000;color:#fff;font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.12em}
.forecast-curtain strong{display:block;margin-top:14px;font-family:"Playfair Display",serif;font-size:26px;color:#141414}
.forecast-curtain p{max-width:330px;margin:10px auto 0;color:#6f6f6f;font-size:11px;line-height:1.55}
.density-control{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.density-control input[type=range]{width:100%;height:22px;padding:0;background:transparent;border:0;accent-color:#e20000;cursor:pointer}
.density-control input[type=range]:focus{box-shadow:none}
.density-scale{display:flex;justify-content:space-between;margin-top:-2px;color:#9a9a9a;font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.06em}
.density-scale span.active{color:#e20000;font-weight:500}
.density-control .overlay-hint{margin:7px 0 0}
.map-tools{display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:auto}
.map-tool-button{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.94);color:#333;font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.map-tool-button:hover{border-color:#e20000;color:#e20000}
.map-tool-button.active{background:#111;border-color:#111;color:#fff}
.map-tool-glyph{width:13px;height:11px;flex:none;background:linear-gradient(90deg,#e20000,#e20000);background-size:100% 1.6px;background-repeat:no-repeat;background-position:center;border-left:1.6px solid currentColor;border-right:1.6px solid currentColor}
#map.picking{cursor:crosshair}
#map.picking .leaflet-grab{cursor:crosshair}
.cross-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:26px;background:rgba(8,12,16,.55);backdrop-filter:blur(4px)}
.cross-modal[hidden]{display:none}
.cross-modal-panel{display:flex;flex-direction:column;width:min(860px,100%);height:min(600px,100%);border:1px solid var(--line2);border-radius:12px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.42);overflow:hidden}
.cross-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.cross-modal-head h2{margin:5px 0 0;font-family:"Playfair Display",serif;font-size:16px}
.cross-modal-head small{display:block;margin-top:5px;color:#8a8a8a;font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.07em}
.cross-modal-actions{display:flex;align-items:center;gap:8px;flex:none}
.cross-modal-actions select{width:auto;min-width:150px;height:32px;font-size:10px}
.cross-modal-actions .icon-button{width:32px;height:32px;font-size:12px}
.cross-modal-plot-wrap{position:relative;flex:1;min-height:0}
#cross-section-plot{position:absolute;inset:0}
#cross-section-barbs{position:absolute;inset:0;pointer-events:none}
/* Flow / Barbs: how the wind overlay is drawn. Shown only while the wind overlay is on. */
.wind-style-toggle{display:grid;grid-template-columns:1fr 1fr;margin-top:6px;border:1px solid rgba(0,0,0,.16);border-radius:7px;overflow:hidden}
.overlay-field-select[hidden]+.wind-style-toggle{display:none}
.wind-style-button{height:28px;border:0;background:#fff;color:#777;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.wind-style-button+.wind-style-button{border-left:1px solid rgba(0,0,0,.12)}
.wind-style-button:hover:not(.active){color:#e20000}
.wind-style-button.active{background:#111;color:#fff}
body.theme-dark .wind-style-toggle{border-color:rgba(255,255,255,.18)}
body.theme-dark .wind-style-button{background:#171c23;color:#aeb7bf}
body.theme-dark .wind-style-button+.wind-style-button{border-left-color:rgba(255,255,255,.12)}
body.theme-dark .wind-style-button.active{background:#f0f2f4;color:#111}
/* A label with a small "i" beside it, opening a short note in place under the label. */
.field-label-row{position:relative;display:flex;align-items:center;gap:6px}
.field-label-row[hidden]{display:none}
.info-dot{display:inline-grid;place-items:center;width:14px;height:14px;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;font:italic 700 8px/1 Georgia,serif;text-transform:none;letter-spacing:0;cursor:pointer;opacity:.75}
.info-tip{display:inline-flex}
.info-dot{position:relative}
.info-dot:hover,.info-dot[aria-expanded="true"]{opacity:1;color:#e20000}
/* A bubble floating over the controls below the label, as wide as the panel, its tail under
   the "i". It shows only while the "i" is hovered (tapped on a touch screen, focused from the
   keyboard) and never takes clicks, so it cannot get in the way of the buttons it covers. */
.info-pop{position:absolute;left:0;right:0;top:calc(100% + 9px);z-index:40;padding:10px 12px 9px;border:1px solid rgba(0,0,0,.12);border-radius:12px;background:#fff;box-shadow:0 14px 36px rgba(0,0,0,.18);color:#444;font:400 9.5px/1.45 var(--sans);text-transform:none;letter-spacing:0;pointer-events:none;animation:bubble-in .14s ease both}
.info-tip.open .info-dot::after{content:"";position:absolute;left:50%;top:calc(100% + 4px);width:9px;height:9px;margin-left:-5px;border-left:1px solid rgba(0,0,0,.12);border-top:1px solid rgba(0,0,0,.12);background:#fff;transform:rotate(45deg);z-index:41;pointer-events:none}
.info-pop[hidden]{display:none}
.info-pop dl{display:grid;grid-template-columns:max-content 1fr;gap:5px 9px;margin:0}
.info-pop dt{color:#151515;font-weight:700}
.info-pop dd{margin:0}
.info-pop p{margin:7px 0 0;padding-top:6px;border-top:1px solid var(--line);color:#777}
/* The section's own time axis: the hours either side of the one it was drawn at. While a new
   hour is on its way the shown slice dims and the time pulses, so it never passes for the
   hour the slider already names. */
.cross-time{display:flex;align-items:center;gap:10px;padding:8px 18px 7px;border-bottom:1px solid var(--line)}
.cross-time-step{flex:none;width:30px;height:30px;border:1px solid rgba(0,0,0,.16);border-radius:7px;background:#fff;color:#333;font-size:17px;line-height:1;cursor:pointer}
.cross-time-step:hover:not(:disabled){border-color:#e20000;color:#e20000}
.cross-time-step:disabled{opacity:.35;cursor:not-allowed}
.cross-time-track{flex:1;min-width:0}
.cross-time-track input[type=range]{display:block;height:18px}
.cross-time-scale{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:#8a8a8a;font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.05em}
.cross-time-scale span{white-space:nowrap}
.cross-time-scale strong{display:inline-flex;align-items:center;gap:6px;color:#151515;font-size:10px;font-weight:600;white-space:nowrap}
.cross-time-scale strong::before{content:"";width:6px;height:6px;border-radius:50%;background:#e20000;opacity:0}
.cross-time.loading .cross-time-scale strong::before{opacity:1;animation:compare-pulse 1s ease-in-out infinite}
.cross-modal-plot-wrap{transition:opacity .2s ease}
.cross-modal-panel.stepping .cross-modal-plot-wrap{opacity:.55}
@media(max-width:720px){.cross-modal{padding:12px}.cross-modal-panel{height:min(500px,100%)}.cross-modal-actions select{min-width:110px}.cross-time{gap:8px;padding:8px 12px 7px}.cross-time-scale span{display:none}.cross-time-scale{justify-content:center}}
/* Five scales now share the row Hourly/Monthly/Seasonal/Annual used to. */
.period-toggle{grid-template-columns:repeat(5,minmax(0,1fr))}
.period-button{padding:0 1px;font-size:7px;letter-spacing:0}
@media(max-width:1180px){.period-button{font-size:6.5px}}
/* Sits directly on top of the colorbar and shares its width, so the two read as one
   block of map settings in the corner. */
.map-domain-control{position:absolute;z-index:500;right:19px;bottom:78px;width:88px;display:grid;grid-template-columns:1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.map-domain-control[hidden]{display:none}
.map-domain-button{height:30px;padding:0 8px;border:0;background:rgba(255,255,255,.92);color:#666;font-family:var(--mono);font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;line-height:1.15;cursor:pointer}
.map-domain-button + .map-domain-button{border-left:1px solid rgba(0,0,0,.12)}
.map-domain-button:hover:not(.active){color:#e20000}
.map-domain-button.active{background:#111;color:#fff}
@media(max-width:720px){.map-domain-control{right:12px;bottom:71px}}
/* The row holds four figures for some views and five for others (total precipitation, the
   selected layer's normal), so let it size to however many cells it is given. */
.metrics{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.metrics span{overflow:hidden;text-overflow:ellipsis}
.analysis-panel[hidden]{display:none}

/* ── Phone layout ───────────────────────────────────────────────────────────────
   The map is the whole screen and nothing covers it until asked: the two side panels
   become bottom sheets, opened from a two-button dock. The map keeps every tool it has
   on desktop — cross-section, domain toggle, legend — because the sheets sit over the
   map rather than replacing it. */
.mobile-dock,.sheet-backdrop,.sheet-grip,.geography-select{display:none}
@media(max-width:720px){
  body{overflow:hidden}
  .workspace{position:relative;display:block;height:100dvh;min-height:0}
  .map-stage{position:absolute;inset:0;height:auto;border:0}
  .footer{display:none}

  .controls-panel,.analysis-panel{position:fixed;left:0;right:0;bottom:0;z-index:1100;height:min(78dvh,660px);max-height:78dvh;width:auto;
    border:0;border-top:3px solid #e20000;border-radius:16px 16px 0 0;background:#fff;box-shadow:0 -18px 50px rgba(0,0,0,.3);
    /* overflow-x must be stated, not left to compute: an axis left as `visible` becomes
       `auto` as soon as the other axis scrolls, and an `auto` axis rubber-bands sideways
       under a finger even with nothing to scroll to. touch-action then keeps the gesture
       vertical, which is all either sheet has to offer. */
    overflow-y:auto;overflow-x:hidden;touch-action:pan-y;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 18px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(101%);transition:transform .26s ease;visibility:hidden}
  .controls-panel.sheet-open,.analysis-panel.sheet-open{transform:none;visibility:visible}
  /* A sheet that is merely off-screen still answers to the keyboard and the screen reader,
     so visibility closes it properly; the delay lets the slide-out finish first. */
  .controls-panel,.analysis-panel{transition:transform .26s ease,visibility 0s linear .26s}
  .controls-panel.sheet-open,.analysis-panel.sheet-open{transition:transform .26s ease,visibility 0s}
  /* While a finger is dragging the sheet it must follow that finger exactly, with no
     easing between frames; the transition comes back for the release. */
  .controls-panel.sheet-dragging,.analysis-panel.sheet-dragging{transition:none}

  /* An open sheet covers the dock that opened it, so it carries its own ways out: a grab
     bar to swipe down, and a button for anyone who would rather tap. */
  /* A generous grab target: the bar spans the full width of the sheet and is tall enough to
     hit without aiming, even though the visible pill is small. It supplies the sheet's top
     padding itself rather than being pulled up into it by a negative margin — that margin
     left the bar occupying 18px of flow while painting 38px, so its opaque background sat
     over the top of whatever followed (the refresh button, in the diagnostics sheet). */
  .sheet-grip{display:block;position:sticky;top:0;z-index:3;height:38px;margin:0 -18px 8px;background:#fff;
    cursor:grab;touch-action:none}
  .sheet-grip:after{content:"";display:block;width:44px;height:5px;margin:15px auto 0;border-radius:999px;background:rgba(0,0,0,.24)}
  /* A phone keyboard over a type-ahead field is a poor way to pick from a fixed list of
     countries; the platform's own picker wheel is better, so the search box gives way to a
     plain select here. */
  #geography-search,#geography-options{display:none}
  .geography-select{display:block;font-family:var(--mono);font-size:11px}
  /* The native date control renders far wider on iOS than on a desktop browser, so the hour
     sits under the date rather than beside it. */
  .date-row{grid-template-columns:minmax(0,1fr);gap:9px}
  .date-row>input,.date-row>select{width:100%;min-width:0}
  /* iOS builds date and month fields from its own shadow tree, which carries an intrinsic
     width that ignores the box it is given — the field then runs past the sheet's padding
     and gets clipped at the edge. Dropping the native appearance and capping the width keeps
     it inside whatever the platform thinks it wants; the height and padding are restated
     because removing the appearance also drops the metrics that came with it. */
  .period-picker input[type=date],.period-picker input[type=month]{
    -webkit-appearance:none;appearance:none;
    width:100%;max-width:100%;min-width:0;box-sizing:border-box;
    height:39px;padding:0 10px;text-align:left}
  .period-picker input[type=date]::-webkit-date-and-time-value,
  .period-picker input[type=month]::-webkit-date-and-time-value{text-align:left;margin:0}
  .period-picker input::-webkit-calendar-picker-indicator{margin-left:0;flex:none}
  .analysis-panel{display:flex}
  .analysis-panel[hidden]{display:none}
  /* Overrides the taller desktop climatology sheet height, which is more specific. */
  .analysis-panel.climate-active{height:min(78dvh,660px)}
  .controls-panel h1,.controls-panel .eyebrow{display:none}
  .plot-wrap{min-height:300px}

  .sheet-backdrop{position:fixed;inset:0;z-index:1050;background:rgba(8,12,16,.45);backdrop-filter:blur(2px)}
  .sheet-backdrop[hidden]{display:none}
  /* Compact icon dock: Controls over Diagnostics, stacked at the right edge directly above
     Global and aligned with it, so the bottom row belongs to the timeline and colour bar. */
  .mobile-dock{position:relative;display:flex;flex-direction:column;gap:4px;padding:4px;border-radius:14px;
    background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.24);
    backdrop-filter:blur(14px);pointer-events:auto}
  .dock-button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:10px;background:transparent;
    color:#333;cursor:pointer}
  .dock-button[aria-expanded="true"]{background:#111;color:#fff}
  .dock-label{display:none}
  .dock-glyph{position:relative;width:18px;height:18px;flex:none}
  .dock-glyph-controls{background:
    radial-gradient(circle at 5px 4px,currentColor 0 2px,transparent 2.2px),
    radial-gradient(circle at 13px 9px,currentColor 0 2px,transparent 2.2px),
    radial-gradient(circle at 8px 14px,currentColor 0 2px,transparent 2.2px),
    linear-gradient(currentColor,currentColor) 0 3.25px/18px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) 0 8.25px/18px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) 0 13.25px/18px 1.5px no-repeat}
  .dock-glyph-analysis{border-bottom:1.5px solid currentColor;background:
    linear-gradient(currentColor,currentColor) 2px 10px/3px 7px no-repeat,
    linear-gradient(currentColor,currentColor) 7.5px 6px/3px 11px no-repeat,
    linear-gradient(currentColor,currentColor) 13px 2px/3px 15px no-repeat}

  /* Keep the map's own furniture clear of the dock. */
  .legend{right:12px;bottom:calc(120px + env(safe-area-inset-bottom))}
  .map-domain-control{right:12px;bottom:calc(175px + env(safe-area-inset-bottom))}
  .leaflet-control-zoom{display:none!important}
  .leaflet-bottom.leaflet-left{bottom:calc(8px + env(safe-area-inset-bottom))}
  .map-hint{display:none}
  .map-toolbar{left:12px;right:12px;top:12px}
  .map-toolbar h2{font-size:14px}
  .map-toolbar>div:first-child{max-width:70%;padding:9px 11px}
  .map-toolbar small{font-size:10px;margin-top:6px}
  /* Load timings are a desktop debugging nicety; on a phone the room is better spent on map. */
  .map-tools .load-chip{display:none}
}

/* Embedded on climaturk.com: the outer site owns the brand and navigation. Pin the
   workspace to the iframe edges so iPhone safe-area and dynamic-toolbar calculations
   cannot leave an empty strip below the map. */
html,body,.app-shell{width:100%;height:100%;min-height:0;overflow:hidden}
.topbar,.footer{display:none!important}
.workspace{position:fixed;inset:0;width:100%;height:auto;min-height:0}

/* Country polygons are selectable directly on the map. Keep the label compact enough for
   phones and visually distinct from the value readout that follows the pointer. */
.leaflet-tooltip.country-hover-label{padding:5px 8px;border:0;border-radius:5px;background:#111;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.28);font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.04em}
.leaflet-tooltip.country-hover-label:before{display:none}

/* Light / dark appearance switch. The map remains the visual anchor in either mode; dark
   mode changes every surrounding surface and dims the reference tiles without altering the
   ERA5 colour field drawn in the overlay pane. */
.theme-toggle{display:flex;align-items:center;gap:5px;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.94);color:#555;box-shadow:var(--shadow);backdrop-filter:blur(12px);cursor:pointer}
.theme-icon{width:10px;font-size:10px;line-height:1;text-align:center}
.theme-toggle-track{position:relative;width:30px;height:16px;border-radius:999px;background:#d7d7d7;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:background .2s ease}
.theme-toggle-thumb{position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.32);transition:transform .2s ease}
.theme-toggle[aria-checked="true"] .theme-toggle-track{background:#e20000}
.theme-toggle[aria-checked="true"] .theme-toggle-thumb{transform:translateX(14px)}

body.theme-dark{--bg:#0d1117;--panel:#171c23;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.2);--text:#edf1f4;--muted:#9aa4ad;--shadow:0 24px 70px rgba(0,0,0,.48);background:#0d1117;color:#edf1f4}
body.theme-dark .app-shell{background:#0d1117}
body.theme-dark .map-toolbar h2,body.theme-dark .map-overlay-summary strong{color:#fff}
body.theme-dark .controls-panel,body.theme-dark .analysis-panel{background:#11161c;color:#edf1f4}
body.theme-dark .section-label,body.theme-dark .analysis-head h2,body.theme-dark .tab.active,body.theme-dark .metrics strong,body.theme-dark .data-note strong{color:#edf1f4}
body.theme-dark .field-label,body.theme-dark .climate-toolbar label,body.theme-dark .overlay-hint,body.theme-dark .aggregation-kind{color:#9aa4ad}
body.theme-dark input,body.theme-dark select{background:#171c23;color:#edf1f4;border-color:rgba(255,255,255,.16)}
body.theme-dark input::-webkit-calendar-picker-indicator{filter:invert(1)}
body.theme-dark .icon-button,body.theme-dark .quiet-button,body.theme-dark .refresh-button,body.theme-dark .mode-button,body.theme-dark .overlay-button,body.theme-dark .access-button,body.theme-dark .geography-button,body.theme-dark .period-button,body.theme-dark .forecast-model-button,body.theme-dark .app-mode-button{background:#171c23;color:#aeb7bf;border-color:rgba(255,255,255,.16)}
body.theme-dark .mode-button.active,body.theme-dark .overlay-button.active,body.theme-dark .geography-button.active,body.theme-dark .period-button.active,body.theme-dark .app-mode-button.active{background:#f0f2f4;color:#111;border-color:#f0f2f4}
body.theme-dark .access-button.active{background:#e20000;color:#fff}
body.theme-dark .forecast-model-button.active{background:#e20000;color:#fff;border-color:#e20000}
body.theme-dark .data-note,body.theme-dark .region-note{background:#1a1518;color:#aeb7bf;border-color:rgba(226,0,0,.32)}
body.theme-dark .period-toggle,body.theme-dark .forecast-model-toggle,body.theme-dark .mode-toggle,body.theme-dark .access-toggle,body.theme-dark .geography-toggle,body.theme-dark .app-mode-toggle{background:#171c23;border-color:rgba(255,255,255,.18)}
body.theme-dark .plot-loading{background:rgba(0,0,0,.52)}
body.theme-dark .metrics{background:#171c23}
body.theme-dark .forecast-note{background:#171c23;border-color:rgba(255,255,255,.2)}
body.theme-dark .forecast-note strong,body.theme-dark .forecast-curtain strong,body.theme-dark .diagnostic-unavailable strong{color:#edf1f4}
body.theme-dark .forecast-note p,body.theme-dark .forecast-curtain p,body.theme-dark .diagnostic-unavailable span{color:#aab3bb}
body.theme-dark .forecast-curtain{background:rgba(13,17,23,.94)}
body.theme-dark .cross-modal-panel{background:#11161c;color:#edf1f4}
body.theme-dark .cross-modal-head small{color:#9aa4ad}
body.theme-dark .cross-time-step{background:#171c23;color:#d6dde2;border-color:rgba(255,255,255,.18)}
body.theme-dark .info-pop{background:#161c23;color:#c9d1d8;border-color:rgba(255,255,255,.16);box-shadow:0 14px 36px rgba(0,0,0,.45)}
body.theme-dark .info-tip.open .info-dot::after{background:#161c23;border-color:rgba(255,255,255,.16)}
body.theme-dark .info-pop dt{color:#edf1f4}
body.theme-dark .info-pop p{color:#9aa4ad;border-top-color:rgba(255,255,255,.1)}
body.theme-dark .cross-time-scale{color:#9aa4ad}
body.theme-dark .cross-time-scale strong{color:#edf1f4}
body.theme-dark .theme-toggle,body.theme-dark .map-tool-button,body.theme-dark .map-domain-button{background:rgba(17,22,28,.94);color:#e7ebee;border-color:rgba(255,255,255,.18)}
body.theme-dark .map-tool-button.active,body.theme-dark .map-domain-button.active{background:#f0f2f4;color:#111;border-color:#f0f2f4}
body.theme-dark .leaflet-tile-pane{filter:brightness(.58) saturate(.7) contrast(1.12)}

/* IFS ENS forecast workspace */
.forecast-stack[hidden],.forecast-toolbar[hidden]{display:none}
.forecast-stack{margin-top:5px}
.forecast-member-label{margin-top:13px}
.forecast-member-note{margin:8px 0 0;color:#828282;font-size:8px;line-height:1.5}
.wide-select.mean-only{opacity:.62}
.forecast-data-note{margin-bottom:20px}
.forecast-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:12px 0 9px;border-bottom:1px solid var(--line)}
.forecast-toolbar>div:first-child>span{display:block;margin-bottom:7px;color:#777;font-family:var(--mono);font-size:7px;text-transform:uppercase;letter-spacing:.1em}
.forecast-window-controls{display:flex;align-items:center;gap:7px}
.forecast-window-label{display:block;font-family:var(--mono);font-size:11px;font-weight:500;color:#151515}
.forecast-window-button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid rgba(0,0,0,.14);border-radius:7px;background:#fff;color:#333;font-size:14px;cursor:pointer}
.forecast-window-button:hover:not(:disabled){border-color:#e20000;color:#e20000}
.forecast-window-button:disabled{opacity:.28;cursor:default}
body.theme-dark .forecast-window-label{color:#edf1f4}
.forecast-range-button{height:31px;padding:0 11px;border:0;border-right:1px solid rgba(0,0,0,.12);background:#fff;color:#777;font-size:8px;font-weight:700;text-transform:uppercase;cursor:pointer}
.forecast-range-button:last-child{border-right:0}
.forecast-range-button.active{background:#111;color:#fff}
.forecast-run-chip{display:grid;grid-template-columns:7px auto;column-gap:7px;align-items:center;padding-bottom:2px}
.forecast-run-chip .status-dot{grid-row:1/3;width:6px;height:6px}
.forecast-run-chip strong{font-family:var(--mono);font-size:9px;font-weight:500}
.forecast-run-chip small{color:#777;font-family:var(--mono);font-size:7px}
body.forecast-mode .tabs:not(.forecast-tabs),body.forecast-mode #climate-toolbar,body.forecast-mode #cross-section-tool{display:none!important}
body.forecast-mode .analysis-head{margin-bottom:4px}
body.forecast-mode .analysis-panel{background:linear-gradient(180deg,#fff,#fafafa)}
body.forecast-mode .plot-wrap{min-height:300px}
body.forecast-mode .metrics{grid-auto-columns:minmax(78px,1fr)}
body.theme-dark .forecast-range-button{background:#171c23;color:#aeb7bf;border-color:rgba(255,255,255,.16)}
body.theme-dark .forecast-range-button.active{background:#f0f2f4;color:#111}
body.theme-dark .forecast-window-button{background:#171c23;color:#d6dde2;border-color:rgba(255,255,255,.18)}
body.theme-dark .forecast-window-button:hover:not(:disabled){border-color:#e20000;color:#fff}
body.theme-dark .forecast-toolbar>div:first-child>span,body.theme-dark .forecast-run-chip small,body.theme-dark .forecast-member-note{color:#9aa4ad}
body.theme-dark.forecast-mode .analysis-panel{background:linear-gradient(180deg,#11161c,#0f141a)}
body.theme-dark .forecast-range-toggle{border-color:rgba(255,255,255,.18)}
@media(max-width:720px){
  .forecast-toolbar{align-items:stretch;flex-direction:column}
  .forecast-range-toggle{display:grid;grid-template-columns:repeat(2,1fr)}
  .forecast-run-chip{align-self:flex-end}
  body.forecast-mode .analysis-panel{height:min(78dvh,660px)}
}
body.theme-dark .leaflet-control-attribution{background:rgba(10,14,18,.82)!important;color:#aeb7bf}
body.theme-dark .leaflet-control-attribution a{color:#d7dde2}
body.theme-dark .js-plotly-plot text{fill:#b9c2ca!important}
body.theme-dark .js-plotly-plot .gridlayer path{stroke:rgba(255,255,255,.11)!important}
body.theme-dark .js-plotly-plot .zerolinelayer path{stroke:rgba(255,255,255,.18)!important}
/* Only the boxes themselves: the line samples beside each name keep their trace colours. */
body.theme-dark .js-plotly-plot .hoverlayer .hovertext>path,body.theme-dark .js-plotly-plot .hoverlayer .axistext>path{fill:#f4f4f1!important;stroke:#59616a!important}
body.theme-dark .js-plotly-plot .hoverlayer text,body.theme-dark .js-plotly-plot .hoverlayer tspan,body.theme-dark .js-plotly-plot .hoverlayer .hovertext text{fill:#14171a!important;color:#14171a!important}
/* The time-series box is dark and see-through in dark mode, so its text is light. */
body.theme-dark .js-plotly-plot .hoverlayer .legend text,body.theme-dark .js-plotly-plot .hoverlayer .legend tspan{fill:#e9edf0!important;color:#e9edf0!important}
@media(max-width:720px){
  body.theme-dark .controls-panel,body.theme-dark .analysis-panel,body.theme-dark .sheet-grip{background:#11161c}
  body.theme-dark .sheet-grip:after{background:rgba(255,255,255,.28)}
  body.theme-dark .mobile-dock{background:rgba(17,22,28,.95);border-color:rgba(255,255,255,.14)}
  body.theme-dark .dock-button{color:#c3cbd1}
  body.theme-dark .dock-button[aria-expanded="true"]{background:#f0f2f4;color:#111}
}

/* --- Map timeline scrubber -------------------------------------------------------------
   Spans the bottom of the map, stopping short of the column the legend and the Global button
   already own on the right — centring it instead cannot reserve that width without collapsing
   on a narrow map stage. The
   rail carries one tick per period step in the current scale; the shaded band marks the
   steps the Worker has already prefetched. */
.map-timeline{position:absolute;z-index:520;left:20px;bottom:20px;right:213px;
  display:none;align-items:center;gap:7px;
  padding:7px 9px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.94);box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.map-timeline[hidden]{display:none}
.timeline-step{flex:none;width:30px;height:30px;display:none;place-items:center;padding:0;
  border:1px solid var(--line);border-radius:8px;background:transparent;color:#333;
  font-size:16px;line-height:1;cursor:pointer;transition:background .15s ease,opacity .15s ease}
.timeline-step:hover:not(:disabled){background:rgba(0,0,0,.06)}
.timeline-step:disabled{opacity:.28;cursor:default}
.timeline-body{display:none;flex:1;min-width:0}
/* touch-action is the load-bearing line on a phone: without it the browser claims the
   horizontal drag for its own gesture and the handle never moves. */
.timeline-track{position:relative;height:30px;cursor:pointer;touch-action:none;outline:none}
.timeline-track:focus-visible{outline:2px solid #e20000;outline-offset:3px;border-radius:6px}
.timeline-rail{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:999px;background:rgba(0,0,0,.14)}
.timeline-warm{position:absolute;top:50%;height:3px;margin-top:-1.5px;border-radius:999px;background:rgba(226,0,0,.25)}
.timeline-ticks{position:absolute;inset:0}
.timeline-ticks i{position:absolute;top:50%;width:1px;height:5px;margin-top:-2.5px;background:rgba(0,0,0,.2)}
.timeline-ticks i.major{height:11px;margin-top:-5.5px;background:rgba(0,0,0,.34)}
.timeline-handle{position:absolute;top:50%;left:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  background:#e20000;box-shadow:0 0 0 3px rgba(255,255,255,.92),0 2px 6px rgba(0,0,0,.3);
  pointer-events:none;transition:left .12s ease,transform .12s ease}
/* No easing while a finger is down: the handle has to sit under the touch, not chase it. */
.map-timeline.scrubbing .timeline-handle{transition:none;transform:scale(1.2)}
.timeline-bubble{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;
  padding:4px 8px;border-radius:6px;background:#151515;color:#fff;font-family:var(--mono);font-size:9px;
  opacity:0;pointer-events:none;transition:opacity .12s ease}
.map-timeline.scrubbing .timeline-bubble{opacity:1}
.timeline-labels{position:relative;height:11px;margin-top:1px}
.timeline-labels span{position:absolute;transform:translateX(-50%);white-space:nowrap;
  color:var(--muted);font-family:var(--mono);font-size:7.5px;letter-spacing:.04em}
/* The click hint used to own the bottom centre; the scrubber does now. */
.map-hint{bottom:78px}

body.theme-dark .map-timeline{background:rgba(17,22,28,.94);border-color:rgba(255,255,255,.18)}
body.theme-dark .timeline-step{color:#e7ebee;border-color:rgba(255,255,255,.18)}
body.theme-dark .timeline-step:hover:not(:disabled){background:rgba(255,255,255,.1)}
body.theme-dark .timeline-rail{background:rgba(255,255,255,.2)}
body.theme-dark .timeline-ticks i{background:rgba(255,255,255,.26)}
body.theme-dark .timeline-ticks i.major{background:rgba(255,255,255,.44)}
body.theme-dark .timeline-handle{box-shadow:0 0 0 3px rgba(17,22,28,.95),0 2px 6px rgba(0,0,0,.5)}
body.theme-dark .timeline-bubble{background:#f0f2f4;color:#111}

@media(max-width:720px){
  /* On a phone, two large step buttons are faster and less error-prone than scrubbing a
     dense time rail. The desktop keeps the rail and hides these buttons. */
  .map-timeline{left:auto;right:12px;width:auto;transform:none;
    bottom:var(--phone-row-bottom);padding:4px 6px;gap:7px;border-radius:11px}
  .map-timeline:not([hidden]){display:flex}
  .timeline-step{display:grid;width:40px;height:36px;border-radius:9px;font-size:20px}
}

/* ── Forecast playback ──────────────────────────────────────────────────────────
   Climatology keeps the rail for phones only, where two big step buttons beat scrubbing a
   window of archive dates. Forecast is the opposite case and earns the full rail at every
   width: one run, 85 steps, all of them already resident in the server's cube, so dragging
   the whole horizon costs cached round trips rather than reads. */
body.forecast-playable .map-timeline:not([hidden]){display:flex}
body.forecast-playable .timeline-body{display:block}
@media(min-width:721px){
  /* Clear of Leaflet's zoom buttons, which share the map's bottom-left corner and which
     Climatology never had to avoid because it hides the rail on desktop. */
  body.forecast-playable .map-timeline:not([hidden]){left:58px}
  body.forecast-playable .timeline-step{display:grid}
}
/* On a phone the forecast rail sits between the ‹ › step buttons and Play goes: a tap per
   step is easier one-handed than starting and stopping an animation, and the rail still
   drags for a long jump. */
@media(max-width:720px){
  body.forecast-playable .map-timeline:not([hidden]){padding:6px 8px;gap:6px}
  body.forecast-playable .timeline-step{width:34px;height:34px;font-size:18px}
  body.forecast-playable .timeline-track{height:34px}
  body.forecast-playable .timeline-labels{height:10px}
}
.timeline-play{display:none}
body.forecast-playable .timeline-play{display:grid}
.timeline-play span{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.timeline-play.playing{background:#e20000;border-color:#e20000;color:#fff}
.timeline-play.playing span{width:8px;height:9px;border:0;background:currentColor;
  -webkit-mask:linear-gradient(#000 0 0) 0/3px 100% no-repeat,linear-gradient(#000 0 0) 100%/3px 100% no-repeat;
  mask:linear-gradient(#000 0 0) 0/3px 100% no-repeat,linear-gradient(#000 0 0) 100%/3px 100% no-repeat}

/* The plume's own key, on one line under the chart rather than as a Plotly legend, so the
   height goes to the traces. The three surface rows need no key: each is labelled by its
   axis, exactly as the climatology series is. */
.forecast-key{display:flex;flex-wrap:wrap;gap:3px 13px;padding:6px 0 3px;color:#8a8a8a;font-family:var(--mono);font-size:7.5px;text-transform:uppercase;letter-spacing:.055em}
.forecast-key[hidden]{display:none}
.forecast-key span{display:inline-flex;align-items:center;gap:5px}
.forecast-key span[hidden]{display:none}
.forecast-key i{width:13px;height:2px;flex:none;background:currentColor;font-style:normal}
.forecast-key .key-mean{color:#e20000}
.forecast-key .key-control{color:#1f5f9e}
.forecast-key .key-band i{height:8px;border-radius:1px;background:rgba(120,120,120,.28);border:1px solid rgba(120,120,120,.5)}
.forecast-key .key-members i{height:7px;background:repeating-linear-gradient(90deg,#b6b6b6 0 1px,transparent 1px 3px)}
body.theme-dark .forecast-key{color:#9aa4ad}

/* Match the unloaded map surface to the reference tiles, preventing dark flashes while
   Leaflet moves or replaces a tile. The model grid uses one-pixel gutters at every row. */
.map-stage,#map{background:#d8dad7}
.forecast-model-toggle{gap:1px;background:rgba(0,0,0,.12)}
.forecast-model-button{border:0!important}
.forecast-model-button:disabled{opacity:.42}
body.theme-dark .map-stage,body.theme-dark #map{background:#252a2f}

/* ── Map scale row ─────────────────────────────────────────────────────────────
   The timeline and a compact colour bar share one row along the bottom of the map, with
   Global sitting on top of the colour bar. Both panels share height, radius and surface so
   the row reads as one instrument; widths follow the map so it also fits on a phone. */
.map-stage{--scale-width:clamp(176px,32%,248px);--scale-row:58px;--scale-edge:20px}
.map-scale-stack{position:absolute;z-index:510;right:var(--scale-edge);bottom:20px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;width:var(--scale-width);pointer-events:none}
.map-scale-stack .map-domain-control{position:relative;inset:auto;flex:none;pointer-events:auto}
.map-scale-stack .legend{position:relative;inset:auto;box-sizing:border-box;width:100%;height:var(--scale-row);display:flex;align-items:center;gap:10px;padding:0 13px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.94);box-shadow:var(--shadow);backdrop-filter:blur(14px);color:#29313a;pointer-events:none}
.legend-unit{flex:none;max-width:54px;font-family:var(--mono);font-size:9px;font-weight:600;line-height:1.2;color:#5d6771;text-align:left;overflow-wrap:anywhere}
.legend-scale{flex:1;min-width:0}
.map-scale-stack .legend-gradient{height:10px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.legend-values{position:relative;height:13px;margin-top:5px;font-family:var(--mono);font-size:9.5px;line-height:13px}
.legend-values>span,#legend-ticks span{position:absolute;top:0;white-space:nowrap}
#legend-min{left:0}#legend-max{right:0}#legend-ticks span{transform:translateX(-50%)}
.map-timeline{box-sizing:border-box;height:var(--scale-row)}
body.forecast-playable .map-timeline:not([hidden]){right:calc(var(--scale-edge) + var(--scale-width) + 10px)}
body.theme-dark .map-scale-stack .legend{background:rgba(17,22,28,.94);border-color:rgba(255,255,255,.18);color:#edf1f4}
body.theme-dark .legend-unit{color:#aeb7bf}
body.theme-dark .map-scale-stack .legend-gradient{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
@media(max-width:720px){
  /* With the dock above Global, the row sits just clear of the tile attribution. */
  body{--phone-row-bottom:calc(30px + env(safe-area-inset-bottom))}
  .map-stage{--scale-width:clamp(142px,42%,190px);--scale-edge:12px}
  /* Right-handed: the colour bar takes the bottom-left corner and the time controls the
     bottom-right, under the thumb. The stack spans the row so the dock and Global keep their
     place at the right edge, above the time controls now rather than the colour bar. */
  .map-scale-stack{left:var(--scale-edge);width:auto;bottom:var(--phone-row-bottom);gap:8px}
  .map-scale-stack .legend{align-self:flex-start;width:var(--scale-width);gap:8px;padding:0 10px}
  .legend-unit{max-width:40px;font-size:8.5px}
  .map-timeline:not([hidden]){left:auto;right:var(--scale-edge)}
  body.forecast-playable .map-timeline:not([hidden]){left:calc(var(--scale-edge) + var(--scale-width) + 8px);right:var(--scale-edge)}
  body.forecast-playable .timeline-play{display:none}
}

/* ── Map info box ───────────────────────────────────────────────────────────────
   Compact by default: kicker, title and valid time. The details (model, run, member,
   lead, overlays) open from a chevron along the box's bottom edge. */
.map-toolbar>.map-info{position:relative}
.map-info:not(.expanded) .map-overlay-summary{display:none}
.map-info-toggle{display:flex;align-items:center;justify-content:center;width:100%;height:16px;margin:5px 0 -7px;padding:0;border:0;border-radius:5px;background:transparent;color:#aebbc1;cursor:pointer;pointer-events:auto;transition:color .15s ease,background .15s ease}
.map-info-toggle:hover{color:#fff;background:rgba(255,255,255,.08)}
.map-info-toggle:focus-visible{outline:2px solid #e20000;outline-offset:1px}
.map-info-toggle span{width:7px;height:7px;margin-top:-4px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .18s ease,margin .18s ease}
.map-info.expanded .map-info-toggle span{margin-top:4px;transform:rotate(-135deg)}
.map-overlay-summary[hidden]+.map-info-toggle,.map-overlay-summary:empty+.map-info-toggle{display:none}
/* Switch feedback: the old map and chart stay visible but dimmed under a veil, with one card
   naming what is loading. Time steps keep only the small caption pill, so playback never flashes. */
.map-stage::after{content:"";position:absolute;inset:0;z-index:450;background:rgba(4,9,14,.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s}
.map-stage.switching::after{opacity:1;visibility:visible;transition:opacity .2s ease .06s,visibility 0s}
.map-stage .legend{transition:opacity .2s ease}.map-stage.switching .legend{opacity:.45}
.map-loading-text{display:flex;flex-direction:column;gap:5px;min-width:0}.map-loading strong,.map-loading em{display:none}
.map-loading.switch{flex-direction:column;gap:10px;min-width:210px;max-width:min(340px,calc(100% - 48px));padding:16px 22px 15px;border-radius:12px;background:rgba(7,16,24,.92);text-align:center;white-space:normal;animation:veil-in .2s ease .06s both}
.map-loading.switch strong{display:block;color:#f5f8f9;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
.map-loading.switch em{display:block;color:#e4ecef;font-style:normal;line-height:1.5}.map-loading.switch span{color:#8d9ba2;font-size:8px;line-height:1.5}.map-loading.switch .loader-ring{width:24px;height:24px}
.plot-loading{animation:veil-in .2s ease .06s both}
.plot-loading .loading-card{display:flex;flex-direction:column;align-items:center;gap:7px;max-width:min(320px,calc(100% - 40px));padding:16px 22px 15px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(7,16,24,.92);box-shadow:0 12px 30px rgba(0,0,0,.3);color:#f5f8f9;backdrop-filter:blur(8px)}
.plot-loading .loading-card strong{color:#f5f8f9;font-size:12px;font-weight:600}
.plot-loading .loading-card span{color:#aebbc1;font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;line-height:1.5;text-transform:uppercase}
@keyframes veil-in{from{opacity:0}}

/* ── Model comparison ────────────────────────────────────────────────────────────
   The Forecast panel's second tab: model chips, key findings, one chart of every model
   against their mean and range, and a day-by-variable grid coloured by agreement. */
body:not(.forecast-mode) .forecast-tabs{display:none}
#analysis-panel.comparing .forecast-run-chip{display:none}
.forecast-tabs{margin-top:12px}
.compare-view{position:absolute;inset:0;display:flex;flex-direction:column;gap:11px;padding:10px 2px 6px 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.compare-view[hidden]{display:none}
.compare-models-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.compare-models{display:flex;flex-wrap:wrap;gap:5px}
.compare-models-note{color:#999;font-family:var(--mono);font-size:7.5px;text-transform:uppercase;letter-spacing:.06em;cursor:help}
.compare-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 7px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#222;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:opacity .15s ease,border-color .15s ease}
.compare-chip i{width:9px;height:9px;flex:none;border-radius:50%;background:var(--chip)}
.compare-chip.ensemble i{background:transparent;box-shadow:inset 0 0 0 2.5px var(--chip)}
.compare-chip:hover:not(:disabled){border-color:var(--chip)}
.compare-chip.excluded{color:#999;background:transparent}
.compare-chip.excluded i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--chip);opacity:.6}
.compare-chip:disabled{cursor:default}
.compare-chip.loading i{animation:compare-pulse 1s ease-in-out infinite}
.compare-chip.failed{color:#999;border-style:dashed;text-decoration:line-through}
@keyframes compare-pulse{50%{opacity:.25}}
.compare-bubble h3,.compare-grid-head h3{margin:0;color:#777;font-family:var(--mono);font-size:7.5px;font-weight:500;text-transform:uppercase;letter-spacing:.1em}
/* Key findings: folded into one button at the foot of the comparison, opening a speech
   bubble over the chart. Sticky, so it stays in reach while the grid scrolls. */
.compare-findings{position:sticky;bottom:0;z-index:6;margin-top:auto;padding:10px 0 2px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 42%)}
.compare-findings-toggle{display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:0 12px 0 11px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#151515;font-family:var(--sans);font-size:10.5px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.07);transition:border-color .15s ease,box-shadow .15s ease}
.compare-findings-toggle:hover,.compare-findings.open .compare-findings-toggle{border-color:#e20000;box-shadow:0 6px 18px rgba(226,0,0,.12)}
.compare-findings-icon{position:relative;flex:none;width:16px;height:12px;border-radius:5px;background:#e20000}
.compare-findings-icon:after{content:"";position:absolute;left:3px;bottom:-3px;width:6px;height:6px;background:#e20000;transform:skewX(-35deg)}
.compare-findings-toggle b{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#151515;color:#fff;font-family:var(--mono);font-size:9px;font-weight:600}
.compare-findings-toggle b.busy{animation:compare-pulse 1s ease-in-out infinite}
.compare-findings-chevron{width:7px;height:7px;margin-left:auto;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:translateY(2px) rotate(45deg);transition:transform .18s ease}
.compare-findings.open .compare-findings-chevron{transform:translateY(-2px) rotate(225deg)}
.compare-bubble{position:absolute;left:0;right:0;bottom:calc(100% - 4px);padding:12px 14px 13px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 18px 44px rgba(0,0,0,.2);animation:bubble-in .16s ease both}
.compare-bubble[hidden]{display:none}
.compare-bubble:after{content:"";position:absolute;left:24px;bottom:-7px;width:12px;height:12px;background:inherit;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.compare-bubble .compare-insights{max-height:min(46vh,300px);overflow-y:auto;overscroll-behavior:contain}
@keyframes bubble-in{from{opacity:0;transform:translateY(6px)}}
.compare-insights{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.compare-insights li{position:relative;padding-left:14px;color:#222;font-size:10.5px;line-height:1.42}
.compare-insights li:before{content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;border-radius:50%;background:#9aa0a6}
.compare-insights li.high:before{background:#2e9e5b}
.compare-insights li.medium:before{background:#d69a2a}
.compare-insights li.low:before{background:#e20000}
.compare-insights li.note{color:#888;font-style:italic}
.compare-insights li.note:before{background:transparent;box-shadow:inset 0 0 0 1px #aaa}
.compare-chart-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:3px 10px;margin-bottom:-6px}
.compare-chart-head strong{color:#151515;font-size:11.5px;font-weight:600}
.compare-chart-head span{color:#888;font-family:var(--mono);font-size:7.5px;text-transform:uppercase;letter-spacing:.06em}
.compare-plot{flex:none;height:clamp(190px,30vh,250px)}
.compare-grid-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.compare-grid-head span{color:#999;font-family:var(--mono);font-size:7px;text-transform:uppercase;letter-spacing:.06em}
.compare-grid{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:9px;overflow:hidden;font-family:var(--mono);font-size:8.5px}
.compare-grid-row{display:grid;grid-template-columns:76px repeat(var(--days),minmax(0,1fr));align-items:stretch;border-top:1px solid var(--line)}
.compare-grid-row:first-child{border-top:0}
.compare-grid-row>span{display:flex;align-items:center;justify-content:center;min-width:0;padding:6px 1px;white-space:nowrap}
.compare-grid-days>span{flex-direction:column;gap:1px;padding:5px 1px 4px;color:#888;font-size:7px;text-transform:uppercase;letter-spacing:.06em}
.compare-grid-days b{color:#222;font-size:9px;font-weight:600;letter-spacing:0}
.compare-grid-row[data-variable]{cursor:pointer}
.compare-grid-row[data-variable]:hover>[role=rowheader],.compare-grid-row[data-variable]:focus-visible>[role=rowheader]{color:#e20000}
.compare-grid-row:focus-visible{outline:2px solid #e20000;outline-offset:-2px}
.compare-grid-row>[role=rowheader]{justify-content:flex-start;gap:4px;padding-left:8px;color:#333;font-family:var(--sans);font-size:9.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.compare-grid-row>[role=rowheader] small{color:#9a9a9a;font-family:var(--mono);font-size:7px;font-weight:400}
.compare-grid-row.active>[role=rowheader]{color:#e20000;box-shadow:inset 3px 0 0 #e20000}
.compare-grid-row.active>.compare-cell{font-weight:700}
.map-variable-dot{width:5px;height:5px;flex:none;border-radius:50%;background:#e20000}
.compare-cell{color:#1d2126}
.compare-cell.high{background:rgba(46,158,91,.15)}
.compare-cell.medium{background:rgba(214,154,42,.22)}
.compare-cell.low{background:rgba(226,0,0,.17)}
.compare-cell.none{color:#aaa}
.compare-empty{margin:0;padding:14px;color:#888;font-size:10px;text-align:center}
.compare-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:7px;color:#888;font-family:var(--mono);font-size:7px;text-transform:uppercase;letter-spacing:.05em}
.compare-legend span{display:inline-flex;align-items:center;gap:4px}
.compare-legend span:before{content:"";width:9px;height:9px;border-radius:2px}
.compare-legend .high:before{background:rgba(46,158,91,.35)}
.compare-legend .medium:before{background:rgba(214,154,42,.45)}
.compare-legend .low:before{background:rgba(226,0,0,.35)}
.compare-legend em{margin-left:auto;font-style:normal;text-transform:none;letter-spacing:0}
body.theme-dark .compare-chip{background:#161c23;color:#e7ebee;border-color:rgba(255,255,255,.16)}
body.theme-dark .compare-chip.excluded,body.theme-dark .compare-chip.failed{background:transparent;color:#7d8791}
body.theme-dark .compare-findings{background:linear-gradient(180deg,rgba(17,22,28,0),#11161c 42%)}
body.theme-dark .compare-findings-toggle,body.theme-dark .compare-bubble{background:#161c23;color:#e7ebee;border-color:rgba(255,255,255,.16)}
body.theme-dark .compare-bubble:after{border-color:rgba(255,255,255,.16)}
body.theme-dark .compare-findings-toggle b{background:#f0f2f4;color:#111}
body.theme-dark .compare-insights li{color:#e3e8ec}
body.theme-dark .compare-insights li.note{color:#8f99a3}
body.theme-dark .compare-chart-head strong,body.theme-dark .compare-grid-days b,body.theme-dark .compare-cell{color:#edf1f4}
body.theme-dark .compare-grid-row>[role=rowheader]{color:#d5dbe0}
body.theme-dark .compare-grid-row.active>[role=rowheader]{color:#ff5a5a}
body.theme-dark .compare-grid,body.theme-dark .compare-grid-row{border-color:rgba(255,255,255,.12)}
body.theme-dark .compare-cell.high{background:rgba(46,158,91,.28)}
body.theme-dark .compare-cell.medium{background:rgba(214,154,42,.3)}
body.theme-dark .compare-cell.low{background:rgba(226,0,0,.3)}
body.theme-dark .compare-cell.none{color:#66707a}
@media(max-width:720px){
  /* In the phone sheet the comparison flows with the sheet's own scroll: one scroller. */
  .plot-wrap.comparing{flex:none;min-height:0;overflow:visible}
  .plot-wrap.comparing .compare-view{position:relative;inset:auto;overflow:visible;padding-right:0}
  .compare-plot{height:220px}
  .compare-grid-row{grid-template-columns:72px repeat(var(--days),minmax(0,1fr))}
}