/* ============================================================
   MEGA LIMITED — Design System.
   Interface colour adopted system-wide from the National Bureau
   of Statistics Tanzania (nbs.go.tz): primary teal-blue #0272A7,
   secondary gold #EDC91E, accent light blue #80C3EC. Variable
   NAMES are kept as --green/--gold for backward compatibility
   with every rule in this file and in staff.js/member.js/mega.js
   that already references them — only the values changed, so the
   new palette applies everywhere automatically.
   ============================================================ */
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.55;}}

/* Scroll-reveal — applied via JS (mega.js) to common public-site section/card
   classes only (scoped to pages with nav.sitenav); each element starts
   slightly lower + transparent and settles into place the first time it
   enters the viewport. Respects prefers-reduced-motion. */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.reveal.reveal-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}
:root{
  --green:#0272A7;        /* NBS primary teal-blue (brand primary) */
  --green-hover:#045A82;
  --gold:#EDC91E;         /* NBS secondary gold (brand secondary) */
  --gold-dark:#B8960F;
  --gold-light:#F2DF82;
  --accent:#80C3EC;       /* NBS accent light blue */
  --light:#E3F1F8;        /* section bg / zebra rows */
  --sand:#F2F7FA;         /* alt card bg */
  --danger:#B00020;
  --info:#1A4A8A;
  --ink:#1c2529;
  --muted:#5c6b73;
  --border:#d7e2e8;
  --radius:6px;
  --bg:linear-gradient(180deg,#fbfdfe 0%,#f4f8fa 100%);
  --surface:#ffffff;
  --card-shadow:0 1px 3px rgba(2,114,167,.08);
}
[data-theme="dark"]{
  --green:#3FA9D6;
  --green-hover:#63C2E8;
  --gold:#F2D659;
  --gold-dark:#D4B524;
  --gold-light:#F5E58A;
  --accent:#80C3EC;
  --light:#12232B;
  --sand:#17262D;
  --ink:#EAF2F6;
  --muted:#93AEBA;
  --border:#28414D;
  --bg:radial-gradient(ellipse 1200px 600px at 50% -10%,#12232b 0%,#0d1a1f 45%,#081216 100%);
  --surface:#122029;
  --card-shadow:0 1px 2px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);background-attachment:fixed;color:var(--ink);transition:background .25s,color .2s;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
h1,h2,h3,h4,h5{margin:0;color:var(--green);}
p{margin:0;}
a{color:inherit;text-decoration:none;transition:color .15s ease,opacity .15s ease,filter .15s ease;}
/* Generic fallback so ANY plain link (prose, legal, contact copy) still shows a
   visible hover / press / visited state even without a component-specific rule
   below (those are more specific and win where they exist). */
a:hover{filter:brightness(1.18);}
a:active{filter:brightness(.82);}
a:visited{color:var(--gold-dark);}
img,svg{display:block;max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

/* ---------- buttons (exact spec classes) ----------
   NOTE: markup across the app uses lowercase "btn-mega" / "btn-outline-mega"
   (login, register, forgot-password, staff.js, member.js …) — these were
   previously defined here as "btn-MEGA" / "btn-outline-MEGA", which never
   matched (CSS class selectors are case-sensitive), leaving every primary
   button in the system unstyled. Fixed to the lowercase names actually used. */
.btn-mega{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;border:none;
  border-radius:var(--radius);padding:10px 24px;font-weight:600;font-size:14.5px;cursor:pointer;transition:background-color .15s,transform .1s,box-shadow .15s;}
.btn-mega:hover{background:var(--green-hover);transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(2,114,167,.45);}
.btn-mega:active{background:#062634;transform:scale(.97);box-shadow:none;}
.btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--green);border:none;
  border-radius:var(--radius);padding:10px 24px;font-weight:700;font-size:14.5px;cursor:pointer;transition:background-color .15s,transform .1s,box-shadow .15s;}
.btn-gold:hover{background:#ddc423;transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(237,201,30,.45);}
.btn-gold:active{background:var(--gold-dark);transform:scale(.97);box-shadow:none;}
.btn-outline-mega{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--green);
  border:2px solid var(--green);border-radius:var(--radius);padding:9px 22px;font-weight:600;font-size:14.5px;cursor:pointer;transition:background-color .15s,color .15s,transform .1s;}
.btn-outline-mega:hover{background:var(--green);color:#fff;transform:translateY(-1px);}
.btn-outline-mega:active{background:var(--green-hover);color:#fff;transform:scale(.97);}
.btn-outline-white{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#fff;
  border:2px solid rgba(255,255,255,.7);border-radius:var(--radius);padding:9px 22px;font-weight:600;font-size:14.5px;cursor:pointer;transition:background-color .15s,border-color .15s,transform .1s;}
.btn-outline-white:hover{border-color:#fff;background:rgba(255,255,255,.12);transform:translateY(-1px);}
.btn-outline-white:active{background:rgba(255,255,255,.22);transform:scale(.97);}
.btn-danger{display:inline-flex;align-items:center;gap:8px;background:var(--danger);color:#fff;border:none;
  border-radius:var(--radius);padding:10px 22px;font-weight:600;font-size:14px;cursor:pointer;transition:background-color .15s,transform .1s;}
.btn-danger:hover{background:#8a0018;}
.btn-danger:active{background:#6b0013;transform:scale(.97);}
.btn-sm{padding:6px 14px;font-size:13.5px;}
button{font-family:inherit;}
button:active{transform:scale(.97);}

/* ---------- password show/hide toggle ---------- */
.pwd-wrap{position:relative;}
.pwd-wrap input{padding-right:42px;}
.pwd-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--muted);cursor:pointer;padding:6px;font-size:14px;border-radius:4px;transition:color .15s,background-color .15s;}
.pwd-toggle:hover{color:var(--green);background:var(--light);}
.pwd-toggle:active{color:var(--gold-dark);transform:translateY(-50%) scale(.9);}

/* ---------- badges ---------- */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;}
.badge-success{background:#dceee1;color:#1c6b3c;}
.badge-warning{background:#f7e7b8;color:#7a5b06;}
.badge-danger{background:#f6d9dd;color:var(--danger);}
.badge-secondary{background:#e6e6e6;color:#555;}
.badge-info{background:#dbe6f3;color:var(--info);}

/* ---------- cards / tables / alerts ---------- */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--card-shadow);overflow:hidden;border:1px solid var(--border);}
/* "Rate MEGA" homepage widget — Play Store-style tap-a-star feedback. */
.rate-star{display:inline-block;transition:color .1s,transform .1s;}
.rate-star:hover{transform:scale(1.15);}
.card-head{background:var(--green);color:#fff;padding:14px 20px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center;}
.card-body{padding:20px;}
table.tbl{width:100%;border-collapse:collapse;font-size:14.5px;}
table.tbl thead th{background:var(--green);color:#fff;text-align:left;padding:12px 14px;font-weight:600;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;}
table.tbl tbody td{padding:11px 14px;border-bottom:1px solid var(--border);}
table.tbl tbody tr:last-child td{border-bottom:none;}
table.tbl tbody tr:nth-child(even){background:var(--light);}
table.tbl tbody tr:hover{background:#e3f1f8;}
table.tbl tbody tr.active{background:var(--gold);}
table.tbl tbody tr.active td{color:var(--green);font-weight:600;}
.alert{border-radius:var(--radius);padding:14px 16px;font-size:14.5px;display:flex;gap:10px;align-items:flex-start;}
.alert-warning{background:#fdf3da;color:#7a5b06;border:1px solid #f0dca0;}
.alert-danger{background:#fbe4e8;color:var(--danger);border:2px solid var(--danger);}
.alert-success{background:#e1f3e8;color:#1c6b3c;border:1px solid #b9e0c8;}
.alert-info{background:#e3edf8;color:var(--info);border:1px solid #c2d6ee;}

/* ---------- forms ---------- */
label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.form-control{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;font-size:14px;
  font-family:inherit;background:var(--surface);color:var(--ink);}
.form-control:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(237,201,30,.25);}
.field{margin-bottom:16px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.radio-row{display:flex;gap:18px;flex-wrap:wrap;font-size:14.5px;}
.radio-row label{display:flex;align-items:center;gap:6px;font-weight:500;margin:0;}

/* ---------- top utility bar (slim — quick links the main nav below doesn't
   carry, e.g. Login/Investors; was previously a full second button-row nav
   stacked directly on the main nav, reading as two competing navigation
   systems rather than one coherent one). ---------- */
#protoBar{position:sticky;top:0;z-index:500;background:#0A1E27;color:#CFE3EC;overflow:hidden;
  padding:7px 24px;border-bottom:1px solid rgba(237,201,30,.35);}
.protobar-in{position:relative;z-index:1;max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12.5px;}
.protobar-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.protobar-links a{color:#CFE3EC;font-weight:500;letter-spacing:.01em;white-space:nowrap;opacity:.9;}
.protobar-links a:hover{color:var(--gold);opacity:1;}
.protobar-links a:visited{color:#CFE3EC;}
#themeToggle{background:transparent;border:1px solid rgba(255,255,255,.25);color:#CFE3EC;border-radius:50%;
  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;
  flex-shrink:0;transition:background-color .15s,border-color .15s,color .15s,transform .15s;}
#themeToggle:hover{background:rgba(237,201,30,.15);border-color:var(--gold);color:var(--gold);transform:translateY(-1px);}

/* ---------- scrolling "stars" ticker (announcement marquee) ---------- */
.stars-ticker{background:var(--green);overflow:hidden;white-space:nowrap;padding:11px 0;position:relative;}
.stars-ticker-track{display:inline-flex;align-items:center;width:max-content;animation:starsTickerScroll 32s linear infinite;}
.stars-ticker-track:hover{animation-play-state:paused;}
.ticker-item{display:inline-block;color:#fff;font-size:14px;font-weight:600;padding:0 22px;}
.ticker-star{color:var(--gold);font-size:11px;}
@keyframes starsTickerScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.stars-ticker-track{animation:none;}}

/* ---------- public site ---------- */
nav.sitenav{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:40px;z-index:100;transition:box-shadow .2s ease;}
nav.sitenav.is-scrolled{box-shadow:0 8px 24px -16px rgba(2,114,167,.35);}
.sitenav-in{max-width:1320px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.brand{display:flex;align-items:center;gap:8px;}
.brand img{height:44px;width:44px;object-fit:contain;}
.brand .word{font-weight:700;font-size:16px;color:var(--green);letter-spacing:.01em;}
.navlinks{display:flex;flex-wrap:wrap;row-gap:8px;gap:12px;font-size:13.5px;font-weight:500;color:var(--ink);}
.navlinks a{white-space:nowrap;}
.navlinks a:hover{color:var(--green);}
.navlinks a:active{color:var(--gold-dark);}
.navlinks a:visited{color:inherit;}
.navcta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.btn-nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%);
  color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.01em;
  padding:10px 18px;border-radius:999px;white-space:nowrap;
  box-shadow:0 4px 14px rgba(237,201,30,.35);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.btn-nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(237,201,30,.45);filter:brightness(1.05);color:#fff;}
.btn-nav-cta:active{transform:translateY(0);box-shadow:0 2px 8px rgba(237,201,30,.4);filter:brightness(.92);color:#fff;}
.btn-nav-cta:visited{color:#fff;}
[data-theme="dark"] .btn-nav-cta{color:#fff;}
.hamburger{display:none;background:none;border:1px solid var(--border);border-radius:6px;width:38px;height:38px;cursor:pointer;color:var(--green);font-size:16px;}
.navlangtoggle{display:flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;font-size:12px;font-weight:700;}
.navlangtoggle button{border:none;background:var(--surface);color:var(--ink);padding:6px 10px;cursor:pointer;}
.navlangtoggle button.on{background:var(--green);color:#fff;}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
@media(max-width:1150px){
  .navlinks{position:absolute;top:100%;left:0;right:0;background:var(--surface);flex-direction:column;gap:0;
    border-bottom:1px solid var(--border);box-shadow:0 12px 20px -14px rgba(0,0,0,.25);max-height:0;overflow:hidden;transition:max-height .2s;}
  .navlinks.open{max-height:420px;}
  .navlinks a{padding:13px 28px;border-bottom:1px solid var(--border);}
  .hamburger{display:block;}
  .navcta .btn-outline-mega{display:none;}
}

.hero{position:relative;min-height:560px;background:linear-gradient(165deg,var(--green) 0%,var(--green-hover) 100%);color:#fff;display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;}
.hero-track{position:relative;width:100%;height:100%;min-height:560px;display:flex;align-items:center;justify-content:center;}
/* Connected-lines network background — same particles.js mechanics/interaction
   nbs.go.tz uses (linked dots that drift and connect within a distance, brighten
   on hover), recoloured to the MEGA/NBS accent palette instead of copying their
   literal hues. Purely decorative: absolutely positioned behind the real content,
   never intercepts clicks (pointer-events:none) and never touches data-table pages. */
.particles-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateX(40px);transition:opacity .7s ease,transform .7s ease;}
.hero-slide.active{opacity:1;visibility:visible;transform:translateX(0);}
.hero-dots{position:absolute;bottom:22px;left:0;right:0;display:flex;gap:10px;justify-content:center;z-index:5;}
.hero-dots .dot-btn{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:transparent;padding:0;cursor:pointer;transition:.2s;}
.hero-dots .dot-btn:hover{border-color:#fff;background:rgba(255,255,255,.35);}
.hero-dots .dot-btn:active{background:var(--gold-dark);border-color:var(--gold-dark);}
.hero-dots .dot-btn.active{background:var(--gold);border-color:var(--gold);}
.hero-skyline{position:absolute;left:0;right:0;bottom:0;height:48%;opacity:.5;}
.hero-in{position:relative;z-index:2;max-width:760px;padding:72px 24px;}
.hero h1{color:#fff;font-size:46px;font-weight:800;line-height:1.18;letter-spacing:-.01em;}
.hero p{color:#CFE3EC;font-size:17px;margin-top:18px;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.65;}
.hero-ctas{margin-top:32px;display:flex;gap:14px;justify-content:center;}

.statsbar{background:var(--light);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.stats-grid{max-width:1180px;margin:0 auto;padding:44px 28px;display:grid;grid-template-columns:repeat(4,1fr);text-align:center;}
.stats-grid>div{position:relative;padding:0 12px;}
.stats-grid>div+div::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--border);}
.stats-grid .n{font-size:36px;font-weight:800;color:var(--green);letter-spacing:-.01em;}
.stats-grid .l{font-size:13px;color:var(--muted);margin-top:6px;font-weight:500;}
@media(max-width:640px){.stats-grid>div+div::before{display:none;}}

.sectionpad{padding:64px 0;}
.sec-eyebrow{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;display:block;}
.sec-head{max-width:620px;margin-bottom:42px;}
.sec-head h2{font-size:32px;font-weight:800;letter-spacing:-.01em;line-height:1.25;}
.sec-head p{color:var(--muted);margin-top:12px;font-size:15px;line-height:1.65;}

.sector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.sector-card{border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;transition:.2s;background:var(--surface);}
/* Optional real-photo banner for sector cards that represent an actual
   physical activity (crops, livestock, trucks, buildings) — opt-in via
   .has-photo so the many functional sector-card tab-selectors elsewhere
   (partner-type pickers, etc.) are unaffected. */
.sector-card.has-photo{overflow:hidden;}
.sector-card-photo{height:220px;margin:-24px -20px 16px;background-size:cover;background-position:center;background-repeat:no-repeat;
  border-radius:var(--radius) var(--radius) 0 0;box-shadow:inset 0 -14px 20px -16px rgba(0,0,0,.28);transition:transform .35s ease;}
.sector-card.has-photo:hover .sector-card-photo{transform:scale(1.07);}
.sector-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px -14px rgba(2,114,167,.3);}
.sector-card i{font-size:24px;color:var(--green);margin-bottom:14px;}
.sector-card h4{font-size:16px;}
.sector-card p{font-size:14px;color:var(--muted);margin-top:8px;}
.sector-card .tgt{font-size:12.5px;color:var(--gold);font-weight:700;margin-top:10px;display:block;}
.sector-card>a{font-size:12.5px;color:var(--green);font-weight:600;margin-top:10px;display:block;}
.sector-card>a:hover{filter:brightness(1.25);}

.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.vm-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;transition:transform .25s ease,box-shadow .25s ease;}
.vm-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px -14px rgba(2,114,167,.3);}
.vm-card i{font-size:26px;margin-bottom:12px;}
.vm-card h4{font-size:17px;margin-bottom:10px;}
.vm-card p{font-size:14.5px;color:var(--muted);line-height:1.7;}

.howsec-block{display:flex;gap:24px;align-items:flex-start;padding:28px 0;border-bottom:1px solid var(--border);}
.howsec-block:last-of-type{border-bottom:none;}
.howsec-icon{flex:0 0 64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--green),var(--nbs-accent,#80C3EC));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;box-shadow:0 8px 18px -8px rgba(2,114,167,.5);}
.howsec-body h4{font-size:18px;margin-bottom:8px;}
.howsec-body p{font-size:14.5px;color:var(--muted);line-height:1.75;margin-bottom:10px;}
/* Vertical checklist with a solid circular badge per item — matches the
   "Great Leadership" reference layout (bold heading, stacked checks, each
   with its own filled icon badge) rather than the previous small flat pill
   row, for stronger visibility and a more educational, scannable feel. */
.howsec-tags{display:flex;flex-direction:column;gap:14px;margin-top:16px;}
.howsec-tags span{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:var(--ink);line-height:1.5;font-weight:500;}
.howsec-tags span i{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;margin-top:1px;}
/* The bold label + its dash-separated description used to flow as one run
   of inline text. A previous attempt forced the label onto "its own line"
   with b{display:block}, but .howsec-tags span is itself a row-direction
   flex container — promoting <b> to a block box just makes it a second
   FLEX ITEM next to the description's own anonymous flex item, so the two
   still sit side by side in the row instead of stacking, and the result
   scatters further under a longer translation or a narrow label. Wrapping
   the label and description in their own flex-column container (see
   .howsec-tag-text, used by the two lists that actually need this — "What
   Partners Can Expect" and "What We Look For" in partnership.blade.php)
   stacks them reliably regardless of language or label length. */
.howsec-tags span b{display:block;margin-bottom:2px;}
.howsec-tags span .howsec-tag-text{display:flex;flex-direction:column;}
.howsec-tags span .howsec-tag-text b{margin-bottom:2px;}
@media(max-width:720px){.vm-grid{grid-template-columns:1fr;}.howsec-block{flex-direction:column;}}

/* Public-site "Learn more" info modal — shared by the "Why Partner With
   MEGA" cards and the Partner Resources cards, both of which previously
   called an onclick handler (showWhyPartnerDetail/openPartnershipInfoModal)
   that didn't exist anywhere, so clicking did nothing. One lightweight,
   reusable overlay instead of a bespoke modal per caller. */
.pub-info-overlay{position:fixed;inset:0;background:rgba(10,20,25,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:2000;}
.pub-info-modal{background:var(--surface);border-radius:var(--radius);max-width:560px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 50px -20px rgba(0,0,0,.4);}
.pub-info-modal-head{display:flex;align-items:flex-start;gap:14px;padding:24px 24px 0;}
.pub-info-modal-head i{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;}
.pub-info-modal-head h4{margin:6px 0 0;font-size:18px;}
.pub-info-modal-close{margin-left:auto;background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;line-height:1;padding:4px;}
.pub-info-modal-close:hover{color:var(--ink);}
.pub-info-modal-body{padding:16px 24px 24px;font-size:14.5px;color:var(--ink);line-height:1.6;}
.pub-info-modal-body p{margin:0 0 12px;}
.pub-info-modal-body p:last-child{margin-bottom:0;}

.legal-layout{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start;}
.legal-side{position:sticky;top:90px;display:flex;flex-direction:column;gap:2px;}
.legal-side h5{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px;}
.legal-side a{padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--fg);text-decoration:none;display:flex;gap:8px;align-items:center;}
.legal-side a:hover{background:var(--light);}
.legal-side a.active{background:var(--green);color:#fff;font-weight:600;}
.legal-content h4{font-size:15.5px;margin:22px 0 8px;color:var(--green);}
.legal-content h4:first-child{margin-top:0;}
.legal-content p{font-size:14px;line-height:1.75;color:var(--fg);margin-bottom:10px;}
.legal-infobar{font-size:12.5px;color:var(--muted);background:var(--light);border-radius:8px;padding:10px 14px;margin:14px 0 20px;}
.legal-list{margin:0 0 14px 20px;font-size:14px;line-height:1.8;color:var(--fg);}
.legal-contact{margin-top:24px;padding-top:16px;border-top:1px solid var(--border);font-size:13px;color:var(--muted);}
.legal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px;}
.legal-card{border:1px solid var(--border);border-radius:var(--radius);padding:22px;background:var(--surface);text-decoration:none;color:inherit;transition:.2s;display:block;}
.legal-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px -14px rgba(2,114,167,.3);}
.legal-card i{font-size:22px;color:var(--green);margin-bottom:10px;}
.legal-card h4{font-size:15px;margin:0 0 6px;color:var(--ink);}
.legal-card p{font-size:13px;color:var(--muted);margin:0;}
@media(max-width:800px){.legal-layout{grid-template-columns:1fr;}.legal-side{position:static;flex-direction:row;flex-wrap:wrap;}.legal-cards{grid-template-columns:1fr;}}

#siteMap{width:100%;height:420px;border-radius:var(--radius);border:1px solid var(--border);background:var(--light);}
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:start;}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr;}}

/* About page — History stats, Executive Leadership (Dangote-style), Milestones timeline */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0;text-align:center;}
.stat-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 12px;}
.stat-num{font-size:26px;font-weight:800;color:var(--green);}
.stat-lbl{font-size:12.5px;color:var(--muted);margin-top:4px;}
@media(max-width:720px){.stat-row{grid-template-columns:repeat(2,1fr);}}

.ceo-spotlight-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;}
.ceo-spotlight-inner{display:flex;gap:28px;align-items:flex-start;}
.ceo-spotlight-photo{flex:0 0 120px;width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--nbs-accent,#80C3EC));display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ceo-spotlight-body h3{font-size:21px;margin-bottom:2px;}
.ceo-spotlight-title{font-size:13.5px;color:var(--gold);font-weight:700;display:block;margin-bottom:10px;}
.ceo-spotlight-body p{font-size:14.5px;color:var(--muted);line-height:1.75;margin-bottom:10px;}
.ceo-spotlight-details{color:var(--fg) !important;}
@media(max-width:640px){.ceo-spotlight-inner{flex-direction:column;align-items:center;text-align:center;}}

.leader-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.leader-grid-sm{grid-template-columns:repeat(4,1fr);}
.leader-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;text-align:center;}
.leader-photo{width:84px;height:84px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(135deg,var(--green),var(--nbs-accent,#80C3EC));display:flex;align-items:center;justify-content:center;overflow:hidden;}
.leader-card h4{font-size:15px;margin-bottom:2px;}
.leader-title{font-size:12px;color:var(--gold);font-weight:700;display:block;margin-bottom:10px;}
.leader-bio{font-size:13px;color:var(--muted);line-height:1.6;}
.leader-more{font-size:12.5px;color:var(--muted);line-height:1.7;text-align:left;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.leader-more-link{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--green);font-weight:700;cursor:pointer;}
@media(max-width:900px){.leader-grid,.leader-grid-sm{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.leader-grid,.leader-grid-sm{grid-template-columns:1fr;}}

.timeline-v{position:relative;max-width:760px;margin:0 auto;padding-left:28px;}
.timeline-v::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--border);}
.tv-item{position:relative;padding-bottom:28px;}
.tv-item:last-child{padding-bottom:0;}
.tv-dot{position:absolute;left:-28px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--green);border:3px solid var(--surface);box-shadow:0 0 0 2px var(--green);}
.tv-year{font-size:12px;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
.tv-body h5{font-size:15px;margin-bottom:6px;}
.tv-body p{font-size:13.5px;color:var(--muted);line-height:1.7;}
.map-unavailable{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:13.5px;text-align:center;padding:20px;}
.map-unavailable i{font-size:28px;color:var(--border);}
.map-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted);}
.map-legend span{display:inline-flex;align-items:center;gap:6px;}
.map-legend i{width:10px;height:10px;border-radius:50%;display:inline-block;}

.timeline{display:flex;justify-content:space-between;position:relative;}
.timeline::before{content:"";position:absolute;top:18px;left:5%;right:5%;height:2px;background:var(--border);}
.tstep{flex:1;text-align:center;position:relative;z-index:2;padding:0 6px;}
.tstep .c{width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;margin:0 auto 12px;}
.tstep h5{font-size:13.5px;font-weight:700;color:var(--green);}
.tstep p{font-size:12.5px;color:var(--muted);margin-top:4px;}

.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.news-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);transition:transform .25s ease,box-shadow .25s ease;}
.news-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px -14px rgba(2,114,167,.3);}
.news-card .ph{height:150px;background:linear-gradient(135deg,var(--green),var(--green-hover));background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;
  align-items:flex-end;justify-content:flex-start;padding:10px 12px;color:rgba(255,255,255,.85);font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;transition:transform .35s ease;}
.news-card:hover .ph{transform:scale(1.06);}
.news-card .body{padding:16px;}

/* Leadership profile photos share the .news-card/.ph markup with Portfolio's
   wide landscape project thumbnails, but a person's headshot belongs in a
   round frame, not a cropped landscape banner — a rectangle reads as "this
   is a place," a circle reads as "this is a person" (and matches the round
   CEO spotlight avatar already used on the About page). Scoped to the three
   Leadership grids only — Portfolio's project cards are untouched. */
#boardGrid .news-card .ph,
#execGrid .news-card .ph,
#directorGrid .news-card .ph{
  height:140px;width:140px;border-radius:50%;margin:20px auto 0;
  align-items:center;justify-content:center;padding:0;background:var(--green);
}
#boardGrid .news-card .ph img,
#execGrid .news-card .ph img,
#directorGrid .news-card .ph img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:50%;}
#boardGrid .news-card .body,
#execGrid .news-card .body,
#directorGrid .news-card .body{text-align:center;}
.news-card .date{font-size:12px;color:var(--gold);font-weight:700;}
.news-card h5{font-size:14px;margin-top:6px;}
.news-card p{font-size:13.5px;color:var(--muted);margin-top:8px;}
.news-card .body>a{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--green);}
.news-card .body>a:hover{filter:brightness(1.25);}

.trustbar{background:var(--sand);padding:22px 0;}
.trust-row{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.04em;}

.ctaband{background:linear-gradient(135deg,var(--green) 0%,var(--green-hover) 100%);color:#fff;text-align:center;padding:56px 0;}
.ctaband h3{color:#fff;font-size:24px;max-width:560px;margin:0 auto;}
.ctaband .ctas{margin-top:24px;display:flex;gap:14px;justify-content:center;}

.condensed{border-top:1px solid var(--border);padding:48px 0;}
.condensed h3{font-size:19px;margin-bottom:14px;}
.compare-tbl{width:100%;border-collapse:collapse;font-size:14px;}
.compare-tbl th,.compare-tbl td{border:1px solid var(--border);padding:9px 12px;text-align:left;}
.compare-tbl th{background:var(--light);}
.faq-columns{columns:2;column-gap:36px;}
.faq-item{border-bottom:1px solid var(--border);padding:12px 0;break-inside:avoid;}
.faq-item summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--green);}
.faq-item summary:hover{color:var(--green-hover);}
.faq-item p{font-size:14px;color:var(--muted);margin-top:8px;}
@media(max-width:760px){ .faq-columns{columns:1;} }
.faq-intro-box{border-radius:var(--radius);padding:14px 18px;font-size:13.5px;font-weight:600;margin-bottom:14px;}
.faq-intro-box.info{background:#e8f4f8;border:1px solid var(--accent);color:var(--green);}
.faq-intro-box.warn{background:#fdf6e3;border:1px solid var(--gold-dark);color:#6b5510;}
.faq-category{margin-bottom:30px;}
.faq-cat-head{font-size:16px;font-weight:800;padding-left:14px;margin-bottom:12px;}
.faq-cat-about{border-left:4px solid var(--green);color:var(--green);}
.faq-cat-mechanics{border-left:4px solid #1c6b3c;color:#1c6b3c;}
.faq-cat-security{border-left:4px solid var(--danger);color:var(--danger);}
.faq-cat-portal{border-left:4px solid var(--accent);color:var(--green);}
.faq-cat-withdrawals{border-left:4px solid var(--gold-dark);color:var(--gold-dark);}
.faq-cat-legitimacy{border-left:4px solid var(--nbs-dark);color:var(--nbs-dark);}
.risk-box{border:2px solid var(--danger);border-radius:var(--radius);background:#fdf2f4;padding:16px 18px;color:var(--danger);font-size:14px;font-weight:600;}

/* ---------- social media row (Contact section) ---------- */
.social-block{text-align:center;}
.social-heading{font-size:16px;font-weight:800;color:var(--green);margin:0 0 16px;}
.social-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
.social-row-2{margin-top:14px;}
.social-pill{display:inline-flex;align-items:center;gap:9px;padding:10px 22px;border-radius:999px;
  border:1.5px solid currentColor;background:#fff;font-size:14px;font-weight:600;text-decoration:none;
  transition:background-color .15s,transform .15s,box-shadow .15s;}
.social-pill i{font-size:15px;}
.social-pill span{color:#1b1b1b;}
.social-pill:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12);background:currentColor;}
.social-pill:hover span,.social-pill:hover i{color:#fff;}
.social-pill:visited span{color:#1b1b1b;}
.social-linkedin,.social-linkedin:visited{color:#0A66C2;}
.social-instagram,.social-instagram:visited{color:#D6249F;}
.social-facebook,.social-facebook:visited{color:#1877F2;}
.social-x,.social-x:visited{color:#1DA1F2;}
.social-youtube,.social-youtube:visited{color:#FF0000;}
.social-whatsapp,.social-whatsapp:visited{color:#25D366;}
.social-tiktok,.social-tiktok:visited{color:#000000;}

footer.sitefoot{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--green) 0%,#062634 100%);color:#CFE3EC;padding:56px 0 20px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:36px;}
.foot-grid h6{position:relative;color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;padding-bottom:10px;}
.foot-grid h6::after{content:'';position:absolute;left:0;bottom:0;width:28px;height:3px;background:var(--gold);border-radius:2px;}
.foot-grid a{display:block;font-size:14.5px;margin-bottom:10px;color:#CFE3EC;transition:color .15s,padding-left .15s;}
.foot-grid a:hover{color:var(--gold);padding-left:3px;}
.foot-grid a:active{color:var(--gold-dark);}
.foot-grid a:visited{color:#CFE3EC;}
.foot-grid > div > p{color:#CFE3EC;}
.foot-badges{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.foot-badges span{font-size:11px;font-weight:600;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;padding:5px 11px;border-radius:999px;}

/* "Site Visitors" widget — dark navy card, per the user's own reference screenshot. */
/* A translucent white overlay on top of the footer's own gradient — reads as
   a distinct widget (not lost in the surrounding footer) while staying on-brand. */
.visitor-card{background:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:18px 20px;box-shadow:0 4px 16px rgba(0,0,0,.18);}
.visitor-rows{display:flex;flex-direction:column;gap:8px;}
.visitor-row{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;color:#CFE3EC;}
.visitor-row i{color:var(--gold);width:16px;margin-right:4px;}
.visitor-row b{color:#fff;font-weight:800;}
.visitor-footnote{font-size:12px;color:rgba(220,232,226,.75);margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.15);}
.foot-bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:36px;padding-top:18px;display:flex;
  justify-content:space-between;font-size:13px;color:#CFE3EC;flex-wrap:wrap;gap:8px;}

/* ---------- registration wizard ---------- */
.wizard-wrap{max-width:760px;margin:48px auto;padding:0 24px;}
.steps{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:36px;}
.step-dot{display:flex;align-items:center;gap:10px;}
.step-dot .c{width:34px;height:34px;border-radius:50%;border:2px solid var(--border);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;}
.step-dot.active .c{background:var(--green);border-color:var(--green);color:#fff;}
.step-dot.done .c{background:var(--gold);border-color:var(--gold);color:var(--green);}
.step-dot span{font-size:13.5px;font-weight:600;color:var(--muted);}
.step-dot.active span{color:var(--green);}
.step-line{width:60px;height:2px;background:var(--border);}
.calc-result{background:var(--light);border:1px dashed var(--gold);border-radius:var(--radius);padding:12px 14px;
  font-size:14px;margin-top:-4px;margin-bottom:16px;}
.calc-result b{color:var(--green);}
.wizpane{display:none;}
.wizpane.active{display:block;}

/* ---------- login ---------- */
.login-wrap{max-width:420px;margin:64px auto;padding:0 24px;}
.login-card{border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;box-shadow:var(--card-shadow);background:var(--surface);}
.errchips{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0;}
.errchips button{font-size:10.5px;padding:4px 9px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;}

/* ---------- portal shells (member + staff) ---------- */
/* Two independent scrolling panes: .portal is pinned to the viewport height
   with no page-level scroll of its own, so scrolling the sidebar's nav list
   never drags the content area with it, and scrolling the content area
   never drags the sidebar with it -- each one scrolls only itself, exactly
   like the content side already behaved while the sidebar was being
   scrolled, now made symmetric the other way round too. */
.portal{display:flex;height:100vh;overflow:hidden;}
/* Sidebar palette is fixed (NOT var(--green)): the gradient used to start at
   the bright brand teal (#0272A7; #3FA9D6 in dark mode), so menu text in the
   upper part of the sidebar -- where every item passes as the nav list is
   scrolled -- sat at ~3.3:1 contrast (~1.7:1 in dark mode), below the WCAG AA
   4.5:1 minimum. These values give ~8:1 for menu text at the lightest point
   and the same look in light and dark themes. */
.psidebar{--sb-top:#0a4d6e;--sb-bottom:#062634;--sb-text:#E8F1F5;--sb-muted:#B9CDD6;--sb-hover:rgba(255,255,255,.12);--sb-press:rgba(255,255,255,.2);--sb-active-ink:#062634;
  width:240px;flex-shrink:0;background:linear-gradient(180deg,var(--sb-top) 0%,var(--sb-bottom) 100%);color:var(--sb-text);padding:22px 14px;position:relative;height:100%;overflow:hidden;}
.psidebar>*{position:relative;z-index:1;}
/* .psidebar>* above and .particles-bg (line ~200) have equal specificity, and
   this rule comes later, so it was winning and turning the particles div from
   position:absolute back into position:relative — making it an in-flow block
   that (once particles.js injects its canvas) pushed the logo/avatar/nav down
   by the canvas's height, leaving an empty gap at the top of every sidebar. */
.psidebar>.particles-bg{position:absolute;z-index:0;opacity:.35;} /* dimmed so the moving lines don't cut through menu text */
.psidebar .pbrand{display:flex;align-items:center;gap:10px;padding:0 8px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:16px;}
.psidebar .pbrand .word{color:#fff;font-weight:700;font-size:15px;}
.pavatar{width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--green);display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;}
.pwho{padding:0 8px 16px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:14px;display:flex;gap:10px;align-items:center;}
.pwho .meta b{display:block;font-size:14px;color:#fff;}
.pwho .meta span{font-size:12px;color:var(--sb-muted);}
/* Own scrollbar so a long nav list (many roles now have 15-20+ items) can
   scroll independently of the brand/avatar/footer around it, which stay
   put — flex:1/min-height:0 is valid sizing here because .psidebar now
   has a real bounded height (100% of the viewport-height .portal) to
   shrink within. */
.pnav{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;padding-right:2px;}
.pnav::-webkit-scrollbar{width:6px;}
.pnav::-webkit-scrollbar-track{background:transparent;}
.pnav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px;}
.pnav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5);}
.pnav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:7px;font-size:14px;font-weight:500;color:var(--sb-text);margin-bottom:2px;cursor:pointer;transition:background-color .15s,color .15s;}
.pnav a i{color:inherit;opacity:.9;}
.pnav a.active{background:var(--gold);color:var(--sb-active-ink);font-weight:700;}
.pnav a.active i{opacity:1;}
.pnav a:hover:not(.active){background:var(--sb-hover);color:#fff;}
.pnav a:active:not(.active){background:var(--sb-press);color:#fff;}
.pnav a:visited{color:inherit;}
.pnav a:focus-visible,.ceo-sec-head:focus-visible,.ceo-sec-item:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.psidebar .pfoot{margin-top:auto;padding:14px 8px 4px;border-top:1px solid rgba(255,255,255,.18);font-size:12px;color:var(--sb-muted);line-height:1.5;}
.psidebar .pfoot b{color:var(--sb-text);}
.psidebar{display:flex;flex-direction:column;}

/* ---------- profile menu (top-right of every portal) ---------- */
.ptop{position:relative;}
.pmenu{position:relative;}
.pmenu-btn{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;color:var(--ink);transition:border-color .15s,background-color .15s;}
.pmenu-btn:hover{border-color:var(--gold);}
.pmenu-btn:active{background:var(--light);}
.pmenu-avatar{width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
.pmenu-name{font-size:14px;font-weight:600;white-space:nowrap;}
.pmenu-drop{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px;display:none;z-index:60;}
.pmenu-drop.open{display:block;}
.pmenu-drop a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:7px;font-size:14px;color:var(--ink);cursor:pointer;transition:background-color .15s;}
.pmenu-drop a:hover{background:var(--bg);}
.pmenu-drop a:active{background:var(--light);}
.pmenu-drop a:visited{color:var(--ink);}

/* Generic inter-role request/response bell — shared top bar, every role. */
.reqbell-btn{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font-size:15px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:border-color .15s,background-color .15s;}
.reqbell-btn:hover{border-color:var(--gold);}
.reqbell-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--danger,#c0392b);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;
  justify-content:center;line-height:1;}
.reqbell-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--border);}
.reqbell-tabs button{background:none;border:none;padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--muted);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.reqbell-tabs button.active{color:var(--green);border-bottom-color:var(--green);}
.req-row{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:var(--bg);}
.req-row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;}
.req-row-meta{font-size:12px;color:var(--muted);margin-bottom:6px;}
.req-row-msg{font-size:13.5px;color:var(--ink);margin:0 0 8px;line-height:1.5;}
.req-row-actions{display:flex;gap:8px;flex-wrap:wrap;}
#reqPanelBody{max-height:60vh;overflow-y:auto;}
.pmenu-drop a.danger{color:var(--danger);}
.pmenu-drop a.danger:hover{background:#fbe4e8;}
.pmenu-drop a.danger:active{background:#f6ccd3;}
.pmenu-drop a.danger:visited{color:var(--danger);}
.modal-backdrop{position:fixed;inset:0;background:rgba(10,20,15,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;}
.modal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;width:100%;max-width:380px;box-shadow:0 20px 50px rgba(0,0,0,.3);max-height:90vh;overflow-y:auto;}
.pmain{flex:1;min-width:0;height:100%;overflow-y:auto;background:var(--bg);}
/* Scientific Calculator (profile-menu partial, available to every role) */
.calc-card{max-width:720px;}
.calc-layout{display:flex;gap:18px;}
.calc-main{flex:1;min-width:0;}
.calc-history{width:190px;flex:0 0 190px;border-left:1px solid var(--border);padding-left:14px;}
.calc-display-input{font-size:16px;text-align:right;font-family:'Courier New',monospace;margin-bottom:4px;}
.calc-result-line{text-align:right;font-size:20px;font-weight:700;color:var(--green);min-height:28px;margin-bottom:10px;font-family:'Courier New',monospace;}
.calc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.calc-btn{padding:10px 4px;border-radius:7px;border:1px solid var(--border);background:var(--bg);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;transition:background-color .1s;}
.calc-btn:hover{background:var(--light);}
.calc-btn-fn{background:var(--sand);font-size:12.5px;}
.calc-btn-op{background:var(--light);color:var(--green);}
.calc-btn-eq{background:var(--green);color:#fff;grid-column:span 2;}
.calc-btn-eq:hover{background:var(--green-hover);}
.calc-history-body{max-height:380px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.calc-hist-row{display:flex;flex-direction:column;padding:6px 8px;border-radius:6px;background:var(--bg);cursor:pointer;font-size:11.5px;}
.calc-hist-row:hover{background:var(--light);}
.calc-hist-expr{color:var(--muted);word-break:break-all;}
.calc-hist-eq{display:none;}
.calc-hist-result{color:var(--green);font-weight:700;text-align:right;}
@media(max-width:620px){.calc-layout{flex-direction:column;}.calc-history{width:100%;flex:none;border-left:none;border-top:1px solid var(--border);padding-left:0;padding-top:12px;}}
.ptop{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--border);background:var(--surface);}
.ptop h2{font-size:19px;}
.pbody{padding:26px 28px;}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;}
.kpi i{color:var(--gold);font-size:16px;}
.kpi .v{font-size:21px;font-weight:700;color:var(--green);margin-top:8px;}
.kpi .l{font-size:12px;color:var(--muted);margin-top:2px;}
/* Status-tinted KPI variants — referenced across several dashboards
   (Treasury Overview, Go-Live Checklist, CFO panel) but never actually
   defined; the base .kpi styling rendered fine, just without the
   intended good/warn/bad color accent. */
.kpi-good i,.kpi-good .v{color:var(--green);}
.kpi-warn i,.kpi-warn .v{color:#B4790F;}
.kpi-bad i,.kpi-bad .v{color:#9A2F2F;}
.accessflag{font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:var(--radius);margin-bottom:18px;display:inline-block;}
.accessflag.ro{background:#fbe4e8;color:var(--danger);}
.accessflag.full{background:#dceee1;color:#1c6b3c;}
.accessflag.min{background:#eef0ee;color:var(--muted);}
.mtab,.staffpanel-wrap{display:none;}
.mtab.active,.staffpanel-wrap.active{display:block;}
.table-wrap{overflow-x:auto;}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px;font-size:13.5px;color:var(--muted);}
.pager button{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:7px;padding:6px 12px;cursor:pointer;font-size:13.5px;}
.pager button:disabled{opacity:.4;cursor:not-allowed;}
.guar-photo{width:220px;min-height:150px;border:1px dashed var(--border);border-radius:var(--radius);background:var(--light);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--green);font-size:30px;}
.guar-photo span{font-size:13px;color:var(--ink);text-align:center;line-height:1.4;}
img.guar-photo{border:1px solid var(--border);display:block;}
.role-select-wrap{display:flex;align-items:center;gap:10px;}
.role-select-wrap select{padding:9px 12px;border-radius:var(--radius);border:1px solid var(--border);font-size:14px;min-width:240px;}
.chart-zone{position:relative;height:260px;}

/* ---------- CEO dashboard (FRCEO01..06) ---------- */
.kpi.good{border-left:4px solid #1c6b3c;}
.kpi.warn{border-left:4px solid #d9a514;}
.ceo-alerts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.ceo-alert{display:flex;align-items:center;gap:8px;font-size:14px;padding:10px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);}
.ceo-alert.red{color:#b0232f;}
.ceo-alert.amber{color:#8a6405;}
.ceo-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.ceo-tab{background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:8px 14px;font-size:13.5px;color:var(--ink);cursor:pointer;transition:background-color .15s,border-color .15s;}
.ceo-tab:hover:not(.active){border-color:var(--gold);color:var(--green);}
.ceo-tab:active:not(.active){background:var(--light);}
.ceo-tab.active{background:var(--gold);border-color:var(--gold);color:var(--green);font-weight:700;}
.ceo-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}

/* ---------- COO sector overview (FRCOO02) ---------- */
.sector-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:14px;}
.sector-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--card-shadow);}
.sector-card .sc-head{display:flex;align-items:center;gap:10px;padding:14px 16px;color:#fff;font-weight:700;font-size:14.5px;}
.sector-card .sc-head i{font-size:16px;}
.sector-card .sc-body{padding:14px 16px 0;}
.sector-card .sc-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:8px;}
.sector-card .sc-body p{font-size:14px;color:var(--text);margin:0 0 12px;line-height:1.5;}
.sector-card .sc-foot{padding:10px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;}
.sector-card.re{--sector:#1c6b3c;}
.sector-card.eng{--sector:#b8860b;}
.sector-card.agro{--sector:#2e7d32;}
.sector-card.cap{--sector:#0b4f6c;}
.sector-card .sc-head{background:var(--sector);}
.sector-card .sc-head .st{background:rgba(255,255,255,.22);padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.sector-card .sc-head .st.warn{background:#7a5b06;color:#fff;}
.sector-card .sc-head .st.ok{background:rgba(255,255,255,.22);color:#fff;}
.sector-card .sc-foot button{pointer-events:auto;}
.ceo-sec{margin-bottom:2px;}
.ceo-sec-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:7px;font-size:14px;font-weight:600;color:var(--sb-text,#E8F1F5);cursor:pointer;text-decoration:none;}
.ceo-sec-head i{color:inherit;}
.ceo-sec-head .chev{margin-left:auto;font-size:10px;transition:transform .2s;}
.ceo-sec-head.open .chev,.ceo-sec-head[aria-expanded="true"] .chev{transform:rotate(180deg);}
.ceo-sec-head:hover{background:var(--sb-hover,rgba(255,255,255,.12));color:#fff;}
.ceo-sec-head:active{background:var(--sb-press,rgba(255,255,255,.2));color:#fff;}
.ceo-sec-item{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 34px;border-radius:7px;font-size:13.5px;color:var(--sb-muted,#B9CDD6);cursor:pointer;text-decoration:none;transition:background-color .15s,color .15s;}
.ceo-sec-item:hover{background:var(--sb-hover,rgba(255,255,255,.12));color:#fff;}
.ceo-sec-item:active:not(.active){background:var(--sb-press,rgba(255,255,255,.2));color:#fff;}
.ceo-sec-item.active{background:var(--gold);color:var(--sb-active-ink,#062634);font-weight:700;}
.ceo-sec-item.ceo-top-link{margin-bottom:2px;}
.ceo-sec-item.ceo-top-link span{font-weight:700;color:#fff;}
.cbdg{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;}
.cbdg-red{background:#b0232f;color:#fff;}
.cbdg-amber{background:#d9a514;color:#4a3200;}
.ceo-collapse{display:none;}
.ceo-collapse.open{display:block;}
.kpi-row.c6{grid-template-columns:repeat(3,1fr);}
/* display:block only -- NOT overflow:visible, which silently cancelled
   .pnav's own max-height/overflow-y:auto scrollbar (declared earlier in
   this file) for every role, since staffShell()/each role's own Nav()
   function adds .ceo-navmode to the sidebar on every render. That made
   the long, multi-section nav lists most roles have today (many now
   15-20+ items with collapsible sub-sections) grow the whole sidebar
   instead of scrolling internally -- exactly the "no scrollbar at all"
   symptom. White-space:normal (for long labels like "Capital Movements")
   is unrelated and stays. */
.ceo-navmode .pnav{display:block;}
.ceo-navmode .pnav a{white-space:normal;}

/* ---------- prototype map ---------- */
.mapwrap{max-width:1180px;margin:0 auto;padding:48px 28px 80px;}
.maphead h1{font-size:30px;}
.maphead p{color:var(--muted);margin-top:10px;max-width:680px;}

/* News article permalink page (/news/{id}) */
.news-back{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--green);
  text-decoration:none;margin-bottom:24px;}
.news-back:hover{text-decoration:underline;}
.news-article-hero{width:100%;max-height:520px;overflow:hidden;border-radius:14px;margin-bottom:22px;
  background:var(--light);display:flex;align-items:center;justify-content:center;}
.news-article-hero img{width:100%;height:auto;max-height:520px;object-fit:contain;display:block;}
.news-article-title{font-size:28px;line-height:1.3;margin:10px 0 8px;color:var(--ink);}
.news-article-body{font-size:15.5px;line-height:1.75;color:var(--ink);}
.news-article-body p{margin:0 0 16px;}
.entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0 50px;}
.entry-card{border:1px solid var(--border);border-radius:var(--radius);padding:22px;cursor:pointer;transition:.15s;background:var(--surface);}
.entry-card:hover{border-color:var(--gold);box-shadow:0 10px 24px -16px rgba(2,114,167,.3);}
.entry-card i{font-size:20px;color:var(--green);}
.entry-card h4{font-size:15px;margin-top:12px;}
.entry-card p{font-size:13.5px;color:var(--muted);margin-top:6px;}
.entry-card .fr{font-size:10.5px;color:var(--gold);font-weight:700;margin-top:10px;display:block;}
.tokens-row{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0;}
.token{display:flex;align-items:center;gap:8px;font-size:13px;font-family:monospace;}
.swatch{width:22px;height:22px;border-radius:4px;border:1px solid rgba(0,0,0,.08);}
.routetbl{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:10px;}
.routetbl th,.routetbl td{border:1px solid var(--border);padding:8px 10px;text-align:left;}
.routetbl th{background:var(--green);color:#fff;}
.routetbl tr:nth-child(even){background:var(--light);}
.scopenote{background:var(--light);border-left:3px solid var(--gold);padding:12px 16px;font-size:13.5px;color:var(--muted);margin:18px 0;}

/* ---------- admin/CEO dashboard grid ---------- */
.ceo-dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px;}
.ceo-stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;display:flex;align-items:center;gap:16px;transition:box-shadow .15s;}
.ceo-stat-card:hover{box-shadow:0 4px 16px -4px rgba(2,114,167,.2);}
.ceo-stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--green),var(--green-hover));color:#fff;font-size:18px;flex-shrink:0;}
.ceo-stat-info{display:flex;flex-direction:column;min-width:0;}
.ceo-stat-val{font-size:22px;font-weight:700;color:var(--green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ceo-stat-lbl{font-size:13px;color:var(--muted);margin-top:2px;}
.ceo-section-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--green);margin:22px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--gold);}
.ceo-section-title i{color:var(--gold);}

/* ---------- admin tables ---------- */
.ceo-table-wrap{overflow-x:auto;margin-bottom:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);}
.ceo-table{width:100%;border-collapse:collapse;font-size:14px;}
.ceo-table thead th{background:var(--green);color:#fff;text-align:left;padding:11px 14px;font-weight:600;font-size:13px;white-space:nowrap;position:sticky;top:0;}
.ceo-table tbody td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
.ceo-table tbody tr:last-child td{border-bottom:none;}
.ceo-table tbody tr:nth-child(even){background:var(--light);}
.ceo-table tbody tr:hover{background:#e3f1f8;}
.ceo-empty{padding:32px;text-align:center;color:var(--muted);font-size:14px;}

/* ---------- admin view layout ---------- */
.ceo-view-header{margin-bottom:16px;}
.ceo-view-header h3{font-size:16px;font-weight:700;color:var(--green);margin:0;}
.ceo-view-body{min-height:200px;}

/* ---------- admin pipeline cards ---------- */
.ceo-pipeline-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}

/* ---------- admin chart containers ---------- */
.adm-chart-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;}
.adm-chart-wrap .ceo-section-title{margin-top:0;}

/* ============================================================
   CEO-STYLE WIDGET SYSTEM — buttons/inputs/modals/kpi-cards/nav-items
   used by every role's newer render functions (staff.js: ceo*/lgl*/
   sec*/hrm*/aud*/enm*/eng* etc.) but never previously given CSS —
   these rendered as bare, unstyled browser-default form controls.
   This block is the single missing layer; every role picks it up at
   once since they all already emit these exact class names.
   ============================================================ */

/* -- buttons -- */
.ceo-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--surface);color:var(--ink);border:1.5px solid var(--border);border-radius:7px;padding:9px 16px;font-size:13.5px;font-weight:600;cursor:pointer;transition:background-color .15s,border-color .15s,box-shadow .15s;line-height:1.3;}
.ceo-btn:hover{border-color:var(--green);color:var(--green);}
.ceo-btn:active{background:var(--light);}
.ceo-btn-primary{background:var(--green);border-color:var(--green);color:#fff;}
.ceo-btn-primary:hover{background:var(--green-hover);border-color:var(--green-hover);color:#fff;box-shadow:0 2px 8px -2px rgba(2,114,167,.4);}
.ceo-btn-primary:active{background:var(--green-hover);}
.ceo-btn-sm,.ceo-btn.ceo-btn-sm{padding:6px 12px;font-size:12.5px;border-radius:6px;}
.ceo-btn:disabled{opacity:.55;cursor:not-allowed;}
.ceo-btn-close{background:none;border:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:5px;transition:background-color .15s,color .15s;}
.ceo-btn-close:hover{background:var(--light);color:var(--danger);}

/* -- form inputs (label + input/select/textarea pairs inside modals/forms) -- */
.ceo-modal-body label,.ceo-form-wrap label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin:14px 0 5px;}
.ceo-modal-body label:first-child,.ceo-form-wrap label:first-child{margin-top:0;}
.ceo-modal-body label[style*="font-weight:400"]{font-weight:400 !important;font-size:13.5px;margin:8px 0 !important;cursor:pointer;}
.ceo-input{display:block;width:100%;box-sizing:border-box;background:var(--surface);border:1.5px solid var(--border);border-radius:7px;padding:9px 12px;font-size:13.5px;color:var(--ink);font-family:inherit;transition:border-color .15s,box-shadow .15s;}
.ceo-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(2,114,167,.12);}
.ceo-input::placeholder{color:var(--muted);}
textarea.ceo-input{resize:vertical;min-height:70px;line-height:1.5;}
select.ceo-input{cursor:pointer;}
.ceo-modal-body input[type="checkbox"]{width:16px;height:16px;margin-right:8px;vertical-align:middle;accent-color:var(--green);cursor:pointer;}

/* -- modal system -- */
.ceo-modal{position:fixed;inset:0;background:rgba(15,25,30,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;animation:ceoFadeIn .15s ease-out;}
@keyframes ceoFadeIn{from{opacity:0;}to{opacity:1;}}
.ceo-modal-content{background:var(--surface);border-radius:12px;box-shadow:0 20px 60px -12px rgba(0,0,0,.35);width:100%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;}
.ceo-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--light);}
.ceo-modal-header h3{margin:0;font-size:16px;font-weight:700;color:var(--green);}
.ceo-modal-body{padding:18px 20px;overflow-y:auto;}
.ceo-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--border);background:var(--sand);}

/* -- kpi cards (ceo-kpi-* variant, used alongside the existing ceo-stat-* variant) -- */
.ceo-kpi-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.ceo-kpi-card,.kpi-card{flex:1 1 160px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;transition:box-shadow .15s;}
.ceo-kpi-card:hover,.kpi-card:hover{box-shadow:0 4px 16px -4px rgba(2,114,167,.2);}
.ceo-kpi-val,.kpi-val{font-size:24px;font-weight:800;color:var(--green);line-height:1.2;}
.ceo-kpi-lbl,.kpi-lbl{font-size:12.5px;color:var(--muted);margin-top:4px;}
/* FIX (2026-10-08 cross-reference audit): .kpi-card/.kpi-val/.kpi-lbl are
   used at 70+ call sites across virtually every staff dashboard (CEO, CFO,
   HR, Legal, Audit, Procurement, Partnerships, etc.) but were never
   actually defined anywhere in this stylesheet — every one of those KPI
   tiles has been rendering as an unstyled plain div with no card
   background/border/padding and no colored, enlarged number. Aliased onto
   the existing, already-correct .ceo-kpi-* rules rather than duplicating
   the declarations, so the two families can never visually drift apart. */

/* -- flat nav items (Engineer/Surveyor/Agro-style sidebars) + chevron -- */
.ceo-nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 34px;border-radius:7px;font-size:13.5px;color:#bcd0c2;cursor:pointer;transition:background-color .15s,color .15s;}
.ceo-nav-item:hover{background:rgba(255,255,255,.08);color:#fff;}
.ceo-nav-item.active{background:var(--gold);color:var(--green);font-weight:700;}
.ceo-chevron{margin-left:auto;font-size:10px;transition:transform .2s;}
.ceo-chevron.open,[aria-expanded="true"] .ceo-chevron{transform:rotate(180deg);}

/* -- search bar + panel header (Legal Officer / Auditor collapsible sections) -- */
.ceo-panel-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.ceo-panel-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;}
.ceo-search{flex:1 1 240px;max-width:320px;background:var(--surface);border:1.5px solid var(--border);border-radius:7px;padding:9px 14px;font-size:13.5px;color:var(--ink);transition:border-color .15s,box-shadow .15s;}
.ceo-search:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(2,114,167,.12);}
.ceo-badge{background:var(--light);color:var(--green);font-weight:700;font-size:12.5px;padding:4px 12px;border-radius:20px;}
.ceo-body{min-height:160px;}

/* -- loading state -- */
.ceo-loading{display:flex;align-items:center;gap:10px;padding:32px;justify-content:center;color:var(--muted);font-size:14px;}

/* -- inline pagination (used by hrm/sec Prev/Next) -- */
.ceo-page-info{margin:0 10px;font-size:12.5px;color:var(--muted);}

/* -- generic alert-warning variant (ERB reminder etc.) -- */
.ceo-alert-warning{background:#fff3cd;border:1px solid #ffe69c;color:#664d03;padding:.75rem 1rem;border-radius:var(--radius);margin-bottom:1rem;display:flex;align-items:center;gap:8px;}

/* -- form-wrap (inline forms rendered directly in a view body, not a modal) -- */
.ceo-form-wrap{background:var(--sand);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;}
.ceo-form-wrap h4{margin:0 0 4px;font-size:14px;color:var(--green);}

/* ============================================================
   ANNOUNCEMENT CAROUSEL — layout and interaction modelled on the
   National Bureau of Statistics Tanzania homepage (nbs.go.tz):
   a split text-panel + image slide, dot indicators, prev/next
   arrows, auto-rotation and a fade/slide-in caption. Colours are
   NBS's own published palette (primary teal-blue, secondary gold).
   ============================================================ */
.ann-carousel{
  --nbs-primary:#0272A7;   /* NBS primary teal-blue */
  --nbs-secondary:#EDC91E; /* NBS secondary gold */
  --nbs-accent:#80C3EC;    /* NBS accent light blue */
  --nbs-dark:#1c2529;      /* text-contrast only now — never a fill/background */
  /* Was var(--nbs-dark) (#2E2E2E, an off-brand charcoal) — showed as a flat
     black/near-black block behind any slide shorter than the carousel's
     min-height, or during the opacity fade between slides. */
  position:relative;background:var(--nbs-primary);overflow:hidden;
}
.ann-carousel-inner{position:relative;min-height:360px;}
.ann-slide{position:absolute;inset:0;display:flex;opacity:0;visibility:hidden;transition:opacity .5s ease;}
.ann-slide.active{position:relative;opacity:1;visibility:visible;}
.ann-slide-text{
  flex:0 0 40%;background:var(--nbs-primary);color:#fff;display:flex;align-items:center;
  padding:36px 40px;position:relative;z-index:2;
}
.ann-slide-text-in{opacity:0;transform:translateX(-40px);transition:opacity .7s ease .1s,transform .7s ease .1s;}
.ann-slide.active .ann-slide-text-in{opacity:1;transform:translateX(0);}
.ann-slide-text h3{color:#fff;font-size:1.5rem;line-height:1.3;margin:0;}
.ann-divider{width:64px;height:4px;background:var(--nbs-secondary);border:none;margin:14px 0;border-radius:2px;}
.ann-slide-text p{color:rgba(255,255,255,.92);font-size:14px;line-height:1.6;margin:0;}
.ann-slide-date{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nbs-secondary);margin-bottom:10px;}
.ann-readmore{cursor:pointer;color:var(--nbs-secondary)!important;}
.ann-readmore:hover{text-decoration:underline;}
.ann-slide-img{flex:1 1 60%;position:relative;background:linear-gradient(135deg,var(--nbs-primary),var(--nbs-accent));}
.ann-slide-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.ann-indicators{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:5;}
.ann-indicators button{width:9px;height:9px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:transparent;cursor:pointer;transition:.2s;}
.ann-indicators button:hover{background:rgba(255,255,255,.4);}
.ann-indicators button:active{background:var(--nbs-secondary);border-color:var(--nbs-secondary);}
.ann-indicators button.active{background:var(--nbs-secondary);border-color:var(--nbs-secondary);}
.ann-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;background:rgba(0,0,0,.28);border:none;
  color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:15px;display:flex;
  align-items:center;justify-content:center;transition:background-color .15s,color .15s;}
.ann-arrow:hover{background:var(--nbs-secondary);color:var(--nbs-dark);}
.ann-arrow:active{background:#c9ab18;color:var(--nbs-dark);}
.ann-arrow.prev{left:14px;}
.ann-arrow.next{right:14px;}
.ann-empty{padding:60px 20px;text-align:center;color:#cfe4ee;}
@media(max-width:760px){
  .ann-slide{flex-direction:column;}
  .ann-slide-text{flex:0 0 auto;padding:22px 22px 18px;}
  .ann-slide-img{flex:1 1 auto;min-height:200px;}
  .ann-carousel-inner{min-height:420px;}
}

/* ============================================================
   LATEST NEWS FEED — list layout modelled on nbs.go.tz's
   "Latest News" panel (thumbnail + title + excerpt + date,
   hover-lift, title recolours to brand on hover).
   ============================================================ */
.feed-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:10px;margin-bottom:18px;border-bottom:2px solid rgba(2,114,167,.14);}
.feed-head h5{margin:0;font-size:17px;font-weight:800;color:var(--green);}
.feed-item{position:relative;display:flex;gap:16px;padding:13px;margin-bottom:14px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.feed-month-heading{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--green);
  margin:22px 0 12px;padding-bottom:6px;border-bottom:2px solid rgba(2,114,167,.14);}
.feed-month-heading:first-child{margin-top:0;}
.feed-item:hover{transform:translateY(-2px);border-color:rgba(2,114,167,.35);box-shadow:0 10px 22px rgba(2,114,167,.12);}
.feed-item:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.feed-body{min-width:0;flex:1;}
.feed-title{font-size:15px;font-weight:700;color:var(--ink);line-height:1.35;margin:0 0 5px;transition:color .18s ease;}
.feed-item:hover .feed-title{color:var(--green);}
.feed-meta{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-bottom:4px;}
.feed-meta i{color:var(--green);opacity:.75;}
.feed-audience{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;background:var(--gold-light);color:#6b5405;margin-left:6px;}
.news-excerpt{font-size:14px;color:var(--muted);line-height:1.5;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.feed-item.expanded .news-excerpt{display:block;-webkit-line-clamp:unset;overflow:visible;}
.news-readmore{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:12.5px;font-weight:700;
  color:var(--green);}
.news-readmore i{font-size:10px;transition:transform .18s ease;}
.news-thumb{flex:0 0 130px;width:130px;height:90px;border-radius:9px;overflow:hidden;background:var(--light);
  display:flex;align-items:center;justify-content:center;}
.news-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.news-thumb i{font-size:22px;color:var(--green);opacity:.35;}
@media(max-width:600px){ .news-thumb{flex-basis:88px;width:88px;height:66px;} }

/* ============================================================
   E-LIBRARY — card-grid document browser (stats row, search,
   category chips, sort, file-type icons). Modelled on the general
   statistics-agency "document library" pattern (categorised
   materials, searchable, metadata-rich cards) since NBS's own LMIS
   is a JS application whose markup can't be inspected directly.
   ============================================================ */
.lib-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0 6px;}
.lib-stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center;}
.lib-stat i{font-size:20px;color:var(--green);margin-bottom:8px;display:block;}
.lib-stat .v{font-size:22px;font-weight:800;color:var(--ink);line-height:1.2;}
.lib-stat .l{font-size:12px;color:var(--muted);margin-top:2px;}
@media(max-width:700px){ .lib-stat-row{grid-template-columns:repeat(2,1fr);} }

.lib-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px;}
.lib-search{flex:1 1 220px;max-width:320px;}
.lib-chips{display:flex;flex-wrap:wrap;gap:8px;flex:2 1 auto;}
.lib-chip{border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:12.5px;font-weight:600;
  padding:6px 14px;border-radius:999px;cursor:pointer;transition:all .15s ease;}
.lib-chip:hover{border-color:var(--green);color:var(--green);}
.lib-chip.active{background:var(--green);border-color:var(--green);color:#fff;}
.lib-sort{flex:0 0 auto;width:auto;}

.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.lib-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:16px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.lib-card:hover{transform:translateY(-3px);border-color:rgba(2,114,167,.35);box-shadow:0 12px 24px rgba(2,114,167,.12);}
.lib-card-icon{font-size:30px;margin-bottom:10px;}
.lib-card-body{flex:1;min-width:0;}
.lib-card-cat{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--green);background:rgba(2,114,167,.08);padding:2px 9px;border-radius:999px;margin-bottom:8px;}
.lib-card-title{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35;margin:0 0 8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lib-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:2px;}
.lib-card-meta i{color:var(--green);opacity:.75;margin-right:2px;}
.lib-card-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--border);}

/* ---------- responsive admin grids ---------- */
@media(max-width:980px){
  .field-row,.sector-grid,.news-grid,.foot-grid,.entry-grid,.kpi-row{grid-template-columns:1fr 1fr;}
  .ceo-dash-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:1fr 1fr;}
  /* Split-pane independent scrolling only makes sense side-by-side; once
     the sidebar stacks above the content on a narrow screen, both panes
     go back to natural page flow/scroll instead of two separate fixed-
     height scroll boxes. */
  .portal{flex-direction:column;height:auto;overflow:visible;}
  .psidebar{width:100%;height:auto;overflow:visible;}
  .pnav{overflow-y:visible;flex:none;min-height:0;}
  .pmain{height:auto;overflow-y:visible;}
  .hero h1{font-size:36px;}
}
@media(max-width:640px){
  .hero h1{font-size:28px;}
  .hero p{font-size:14.5px;}
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .foot-grid{grid-template-columns:1fr;}
  .field-row,.sector-grid,.news-grid,.entry-grid,.kpi-row,.stats-grid{grid-template-columns:1fr;}
  .ceo-dash-grid{grid-template-columns:1fr;}
  .sector-card-photo{height:260px;}
  .pnav{display:flex;overflow-x:auto;gap:4px;}
  .pnav a{white-space:nowrap;}
}

/* ---------- Constitution reader — Bible-style (2026-11-04) ---------- */
body.cr-open{overflow:hidden;}
.cr-overlay{position:fixed;inset:0;z-index:3000;background:rgba(6,20,26,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:stretch;justify-content:center;padding:clamp(0px,1.6vw,18px);}
.cr-shell{width:100%;max-width:1320px;display:flex;flex-direction:column;border-radius:clamp(0px,1.2vw,16px);overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);}
.cr-shell>*{flex:1 1 auto;min-height:0;}
.cr-loading,.cr-empty{background:#fbf8f1;color:#4a3f2c;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px;text-align:center;font-family:Georgia,"Times New Roman",serif;}
.cr-loading i,.cr-empty i{font-size:40px;color:#b8960f;}
.cr-loading i{animation:crPulse 1.4s ease-in-out infinite;}
@keyframes crPulse{50%{opacity:.4;transform:scale(.94);}}

.cr-app{--cr-bg:#fbf8f1;--cr-paper:#fffdf8;--cr-ink:#2b2418;--cr-muted:#7a6c55;--cr-line:#e8dfcd;--cr-accent:#9a7b0c;--cr-head:#062634;--cr-chap-bg:#f4eee1;
  display:flex;flex-direction:column;height:100%;min-height:0;background:var(--cr-bg);color:var(--cr-ink);font-size:var(--cr-size,19px);}
.cr-theme-sepia{--cr-bg:#f1e7d0;--cr-paper:#f7eedb;--cr-ink:#3b2f1c;--cr-muted:#806b4a;--cr-line:#dfd0ad;--cr-accent:#8a5a14;--cr-chap-bg:#eadcbc;}
.cr-theme-dark{--cr-bg:#11161a;--cr-paper:#151b20;--cr-ink:#e4ddd0;--cr-muted:#9b927f;--cr-line:#2a3238;--cr-accent:#e2c25a;--cr-head:#0b1215;--cr-chap-bg:#0f1418;}

.cr-top{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--cr-head);color:#f3ecd9;flex:0 0 auto;border-bottom:3px solid #EDC91E;}
.cr-book{min-width:0;flex:0 1 auto;margin-right:auto;}
.cr-book-kicker{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#EDC91E;font-weight:700;}
.cr-book-title{font-family:Georgia,"Times New Roman",serif;font-size:19px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;}
.cr-search{position:relative;flex:0 1 300px;min-width:140px;}
.cr-search i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:rgba(243,236,217,.6);font-size:13px;}
.cr-search input{width:100%;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;padding:0 12px 0 32px;font-size:14px;}
.cr-search input::placeholder{color:rgba(243,236,217,.55);}
.cr-search input:focus{outline:none;border-color:#EDC91E;background:rgba(255,255,255,.12);}
.cr-tools{display:flex;gap:6px;flex:0 0 auto;}
.cr-icon{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 9px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#f3ecd9;cursor:pointer;font-weight:700;font-size:14px;text-decoration:none;transition:background-color .15s,border-color .15s;}
.cr-icon sup{font-size:9px;margin-left:1px;}
.cr-icon:hover,.cr-icon.on{background:rgba(237,201,30,.18);border-color:#EDC91E;color:#fff;}
.cr-close:hover{background:#b42318;border-color:#b42318;}
.cr-menu-btn{display:none;}

.cr-body{flex:1 1 auto;min-height:0;display:flex;}
.cr-chapters{flex:0 0 300px;display:flex;flex-direction:column;min-height:0;background:var(--cr-chap-bg);border-right:1px solid var(--cr-line);}
.cr-chapters-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--cr-muted);}
.cr-chapters-head span{background:var(--cr-accent);color:var(--cr-paper);border-radius:999px;padding:1px 8px;letter-spacing:0;}
.cr-chapters ol{list-style:none;margin:0;padding:0 8px 8px;overflow-y:auto;flex:1 1 auto;}
.cr-chapters li a{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:9px;color:var(--cr-ink);text-decoration:none;font-size:13.5px;line-height:1.35;filter:none;}
.cr-chapters li a b{flex:0 0 26px;text-align:right;font-family:Georgia,serif;color:var(--cr-accent);}
.cr-chapters li a:hover{background:rgba(154,123,12,.1);}
.cr-chapters li a.on{background:var(--cr-head);color:#fff;}
.cr-chapters li a.on b{color:#EDC91E;}
.cr-chapters-foot{padding:10px 16px 14px;font-size:11px;color:var(--cr-muted);border-top:1px solid var(--cr-line);}

.cr-page{flex:1 1 auto;min-width:0;overflow-y:auto;scroll-behavior:smooth;outline:none;background:var(--cr-bg);}
.cr-article{max-width:44em;margin:0 auto;padding:clamp(22px,4vw,52px) clamp(18px,4vw,48px) 40px;background:var(--cr-paper);min-height:100%;box-shadow:0 0 0 1px var(--cr-line);}
.cr-chapter-head{text-align:center;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--cr-line);}
.cr-chapter-kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--cr-accent);font-weight:800;}
.cr-chapter-head h1{font-family:Georgia,"Times New Roman",serif;font-size:1.6em;line-height:1.2;color:var(--cr-ink);margin:10px 0 6px;font-weight:700;}
.cr-chapter-meta{font-size:12px;color:var(--cr-muted);}
.cr-text{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;line-height:1.75;}
.cr-text p{margin:0 0 .8em;text-align:justify;hyphens:auto;}
.cr-verse{padding-left:0;}
.cr-vn{font-family:"Plus Jakarta Sans",sans-serif;font-size:.62em;font-weight:800;color:var(--cr-accent);vertical-align:super;margin-right:.35em;letter-spacing:.02em;}
.cr-bullet{padding-left:1.4em;position:relative;}
.cr-bullet::before{content:"\2022";position:absolute;left:.4em;color:var(--cr-accent);}
.cr-sub{font-family:"Plus Jakarta Sans",sans-serif;font-size:.74em;letter-spacing:.14em;text-transform:uppercase;color:var(--cr-accent);margin:1.6em 0 .7em;font-weight:800;text-align:left;}
.cr-text mark{background:#f5e08a;color:inherit;border-radius:2px;padding:0 1px;}
.cr-theme-dark .cr-text mark{background:#7a6514;}
.cr-wait,.cr-note{font-family:"Plus Jakarta Sans",sans-serif;font-size:14px;color:var(--cr-muted);text-align:center !important;}
.cr-note a{color:var(--cr-accent);text-decoration:underline;}
.cr-pdfpage{display:block;margin:0 auto 14px;box-shadow:0 4px 18px rgba(0,0,0,.25);border-radius:4px;max-width:100%;height:auto;}
.cr-nav{display:flex;justify-content:space-between;gap:12px;margin-top:32px;padding-top:18px;border-top:1px solid var(--cr-line);}
.cr-navbtn{display:inline-flex;align-items:center;gap:12px;background:transparent;border:1px solid var(--cr-line);color:var(--cr-ink);border-radius:12px;padding:10px 16px;cursor:pointer;font-family:inherit;text-align:left;transition:border-color .15s,background-color .15s;}
.cr-navbtn small{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cr-muted);font-weight:700;}
.cr-navbtn span{font-weight:700;font-size:14px;}
.cr-navbtn i{color:var(--cr-accent);}
.cr-navbtn:hover{border-color:var(--cr-accent);background:rgba(154,123,12,.07);}
.cr-next{text-align:right;margin-left:auto;}
.cr-hit{display:block;padding:12px 14px;border:1px solid var(--cr-line);border-radius:12px;margin-bottom:10px;color:var(--cr-ink);text-decoration:none;font-family:"Plus Jakarta Sans",sans-serif;filter:none;}
.cr-hit:hover{border-color:var(--cr-accent);background:rgba(154,123,12,.06);}
.cr-hit-ref{font-size:12px;font-weight:800;color:var(--cr-accent);margin-bottom:4px;}
.cr-hit-text{font-family:Georgia,serif;font-size:15px;line-height:1.55;}

/* embedded (Legal Officer dashboard) */
.cr-inline{height:min(86vh,980px);border-radius:16px;overflow:hidden;border:1px solid #e3eaef;box-shadow:0 12px 32px -12px rgba(15,37,48,.25);}

@media(max-width:900px){
  .cr-menu-btn{display:inline-flex;}
  .cr-chapters{position:absolute;z-index:5;top:0;bottom:0;left:0;width:min(320px,86vw);transform:translateX(-104%);transition:transform .25s;box-shadow:20px 0 50px -20px rgba(0,0,0,.5);}
  .cr-chapters.open{transform:none;}
  .cr-body{position:relative;}
  .cr-search{display:none;}
  .cr-book-title{font-size:16px;}
  .cr-top{gap:8px;padding:8px 10px;}
}
@media(max-width:560px){
  .cr-overlay{padding:0;}
  .cr-shell{border-radius:0;}
  .cr-tools .cr-icon{min-width:34px;height:34px;padding:0 7px;}
  .cr-book-kicker{display:none;}
  .cr-text p{text-align:left;}
  .cr-navbtn{padding:8px 10px;}
}
@media print{
  .cr-top,.cr-chapters,.cr-nav{display:none !important;}
  .cr-overlay{position:static;background:none;padding:0;}
}
.cr-minor{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;font-size:1.02em;color:var(--cr-ink);margin:1.1em 0 .45em;}.cr-lead{font-weight:700;color:var(--cr-ink);}