/* =====================================================================
   بصيرة — Basira · Government AI Decision Platform · Tabuk Region
   Light-first executive interface · Arabic-first · RTL-native
   ===================================================================== */
:root{
  --green-900:#022220; --green-800:#04302C; --green-700:#053C37;
  --green-600:#074C46; --green-500:#0E6058; --green-400:#1A7A70;
  --green-100:#D3E8E4; --green-50:#EAF4F2;
  --gold-600:#8A6D1F; --gold-500:#B08D2E; --gold-400:#C9A83F; --gold-100:#F3EAD1;
  --ai-700:#7A5E19; --ai-600:#8A6D1F; --ai-500:#B08D2E; --ai-100:#F1E7C8; --ai-50:#FAF6EA;
  --page:#F3F6F5; --surface:#FFFFFF; --surface-2:#F7FAF9;
  --deep:#022220; --deep-2:#07352F; --deep-3:#0B4A42;
  --line:#E2E8E6; --line-2:#CFDAD7; --line-deep:rgba(255,255,255,.10);
  --ink:#0F1D1C; --ink-2:#42544F; --ink-3:#748480;
  --ink-inv:#F0F7F6; --ink-inv-2:#A2BDB8; --ink-inv-3:#6B8B85;
  --good:#0ca30c; --good-text:#006300; --good-bg:#E7F6E7;
  --warning:#fab219; --warning-text:#7A5200; --warning-bg:#FDF3DC;
  --serious:#ec835a; --serious-text:#9C3E1B; --serious-bg:#FDEAE2;
  --critical:#d03b3b; --critical-text:#A82626; --critical-bg:#FBE6E6;
  --info:#2a78d6; --info-text:#1c5cab; --info-bg:#E7F0FB;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s8:#e34948;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:999px;
  --sh-1:0 1px 2px rgba(15,29,28,.05);
  --sh-2:0 3px 10px rgba(15,29,28,.08);
  --sh-3:0 10px 32px rgba(15,29,28,.14);
  --sh-deep:0 18px 50px rgba(2,34,32,.38);
  --sidebar-w:248px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* clip, not hidden: `hidden` turns body into a scroll container, which both
   hides real overflow bugs and can break position:sticky on header.top.
   html must stay `visible` in BOTH axes — body overflow only propagates to
   the viewport when the root is fully visible, and the nav-open/chat-open
   scroll locks below depend on that propagation. The `hidden` line before
   `clip` is the fallback for engines without overflow:clip. */
html{scroll-behavior:smooth}
body{
  font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--page); color:var(--ink); line-height:1.65; font-size:14px;
  overflow-x:hidden;
  overflow-x:clip;
}
button{font-family:inherit}
::selection{background:var(--green-100)}
.num{font-variant-numeric:tabular-nums}

