/* ============================================================================
   BAT PRISM™ Executive Intelligence Centre · Blue Apple Tree brand identity
   Palette, typography and components per the BAT house design style and
   docs/15-design-system.md. Sentinel display + Gelion UI + earthy house ramp.
   ============================================================================ */

/* ---------------------------------------------------------- typefaces ---- */
@font-face { font-family:"Sentinel"; src:url("assets/fonts/Sentinel-Book-Pro.otf") format("opentype");
             font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:"Sentinel"; src:url("assets/fonts/Sentinel-BookItalic-Pro.otf") format("opentype");
             font-weight:400; font-style:italic; font-display:swap }
@font-face { font-family:"Sentinel"; src:url("assets/fonts/Sentinel-Medium-Pro.otf") format("opentype");
             font-weight:600; font-style:normal; font-display:swap }
@font-face { font-family:"Sentinel"; src:url("assets/fonts/Sentinel-Bold-Pro.otf") format("opentype");
             font-weight:700; font-style:normal; font-display:swap }
@font-face { font-family:"Gelion"; src:url("assets/fonts/Gelion Light.ttf") format("truetype");
             font-weight:300; font-display:swap }
@font-face { font-family:"Gelion"; src:url("assets/fonts/Gelion Regular.ttf") format("truetype");
             font-weight:400; font-display:swap }
@font-face { font-family:"Gelion"; src:url("assets/fonts/Gelion Medium.ttf") format("truetype");
             font-weight:500; font-display:swap }
@font-face { font-family:"Gelion"; src:url("assets/fonts/Gelion SemiBold.ttf") format("truetype");
             font-weight:600; font-display:swap }
@font-face { font-family:"Gelion"; src:url("assets/fonts/Gelion Bold.ttf") format("truetype");
             font-weight:700; font-display:swap }

/* ---------------------------------------------------------- primitives --- */
:root{
  /* BAT house palette, ranked by coverage in the house artwork */
  --walnut:#825C4A; --slate:#676F71; --charcoal:#4C5052; --sandstone:#C4AD93;
  --ivory:#F6F7F1; --terracotta:#A47A5D; --camel:#B89472; --deepblue:#2E3941;
  --taupe:#D4C3AD; --stone:#969083; --cream:#E7D9C7; --gold:#C9A86A;
  --gold-bright:#ECA825; --tree-charcoal:#373E43; --wordmark:#706E6E;

  --deepblue-900:#1C242A; --deepblue-800:#2E3941; --deepblue-700:#3A4750;
  --deepblue-600:#4A5964; --deepblue-500:#5E6E79;
  --ivory-050:#FDFDFB; --ivory-100:#F6F7F1; --ivory-200:#EDEFE7;
  --gold-600:#A8874F; --gold-500:#C9A86A; --gold-400:#D9BE8B;
  --gold-300:#EFE7D3; --gold-200:#F5EFE2; --gold-100:#FAF6EE;
  --ink-900:#23282C; --ink-700:#33383C; --ink-500:#676F71; --ink-300:#9AA2A6;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;
  --r-sm:3px; --r-md:5px; --r-lg:8px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(46,57,65,.06); --sh-md:0 2px 10px rgba(46,57,65,.09);
  --sh-lg:0 10px 30px rgba(46,57,65,.14);
  --fast:140ms; --normal:220ms; --ease:cubic-bezier(.16,1,.3,1);
  --rail:252px; --head:60px;
  --row-h:44px; --tbl:13px; --pad:var(--space-5);
}
[data-density="compact"]{ --row-h:32px; --tbl:12px; --pad:var(--space-3) }

/* ---------------------------------------------------------- themes ------- */
[data-theme="light"]{
  --page:var(--ivory-100); --raised:#fff; --sunken:var(--ivory-200);
  --inverse:var(--deepblue-800); --accent-bg:var(--gold-100);
  --line:#DDD9CE; --line-2:#C9C4B6; --line-3:var(--stone); --focus:var(--gold-500);
  --tx:var(--ink-700); --tx-2:var(--ink-500); --tx-3:var(--ink-300);
  --tx-inv:var(--ivory-100); --tx-gold:var(--gold-600); --link:#5A6E52;
  --accent:var(--gold-500); --accent-h:var(--gold-600); --accent-soft:var(--gold-300);
  /* earthy status ramp: healthy slate → watch camel → at risk terracotta → critical walnut */
  --b-critical-f:#E9D9D2; --b-critical-l:var(--walnut);     --b-critical-t:#6B4A3C;
  --b-weak-f:#F0E3D8;     --b-weak-l:var(--terracotta);     --b-weak-t:#8A604A;
  --b-developing-f:#EFE3D2;--b-developing-l:var(--camel);   --b-developing-t:#7E5F3E;
  --b-established-f:#E4E6E3;--b-established-l:var(--slate); --b-established-t:#4E5658;
  --b-leading-f:#EDF0EC;  --b-leading-l:#5A6E52;            --b-leading-t:#44553E;
  --b-insufficient-f:#E3E4E0;--b-insufficient-l:var(--stone);--b-insufficient-t:#6E6A5E;
  /* qualitative: an instrument that is complete but not scored 0-100 */
  --b-qualitative-f:#F2EADB;--b-qualitative-l:var(--gold-500);--b-qualitative-t:#7A6231;
  --grid:rgba(46,57,65,.10);
}
[data-theme="dark"]{
  --page:var(--deepblue-900); --raised:var(--deepblue-800); --sunken:#161D22;
  --inverse:var(--ivory-100); --accent-bg:#332A1B;
  --line:#2B343A; --line-2:var(--deepblue-600); --line-3:var(--deepblue-500); --focus:var(--gold-400);
  --tx:#E8EBEA; --tx-2:#A8B2B4; --tx-3:#6E7B80;
  --tx-inv:var(--ink-700); --tx-gold:var(--gold-400); --link:#A9C1A0;
  --accent:var(--gold-500); --accent-h:var(--gold-400); --accent-soft:#3B3122;
  --b-critical-f:#3E2820; --b-critical-l:#B98A72; --b-critical-t:#DCB6A2;
  --b-weak-f:#3A2A20;     --b-weak-l:#C08F70;    --b-weak-t:#E0B79B;
  --b-developing-f:#3A2F20;--b-developing-l:#C9A276;--b-developing-t:#E5C69E;
  --b-established-f:#28302F;--b-established-l:#8B9698;--b-established-t:#B9C3C4;
  --b-leading-f:#242D26;  --b-leading-l:#88A17E;   --b-leading-t:#B4C9AC;
  --b-insufficient-f:#2A2C28;--b-insufficient-l:#9A968A;--b-insufficient-t:#C0BCB0;
  --b-qualitative-f:#332A1B;--b-qualitative-l:var(--gold-400);--b-qualitative-t:#E3CA9B;
  --grid:rgba(232,235,234,.10);
}
@media (prefers-reduced-motion:reduce){ :root{ --fast:0ms; --normal:0ms } }

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  background:var(--page); color:var(--tx);
  font-family:"Gelion",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5; font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  transition:background var(--normal) var(--ease), color var(--normal) var(--ease);
}
h1,h2,h3,h4{ margin:0; font-family:"Sentinel",Georgia,serif; font-weight:700; letter-spacing:-.005em }
h1{ font-size:27px; line-height:1.18 } h2{ font-size:20px } h3{ font-size:16px }
a{ color:var(--link) }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
input,textarea,select{ font:inherit; color:inherit }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-sm) }
.serif{ font-family:"Sentinel",Georgia,serif }
.micro{ font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-2) }
.cap{ font-size:12px; color:var(--tx-2) } .sec{ color:var(--tx-2) } .ter{ color:var(--tx-3) }
.pending{ color:var(--b-insufficient-t); font-style:italic; font-size:12.5px }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.gold-rule{ height:1px; background:var(--accent); opacity:.55; border:0; margin:var(--space-4) 0 }

