/* HISAAB (Hazard, Impact & Simulation Analysis for Asset-Based risk), AI Geo Navigators — client build v2.
   Forest and sage chrome, warm white ground, white cards; map ramps by peril
   family: water --w (teal-green), ground --r (sand to oxblood), heat --h (yellow
   to deep red); --n0 is "no change" on two-sided scales.
   No blue anywhere: tools/test_v2.py rejects a blue hue in this file. */
:root{
  --paper:#FCFCFA;--card:#FFFFFF;--card2:#F5F7F3;--ink:#1F2A24;--ink2:#4D5A52;--ink3:#7D877F;--line:#E3E8E1;
  --head:#E5EEE6;--headink:#24483C;--sel:#38664D;--selink:#FFFFFF;--water:#478F87;
  --leaf:#D6E6D8;--moss:#38664D;--amber:#C9924E;--terra:#AE6A3B;--oxblood:#7E2F25;
  --nodata:#ECEFEA;--admin:#3F4A43;--halo:#FFFFFF;
  --r0:#F4EEDC;--r1:#E9D6A3;--r2:#DBB874;--r3:#C9924E;--r4:#AE6A3B;--r5:#87432F;--r6:#592A25;
  --w0:#EAF3EE;--w1:#CBE3D7;--w2:#A2CDBB;--w3:#73B09B;--w4:#4A8F7B;--w5:#2F6E5E;--w6:#1D4A40;
  --h0:#FBF2DA;--h1:#F5DA9E;--h2:#EDB86A;--h3:#E08F47;--h4:#C8623A;--h5:#A03F2E;--h6:#6E2523;--n0:#EFEFE9;
  --ok:#38664D;--warn:#B7832F;--bad:#A6452F;
  --shadow:0 1px 2px rgba(31,42,36,.05),0 4px 16px rgba(31,42,36,.05);accent-color:#38664D;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.45 "Segoe UI",Manrope,system-ui,-apple-system,sans-serif}
button{font:inherit;color:inherit;cursor:pointer}
select,input{font:inherit;color:var(--ink)}
code{font-size:12px}
a{color:var(--sel);text-underline-offset:2px}
.top{display:flex;align-items:center;gap:16px;padding:10px 18px;background:var(--head);color:var(--headink);border-bottom:1px solid color-mix(in srgb,var(--headink) 14%,transparent);position:sticky;top:0;z-index:15;flex-wrap:wrap}
.top img{height:38px;border-radius:6px;background:#fff;padding:2px 6px}
.brand b{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;letter-spacing:2.2px;color:var(--headink)}
.flag{width:27px;height:18px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.brand span{display:block;max-width:292px;font-size:10px;line-height:1.25;color:color-mix(in srgb,var(--headink) 72%,transparent);letter-spacing:.2px}.brand span i{font-style:normal;white-space:nowrap}
nav{display:flex;gap:4px;margin-left:8px;flex-wrap:wrap}
nav a.navlink{padding:8px 13px;border-radius:999px;color:var(--headink);font-weight:650;text-decoration:none}nav a.navlink:hover{background:color-mix(in srgb,var(--headink) 9%,transparent)}
nav button{border:0;background:none;padding:8px 13px;border-radius:999px;color:var(--headink);font-weight:650}
nav button:hover{background:color-mix(in srgb,var(--headink) 9%,transparent)}
nav button[aria-current="page"]{background:var(--sel);color:var(--selink)}
.sp{flex:1}
.iconbtn{border:1px solid color-mix(in srgb,var(--headink) 22%,transparent);background:var(--card);color:var(--headink);border-radius:999px;padding:6px 12px;font-weight:650}
.view{display:none}.view.on{display:block}
.wrap{display:grid;grid-template-columns:200px minmax(0,1fr) 262px;gap:12px;padding:12px 14px 16px}
.pad{padding:14px 18px 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.rail{padding:10px;display:flex;flex-direction:column;gap:12px;align-self:start;position:sticky;top:86px;max-height:calc(100vh - 100px);overflow:auto}
.h{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink3);font-weight:750;margin:0 0 8px}
h2{margin:0;font-size:18px}
h3{margin:0 0 6px;font-size:15px}
.perils{display:flex;flex-direction:column;gap:5px}
.peril{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card2);border-radius:10px;padding:6px 8px;text-align:left;font-weight:650;font-size:12.5px;line-height:1.25}
.peril i{width:12px;height:12px;border-radius:4px;background:var(--c);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.peril small{margin-left:auto;font-weight:600;color:var(--ink3);font-size:10.5px}
.peril[aria-pressed="true"]{background:color-mix(in srgb,var(--c) 16%,var(--card));border-color:var(--c)}
.badge{font-size:10px;padding:1px 6px;border-radius:999px;background:var(--leaf);color:var(--headink);font-weight:800;margin-left:auto}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1px solid var(--line);background:var(--card2);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:650}
.chips button[aria-pressed="true"]{background:var(--sel);color:var(--selink);border-color:var(--sel)}
.chips button i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,var(--ink3));margin-right:6px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card2);flex-wrap:wrap}
.seg button{border:0;background:none;padding:6px 11px;font-weight:650;color:var(--ink2);font-size:12.5px}
.seg button[aria-pressed="true"]{background:var(--sel);color:var(--selink)}
.seg select{border:0;border-radius:0;background:none;padding:6px 10px;font-weight:650;font-size:12.5px;color:var(--ink2)}
.seg select.on{background:var(--sel);color:var(--selink)}
input[type=search],input[type=number],select{padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--card2)}
input[type=search]{width:100%}
select{max-width:100%}
.mapcard{padding:12px 12px 8px;display:flex;flex-direction:column;align-self:start;gap:8px}
.maphead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.maphead h2{margin-right:4px}
.maphead select#metrics{padding:6px 8px;font-weight:650;font-size:12.5px;max-width:190px}
.maphead h2{font-size:17px;white-space:nowrap;max-width:235px;overflow:hidden;text-overflow:ellipsis}
.maphead .seg button{padding:5px 8px}
#unitseg button{padding:5px 10px;font-size:12px}
.maphead .note{font-size:12px}
.infob{border:1px solid var(--line);background:var(--card2);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:650;color:var(--ink2)}
.infob:hover{border-color:var(--sel);color:var(--ink)}
.play{border:1px solid var(--line);background:var(--card2);border-radius:999px;width:30px;height:30px;font-weight:800}
svg.map{width:100%;height:auto;max-height:640px;display:block;cursor:crosshair;outline:none}
.mapwrap{position:relative}
.mapinfo{position:absolute;top:8px;left:8px;width:min(320px,calc(100% - 16px));max-height:calc(100% - 16px);overflow:auto;background:var(--card);border:1px solid var(--line, rgba(0,0,0,.12));border-radius:12px;box-shadow:var(--shadow);padding:10px 12px 8px;font-size:12.5px;display:none;z-index:5}
.mapinfo.on{display:block}
.mapinfo b.n{display:block;font-size:15px;padding-right:22px}
.mapinfo table{width:100%;border-collapse:collapse;margin-top:6px}
.mapinfo td{padding:3px 0;border-top:1px solid var(--line, rgba(0,0,0,.08));vertical-align:top}
.mapinfo td.r{text-align:right;white-space:nowrap;padding-left:10px;font-variant-numeric:tabular-nums}
.mapinfo tr.cur td{font-weight:700}
.mapinfo .x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:var(--ink2, inherit)}
svg.map path{vector-effect:non-scaling-stroke}
svg.map path.d{stroke:var(--card);stroke-width:.45;transition:fill .35s,opacity .25s}
svg.map path.d:hover{stroke:var(--ink);stroke-width:1.4}
svg.map path.d.sel{stroke:var(--ink);stroke-width:2.2}
svg.map path.d.dim{opacity:.28}
svg.map path.d.t{stroke-width:.22}
svg.map .provline{fill:none;stroke:var(--halo);stroke-width:3;pointer-events:none}
svg.map .provcore{fill:none;stroke:var(--admin);stroke-width:1.1;pointer-events:none}
svg.map .iiojk{stroke:var(--admin);stroke-width:.8;stroke-dasharray:3 2}
svg.map .loc{fill:none;stroke:var(--oxblood);stroke-width:1.6;stroke-dasharray:5 3}
.legend{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink2);flex-wrap:wrap}
.ramp{display:flex;border-radius:6px;overflow:hidden;height:10px;width:200px}.ramp span{flex:1}
.tip{position:fixed;pointer-events:none;background:var(--ink);color:var(--card);padding:8px 10px;border-radius:10px;font-size:12.5px;box-shadow:var(--shadow);opacity:0;transition:opacity .12s;z-index:40;max-width:300px}
.tip b{display:block;font-size:13px}
.side{display:flex;flex-direction:column;gap:10px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}
.kpi{border-radius:10px;padding:6px 8px 6px 10px;background:var(--card2);border:1px solid var(--line);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--k,var(--ink3))}
.kpi .l{font-size:9.5px;letter-spacing:.8px;line-height:1.25;text-transform:uppercase;color:var(--ink3);font-weight:750}
.kpi .v{font-size:17px;font-weight:800;margin-top:1px;line-height:1.25;font-variant-numeric:tabular-nums}
.kpi .s{font-size:11px;color:var(--ink3);line-height:1.3}
.kpi.big{grid-column:1/-1}.kpi.big .v{font-size:22px}
.aal{border:2px dashed var(--line);background:transparent;min-height:54px}.aal::before{display:none}
.kpis .aal,.kpis .aalv{grid-column:1/-1}
.aal.on{border-style:solid;border-color:var(--sel)}
.panel{padding:12px 14px}
.side .panel{padding:10px 12px}
.rank{display:flex;flex-direction:column;gap:5px}
.rank button{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;border:0;background:none;padding:3px 2px;text-align:left;border-radius:8px}
.rank button:hover{background:var(--card2)}
.rank .bar{height:7px;border-radius:4px;background:var(--bc,var(--pc));margin-top:3px}
.rank .n{font-size:12.5px;font-weight:650}
.rank .x{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.rank .i{font-size:11px;color:var(--ink3);text-align:right}
svg.chart{width:100%;height:190px;display:block}
.side svg.chart{height:165px}
svg.chart text{fill:var(--ink3);font-size:10.5px}
svg .grid{stroke:var(--line)}
.stack{display:flex;height:16px;border-radius:8px;overflow:hidden;margin:6px 0}
.stackleg{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11.5px;color:var(--ink2)}
.stackleg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.note{font-size:12px;color:var(--ink3)}
.foot{padding:4px 18px 22px;font-size:11.5px;color:var(--ink3)}
.abar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 14px;margin-bottom:14px}
.abar .count{margin-left:auto;font-weight:700;color:var(--ink2)}
.agrp{margin:18px 0 8px;display:flex;align-items:baseline;gap:10px}
.agrp h3{margin:0}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
.tile{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:8px;text-align:left;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;position:relative}
.tile:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(36,33,28,.14)}
.tile canvas{width:100%;height:auto;display:block;border-radius:8px;background:var(--card2);aspect-ratio:900/700}
.tile .tt{font-weight:700;font-size:12.5px;margin-top:6px;line-height:1.25}
.tile .ts{font-size:11.5px;color:var(--ink3)}
.tile .dot{position:absolute;top:12px;left:12px;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--card)}
.modal{position:fixed;inset:0;background:rgba(22,20,15,.55);display:none;align-items:center;justify-content:center;z-index:30;padding:20px}
.modal.on{display:flex}
.modal .box.ibox{display:block;max-width:980px}
.ibox h2{margin-bottom:4px}.ibox table{width:100%;border-collapse:collapse;margin:6px 0 12px}.ibox td,.ibox th{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:12.5px}
.ibox .lede{color:var(--ink2);margin:4px 0 12px}.ibox ul{margin:4px 0 12px;padding-left:18px}.ibox li{margin:3px 0;font-size:12.5px}
.cmipcard{font-size:12.5px;line-height:1.45}.cmipcard b{font-weight:700}
.modal .box{background:var(--card);border-radius:18px;max-width:1100px;width:100%;max-height:92vh;overflow:auto;padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}
.xbtn{border:1px solid var(--line);background:var(--card2);border-radius:999px;padding:6px 12px;font-weight:700}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;font-variant-numeric:tabular-nums;vertical-align:top}
th{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink3);position:sticky;top:0;background:var(--card);cursor:pointer;user-select:none}
td.r,th.r{text-align:right}
tr:hover td{background:var(--card2)}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:750;background:color-mix(in srgb,var(--c) 18%,var(--card));color:var(--ink);border:1px solid color-mix(in srgb,var(--c) 45%,transparent)}
.scroll{max-height:560px;overflow:auto;border:1px solid var(--line);border-radius:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.subnav{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.subnav button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 14px;font-weight:700}
.subnav button[aria-pressed="true"]{background:var(--terra);color:#fff;border-color:var(--terra)}
.sub{display:none}.sub.on{display:block}
.drop{border:2px dashed var(--terra);border-radius:14px;padding:20px;text-align:center;background:color-mix(in srgb,var(--terra) 6%,var(--card));cursor:pointer}
.drop.over{background:color-mix(in srgb,var(--terra) 16%,var(--card))}
.btn{border:0;border-radius:12px;padding:9px 14px;font-weight:800;background:var(--sel);color:var(--selink)}
.btn.ghost{background:var(--card2);border:1px solid var(--line);color:var(--ink)}
label.f{display:block;font-size:12px;font-weight:750;color:var(--ink2);margin:12px 0 4px}
.sbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:10px 0}
.sbgrid label{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--card2);font-size:12.5px}
.sbgrid label select{margin-left:auto;padding:4px 6px}
.sbrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.sbrow input[type=range]{flex:1;min-width:120px}
.steps{display:flex;flex-direction:column;gap:8px}
.steps div{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:start;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--card2)}
.steps b{font-size:12px}
.empty{border:2px dashed var(--line);border-radius:14px;display:grid;place-items:center;color:var(--ink3);min-height:220px;text-align:center;padding:18px}
.loading{padding:60px;text-align:center;color:var(--ink3)}
@media (max-width:1200px){.wrap,.grid2,.grid3,.modal .box{grid-template-columns:1fr}.rail{position:static;max-height:none}}
.ibox td.r,.ibox th.r{text-align:right;white-space:nowrap}.ibox table.sb{display:block;overflow-x:auto}.ibox table.sb td{font-size:12px}
.ibox table.sb tr.kept td{background:color-mix(in srgb,var(--ok) 9%,transparent)}
.ibox table.sb td:first-child{white-space:nowrap}
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin:6px 0 10px}