/* ================= Layout ================= */
.app{display:flex;min-height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.content{padding:22px 26px 60px;display:flex;flex-direction:column;gap:22px;max-width:1560px;width:100%;margin:0 auto}

/* ================= Header ================= */
header.top{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;
  padding:10px 26px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand-h{display:flex;align-items:center;gap:11px}
.brand-h .words{display:flex;flex-direction:column;line-height:1.2}
.brand-h .name{font-size:20px;font-weight:700;color:var(--green-700);letter-spacing:.2px}
.brand-h .loc{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-3);font-weight:500;margin-top:1px}
.brand-h .loc svg{color:var(--gold-600);flex:0 0 auto}
.hd-search{position:relative;flex:1;max-width:430px;margin:0 8px}
.hd-search input{
  width:100%;padding:9px 38px 9px 14px;border-radius:var(--r-full);border:1px solid var(--line-2);
  background:var(--surface-2);font-family:inherit;font-size:12.5px;outline:none;transition:border .15s,box-shadow .15s;
}
.hd-search input:focus{border-color:var(--green-500);box-shadow:0 0 0 3px rgba(14,96,88,.13);background:#fff}
/* RTL: inline-start == right, so this is the same 13px it always was. */
.hd-search svg{position:absolute;inset-inline-start:13px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
/* Header nav tabs (shared site-header component) */
.hd-nav{display:flex;align-items:center;gap:24px;margin-inline-start:20px}
.hd-nav a{
  font-size:12.6px;font-weight:600;color:var(--ink-2);text-decoration:none;
  padding:6px 2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;
}
.hd-nav a:hover{color:var(--green-700);border-bottom-color:var(--gold-500)}
.hd-nav a.on{color:var(--green-700);border-bottom-color:var(--gold-500)}
/* The full header (brand + nav + clock + notif + profile) needs ~1060px —
   below that the Arabic links wrap and break the bar, so hide the nav and
   replace it with the burger + off-canvas drawer below. */
@media(max-width:1100px){.hd-nav{display:none}}

/* ================= Mobile nav: burger + off-canvas drawer ================= */
.hd-burger{display:none}
@media(max-width:1100px){
  .hd-burger{
    display:grid;place-content:center;justify-items:center;gap:4px;
    width:44px;height:44px;flex:0 0 auto;order:-1;padding:0;cursor:pointer;
    border:1px solid var(--line-2);background:var(--surface);border-radius:10px;
  }
  .hd-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink-2);transition:transform .22s ease,opacity .16s ease}
  .hd-burger:hover{border-color:var(--green-400)}
  .hd-burger:hover span{background:var(--green-700)}
  /* bar pitch is 2px bar + 4px gap = 6px, so ±6px meets in the middle as an ✕ */
  .hd-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .hd-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hd-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
.hd-scrim{
  position:fixed;inset:0;z-index:98;background:rgba(2,34,32,.45);
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
.hd-scrim.open{opacity:1;pointer-events:auto}
.hd-drawer{
  position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:99;
  width:min(84vw,300px);background:var(--surface);box-shadow:var(--sh-3);
  overflow-y:auto;overscroll-behavior:contain;
  /* RTL: inset-inline-start resolves to right:0, and transforms are never
     flipped by `direction`, so +100% (rightwards) is what parks it off-screen. */
  transform:translateX(100%);visibility:hidden;
  transition:transform .26s cubic-bezier(.2,.8,.3,1),visibility .26s;
  padding-top:env(safe-area-inset-top,0px);
}
.hd-drawer.open{transform:none;visibility:visible}
.hd-drawer-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.hd-drawer-t{font-size:14px;font-weight:700;color:var(--green-700)}
.hd-drawer-x{
  width:40px;height:40px;flex:0 0 auto;border-radius:10px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  font-size:15px;line-height:1;transition:all .15s;
}
.hd-drawer-x:hover{border-color:var(--green-400);color:var(--green-700);background:var(--green-50)}
.hd-drawer a{
  display:flex;align-items:center;min-height:48px;padding:0 16px;
  font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--line);border-inline-start:3px solid transparent;transition:all .15s;
}
.hd-drawer a:hover{background:var(--surface-2);color:var(--green-700)}
.hd-drawer a.on{background:var(--green-50);color:var(--green-700);border-inline-start-color:var(--gold-500)}
body.nav-open{overflow:hidden}
/* the FAB lives at z-index 120 and would otherwise float above the scrim */
body.nav-open .fab{opacity:0;pointer-events:none}
@media(min-width:1101px){.hd-drawer,.hd-scrim{display:none}}

.hd-right{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.dt{display:flex;flex-direction:column;align-items:flex-end;line-height:1.35;padding-left:6px}
.dt .time{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}
.dt .date{font-size:10.5px;color:var(--ink-3)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ai-500);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(176,141,46,.5)}70%{box-shadow:0 0 0 8px rgba(176,141,46,0)}100%{box-shadow:0 0 0 0 rgba(176,141,46,0)}}
.icon-btn{
  position:relative;width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--surface);cursor:pointer;display:grid;place-items:center;color:var(--ink-2);transition:all .15s;
}
.icon-btn:hover{border-color:var(--green-400);color:var(--green-700);background:var(--green-50)}
.icon-btn .dot{position:absolute;top:7px;inset-inline-end:9px;width:8px;height:8px;border-radius:50%;background:var(--critical);border:2px solid #fff}
.profile{display:flex;align-items:center;gap:10px;padding:4px 6px 4px 12px;border-radius:var(--r-full);border:1px solid var(--line-2);background:var(--surface);cursor:pointer;transition:border .15s}
.profile:hover{border-color:var(--green-400)}
.profile .av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:2px solid var(--green-100)}
.profile .av img{width:100%;height:100%;object-fit:cover;display:block}
.profile .who{line-height:1.25;text-align:right}
.profile .who .n{font-size:12px;font-weight:600}
.profile .who .r{font-size:10px;color:var(--ink-3)}

/* Notifications dropdown */
.notif-wrap{position:relative}
/* inset-inline-end:0 == the old left:0 in RTL, but the width now shrinks with the
   viewport instead of overflowing it, and the list scrolls instead of running
   off the bottom of the screen. */
.dropdown{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;
  width:min(340px,calc(100vw - 28px));max-height:min(70dvh,440px);
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);z-index:90;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:all .18s ease;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
}
.dropdown.open{opacity:1;transform:translateY(0);pointer-events:auto}
.dropdown .dd-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700}
.dropdown .dd-h span{font-size:10.5px;color:var(--green-600);cursor:pointer;font-weight:600}
.dd-item{display:flex;gap:11px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:12px;cursor:pointer;transition:background .12s}
.dd-item:hover{background:var(--surface-2)}
.dd-item:last-child{border-bottom:none}
.dd-item .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;font-size:13px}
.dd-item b{display:block;font-size:12.5px}
.dd-item .tm{font-size:10px;color:var(--ink-3);margin-top:2px}