/* ---------------------------------------------------------- login ------- */
#login{ position:fixed; inset:0; z-index:200; display:grid; grid-template-columns:1.1fr 1fr;
  background:var(--deepblue-800); transition:opacity var(--normal) var(--ease) }
#login.gone{ opacity:0; pointer-events:none }
#login .art{ position:relative; overflow:hidden; display:flex; flex-direction:column;
  justify-content:space-between; padding:var(--space-7) }
#login .art svg.wave{ position:absolute; inset:0; width:100%; height:100% }
#login .art .top{ position:relative; z-index:2; display:flex; align-items:center; gap:var(--space-4) }
#login .art .top img{ height:56px; filter:brightness(0) invert(1) }
#login .art .btm{ position:relative; z-index:2; max-width:520px }
#login .art .btm .kick{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400) }
#login .art .btm h1{ font-size:38px; line-height:1.14; color:#fff; margin:var(--space-3) 0 }
#login .art .btm p{ color:#B9C3C6; font-size:14px; line-height:1.65; max-width:460px }
#login .form{ background:var(--ivory-100); display:grid; place-items:center; padding:var(--space-6) }
#login .box{ width:100%; max-width:352px }
#login .box img{ height:64px; margin-bottom:var(--space-5) }
#login .box h2{ font-size:22px; color:var(--ink-900) }
#login .box .fld{ margin-top:var(--space-4) }
#login .box label{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-500); font-weight:600; margin-bottom:6px }
#login .box input{ width:100%; padding:11px 13px; border:1px solid #D3CFC3; border-radius:var(--r-md);
  background:#fff; font-size:14px }
#login .box input:focus{ border-color:var(--gold-500); outline:none; box-shadow:0 0 0 3px rgba(201,168,106,.2) }
#login .box .go{ width:100%; margin-top:var(--space-5); padding:12px; border-radius:var(--r-md);
  background:var(--deepblue-800); color:#fff; font-weight:600; font-size:14px;
  transition:background var(--fast) }
#login .box .go:hover{ background:var(--deepblue-700) }
#login .box .note{ margin-top:var(--space-4); font-size:11.5px; color:var(--ink-500); line-height:1.6 }
@media(max-width:900px){ #login{ grid-template-columns:1fr } #login .art{ display:none } }

/* ---------------------------------------------------------- shell ------- */
#shell{ display:grid; grid-template-columns:var(--rail) 1fr; min-height:100vh }
#rail{ background:var(--deepblue-800); color:#B9C3C6; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; border-right:1px solid rgba(201,168,106,.18) }
#brand{ padding:var(--space-4) var(--space-4) var(--space-3); display:flex; gap:var(--space-3);
  align-items:center; border-bottom:1px solid rgba(255,255,255,.08) }
#brand img{ height:38px; filter:brightness(0) invert(1); flex:none }
#brand .nm{ font-family:"Sentinel",Georgia,serif; font-size:15.5px; color:#fff; font-weight:700; line-height:1.1 }
#brand .sb{ font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-400); margin-top:3px }
/* Eighteen destinations have to fit a laptop rail without a hidden scroll area.
   Spacing is tightened, the scrollbar is made visible, and a sticky fade marks
   the fold when the viewport really is too short. */
nav{ padding:var(--space-3) var(--space-2) 0; flex:1; overflow-y:auto; position:relative;
  scrollbar-width:thin; scrollbar-color:rgba(201,168,106,.5) transparent }
nav::-webkit-scrollbar{ width:6px }
nav::-webkit-scrollbar-thumb{ background:rgba(201,168,106,.5); border-radius:3px }
nav .navfade{ position:sticky; bottom:0; height:20px; margin-top:-20px; pointer-events:none;
  background:linear-gradient(to top, var(--deepblue-800), transparent) }