/* View menu (header) */
.vmw{position:relative}
.vmenu{position:absolute;right:0;top:calc(100% + 6px);background:var(--card,#fff);color:var(--ink,#111);border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:30;font-size:13px}

/* client and analyst views: engine, calibration and QA detail only in the analyst view */
body:not(.analyst) .tech{display:none!important}
body.analyst .client{display:none!important}
/* overview */
.hhead{display:flex;align-items:flex-end;gap:12px;margin-bottom:12px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.homegrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;margin-top:14px}
.hbar{display:flex;height:26px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.hbar span{display:block;height:100%}
.hbarleg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:12.5px}
.hbarleg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
#htop td,#htop th{padding:7px 8px}
#htop tr{cursor:pointer}
.live{display:flex;flex-direction:column;gap:6px}
.live .row{display:flex;gap:8px;align-items:baseline}
.live .row b{white-space:nowrap}
.pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700;background:color-mix(in srgb,var(--c,var(--ok)) 16%,var(--card));color:var(--c,var(--ok));border:1px solid color-mix(in srgb,var(--c,var(--ok)) 40%,transparent)}
/* live event banner */
.evb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 18px;background:color-mix(in srgb,var(--c,var(--warn)) 14%,var(--paper));border-bottom:1px solid color-mix(in srgb,var(--c,var(--warn)) 45%,transparent);font-weight:600}
.evb[hidden]{display:none}
.evb b{color:var(--c,var(--warn))}
.evb button{margin-left:auto}
/* district risk card */
.modal .box.dbox{width:min(1080px,96vw);max-height:92vh;overflow:auto;display:block}
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:12px}
.dline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.dline:last-child{border-bottom:0}
.dbar{height:8px;border-radius:4px;background:var(--card2);margin-top:4px;overflow:hidden}
.dbar span{display:block;height:100%}
.dsay{font-size:15px;line-height:1.55;margin:10px 0 0}
@media (max-width:1100px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.homegrid,.dgrid{grid-template-columns:1fr}}
.kpi.hk{padding:10px 12px 10px 14px}.kpi.hk .v{font-size:24px}.kpi.hk .l{font-size:10.5px}.kpi.hk .s{font-size:12px;margin-top:3px}
.nw{white-space:nowrap}
#hlive{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important}