/* ================= Section headers ================= */
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sec-h h2{font-size:17px;font-weight:700;display:flex;align-items:center;gap:10px}
.sec-h h2 .mark{width:8px;height:22px;border-radius:4px;background:linear-gradient(180deg,var(--green-500),var(--green-700))}
.sec-h .hint{font-size:11.5px;color:var(--ink-3)}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font-size:11.5px;font-weight:600;padding:6px 14px;border-radius:var(--r-full);cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);transition:all .15s;
}
.chip:hover{border-color:var(--green-400);color:var(--green-700)}
.chip.on{background:var(--green-600);border-color:var(--green-600);color:#fff}

/* ================= AI Executive Brief ================= */
.brief{
  border-radius:var(--r-xl);color:var(--ink-inv);position:relative;overflow:hidden;
  background:
    radial-gradient(820px 340px at 10% -25%, rgba(26,122,112,.28), transparent 55%),
    radial-gradient(900px 400px at 94% 135%, rgba(201,168,63,.20), transparent 55%),
    linear-gradient(150deg,#021B19 0%,#084038 52%,#021B19 100%);
  box-shadow:var(--sh-deep);
}
.brief .pat{position:absolute;inset:0;opacity:.05;pointer-events:none}
.brief-in{position:relative;padding:26px 30px;display:grid;grid-template-columns:1.55fr 1fr;gap:30px}
.brief-tag{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:#EAD9A0;background:rgba(176,141,46,.22);border:1px solid rgba(201,168,63,.4);padding:5px 14px;border-radius:var(--r-full)}
.brief h2{font-size:21px;font-weight:700;margin:14px 0 10px;color:#fff}
.brief p.txt{font-size:14px;line-height:1.95;color:#D5E4DC;max-width:640px}
.brief p.txt b{color:#fff;font-weight:600}
.brief .hl{background:linear-gradient(transparent 52%, rgba(201,168,63,.42) 48%);color:#FFE3A3;font-weight:700;padding:0 4px;border-radius:4px}
.brief .meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:11px;color:var(--ink-inv-2)}
.brief .meta span{display:flex;align-items:center;gap:6px}
.brief .cta-row{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.btn{
  font-size:13px;font-weight:600;border:none;cursor:pointer;padding:10px 22px;border-radius:var(--r-md);
  display:inline-flex;align-items:center;gap:8px;transition:all .18s ease;
}
.btn-gold{background:var(--gold-500);color:#fff}
.btn-gold:hover{background:var(--gold-600)}
.btn-glass{background:rgba(255,255,255,.08);color:#E7F1EB;border:1px solid rgba(255,255,255,.18)}
.btn-glass:hover{background:rgba(255,255,255,.14)}
.brief-side{display:flex;flex-direction:column;gap:10px;justify-content:center}
.b-stat{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:var(--r-md);padding:12px 16px;
  backdrop-filter:blur(3px);
}
.b-stat .l{font-size:12.5px;color:#CBE0DD;font-weight:500}
.b-stat .v{font-size:19px;font-weight:700;color:#fff;direction:ltr}
/* .v is direction:ltr, so inline-start = left: the 4px sits between number and unit */
.b-stat .v small{font-size:10.5px;font-weight:600;margin-inline-start:4px}
.up{color:#5FD08A}.down{color:#F09A9A}.flat{color:#D8C687}

/* ================= KPI cards ================= */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px 12px;
  box-shadow:var(--sh-1);transition:box-shadow .2s,transform .2s,border-color .2s;position:relative;cursor:default;
}
.kpi:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--line-2)}
.kpi .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.kpi .label{font-size:12px;color:var(--ink-2);font-weight:500}
.kpi .value{font-size:27px;font-weight:700;margin-top:3px;line-height:1.2}
.kpi .value small{font-size:14px;font-weight:600;color:var(--ink-3)}
.kpi .delta{font-size:11.5px;font-weight:600;margin-top:2px;display:flex;align-items:center;gap:5px}
.kpi .delta .vs{color:var(--ink-3);font-weight:400}
.d-good{color:var(--good-text)}.d-bad{color:var(--critical-text)}.d-warn{color:var(--warning-text)}.d-flat{color:var(--ink-3)}
.kpi .spark{margin-top:6px;height:36px}
.kpi .ai-note{
  margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-2);font-size:10.8px;color:var(--ai-700);
  display:flex;gap:6px;align-items:flex-start;line-height:1.55;
}
.kpi .ai-note .s{flex:0 0 auto}
.sbadge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:2px 9px;border-radius:var(--r-full);white-space:nowrap}
.sbadge .d{width:6px;height:6px;border-radius:50%}
.sb-good{background:var(--good-bg);color:var(--good-text)}.sb-good .d{background:var(--good)}
.sb-warn{background:var(--warning-bg);color:var(--warning-text)}.sb-warn .d{background:var(--warning)}
.sb-serious{background:var(--serious-bg);color:var(--serious-text)}.sb-serious .d{background:var(--serious)}
.sb-critical{background:var(--critical-bg);color:var(--critical-text)}.sb-critical .d{background:var(--critical)}
.sb-info{background:var(--info-bg);color:var(--info-text)}.sb-info .d{background:var(--info)}
.sb-ai-b{background:var(--ai-100);color:var(--ai-700)}.sb-ai-b .d{background:var(--ai-600)}

/* ================= Cards & charts grid ================= */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:18px 20px;min-width:0;
}
.card .c-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:4px}
.card .c-h h3{font-size:14.5px;font-weight:700}
.card .c-h .sub{font-size:11px;color:var(--ink-3);margin-top:1px}
.card .c-h .tools{display:flex;gap:6px;align-items:center}
.mini-tabs{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-full);padding:3px;gap:2px}
.mini-tabs button{
  border:none;background:transparent;font-size:11px;font-weight:600;color:var(--ink-3);
  padding:4px 12px;border-radius:var(--r-full);cursor:pointer;transition:all .15s;
}
.mini-tabs button.on{background:var(--green-600);color:#fff;box-shadow:var(--sh-1)}
.grid-2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.grid-2b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.chart-box{position:relative;height:265px;margin-top:10px}
.chart-box canvas,.spark canvas{max-width:100%}
.chart-box.tall{height:300px}
/* reusable height modifiers so markup never needs inline style="height:…" */
.chart-box.chart-sm{height:196px}
.chart-box.chart-md{height:210px}
.legend-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--ink-2)}
.legend-row .li{display:flex;align-items:center;gap:6px}
.legend-row .sw{width:10px;height:10px;border-radius:3px}
.foot-note{margin-top:10px;font-size:10.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px}

/* project split list */
.split{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.split .row{display:flex;align-items:center;gap:10px;font-size:12px}
.split .row .l{width:86px;color:var(--ink-2);flex:0 0 auto}
.split .bar{flex:1;height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden;display:flex}
.split .bar i{border-radius:5px}
.split .row .v{width:34px;text-align:left;font-weight:600;font-variant-numeric:tabular-nums;direction:ltr}

/* ================= Risk section ================= */
.risk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:16px}
.risk-counts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rc{
  border-radius:var(--r-md);padding:13px 16px;border:1px solid var(--line);background:var(--surface-2);
  display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden;
}
.rc::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px}
.rc.c-crit::before{background:var(--critical)}.rc.c-high::before{background:var(--serious)}
.rc.c-med::before{background:var(--warning)}.rc.c-low::before{background:var(--good)}
.rc .n{font-size:24px;font-weight:700}
.rc .l{font-size:11.5px;color:var(--ink-2)}
.rc .t{font-size:10px;font-weight:600}
.risk-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.risk-item{
  border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;display:grid;
  grid-template-columns:auto 1fr auto;gap:12px;align-items:center;transition:border-color .15s, background .15s;cursor:pointer;
}
.risk-item:hover{border-color:var(--line-2);background:var(--surface-2)}
.risk-item .sev{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:15px}
.risk-item b{font-size:12.5px;display:block}
.risk-item .meta{font-size:10.5px;color:var(--ink-3);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}
.prob{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:110px}
.prob .pl{font-size:10px;color:var(--ink-3)}
.meter{width:110px;height:7px;border-radius:4px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.meter i{display:block;height:100%;border-radius:4px}

/* ================= Map ================= */
.map-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
.map-stage{position:relative;margin-top:8px;border-radius:var(--r-md);overflow:hidden;
  background:
   radial-gradient(500px 300px at 20% 15%, rgba(26,122,112,.10), transparent 60%),
   linear-gradient(160deg,#F0F5F1,#E6EEE8);
  border:1px solid var(--line);
}
.map-stage svg{display:block;width:100%;height:auto;max-height:640px;margin:0 auto}
.gov-node{cursor:pointer}
.gov-node circle.halo{transition:r .2s, opacity .2s}
.gov-node:hover circle.halo{opacity:.35}
.gov-node.sel circle.core{stroke:#fff;stroke-width:1.1}
.gov-label{font-size:6.2px;font-weight:600;fill:#2C3B38;pointer-events:none;font-family:'IBM Plex Sans Arabic',sans-serif;paint-order:stroke;stroke:rgba(255,255,255,.75);stroke-width:2px;stroke-linejoin:round}
/* SVG geography labels — sized in viewBox units (268 wide), bumped per breakpoint below */
.map-geo{font-size:5.5px}
.map-geo-sea{font-size:7px}
.map-geo-sm{font-size:4.6px}
.map-tip{
  position:absolute;pointer-events:none;background:var(--deep);color:#fff;border-radius:10px;
  padding:8px 12px;font-size:11px;opacity:0;transition:opacity .15s;box-shadow:var(--sh-3);z-index:5;
  white-space:normal;max-width:min(220px,80%);line-height:1.5;
}
.map-tip b{display:block;font-size:12px;margin-bottom:1px}
.map-side{display:flex;flex-direction:column}
.map-side .gov-head{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.map-side .gov-head h4{font-size:16px;font-weight:700}
.map-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.ms{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;background:var(--surface-2)}
.ms .l{font-size:10.5px;color:var(--ink-3)}
.ms .v{font-size:18px;font-weight:700;margin-top:1px}
.ms .d{font-size:10px;font-weight:600}
.map-ai{
  margin-top:12px;border-radius:var(--r-md);border:1px solid #E7DCB6;background:var(--ai-50);
  padding:12px 14px;font-size:12px;color:var(--ai-700);line-height:1.7;
}
.map-ai b{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:12px}

/* ================= Agents ================= */
.flow{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:11.5px;font-weight:600;color:var(--ink-2);background:var(--surface-2);
  border:1px dashed var(--line-2);border-radius:var(--r-full);padding:9px 20px;margin-top:12px;
}
.flow .stp{display:flex;align-items:center;gap:7px}
.flow .stp .dd{width:8px;height:8px;border-radius:50%}
.flow .arr{color:var(--ink-3);font-size:13px}
.agents{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
.agent{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;background:var(--surface);
  transition:all .2s;position:relative;overflow:hidden;
}
.agent:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:#DFD2A4}
.agent .a-top{display:flex;align-items:center;gap:10px}
.agent .a-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--ai-50);border:1px solid var(--ai-100);color:var(--ai-700);font-size:16px}
.agent b{font-size:13px}
.agent .a-st{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--good-text);font-weight:600;margin-top:1px}
.agent .a-st .d{width:6px;height:6px;border-radius:50%;background:var(--good);animation:pulse 2.6s infinite}
.agent .a-num{margin-top:10px;display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-3)}
.agent .a-num b{font-size:14px;color:var(--ink);display:block;font-variant-numeric:tabular-nums;direction:ltr;text-align:right}
.agent .a-insight{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-2);font-size:10.8px;color:var(--ink-2);line-height:1.55;display:flex;gap:6px}
.agent .a-insight .s{color:var(--ai-600)}
.agent .a-alert{position:absolute;top:12px;inset-inline-end:12px}

/* ================= Alerts & events ================= */
.alerts-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
.alert-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.al{
  display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;transition:all .15s;cursor:pointer;
}
.al:hover{background:var(--surface-2);border-color:var(--line-2)}
.al .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:14px;flex:0 0 auto}
.al b{font-size:12.8px;display:block}
.al p{font-size:11.5px;color:var(--ink-2);margin-top:2px;line-height:1.6}
.al .tm{font-size:10px;color:var(--ink-3);white-space:nowrap;text-align:end}
.al .actions{display:flex;gap:8px;margin-top:8px}
.al .actions button{
  font-size:10.5px;font-weight:600;padding:4px 12px;border-radius:var(--r-full);cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);transition:all .15s;
}
.al .actions button:hover{border-color:var(--green-400);color:var(--green-700)}
.al .actions button.pr{background:var(--green-600);border-color:var(--green-600);color:#fff}
.i-crit{background:var(--critical-bg);color:var(--critical-text)}
.i-serious{background:var(--serious-bg);color:var(--serious-text)}
.i-warn{background:var(--warning-bg);color:var(--warning-text)}
.i-info{background:var(--info-bg);color:var(--info-text)}
.i-ai{background:var(--ai-100);color:var(--ai-700)}
.i-good{background:var(--good-bg);color:var(--good-text)}

/* insight stack (data->insight->prediction->recommendation) */
.insight-stack{display:flex;flex-direction:column;gap:0;margin-top:12px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.ins{padding:12px 16px;font-size:12.5px;line-height:1.7;border-bottom:1px solid var(--line);background:var(--surface)}
.ins:last-child{border-bottom:none}
.ins .k{font-size:10px;font-weight:700;letter-spacing:.4px;display:inline-flex;padding:1px 10px;border-radius:var(--r-full);margin-bottom:5px}
.ins.d .k{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-2)}
.ins.i .k{background:var(--info-bg);color:var(--info-text)}
.ins.p .k{background:var(--ai-100);color:var(--ai-700)}
.ins.a{background:#F2F8F4;border-inline-start:3px solid var(--green-600)}
.ins.a .k{background:var(--green-100);color:var(--green-700)}
.ins p{color:var(--ink-2)}
.ins .act-btn{margin-top:8px;font-size:11px;font-weight:600;background:var(--green-600);color:#fff;border:none;padding:6px 16px;border-radius:var(--r-full);cursor:pointer}
.ins .act-btn:hover{background:var(--green-700)}

/* ================= Chatbot ================= */
/* RTL: inline-end == left, so the FAB stays exactly where it has always been. */
.fab{
  position:fixed;bottom:26px;inset-inline-end:26px;z-index:120;width:58px;height:58px;border-radius:50%;
  border:none;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,#053C37,#022220 70%);
  box-shadow:0 10px 30px rgba(2,34,32,.45), inset 0 0 0 1.5px rgba(201,168,63,.45);
  transition:transform .2s, box-shadow .2s;
}
.fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 38px rgba(2,34,32,.55)}
.fab .ring{position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(176,141,46,.4);animation:ringp 3s infinite}
@keyframes ringp{0%{transform:scale(.9);opacity:.8}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
/* dvh, not vh: 100vh is the *large* iOS viewport, which pushed the panel header —
   and its only ✕ — behind the Safari toolbar, leaving the chat undismissable. */
.chatpanel{
  position:fixed;bottom:98px;inset-inline-end:26px;z-index:120;width:408px;max-width:calc(100vw - 40px);
  height:min(600px, calc(100dvh - 130px));max-height:calc(100dvh - 130px);background:var(--surface);border-radius:var(--r-xl);
  border:1px solid var(--line);box-shadow:0 24px 70px rgba(15,29,28,.28);display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;transition:all .22s cubic-bezier(.2,.8,.3,1);
}
/* engines without dvh: subtract a larger constant so the toolbar can't eat the header */
@supports not (height:100dvh){
  .chatpanel{height:min(600px, calc(100vh - 190px));max-height:calc(100vh - 190px)}
}
.chatpanel.open{opacity:1;transform:none;pointer-events:auto}
.cp-h{
  padding:14px 18px;display:flex;align-items:center;gap:12px;color:#fff;
  background:linear-gradient(140deg,#07352F, #022220 70%);border-bottom:1px solid rgba(255,255,255,.08);
}
.cp-h .lg{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,#0B4A42,#022220);display:grid;place-items:center;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(201,168,63,.4)}
.cp-h b{font-size:14px;display:block}
.cp-h .st{font-size:10.5px;color:#9FBFAF;display:flex;align-items:center;gap:6px}
.cp-h .st .d{width:6px;height:6px;border-radius:50%;background:var(--good)}
.cp-h .x{margin-inline-start:auto;background:rgba(255,255,255,.08);border:none;color:#fff;width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:13px}
.cp-h .x:hover{background:rgba(255,255,255,.16)}
.cp-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;background:var(--surface-2);scrollbar-width:thin;overscroll-behavior:contain}
.msg{max-width:88%;display:flex;flex-direction:column;gap:4px}
.msg.user{align-self:flex-start;align-items:flex-start}
.msg.bot{align-self:flex-end;align-items:flex-end;max-width:94%}
.msg .bubble{padding:10px 14px;border-radius:14px;font-size:12.5px;line-height:1.75}
.msg.user .bubble{background:var(--green-600);color:#fff;border-radius:14px 14px 14px 4px}
.msg.bot .bubble{background:var(--surface);border:1px solid var(--line);border-radius:14px 14px 4px 14px;box-shadow:var(--sh-1);width:100%}
.msg .who{font-size:9.5px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.bot-kpis{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.bk{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:6px 11px;min-width:86px}
.bk .l{font-size:9.5px;color:var(--ink-3)}
.bk .v{font-size:14px;font-weight:700;direction:ltr;text-align:right}
.bk .d{font-size:9.5px;font-weight:600}
.bot-bars{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.bb{display:flex;align-items:center;gap:8px;font-size:10.5px}
.bb .l{width:52px;color:var(--ink-2);flex:0 0 auto}
.bb .track{flex:1;height:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.bb .track i{display:block;height:100%;border-radius:4px;background:var(--s1)}
.bb .v{width:36px;font-weight:600;font-variant-numeric:tabular-nums;direction:ltr;text-align:right;flex:0 0 auto}
.bot-block{margin-top:10px;border-radius:10px;padding:9px 12px;font-size:11.5px;line-height:1.7}
.bot-reco{background:#F2F8F4;border:1px solid #CFE5D8;border-inline-start:3px solid var(--green-600);color:var(--ink-2)}
.bot-reco b{color:var(--green-700);display:flex;gap:6px;align-items:center;font-size:11.5px;margin-bottom:3px}
.bot-why{background:var(--ai-50);border:1px solid #E7DCB6;color:var(--ai-700)}
.bot-why b{display:flex;gap:6px;align-items:center;font-size:11px;margin-bottom:3px}
.bot-src{margin-top:9px;display:flex;gap:6px;flex-wrap:wrap}
.bot-src span{font-size:9.5px;color:var(--ink-3);border:1px solid var(--line);background:var(--surface);padding:2px 9px;border-radius:var(--r-full)}
.typing{display:flex;gap:4px;padding:12px 16px;align-self:flex-end;background:var(--surface);border:1px solid var(--line);border-radius:14px 14px 4px 14px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ai-500);animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes tp{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.cp-quick{padding:10px 14px 4px;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;background:var(--surface-2)}
.cp-quick button{
  flex:0 0 auto;font-size:10.5px;font-weight:600;color:var(--ai-700);background:var(--ai-50);
  border:1px solid #E7DCB6;border-radius:var(--r-full);padding:6px 13px;cursor:pointer;transition:all .15s;
}
.cp-quick button:hover{background:var(--ai-100)}
.cp-input{display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--line);background:var(--surface);align-items:flex-end}
.cp-input textarea{
  flex:1;min-width:0;height:42px;min-height:42px;max-height:86px;border:1px solid var(--line-2);border-radius:20px;padding:10px 16px;font-family:inherit;
  font-size:12.5px;line-height:1.45;outline:none;resize:none;overflow-y:hidden;box-sizing:border-box;transition:border .15s, box-shadow .15s;
}
.cp-input textarea:focus{border-color:var(--ai-500);box-shadow:0 0 0 3px rgba(176,141,46,.14)}
.cp-input button{
  width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;color:#fff;flex:0 0 auto;
  background:linear-gradient(135deg,#B08D2E,#7A5E19);display:grid;place-items:center;transition:filter .15s;
}
.cp-input button:hover{filter:brightness(1.15)}

/* ================= Footer ================= */
.pg-foot{
  padding:18px 26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:12px;flex-wrap:wrap;font-size:11px;color:var(--ink-3);
}

/* ================= Toast ================= */
.toast{
  position:fixed;bottom:26px;right:26px;z-index:130;background:var(--deep);color:#fff;border-radius:var(--r-md);
  padding:12px 18px;font-size:12.5px;box-shadow:var(--sh-3);display:flex;gap:10px;align-items:center;
  opacity:0;transform:translateY(10px);transition:all .25s;pointer-events:none;max-width:340px;
}
.toast.show{opacity:1;transform:none}
.toast .d{width:8px;height:8px;border-radius:50%;background:var(--good);flex:0 0 auto}

/* ================= Responsive ================= */
@media(max-width:1280px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agents{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brief-in{grid-template-columns:1fr;gap:20px}
}
@media(max-width:1080px){
  .grid-2,.grid-2b,.grid-3,.risk-grid,.map-grid,.alerts-grid{grid-template-columns:1fr}
  .hd-search{display:none}
}
/* Tablet band (641–1080). Everything above is already one column, so the
   four-up counter strips still fit and the map can breathe. */
@media(max-width:1080px) and (min-width:641px){
  .risk-counts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .map-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .chart-box{height:300px}
  .map-stage svg{max-height:520px}
}
@media(max-width:900px){
  .dt{display:none}
  .brand-h .name{font-size:17px}
  /* .chart-box height here would shadow the tablet band's 300px — the
     641–900 range keeps the tablet height; phones get 210px at 640. */
  .gov-label{font-size:6.8px}
  .map-geo{font-size:6px}
  .map-geo-sea{font-size:7.6px}
  .map-geo-sm{font-size:5px}
}
@media(max-width:640px){
  /* ---- density & chrome ---- */
  .content{gap:18px;padding:16px 14px calc(96px + env(safe-area-inset-bottom,0px))}
  .card{padding:14px 12px;border-radius:var(--r-md)}
  .grid-2,.grid-2b,.grid-3{gap:12px}
  .kpis{grid-template-columns:1fr}
  .agents{grid-template-columns:1fr}
  header.top{padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top,0px));gap:10px}
  .brand-h svg{width:34px;height:34px}
  .brand-h .name{font-size:16px}
  .profile .who{display:none}
  .ai-status span.txt{display:none}
  .brief-in{padding:20px}
  .brief h2{font-size:17px}
  /* the tag wraps to 3 lines inside a 999px capsule — square it off */
  .brief-tag{border-radius:var(--r-md)}
  .btn{width:100%;justify-content:center;min-height:44px}
  .pg-foot{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 14px calc(18px + env(safe-area-inset-bottom,0px))}

  /* ---- notifications: fixed so a 360px viewport can't clip it. 8px + 44px
     control + 8px + 1px border ≈ 61px of mobile header to clear. ---- */
  .dropdown{
    position:fixed;top:calc(61px + env(safe-area-inset-top,0px));
    inset-inline:12px;width:auto;max-height:min(70dvh,440px);
  }

  /* ---- grids that must not collapse to a 120px text column ---- */
  .risk-item{grid-template-columns:auto 1fr;gap:10px}
  .risk-item>div:nth-child(2){min-width:0}
  .risk-item .prob{
    grid-column:1/-1;flex-direction:row;align-items:center;gap:10px;
    padding-top:9px;border-top:1px dashed var(--line-2);
  }
  .al{grid-template-columns:auto 1fr;gap:10px}
  .al>div:nth-child(2){min-width:0}
  .al .tm{grid-column:1/-1;text-align:end;white-space:normal}
  .al .actions{flex-wrap:wrap}
  .al .actions button{min-height:40px}

  /* ---- fixed pixel widths that strangle a 390px row ---- */
  .prob{min-width:0}
  .meter{width:auto;flex:1;min-width:80px;height:8px}
  .split .row .l{width:auto;flex:0 0 40%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .split .row .v{width:38px}
  .bb .l{width:auto;flex:0 0 34%}

  /* ---- charts ---- */
  .chart-box{height:210px}
  .chart-box.chart-sm{height:190px}
  .chart-box.chart-md{height:200px}

  /* ---- card header stacks; mini tabs scroll instead of overflowing the
     card (shared with /classic, which loads only this stylesheet) ---- */
  .card .c-h{flex-direction:column;align-items:flex-start}
  .card .c-h .sub{font-size:11.5px}
  .card .c-h .tools{flex-wrap:wrap}
  .mini-tabs{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
  .mini-tabs::-webkit-scrollbar{display:none}
  .mini-tabs button{flex:0 0 auto;white-space:nowrap;min-height:40px}

  /* ---- map text: viewBox is 268 units wide and renders ~306px here, so
     9.6 units lands at ~11 device px ---- */
  .gov-label{font-size:9.6px}
  .map-geo{font-size:8.4px}
  .map-geo-sea{font-size:10.4px}
  .map-geo-sm{font-size:7.2px}

  /* ---- chat: full-screen sheet (the old override forgot the base max-width,
     which left the panel visibly off-centre) ---- */
  .chatpanel{inset:0;width:auto;max-width:none;height:auto;max-height:none;border-radius:0}
  .cp-h{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  /* --kb = soft-keyboard overlap measured by ai-chat.js (0 where absent) */
  .cp-input{padding-bottom:calc(12px + max(var(--kb,0px), env(safe-area-inset-bottom,0px)))}
  /* < 16px makes iOS Safari force-zoom on focus and never zoom back */
  .cp-input textarea{font-size:16px}
  .hd-search input{font-size:16px}
  body.chat-open{overflow:hidden}
  .fab{inset-inline-end:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:52px;height:52px}
  /* clears both the FAB and the report page's fixed composer */
  .toast{inset-inline:12px;max-width:none;bottom:calc(96px + env(safe-area-inset-bottom,0px))}

  /* ---- legibility: nothing below 11px on a phone ---- */
  .sbadge{font-size:11px}
  .kpi .ai-note{font-size:11.5px}
  .risk-item .meta{font-size:11px}
  .prob .pl{font-size:11px}
  .agent .a-st{font-size:11px}
  .agent .a-num{font-size:11px}
  .agent .a-insight{font-size:11.5px}
  .al .tm{font-size:11px}
  .al p{font-size:12px}
  .ins{font-size:13px}
  .ins .k{font-size:11px}
  .foot-note{font-size:11px}
  .legend-row{font-size:11.5px}
  .msg .who{font-size:11px}
  .cp-h .st{font-size:11px}
  .bk .l{font-size:11px}
  .bk .d{font-size:11px}
  .bot-src span{font-size:11px}
  .bb{font-size:11px}
  .map-ai{font-size:12.5px}
  .dd-item .tm{font-size:11px}
}

/* ================= Touch targets ================= */
@media(pointer:coarse),(max-width:768px){
  .chip{min-height:40px;padding:8px 16px;display:inline-flex;align-items:center;justify-content:center}
  .mini-tabs button{min-height:40px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center}
  .al .actions button{min-height:40px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center}
  .cp-quick button{min-height:40px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center}
  .ins .act-btn{min-height:40px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center}
  /* the only way out of a full-screen chat sheet — it was 30px */
  .cp-h .x{width:40px;height:40px;font-size:15px}
  .icon-btn{width:44px;height:44px}
  .cp-input button{width:46px;height:46px}
  .dropdown .dd-h span{min-height:40px;display:inline-flex;align-items:center}
  .profile{min-height:44px}
}