nav .grp{ margin:8px 0 3px; padding:0 var(--space-3); font-size:9.5px;
  letter-spacing:.13em; text-transform:uppercase; color:#6E7B80 }
nav .grp:first-child{ margin-top:2px }
nav button{ width:100%; display:flex; align-items:center; gap:var(--space-3); padding:4px var(--space-3);
  border-radius:var(--r-md); color:#B9C3C6; font-size:13.5px; line-height:1.28; text-align:left;
  transition:background var(--fast), color var(--fast) }
nav button .ic{ width:17px; text-align:center; opacity:.85; flex:none; font-size:13px }
nav button:hover{ background:rgba(255,255,255,.06); color:#fff }
nav button[aria-current="page"]{ background:rgba(201,168,106,.17); color:#fff; box-shadow:inset 2px 0 0 var(--gold-500) }
nav button .badge{ margin-left:auto; background:var(--gold-500); color:var(--deepblue-900);
  border-radius:var(--r-pill); font-size:10px; font-weight:700; padding:1px 6px }
#ctx{ padding:9px var(--space-4) 10px; border-top:1px solid rgba(255,255,255,.08); font-size:12px }
#ctx .lbl{ font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:#6E7B80 }
#ctx .val{ color:#fff; font-weight:600; margin-top:3px; line-height:1.3 }
#ctx .val2{ color:#8E999C; margin-top:2px; font-size:11.5px }

#main{ min-width:0; display:flex; flex-direction:column }
#head{ height:var(--head); border-bottom:1px solid var(--line); background:var(--raised);
  display:flex; align-items:center; gap:var(--space-3); padding:0 var(--space-5); position:sticky; top:0; z-index:30 }
#head .crumb{ font-size:12px; color:var(--tx-2) }
#head .crumb b{ color:var(--tx); font-weight:600 }
#head .crumb a{ cursor:pointer; text-decoration:none; color:var(--tx-2) }
#head .crumb a:hover{ color:var(--tx-gold) }
#head .sp{ flex:1 }
#search{ position:relative }
#search input{ width:236px; padding:7px 11px 7px 30px; border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--page); font-size:12.5px }
#search .mag{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--tx-3); font-size:12px }
#sresults{ position:absolute; top:38px; left:0; width:400px; background:var(--raised); border:1px solid var(--line-2);
  border-radius:var(--r-md); box-shadow:var(--sh-lg); z-index:50; max-height:60vh; overflow:auto; display:none }
#sresults.on{ display:block }
#sresults .sr{ padding:9px var(--space-3); border-bottom:1px solid var(--line); cursor:pointer; font-size:12.5px }
#sresults .sr:hover{ background:var(--sunken) }
#sresults .sr .k{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-3) }

.tool{ border:1px solid var(--line-2); background:var(--raised); padding:6px 11px; border-radius:var(--r-md);
  font-size:12.5px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:border-color var(--fast), background var(--fast) }
.tool:hover{ border-color:var(--line-3); background:var(--sunken) }
.tool.pri{ background:var(--accent); border-color:var(--accent); color:var(--deepblue-900); font-weight:600 }
.tool.pri:hover{ background:var(--accent-h) }
.tool.dark{ background:var(--deepblue-800); border-color:var(--deepblue-800); color:#fff }
.tool.dark:hover{ background:var(--deepblue-700) }
.tool[disabled]{ opacity:.45; cursor:not-allowed }
.tool.sm{ padding:4px 8px; font-size:11.5px }

#avatar{ width:31px; height:31px; border-radius:50%; background:var(--deepblue-800); color:#fff;
  display:grid; place-items:center; font-size:11.5px; font-weight:700; border:1.5px solid var(--gold-500) }
#body{ padding:var(--space-5); flex:1; max-width:1680px; width:100% }

/* ---------------------------------------------------------- grid/cards -- */
.g{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--space-4) }
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}
@media(max-width:1300px){ .c3,.c4,.c5{grid-column:span 6} .c7,.c8,.c9{grid-column:span 12} }
@media(max-width:860px){ .g>*{ grid-column:span 12 !important } }

.card{ background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--pad); box-shadow:var(--sh-sm); min-width:0; position:relative }
.card>header{ margin:calc(var(--pad) * -1) calc(var(--pad) * -1) var(--space-4);
  padding:var(--space-3) var(--pad); border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-3);
  border-top:2px solid var(--accent); border-radius:var(--r-lg) var(--r-lg) 0 0 }
.card>header .t{ font-family:"Sentinel",Georgia,serif; font-size:15px; font-weight:700 }
.card>header .q{ font-size:11.5px; color:var(--tx-2); font-style:italic; margin-top:2px }
.card>header .hl{ min-width:0 }
.card .src{ margin-top:var(--space-3); padding-top:var(--space-2); border-top:1px solid var(--line);
  font-size:11px; color:var(--tx-3) }

/* ---------------------------------------------------------- command centre --- */
#cmd{ background:linear-gradient(135deg,var(--deepblue-800),var(--deepblue-700));
  border:1px solid rgba(201,168,106,.35); border-radius:var(--r-lg); padding:var(--space-5);
  color:#E8EBEA; position:relative; overflow:hidden; box-shadow:var(--sh-md) }
#cmd::after{ content:""; position:absolute; right:-70px; top:-70px; width:250px; height:250px;
  border-radius:50%; background:radial-gradient(circle,rgba(201,168,106,.16),transparent 68%) }
#cmd .hd{ display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); position:relative; z-index:2 }
#cmd .hd .orb{ width:34px; height:34px; border-radius:var(--r-md); flex:none;
  background:linear-gradient(135deg,var(--gold-500),var(--gold-600)); display:grid; place-items:center;
  color:var(--deepblue-900); font-weight:800; font-size:14px; font-family:"Sentinel",serif }
#cmd .hd .tt{ font-family:"Sentinel",Georgia,serif; font-size:17px; font-weight:700; color:#fff }
#cmd .hd .st{ font-size:11.5px; color:#98A5A8 }
#cmd .hd .pill{ margin-left:auto; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid rgba(201,168,106,.5); color:var(--gold-400); padding:3px 9px; border-radius:var(--r-pill) }
#cmd .inp{ position:relative; z-index:2; display:flex; gap:var(--space-2); align-items:flex-end }
#cmd textarea{ flex:1; background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md); color:#fff; padding:11px 13px; font-size:13.5px; resize:none;
  min-height:46px; max-height:150px; line-height:1.5 }
#cmd textarea::placeholder{ color:#7E8C90 }
#cmd textarea:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,168,106,.18) }
#cmd .send{ background:var(--gold-500); color:var(--deepblue-900); font-weight:700; padding:12px 18px;
  border-radius:var(--r-md); font-size:13.5px; white-space:nowrap; transition:background var(--fast) }
#cmd .send:hover{ background:var(--gold-400) }
#cmd .send[disabled]{ opacity:.5; cursor:not-allowed }
#cmd .sugg{ position:relative; z-index:2; margin-top:var(--space-4) }
#cmd .sugg .lb{ font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:#7E8C90; margin-bottom:var(--space-2) }
#cmd .sugg .sgrow{ display:flex; flex-wrap:wrap; gap:6px; background:none }
#cmd .sugg button{ font-size:12px; padding:5px 11px; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.17); color:#C4CDCF; background:rgba(255,255,255,.04);
  transition:all var(--fast) }
#cmd .sugg button:hover{ border-color:var(--gold-500); color:#fff; background:rgba(201,168,106,.15) }

#console{ margin-top:var(--space-4); position:relative; z-index:2; background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.11); border-radius:var(--r-md); padding:var(--space-3);
  max-height:250px; overflow-y:auto; display:none }
#console.on{ display:block }
#console .ln{ display:grid; grid-template-columns:16px 1fr auto; gap:var(--space-2); align-items:center;
  padding:4px 0; font-size:12.5px; animation:fadein var(--normal) var(--ease) }