/* health status (analyst view) */
#hlth::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--hc,#3B7F6B);vertical-align:1px}
.hlm{min-width:340px}.hlm .r1{display:flex;gap:8px;padding:6px 4px;border-bottom:1px solid color-mix(in srgb,currentColor 10%,transparent)}
.hlm .r1:last-child{border-bottom:0}.hlm .dot{flex:0 0 8px;height:8px;border-radius:50%;margin-top:6px}.hlm .fx{font-size:12px;opacity:.75}

/* Urdu (Overview, what-if, banner, risk card) */
body.ur #v-home,body.ur #evb,body.ur #dmodal .box,body.ur #sone,body.ur #locbox{font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu","Segoe UI",Tahoma,serif;line-height:1.85}
body.ur #v-home .h,body.ur #dmodal .h,body.ur #sone .h{letter-spacing:0;text-transform:none;font-size:14px}
body.ur #v-home .r,body.ur #dmodal .r,body.ur #sone .r{text-align:left}
body.ur #sone td.r,body.ur #locbox input,body.ur #v-home .kpi .v,body.ur #v-home .pill,body.ur #v-home td.r,body.ur #dmodal .dline b{font-family:"Segoe UI",Manrope,system-ui,sans-serif}
body.ur #v-home select{font-family:inherit}
#lang{font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu","Segoe UI",Tahoma,serif}
@media (max-width:1640px){#built{display:none}}

.wrap1{padding:0 14px 16px}
.locbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 4px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--terra) 7%,var(--card));border:1px solid color-mix(in srgb,var(--terra) 30%,transparent)}
.locbar .lbt{font-size:12.5px;margin-right:2px}
.locbar input{padding:6px 8px;font-size:12.5px}
.locbar #mll{width:300px}
.locbar select{padding:6px 8px;font-size:12.5px}
.locbar .seg button{padding:5px 8px}
.locbar .btn{padding:6px 10px;font-size:12.5px}
.locbar .btn[aria-pressed="true"]{background:var(--terra);color:#fff}
.locbar .note{font-size:11.5px;flex-basis:100%}
.map.picking{cursor:crosshair}
.map .locmark{fill:var(--terra);stroke:var(--card);stroke-width:2;pointer-events:none}
.map .locarea{fill:color-mix(in srgb,var(--terra) 18%,transparent);stroke:var(--terra);stroke-width:1.6;vector-effect:non-scaling-stroke;pointer-events:none}
.map .locline{fill:none;stroke:var(--terra);stroke-width:1.6;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;pointer-events:none}
.smap{margin-bottom:12px}
.smapbox{height:360px;border-radius:12px;overflow:hidden;border:1px solid var(--line, rgba(0,0,0,.12))}
.smapnote{margin-top:4px}
.maplibregl-ctrl button:focus,.maplibregl-ctrl-group button:focus,.maplibregl-ctrl button:focus:focus-visible{box-shadow:0 0 2px 2px #38664D}
/* evidence class of each loss component (plugin.results.evidence) */
.evc{display:inline-block;padding:0 7px;border-radius:999px;font-size:10.5px;font-weight:700;line-height:1.6;white-space:nowrap;vertical-align:1px;background:color-mix(in srgb,var(--c) 16%,var(--card));color:var(--ink);border:1px solid color-mix(in srgb,var(--c) 55%,transparent)}
.evs{margin-top:6px}
.evbar{display:flex;height:8px;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:var(--card2)}
.evbar span{display:block;height:100%}
.evleg{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;font-size:11.5px;color:var(--ink)}
.evleg b{font-variant-numeric:tabular-nums}
.kpi .evleg{font-size:10.5px;gap:3px 8px}
.role{display:inline-block;padding:0 7px;border-radius:6px;font-size:11px;font-weight:650;white-space:nowrap;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 12%,var(--card))}
tr.ho td{background:color-mix(in srgb,var(--ok) 10%,transparent)}
.hobox{margin:10px 0;border-left:4px solid var(--bad)}
.hoat{font-size:14px;margin:4px 0}
.unc{margin-top:12px}
.uncl{margin:6px 0;padding-left:20px;font-size:12.5px;line-height:1.5}
.uncl ul{margin:2px 0 6px;padding-left:18px}
.note.sup{margin:2px 0 6px}
body.ur .uncl{padding-left:0;padding-right:20px}
body.ur .uncl ul{padding-left:0;padding-right:18px}

/* one-line header: view options in a menu; phones: brand row, then a scrolling row of views */
.vmenu{min-width:200px;padding:6px}
.vmenu button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;border-radius:7px;font-weight:650;color:inherit;font:inherit;cursor:pointer}
.vmenu button:hover,.vmenu button:focus-visible{background:color-mix(in srgb,currentColor 8%,transparent)}
.top{flex-wrap:nowrap}
.top .brand{min-width:0}
.brand span{max-width:250px}
nav{flex-wrap:nowrap}
nav button,nav a.navlink{white-space:nowrap}
@media (max-width:1300px){.brand span{display:none}nav button,nav a.navlink{padding:8px 10px}}
@media (max-width:980px){
  .top{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .top img{height:30px}
  nav{order:5;flex-basis:100%;margin-left:0;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
}
/* nothing wider than the screen: grid items may shrink, wide tables scroll inside their card */
.card,.panel,.kpi{min-width:0}
@media (max-width:1200px){.grid2,.grid3,.wrap,.modal .box{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .grid4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #hlive{grid-template-columns:minmax(0,1fr)!important}
  .panel table,.card table{display:block;overflow-x:auto;max-width:100%}
  .sbgrid{grid-template-columns:minmax(0,1fr)}
  .pad{padding-left:12px;padding-right:12px}
}
@media (max-width:420px){.grid4{grid-template-columns:minmax(0,1fr)}}
#sbout .tag{white-space:normal;border-radius:8px;display:inline-block;line-height:1.35}
#sbout td:first-child{min-width:120px}
#sbout th{white-space:normal}
#sbout td:nth-child(2):not([colspan]){white-space:nowrap}
.note.lim{margin:4px 2px 0;font-size:12px;border-left:3px solid var(--warn);padding-left:8px}
.card.panel{overflow-x:auto}

/* view name and what it is for, under the header */
.vcap{display:flex;align-items:baseline;gap:10px;padding:8px 18px 0;font-size:13px;color:var(--ink2,#5f6d66)}
.vcap b{font-size:15px;color:var(--ink);font-weight:750}
.vcap:empty{display:none}
@media (max-width:760px){.vcap{padding:8px 12px 0;flex-wrap:wrap;gap:2px 8px}}
.iconbtn{white-space:nowrap}
@media (max-width:1520px){.brand span{display:none}}
@media (max-width:1400px){nav button,nav a.navlink{padding:8px 9px}.top{gap:10px}}
@media (max-width:1200px){nav button,nav a.navlink{padding:7px 7px;font-size:13.5px}}
@media (max-width:1180px){
  .top{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .top img{height:30px}
  nav{order:5;flex-basis:100%;margin-left:0;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
}