:root{--ink:#17232d;--muted:#71808c;--line:#e5ebef;--blue:#176fba;--blue2:#eaf4fb;--bg:#f5f8fa;--green:#21856b;--amber:#c8872e;--red:#c64f50}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}.shell{display:flex;min-height:100vh}.sidebar{width:248px;background:#101e2a;color:#dce6ed;padding:25px 17px;display:flex;flex-direction:column;flex-shrink:0}.brand{display:flex;gap:11px;align-items:center;color:#fff;text-decoration:none;font-family:Manrope;font-size:17px;font-weight:800;padding:0 7px 35px}.brand-mark{width:37px;height:37px;border-radius:11px;background:#1685c9;display:grid;place-items:center;font-size:12px;color:#fff}.brand-sub{display:block;font:700 8px 'DM Sans';letter-spacing:1.3px;color:#8fa4b3;margin-top:3px}.nav-label,.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#8295a3}.nav-label{padding:0 10px 12px}.sidebar nav{display:grid;gap:5px}.sidebar nav a{padding:12px 11px;color:#aebdc8;text-decoration:none;border-radius:8px;display:flex;gap:12px;align-items:center;font-size:13px}.sidebar nav a:hover,.sidebar nav a.active{background:#1c3445;color:#fff}.sidebar nav a.active{box-shadow:inset 3px 0 #2d9fe0}.sidebar-bottom{margin-top:auto;border-top:1px solid #293a47;padding:17px 7px 0;display:flex;align-items:center;gap:10px;font-size:11px}.sidebar-bottom small{display:block;color:#8fa0ac;margin-top:3px}.status-dot,.dot{width:8px;height:8px;border-radius:50%;background:#40b88c;display:inline-block}.main{min-width:0;flex:1}.topbar{height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px}.eyebrow{color:#8a99a4}.top-title{font:700 17px Manrope;margin-top:4px}.top-right{display:flex;align-items:center;gap:17px}.demo-tag{font-size:9px;letter-spacing:1px;font-weight:800;color:#9a6a1b;background:#fff5df;border:1px solid #f4e2bc;border-radius:20px;padding:6px 10px}.date-label{color:var(--muted);font-size:12px}.content{padding:30px 38px 45px;max-width:1600px;margin:auto}.welcome-row,.page-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}.welcome-row h1,.page-intro h1{font:800 27px Manrope;margin:0 0 7px;letter-spacing:-.8px}.welcome-row h1 em,.page-intro h1 em{color:#1685c9;font-style:normal}.welcome-row p,.page-intro p{margin:0;color:var(--muted)}.notice{display:flex;gap:12px;align-items:flex-start;background:#fff9ec;border:1px solid #f1e4c7;border-radius:9px;padding:12px 15px;color:#785b2c;font-size:12px;margin:0 0 19px}.notice b{white-space:nowrap}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:31px}.metric{background:#fff;border:1px solid var(--line);border-radius:11px;padding:17px 18px;box-shadow:0 2px 8px #142b3c05}.metric-label{color:#687984;font-size:11px;font-weight:600}.metric-label span{float:right;color:#a6b2ba}.metric-value{font:800 30px Manrope;margin:8px 0 4px}.metric-foot{font-size:10px;color:#84929c}.muted{color:#a0aab1}.dot{margin-right:5px}.dot.amber{background:#e2a23c}.dot.blue{background:#4597cf}.section-head{display:flex;justify-content:space-between;align-items:end;margin:24px 0 12px}.section-head h2,.form-card h2{font:700 15px Manrope;margin:0 0 4px}.section-head p{font-size:11px;color:var(--muted);margin:0}.text-link{color:var(--blue);font-size:11px;font-weight:700;text-decoration:none}.table-card,.form-card{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden}.table-card{overflow-x:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;background:#f8fafb;color:#81909a;font-size:9px;text-transform:uppercase;letter-spacing:.7px;padding:12px 15px}td{padding:13px 15px;border-top:1px solid #edf1f3;font-size:11px;color:#52616c}td b{color:#253540}.table-note{padding:11px 15px;background:#fbfcfd;color:#8b989f;font-size:10px;border-top:1px solid var(--line)}.aqi-pill,.severity,.status{display:inline-block;border-radius:20px;padding:4px 8px;font-size:9px;font-weight:700}.aqi-pill.bad,.severity.high{background:#fde9e7;color:#b74742}.aqi-pill.warn,.severity.moderate{background:#fff3dc;color:#9b6b1f}.aqi-pill.good,.severity.low{background:#e5f5ed;color:#217d5e}.status{background:#eef2f5;color:#657681}.status.open{background:#fff3dc;color:#98691d}.status.in-progress{background:#e8f3fc;color:#286eaa}.status.completed{background:#e5f5ed;color:#217d5e}.status.blocked{background:#fde9e7;color:#b74742}.status.neutral{background:#eef2f5;color:#657681}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:26px}.stack{display:grid;gap:9px}.list-card{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:9px;padding:13px 14px}.list-main{min-width:0}.list-main b{font-size:12px}.list-main small{display:block;color:#87949c;font-size:10px;margin-top:5px;line-height:1.45}.list-main p{font-size:11px;color:#64727c;margin:7px 0 0;line-height:1.5}.bottom-callout{margin-top:27px;padding:19px 21px;background:#eaf4fb;border:1px solid #d5e9f6;border-radius:11px;display:flex;justify-content:space-between;align-items:center}.bottom-callout b{font:700 14px Manrope}.bottom-callout p{font-size:11px;color:#627987;margin:5px 0 0}.btn{border:0;border-radius:7px;padding:10px 14px;font:700 11px 'DM Sans';text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.btn.primary{background:#147fc1;color:#fff}.btn.secondary{background:#eaf4fb;color:#176fba}.btn.dark{background:#18384e;color:#fff}.btn.tiny{padding:6px 9px;background:#eaf4fb;color:#176fba}.form-card{padding:19px 20px;margin-bottom:25px}.form-card h2{margin-bottom:16px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 16px}.form-grid label{display:flex;flex-direction:column;gap:6px;color:#657580;font-size:10px;font-weight:700}.form-grid input,.form-grid select,.form-grid textarea,.inline-form select{width:100%;border:1px solid #dfe7eb;border-radius:6px;padding:9px 10px;color:#34434d;background:#fff;font:12px 'DM Sans';outline:none}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:#55a2d4;box-shadow:0 0 0 3px #1685c914}.wide{grid-column:1/-1}.form-actions{grid-column:1/-1}.inline-form{display:flex;gap:5px;align-items:center}.inline-form select{min-width:105px;padding:6px;font-size:10px}.subcell{display:block;color:#9aa5ac;font-size:9px;margin-top:4px;max-width:220px;white-space:normal}.empty{padding:22px;background:#fff;border:1px dashed #dce4e9;border-radius:9px;color:#87949c;font-size:12px}.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:14px;background:#fff;border:1px solid var(--line);padding:10px;border-radius:11px}#map{height:590px;border-radius:8px;z-index:1}.map-legend{padding:12px 8px}.map-legend h3{font:700 12px Manrope;margin:3px 0 14px}.map-legend>div:not(.map-item){font-size:10px;color:#63727c;margin:12px 0}.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px}.legend-dot.reading{background:#df9b3a}.legend-dot.source{background:#3276c8}.legend-dot.hotspot{background:#c64f50}.map-legend hr{border:0;border-top:1px solid var(--line);margin:17px 0}.map-item{padding:9px 0;border-bottom:1px solid #edf1f3}.map-item b,.map-item span{display:block;font-size:10px}.map-item span{color:#87949c;margin-top:4px}.flash-wrap{padding:12px 38px 0}.flash{padding:10px 13px;border-radius:7px;font-size:11px;background:#e5f5ed;color:#217d5e}.flash.error{background:#fde9e7;color:#b74742}footer{border-top:1px solid var(--line);padding:17px 38px;color:#9aa5ac;font-size:10px}footer span{float:right}
@media(max-width:1050px){.sidebar{width:210px}.content{padding:25px}.topbar{padding:0 25px}.metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.shell{display:block}.sidebar{width:100%;padding:13px 15px}.brand{padding:0 4px 12px}.sidebar nav{display:flex;overflow:auto}.sidebar nav a{white-space:nowrap;padding:9px;font-size:11px}.sidebar nav a span{display:inline}.nav-label,.sidebar-bottom{display:none}.topbar{height:65px;padding:0 17px}.content{padding:22px 15px}.welcome-row,.page-intro{align-items:flex-start;flex-direction:column}.welcome-row h1,.page-intro h1{font-size:23px}.metrics{gap:9px}.metric{padding:13px}.metric-value{font-size:25px}.two-col{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.wide,.form-actions{grid-column:auto}.map-layout{grid-template-columns:1fr}.map-legend{display:none}#map{height:450px}.bottom-callout{align-items:flex-start;gap:12px;flex-direction:column}footer{padding:15px}footer span{float:none;display:block;margin-top:5px}.flash-wrap{padding:10px 15px 0}.top-right{gap:7px}.date-label{display:none}}

/* Civic action network extension */
.panel{background:#fff;border:1px solid #e5eaf0;border-radius:14px;padding:22px;margin:0 0 18px;box-shadow:0 5px 18px rgba(20,38,60,.045)}
.panel h2{font-family:Manrope,sans-serif;font-size:19px;margin:0 0 10px;color:#17283e}
.panel p{color:#607086;line-height:1.55}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end}
.form-grid label{display:flex;flex-direction:column;gap:6px;color:#43536a;font-size:13px;font-weight:600}
.form-grid .wide{grid-column:1/-1}
.form-grid input,.form-grid select,.form-grid textarea,.table-wrap input,.table-wrap select{width:100%;padding:10px 11px;border:1px solid #d8e0e9;border-radius:8px;background:#fff;color:#1d2d42;font:inherit}
.form-grid textarea{min-height:90px;resize:vertical}
.form-grid input[type=checkbox]{width:auto;display:inline-block}
button,.button{display:inline-block;border:0;border-radius:8px;padding:10px 15px;background:#1769aa;color:white;font-weight:700;text-decoration:none;cursor:pointer}
button:hover,.button:hover{background:#0d568f}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
.stats .stat{background:#fff;border:1px solid #e5eaf0;border-radius:12px;padding:16px}
.stats .stat span{display:block;color:#718096;font-size:12px}
.stats .stat b{display:block;font-size:25px;color:#173451;margin-top:6px}
.table-wrap{overflow:auto}
.table-wrap table{width:100%;border-collapse:collapse;font-size:13px}
.table-wrap th,.table-wrap td{padding:11px 10px;text-align:left;border-bottom:1px solid #e8edf2;vertical-align:top}
.table-wrap th{color:#65758a;background:#f7f9fb;font-weight:700;white-space:nowrap}
.table-wrap small{color:#718096;line-height:1.4}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px}
@media(max-width:760px){.form-grid,.stats{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.panel{padding:16px}.toolbar{align-items:flex-start;flex-direction:column}}

.logout-form{display:inline;margin:0}.logout-button{background:transparent!important;color:inherit!important;padding:0!important;border:0!important;font:inherit!important;text-decoration:underline;cursor:pointer}
.honeypot{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

.civic-pulse{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0}
.civic-pulse h2{margin:3px 0 4px;font-size:17px}.civic-pulse p{margin:0;color:#64748b;font-size:13px}
@media(max-width:760px){.civic-pulse{align-items:flex-start;flex-direction:column}}

.brain-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.brain-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 26px}
.brain-panel,.belief-card,.proposal-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:17px}
.brain-panel .section-head{margin:0 0 13px}
.cycle-summary{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.cycle-summary span,.brain-cycle small{color:var(--muted);font-size:10px}
.brain-cycle p{font-size:12px;line-height:1.6;color:#586873}
.cycle-stats{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0}
.cycle-stats span{background:#eaf4fb;color:#176fba;border-radius:20px;padding:5px 8px;font-size:10px;font-weight:700}
.brain-loop{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.brain-loop div{border:1px solid #e7edf1;border-radius:8px;padding:10px}
.brain-loop b,.brain-loop span{display:block}
.brain-loop b{font-size:11px;color:#176fba}
.brain-loop span{font-size:10px;color:#7c8b95;line-height:1.45;margin-top:4px}
.belief-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.belief-card{padding:15px}
.belief-top,.proposal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.belief-top b{font:700 13px Manrope}
.belief-card>p{font-size:12px;line-height:1.45;min-height:34px}
.confidence-row{display:flex;align-items:center;gap:8px;font-size:10px;color:#788792}
.confidence-row b{font-size:12px;color:#1d3545}
.confidence-track{height:6px;background:#edf1f3;border-radius:10px;margin:7px 0 12px;overflow:hidden}
.confidence-track i{display:block;height:100%;background:#21856b;border-radius:10px}
.belief-reason{font-size:10px;line-height:1.5;color:#65747e;min-height:68px;margin-bottom:9px}
.belief-card small{display:block;color:#97a2a9;font-size:9px;margin-bottom:8px}
.proposal-card{padding:16px}
.proposal-head h3{font:700 14px Manrope;margin:5px 0}
.proposal-zone{font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:#1685c9;font-weight:800}
.proposal-card>p{font-size:11px;line-height:1.55;color:#64727c}
.proposal-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:#71808a;font-size:10px;margin:10px 0}
.proposal-meta b{color:#3c4c56}
.decision-form{border-top:1px solid var(--line);padding-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.decision-form label{font-size:10px;color:#657580;display:grid;gap:5px}
.decision-form input,.lesson-form input{border:1px solid #dfe7eb;border-radius:6px;padding:8px;font:11px 'DM Sans';min-width:0}
.decision-form .decision-note{grid-column:1/-1}
.decision-buttons{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.decision-record{padding:10px;background:#f5f8fa;border-radius:7px;color:#687984;font-size:10px;line-height:1.7}
.lesson-form{display:flex;gap:7px;margin-top:9px}
.lesson-form input{flex:1}
@media(max-width:1100px){.belief-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.brain-grid,.belief-grid{grid-template-columns:1fr}.brain-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.brain-loop{grid-template-columns:1fr}.decision-form{grid-template-columns:1fr}.decision-form .decision-note,.decision-buttons{grid-column:auto}.lesson-form{display:grid}}

/* ---- Public citizen-facing layout (citizen_base.html) ------------------- */
/* Standalone public shell: intentionally carries no internal navigation. */
.public-body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px;min-height:100vh;display:flex;flex-direction:column}
.public-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:15px 34px;background:#101e2a;color:#dce6ed}
.public-brand{display:flex;gap:11px;align-items:center;color:#fff;text-decoration:none;font:800 17px Manrope}
.public-nav{display:flex;gap:7px;flex-wrap:wrap}
.public-nav a{padding:9px 14px;border-radius:8px;color:#aebdc8;text-decoration:none;font-size:12px;font-weight:700}
.public-nav a:hover{background:#1c3445;color:#fff}
.public-nav a.active{background:#1685c9;color:#fff}
.public-main{flex:1;width:100%;max-width:880px;margin:0 auto;padding:30px 24px 44px}
.public-head{margin-bottom:18px}
.public-kicker{font-size:9px;font-weight:800;letter-spacing:1.5px;color:#1685c9}
.public-head h1{font:800 27px Manrope;margin:7px 0 0;letter-spacing:-.6px}
.public-flash-wrap{display:grid;gap:8px;margin-bottom:16px}
.public-body .panel{background:#fff;border:1px solid var(--line);border-radius:11px;padding:21px 22px}
.public-body .panel h2{font:700 16px Manrope;margin:0 0 8px}
.public-body .panel h3{font:700 13px Manrope;margin:18px 0 6px}
.public-body .panel p{margin:0 0 12px;color:#64727c;font-size:12px;line-height:1.6}
.public-body .panel hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.public-body .form-grid{margin-top:16px}
.public-body button{border:0;border-radius:7px;padding:11px 16px;background:#147fc1;color:#fff;font:700 12px 'DM Sans';cursor:pointer}
.public-body button:hover{background:#1168a0}
.public-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);background:#fff;padding:17px 34px;font-size:10px;color:#8e9aa2}
.public-footer b{display:block;color:#5d6b74;margin-bottom:3px}
.public-footer span{display:block;max-width:620px;line-height:1.55}
.public-staff-link{color:#9aa5ac;text-decoration:none;font-weight:700;white-space:nowrap}
.public-staff-link:hover{color:#176fba;text-decoration:underline}
@media(max-width:620px){.public-top{padding:13px 18px}.public-main{padding:22px 16px 34px}.public-head h1{font-size:22px}.public-footer{padding:15px 18px}.public-body .form-grid{grid-template-columns:1fr}}
.source-tiers{width:100%;border-collapse:collapse;margin:12px 0 10px;white-space:normal}
.source-tiers th{background:#f8fafb;font-size:9px;padding:9px 11px}
.source-tiers td{padding:10px 11px;font-size:11px;vertical-align:middle}
.source-tiers code{background:#eef3f6;border-radius:4px;padding:1px 5px;font-size:10px}
.gis-status{font-size:9px;line-height:1.5;color:#6b7c86;background:#f1f6f9;border:1px solid #e1eaef;border-radius:6px;padding:7px 8px;margin:0 0 12px}
.legend-dot.ward{background:#7d65b1}
.signal-sub{font:600 10px 'DM Sans';color:#8e9aa2;margin-left:8px}
.signal-stack{margin-top:14px;max-height:470px;overflow-y:auto}
.signal-stack .list-main b a{font-size:12px;line-height:1.45}

/* ---- Ward map (templates/wards.html) ----------------------------------- */
.ward-map-wrap{margin:16px 0 20px}
#ward-map{height:min(58vh,520px);min-height:360px;border:1px solid var(--line);border-radius:10px;z-index:1}
.ward-map-note{margin-top:9px;font-size:10px;color:#6b7c86;background:#f1f6f9;border:1px solid #e1eaef;border-radius:6px;padding:7px 9px}
.ward-map-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;font-size:10px;color:#6b7c86}
.ward-map-legend span{display:flex;align-items:center;gap:6px}
.legend-swatch{width:11px;height:11px;border-radius:3px;display:inline-block}
.legend-swatch.gmda{background:#8d82d9;border:1.5px solid #6f5aa8}
.legend-swatch.record{background:#e0623f;border:1.5px solid #b4482f;border-radius:50%}
/* Permanent map labels: flat text, no tooltip chrome.
   Leaflet's stylesheet is loaded from the page's {% block head %}, i.e. AFTER this
   file, so .leaflet-tooltip would win on equal specificity. Qualifying with the
   Leaflet class gives these rules two classes and lets them apply. */
.leaflet-tooltip.ward-label{background:transparent;border:0;box-shadow:none;padding:0;white-space:nowrap;
  font-family:'DM Sans',sans-serif;font-weight:700;pointer-events:none}
.leaflet-tooltip.ward-label:before,.leaflet-tooltip.ward-label:after{display:none;border:0}
.leaflet-tooltip.ward-label.gmda{color:#362c63;font-size:10px;text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 9px #fff}
.leaflet-tooltip.ward-label.record{color:#8c3621;font-size:10px;text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 9px #fff}
.ward-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.ward-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.ward-stats>div{background:#f5f8fa;border:1px solid #edf1f3;border-radius:8px;padding:11px}
.ward-stats span,.ward-stats b,.ward-stats small{display:block}
.ward-stats span{font-size:9px;color:#6d7d87}
.ward-stats b{font:800 22px Manrope;margin:4px 0;color:#1b3445}
.ward-stats small{font-size:9px;color:#9aa7af}
.ward-caveat{font-size:11px;line-height:1.6;color:#64727c;background:#fff8e9;border:1px solid #f0e3c7;border-radius:8px;padding:10px 13px;margin:0 0 14px}
.colony-table{max-height:430px;overflow-y:auto}
.leaflet-tooltip.ward-label.colony{color:#2b4250;font-size:10px;background:#ffffffee;border:1px solid #d8e2e8;border-radius:4px;padding:3px 6px;box-shadow:0 2px 6px #0d2a3a22}
@media(max-width:900px){.ward-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
#facility-map{height:min(56vh,500px);min-height:340px;border:1px solid var(--line);border-radius:10px;z-index:1}
.facility-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.facility-chip{font-size:10px;font-weight:700;color:#41525c;background:#eef3f6;border:1px solid #dde6eb;border-radius:20px;padding:5px 10px}
.ingest-coverage{margin-bottom:16px}
.grap-banner{border-radius:10px;padding:14px 16px;margin:0 0 16px;border:1px solid}
.grap-banner>div{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.grap-label{font-size:9px;font-weight:800;letter-spacing:1.4px;opacity:.75}
.grap-banner b{font:800 19px Manrope}
.grap-banner p{margin:7px 0 5px;font-size:12px;line-height:1.55}
.grap-banner small{font-size:10px;line-height:1.5;opacity:.85;display:block}
.grap-stage-1{background:#eef7f1;border-color:#cfe6d8;color:#1f6b4d}
.grap-stage-2{background:#fff8e9;border-color:#f0e3c7;color:#8a6420}
.grap-stage-3{background:#fdeee8;border-color:#f3d6c8;color:#a64a22}
.grap-stage-4{background:#fdeaea;border-color:#f1cccc;color:#9c2f2f}
.source-line{font-size:11px;color:#64727c;line-height:1.6}
.grap-date{font-size:10px;font-weight:700;opacity:.8}
.grap-stale{background:#f4f6f7;border-color:#dfe5e9;color:#5c6b74}
.aqi-pill.none{background:#eef1f3;color:#7a8891;border:1px dashed #c3ccd2;font-weight:600}

/* ===== unified city map: the map is the centrepiece, panels wrap it ===== */
.mapshell{display:grid;gap:12px;
  grid-template-columns:206px minmax(0,1fr) 250px;
  grid-template-rows:auto minmax(540px,calc(100vh - 250px)) auto auto auto;
  grid-template-areas:"head head head" "left map right" "foot foot foot"
                      "brief brief brief" "work work work";}
.mapshell-head{grid-area:head;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  justify-content:space-between}
.mapshell-title h1{margin:0 0 4px;font-size:25px;letter-spacing:-.4px}
.mapshell-title p{margin:0;color:#5f6f79;font-size:13px;max-width:62ch}
.view-tabs{display:flex;gap:4px;background:#eef1f3;padding:4px;border-radius:11px;flex-wrap:wrap}
.view-tab{border:0;background:transparent;padding:8px 15px;border-radius:8px;cursor:pointer;
  font-size:13px;font-weight:600;color:#5f6f79;font-family:inherit;transition:background .14s,color .14s}
.view-tab:hover{color:#1d2b33}
.view-tab.active{background:#fff;color:#14323f;box-shadow:0 1px 3px rgba(20,50,63,.16)}
.mapshell-left{grid-area:left}.mapshell-right{grid-area:right}
.mapshell-left,.mapshell-right{display:flex;flex-direction:column;gap:10px;min-height:0;
  min-width:0;overflow-y:auto;overscroll-behavior:contain}
.mapshell-left::-webkit-scrollbar,.mapshell-right::-webkit-scrollbar,
.map-panel-scroll::-webkit-scrollbar,.mapshell-foot .table-wrap::-webkit-scrollbar{width:9px;height:9px}
.mapshell-left::-webkit-scrollbar-thumb,.mapshell-right::-webkit-scrollbar-thumb,
.map-panel-scroll::-webkit-scrollbar-thumb,.mapshell-foot .table-wrap::-webkit-scrollbar-thumb{
  background:#c9d4da;border-radius:6px}
.mapshell-map{grid-area:map;min-height:0;border-radius:14px;overflow:hidden;
  border:1px solid #dde4e8;box-shadow:0 2px 10px rgba(20,50,63,.07)}
#map{width:100%;height:100%}
.map-panel{background:#fff;border:1px solid #e3e9ec;border-radius:12px;padding:13px 14px}
.map-panel h3{margin:0 0 9px;font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:#7a8891}
.map-panel-scroll{flex:1;min-height:0;overflow-y:auto}
.panel-note{margin:8px 0 0;font-size:11.5px;line-height:1.5;color:#7a8891}
.switch-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;cursor:pointer}
.switch-row.small{font-size:12px;padding:3px 0}
.switch-row input{accent-color:#2f6f84;cursor:pointer;margin:0}
.switch-count{margin-left:auto;font-size:11px;color:#7a8891;font-weight:600}
.switch-sub{margin-top:9px;padding-top:9px;border-top:1px solid #eef1f3}
.switch-sub-head{display:block;font-size:10px;letter-spacing:.8px;text-transform:uppercase;
  color:#9aa7ae;margin-bottom:5px}
.legend-body{display:flex;flex-direction:column;gap:6px}
.legend-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#43555f}
.legend-swatch{width:11px;height:11px;border-radius:3px;flex:none;display:inline-block}
.side-stat{display:flex;flex-direction:column;gap:1px;padding:7px 0;border-bottom:1px solid #f0f3f5}
.side-stat:last-child{border-bottom:0}
.side-stat span{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#8b979e}
.side-stat b{font-size:25px;font-weight:650;letter-spacing:-.5px;color:#14323f;line-height:1.1}
.side-stat small{font-size:11.5px;color:#7a8891}
.side-row{display:flex;align-items:flex-start;gap:8px;padding:7px 6px;border-radius:8px;cursor:pointer;
  transition:background .12s}
.side-row:hover{background:#f3f6f8}
.side-row .legend-swatch{margin-top:4px}
.side-row-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.side-row-text b{font-size:13px;color:#1d2b33}
.side-row-text span{font-size:11.5px;color:#7a8891}
.mapshell-foot{grid-area:foot;background:#fff;border:1px solid #e3e9ec;border-radius:12px;padding:13px 14px}
.foot-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.foot-head h3{margin:0;font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:#7a8891}
.foot-link{font-size:12.5px;color:#2f6f84;text-decoration:none;font-weight:600;white-space:nowrap}
.foot-link:hover{text-decoration:underline}
.mapshell-foot .table-wrap{max-height:270px;overflow:auto}
.mapshell-foot table{width:100%;border-collapse:collapse;font-size:12.5px}
.mapshell-foot th{position:sticky;top:0;background:#f7f9fa;text-align:left;padding:7px 9px;
  font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:#7a8891;white-space:nowrap;z-index:1}
.mapshell-foot td{padding:7px 9px;border-top:1px solid #f0f3f5;color:#3c4f59}
@media (max-width:1280px){
  .mapshell{grid-template-columns:230px minmax(0,1fr);
    grid-template-areas:"head head" "left map" "right right" "foot foot"
                        "brief brief" "work work";
    grid-template-rows:auto minmax(420px,58vh) auto auto auto auto;}
  .mapshell-right{flex-direction:row;flex-wrap:wrap}
  .mapshell-right .map-panel{flex:1;min-width:240px}
  .map-panel-scroll{max-height:260px}
}
@media (max-width:860px){
  .mapshell{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "map" "left" "right" "foot" "brief" "work";
    grid-template-rows:auto 56vh auto auto auto auto auto;}
  .mapshell-left,.mapshell-right{flex-direction:row;flex-wrap:wrap}
  .mapshell-left .map-panel,.mapshell-right .map-panel{flex:1;min-width:220px}
}
@media (max-width:560px){
  /* One column of panels: at 220px minimum two of them no longer fit beside each
     other on a phone, and flex was letting them spill past the screen edge. */
  .mapshell{grid-template-rows:auto 54vh auto auto auto auto auto;gap:10px}
  .mapshell-left .map-panel,.mapshell-right .map-panel{flex:1 1 100%;min-width:0}
  .mapshell-title h1{font-size:21px}
  .view-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .view-tabs::-webkit-scrollbar{display:none}
  .view-tab{white-space:nowrap;padding:8px 12px;font-size:12px}
}
/* Ward number labels: only while reading jurisdiction, and only when zoomed enough
   that 36 of them do not overlap into mush. */
.leaflet-tooltip.ward-label.gmda{display:none}
body.show-ward-labels.ward-labels-fit .leaflet-tooltip.ward-label.gmda{display:block}
/* Cross-link from a directory page to the one map, in the matching view. */
.map-jump{display:flex;flex-direction:column;gap:2px;margin:14px 0;padding:13px 16px;
  background:linear-gradient(100deg,#f3f7f9,#fbfcfd);border:1px solid #dde7ec;border-left:3px solid #2f6f84;
  border-radius:11px;text-decoration:none;transition:border-color .14s,box-shadow .14s,transform .14s}
.map-jump:hover{border-color:#2f6f84;box-shadow:0 2px 10px rgba(47,111,132,.14);transform:translateY(-1px)}
.map-jump-eyebrow{font-size:10px;letter-spacing:.9px;text-transform:uppercase;color:#7a8891}
.map-jump b{font-size:14.5px;color:#14323f}
.map-jump small{font-size:12.5px;color:#5f6f79;line-height:1.5}

/* ===== one page, six views: the per-view workspace ===== */
/* Only the active view's registers and forms are in the document flow, so the
   page is never eight pages stacked on top of each other. */
.mapshell-work{grid-area:work;min-width:0}
.work-pane{display:none}
.work-pane.active{display:block;animation:work-in .18s ease-out}
@keyframes work-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.work-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:16px;margin:4px 0 18px}
.work-head h1{margin:0 0 6px;font:800 24px Manrope;letter-spacing:-.6px}
.work-head h2{margin:0 0 6px;font:800 21px Manrope;letter-spacing:-.4px}
.work-head h1 em,.work-head h2 em{color:#1685c9;font-style:normal}
.work-head p{margin:0;color:#5f6f79;font-size:13px;max-width:70ch}
.work-links{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.work-links .map-jump{margin:0}
.table-note.standalone{background:#fbfcfd;border:1px solid #e3e9ec;border-radius:11px;
  padding:13px 15px;line-height:1.6}
.work-pane .two-col{gap:22px}
.work-pane .metrics{margin-bottom:22px}

/* ===== actionable intelligence: the Azure OpenAI briefing band ===== */
.mapshell-brief{grid-area:brief;min-width:0;background:linear-gradient(160deg,#f6f9fb,#fff 55%);
  border:1px solid #dde7ec;border-left:3px solid #2f6f84;border-radius:14px;padding:16px 18px}
.brief-head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  align-items:flex-end}
.brief-eyebrow{font-size:9px;font-weight:800;letter-spacing:1.5px;color:#2f6f84}
.brief-head h2{margin:5px 0 5px;font:800 19px Manrope;letter-spacing:-.3px}
.brief-head .panel-note{max-width:78ch}
.brief-controls{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-end}
.brief-focus{display:flex;flex-direction:column;gap:5px;min-width:270px}
.brief-focus span{font-size:10px;font-weight:700;letter-spacing:.3px;color:#657580}
.brief-focus input{width:100%;border:1px solid #d8e0e9;border-radius:7px;padding:9px 11px;
  font:12px 'DM Sans';color:#1d2d42;background:#fff;outline:none}
.brief-focus input:focus{border-color:#55a2d4;box-shadow:0 0 0 3px #1685c914}
.brief-body{margin-top:14px}
.brief-note{background:#fff8e8;border:1px solid #f1e4c7;border-radius:9px;padding:10px 13px;
  color:#785b2c;font-size:12px;margin-bottom:12px;line-height:1.55}
.brief-headline{margin:0 0 7px;font:800 17px Manrope;color:#14323f;letter-spacing:-.2px;
  line-height:1.4}
.brief-assessment{margin:0 0 10px;font-size:13.5px;line-height:1.65;color:#3c4f59;max-width:98ch}
.brief-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:10.5px;color:#8b979e;
  padding-bottom:13px;border-bottom:1px solid #e8eef1;margin-bottom:14px}
.brief-meta .brief-caution{color:#9a6a1b;font-weight:700}
.brief-priorities{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.brief-card{background:#fff;border:1px solid #e3e9ec;border-radius:12px;padding:14px 15px;
  display:flex;flex-direction:column;gap:9px}
.brief-card-head{display:flex;gap:11px;align-items:flex-start}
.brief-rank{flex:none;width:26px;height:26px;border-radius:8px;background:#14323f;color:#fff;
  display:grid;place-items:center;font:800 12px Manrope}
.brief-card-title{min-width:0}
.brief-card-title b{display:block;font-size:14px;color:#14323f;line-height:1.4}
.brief-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.brief-chip{font-size:9.5px;font-weight:700;letter-spacing:.3px;padding:4px 8px;border-radius:20px;
  background:#eef2f5;color:#657681}
.brief-chip.zone{background:#eaf4fb;color:#176fba}
.brief-chip.sev-high{background:#fde9e7;color:#b74742}
.brief-chip.sev-moderate{background:#fff3dc;color:#9b6b1f}
.brief-chip.sev-low{background:#e5f5ed;color:#217d5e}
.brief-kv span{display:block;font-size:9px;font-weight:800;letter-spacing:1.1px;
  text-transform:uppercase;color:#9aa7ae;margin-bottom:3px}
.brief-kv p{margin:0;font-size:12.5px;line-height:1.6;color:#44555f}
.brief-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:4px}
.brief-actions .btn.tiny{border:1px solid #d5e4ec;cursor:pointer}
.brief-lists{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:16px;padding-top:14px;border-top:1px solid #e8eef1}
.brief-list h4{margin:0 0 8px;font-size:10px;letter-spacing:1.1px;text-transform:uppercase;
  color:#7a8891}
.brief-list ul{margin:0;padding-left:17px;display:grid;gap:8px}
.brief-list li{font-size:12.5px;line-height:1.6;color:#44555f}
.brief-list li b{display:block;color:#1d2b33;font-size:13px}
.brief-list li span{display:block;margin-top:2px}
@media (max-width:860px){
  .brief-focus{min-width:0;flex:1}
  .brief-priorities{grid-template-columns:minmax(0,1fr)}
}

/* ===== every figure is a door: drill-down affordances ===== */
.side-stat.actionable,.side-row.actionable-row,.mapshell-foot tr.actionable-row{
  cursor:pointer;border-radius:8px;transition:background .13s,box-shadow .13s}
.side-stat.actionable{padding:8px 9px;margin:0 -9px}
.side-stat.actionable:hover,.side-stat.actionable:focus-visible{background:#f2f7f9;outline:none;
  box-shadow:inset 2px 0 #2f6f84}
.side-stat-cta{display:block;margin-top:4px;font-size:10.5px;font-weight:700;letter-spacing:.2px;
  color:#2f6f84;text-transform:none;opacity:0;transform:translateX(-3px);
  transition:opacity .13s,transform .13s}
.side-stat.actionable:hover .side-stat-cta,
.side-stat.actionable:focus-visible .side-stat-cta{opacity:1;transform:none}
@media (hover:none){.side-stat-cta{opacity:1;transform:none}}
.side-row.actionable-row:focus-visible{outline:2px solid #2f6f84;outline-offset:1px}
.mapshell-foot tr.actionable-row:hover{background:#f3f7f9}
.mapshell-foot tr.actionable-row:focus-visible{outline:2px solid #2f6f84;outline-offset:-2px}
/* A metric that opens the section it counts, instead of just reporting it. */
.metric-link{display:block;text-decoration:none;color:inherit;position:relative;
  transition:border-color .14s,box-shadow .14s,transform .14s}
.metric-link:hover{border-color:#9cc3d6;box-shadow:0 4px 14px rgba(20,50,63,.1);
  transform:translateY(-1px)}
.metric-link .metric-foot{line-height:1.5}
.metric-cta{display:block;margin-top:9px;font-size:10px;font-weight:800;letter-spacing:.4px;
  color:#2f6f84}
.metric-link.metric-urgent{border-color:#f0d9a8;background:linear-gradient(170deg,#fffaf0,#fff 60%)}
.metric-link.metric-urgent .metric-cta{color:#9a6a1b}
/* Landing on a record after a drill: say so for a moment, then get out of the way. */
.drill-flash{animation:drill-flash 1.7s ease-out}
@keyframes drill-flash{
  0%{box-shadow:0 0 0 3px #2f6f8400;background:transparent}
  12%{box-shadow:0 0 0 3px #2f6f8455;background:#eef6f9}
  100%{box-shadow:0 0 0 3px #2f6f8400;background:transparent}}
.belief-card.drill-flash,.proposal-card.drill-flash{border-radius:12px}

/* ===== map popups: what this is, what it means, what to do ===== */
.pop-wrap .leaflet-popup-content-wrapper{border-radius:13px;padding:0;overflow:hidden;
  box-shadow:0 10px 30px rgba(12,34,46,.22)}
.pop-wrap .leaflet-popup-content{margin:0;width:auto!important;line-height:1.5}
.pop{font:13px/1.55 'DM Sans',sans-serif;color:#33434d}
.pop-head{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;
  padding:13px 15px 11px;background:#f7f9fb;border-bottom:1px solid #e6ecf0}
.pop-head-text{min-width:0}
.pop-head-text b{display:block;font:700 15px Manrope;color:#14323f;letter-spacing:-.2px}
.pop-head-text span{display:block;margin-top:2px;font-size:11px;color:#7a8891}
.pop-badge{flex:none;border-radius:20px;padding:5px 10px;font:800 10.5px 'DM Sans';
  letter-spacing:.3px;background:#eef2f5;color:#55656f;white-space:nowrap}
.pop-fact{display:flex;gap:10px;justify-content:space-between;align-items:baseline;
  padding:7px 15px;border-bottom:1px solid #f2f5f7}
.pop-fact span{flex:none;font-size:10px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:#9aa7ae}
.pop-fact b{text-align:right;font-weight:600;font-size:12.5px;color:#283b45}
.pop-block{padding:11px 15px;border-bottom:1px solid #f2f5f7}
.pop-block h5{margin:0 0 6px;font:800 9.5px 'DM Sans';letter-spacing:1.2px;
  text-transform:uppercase;color:#7a8891}
.pop-block p{margin:0 0 6px;font-size:12.5px;color:#3c4f59}
.pop-block p:last-child{margin-bottom:0}
.pop-sowhat{background:#fbfcfd}
.pop-insight ul{margin:0;padding-left:16px;display:grid;gap:5px}
.pop-insight li{font-size:12px;color:#44555f}
.pop-do{background:#f4f8fa}
.pop-actions{display:flex;flex-wrap:wrap;gap:6px}
.pop-btn{font:700 11px 'DM Sans';border:1px solid #c9dde7;background:#fff;color:#1d5f7a;
  border-radius:7px;padding:7px 10px;cursor:pointer;transition:background .12s,border-color .12s}
.pop-btn:hover{background:#2f6f84;border-color:#2f6f84;color:#fff}
.pop-caveat{padding:10px 15px 13px;font-size:11px;line-height:1.55;color:#8b979e;background:#fff}
.leaflet-popup-content .pop-fact:last-of-type{border-bottom:0}

/* ===== department actions: a register that argues for itself ===== */
.intro-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
/* The one thing worth interrupting the page for: bad air with nothing happening. */
.alert-band{display:flex;gap:14px;align-items:flex-start;margin:0 0 20px;padding:15px 18px;
  background:linear-gradient(100deg,#fff4f3,#fffafa);border:1px solid #f0d2cd;
  border-left:3px solid #cf4f4f;border-radius:12px}
.alert-band.ok{background:linear-gradient(100deg,#f1faf5,#fbfefc);border-color:#cde9da;
  border-left-color:#2f8f63}
.alert-band-mark{flex:none;width:26px;height:26px;border-radius:50%;background:#cf4f4f;color:#fff;
  display:grid;place-items:center;font:800 14px Manrope}
.alert-band.ok .alert-band-mark{background:#2f8f63}
.alert-band b{display:block;font:700 14.5px Manrope;color:#14323f}
.alert-band p{margin:6px 0 0;font-size:12.5px;color:#4b5c66;line-height:1.6}
.alert-band small{display:block;margin-top:7px;font-size:11px;color:#8b979e;line-height:1.55}
.alert-zone{color:#b3443f;font-weight:700;text-decoration:none;border-bottom:1px solid #e8c4bf}
.alert-zone:hover{border-bottom-color:#b3443f}
.action-metrics{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.metric-of{font-size:17px;font-weight:600;color:#9aa7ae;letter-spacing:0}
.action-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
  margin-bottom:8px}
.panel-card{min-width:0}
.panel-card .section-head{margin-top:0}
.standalone-brief{margin:0 0 26px}
.flag-red{color:#b74742;font-weight:700}
.flag-amber{color:#9a6a1b;font-weight:700}
tr.row-gap td{background:#fff7f6}
tr.row-gap td:first-child{box-shadow:inset 3px 0 #cf4f4f}
tr.row-late td{background:#fffaf5}
tr.row-late td:first-child{box-shadow:inset 3px 0 #e0902f}
/* Ageing: five doors into the same register, each one a filter. */
.ageing{display:grid;gap:6px}
.ageing-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 14px;background:#fff;border:1px solid var(--line);border-radius:9px;
  text-decoration:none;color:inherit;transition:border-color .13s,box-shadow .13s}
.ageing-row:hover{border-color:#9cc3d6;box-shadow:0 2px 8px rgba(20,50,63,.07)}
.ageing-row span{font-size:12.5px;color:#55656f}
.ageing-row b{font:800 17px Manrope;color:#14323f}
.ageing-row.is-bad b{color:#b74742}
.ageing-row.is-warn b{color:#9a6a1b}
/* Filters */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;background:#fff;
  border:1px solid var(--line);border-radius:11px;padding:14px 15px;margin-bottom:14px}
.filter-bar label{display:flex;flex-direction:column;gap:5px;min-width:135px}
.filter-bar label.filter-q{flex:1;min-width:190px}
.filter-bar span{font-size:9.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:#9aa7ae}
.filter-bar select,.filter-bar input{border:1px solid #dfe7eb;border-radius:7px;padding:8px 9px;
  font:12px 'DM Sans';color:#34434d;background:#fff;outline:none}
.filter-bar select:focus,.filter-bar input:focus{border-color:#55a2d4;box-shadow:0 0 0 3px #1685c914}
.filter-actions{display:flex;gap:11px;align-items:center;margin-left:auto}
/* Where a work order came from changes how much its framing can be trusted. */
.origin-chip{display:inline-block;margin-right:7px;padding:2px 7px;border-radius:20px;
  font-size:8.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.origin-city-brain{background:#efecfa;color:#5b4b96}
.origin-playbook{background:#e8f3fc;color:#286eaa}
.origin-investigation{background:#fff3dc;color:#98691d}
.origin-manual{background:#eef2f5;color:#657681}
.register td{vertical-align:top}
.label-hint{display:block;font-size:9.5px;font-weight:600;letter-spacing:0;text-transform:none;
  color:#9aa7ae;margin-top:2px}
/* An empty register is not an empty city: show where the work is waiting. */
.empty-state{background:#fff;border:1px dashed #d4dee4;border-radius:13px;padding:24px 26px;
  margin-bottom:24px}
.empty-state h3{margin:0 0 7px;font:800 17px Manrope;color:#14323f}
.empty-state p{margin:0 0 16px;font-size:13px;color:#5f6f79;line-height:1.65;max-width:84ch}
.empty-foot{margin:14px 0 0!important;font-size:12.5px;color:#7a8891}
.inbox-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
.inbox-card{display:flex;flex-direction:column;gap:3px;padding:15px 16px;background:#fbfcfd;
  border:1px solid #e3e9ec;border-radius:11px;text-decoration:none;color:inherit;
  transition:border-color .14s,box-shadow .14s,transform .14s}
.inbox-card:hover{border-color:#9cc3d6;box-shadow:0 4px 14px rgba(20,50,63,.09);
  transform:translateY(-1px)}
.inbox-card.has-items{background:linear-gradient(170deg,#f2f8fb,#fff 70%);border-color:#cfe2eb}
.inbox-card b{font:800 26px Manrope;color:#14323f;line-height:1.1}
.inbox-card span{font-size:12.5px;font-weight:700;color:#2f6f84}
.inbox-card small{font-size:11.5px;color:#7a8891;line-height:1.55;margin-top:4px}
.playbook-hint{margin-top:18px;padding-top:16px;border-top:1px solid #eef1f3}
.playbook-hint-head{display:block;font-size:9.5px;font-weight:800;letter-spacing:1.1px;
  text-transform:uppercase;color:#9aa7ae;margin-bottom:5px}
.playbook-hint p{margin:0;font-size:12.5px;color:#5f6f79;line-height:1.65}
@media (max-width:900px){
  .action-grid{grid-template-columns:minmax(0,1fr)}
  .filter-actions{margin-left:0}
}

/* ===== wide-map mode =====
   The rails cost ~470px of width. One toggle drops them under the map so the
   geography gets the whole page, and the panels become horizontal strips rather
   than disappearing. The choice is remembered per browser. */
.map-width-toggle{display:inline-flex;align-items:center;gap:7px;border:1px solid #dde4e8;
  background:#fff;color:#2f6f84;border-radius:9px;padding:8px 13px;font:700 12px 'DM Sans';
  cursor:pointer;transition:border-color .13s,box-shadow .13s}
.map-width-toggle:hover{border-color:#2f6f84;box-shadow:0 2px 8px rgba(47,111,132,.14)}
.map-width-toggle b{font-weight:700}
.mapshell-head-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body.map-focus .mapshell{grid-template-columns:minmax(0,1fr);
  grid-template-areas:"head" "map" "right" "left" "foot" "brief" "work";
  grid-template-rows:auto minmax(560px,calc(100vh - 200px)) auto auto auto auto auto;}
body.map-focus .mapshell-left,body.map-focus .mapshell-right{flex-direction:row;flex-wrap:wrap;
  overflow:visible}
body.map-focus .mapshell-left .map-panel,body.map-focus .mapshell-right .map-panel{flex:1;
  min-width:235px}
body.map-focus .map-panel-scroll{max-height:290px;flex:1 1 320px}
@media (max-width:860px){
  body.map-focus .mapshell{grid-template-rows:auto 58vh auto auto auto auto auto}
  body.map-focus .mapshell-left .map-panel,
  body.map-focus .mapshell-right .map-panel{min-width:0}
  body.map-focus .map-panel-scroll{flex:1 1 100%}
}
/* Reading comfort in the rails: these were the smallest type on the page. */
.side-row-text span{font-size:12px}
.legend-row{font-size:12px}
.panel-note{font-size:11.5px}
.map-panel h3{font-size:10.5px}
/* Narrower rails on a mid-size laptop. This has to carry a lower bound: it is
   declared after the 1280px and 860px blocks, so an unbounded max-width:1400px
   also matched every phone and put the three desktop columns back, which left
   the map about 190px wide inside a 390px screen. */
@media (min-width:1281px) and (max-width:1400px){
  .mapshell{grid-template-columns:196px minmax(0,1fr) 236px}
}

/* The map page is a workspace, not an article. The 1600px reading measure that
   suits every other page throws away ~300px of geography on a wide monitor, so
   this page opts out of it. The :has() rule covers a first paint before the page
   script runs; the class is what the script adds. */
.content.content-wide,.content:has(.mapshell){max-width:none;padding-left:22px;padding-right:22px}
.content-wide .mapshell-foot .table-wrap{max-height:320px}

/* ===== ward drill-down modal: the /wards record, at the boundary ===== */
body.modal-open{overflow:hidden}
.ward-modal{position:fixed;inset:0;z-index:2000;background:rgba(14,32,41,.42);
  display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(2px)}
.ward-modal[hidden]{display:none}
.ward-modal-card{background:#fff;border-radius:16px;width:min(880px,100%);max-height:88vh;
  display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(14,32,41,.3);overflow:hidden}
.ward-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:17px 20px;border-bottom:1px solid #eef1f3}
.ward-modal-head h3{margin:0 0 2px;font:700 19px 'Manrope',sans-serif;color:#14323f;letter-spacing:-.3px}
.ward-modal-head p{margin:0;font:500 12px 'DM Sans',sans-serif;color:#7a8891}
.ward-modal-close{border:0;background:#f2f5f7;width:30px;height:30px;border-radius:50%;
  font-size:19px;line-height:1;color:#5f6f79;cursor:pointer;flex:none}
.ward-modal-close:hover{background:#e5eaed;color:#14323f}
.ward-modal-body{padding:16px 20px 20px;overflow-y:auto}
.wm-stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));margin-bottom:16px}
.wm-stat{background:#f7f9fa;border-radius:10px;padding:10px 12px}
.wm-stat span{display:block;font:600 9.5px 'DM Sans',sans-serif;letter-spacing:.7px;
  text-transform:uppercase;color:#8b979e}
.wm-stat b{font:650 22px 'DM Sans',sans-serif;color:#14323f;letter-spacing:-.4px}
.wm-stat small{display:block;font:500 11px 'DM Sans',sans-serif;color:#7a8891;margin-top:1px}
.wm-section{margin-bottom:16px}
.wm-section h4{margin:0 0 8px;font:700 10px 'DM Sans',sans-serif;letter-spacing:.9px;
  text-transform:uppercase;color:#7a8891}
.wm-owner{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.wm-owner-col{background:#f7f9fa;border-radius:10px;padding:11px 13px}
.wm-label{display:block;font:600 9.5px 'DM Sans',sans-serif;letter-spacing:.7px;
  text-transform:uppercase;color:#8b979e;margin-bottom:3px}
.wm-owner-col b{display:block;font:650 15px 'DM Sans',sans-serif;color:#14323f}
.wm-owner-col small{display:block;font:500 11px 'DM Sans',sans-serif;color:#7a8891;margin-top:2px;line-height:1.5}
.wm-muted{color:#9aa7ae!important;font-weight:500!important}
.wm-unassigned{color:#c2683c!important}
.wm-assign,.wm-raise{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;align-items:center}
.wm-assign input,.wm-raise input,.wm-raise select{padding:6px 9px;border:1px solid #dde4e8;
  border-radius:7px;font:500 12px 'DM Sans',sans-serif;color:#1d2b33;min-width:0}
.wm-assign input{flex:1;min-width:110px}
.wm-raise input{flex:1;min-width:190px}
.wm-assign input:focus,.wm-raise input:focus,.wm-raise select:focus{outline:none;border-color:#2f6f84}
.wm-btn{border:1px solid #dde4e8;background:#fff;border-radius:7px;padding:6px 13px;
  font:600 12px 'DM Sans',sans-serif;color:#2f6f84;cursor:pointer;white-space:nowrap}
.wm-btn:hover:not(:disabled){border-color:#2f6f84;background:#f2f8fa}
.wm-btn:disabled{opacity:.5;cursor:wait}
.wm-btn-primary{background:#2f6f84;color:#fff;border-color:#2f6f84}
.wm-btn-primary:hover:not(:disabled){background:#265a6b}
.wm-msg{font:500 11.5px 'DM Sans',sans-serif;color:#7a8891}
.wm-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wm-list li{background:#f7f9fa;border-radius:8px;padding:6px 10px;font:500 12px 'DM Sans',sans-serif;color:#3c4f59}
.wm-list li b{color:#14323f;font-weight:700}
.wm-list li.wm-wide{flex:1 1 100%;display:flex;flex-direction:column;gap:1px}
.wm-list li.wm-wide b{font-size:12.5px}
.wm-list li.wm-wide span{font-size:11px;color:#7a8891}
.wm-empty{margin:0;font:500 12px 'DM Sans',sans-serif;color:#9aa7ae}
.wm-note{margin:10px 0 0;font:500 11px 'DM Sans',sans-serif;color:#8b979e;line-height:1.6}
.wm-links{display:flex;flex-wrap:wrap;gap:12px;padding-top:12px;border-top:1px solid #eef1f3}
.wm-link{font:600 12px 'DM Sans',sans-serif;color:#2f6f84;text-decoration:none}
.wm-link:hover{text-decoration:underline}

/* ===== scenario planning (ported from the 3D twin, which is gone) ===== */
.dt-button{border:1px solid #dce6ec;border-radius:7px;padding:8px 11px;background:#fff;color:#314a5c;font:700 10px 'DM Sans';cursor:pointer}
.dt-button:hover,.dt-button.is-on{background:#e9f4fa;border-color:#b9d8e9;color:#176fba}
.dt-workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:13px;align-items:stretch}
.dt-workspace{display:block}
.dt-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  border:1px solid #dde4e8;background:#fff;color:#3c4f59;font:600 11.5px 'DM Sans',sans-serif;
  cursor:pointer;transition:border-color .14s,box-shadow .14s,transform .12s}
.dt-chip:hover{border-color:#2f6f84;transform:translateY(-1px);box-shadow:0 2px 8px rgba(47,111,132,.14)}
.dt-chip i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.dt-button.is-on{border-color:#2f6f84;color:#2f6f84;background:#f2f8fa}
/* Scenario planning */
.dt-modeline{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:10px 0 2px}
.dt-modelabel{font:700 10px 'DM Sans',sans-serif;letter-spacing:.7px;text-transform:uppercase;
  color:#8b979e}
.dt-modebar{display:inline-flex;gap:3px;background:#eef1f3;padding:3px;border-radius:11px}
.dt-mode b{display:block;font:650 12.5px 'DM Sans',sans-serif;line-height:1.3}
.dt-mode small{display:block;font:500 10.5px 'DM Sans',sans-serif;opacity:.78;margin-top:1px}
.dt-mode,.dt-mode:hover{border:0;background:transparent;padding:7px 15px;border-radius:9px;
  cursor:pointer;text-align:left;
  font:600 12px 'DM Sans',sans-serif;color:#5f6f79;transition:background .14s,color .14s}
.dt-mode:hover{color:#14323f}
.dt-mode.is-on,.dt-mode.is-on:hover{background:#fff;color:#14323f;
  box-shadow:0 1px 3px rgba(20,50,63,.16)}
.dt-mode:focus-visible{outline:2px solid #6f5aa8;outline-offset:2px}
.dt-scenario{margin:10px 0 4px;padding:13px 15px;border:1px solid #e3e9ec;border-radius:12px;background:#fff}
.dt-scn-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dt-scn-head label{font:600 12px 'DM Sans',sans-serif;color:#5f6f79}
.dt-scn-head output{font:700 30px 'DM Sans',sans-serif;color:#14323f;letter-spacing:-.6px;line-height:1}
.dt-scn-stage{font:700 10.5px 'DM Sans',sans-serif;letter-spacing:.8px;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:#eef1f3;color:#5f6f79}
.dt-scn-stage.s1{background:#fdf2dc;color:#8a6414}
.dt-scn-stage.s2{background:#fbe7d6;color:#9a4f17}
.dt-scn-stage.s3{background:#fadede;color:#9e2f2f}
.dt-scn-stage.s4{background:#f3dde7;color:#7c2b50}
#dt-scn-range{width:100%;margin:10px 0 2px;accent-color:#cf4f4f;cursor:pointer}
.dt-scn-scale{display:flex;justify-content:space-between;font:600 9.5px 'DM Sans',sans-serif;color:#9aa7ae}
.dt-scn-summary{margin-top:11px;display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.dt-scn-stat{background:#f7f9fa;border-radius:9px;padding:9px 11px}
.dt-scn-stat span{display:block;font:600 9.5px 'DM Sans',sans-serif;letter-spacing:.7px;
  text-transform:uppercase;color:#8b979e}
.dt-scn-stat b{font:650 21px 'DM Sans',sans-serif;color:#14323f;letter-spacing:-.4px}
.dt-scn-stat small{display:block;font:500 11px 'DM Sans',sans-serif;color:#7a8891;margin-top:1px}
/* Combat plan in the side rail */
.dt-plan h4{margin:13px 0 6px;font:700 10px 'DM Sans',sans-serif;letter-spacing:.9px;
  text-transform:uppercase;color:#7a8891}
.dt-plan-item{padding:8px 10px;border-radius:9px;background:#f7f9fa;margin-bottom:6px;
  border-left:3px solid #cbd4d9}
.dt-plan-item.is-new{border-left-color:#cf4f4f;background:#fdf4f4}
.dt-plan-item b{display:block;font:600 12px 'DM Sans',sans-serif;color:#1d2b33;line-height:1.4}
.dt-plan-item span{display:block;font:500 10.5px 'DM Sans',sans-serif;color:#7a8891;margin-top:2px}
.dt-plan-ward{padding:8px 10px;border-radius:9px;border:1px solid #e9eef1;margin-bottom:6px;cursor:pointer}
.dt-plan-ward:hover{border-color:#2f6f84;background:#f5fafb}
.dt-plan-ward b{display:block;font:600 12px 'DM Sans',sans-serif;color:#1d2b33}
.dt-plan-ward span{display:block;font:500 10.5px 'DM Sans',sans-serif;color:#7a8891}
.dt-plan-ward ul{margin:5px 0 0;padding-left:15px}
.dt-plan-ward li{font:500 11px 'DM Sans',sans-serif;color:#5f6f79;line-height:1.5}
.dt-plan-caveat{margin-top:10px;font:500 10.5px 'DM Sans',sans-serif;color:#8b979e;line-height:1.5}
/* ---- scenario bar sits above the scene, full width ---- */
.dt-scenario{margin:0 0 14px}
.dt-scn-hint{font:500 11.5px 'DM Sans',sans-serif;color:#8b979e;margin-left:auto;max-width:46ch;line-height:1.5}
/* In scenario mode the observe-only controls recede rather than compete. */
body.scenario-mode .dt-layer-controls{opacity:.5}
body.scenario-mode .dt-layer-controls:hover{opacity:1}
/* ---- the planning board ---- */
.dt-board{margin-top:16px;background:#fff;border:1px solid #e3e9ec;border-radius:14px;padding:16px 18px}
.dt-board-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid #eef1f3;margin-bottom:14px}
.dt-board-head h2{margin:0 0 3px;font:700 19px 'Manrope',sans-serif;color:#14323f;letter-spacing:-.3px}
.dt-board-head p{margin:0;font:500 12.5px 'DM Sans',sans-serif;color:#5f6f79;max-width:72ch;line-height:1.55}
.dt-wo-form{display:flex;align-items:center;gap:10px}
.dt-wo-count{font:600 11.5px 'DM Sans',sans-serif;color:#7a8891;white-space:nowrap}
.dt-wo-go{background:#2f6f84;color:#fff;border-color:#2f6f84}
.dt-wo-go:hover:not(:disabled){background:#265a6b}
.dt-wo-go:disabled{opacity:.45;cursor:not-allowed}
.dt-board-grid{display:grid;gap:16px;grid-template-columns:minmax(260px,1fr) minmax(0,1.9fr)}
.dt-board-col h3{margin:0 0 9px;font:700 11px 'DM Sans',sans-serif;letter-spacing:.9px;
  text-transform:uppercase;color:#7a8891}
.dt-board-note{font:500 10.5px 'DM Sans',sans-serif;letter-spacing:0;text-transform:none;color:#9aa7ae}
.dt-board-col>div{max-height:430px;overflow-y:auto}
.dt-ward-table-wrap{max-height:430px;overflow:auto;border:1px solid #eef1f3;border-radius:10px}
.dt-ward-table{width:100%;border-collapse:collapse;font:500 12px 'DM Sans',sans-serif}
.dt-ward-table th{position:sticky;top:0;background:#f7f9fa;text-align:left;padding:8px 10px;
  font:700 10px 'DM Sans',sans-serif;letter-spacing:.6px;text-transform:uppercase;color:#7a8891;
  white-space:nowrap;z-index:1;border-bottom:1px solid #e9eef1}
.dt-ward-table td{padding:7px 10px;border-top:1px solid #f2f5f6;color:#3c4f59;vertical-align:top}
.dt-ward-table tr:hover td{background:#f7fafb}
.dt-ward-table td:first-child{width:28px}
.dt-wo-cb{accent-color:#2f6f84;cursor:pointer;margin:2px 0 0}
.dt-ward-table b{font-weight:650;color:#1d2b33;white-space:nowrap}
.dt-exposure{color:#7a8891;white-space:nowrap;font-size:11.5px}
.dt-owner{color:#5f6f79;font-size:11.5px}
.dt-assigned{color:#8b979e;font-size:11.5px}
.dt-board-col>div,.dt-ward-table-wrap{max-height:340px}
/* ---- scope bar: always says what you are looking at ---- */
.dt-scope{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 12px;
  padding:10px 15px;border-radius:11px;background:#f2f5f7;border:1px solid #e3e9ec}
.dt-scope.is-zone{background:#eef6f9;border-color:#bcd8e2;border-left:3px solid #2f6f84}
.dt-scope-tag{font:700 9.5px 'DM Sans',sans-serif;letter-spacing:.9px;text-transform:uppercase;color:#8b979e}
.dt-scope b{font:700 16px 'Manrope',sans-serif;color:#14323f;letter-spacing:-.2px}
.dt-scope-sub{font:500 12px 'DM Sans',sans-serif;color:#5f6f79}
.dt-scope-clear{margin-left:auto;border:1px solid #cfdbe1;background:#fff;border-radius:999px;
  padding:4px 12px;font:600 11.5px 'DM Sans',sans-serif;color:#2f6f84;cursor:pointer}
.dt-scope-clear:hover{border-color:#2f6f84;background:#f2f8fa}
.dt-chip.is-on{border-color:#2f6f84;background:#eef6f9;color:#14323f;box-shadow:inset 0 0 0 1px #2f6f84}
.dt-kpi-scope{color:#8b979e}
/* empty / explained state when a zone has no MCG wards */
.dt-scope-note{margin:0;padding:14px 16px;border-radius:11px;background:#fdf8ec;
  border:1px solid #efe0bd;color:#7a6322;font:500 12.5px 'DM Sans',sans-serif;line-height:1.6}
/* Measures are selectable too, so a scope with no wards is still actionable. */
.dt-plan-item.is-selectable{display:flex;gap:9px;align-items:flex-start}
.dt-plan-item .dt-plan-item-text{min-width:0}
.dt-measure-cb{margin:3px 0 0;flex:none}
.dt-scope-note b{display:block;margin-top:6px;color:#5c4a12}
/* ---- Named targets inside the ward tasklist ---- */
.dt-targets{max-width:250px;white-space:normal}
.dt-target{display:inline-block;margin:0 4px 4px 0;padding:3px 8px;border-radius:20px;
  border:1px solid #d5e9f6;background:#eef6fb;color:#1769aa;
  font:600 10.5px 'DM Sans',sans-serif;cursor:pointer}
.dt-target:hover{background:#d9ecf9}
.dt-target-more{font:600 10px 'DM Sans',sans-serif;color:#95a2a9}
.dt-target-sites{font:500 11px 'DM Sans',sans-serif;color:#7a8891}
.dt-assigned b{display:block;font:650 11.5px 'DM Sans',sans-serif;color:#1d2b33;white-space:normal}
.dt-assigned small{display:block;font:500 10px 'DM Sans',sans-serif;color:#95a2a9;margin-top:2px}
/* ---- Operations order ---- */
.dt-order{margin-top:18px;padding-top:16px;border-top:1px solid #eef1f3}
.dt-order-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.dt-order-head h3{margin:0 0 4px;font:700 15px 'Manrope',sans-serif;color:#14323f;letter-spacing:-.2px}
.dt-order-head p{margin:0;font:500 11.5px 'DM Sans',sans-serif;color:#7a8891;max-width:66ch;line-height:1.55}
.dt-order-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#dt-order-focus{min-width:290px;padding:9px 11px;border-radius:8px;border:1px solid #dde5e9;
  background:#fff;color:#1d2b33;font:500 12px 'DM Sans',sans-serif}
#dt-order-focus:focus{outline:none;border-color:#79b6dd;box-shadow:0 0 0 3px rgba(23,105,170,.10)}
.dt-order-go{white-space:nowrap}
.dt-order-body{margin-top:14px}
.dt-order-headline{margin:0 0 7px;font:700 14px 'Manrope',sans-serif;color:#14323f}
.dt-order-situation{font:500 12px 'DM Sans',sans-serif;color:#5f6f79;line-height:1.6;margin:0 0 14px}
.dt-order-wait{font:500 12px 'DM Sans',sans-serif;color:#7a8891}
.dt-order-fail{font:500 12px 'DM Sans',sans-serif;color:#b74742;line-height:1.55}
.dt-order-steps{margin:0 0 16px;padding-left:0;list-style:none;display:grid;gap:7px;counter-reset:step}
.dt-order-steps li{counter-increment:step;border:1px solid #e3e9ec;border-radius:10px;
  padding:10px 12px;background:#fbfcfd}
.dt-order-steps li::before{content:counter(step);float:left;margin:1px 10px 0 0;width:22px;height:22px;
  border-radius:50%;background:#eef6fb;color:#1769aa;display:grid;place-items:center;
  font:800 10px 'Manrope',sans-serif}
.dt-order-step-head{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.dt-order-window{font:800 9px 'DM Sans',sans-serif;letter-spacing:.8px;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;background:#f0f4f6;color:#5f6f79}
.dt-order-step-head b{font:650 12.5px 'DM Sans',sans-serif;color:#1d2b33;flex:1;min-width:200px;line-height:1.4}
.dt-order-step-meta{display:flex;flex-wrap:wrap;gap:3px 14px;margin:7px 0 0 32px;
  font:500 10.5px 'DM Sans',sans-serif;color:#7a8891;line-height:1.5}
.dt-order-step-meta i{font-style:normal;font-weight:800;color:#95a2a9}
.dt-order-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.dt-order-col h5{margin:0 0 7px;font:800 9px 'DM Sans',sans-serif;letter-spacing:1.1px;
  text-transform:uppercase;color:#95a2a9}
.dt-order-item{border-left:2px solid #bcd9ef;padding:3px 0 3px 9px;margin-bottom:8px}
.dt-order-item b{display:block;font:650 11.5px 'DM Sans',sans-serif;color:#1d2b33;line-height:1.4}
.dt-order-item span{display:block;font:500 10.5px 'DM Sans',sans-serif;color:#7a8891;
  margin-top:2px;line-height:1.5}
.dt-order-controls{width:100%}
.dt-targets{max-width:none}
/* Steps rendered by the operations order. */
.dt-steps{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.dt-step{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;background:#fff;
  border:1px solid #e9eef1;border-radius:9px}
.dt-step-n{flex:none;width:21px;height:21px;border-radius:50%;background:#2f6f84;color:#fff;
  display:grid;place-items:center;font:700 11px 'DM Sans',sans-serif}
.dt-step-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.dt-step-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.dt-step-when{font:700 9.5px 'DM Sans',sans-serif;letter-spacing:.7px;text-transform:uppercase;
  color:#8b979e;background:#f2f5f7;padding:2px 7px;border-radius:999px}
.dt-step-head b{font:600 13px 'DM Sans',sans-serif;color:#1d2b33;line-height:1.4}
.dt-step-meta{font:500 11.5px 'DM Sans',sans-serif;color:#7a8891;line-height:1.5}
.dt-order-headline{margin:0 0 4px;font:700 14.5px 'Manrope',sans-serif;color:#14323f}
.dt-order-sum{margin:0 0 8px;font:500 12.5px 'DM Sans',sans-serif;color:#5f6f79;line-height:1.6}
.dt-order-sub{margin:12px 0 5px;font:700 10px 'DM Sans',sans-serif;letter-spacing:.9px;
  text-transform:uppercase;color:#7a8891}
.dt-order-list{margin:0;padding-left:17px}
.dt-order-list li{font:500 12px 'DM Sans',sans-serif;color:#5f6f79;line-height:1.6}
.dt-order-fail{color:#9e2f2f;background:#fdf4f4;border-color:#f0d8d8}
.dt-scn-scopetag{font:600 10.5px 'DM Sans',sans-serif;letter-spacing:.5px;text-transform:uppercase;
  color:#7a8891;background:#f2f5f7;padding:3px 10px;border-radius:999px}

/* ===== ward drill-down: four levels, every count opens ===== */
.wm-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:0 0 13px;
  padding-bottom:10px;border-bottom:1px solid #eef1f3}
.wm-crumb{border:0;background:transparent;padding:2px 5px;border-radius:6px;cursor:pointer;
  font:600 11.5px 'DM Sans',sans-serif;color:#2f6f84}
.wm-crumb:hover{background:#f2f8fa;text-decoration:underline}
.wm-crumb.is-here{color:#14323f;cursor:default}
.wm-crumb-sep{color:#b7c2c8;font-size:12px}
.wm-stat.is-drill{border:1px solid #e4eaed;cursor:pointer;text-align:left;width:100%;
  transition:border-color .14s,transform .12s,box-shadow .14s;font-family:inherit}
.wm-stat.is-drill:hover{border-color:#2f6f84;transform:translateY(-1px);
  box-shadow:0 2px 9px rgba(47,111,132,.13)}
.wm-stat.is-drill small{color:#2f6f84}
.wm-drills{display:flex;flex-direction:column;gap:5px}
.wm-drill{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  border:1px solid #e9eef1;background:#fff;border-radius:9px;padding:9px 12px;font-family:inherit;
  transition:border-color .14s,background .14s}
.wm-drill:hover{border-color:#2f6f84;background:#f7fbfc}
.wm-drill-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.wm-drill-text b{font:600 13px 'DM Sans',sans-serif;color:#1d2b33}
.wm-drill-text span{font:500 11.5px 'DM Sans',sans-serif;color:#7a8891;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-drill-badge{flex:none;background:#eef2f4;color:#5f6f79;border-radius:999px;padding:2px 9px;
  font:700 11px 'DM Sans',sans-serif}
.wm-drill-go{flex:none;color:#b7c2c8;font-size:17px;line-height:1}
.wm-drill:hover .wm-drill-go{color:#2f6f84}
.wm-sec{margin:17px 0 8px;font:700 10px 'DM Sans',sans-serif;letter-spacing:.9px;
  text-transform:uppercase;color:#7a8891}
.wm-item-title{margin:0 0 2px;font:700 18px 'Manrope',sans-serif;color:#14323f;letter-spacing:-.3px}
.wm-item-kind{margin:0 0 12px;font:500 12px 'DM Sans',sans-serif;color:#7a8891}
.wm-item-actions{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.wm-item-actions .wm-btn{text-decoration:none;display:inline-flex;align-items:center}
.wm-fields{display:grid;gap:1px;background:#eef1f3;border:1px solid #eef1f3;border-radius:9px;
  overflow:hidden}
.wm-field{display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:12px;background:#fff;
  padding:8px 12px}
.wm-field span{font:600 11px 'DM Sans',sans-serif;color:#8b979e}
.wm-field b{font:500 12.5px 'DM Sans',sans-serif;color:#1d2b33;word-break:break-word}
.wm-owner-link{border:0;background:transparent;padding:0;cursor:pointer;text-align:left;
  font:650 15px 'DM Sans',sans-serif;color:#2f6f84;text-decoration:underline;
  text-underline-offset:2px;font-family:inherit}
.wm-owner-link:hover{color:#1d5468}
.wm-raise-full{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.wm-raise-full input{flex:1 1 100%;padding:8px 11px;border:1px solid #dde4e8;border-radius:8px;
  font:500 12.5px 'DM Sans',sans-serif;color:#1d2b33}
.wm-raise-full select{padding:7px 10px;border:1px solid #dde4e8;border-radius:8px;
  font:500 12px 'DM Sans',sans-serif}
.wm-raise-full input:focus,.wm-raise-full select:focus{outline:none;border-color:#2f6f84}



/* ===== the one map popup ===== */
.leaflet-popup-content-wrapper:has(.mappop){border-radius:13px;padding:0;
  box-shadow:0 10px 32px rgba(14,32,41,.22)}
.leaflet-popup-content:has(.mappop){margin:0;width:auto!important}
.mappop{min-width:252px;max-width:300px;padding:13px 14px 11px;font-family:'DM Sans',sans-serif}
.mappop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mappop-text{min-width:0}
.mappop-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mappop-title b{font:700 16.5px 'Manrope',sans-serif;color:#14323f;letter-spacing:-.3px}
.mappop-chip{font:700 9px 'DM Sans',sans-serif;letter-spacing:.7px;text-transform:uppercase;
  color:#5f6f79;background:#eef2f4;padding:3px 8px;border-radius:999px}
.mappop-sub{display:block;font:500 10.5px 'DM Sans',sans-serif;color:#9aa7ae;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mappop-badge{flex:none;min-width:46px;text-align:center;color:#fff;border-radius:9px;
  padding:6px 9px;font:700 19px 'DM Sans',sans-serif;line-height:1;letter-spacing:-.4px}
.mappop-band{font:700 10px 'DM Sans',sans-serif;letter-spacing:.5px;text-transform:uppercase;
  margin:7px 0 0}
.mappop-rows{display:flex;flex-direction:column;gap:1px;margin:10px 0;
  border:1px solid #e9eef1;border-radius:10px;overflow:hidden;background:#e9eef1}
.mappop-row{display:grid;grid-template-columns:72px 1fr;align-items:baseline;gap:10px;width:100%;
  text-align:left;border:0;background:#fff;padding:8px 11px;font-family:inherit}
button.mappop-row{cursor:pointer;transition:background .13s}
button.mappop-row:hover{background:#f4fafb}
.mappop-row span{font:600 9.5px 'DM Sans',sans-serif;letter-spacing:.6px;text-transform:uppercase;
  color:#9aa7ae;align-self:center}
.mappop-row b{font:600 12.5px 'DM Sans',sans-serif;color:#1d2b33;line-height:1.3}
.mappop-row small{grid-column:2;font:500 10px 'DM Sans',sans-serif;color:#9aa7ae;margin-top:1px}
.mappop-row.is-muted b{color:#c2683c}
.mappop-row.is-muted small{color:#c2683c;opacity:.78}
.mappop-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.mappop-cell{display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;
  border:1px solid #e4eaed;background:#f8fafb;border-radius:9px;padding:8px 4px;font-family:inherit;
  transition:border-color .13s,background .13s,transform .12s}
.mappop-cell:hover{border-color:#2f6f84;background:#f1f8fa;transform:translateY(-1px)}
.mappop-cell b{font:700 18px 'DM Sans',sans-serif;color:#14323f;line-height:1.05;letter-spacing:-.4px}
.mappop-cell span{font:600 9px 'DM Sans',sans-serif;letter-spacing:.5px;text-transform:uppercase;
  color:#8b979e}
.mappop-open{width:100%;cursor:pointer;border:0;background:#2f6f84;color:#fff;border-radius:9px;
  padding:8px 10px;font:600 12.5px 'DM Sans',sans-serif;font-family:inherit;transition:background .13s}
.mappop-open:hover{background:#265a6b}
.mappop-note{font:500 9.5px 'DM Sans',sans-serif;color:#aab5bb;margin-top:8px;text-align:center}

/* ===== decision queue ===== */
.queue-bar{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:#f7f9fa;
  border:1px solid #e9eef1;border-radius:12px;padding:13px 17px;margin-bottom:14px}
.queue-stat{display:flex;flex-direction:column;gap:0}
.queue-stat b{font:650 23px 'DM Sans',sans-serif;color:#14323f;letter-spacing:-.5px;line-height:1.05}
.queue-stat span{font:600 9.5px 'DM Sans',sans-serif;letter-spacing:.6px;text-transform:uppercase;
  color:#8b979e}
.queue-hint{margin:0 0 0 auto;max-width:44ch;font:500 11.5px 'DM Sans',sans-serif;color:#7a8891;
  line-height:1.5}
.pgroup{margin-bottom:16px;border:1px solid #e3e9ec;border-radius:13px;overflow:hidden;background:#fff}
.pgroup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:12px 16px;background:#f4f7f9;border-bottom:1px solid #e9eef1}
.pgroup-head h3{margin:0;font:650 14px 'DM Sans',sans-serif;color:#14323f;letter-spacing:-.1px}
.pgroup-count{font:700 10px 'DM Sans',sans-serif;letter-spacing:.6px;text-transform:uppercase;
  color:#5f6f79;background:#e4eaed;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pgroup-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:1px;background:#eef1f3}
.pgroup-heading{min-width:0}
.pgroup-note{margin:4px 0 0;font:500 11.5px 'DM Sans',sans-serif;color:#8b979e;line-height:1.5;max-width:70ch}
.pcard{background:#fff;padding:13px 16px}
.pcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pcard-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.pcard-zone{font:650 13.5px 'DM Sans',sans-serif;color:#1d2b33}
.pcard-dept{font:500 11px 'DM Sans',sans-serif;color:#8b979e}
.pri{flex:none;font:700 9.5px 'DM Sans',sans-serif;letter-spacing:.6px;text-transform:uppercase;
  padding:3px 9px;border-radius:999px}
.pri-high{background:#fadede;color:#9e2f2f}
.pri-medium{background:#fdf2dc;color:#8a6414}
.pri-low{background:#eef2f4;color:#5f6f79}
.pcard-why{margin:8px 0 9px;font:500 12px 'DM Sans',sans-serif;color:#5f6f79;line-height:1.55}
.pcard-conf{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.conf-track{flex:1;max-width:160px;height:5px;background:#eef1f3;border-radius:999px;overflow:hidden}
.conf-track i{display:block;height:100%;background:linear-gradient(90deg,#8d82d9,#6f5aa8);border-radius:999px}
.pcard-conf span{font:500 11px 'DM Sans',sans-serif;color:#8b979e;white-space:nowrap}
.pdec summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;list-style:none;
  font:600 12px 'DM Sans',sans-serif;color:#2f6f84;border:1px solid #dde4e8;border-radius:8px;
  padding:6px 14px;transition:border-color .13s,background .13s}
.pdec summary::-webkit-details-marker{display:none}
.pdec summary::after{content:'▾';font-size:10px}
.pdec[open] summary::after{content:'▴'}
.pdec summary:hover{border-color:#2f6f84;background:#f2f8fa}
.pdec[open] summary{margin-bottom:10px}
.pcard-ro{margin:0;font:500 11.5px 'DM Sans',sans-serif;color:#9aa7ae}
.pcard.is-decided{border-radius:11px;border:1px solid #e9eef1;margin-bottom:7px}
.pdecided > summary{cursor:pointer;font:600 12px 'DM Sans',sans-serif;color:#2f6f84;
  padding:9px 0;list-style:none}
.pdecided > summary::-webkit-details-marker{display:none}
.pdecided > summary::before{content:'▸ ';font-size:11px}
.pdecided[open] > summary::before{content:'▾ '}

/* ===== evidence ledger =====
   Every cell is a control now, so each one has to earn its affordance without
   turning forty rows into forty buttons shouting at once: they read as text and
   declare themselves on hover and on focus. */
.ledger{background:#fff;border:1px solid #e3e9ec;border-radius:13px;padding:14px 16px}

.ledger-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ledger-chip{display:inline-flex;align-items:center;gap:6px;background:#f2f5f7;border:1px solid transparent;
  border-radius:999px;padding:4px 11px;font:600 11px 'DM Sans',sans-serif;color:#5f6f79;
  text-transform:capitalize;cursor:pointer;transition:background .13s,color .13s,border-color .13s}
.ledger-chip:hover{background:#e4eaee;color:#14323f}
.ledger-chip b{font-weight:700;color:#14323f;font-variant-numeric:tabular-nums}
.ledger-chip.is-on{background:#14323f;color:#fff;border-color:#14323f}
.ledger-chip.is-on b{color:#fff}
.ledger-chip:focus-visible{outline:2px solid #6f5aa8;outline-offset:2px}

.ledger-caveat{margin:0 0 11px;font:500 11.5px 'DM Sans',sans-serif;color:#5f6f79;line-height:1.6;
  padding:9px 12px;background:#fbfcfd;border-left:2px solid #dde4e8;border-radius:0 7px 7px 0}
.ledger-caveat b{color:#14323f;font-weight:700}

.ledger-rows{display:flex;flex-direction:column;gap:1px;background:#eef1f3;border:1px solid #eef1f3;
  border-radius:9px;overflow:hidden;max-height:420px;overflow-y:auto;scrollbar-width:thin}
.ledger-rows::-webkit-scrollbar{width:9px}
.ledger-rows::-webkit-scrollbar-thumb{background:#d7dfe4;border-radius:999px;border:2px solid #fff}
.ledger-rows::-webkit-scrollbar-thumb:hover{background:#c2ccd3}
.ledger-row{display:grid;grid-template-columns:118px 1fr 104px 112px;gap:12px;align-items:baseline;
  background:#fff;padding:7px 11px;transition:background .12s}
.ledger-row:hover{background:#f7fafb}
.ledger-row[hidden]{display:none}

/* The three drill targets share one reset: a cell, not a chrome button.
   The global `button:hover{background:#0d568f}` on line 17 out-specifies a
   background set only on the base rule, so every hover state below has to say
   `background` itself or the cell turns navy under its own text. */
.ledger-zone,.ledger-what,.ledger-q,
.ledger-zone:hover,.ledger-what:hover,.ledger-q:hover,
.ledger-zone:focus,.ledger-what:focus,.ledger-q:focus,
.ledger-zone:active,.ledger-what:active,.ledger-q:active{appearance:none;background:none;
  border:0;margin:0;padding:0;font-family:'DM Sans',sans-serif;cursor:pointer;text-align:left;
  border-radius:4px;box-shadow:none;transition:color .12s,background-color .12s}
.ledger-zone:focus-visible,.ledger-what:focus-visible,.ledger-q:focus-visible{
  outline:2px solid #6f5aa8;outline-offset:2px}

.ledger-zone{font-weight:650;font-size:11.5px;color:#1d2b33;line-height:1.35;align-self:start}
.ledger-zone:hover{color:#6f5aa8;background:none;text-decoration:underline;
  text-underline-offset:2px}

.ledger-what{font-weight:500;font-size:12px;color:#44535c;line-height:1.45;min-width:0}
/* Hover must not change the box. An inserted chevron re-wrapped the summary and
   shoved every row below it down; underline and colour cost no layout at all. */
.ledger-what:hover{color:#14323f;background:none;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:#b4c0c7}

.ledger-when{font:500 10.5px 'DM Sans',sans-serif;color:#5f6f79;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* the origin is the one column that varies, so it is the one that gets colour */
.ledger-q,.ledger-q:hover,.ledger-q:focus{justify-self:end;display:inline-flex;
  align-items:center;gap:5px;font-weight:600;font-size:10.5px;text-transform:none;
  white-space:nowrap;padding:2px 8px 2px 7px;border-radius:999px}
.ledger-q{color:#46555e;background:#eef2f5}
.ledger-q::before{content:'';width:5px;height:5px;border-radius:50%;background:#b4c0c7;flex:none}
.ledger-q:hover{color:#14323f;background:#e2e8ed}
.ledger-q[title*='OpenStreetMap']::before{background:#8a6fc4}
.ledger-q[title*='GMDA']::before{background:#2f6fb0}

@media(max-width:820px){
  .ledger-row{grid-template-columns:1fr auto;gap:3px 10px;padding:9px 11px}
  .ledger-zone{grid-column:1}
  .ledger-q{grid-column:2;grid-row:1;justify-self:end}
  .ledger-what{grid-column:1/-1}
  .ledger-when{grid-column:1/-1;text-align:left}
}


/* ===== scenario scope picker =====
   NOTE: the global `button:hover{background:#0d568f}` near the top of this file
   out-specifies any background set only on a base rule, so every interactive
   chip below declares its hover background explicitly. */
.dt-scope-picker{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:10px 0 2px;padding-top:10px;border-top:1px solid #e3e9ec}
.dt-scope-label{font:700 10px 'DM Sans',sans-serif;letter-spacing:.7px;text-transform:uppercase;
  color:#8b979e;margin-right:4px}
.dt-scope-chip{appearance:none;border:1px solid #dde4e8;border-radius:999px;
  padding:5px 13px;font:600 11.5px 'DM Sans',sans-serif;color:#44535c;background:#fff;
  cursor:pointer;transition:background-color .13s,border-color .13s,color .13s}
.dt-scope-chip:hover{background:#eef4f8;border-color:#b9d8e9;color:#14323f}
.dt-scope-chip.is-on,.dt-scope-chip.is-on:hover{background:#14323f;border-color:#14323f;color:#fff}
.dt-scope-chip:focus-visible{outline:2px solid #6f5aa8;outline-offset:2px}

/* ===== operations order: the sections that were computed but never drawn ===== */
.dt-order-sub{margin:18px 0 8px;font:700 11px 'DM Sans',sans-serif;letter-spacing:.7px;
  text-transform:uppercase;color:#14323f}
.dt-order-note{margin:-4px 0 8px;font:500 11.5px 'DM Sans',sans-serif;color:#6b7c86}
.dt-ocards{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:9px}
.dt-ocard{background:#fff;border:1px solid #e3e9ec;border-radius:11px;padding:11px 13px}
.dt-ocard-lead{display:block;font:650 13px 'DM Sans',sans-serif;color:#14323f;
  line-height:1.35;margin-bottom:7px}
.dt-ocard-row{display:grid;grid-template-columns:86px 1fr;gap:9px;align-items:baseline;
  padding:3px 0;border-top:1px solid #f1f5f7}
.dt-ocard-row:first-of-type{border-top:0}
.dt-ocard-row span{font:700 9.5px 'DM Sans',sans-serif;letter-spacing:.5px;
  text-transform:uppercase;color:#8b979e}
.dt-ocard-row b{font:500 12px 'DM Sans',sans-serif;color:#44535c;line-height:1.45}
/* who to notify is the one people scan for, so it carries the accent */
.dt-ocards-notify .dt-ocard{border-left:3px solid #6f5aa8}
.dt-ocards-impact .dt-ocard{border-left:3px solid #c8872e}
.dt-ocards-ward .dt-ocard{border-left:3px solid #2f8f63}
@media(max-width:640px){.dt-ocard-row{grid-template-columns:1fr;gap:1px}}


/* ===== combat plan modal =====
   Reminder: the global `button:hover{background:#0d568f}` near the top of this
   file beats any background set only on a base rule, so every control here
   declares its own hover background. */
.scn-open{display:flex;align-items:baseline;gap:10px;width:100%;margin-top:12px;
  padding:11px 15px;border:0;border-radius:11px;background:#14323f;color:#fff;
  cursor:pointer;text-align:left;transition:background-color .14s}
.scn-open:hover{background:#1d4455}
.scn-open b{font:650 13px 'DM Sans',sans-serif}
.scn-open span{font:500 11.5px 'DM Sans',sans-serif;color:#b7c6cd}
.scn-open:focus-visible{outline:2px solid #6f5aa8;outline-offset:2px}

.scn-modal{position:fixed;inset:0;z-index:1200;background:rgba(14,32,41,.55);
  backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:14px}
.scn-modal[hidden]{display:none}
.scn-card{display:flex;flex-direction:column;width:min(1520px,100%);height:min(96vh,1100px);
  max-height:96vh;
  background:#f7fafb;border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(10,28,36,.34)}

.scn-head{background:#fff;border-bottom:1px solid #e3e9ec;padding:16px 22px 0}
.scn-head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.scn-head-top h2{margin:0;font:800 19px 'Manrope',sans-serif;color:#14323f;letter-spacing:-.3px}
.scn-sub{margin:3px 0 0;font:500 12.5px 'DM Sans',sans-serif;color:#5f6f79}
.scn-close{width:32px;height:32px;flex:none;border:1px solid #dde4e8;border-radius:9px;
  background:#fff;color:#5f6f79;font:400 20px/1 'DM Sans',sans-serif;cursor:pointer;
  transition:background-color .13s,color .13s}
.scn-close:hover{background:#eef2f5;color:#14323f}

.scn-controls{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:center;
  margin-top:14px}
.scn-level{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.scn-level>span{font:700 10px 'DM Sans',sans-serif;letter-spacing:.7px;text-transform:uppercase;
  color:#8b979e}
.scn-level output{font:800 24px 'Manrope',sans-serif;color:#14323f;font-variant-numeric:tabular-nums}
.scn-stage{font:700 10.5px 'DM Sans',sans-serif;font-style:normal;letter-spacing:.4px;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;background:#eef2f5;color:#46555e}
.scn-stage.s1{background:#fdf3e0;color:#8a5c14}
.scn-stage.s2{background:#fbe9e2;color:#8c4420}
.scn-stage.s3{background:#fae3e3;color:#8f2f2f}
.scn-stage.s4{background:#f3e2ea;color:#6f2444}
#scn-range{width:100%;accent-color:#14323f}
.scn-scope{grid-column:1/-1;margin:0;padding-top:10px}

.scn-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin:14px 0 0}
.scn-fig{background:#f7fafb;border:1px solid #e9eef1;border-radius:10px;padding:9px 12px}
.scn-fig>span{display:block;font:700 9.5px 'DM Sans',sans-serif;letter-spacing:.6px;
  text-transform:uppercase;color:#8b979e}
.scn-fig>b{display:block;font:800 19px 'Manrope',sans-serif;color:#14323f;line-height:1.2}
.scn-fig>small{display:block;font:500 11px 'DM Sans',sans-serif;color:#6b7c86}

.scn-tabs{display:flex;gap:4px;margin-top:14px}
.scn-tab{appearance:none;border:0;background:none;border-bottom:2px solid transparent;
  padding:9px 13px;font:650 12.5px 'DM Sans',sans-serif;color:#6b7c86;cursor:pointer;
  border-radius:8px 8px 0 0;transition:color .13s,border-color .13s,background-color .13s}
.scn-tab:hover{background:#f2f6f8;color:#14323f}
.scn-tab.is-on,.scn-tab.is-on:hover{color:#14323f;border-bottom-color:#14323f;background:none}
.scn-tab b{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:#eef2f5;color:#46555e;font:700 10.5px 'DM Sans',sans-serif}
.scn-tab.is-on b{background:#14323f;color:#fff}

.scn-body{flex:1;overflow-y:auto;padding:18px 22px}
.scn-pane{display:none}
.scn-pane.is-on{display:block}
.scn-pane-note{margin:0 0 12px;font:500 12px 'DM Sans',sans-serif;color:#6b7c86}

/* ---- measures, grouped by the stage that brings them in ---- */
.scn-mgroup{margin-bottom:14px;border:1px solid #e3e9ec;border-radius:12px;
  overflow:hidden;background:#fff}
.scn-mgroup-head{display:flex;align-items:baseline;justify-content:space-between;
  padding:9px 14px;background:#f7fafb;border-bottom:1px solid #eef1f3}
.scn-mgroup-head b{font:700 11.5px 'DM Sans',sans-serif;letter-spacing:.4px;
  text-transform:uppercase;color:#14323f}
.scn-mgroup-head span{font:500 11px 'DM Sans',sans-serif;color:#8b979e}

/* ---- one card per ward ---- */
.scn-ward{margin-bottom:9px;border:1px solid #e3e9ec;border-radius:12px;background:#fff;
  overflow:hidden}
.scn-ward[open]{border-color:#cfdbe2}
.scn-ward-head{display:grid;grid-template-columns:150px 1fr auto auto;gap:14px;align-items:center;
  padding:11px 14px;cursor:pointer;list-style:none;transition:background-color .12s}
.scn-ward-head::-webkit-details-marker{display:none}
.scn-ward-head:hover{background:#f7fafb}
.scn-ward-id b{display:block;font:700 13.5px 'DM Sans',sans-serif;color:#14323f}
.scn-ward-id span{display:block;font:500 11px 'DM Sans',sans-serif;color:#8b979e}
.scn-ward-ex{display:flex;flex-wrap:wrap;gap:12px;font:500 11.5px 'DM Sans',sans-serif;color:#6b7c86}
.scn-ex b{color:#14323f;font-weight:700}
.scn-ward-owner{text-align:right;min-width:150px}
.scn-ward-owner span{display:block;font:700 9px 'DM Sans',sans-serif;letter-spacing:.6px;
  text-transform:uppercase;color:#8b979e}
.scn-ward-owner b{font:600 11.5px 'DM Sans',sans-serif;color:#44535c}
.scn-ward-owner b.is-unassigned{color:#a8452f}
.scn-ward-count{font:700 10.5px 'DM Sans',sans-serif;color:#46555e;background:#eef2f5;
  border-radius:999px;padding:3px 10px;white-space:nowrap}

.scn-ward-body{border-top:1px solid #eef1f3;padding:6px 14px 12px}
.scn-ward-all{display:flex;align-items:center;gap:9px;padding:8px 0 9px;
  border-bottom:1px dashed #e3e9ec;margin-bottom:5px}
.scn-ward-all span{font:600 11.5px 'DM Sans',sans-serif;color:#6b7c86}
.scn-ward-open{margin-left:auto;appearance:none;border:1px solid #dde4e8;border-radius:8px;
  background:#fff;color:#44535c;padding:4px 11px;font:600 11px 'DM Sans',sans-serif;cursor:pointer;
  transition:background-color .13s,border-color .13s}
.scn-ward-open:hover{background:#eef4f8;border-color:#b9d8e9;color:#14323f}
.scn-task{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  padding:7px 0;border-top:1px solid #f4f7f9}
.scn-task:first-of-type{border-top:0}
.scn-task-text b{display:block;font:500 12.5px 'DM Sans',sans-serif;color:#2b3a42;line-height:1.45}
.scn-task-text span{display:block;font:500 11px 'DM Sans',sans-serif;color:#8b979e;margin-top:1px}
.scn-task input,.scn-ward-all input{margin-top:2px;accent-color:#14323f;width:15px;height:15px}

/* ---- the read-out the planner returns ---- */
.dt-readout{background:#fff;border:1px solid #e3e9ec;border-left:3px solid #14323f;
  border-radius:0 12px 12px 0;padding:13px 16px;margin-bottom:6px}
.dt-readout-head{display:block;font:700 14px 'DM Sans',sans-serif;color:#14323f;line-height:1.4}
.dt-readout-body{margin:7px 0 0;font:500 12.5px 'DM Sans',sans-serif;color:#44535c;line-height:1.6}
.dt-order-src{margin:16px 0 0;font:500 10.5px 'DM Sans',sans-serif;color:#9aa7ae}

.scn-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 22px;background:#fff;border-top:1px solid #e3e9ec}
.scn-foot .dt-plan-caveat{margin:0;flex:1 1 320px;font:500 10.5px 'DM Sans',sans-serif;
  color:#8b979e;line-height:1.5}

@media(max-width:900px){
  .scn-modal{padding:0}
  .scn-card{max-height:100vh;border-radius:0}
  .scn-ward-head{grid-template-columns:1fr auto;gap:6px 10px}
  .scn-ward-ex,.scn-ward-owner{grid-column:1/-1;text-align:left}
  .scn-tabs{overflow-x:auto}
}


/* the scope a plan was built for, stated on the plan itself */
.dt-order-stamp{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:11px;
  padding:7px 12px;background:#14323f;border-radius:9px}
.dt-order-stamp b{font:700 12px 'DM Sans',sans-serif;color:#fff}
.dt-order-stamp span{font:500 11px 'DM Sans',sans-serif;color:#b7c6cd}
.dt-order-stamp.is-stale{background:#8c4420}
.dt-stale-flag{font-weight:700;color:#ffd9c7}

/* a model can return a 400-character list of locality names; let it wrap to a
   few lines and keep the rest in the tooltip rather than stretching the card */
.dt-ocard-row b{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden}
.dt-ocards-impact .dt-ocard-row b{-webkit-line-clamp:5}

/* measures sit inside their stage group, so drop the standalone card chrome */
.scn-mgroup .dt-plan-item{border:0;border-radius:0;border-top:1px solid #f1f5f7;margin:0;
  padding:9px 14px;background:#fff}
.scn-mgroup .dt-plan-item:first-of-type{border-top:0}
.scn-mgroup .dt-plan-item.is-new{background:#fbfdfa;border-left:3px solid #2f8f63}


/* ===== mode: a stated state and one obvious action ===== */
.dt-modestate{display:inline-flex;align-items:center;gap:7px;font:600 12px 'DM Sans',sans-serif;
  color:#5f6f79}
.dt-dot-live,.dt-dot-scn{width:7px;height:7px;border-radius:50%;flex:none}
.dt-dot-live{background:#2f8f63;box-shadow:0 0 0 3px rgba(47,143,99,.16)}
.dt-dot-scn{background:#c8872e;box-shadow:0 0 0 3px rgba(200,135,46,.18)}

.dt-cta{display:inline-flex;align-items:center;gap:14px;border:0;border-radius:11px;
  padding:9px 16px;background:#14323f;color:#fff;cursor:pointer;text-align:left;
  box-shadow:0 2px 8px rgba(20,50,63,.22);transition:background-color .14s,transform .08s}
.dt-cta:hover{background:#1d4455}
.dt-cta:active{transform:translateY(1px)}
.dt-cta:focus-visible{outline:2px solid #6f5aa8;outline-offset:3px}
.dt-cta-text b{display:block;font:700 13px 'DM Sans',sans-serif;line-height:1.3}
.dt-cta-text small{display:block;font:500 11px 'DM Sans',sans-serif;color:#b7c6cd;margin-top:1px}
.dt-cta-arrow{font-size:17px;line-height:1;opacity:.85}

.dt-back{border:1px solid #dde4e8;border-radius:10px;background:#fff;color:#44535c;
  padding:9px 15px;font:600 12px 'DM Sans',sans-serif;cursor:pointer;
  transition:background-color .13s,border-color .13s}
.dt-back:hover{background:#eef4f8;border-color:#b9d8e9;color:#14323f}

/* ===== the planner is working, and says so ===== */
.dt-loading{background:#fff;border:1px solid #e3e9ec;border-radius:13px;padding:16px 18px}
.dt-loading-head{display:flex;align-items:center;gap:12px}
.dt-loading-text{flex:1;min-width:0}
.dt-loading-text b{display:block;font:650 13.5px 'DM Sans',sans-serif;color:#14323f}
.dt-loading-sub{display:block;font:500 11.5px 'DM Sans',sans-serif;color:#6b7c86;margin-top:2px}
.dt-loading-clock{font:700 12px 'DM Sans',sans-serif;color:#46555e;background:#eef2f5;
  border-radius:999px;padding:3px 11px;font-variant-numeric:tabular-nums;flex:none}
.dt-loading-note{margin:13px 0 0;font:500 11px 'DM Sans',sans-serif;color:#8b979e;line-height:1.5}
.dt-spinner{flex:none;width:20px;height:20px;border-radius:50%;display:block;
  border:2.5px solid #e3e9ec;border-top-color:#14323f;animation:dt-spin .8s linear infinite}
@keyframes dt-spin{to{transform:rotate(360deg)}}
.dt-skel{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.dt-skel-bar{display:block;height:9px;border-radius:999px;
  background:linear-gradient(90deg,#eef2f5 25%,#e2e8ed 37%,#eef2f5 63%);
  background-size:400% 100%;animation:dt-shimmer 1.4s ease-in-out infinite}
@keyframes dt-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){
  .dt-spinner{animation-duration:2.4s}
  .dt-skel-bar{animation:none;background:#eef2f5}
}

/* ===== purposeful empty states ===== */
.nothing{background:#fbfcfd;border:1px dashed #dde4e8;border-radius:12px;padding:18px 20px}
.nothing b{display:block;font:650 13.5px 'DM Sans',sans-serif;color:#1d2b33;margin-bottom:3px}
.nothing p{margin:0;font:500 12px 'DM Sans',sans-serif;color:#7a8891;line-height:1.6;max-width:62ch}

/* =======================================================================
   GURUGRAM AQI · powered by SCIKIQ — left navigation (light / futuristic)
   Appended last on purpose: it overrides the original dark-rail sidebar
   declared in the minified base block above, including that block's own
   media queries, which is why the responsive rules are restated here.
   ======================================================================= */
.sidebar{
  --rail-accent:#0b7ad1;
  --rail-accent-deep:#064f8c;
  --rail-ink:#13303f;
  --rail-ink-soft:#566b7a;
  --rail-line:#e3ebf2;
  width:268px;padding:20px 14px 16px;
  background:
    radial-gradient(120% 55% at 0% 0%,#eef7ff 0%,rgba(238,247,255,0) 58%),
    linear-gradient(180deg,#ffffff 0%,#f6f9fc 58%,#f1f6fa 100%);
  color:var(--rail-ink);
  border-right:1px solid var(--rail-line);
  box-shadow:1px 0 0 #ffffff inset, 14px 0 34px -30px rgba(13,60,96,.28);
  position:sticky;top:0;align-self:flex-start;
  height:100vh;overflow-y:auto;overscroll-behavior:contain;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:#d4e0e9;border-radius:8px}
.sidebar::-webkit-scrollbar-thumb:hover{background:#bccdda}

/* ---- brand lockup: VAYU wordmark + MCG seal + SCIKIQ attribution ---- */
.sidebar .brand{
  display:block;padding:11px 12px 10px;margin:0 0 2px;
  border-radius:14px;color:var(--rail-ink);text-decoration:none;
  background:linear-gradient(135deg,#ffffff 0%,#f3faff 100%);
  border:1px solid #e4edf5;
  box-shadow:0 1px 2px rgba(16,60,96,.05),0 12px 24px -20px rgba(11,122,209,.55);
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
.sidebar .brand:hover{
  border-color:#cce2f5;transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(16,60,96,.07),0 18px 30px -20px rgba(11,122,209,.7);
}
.sidebar .brand-row{display:flex;align-items:center;gap:11px}
.sidebar .brand-mark{
  width:46px;height:46px;flex:none;border-radius:13px;background:#fff;
  display:grid;place-items:center;padding:3px;
  border:1px solid #e1ebf3;box-shadow:0 1px 3px rgba(16,60,96,.08);
}
.sidebar .brand-mark img{display:block;width:100%;height:100%}
.sidebar .brand-text{display:block;min-width:0;line-height:1}
.sidebar .brand-name{
  display:block;font:800 25px Manrope,sans-serif;letter-spacing:2.4px;color:#0a5c9e;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .sidebar .brand-name{
    background:linear-gradient(96deg,#06467d 0%,#0b7ad1 52%,#14b4d6 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.sidebar .brand-sub{
  display:block;margin-top:5px;
  font:700 8px 'DM Sans',sans-serif;letter-spacing:1.25px;color:#8ca2b3;
  white-space:nowrap;
}
.sidebar .brand-by{
  display:flex;align-items:center;gap:6px;width:fit-content;
  margin:10px 0 0;padding:4px 9px 4px 7px;border-radius:999px;
  background:#eaf4fd;border:1px solid #d7e8f7;
  font:600 9.5px 'DM Sans',sans-serif;letter-spacing:.2px;color:#6b8698;
}
.sidebar .brand-by b{
  font:800 10px Manrope,sans-serif;letter-spacing:.9px;color:var(--rail-accent-deep);
}
.sidebar .brand-by-dot{
  width:5px;height:5px;flex:none;border-radius:50%;
  background:linear-gradient(140deg,var(--rail-accent) 0%,#16b6d8 100%);
  box-shadow:0 0 6px rgba(11,122,209,.6);
}

/* ---- group labels ---- */
.sidebar .nav-label{
  display:flex;align-items:center;gap:8px;
  padding:16px 10px 6px;margin:0;
  font:800 8.5px 'DM Sans',sans-serif;letter-spacing:1.6px;color:#9bacba;
}
.sidebar .brand + .nav-label{padding-top:14px}
.sidebar .nav-label::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,#dde7ee 0%,rgba(221,231,238,0) 100%);
}

/* ---- navigation items ---- */
.sidebar nav{display:grid;gap:3px}
.sidebar nav a{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:11px;
  color:var(--rail-ink-soft);text-decoration:none;
  font:600 12.8px 'DM Sans',sans-serif;letter-spacing:-.05px;
  border:1px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.sidebar nav a span{min-width:0}
.sidebar nav .nav-ico{
  width:28px;height:28px;flex:none;border-radius:9px;
  display:grid;place-items:center;
  font-style:normal;line-height:0;
  color:#6d879a;
  background:#eef4f9;border:1px solid #e3ecf3;
  transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.sidebar nav .nav-ico svg{width:15.5px;height:15.5px;display:block}
.sidebar nav a.active .nav-ico svg{stroke-width:1.9}
.sidebar nav a:hover{
  background:#fff;color:var(--rail-ink);border-color:#e4edf4;
  box-shadow:0 1px 2px rgba(16,60,96,.04),0 10px 20px -16px rgba(13,60,96,.45);
}
.sidebar nav a:hover .nav-ico{
  background:#e7f3fd;color:var(--rail-accent);border-color:#d3e8f9;
}
.sidebar nav a:focus-visible{
  outline:none;border-color:#9ecbf0;
  box-shadow:0 0 0 3px rgba(11,122,209,.16);
}
.sidebar nav a.active{
  color:#0b3b57;font-weight:700;
  background:linear-gradient(94deg,#e6f3ff 0%,#f3fafe 72%,#f7fcff 100%);
  border-color:#d2e7f8;
  box-shadow:0 1px 2px rgba(11,122,209,.06),0 12px 24px -18px rgba(11,122,209,.75);
}
.sidebar nav a.active::before{
  content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:4px;height:22px;border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--rail-accent) 0%,#16b6d8 100%);
  box-shadow:0 0 12px rgba(11,122,209,.55);
}
.sidebar nav a.active .nav-ico{
  color:#fff;border-color:transparent;
  background:linear-gradient(140deg,var(--rail-accent) 0%,var(--rail-accent-deep) 100%);
  box-shadow:0 4px 12px -4px rgba(11,122,209,.65);
}

/* ---- environment footer card ---- */
.sidebar .sidebar-bottom{
  margin-top:auto;border-top:0;
  padding:11px 12px;
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid #e6eef5;border-radius:12px;
  box-shadow:0 1px 2px rgba(16,60,96,.04);
  font-size:11px;color:#46596a;
}
.sidebar .sidebar-bottom b{font:700 11px 'DM Sans',sans-serif;color:#1d3a4b}
.sidebar .sidebar-bottom small{display:block;color:#8ba0ae;font-size:9.5px;margin-top:3px}
.sidebar .status-dot{
  width:8px;height:8px;flex:none;border-radius:50%;background:#19b584;
  box-shadow:0 0 0 3px rgba(25,181,132,.16);
  animation:railPulse 2.6s ease-in-out infinite;
}
@keyframes railPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(25,181,132,.16)}
  50%{box-shadow:0 0 0 6px rgba(25,181,132,.04)}
}
@media(prefers-reduced-motion:reduce){
  .sidebar .status-dot{animation:none}
  .sidebar .brand,.sidebar nav a,.sidebar nav .nav-ico{transition:none}
}

/* ---- responsive (restates the earlier dark-sidebar breakpoints) ---- */
@media(max-width:1050px){
  .sidebar{width:232px;padding:17px 11px 13px}
  .sidebar .brand-name{font-size:22px;letter-spacing:2px}
  .sidebar .brand-sub{font-size:7.5px;letter-spacing:1.05px}
  .sidebar nav a{font-size:12.2px;padding:8px 9px;gap:9px}
  .sidebar nav a.active::before{left:-11px}
}
@media(max-width:720px){
  .sidebar{
    width:100%;height:auto;position:static;padding:12px 14px;
    border-right:0;border-bottom:1px solid var(--rail-line);
    box-shadow:0 10px 24px -26px rgba(13,60,96,.5);overflow:visible;
  }
  .sidebar .brand{margin-bottom:10px;padding:9px 11px 8px}
  .sidebar .brand-by{margin-top:8px}
  .sidebar .nav-label,.sidebar .sidebar-bottom{display:none}
  .sidebar nav{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px}
  .sidebar nav::-webkit-scrollbar{height:4px}
  .sidebar nav::-webkit-scrollbar-thumb{background:#d4e0e9;border-radius:4px}
  .sidebar nav a{white-space:nowrap;padding:7px 11px 7px 8px;font-size:11.8px;flex:none}
  .sidebar nav a span{display:inline}
  .sidebar nav a.active::before{display:none}
  .sidebar nav .nav-ico{width:24px;height:24px;border-radius:7px}
  .sidebar nav .nav-ico svg{width:14px;height:14px}
}


/* ===========================================================================
   Combat plan - readability polish
   Keeps every card and border: the boxes are what let the eye find a row. This
   only widens the breathing room inside them, lifts text contrast, and stops a
   400-character value from stretching a card.
   ======================================================================== */
.scn-head{padding:20px 26px 0}
.scn-body{padding:22px 26px 26px}
.scn-foot{padding:13px 26px}
.scn-head-top h2{font-size:20px;letter-spacing:-.3px}

/* the slider was a bare input */
#scn-range{accent-color:#14323f}
#scn-range::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border-radius:50%;
  background:#14323f;border:3px solid #fff;box-shadow:0 1px 4px rgba(20,50,63,.4);cursor:pointer;
  margin-top:-7px}
#scn-range::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:#e3e9ec}

/* text contrast inside the cards */
.dt-ocard-lead{font-size:13.5px;color:#14323f}
.dt-ocard-row b{color:#3f4e57;font-size:12.5px;line-height:1.5}
.dt-ocard-row span{color:#7d8a92}
.dt-step-head b{font-size:13.5px;color:#14323f;line-height:1.45}
.dt-step-meta{color:#5f6f79;font-size:11.5px;line-height:1.55}
.dt-readout-head{font-size:15px;line-height:1.45}
.dt-readout-body{font-size:13px;line-height:1.65;color:#3f4e57;max-width:95ch}
.dt-order-list li{font-size:12.5px;line-height:1.65;color:#3f4e57;margin-bottom:5px}
.scn-task-text b{font-size:12.5px;color:#2b3a42;line-height:1.45}
.dt-order-sub{margin-top:26px}

/* a long list of locality names must not stretch its card */
.dt-ocard-row b{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden}
.dt-ocards-impact .dt-ocard-row b{-webkit-line-clamp:5}

/* measures sit inside their stage card rather than carrying their own */
.scn-mgroup .dt-plan-item{border:0;border-radius:0;border-top:1px solid #f1f5f7;margin:0;
  padding:10px 14px;background:#fff}
.scn-mgroup .dt-plan-item:first-of-type{border-top:0}
.scn-mgroup .dt-plan-item.is-new{background:#fbfdfa;border-left:3px solid #2f8f63}

.scn-ward{margin-bottom:8px}
.scn-ward[open]{box-shadow:0 1px 4px rgba(20,50,63,.07)}


/* ===== media safety net =====
   Any chart, diagram, photo or figure is capped at the width of its column, so a
   520px-wide SVG or a camera photo cannot push the page sideways on a phone.
   Leaflet is deliberately excluded: the library sizes its tile <img>s and its
   vector pane in absolute pixels far wider than the viewport on purpose, and
   clamping those to 100% squeezes the tiles and misplaces every overlay. */
img,svg,canvas,video{max-width:100%}
img,video{height:auto}
.leaflet-container img,.leaflet-container svg,.leaflet-container canvas,
.leaflet-pane img,.leaflet-pane svg,.leaflet-pane canvas{max-width:none}