#console .ln .gl{ font-size:11px }
#console .ln.done .gl{ color:#8FA57F } #console .ln.run .gl{ color:var(--gold-400) }
#console .ln.wait{ color:#6E7B80 } #console .ln.wait .gl{ color:#556067 }
#console .ln .ms{ font-size:10.5px; color:#6E7B80; font-variant-numeric:tabular-nums }
@keyframes fadein{ from{opacity:0;transform:translateY(-3px)} to{opacity:1;transform:none} }

#answer{ margin-top:var(--space-4); position:relative; z-index:2; background:rgba(246,247,241,.055);
  border:1px solid rgba(201,168,106,.3); border-left:3px solid var(--gold-500);
  border-radius:0 var(--r-md) var(--r-md) 0; padding:var(--space-4); display:none }
#answer.on{ display:block }
#answer h4{ font-family:"Sentinel",serif; color:#fff; font-size:15px; margin-bottom:var(--space-2) }
#answer p{ margin:0 0 var(--space-2); font-size:13px; line-height:1.65; color:#D5DBDC }
#answer .fx{ display:flex; gap:var(--space-2); margin-top:var(--space-3); flex-wrap:wrap }
#answer .fx button{ font-size:11.5px; padding:5px 10px; border-radius:var(--r-sm);
  border:1px solid rgba(201,168,106,.45); color:var(--gold-400) }
#answer .fx button:hover{ background:rgba(201,168,106,.16); color:#fff }
#answer ul{ margin:var(--space-2) 0; padding-left:18px; font-size:13px; color:#D5DBDC; line-height:1.7 }
#answer .kv{ display:grid; grid-template-columns:auto 1fr; gap:4px var(--space-3); font-size:12.5px;
  color:#D5DBDC; margin:var(--space-2) 0 }
#answer .kv b{ color:#fff; font-weight:600 }

/* ---------------------------------------------------------- tiles ------- */
#tiles{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--space-3) }
@media(max-width:1300px){ #tiles{ grid-template-columns:repeat(3,1fr) } }
@media(max-width:700px){ #tiles{ grid-template-columns:repeat(2,1fr) } }
.tile{ background:var(--raised); border:1px solid var(--line); border-left:3px solid var(--bl,var(--line-2));
  border-radius:var(--r-md); padding:var(--space-4); text-align:left;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) }
.tile:hover{ transform:translateY(-2px); box-shadow:var(--sh-md) }
.tile .k{ font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--tx-2) }
.tile .v{ font-size:34px; font-weight:600; line-height:1.05; margin:var(--space-2) 0 2px; letter-spacing:-.02em;
  font-family:"Sentinel",Georgia,serif }
.tile .b{ font-size:11.5px; font-weight:600; color:var(--bt,var(--tx-2)) }
.tile .m{ display:flex; align-items:center; gap:6px; margin-top:var(--space-2); font-size:11px; color:var(--tx-2) }
.tile .inv{ margin-top:4px; font-size:10px; color:var(--b-critical-t); font-weight:600 }
.tile .cd{ width:6px; height:6px; border-radius:50%; display:inline-block }

/* ---------------------------------------------------------- chips ------- */
.chip{ display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-sm); padding:2px 7px;
  font-size:11px; font-weight:600; white-space:nowrap; border:1px solid transparent }
.chip.critical{ background:var(--b-critical-f); color:var(--b-critical-t); border-color:var(--b-critical-l) }
.chip.weak{ background:var(--b-weak-f); color:var(--b-weak-t); border-color:var(--b-weak-l) }
.chip.developing{ background:var(--b-developing-f); color:var(--b-developing-t); border-color:var(--b-developing-l) }
.chip.established{ background:var(--b-established-f); color:var(--b-established-t); border-color:var(--b-established-l) }
.chip.leading{ background:var(--b-leading-f); color:var(--b-leading-t); border-color:var(--b-leading-l) }
.chip.insufficient{ background:var(--b-insufficient-f); color:var(--b-insufficient-t); border-color:var(--b-insufficient-l) }
.chip.qualitative{ background:var(--b-qualitative-f); color:var(--b-qualitative-t); border-color:var(--b-qualitative-l) }
.chip.n{ background:var(--sunken); color:var(--tx-2); border-color:var(--line-2) }
.chip.gold{ background:var(--accent-soft); color:var(--tx-gold); border-color:var(--gold-500) }

/* ---------------------------------------------------------- bars/table -- */
.bars{ display:flex; flex-direction:column; gap:var(--space-3) }
.bar{ display:grid; grid-template-columns:1fr 48px 96px; gap:var(--space-3); align-items:center;
  width:100%; text-align:left; padding:2px 0; border-radius:var(--r-sm) }
.bar:hover .lbl{ color:var(--tx-gold) }
.bar .lbl{ font-size:12.5px; min-width:0 }
.bar .lbl .n{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bar .trk{ height:8px; background:var(--sunken); border-radius:var(--r-pill); overflow:hidden; margin-top:5px }
.bar .fil{ height:100%; border-radius:var(--r-pill); transition:width var(--normal) var(--ease) }
.bar .num{ font-size:15px; font-weight:600; text-align:right; font-family:"Sentinel",serif }
.bar .rt{ display:flex; gap:4px; justify-content:flex-end }

table{ width:100%; border-collapse:collapse; font-size:var(--tbl) }
th{ text-align:left; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-2);
  font-weight:600; padding:0 var(--space-3) var(--space-2); border-bottom:1px solid var(--line-2); white-space:nowrap }
td{ padding:0 var(--space-3); height:var(--row-h); border-bottom:1px solid var(--line); vertical-align:middle }
tbody tr.clk{ cursor:pointer } tbody tr.clk:hover{ background:var(--sunken) }
td.n{ text-align:right; font-weight:600 }
.tw{ overflow-x:auto }

.rows{ display:flex; flex-direction:column; gap:var(--space-2) }
.row{ display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-3);
  background:var(--sunken); border-radius:var(--r-md); text-align:left; width:100%;
  border-left:2px solid transparent; transition:background var(--fast), border-color var(--fast) }
.row:hover{ background:var(--accent-bg); border-left-color:var(--accent) }
.row .rk{ font-size:11px; font-weight:700; color:var(--tx-3); width:18px; flex:none; padding-top:2px }
.row .rb{ min-width:0; flex:1 }
.row .rt{ font-size:13px; line-height:1.45 }
.row .rm{ font-size:11px; color:var(--tx-2); margin-top:3px; display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center }

/* ---------------------------------------------------------- people ------ */
.people{ display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:var(--space-3) }
.person{ background:var(--sunken); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--space-3); text-align:left; transition:transform var(--fast) var(--ease), box-shadow var(--fast) }
.person:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--accent) }
.person .av{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:700;
  font-size:13px; margin-bottom:var(--space-2); background:var(--deepblue-800); color:#fff;
  border:1.5px solid var(--gold-500) }
