/* Regional instrument: Palette colours, one map, two type families. */
@import url('/fonts/region-faces.css');
:root{--font-ui:'Jost','Prompt',sans-serif;--font-display:var(--font-ui);--font-num:var(--font-ui)}
*{box-sizing:border-box}
html,body{height:auto;min-height:100%;overflow:auto}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--font-ui)}
a{color:var(--ink);text-underline-offset:3px}
button,select{font:inherit;color:var(--ink);min-height:44px;cursor:pointer}
button{border:0;background:transparent;padding:8px 12px;text-align:left}
button:hover{color:var(--ink);background:var(--well-dim)}
button:hover,a:hover{text-decoration:underline}
button:disabled{opacity:.6;cursor:wait}
select{width:100%;min-width:0;border:1px solid var(--rule);border-radius:0;background:var(--well);padding:8px 30px 8px 10px}
:focus-visible{outline:3px solid var(--th-amber);outline-offset:3px}
header{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:8px 20px;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--ink);text-decoration:none;font-size:21px;font-weight:600;white-space:nowrap}
.brand img{object-fit:contain}.brand small{font-size:12px;font-weight:400}
header nav{display:flex;align-items:center;gap:20px;font-size:15px}
header nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}.active{font-weight:600;border-bottom:2px solid var(--th-sage);padding:8px 0}
#language{padding:8px 4px}
.region-heading{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:16px 20px}
h1,h2,h3{font-family:var(--font-display);line-height:1.25}
h1{font-size:32px;font-weight:600;letter-spacing:-.025em;margin:0}
.region-heading>a{margin-left:auto;font-size:15px}
#status{order:3;flex-basis:100%;margin:0;font-size:14px;color:var(--ink-mid);max-width:75ch}
.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start}
.map-stage{min-width:0}
#regional-map{height:72dvh;min-height:460px;max-height:900px;background:var(--well-dim);z-index:0}
.instrument-panel{padding:0 20px 24px;overflow-wrap:anywhere;min-width:0}
.instrument-panel h2{font-size:21px;font-weight:600;margin:0 0 16px}
.instrument-panel h2:not(:first-child){margin-top:28px}
.map-tools,.field-controls{display:flex;flex-direction:column;gap:16px}
.map-tools label,.field-controls label{display:flex;flex-direction:column;gap:6px;font-size:15px;min-width:0}
.map-tools>button{align-self:flex-start;padding:0;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.map-tools label:has(input),.wind-option{display:flex;flex-direction:row;align-items:flex-start;gap:10px;min-height:44px;font-size:15px;line-height:1.5}
input[type=checkbox]{flex:none;width:20px;height:20px;margin:2px 0;accent-color:var(--th-deep)}
.wind-option{margin:16px 0}
.field-controls{margin:20px 0 8px}
#time-control[hidden]{display:none}
#field-time{width:100%;min-height:44px;accent-color:var(--th-deep)}
#field-clock{font-size:14px}
.method-note{margin:4px 0;font-size:14px}
summary{cursor:pointer;min-height:44px;padding:10px 0;line-height:1.5}
.method-note p{max-width:65ch;margin:0 0 12px}
.caption{font-size:14px;color:var(--ink-mid);line-height:1.6;max-width:65ch}
.map-stage>.caption{margin:12px 20px}
#layer-note:empty{display:none}
.pm-scale{margin:16px 20px;max-width:360px;font-size:13px;line-height:1.6;color:var(--ink)}
.pm-scale .scale-title{display:block;font-size:14px;font-weight:600;margin-bottom:5px}
.pm-scale div{height:8px;background:linear-gradient(90deg,#2c97ae,#68b9a0,#cbd75c,#f0ad36,#cf4b35,#813e83,#472656)}
.pm-scale span:last-child{display:block;margin-top:4px;word-spacing:3px}
.pm-scale[hidden]{display:none}
#imagery-legend{display:block;width:320px;max-width:calc(100% - 40px);height:auto;background:white;margin:16px 20px}
#imagery-legend[hidden]{display:none}
.reading{margin:16px 0}
.reading h3{font-size:17px;margin:0 0 4px;font-weight:600}
.reading strong{font-size:18px;font-weight:600}
.reading p{font-size:14px;color:var(--ink-mid);margin:4px 0;max-width:65ch}
#coverage>p,#coverage details{font-size:14px;line-height:1.6}
#refresh{padding-left:0;text-decoration:underline;text-underline-offset:3px}
.stale{color:var(--th-red)}
.region-library{padding:16px 20px;border-top:1px solid var(--rule)}
.region-library>summary{font-size:21px;font-weight:600}
.region-library-body{max-width:1200px}
.region-library-body section{margin:20px 0 40px}
.region-library-body h2{font-size:25px;font-weight:600;margin:0 0 16px}
.region-library-body p,.region-library-body ol{max-width:65ch}
ol{padding-left:22px}li{margin:12px 0}
.cards article{display:grid;grid-template-columns:180px 1fr 2fr;gap:12px 24px;padding:16px 0;border-bottom:1px solid var(--rule);align-items:start}
.cards article p{margin:0;line-height:1.6;font-size:15px}
.cards article button{padding:0;font-weight:600;font-size:18px}
.cards article>a{grid-column:2/-1;font-size:14px}
#resources article{grid-template-columns:220px 1fr}
#resources h3{font-size:17px;font-weight:500;margin:0}
.status-label{color:var(--ink-mid)}
footer{display:flex;flex-wrap:wrap;gap:12px;padding:16px 20px;font-size:14px;border-top:1px solid var(--rule)}
.regional-wind .wind-arrow{display:block;color:#163b50;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff);}
.leaflet-container{font-family:var(--font-ui)}
.leaflet-popup-content{font:400 15px/1.6 var(--font-ui);color:#163b50}
.leaflet-popup-content a{color:#075672}
.leaflet-control-attribution{font-size:11px!important;color:#172c37!important;background:#fff!important}
.leaflet-control-attribution a{color:#075672!important}
@media(max-width:1100px){.map-layout{grid-template-columns:minmax(0,1fr) 290px}.instrument-panel{padding:0 16px 20px}h1{font-size:29px}}
@media(max-width:700px){
 header{gap:12px;padding:8px 14px}.brand{font-size:18px}.brand .airdash-mark{display:none}header nav{gap:12px;font-size:14px}.active{display:none}
 .region-heading{padding:16px 14px;gap:8px 16px}h1{font-size:27px}.region-heading>a{margin-left:0;font-size:14px}#status{font-size:14px;order:3}
 .map-layout{display:block}#regional-map{height:56dvh;min-height:350px;max-height:600px}
 .instrument-panel{padding:20px 14px}.instrument-panel h2{font-size:23px}
 .map-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 12px;align-items:end}.map-tools>button{white-space:nowrap;padding:8px 0}.map-tools label:not(:first-child){grid-column:1/-1}
 .field-controls{max-width:100%}.map-stage>.caption,.pm-scale{margin:14px}.pm-scale{max-width:calc(100% - 28px);width:360px}
 .region-library{padding:14px}.region-library>summary{font-size:23px}.cards article,#resources article{grid-template-columns:minmax(0,1fr);gap:8px}.cards article>a{grid-column:auto}
 footer{padding:16px 14px}.caption,.reading p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.map-key{display:grid;grid-template-columns:minmax(200px,320px) minmax(0,1fr);gap:16px 24px;padding:16px 20px;align-items:start}
.map-key .pm-scale{margin:0;max-width:100%;width:auto}.map-key .caption{margin:0 0 8px;max-width:65ch}
.map-key #imagery-legend{margin:8px 0;max-width:100%}
@media(max-width:900px){.map-key{grid-template-columns:minmax(0,1fr);gap:12px;padding:14px}.map-key .pm-scale{width:360px;max-width:100%}}
/* Flood reports have their own source/period and a distinct geographic symbol. */
.flood-watch{margin:28px 0}.flood-watch h2{margin-bottom:12px}.flood-option{display:flex;align-items:flex-start;gap:10px;font-size:15px;min-height:44px}.flood-watch details{font-size:14px}.flood-watch p{max-width:65ch;line-height:1.6}
.regional-flood span{display:block;width:26px;height:22px;background:#163b50;color:#fff;border:1px solid #fff;font:600 12px/20px var(--font-ui);text-align:center}
#flood-events>p{margin:0 0 20px}

.region-map-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 8px 16px; padding: 0 20px 12px; }
.region-map-toolbar label { font-size: 14px; }
.region-map-toolbar select { width: 240px; display: block; }
#fire-status { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 1.5; }
.fire-key { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 13px; line-height: 1.5; }
.fire-key > span:first-child { flex-basis: 100%; }
.fire-key i { display: inline-block; width: 12px; height: 12px; background: #a44216; margin-right: 4px; }
@media(max-width:700px) { .region-map-toolbar { padding: 0 14px 12px; align-items: end; gap: 8px 12px; } .region-map-toolbar label { flex: 1; min-width: 0; } .region-map-toolbar select { width: 100%; } .region-map-toolbar button { font-size: 14px; padding: 8px 0; } }

.regional-wind-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; margin-bottom: 12px; }

/* Preserve geographic contrast when browser darkening rewrites image blending. */
#regional-map .leaflet-tile{mix-blend-mode:normal!important;color-scheme:only light}

/* Regional operating composition: identity, choose, map; explanations follow. */
header{padding:3px 16px;gap:16px;flex-wrap:nowrap;min-height:52px}
header nav{gap:16px}.brand{font-size:18px}.brand small{font-size:11px}
.scope-title{font-size:18px;font-weight:600;letter-spacing:0;margin:0}
.region-map-toolbar{padding:3px 16px;gap:12px;align-items:center;flex-wrap:nowrap;min-height:52px;border-bottom:1px solid var(--rule)}
.region-map-toolbar>label{display:flex;align-items:center;gap:8px;white-space:nowrap}
.region-map-toolbar select{display:inline-block;width:180px;min-height:44px;padding:6px 24px 6px 8px}
.region-map-toolbar button{white-space:nowrap;padding:6px 8px;font-size:14px}
#wind-reading{display:flex;align-items:center;gap:6px;margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:20px}
#wind-reading strong{font-size:28px;line-height:1.1}#wind-reading small{font-size:12px;font-weight:400}#wind-reading>span{font-size:18px}
#wind-reading .wind-arrow{color:var(--th-sage);display:block}
.map-layout{grid-template-columns:minmax(0,1fr) 304px;align-items:start}
#regional-map{height:calc(100dvh - 104px);min-height:460px;max-height:none}
.instrument-panel{padding:12px 16px}.instrument-panel h2{font-size:24px;margin:0 0 12px}
.wind-instrument label{font-size:14px}.origin-label{display:flex;align-items:center;gap:8px}.origin-label>span{white-space:nowrap}.origin-label select{font-size:14px;padding-left:6px}
.wind-time{display:grid;grid-template-columns:1fr;gap:4px;margin:10px 0}.wind-time select{font-size:14px}.wind-time input{width:100%;min-height:32px;margin:0}.wind-time output{font-size:14px;font-variant-numeric:tabular-nums}
#wind-position{font-size:13px;margin:4px 0 8px;color:var(--ink-mid)}
#wind-path-summary{display:block;font-size:17px;color:var(--th-sage);line-height:1.45}
#wind-steps{list-style:none;margin:8px 0;padding:0;font-size:13px;font-variant-numeric:tabular-nums}
#wind-steps li{display:grid;grid-template-columns:34px 1fr;gap:0 6px;margin:6px 0}
#wind-steps li>span:last-child{grid-column:2;color:var(--ink-mid)}#wind-steps time{font-weight:600;color:var(--th-sage)}
.scenario-limit{font-size:13px;line-height:1.5;margin:10px 0;max-width:40ch}.wind-instrument .caption{font-size:12px;line-height:1.5;margin:6px 0}
.layer-drawer{margin-top:14px}.layer-drawer>summary{font-size:16px;font-weight:600;cursor:pointer;min-height:44px;display:flex;align-items:center}.layer-drawer>summary::before{content:'▸';margin-right:8px}.layer-drawer[open]>summary::before{content:'▾'}
.map-tools,.field-controls{gap:8px}.regional-wind-link{margin:0;font-size:13px}.method-note{margin:8px 0}.flood-watch{margin:18px 0}.instrument-panel .flood-watch h2,.instrument-panel>h2{font-size:18px;margin:16px 0 8px}
.map-evidence{padding:12px 16px;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px}.map-evidence #fire-status{font-size:13px;flex-basis:100%}.map-evidence #status{order:0;flex-basis:auto;max-width:none;font-size:13px}.map-evidence>a{min-height:32px;display:inline-flex;align-items:center}.map-key{padding:4px 16px 12px}
.wind-grid-label{color:#163b50;text-align:center;font:600 12px/1 var(--font-ui);text-shadow:0 0 2px white,1px 1px white,-1px -1px white;pointer-events:none}.wind-grid-label .wind-arrow{display:block;margin:auto;filter:drop-shadow(0 0 1px white)}.wind-grid-label span{display:block}
.wind-hour-mark{color:#fff;font:600 12px/24px var(--font-ui);text-align:center;background:#075672;border:1px solid white;white-space:nowrap}
@media(max-width:1100px){.map-layout{grid-template-columns:minmax(0,1fr) 290px}.instrument-panel{padding:12px}.region-map-toolbar>label>span{display:none}}
@media(max-width:700px){
 header{padding:3px 10px;gap:10px}header nav{gap:8px}header nav a{font-size:14px}.scope-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .map-layout{display:block}.brand{font-size:18px}.region-map-toolbar{padding:3px 10px;gap:8px}.region-map-toolbar select{width:158px;font-size:14px}.region-map-toolbar>label{flex:0 0 auto}.region-map-toolbar button{display:none}
 #wind-reading{font-size:14px;gap:4px}#wind-reading strong{font-size:23px}#wind-reading small{font-size:11px}#wind-reading>span{font-size:14px}#wind-reading .wind-arrow{width:24px}
 #regional-map{height:calc(100svh - 104px);min-height:400px;max-height:none}.instrument-panel{padding:16px 14px}.wind-instrument{max-width:65ch}.wind-time{grid-template-columns:auto 1fr;gap:6px 12px;align-items:center}.wind-time input{min-height:44px}.wind-time output{grid-column:2}
 #wind-steps li{grid-template-columns:34px 1fr auto}#wind-steps li>span:last-child{grid-column:auto}.scenario-limit{max-width:65ch}.map-evidence{padding:12px 14px}.map-tools{display:flex;gap:8px}.map-tools label:not(:first-child){grid-column:auto}
}

#focus-wind{padding:4px 0;min-height:40px;font-size:14px;text-decoration:underline;color:var(--th-sage)}
.wind-map-key{background:#fff;color:#163b50;padding:4px 6px;font:400 12px/1.4 var(--font-ui);max-width:calc(100vw - 80px);overflow-wrap:anywhere}

#wind-reading{padding:0;min-height:44px;text-decoration:none}#wind-reading:hover{background:transparent}#wind-dialog{color:var(--ink);background:var(--paper);border:1px solid var(--rule);padding:12px 16px;max-width:calc(100vw - 20px);width:400px;max-height:calc(100dvh - 24px)}#wind-dialog::backdrop{background:#0009}#wind-dialog form{text-align:right}#wind-dialog form button{padding:4px 0;min-height:44px}#wind-dialog .wind-instrument{padding:0}
@media(max-width:700px){#wind-reading::after{content:'▾';font-size:12px;margin-left:2px}.instrument-panel:has(.wind-instrument)>.wind-instrument{display:none}.region-map-toolbar select{width:150px}}

#regional-map{color-scheme:only light}

.wind-map-key{white-space:pre-line}
@media(max-width:360px){.region-map-toolbar select{width:120px}#wind-reading>span>small{display:none}}
@media(min-width:701px) and (max-width:900px){.region-map-toolbar select{width:150px}.region-map-toolbar #reset-map{font-size:13px;padding-inline:4px}}

/* Keep the source receipt with the picture it qualifies, inside the first screen. */
.regional-view{display:grid;grid-template-rows:auto auto minmax(350px,1fr);height:calc(100dvh - 52px)}
.regional-view #regional-map{height:100%;min-height:350px}
.regional-view .map-evidence{padding:6px 16px;border-bottom:1px solid var(--rule);gap:2px 12px}
.regional-view .map-evidence>a{min-height:44px}
@media(max-width:700px){.regional-view .map-evidence{padding:6px 10px}.regional-view .map-evidence #fire-status,.regional-view .map-evidence #status{font-size:13px;line-height:1.5}}
/* Full Myanmar / Burma label fits beside a three-digit wind reading on phones. */
@media(min-width:361px) and (max-width:700px){.region-map-toolbar select{width:176px}}