.person .av.tbd{ background:var(--sunken); color:var(--tx-3); border-color:var(--line-2); border-style:dashed }
.person .nm{ font-size:13px; font-weight:600; line-height:1.3 }
.person .ro{ font-size:11.5px; color:var(--tx-2); margin-top:2px }
.person .dp{ font-size:10.5px; color:var(--tx-3); margin-top:3px }
.person .lo{ margin-top:var(--space-2); height:4px; background:var(--page); border-radius:var(--r-pill); overflow:hidden }
.person .lo i{ display:block; height:100%; background:var(--accent) }

/* ---------------------------------------------------------- pane -------- */
#pane{ position:fixed; top:0; right:0; width:480px; max-width:94vw; height:100vh; z-index:120;
  background:var(--raised); border-left:1px solid var(--line-2); box-shadow:var(--sh-lg);
  display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform var(--normal) var(--ease); visibility:hidden }
#pane.open{ transform:translateX(0); visibility:visible }
#pane header{ padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-3);
  border-top:3px solid var(--accent) }
#pane .pb{ padding:var(--space-5); overflow-y:auto; flex:1 }
#scrim{ position:fixed; inset:0; background:rgba(28,36,42,.34); z-index:115; opacity:0;
  visibility:hidden; transition:opacity var(--normal) }
#scrim.open{ opacity:1; visibility:visible }
.x{ width:28px; height:28px; border-radius:var(--r-sm); display:grid; place-items:center;
  color:var(--tx-2); font-size:18px; flex:none }
.x:hover{ background:var(--sunken); color:var(--tx) }

.chain{ position:relative; padding-left:var(--space-5) }
.chain::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line-2) }
.link{ position:relative; margin-bottom:var(--space-4) }
.link::before{ content:""; position:absolute; left:calc(var(--space-5) * -1 + 3px); top:5px;
  width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--raised) }
.link .lv{ font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-3) }
.link .lt{ font-size:13px; margin-top:2px } .link .ld{ font-size:11.5px; color:var(--tx-2); margin-top:2px }
.link.src::before{ background:var(--b-leading-l) }

.quote{ background:var(--sunken); border-left:3px solid var(--accent); border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--space-3) var(--space-4); font-family:"Sentinel",Georgia,serif; font-style:italic;
  font-size:13px; line-height:1.65; margin:var(--space-3) 0 }
.quote mark{ background:var(--gold-300); color:var(--ink-900); padding:1px 2px; border-radius:2px; font-style:normal }
[data-theme="dark"] .quote mark{ background:var(--gold-600); color:#fff }
.beci{ display:grid; grid-template-columns:1fr 42px 34px; gap:var(--space-2); font-size:11.5px;
  align-items:center; padding:5px 0; border-bottom:1px solid var(--line) }
.beci .b2{ height:5px; background:var(--sunken); border-radius:var(--r-pill); overflow:hidden }
.beci .b2 i{ display:block; height:100%; background:var(--accent) }
.fi{ border-left:3px solid var(--line-2); padding:2px 0 2px var(--space-3); margin:var(--space-2) 0 }
.fi.interp{ border-left-color:var(--accent); background:var(--accent-bg);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:var(--space-2) var(--space-3) }
.fi .tag{ font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-3);
  display:block; margin-bottom:2px }
.fi.interp .tag{ color:var(--tx-gold) }

/* ---------------------------------------------------------- misc -------- */
.view{ display:none } .view.on{ display:block }
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:var(--space-4); flex-wrap:wrap }
.tabs button{ padding:var(--space-3) var(--space-4); font-size:13px; color:var(--tx-2);
  border-bottom:2px solid transparent; margin-bottom:-1px }
.tabs button[aria-selected="true"]{ color:var(--tx); font-weight:600; border-bottom-color:var(--accent) }
.hm{ display:grid; grid-template-columns:auto repeat(5,1fr); gap:3px; font-size:11px }
.hm .ax{ color:var(--tx-2); font-size:10px; display:grid; place-items:center; padding:0 var(--space-2) }
.hm .cl{ aspect-ratio:1.5; border-radius:var(--r-sm); display:grid; place-items:center; font-weight:700;
  font-size:13px; border:1px solid transparent; transition:transform var(--fast); cursor:pointer }
.hm .cl:hover{ transform:scale(1.06) }
.hm .cl.e{ opacity:.32; cursor:default }
.legend{ display:flex; gap:var(--space-4); flex-wrap:wrap; font-size:11px; color:var(--tx-2); margin-top:var(--space-3) }
.legend span{ display:inline-flex; align-items:center; gap:5px }
.legend i{ width:10px; height:10px; border-radius:2px; display:inline-block }
.disc{ background:var(--sunken); border:1px dashed var(--line-2); border-radius:var(--r-md);
  padding:var(--space-3); font-size:11px; color:var(--tx-2); margin-top:var(--space-3); line-height:1.55 }
.disc b{ color:var(--tx) }
.mets{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--space-3); margin:var(--space-4) 0 }
@media(max-width:900px){ .mets{ grid-template-columns:repeat(3,1fr) } }
.met{ background:var(--sunken); border-radius:var(--r-md); padding:var(--space-3); text-align:center }
.met .v{ font-size:20px; font-weight:600; font-family:"Sentinel",serif }
.met .k{ font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--tx-2); margin-top:2px }
.filters{ display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; margin-bottom:var(--space-4) }
.filters select,.filters input{ padding:6px 10px; border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--raised); font-size:12.5px }
#toast{ position:fixed; bottom:var(--space-5); left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--deepblue-800); color:#fff; padding:11px 18px; border-radius:var(--r-md);
  font-size:13px; z-index:300; opacity:0; transition:all var(--normal) var(--ease);
  box-shadow:var(--sh-lg); border-left:3px solid var(--gold-500); max-width:640px }
#toast.on{ opacity:1; transform:translateX(-50%) translateY(0) }
.empty{ padding:var(--space-6); text-align:center; color:var(--tx-2) }
.empty .t{ font-family:"Sentinel",serif; font-size:15px; color:var(--tx); margin-bottom:var(--space-2) }
.phase{ display:flex; align-items:center; gap:2px; flex-wrap:wrap }
.phase .st{ display:flex; align-items:center; gap:5px; font-size:11.5px; padding:3px 8px;
  border-radius:var(--r-pill); color:var(--tx-2); white-space:nowrap }
.phase .st .dot{ width:7px; height:7px; border-radius:50%; background:var(--line-2) }
.phase .st.done .dot{ background:var(--b-leading-l) } .phase .st.done{ color:var(--tx) }
.phase .st.now{ background:var(--accent-soft); color:var(--tx); font-weight:600 }
.phase .st.now .dot{ background:var(--gold-600); box-shadow:0 0 0 3px rgba(201,168,106,.26) }
.phase .sep{ width:13px; height:1px; background:var(--line-2) }
@media print{ #rail,#head,#cmd,#pane,#scrim,.tool{ display:none !important } #shell{ display:block } }

/* ============================================================================
   RELEASE CANDIDATE · typography, spacing and layout QA
   Stronger executive hierarchy, calmer rhythm, consistent card and table
   treatment across every view.
   ============================================================================ */

/* ---- type scale: larger display sizes, tighter tracking ---------------- */
h1{ font-size:30px; line-height:1.16; letter-spacing:-.012em }
h2{ font-size:22px; line-height:1.24; letter-spacing:-.008em }
h3{ font-size:17px; line-height:1.3 }
body{ font-size:14.5px; line-height:1.55 }

.card > header{ padding:var(--space-4) var(--pad) }
.card > header .t{ font-size:17px; line-height:1.26; letter-spacing:-.006em }
.card > header .q{ font-size:12px; margin-top:4px; line-height:1.45; max-width:72ch }
.card{ padding:var(--pad) }
.card + .card{ margin-top:0 }

/* dashboard titles must be immediately distinguishable from body copy */
.micro{ font-size:10px; letter-spacing:.12em; color:var(--tx-2) }
.cap{ font-size:12.5px; line-height:1.5 }

/* ---- readable tables --------------------------------------------------- */
table{ font-size:calc(var(--tbl) + .5px) }
th{ font-size:10.5px; letter-spacing:.09em; padding-bottom:var(--space-3);
    background:var(--raised); position:sticky; top:0; z-index:2 }
td{ line-height:1.45; padding-top:var(--space-2); padding-bottom:var(--space-2) }
td b{ font-weight:600 }
tbody tr:last-child td{ border-bottom:0 }
.tw{ border-radius:var(--r-md); border:1px solid var(--line); max-height:none }
.tw table{ border-collapse:separate; border-spacing:0 }
.tw th:first-child, .tw td:first-child{ padding-left:var(--space-4) }
.tw th:last-child,  .tw td:last-child{ padding-right:var(--space-4) }

/* ---- rows and lists: breathing room ------------------------------------ */
.row{ padding:var(--space-3) var(--space-4); gap:var(--space-3) }
.row .rt{ font-size:13.5px; line-height:1.45 }
.row .rm{ margin-top:5px; gap:var(--space-3); row-gap:4px }
.rows{ gap:var(--space-2) }

/* ---- grid rhythm ------------------------------------------------------- */
.g{ gap:var(--space-5) }
#body{ padding:var(--space-5) var(--space-6) var(--space-7) }
@media(max-width:1100px){ #body{ padding:var(--space-4) } }

/* ---- tiles ------------------------------------------------------------- */
.tile{ padding:var(--space-4) var(--space-4) var(--space-5) }
.tile .v{ font-size:38px; margin:var(--space-2) 0 3px }
.tile .b{ font-size:12px; line-height:1.35 }
.tile .k{ font-size:10px; letter-spacing:.12em }

/* ---- chips: consistent optical weight ---------------------------------- */
.chip{ padding:3px 8px; font-size:11px; line-height:1.35; border-radius:var(--r-sm) }

/* ---- command centre ---------------------------------------------------- */
#cmd{ padding:var(--space-5) var(--space-5) var(--space-5) }
#cmd .hd .tt{ font-size:19px; letter-spacing:-.008em }
#cmd .hd{ margin-bottom:var(--space-4) }
#cmd textarea{ font-size:14px; min-height:50px; padding:13px 15px }
#cmd .sugg button{ font-size:12.5px; padding:6px 12px }
#answer{ padding:var(--space-5) }
#answer h4{ font-size:16.5px; margin-bottom:var(--space-3); line-height:1.3 }
#answer p{ font-size:13.5px; line-height:1.7; margin:0 0 var(--space-3) }
#answer ul{ line-height:1.75; margin:var(--space-3) 0 }
#answer .kv{ gap:6px var(--space-4); font-size:13px; margin:var(--space-3) 0 }

/* ---- detail pane ------------------------------------------------------- */
#pane header h2{ font-size:18px; line-height:1.3 }
#pane .pb{ padding:var(--space-5) var(--space-5) var(--space-7) }
#pane .pb p{ line-height:1.65 }

/* ---- maps and charts: never overflow their card ------------------------ */
#saMap svg{ display:block; width:100%; height:auto; max-height:460px }
#worldMap svg{ display:block; width:100%; height:auto; max-height:400px }
#pane #saMap svg{ max-height:300px }
#saMap, #worldMap{ margin-top:var(--space-2) }
#geoChain{ overflow-x:auto; padding-bottom:var(--space-2) }
#geoRows{ padding-right:var(--space-2) }

/* ---- filter bars ------------------------------------------------------- */
.filters{ margin-bottom:var(--space-4); gap:var(--space-3); align-items:center }
.filters select, .filters input{ padding:7px 11px; font-size:13px; border-radius:var(--r-md) }
.filters .cap{ margin-left:auto }

/* ---- report library action clusters ------------------------------------ */
#libBody .tool.sm, #masterBody .tool.sm{ padding:4px 9px; font-size:11.5px }
#libBody td, #masterBody td{ vertical-align:middle }

/* ---- empty states ------------------------------------------------------ */
.empty{ padding:var(--space-6) var(--space-4) }
.empty .t{ font-size:16px; margin-bottom:var(--space-2) }

/* ---- focus and hit targets --------------------------------------------- */
.tool, .row, .tile, .person{ min-height:32px }
.tool.sm{ min-height:26px }
/* The rail is a dense desktop navigation, not a touch surface: 28px keeps
   all eighteen destinations above the fold on a 800px laptop viewport,
   which is what stops Report Library from hiding in a scroll area. */
nav button{ min-height:28px }

/* ---- responsive: stop crowding below 1100 ------------------------------ */
@media(max-width:1100px){
  #tiles{ grid-template-columns:repeat(3,1fr) }
  #modelGrid{ grid-template-columns:repeat(4,1fr) !important }
  #head{ flex-wrap:wrap; height:auto; padding:var(--space-3) var(--space-4) }
  #search input{ width:180px }
}
@media(max-width:760px){
  #shell{ grid-template-columns:1fr }
  #rail{ position:static; height:auto }
  #tiles{ grid-template-columns:repeat(2,1fr) }
  #modelGrid{ grid-template-columns:repeat(3,1fr) !important }
  #pane{ width:100% }
}

/* ---- print: clean executive output -------------------------------------- */
@media print{
  #body{ padding:0 }
  .card{ break-inside:avoid; box-shadow:none; border-color:#ccc }
  .card > header{ border-top-color:#C9A86A }
}

/* Reports Centre: give report titles room, let the table scroll rather than crush */
#repBody td:first-child, #masterBody td:first-child, #libBody td:nth-child(2){ min-width:280px }
#v-reports .tw table{ min-width:1080px }
#repBody .tool.sm, #masterBody .tool.sm, #libBody .tool.sm{ padding:3px 8px; font-size:11px }
#repBody td, #masterBody td, #libBody td{ vertical-align:middle }

/* ==========================================================================
   REPORT LIBRARY AND DOCUMENT VIEWER
   Reports are protected publications: every row offers exactly two actions,
   View PDF and Download PDF, and nothing else.
   ========================================================================== */
.rbtns{ display:flex; gap:6px; flex-wrap:wrap; align-items:flex-start }

.reprow{ display:flex; gap:var(--space-4); align-items:flex-start; padding:var(--space-4) 0;
  border-bottom:1px solid var(--line) }
.reprow:last-of-type{ border-bottom:0 }
.reprow .ri{ flex:none; width:44px; height:54px; border-radius:var(--r-sm); background:var(--inverse);
  color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.08em;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-sm) }
.reprow .rb{ flex:1; min-width:0 }
.reprow .rt{ font-family:"Sentinel",Georgia,serif; font-size:14.5px; font-weight:700; line-height:1.3 }
.reprow .rm{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; align-items:center }
.reprow .rbtns{ flex:none; padding-top:2px }

.repgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:var(--space-3) }
.repgrid.sm{ grid-template-columns:repeat(auto-fill,minmax(216px,1fr)) }
.repcard{ border:1px solid var(--line); border-top:2px solid var(--accent); border-radius:var(--r-md);
  padding:var(--space-3); background:var(--raised); display:flex; flex-direction:column; gap:6px }
.repcard .t{ font-family:"Sentinel",Georgia,serif; font-size:12.5px; font-weight:700; line-height:1.35 }
.repcard .t .no{ color:var(--tx-gold); margin-right:4px }
.repcard .rbtns{ margin-top:auto; padding-top:4px }

.mrpanel{ margin-top:8px; border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-md); padding:var(--space-3); background:var(--sunken) }
.mrpanel .t{ font-family:"Sentinel",Georgia,serif; font-size:14px; font-weight:700 }
.mrpanel .rm{ display:flex; gap:6px; flex-wrap:wrap }

#vwFrameWrap{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:var(--sunken); margin-top:var(--space-3) }
#vwFrame{ width:100%; height:calc(100vh - var(--head) - 190px); min-height:420px; border:0; display:block }
a.tool{ text-decoration:none; display:inline-flex; align-items:center }

/* ==========================================================================
   ENTERPRISE INTELLIGENCE MAP
   Provincial atlas of South Africa's Special Economic Zones. Status is
   carried by marker shape as well as colour, so the map is readable without
   relying on colour at all.
   ========================================================================== */
[data-theme="light"]{
  --atl-ocean:#DDE3E1; --atl-land-1:#F3F0E7; --atl-land-2:#E2DACB;
  --atl-p1:#EFEADC; --atl-p2:#E8E0CE; --atl-p3:#F2EDE1; --atl-p4:#E4DFD2;
  --atl-p5:#ECE4D3; --atl-p6:#DED7C6; --atl-hover:#E3D9BF;
  --atl-line:#A9A190; --atl-contour:rgba(46,57,65,.06); --atl-lab:#6E6759;
  --atl-mk-op:#2E3941; --atl-mk-pend:#FDFDFB; --atl-mk-edge:#3A4750;
}
[data-theme="dark"]{
  --atl-ocean:#121A1F; --atl-land-1:#39434A; --atl-land-2:#283137;
  --atl-p1:#38424A; --atl-p2:#313B43; --atl-p3:#3C4750; --atl-p4:#2D373E;
  --atl-p5:#364047; --atl-p6:#293238; --atl-hover:#46525B;
  --atl-line:#68757E; --atl-contour:rgba(246,247,241,.055); --atl-lab:#A8B2B4;
  --atl-mk-op:#EDEFE7; --atl-mk-pend:#131A1F; --atl-mk-edge:#C6CFD2;
}

.atlgrid{ display:grid; grid-template-columns:minmax(0,1fr) 268px; gap:var(--space-5); align-items:start }
#atlWrap{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--atl-ocean); overflow:hidden }
#atlasSvg{ display:block; width:100%; height:auto; max-height:620px }

#atlasSvg .ocean{ fill:var(--atl-ocean) }
#atlasSvg .grat line{ stroke:var(--atl-line); stroke-width:.5; opacity:.25 }
/* Provinces read as distinct bodies of land: a visible hairline boundary plus
   a small tonal step per province. The step is deliberately small, because the
   markers, not the provinces, carry the information. */
#atlasSvg .prov{ fill:url(#atlLand); stroke:var(--atl-line); stroke-width:1.1;
  stroke-linejoin:round; transition:fill var(--fast) }
#atlasSvg .land .prov.p-WC{ fill:var(--atl-p1) }
#atlasSvg .land .prov.p-NC{ fill:var(--atl-p2) }
#atlasSvg .land .prov.p-EC{ fill:var(--atl-p3) }
#atlasSvg .land .prov.p-FS{ fill:var(--atl-p4) }
#atlasSvg .land .prov.p-NW{ fill:var(--atl-p5) }
#atlasSvg .land .prov.p-GP{ fill:var(--atl-p6) }
#atlasSvg .land .prov.p-LP{ fill:var(--atl-p2) }
#atlasSvg .land .prov.p-MP{ fill:var(--atl-p3) }
#atlasSvg .land .prov.p-KZN{ fill:var(--atl-p4) }
#atlasSvg .tex .prov{ fill:url(#atlContour); stroke:none; pointer-events:none }
#atlasSvg .tex .prov.p-NC, #atlasSvg .tex .prov.p-LP,
#atlasSvg .tex .prov.p-NW{ fill:url(#atlMineral) }
#atlasSvg .prov:hover{ fill:var(--atl-hover) }
#atlasSvg .enclave{ fill:var(--atl-ocean); stroke:var(--atl-line);
  stroke-width:1.1; stroke-dasharray:4 3; opacity:.85 }
#atlasSvg .plab{ fill:var(--atl-lab); font-size:11.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; text-anchor:middle;
  paint-order:stroke; stroke:var(--atl-land-1); stroke-width:3px; stroke-linejoin:round }
#atlasSvg .plab.enc{ font-size:9.5px; font-style:italic; text-transform:none;
  letter-spacing:.02em; stroke:var(--atl-ocean) }

/* ---- markers: shape carries status, colour reinforces it ---------------- */
#atlasSvg .atlm{ cursor:pointer; transition:opacity var(--fast) }
#atlasSvg .atlm .hit{ fill:transparent }
#atlasSvg .atlm .mk{ filter:url(#atlPin); transition:transform var(--fast) }
/* Marker fills are theme-aware: an operational marker must read as solid
   against the land in both themes, and a pending marker must read as hollow.
   On a dark map a navy fill disappears into the land, which is what --atl-mk-*
   exists to prevent. */
#atlasSvg .atlm.st-operational .mk{ fill:var(--atl-mk-op); stroke:var(--gold-500); stroke-width:2 }
#atlasSvg .atlm.st-approved .mk{ fill:var(--gold-500); stroke:var(--atl-mk-edge); stroke-width:1.8 }
#atlasSvg .atlm.st-pending .mk{ fill:var(--atl-mk-pend); stroke:var(--atl-mk-edge);
  stroke-width:1.8; stroke-dasharray:3.4 2.6 }
#atlasSvg .atlm.dim{ opacity:.22 }
#atlasSvg .atlm:hover .mk, #atlasSvg .atlm.on .mk{ transform:scale(1.22) }
#atlasSvg .atlm:focus{ outline:none }
#atlasSvg .atlm:focus .mk{ transform:scale(1.28); stroke:var(--focus); stroke-width:3 }
#atlasSvg .atlm .ring{ fill:none; stroke:var(--gold-500); stroke-width:1.4; opacity:.75 }
#atlasSvg .atlm .halo{ pointer-events:none }
#atlasSvg .atlm .fx rect{ fill:var(--deepblue-800); stroke:var(--gold-500); stroke-width:1 }
#atlasSvg .atlm .fx text{ fill:var(--gold-400); font-size:8px; font-weight:700;
  letter-spacing:.1em; text-anchor:middle }
#atlasSvg .atlm.pulse .ring{ animation:atlpulse 1.4s ease-out 2 }
@keyframes atlpulse{ 0%{ r:11; opacity:.95 } 100%{ r:30; opacity:0 } }
@media (prefers-reduced-motion:reduce){ #atlasSvg .atlm.pulse .ring{ animation:none } }

/* ---- hover card --------------------------------------------------------- */
#atlCard{ position:absolute; width:294px; padding:var(--space-3); z-index:9;
  background:var(--raised); border:1px solid var(--line); border-top:2px solid var(--accent);
  border-radius:var(--r-md); box-shadow:var(--sh-lg); pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity var(--fast) }
#atlCard.on{ opacity:1; visibility:visible }
#atlCard .hd{ display:flex; gap:8px; align-items:flex-start }
#atlCard .t{ font-family:"Sentinel",Georgia,serif; font-size:14px; font-weight:700; line-height:1.25 }
#atlCard .rm{ display:flex; gap:5px; flex-wrap:wrap; margin-top:8px }
#atlCard .line{ font-size:12px; color:var(--tx-2); margin:8px 0 0; line-height:1.5 }
#atlCard .foot{ display:flex; justify-content:space-between; gap:8px; align-items:baseline;
  margin-top:10px; padding-top:8px; border-top:1px solid var(--line); font-size:11px; color:var(--tx-2) }
#atlCard .foot b{ color:var(--tx-gold) }

/* ---- sector tags -------------------------------------------------------- */
.tags{ display:flex; flex-wrap:wrap; gap:4px }
.stag{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; line-height:1.5;
  padding:2px 7px; border-radius:var(--r-pill); background:var(--sunken);
  border:1px solid var(--line); color:var(--tx-2); white-space:nowrap }
.stag i{ font-style:normal; color:var(--tx-gold); font-size:10px }
.tags.sm .stag{ font-size:10px; padding:1px 6px }

/* ---- status dots and legend -------------------------------------------- */
.sdot{ display:inline-block; width:11px; height:11px; flex:none; margin-top:3px }
.sdot.st-operational{ background:var(--atl-mk-op); border:2px solid var(--gold-500); border-radius:50% }
.sdot.st-approved{ background:var(--gold-500); border:1.5px solid var(--atl-mk-edge);
  transform:rotate(45deg) scale(.86) }
.sdot.st-pending{ background:var(--atl-mk-pend); border:1.5px dashed var(--atl-mk-edge); border-radius:2px }

#atlLegend{ display:flex; flex-direction:column; gap:6px; margin-top:8px }
.lgd{ display:flex; gap:9px; align-items:flex-start; text-align:left; width:100%;
  padding:7px 9px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--raised); transition:border-color var(--fast), background var(--fast) }
.lgd:hover{ border-color:var(--accent) }
.lgd.on{ border-color:var(--accent); background:var(--accent-bg) }
.lgd .gl{ width:13px; height:13px; flex:none; margin-top:3px }
.lgd .gl.st-operational{ background:var(--atl-mk-op); border:2px solid var(--gold-500); border-radius:50% }
.lgd .gl.st-approved{ background:var(--gold-500); border:1.5px solid var(--atl-mk-edge); transform:rotate(45deg) scale(.86) }
.lgd .gl.st-pending{ background:var(--atl-mk-pend); border:1.5px dashed var(--atl-mk-edge); border-radius:2px }
.lgd b{ display:block; font-size:12px; font-weight:600 }
.lgd i{ display:block; font-style:normal; font-size:11px; color:var(--tx-2); margin-top:1px }

/* ---- register binding --------------------------------------------------- */
#entBody tr.sel{ background:var(--accent-bg); box-shadow:inset 3px 0 0 var(--accent) }
#entBody tr.off{ opacity:.4 }
#entBody td{ vertical-align:top }

/* ---- fact and interpretation labelling ---------------------------------- */
.fi.fact .tag{ background:var(--b-leading-f); color:var(--b-leading-t) }
.fi.open{ border-left:3px solid var(--b-developing-l) }
.fi.open .tag{ background:var(--b-developing-f); color:var(--b-developing-t) }

@media(max-width:1180px){
  .atlgrid{ grid-template-columns:1fr }
  #atlasSvg{ max-height:none }
}