/* ==========================================================================
   RUCUSO design system
   Single source of truth for every RUCUSO page: the public site, /admin/,
   /leader/ and /change-password/ all load this file.

   Contract: the class names and custom properties that existed before this
   redesign are still here, with the same names and the same meaning. The
   public index.html used to carry its own inline copy of these styles; that
   copy is gone and the public site links this file instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand -------------------------------------------------------------- */
  /* Navy/gold are the official Ruaha Catholic University brand colours
     (rucu.ac.tz uses #152d7a primary, #012758 secondary, #d6b161 accent).
     RUCUSO borrows them so the student platform reads as one institution. */
  --navy: #152d7a;
  --navy-700: #012758;
  --navy2: #24409b;
  --gold: #d6b161;
  --gold-soft: #e8d5a8;
  --gold-ink: #3a2c0c;
  /* Gold for small text on a light surface. The brand gold is a tint: on
     near-white it only reaches ~2.1:1, which fails WCAG AA for 12px labels.
     This is the same hue pushed dark enough to clear 4.5:1. */
  --gold-text: #7a5710;

  /* Surfaces ----------------------------------------------------------- */
  /* Warm white / milk white, never cold grey. --bg-alt is the soft cream
     used for tinted sections so the page alternates in tone, not in hue. */
  --bg: #fdfcf9;
  --bg-alt: #faf5ec;
  --cream: #faf5ec;
  --cream-soft: #f5eddd;
  --surface: #ffffff;
  --card: #ffffff;
  --border: #e9e2d6;
  --border-strong: #d8cdb8;

  /* Text --------------------------------------------------------------- */
  --text: #1e2330;
  --text-strong: #0f1219;
  --muted: #5a6272;
  /* Second-tier muted text. Always small (12px hints, meta rows), so it has
     to clear 4.5:1, not just look subtle. Must not be used on the dark
     footer — use --on-dark-muted there. */
  --muted-2: #646c7b;
  --on-dark: #ffffff;
  --on-dark-muted: #cdd8ee;

  /* Semantic ----------------------------------------------------------- */
  --ok: #14684a;
  --ok-bg: #e5f3ec;
  --warn: #96590b;
  --warn-bg: #fcf0dc;
  --crit: #a92e2e;
  --crit-bg: #fbe7e7;
  --info: #1a5290;
  --info-bg: #e8f0fa;

  /* Typography --------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;    /* 12px metadata            */
  --fs-sm: 0.8125rem;  /* 13px supporting copy     */
  --fs-base: 0.9375rem;/* 15px body                */
  --fs-md: 1rem;       /* 16px emphasised body     */
  --fs-lg: 1.125rem;   /* 18px card titles         */
  --fs-xl: 1.375rem;   /* 22px                     */
  --fs-2xl: 1.75rem;   /* 28px section titles      */
  --fs-3xl: 2.25rem;   /* 36px                     */
  --fs-4xl: 2.875rem;  /* 46px hero on desktop     */

  --lh-tight: 1.18;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* Spacing scale ------------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Radii -------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Elevation ---------------------------------------------------------- */
  /* Soft, blue-tinted shadows: they lift a white card off cream without the
     grey haze a neutral shadow leaves behind. */
  --shadow-sm: 0 1px 2px rgba(21, 45, 122, 0.06), 0 1px 1px rgba(15, 18, 25, 0.04);
  --shadow-md: 0 4px 14px rgba(21, 45, 122, 0.08), 0 2px 4px rgba(15, 18, 25, 0.05);
  --shadow-lift: 0 12px 30px rgba(21, 45, 122, 0.12);
  --shadow-header: 0 1px 0 rgba(21, 45, 122, 0.08), 0 4px 18px rgba(21, 45, 122, 0.06);

  /* Layout ------------------------------------------------------------- */
  --container: 1180px;
  --container-narrow: 760px;
  --header-h: 64px;
  --ring: 0 0 0 3px rgba(214, 177, 97, 0.45);
  --ring-info: 0 0 0 3px rgba(26, 82, 144, 0.28);

  /* Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  box-sizing: border-box;
}

/* Dark mode is opt-in only.
   This used to be a `prefers-color-scheme: dark` block, which made every
   visitor whose phone or laptop is set to dark get a near-black site — the
   "RUCUSO is too dark" complaint. Light is now the default appearance on
   every device; [data-theme="dark"] below is the only thing that turns it
   dark, and that only happens when the visitor taps the theme toggle.
   The dark palette itself is unchanged. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1120;
  --bg-alt: #0e1728;
  --surface: #131d2f;
  --card: #131d2f;
  --border: #24324a;
  --border-strong: #33435f;
  --text: #e9edf4;
  --text-strong: #f7f9fc;
  --muted: #9aa8bd;
  --muted-2: #8492a8;
  --on-dark-muted: #a9bad2;
  --ok: #4ec08d;
  --ok-bg: #0f2b21;
  --warn: #e0a955;
  --warn-bg: #2b2110;
  --crit: #f08585;
  --crit-bg: #2d1616;
  --info: #7db3e8;
  --info-bg: #12233a;
  --navy: #060d1a;
  --navy-700: #0a1526;
  --navy2: #10203a;
  --gold: #d6b161;
  --gold-soft: #d9bd7e;
  --gold-ink: #241b06;
  /* On a dark surface the brand gold is legible as-is, so the dark theme
     uses the soft gold for small text instead of the darkened --gold-text. */
  --gold-text: #d9bd7e;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 14px 32px rgba(0, 0, 0, 0.55);
}
:root[data-theme="light"] { color-scheme: light; }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* The UA rule for [hidden] is display:none, but any class that sets display
   (.utilitybar__item, .drawer, .card, ...) outranks it and the element stays
   visible. app.js toggles the hidden attribute all over the place, so make it
   win. */
[hidden] { display: none !important; }

html {
  height: 100%;
  scroll-behavior: smooth;
  /* anchors must clear the sticky header */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4) + env(safe-area-inset-top, 0px));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* the old build put env(safe-area-inset-*) on :root, which padded the whole
     document. It belongs on the elements that actually sit against the edge. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3);
  color: var(--text-strong);
  line-height: var(--lh-snug);
  font-weight: 700;
  letter-spacing: -0.011em;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--info); }
img { max-width: 100%; height: auto; display: block; }
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }
::selection { background: var(--gold-soft); color: var(--gold-ink); }

/* --------------------------------------------------------------------------
   3. Accessibility
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -100px;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  border-radius: 3px;
}
.btn:focus-visible,
a:focus-visible,
.pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 768px) { .container { padding-inline: var(--sp-5); } }

.container-narrow { max-width: var(--container-narrow); }

main { display: block; }

.section {
  padding-block: var(--sp-7);
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}
.section--tint { background: var(--bg-alt); }
.section--edge { border-top: 1px solid var(--border); }
@media (min-width: 900px) { .section { padding-block: var(--sp-8); } }

.section + .section { border-top: 1px solid var(--border); }
.section--tint + .section:not(.section--tint),
.section:not(.section--tint) + .section--tint { border-top: 0; }

.stack > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-5); }

/* Section heading ------------------------------------------------------- */
.sechead { margin-bottom: var(--sp-5); max-width: 62ch; }
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--sp-2);
}
.eyebrow__count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--navy);
  text-align: center;
  letter-spacing: 0;
}

.sectitle {
  font-size: var(--fs-2xl);
  margin: 0 0 var(--sp-2);
  letter-spacing: -0.02em;
}
@media (min-width: 768px) { .sectitle { font-size: var(--fs-3xl); } }

.secsub {
  color: var(--muted);
  font-size: var(--fs-md);
  margin: 0;
  line-height: var(--lh-body);
}

.sectionhead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.sectionhead-row .sechead { margin-bottom: 0; }

/* Grids ----------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid-2, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   5. Utility bar
   -------------------------------------------------------------------------- */
.utilitybar {
  background: var(--navy-700);
  color: var(--on-dark-muted);
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.utilitybar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 38px;
  flex-wrap: wrap;
}
.utilitybar a { color: var(--on-dark-muted); text-decoration: none; }
.utilitybar a:hover { color: #fff; text-decoration: underline; }
.utilitybar__group {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.utilitybar__item { display: inline-flex; align-items: center; gap: 6px; }
.utilitybar__item svg { width: 13px; height: 13px; opacity: 0.75; flex: none; }
/* the bare links here are 12px/20px, under the 24px AA target minimum */
.utilitybar__item a { display: inline-block; padding: 4px 2px; min-height: 24px; line-height: 16px; }
.utilitybar__item a:hover { color: #fff; }
/* the second group is secondary information — drop it on small screens */
@media (max-width: 860px) {
  .utilitybar__group--secondary { display: none; }
  .utilitybar .container { justify-content: center; }
}

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.siteheader {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-header);
}
.siteheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}
@media (max-width: 559px) {
  .siteheader__inner { gap: var(--sp-2); }
  .siteheader .brand__sub { display:none; }
  .siteheader .brand__crest { width:32px; height:32px; }
  .siteheader .brand__mark { width:32px; height:32px; }
  .siteheader .brand__logo { width:28px; height:28px; }
  .siteheader .brand__name { font-size:1.05rem; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex: none;
}
/* The brand lockup pairs the official Ruaha Catholic University crest with
   the RUCUSO wordmark. The crest is a transparent PNG, so it sits directly on
   the header without a plate; the hairline ring only exists to give it an edge
   against the cream sections. */
.brand__mark {
  width: 38px; height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.brand__logo { width: 34px; height: 34px; object-fit: contain; }
/* The historical .brand__crest is still used by the admin/leader headers, so
   it keeps its original look. */
.brand__crest {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  flex: none;
  border: 1.5px solid var(--gold);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.01em;
}
:root[data-theme="dark"] .brand__name,
:root:not([data-theme="light"]) .brand__name { color: var(--text-strong); }
.brand__sub { font-size: 0.6875rem; color: var(--muted); letter-spacing: 0.01em; }

.navlist {
  display: none;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navlist a {
  display: block;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.navlist a:hover { background: var(--bg-alt); color: var(--navy); }
:root[data-theme="dark"] .navlist a:hover { color: var(--text-strong); }
.navlist a[aria-current="page"] {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
}
@media (min-width: 1040px) { .navlist { display: flex; } }

.headeractions { display: none; align-items: center; gap: var(--sp-2); }
@media (min-width: 1040px) { .headeractions { display: flex; } }

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  flex: none;
}
.hamburger:hover { background: var(--bg-alt); }
.hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.hamburger span::before,
.hamburger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease);
}
.hamburger span::before { top: -6px; }
.hamburger span::after { top: 6px; }
.hamburger[aria-expanded="true"] span { background: transparent; }
.hamburger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1040px) { .hamburger { display: none; } }

/* Mobile drawer --------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}
.drawer.active { display: block; }
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 18, 32, 0.55);
  animation: fade var(--dur) var(--ease);
}
.drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 86vw);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: slidein var(--dur) var(--ease);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@keyframes slidein { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
}
.drawer__close {
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.drawer__close:hover { background: var(--bg-alt); }
.drawer__body { padding: var(--sp-3) var(--sp-4) var(--sp-5); }
.drawer__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: var(--sp-4) 0 var(--sp-2);
}
.drawer__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-md);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.drawer__link:hover { background: var(--bg-alt); }
.drawer__link svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.drawer__link--cta {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  justify-content: center;
}
.drawer__link--cta:hover { background: var(--navy2); }
.drawer__link--cta svg { color: var(--gold); }
.drawer__sep { border: 0; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }

body.drawer-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(214, 177, 97, 0.20) 0%, transparent 58%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy2) 100%);
  z-index: -3;
}
.hero__canvas { position:absolute; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none; }
/* faint institutional rule pattern, kept very low contrast */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 68px
  );
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 88%);
}
.hero__inner {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-7) var(--sp-7);
}
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: var(--sp-8);
    padding-block: var(--sp-8);
  }
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: var(--sp-4);
}
.hero__eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6.4vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
.hero__title em {
  display: block;
  font-style: normal;
  color: var(--gold-soft);
  font-size: 0.52em;
  letter-spacing: 0.01em;
  margin-top: var(--sp-3);
  line-height: 1.3;
}
.hero__lede {
  font-size: var(--fs-md);
  color: var(--on-dark-muted);
  max-width: 52ch;
  margin: 0 0 var(--sp-5);
}
@media (min-width: 768px) { .hero__lede { font-size: var(--fs-lg); } }

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.btnrow--center { justify-content: center; }

/* Hero side panel: the three things a student most often needs */
.hero__panel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  backdrop-filter: blur(2px);
}
.hero__panel h2 {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 var(--sp-4);
  font-weight: 700;
}
.hero__stat {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.hero__stat:last-child { border-bottom: 0; padding-bottom: 0; }
.hero__stat b {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: #fff;
  min-width: 2.4ch;
  line-height: 1;
}
.hero__stat span { font-size: var(--fs-sm); color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   8. Quick actions
   -------------------------------------------------------------------------- */
.quickgrid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .quickgrid { grid-template-columns: repeat(2, 1fr); } }
/* Four columns, not five: there are seven quick actions (HESLB verification and
   HESLB login are separate cards), and 4 + 3 reads better than 5 + 2. */
@media (min-width: 1000px) { .quickgrid { grid-template-columns: repeat(4, 1fr); } }

.quickcard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.quickcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold-soft);
}
.quickcard:active { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   8b. Viungo Muhimu (Important Links)
   -------------------------------------------------------------------------- */
.linkgrid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .linkgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .linkgrid { grid-template-columns: repeat(3, 1fr); } }

.linkcard {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.linkcard:hover,
.linkcard:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-strong);
  border-left-color: var(--gold);
}
.linkcard:active { transform: translateY(0); }
.linkcard:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

.linkcard__icon {
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  color: var(--navy);
  border: 1px solid var(--border);
}
:root[data-theme="dark"] .linkcard__icon { background: #16233d; color: var(--gold-soft); }
.linkcard__icon svg { width: 20px; height: 20px; }

.linkcard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.linkcard__title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 700;
  color: var(--text-strong);
  line-height: var(--lh-snug);
}
.linkcard__ext { font-size: 0.8em; color: var(--muted); }
.linkcard__note { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.linkcard__host {
  font-size: var(--fs-xs);
  color: var(--muted-2);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}
.quickcard__icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--info-bg);
  color: var(--info);
  flex: none;
}
.quickcard__icon svg { width: 21px; height: 21px; }
.quickcard--primary .quickcard__icon { background: var(--navy); color: var(--gold); }
.quickcard--ok .quickcard__icon { background: var(--ok-bg); color: var(--ok); }
.quickcard--warn .quickcard__icon { background: var(--warn-bg); color: var(--warn); }
.quickcard__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
  line-height: 1.3;
}
.quickcard__desc {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
  flex: 1;
}
.quickcard__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--info);
}
.quickcard:hover .quickcard__more svg { transform: translateX(3px); }
.quickcard__more svg { width: 13px; height: 13px; transition: transform var(--dur) var(--ease); }

/* --------------------------------------------------------------------------
   9. Cards (base contract used by the admin screens too)
   -------------------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:last-child { margin-bottom: 0; }
.card > h3:first-child, .card > h2:first-child { margin-top: 0; }
.card.hoverable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card--flush { padding: 0; overflow: hidden; }
.card--quiet { box-shadow: none; background: var(--bg-alt); }
.card--accent { border-left: 3px solid var(--gold); }
@media (min-width: 768px) { .card { padding: var(--sp-5); } }

/* grid3 is the historical class name used by the render functions */
.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.grid3 > .card { margin-bottom: 0; height: 100%; }
.grid3 .card h3 { color: var(--text-strong); font-size: var(--fs-lg); }

.muted { color: var(--muted); font-size: var(--fs-sm); }
.muted--lg { font-size: var(--fs-md); }
.err {
  color: var(--crit);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
  line-height: 1.5;
}
.err:empty { display: none; }
.ok-msg { color: var(--ok); font-size: var(--fs-sm); }
.ok-msg:empty { display: none; }

.link {
  color: var(--info);
  cursor: pointer;
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
}
.link:hover { text-decoration: underline; }
.link--danger { color: var(--crit); }

/* Stacked list of text links: bare .link is 17px tall, so give each row
   vertical padding to reach a usable touch target. */
.quicklinks {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.quicklinks li + li { border-top: 1px solid var(--border); }
.quicklinks .link {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 0;
  text-align: left;
  line-height: 1.35;
}
.quicklinks .link:hover { text-decoration: underline; }
.link--danger:hover { color: var(--crit); }

/* --------------------------------------------------------------------------
   10. Buttons
   -------------------------------------------------------------------------- */
button { font-family: inherit; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: var(--gold);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover:not(:disabled) { background: #b98c33; border-color: #b98c33; box-shadow: var(--shadow-md); }

.btn--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--navy:hover:not(:disabled) { background: var(--navy2); border-color: var(--navy2); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover:not(:disabled) { background: var(--bg-alt); border-color: var(--muted); }

.btn--onDark {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.btn--onDark:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.6); }

.btn--danger { background: var(--crit); color: #fff; border-color: var(--crit); }
.btn--danger:hover:not(:disabled) { filter: brightness(0.93); }

/* min 40px tall, not the 30px a text-sized pad gives — these are tap targets
   in a phone header */
.btn--sm { padding: 9px 14px; font-size: var(--fs-xs); min-height: 40px; display: inline-flex; align-items: center; }
.btn--block { width: 100%; }

/* historical class names — kept because app.js and the admin pages use them */
button.pri {
  background: var(--gold);
  color: var(--gold-ink);
  border: 1px solid var(--gold);
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  font-size: var(--fs-sm);
  width: 100%;
  margin-top: var(--sp-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
button.pri:hover:not(:disabled) { background: #b98c33; box-shadow: var(--shadow-md); transform: translateY(-1px); }
button.pri:active:not(:disabled) { transform: translateY(0); }
button.pri:disabled { opacity: 0.55; cursor: default; box-shadow: none; transform: none; }

button.sec {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
button.sec:hover { background: var(--bg-alt); border-color: var(--muted); }
button.sec svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
label,
.field__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  margin: var(--sp-4) 0 5px;
  letter-spacing: 0.02em;
}
.field__hint { font-size: var(--fs-xs); color: var(--muted-2); margin: 5px 0 0; }
.field__req { color: var(--crit); }

input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6779' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  padding-right: 36px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--ring);
}
input[readonly], input:disabled, select:disabled, textarea:disabled {
  background: var(--bg-alt);
  color: var(--muted);
  cursor: not-allowed;
}
input[type="file"] {
  padding: 9px 12px;
  background: var(--bg-alt);
  border-style: dashed;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}
input[type="checkbox"] {
  width: auto;
  min-width: 0;
  margin: 0;
  accent-color: var(--navy);
  transform: translateY(1px);
  flex: none;
}

.row2 { display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-3); }
@media (min-width: 620px) { .row2 { grid-template-columns: 1fr 1fr; } }

/* checkbox rows: label + box on one line, full-width click target */
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--sp-3) 0;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  line-height: 1.5;
  letter-spacing: 0;
}
.check:hover { border-color: var(--border-strong); }
.check input[type="checkbox"] { margin-top: 2px; }
.check--onPrivacy { background: var(--info-bg); border-color: transparent; }

/* --------------------------------------------------------------------------
   12. Badges, pills, status
   -------------------------------------------------------------------------- */
.pill {
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.5;
}
.pill.crit { background: var(--crit-bg); color: var(--crit); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.neutral { background: var(--bg-alt); color: var(--muted); }

/* historical status classes, generated from STCLASS in app.js */
.st-new { background: var(--info-bg); color: var(--info); }
.st-review { background: var(--warn-bg); color: var(--warn); }
.st-progress { background: var(--info-bg); color: var(--info); }
.st-resolved { background: var(--ok-bg); color: var(--ok); }
.st-closed { background: var(--ok-bg); color: var(--ok); }
.st-rejected { background: var(--crit-bg); color: var(--crit); }
.pr-low { background: var(--bg-alt); color: var(--muted); }
.pr-medium { background: var(--warn-bg); color: var(--warn); }
.pr-high { background: var(--crit-bg); color: var(--crit); }
.pr-critical { background: var(--crit); color: #fff; }

.tag {
  background: var(--warn-bg);
  color: var(--warn);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: 0.04em;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
}
.badge--live { background: var(--ok-bg); color: var(--ok); }
.badge--live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge--soon { background: var(--warn-bg); color: var(--warn); }
.badge--info { background: var(--info-bg); color: var(--info); }

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--muted-2);
}
.meta__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; flex: none; }

/* --------------------------------------------------------------------------
   13. Student services
   -------------------------------------------------------------------------- */
.svcgrid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .svcgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .svcgrid { grid-template-columns: repeat(3, 1fr); } }

.servicecard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.servicecard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--gold-soft); }
.servicecard:focus-visible { outline:2px solid var(--info); outline-offset:3px; }
@media (hover:hover) and (pointer:fine) {
  .servicecard:hover { transform: translateY(-4px) scale(1.01); }
}
@media (hover:none), (pointer:coarse) {
  .servicecard:hover { transform:none; box-shadow:var(--shadow-sm); border-color:var(--border); }
  .servicecard:active { transform:scale(.99); }
}
.servicecard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.servicecard__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.servicecard__icon svg { width: 22px; height: 22px; }
.servicecard__name { font-size: var(--fs-lg); font-weight: 700; margin: 0; color: var(--text-strong); }
.servicecard__desc { font-size: var(--fs-sm); color: var(--muted); margin: 0; flex: 1; line-height: 1.6; }
.servicecard__contact {
  font-size: var(--fs-sm);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
  word-break: break-word;
}
.servicecard__contact svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.servicecard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.servicecard__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--info);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.servicecard__cta svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.servicecard:hover .servicecard__cta svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   14. Announcements
   -------------------------------------------------------------------------- */
.annlayout { display: grid; gap: var(--sp-5); }
@media (min-width: 940px) { .annlayout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-6); } }

.annfeature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  height: 100%;
}
@media (min-width: 768px) { .annfeature { padding: var(--sp-6); } }
.annfeature__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.annfeature__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0;
  color: var(--text-strong);
}
@media (min-width: 768px) { .annfeature__title { font-size: var(--fs-2xl); } }
.annfeature__body { font-size: var(--fs-md); color: var(--muted); line-height: 1.7; margin: 0; }
.annfeature__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); }

.annlist { display: flex; flex-direction: column; }
.annitem {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  text-align: left;
  padding: var(--sp-4) 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: padding-left var(--dur) var(--ease);
}
/* Each list row is wrapped so the admin remove control can sit beside the
   card: the cards are <button>s, and a button cannot nest a button. The
   first/last-child edges therefore belong to the wrapper, not the card. */
.annitemwrap:first-child .annitem { padding-top: 0; }
.annitemwrap:last-child .annitem { border-bottom: 0; }
.annitem:hover { padding-left: 6px; }
.annitem__title { font-size: var(--fs-md); font-weight: 600; color: var(--text-strong); margin: 0; line-height: 1.4; }
.annitem:hover .annitem__title { color: var(--info); }
.annitem__excerpt {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Signed-in-admin controls. Hidden entirely for visitors by renderAnnouncements. */
.annadmin {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: 0 0 var(--sp-3);
}
.annFeatured .annadmin { padding-top: var(--sp-3); }
.annadmin__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.annadmin .link { min-height: 24px; padding: 4px 0; }

/* --------------------------------------------------------------------------
   15. Leadership
   -------------------------------------------------------------------------- */

/* The public directory stacks its sections top to bottom, highest first, so the
   reading order matches the chain of command. The non-ministry bands (executive,
   section) are one horizontal row each, defined by migration 016. The ministry
   posts (migration 016 split them into ministers / deputy_ministers /
   secretaries) are instead grouped per ministry into columns — see
   .ministrygrid below — so each ministry's Waziri, Naibu and Katibu sit
   together. #leaderGrid is the vertical stack; .leadertier is one section with
   its heading, and .leadgrid holds a band's cards in a single scrolling line. */
.leaderrows { display: block; }
.leadertier { margin-top: var(--sp-6); }
.leadertier:first-child { margin-top: 0; }
.leadertier__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: .01em;
}
.leadertier__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}
:root[data-theme="dark"] .leadertier__title::after {
  background: linear-gradient(90deg, var(--border), transparent);
}

.leadgrid {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.leadgrid > .leadercard {
  flex: 0 0 clamp(190px, 62vw, 250px);
  scroll-snap-align: start;
}

/* Ministries are grouped, not banded: one column per ministry holding its
   Waziri (top), Naibu Wizara (middle) and Katibu wa Wizara (bottom), so a
   whole ministry's leadership is read as one unit. Columns wrap onto new
   lines rather than scrolling sideways. */
.ministrygrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-4);
}
.ministrycol {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ministrycol__name {
  margin: 0;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-strong);
  text-align: center;
}
.ministrycol__team {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.ministrycol__team > .leadercard {
  width: 100%;
  padding: var(--sp-4) var(--sp-3);
}
.ministrycol__team > .leadercard .avatar {
  width: 72px;
  height: 72px;
}
.ministrycol__team > .leadercard .avatar svg {
  width: 32px;
  height: 32px;
}

.leadercard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
  height: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.leadercard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--gold-soft); }
/* Tap / click feedback. The hover lift above only answers a mouse, so on a
   touch device — where there is no hover — a press gave no visible response
   until the modal appeared. This gives every press an immediate, smooth
   answer: the card settles back a touch and its shadow tightens, so the tap
   reads as a physical press rather than a dead click. */
.leadercard:active {
  transform: translateY(0) scale(0.97);
  box-shadow: var(--shadow-sm);
  border-color: var(--gold-soft);
  transition: transform 90ms ease, box-shadow 90ms ease, border-color 90ms ease;
}
.avatar {
  width: 92px; height: 92px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-alt);
  border: 2px solid var(--border);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  font-size: 30px;
  overflow: hidden;
}
.avatar svg { width: 40px; height: 40px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leadercard__name { font-size: var(--fs-md); font-weight: 700; margin: var(--sp-2) 0 0; color: var(--text-strong); line-height: 1.3; }
.leadercard__role { font-size: var(--fs-sm); color: var(--info); font-weight: 600; margin: 0; }
.leadercard__ministry { font-size: var(--fs-xs); color: var(--muted-2); margin: 0; }
.leadercard__more {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--info);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.leadercard__more svg { width: 12px; height: 12px; transition: transform var(--dur) var(--ease); }
.leadercard:hover .leadercard__more svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   16. Documents
   -------------------------------------------------------------------------- */
.doclist { display: flex; flex-direction: column; }
.docitem {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
}
.docitem:first-child { padding-top: 0; }
.docitem:last-child { border-bottom: 0; padding-bottom: 0; }
.docitem__icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--info-bg);
  color: var(--info);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.docitem__icon svg { width: 19px; height: 19px; }
.docitem__main { min-width: 0; flex: 1; }
.docitem__title { font-size: var(--fs-md); font-weight: 600; margin: 0; color: var(--text-strong); }
.docitem__meta { font-size: var(--fs-xs); color: var(--muted-2); margin: 2px 0 0; }
.docitem__acts { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

/* --------------------------------------------------------------------------
   17. Tool views (verify / submit / track)
   -------------------------------------------------------------------------- */
.view { display: none; }
.view.active { display: block; }
.toolview { display: none; }
.toolview.active { display: block; }
.toolview__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.toolview__title { font-size: var(--fs-2xl); margin: 0 0 4px; }
.toolview__sub { color: var(--muted); font-size: var(--fs-sm); margin: 0; max-width: 60ch; }
.heslb-brand { display:flex; align-items:center; gap:12px; margin-bottom:var(--sp-3); }
/* Keeps "check your HESLB record on RUCUSO" and "log in to the official HESLB
   platform" visibly separate, so nobody mistakes one for the other. */
.heslb-split {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
  margin-bottom: var(--sp-4);
}
@media (min-width: 720px) { .heslb-split { grid-template-columns: repeat(2, 1fr); } }
.heslb-split__card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.heslb-split__card--ours { border-left: 3px solid var(--gold); background: var(--surface); }
.heslb-split__card h3 { margin: 6px 0 6px; font-size: var(--fs-md); }
.heslb-split__card p { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.heslb-split__card p:last-child { margin-bottom: 0; }
.heslb-split__tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
:root[data-theme="dark"] .heslb-split__tag { background: #16233d; }
.heslb-brand img { width:48px; height:48px; flex:none; object-fit:contain; }
.heslb-brand span { display:block; color:var(--muted); font-size:var(--fs-xs); font-weight:700; }
.heslb-brand .toolview__title { font-size:var(--fs-xl); margin:0; }
.heslb-steps { margin:var(--sp-4) 0 var(--sp-5); }
.toolpanel { max-width: 640px; margin-inline: auto; }
@media (min-width: 900px) { .toolpanel--wide { max-width: 780px; } }

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.backlink:hover { color: var(--navy); }
:root[data-theme="dark"] .backlink:hover { color: var(--text-strong); }
.backlink svg { width: 14px; height: 14px; }

/* verification ---------------------------------------------------------- */
.vcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) { .vcard { padding: var(--sp-6); } }
.vcard__mark {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
  flex: none;
}
.vcard__mark svg { width: 26px; height: 26px; }
.vcard__mark--ok { background: var(--ok-bg); color: var(--ok); }
.vcard__mark--err { background: var(--crit-bg); color: var(--crit); }
.vcard__mark--wait { background: var(--info-bg); color: var(--info); }
.vcard__mark--idle { background: var(--navy); color: var(--gold); }

.identity {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--ok);
}
.identity__row { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); }
.identity__row dt { color: var(--muted); min-width: 96px; flex: none; margin: 0; }
.identity__row dd { margin: 0; font-weight: 600; color: var(--text-strong); }

/* --------------------------------------------------------------------------
   18. Step wizard (feedback)
   -------------------------------------------------------------------------- */
.stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.stepper__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  text-align: center;
  min-width: 0;
}
/* connector line between steps */
.stepper__item::before {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(-50% + 15px);
  width: calc(100% - 30px);
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.stepper__item:first-child::before { display: none; }
.stepper__dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  position: relative;
  z-index: 1;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.stepper__label {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 600;
  line-height: 1.3;
  max-width: 100%;
}
.stepper__item[data-state="active"] .stepper__dot { background: var(--navy); border-color: var(--navy); color: #fff; }
.stepper__item[data-state="active"] .stepper__label { color: var(--text-strong); }
.stepper__item[data-state="done"] .stepper__dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.stepper__item[data-state="done"]::before { background: var(--ok); }
/* labels are noise on a phone — the dot plus the heading is enough */
@media (max-width: 620px) { .stepper__label { display: none; } }

/* Invisible hit targets over the stepper, so a completed step can be
   revisited without scrolling back up to the buttons.
   .stepper and #stepperJumps are siblings, so the shared .stepperwrap
   provides the containing block. The stepper is a flex row of 5 equal
   columns, so the overlay is a 5-column grid of the same width and each jump
   is dropped into its own step's column. Positioning it (rather than negative
   margins) is what keeps it correct: the stepper's height changes when
   .stepper__label is hidden under 620px, and the label also sits *below* the
   dot, so any margin-based guess drifts. */
.stepperwrap { position: relative; }
#stepperJumps {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* clicks on the gaps and labels fall through to the page */
  pointer-events: none;
  z-index: 3;
}
.stepper__jump {
  grid-row: 1;
  /* 44px circle over the 32px dot: wider than the 24px AA minimum and
     centred on the dot it stands in for */
  align-self: start;
  justify-self: center;
  width: 44px;
  height: 44px;
  margin-top: -6px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  pointer-events: auto;
}
.stepper__jump[data-goto="2"] { grid-column: 2; }
.stepper__jump[data-goto="3"] { grid-column: 3; }
.stepper__jump[data-goto="4"] { grid-column: 4; }
.stepper__jump[data-goto="5"] { grid-column: 5; }
.stepper__jump:disabled { cursor: default; }
.stepper__jump:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.fstep { display: none; }
.fstep.active { display: block; animation: fadein var(--dur) var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.fstep__q {
  font-size: var(--fs-xl);
  font-family: var(--font-display);
  margin: 0 0 var(--sp-2);
  color: var(--text-strong);
}
.fstep__hint { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); }

.choicegrid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .choicegrid { grid-template-columns: repeat(2, 1fr); } }

.choice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.choice:hover { border-color: var(--border-strong); background: var(--bg-alt); }
.choice__icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.choice__icon svg { width: 19px; height: 19px; }
.choice__label { font-weight: 600; font-size: var(--fs-md); display: block; }
.choice__desc { font-size: var(--fs-xs); color: var(--muted); display: block; margin-top: 1px; }
.choice[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--bg-alt);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.choice[aria-pressed="true"] .choice__icon { background: var(--navy); color: var(--gold); }

.fstep__nav {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.fstep__nav .btn { margin-top: 0; }
.fstep__nav .btn--primary { flex: 1; }
@media (max-width: 480px) {
  .fstep__nav { flex-direction: column-reverse; align-items: stretch; }
}

/* success ---------------------------------------------------------------- */
.refbox {
  text-align: center;
  padding: var(--sp-5);
  background: var(--ok-bg);
  border: 1px solid var(--ok);
  border-radius: var(--radius);
  margin: var(--sp-4) 0;
}
.refbox__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ok); font-weight: 700; }
.refbox__code {
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-strong);
  margin: var(--sp-2) 0;
  word-break: break-all;
}
.refbox__hint { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   19. Track timeline
   -------------------------------------------------------------------------- */
.trackresult__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.trackresult__ref {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-strong);
  margin: 0;
  word-break: break-all;
}
.trackresult__status { font-size: var(--fs-sm); color: var(--muted); margin: 4px 0 0; }
.metagrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0 0;
}
.metagrid dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 3px;
}
.metagrid dd { font-size: var(--fs-sm); color: var(--text-strong); margin: 0; font-weight: 600; }
.notebox {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
}
.notebox__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 6px;
}
.notebox p:last-child { margin: 0; white-space: pre-wrap; line-height: 1.7; }

.timeline { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.timeline__item {
  position: relative;
  padding: 0 0 var(--sp-5) 30px;
  min-height: 34px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: 10px; top: 20px; bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline__item:last-child::before { display: none; }
.timeline__dot {
  position: absolute;
  left: 0; top: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}
.timeline__dot svg { width: 12px; height: 12px; }
.timeline__name { font-size: var(--fs-md); font-weight: 600; color: var(--muted); margin: 0; line-height: 1.4; }
.timeline__when { font-size: var(--fs-xs); color: var(--muted-2); margin: 2px 0 0; }

.timeline__item[data-state="done"] .timeline__dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.timeline__item[data-state="done"]::before { background: var(--ok); }
.timeline__item[data-state="done"] .timeline__name { color: var(--text); }
.timeline__item[data-state="current"] .timeline__dot {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 0 0 4px var(--info-bg);
}
.timeline__item[data-state="current"] .timeline__name { color: var(--text-strong); font-weight: 700; }
.timeline__item[data-state="current"] .timeline__when { color: var(--info); font-weight: 600; }

.summarylist { display: flex; flex-direction: column; gap: 0; margin: 0; }
.summarylist__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.summarylist__row:last-child { border-bottom: 0; }
.summarylist__row dt { color: var(--muted); margin: 0; }
.summarylist__row dd { margin: 0; font-weight: 600; text-align: right; }

/* --------------------------------------------------------------------------
   20. States: loading, empty, error
   -------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-alt) 25%, var(--border) 37%, var(--bg-alt) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skel-line { height: 12px; margin-bottom: 9px; }
.skel-line:last-child { margin-bottom: 0; width: 62%; }
.skel-title { height: 17px; width: 45%; margin-bottom: 14px; }
.skel-card { height: 148px; border-radius: var(--radius); }
.skel-avatar { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 12px; }

.statebox {
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--muted);
}
.statebox__icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
}
.statebox__icon svg { width: 22px; height: 22px; }
.statebox__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 4px;
}
.statebox p { font-size: var(--fs-sm); margin: 0 auto; max-width: 46ch; }
.statebox--error { border-color: var(--crit); background: var(--crit-bg); }
.statebox--error .statebox__icon { color: var(--crit); background: var(--surface); }
.statebox--error .statebox__title { color: var(--crit); }
.statebox--ok { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.statebox--ok .statebox__icon { color: var(--ok); }
.statebox--busy .statebox__icon { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.spinner {
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -2px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.emptystate { text-align: center; padding: var(--sp-6) var(--sp-4); color: var(--muted); }
.emptystate .glyph { font-size: 28px; margin-bottom: var(--sp-2); opacity: 0.6; display: block; }
.emptystate p { margin: 0; font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   21. Modals
   -------------------------------------------------------------------------- */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(9, 18, 32, 0.55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 120;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.modal-bg.active { display: flex; animation: fade var(--dur) var(--ease); }
.modal {
  background: var(--card);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--sp-5);
  box-shadow: var(--shadow-lift);
  animation: sheetup var(--dur) var(--ease);
}
@keyframes sheetup { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) {
  .modal-bg { align-items: center; padding: var(--sp-4); }
  .modal { border-radius: var(--radius-lg); animation: fadein var(--dur) var(--ease); }
}
.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.modal__head h3, .modal__head h2 { margin: 0; }
.badge-close {
  float: right;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 4px 6px;
  border-radius: 6px;
  flex: none;
}
.badge-close:hover { background: var(--bg-alt); color: var(--text); }

/* --------------------------------------------------------------------------
   22. RUCUSO AI — floating assistant
   -------------------------------------------------------------------------- */
.aifab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px 12px 14px;
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.aifab:hover { transform: translateY(-2px); background: var(--navy2); }
.aifab::after { content:""; position:absolute; inset:-4px; border:1px solid rgba(214,177,97,.42); border-radius:inherit; animation:aipulse 2.8s ease-out infinite; pointer-events:none; }
@keyframes aipulse { 0% { opacity:.65; transform:scale(.96); } 100% { opacity:0; transform:scale(1.16); } }
.aifab svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.aifab__label { display: none; }
@media (min-width: 560px) { .aifab__label { display: inline; } }

.aipanel {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 130;
  width: min(380px, calc(100vw - 32px));
  height: min(540px, calc(100vh - 32px));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.aipanel.active { display: flex; animation: aipop var(--dur) var(--ease); }
.aipanel[aria-hidden="true"] { visibility:hidden; }
.aipanel.active[aria-hidden="false"] { visibility:visible; }
@keyframes aipop { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

.aipanel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--navy);
  color: #fff;
  flex: none;
}
.aipanel__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.aipanel__avatar svg { width: 18px; height: 18px; }
.aipanel__titles { min-width: 0; flex: 1; }
.aipanel__title { font-size: var(--fs-sm); font-weight: 700; margin: 0; color: #fff; line-height: 1.3; }
.aipanel__sub { font-size: var(--fs-xs); color: var(--on-dark-muted); margin: 0; }
.aipanel__close {
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.aipanel__close:hover { background: rgba(255, 255, 255, 0.22); }

.aipanel__log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--bg);
}
.chatline { margin: 0; font-size: var(--fs-sm); }
.chatline b, .bubble__who { color: var(--navy); }

.bubble {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--fs-sm);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bubble--ai {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.bubble--me {
  align-self: flex-end;
  background: var(--navy);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.bubble--pending { opacity: 0.6; font-style: italic; }
.bubble__who {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}
.bubble__text { margin: 0; white-space: pre-wrap; }

.aipanel__foot {
  flex: none;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.aipanel__foot input { flex: 1; min-width: 0; }
.aipanel__foot .btn { margin-top: 0; flex: none; }
.aipanel__hint {
  font-size: var(--fs-xs);
  color: var(--muted-2);
  padding: 0 var(--sp-3) var(--sp-3);
  background: var(--surface);
  text-align: center;
  margin: 0;
  flex: none;
}

/* On a phone the panel becomes a bottom sheet that stops short of the FAB
   so the launcher is never buried under the conversation. */
@media (max-width: 559px) {
  .aipanel {
    right: 8px;
    left: 8px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: auto;
    height: min(64vh, calc(100vh - 120px));
  }
  .aifab {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
  }
  #main { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 559px) and (max-height: 620px) {
  .aipanel { height: calc(100vh - 108px - env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   23. Toast
   -------------------------------------------------------------------------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: var(--navy2);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  z-index: 200;
  box-shadow: var(--shadow-lift);
  max-width: min(92vw, 460px);
  display: none;
  animation: toastin var(--dur) var(--ease);
  text-align: center;
}
#toast.err { background: var(--crit); }
#toast.ok { background: var(--ok); }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* keep clear of the AI launcher */
@media (max-width: 900px) {
  #toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

.srcline { font-size: var(--fs-xs); color: var(--muted-2); margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   24. Tables
   -------------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th {
  color: var(--muted);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
tbody tr { transition: background var(--dur-fast) var(--ease); }
tbody tr:hover { background: var(--bg-alt); }
.twrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   25. Stats, bars, admin shell
   -------------------------------------------------------------------------- */
.statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.statgrid .card { margin-bottom: 0; text-align: center; padding: var(--sp-4) var(--sp-3); }
.statgrid .card b { display: block; font-size: 1.75rem; color: var(--navy2); line-height: 1.1; font-weight: 700; }
:root[data-theme="dark"] .statgrid .card b,
:root:not([data-theme="light"]) .statgrid .card b { color: var(--gold-soft); }
.statgrid .card span { font-size: var(--fs-xs); color: var(--muted); }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: var(--fs-2xl); }
.stat span { font-size: var(--fs-xs); color: var(--muted); }

.dashboard-summary { margin-bottom: var(--sp-4); }
.dashboard-summary__head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.dashboard-summary__head h3 { margin:0 0 4px; }
.dashboard-summary__head p { margin:0; color:var(--muted); font-size:var(--fs-sm); }
.dashboard-summary__head a { flex:none; font-size:var(--fs-sm); font-weight:600; }
.dashboard-status-list { display:grid; gap:10px; }
.dashboard-status-row { display:grid; grid-template-columns:minmax(112px, 1fr) minmax(80px, 2fr) 32px; align-items:center; gap:10px; font-size:var(--fs-sm); }
.dashboard-status-row__label { color:var(--muted); }
.dashboard-status-row__track { display:block; height:9px; overflow:hidden; border:1px solid var(--border); border-radius:5px; background:var(--bg-alt); }
.dashboard-status-row__track > span { display:block; height:100%; border-radius:inherit; background:var(--gold); }
.dashboard-status-row > b { text-align:right; font-variant-numeric:tabular-nums; }

.bar-row { display: flex; align-items: center; gap: var(--sp-2); margin: 7px 0; font-size: var(--fs-xs); }
.bar-row > span:first-child { width: 128px; flex: none; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1; background: var(--bg-alt); border-radius: 4px; height: 9px; overflow: hidden; border: 1px solid var(--border); }
.bar-fill { height: 100%; background: var(--gold); border-radius: 4px; }

.pagehead { margin-bottom: var(--sp-4); }
.pagehead h2 { margin: 0 0 4px; font-size: var(--fs-xl); letter-spacing: -0.01em; }
.pagehead p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.pagehead .accent { display: inline-block; width: 26px; height: 3px; background: var(--gold); border-radius: 2px; margin-bottom: 8px; }

.layout { display: flex; gap: 0; min-height: calc(100vh - 60px); }
.sidebar {
  width: 224px;
  flex: none;
  background: var(--navy);
  color: #fff;
  padding: var(--sp-4) 10px;
}
.sidebar a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d6e0f0;
  text-decoration: none;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  margin-bottom: 3px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sidebar a.active { background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }
.sidebar a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.content { flex: 1; min-width: 0; padding: var(--sp-4); }
@media (min-width: 768px) { .content { padding: var(--sp-5); } }
@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%;
    display: flex;
    overflow-x: auto;
    gap: 4px;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar a { white-space: nowrap; margin-bottom: 0; }
}
.authwrap { max-width: 420px; margin: var(--sp-7) auto; padding: var(--sp-4); }

/* The admin/leader header predates the public header. It keeps the dark
   treatment it always had, now with the shared brand lockup. */
header.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--navy);
  color: #fff;
  padding: 12px var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  box-shadow: var(--shadow-header);
}
header.top .brand { display: flex; align-items: center; gap: 9px; }
header.top .brand .crest {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex: none;
}
header.top .brand b { font-size: var(--fs-md); letter-spacing: 0.3px; }
header.top .brand span { font-size: var(--fs-xs); color: var(--on-dark-muted); }

/* The public shell must stay full-bleed so the hero, tinted sections and
   footer can own the whole viewport width — the width limit lives on
   .container inside. Targeted by id on purpose: every admin/leader/login
   page has its own <main class="main|.content|.authwrap"> and a `main`
   selector would outrank those class rules and strip their width and
   padding. */
main#main {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  padding-bottom: var(--sp-7);
}
body.modal-open { overflow: hidden; }
/* settings-style CRUD lists */
.rowlist { display: flex; flex-direction: column; gap: var(--sp-2); }
.rowitem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rowitem:hover { box-shadow: var(--shadow-sm); border-color: var(--gold-soft); }
.rowitem .rowmain { min-width: 0; }
.rowitem .rowmain b { display: block; font-size: var(--fs-base); }
.rowitem .rowmain span.desc { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.rowitem .rowacts { display: flex; gap: var(--sp-3); flex: none; white-space: nowrap; }

.tabbtns { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.tabbtns button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.tabbtns button.active { background: var(--navy2); color: #fff; border-color: var(--navy2); box-shadow: var(--shadow-sm); }
.tabbtns button:hover:not(.active) { border-color: var(--gold); }

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--sp-5);
  text-align: center;
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dropzone:hover { border-color: var(--gold-soft); }
.dropzone.drag { border-color: var(--gold); background: rgba(214, 177, 97, 0.08); }

.hidden { display: none !important; }

/* --------------------------------------------------------------------------
   26. Footer
   -------------------------------------------------------------------------- */
.sitefooter {
  background: var(--navy);
  color: var(--on-dark-muted);
  padding-block: var(--sp-7) var(--sp-5);
  margin-top: var(--sp-8);
  padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
}
.footergrid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .footergrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footergrid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--sp-5); } }

.footerbrand { display: flex; flex-direction: column; gap: var(--sp-3); }
/* The footer is deep navy, so the transparent RUC crest needs a white plate
   behind it to stay legible — the same treatment rucu.ac.tz uses on its own
   footer logo. */
.footerbrand__mark {
  width: 52px; height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: #ffffff;
  padding: 6px;
}
.footerbrand__mark img { width: 100%; height: 100%; object-fit: contain; }
.footerbrand .brand__crest { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.footerbrand__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.footerbrand__tag { font-size: var(--fs-sm); color: var(--on-dark-muted); margin: 0; max-width: 40ch; line-height: 1.6; }
.footerbrand__acad {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--gold-soft);
  background: rgba(214, 177, 97, 0.14);
  border: 1px solid rgba(214, 177, 97, 0.3);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  align-self: flex-start;
}
.footerbrand__acad svg { width: 13px; height: 13px; }

.footercol h3 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 var(--sp-3);
}
:root[data-theme="dark"] .footercol h3,
:root:not([data-theme="light"]) .footercol h3 { color: var(--gold); }
.footercol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.footercol a, .footercol button.link {
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-family: inherit;
  background: none;
  border: 0;
  /* full-width rows with vertical padding: the text is 17px tall, which is
     far below the 44px touch-target minimum on its own */
  display: block;
  padding: 8px 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.footercol a:hover, .footercol button.link:hover { color: #fff; text-decoration: underline; }

.footercontact { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-sm); }
.footercontact__row { display: flex; align-items: flex-start; gap: 9px; }
.footercontact__row svg { width: 15px; height: 15px; color: var(--gold); flex: none; margin-top: 3px; }
.footercontact__row a { color: var(--on-dark-muted); text-decoration: none; word-break: break-word; }
.footercontact__row a:hover { color: #fff; text-decoration: underline; }
.footercontact__none { color: var(--on-dark-muted); font-style: italic; opacity: 0.85; }

.sitefooter__base {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--on-dark-muted);
}
.sitefooter__base p { margin: 0; }

.theme-toggle { min-width:38px; justify-content:center; padding-inline:9px; }
.theme-toggle svg { width:17px; height:17px; }
.announcement-ticker { display:flex; align-items:center; gap:12px; min-height:38px; padding:7px max(16px,calc((100vw - var(--container)) / 2)); background:var(--info-bg); color:var(--text); font-size:var(--fs-xs); }
.announcement-ticker__label { flex:none; color:var(--info); font-weight:800; }
.announcement-ticker button { min-width:0; padding:0; border:0; background:none; color:inherit; text-align:left; font:inherit; cursor:pointer; white-space:nowrap; animation:ticker-slide 28s linear infinite; }
.announcement-ticker:hover button,.announcement-ticker:focus-within button { animation-play-state:paused; }
@keyframes ticker-slide { from { transform:translateX(0); } to { transform:translateX(-18%); } }
.announcement-ticker button:focus-visible { outline:2px solid var(--info); outline-offset:3px; }
.reveal { opacity:0; transform:translateY(12px); transition:opacity 420ms var(--ease),transform 420ms var(--ease); transition-delay:var(--reveal-delay,0ms); }
.reveal.is-revealed { opacity:1; transform:none; }
.heslb-faculty-summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--sp-3); color:var(--muted); font-size:var(--fs-sm); }
.utilitybar time { font-variant-numeric:tabular-nums; white-space:nowrap; }

/* --------------------------------------------------------------------------
   26b. Modern refinements (2026)
   Subtle polish: button/card micro-interactions, glass header, modal easing
   -------------------------------------------------------------------------- */
.btn {
  transition: transform 0.2s cubic-bezier(0.3,0,0.2,1), box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary:hover { box-shadow: 0 4px 16px rgba(21,45,122,0.18); }
.btn--gold:hover { box-shadow: 0 4px 16px rgba(214,177,97,0.25); }

.leadercard,
.servicecard,
.annitem,
.quickaction {
  transition: transform 0.25s cubic-bezier(0.3,0,0.2,1), box-shadow 0.25s;
}
.leadercard:hover,
.servicecard:hover,
.annitem:hover,
.quickaction:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(21,45,122,0.10);
}

.hero__panel {
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.modal {
  transition: transform 0.25s cubic-bezier(0.3,0,0.2,1), opacity 0.25s;
}
.modal-bg:not(.active) .modal {
  transform: scale(0.96) translateY(8px);
  opacity: 0;
}
.modal-bg.active .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(21,45,122,0.08);
}

.siteheader {
  /* Solid fallback first: browsers without color-mix() keep a readable header,
     then the translucent glass takes over where it is supported. */
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
}

.annitemwrap {
  animation: ann-in 0.4s cubic-bezier(0.3,0,0.2,1) both;
  animation-delay: var(--i, 0ms);
}
@keyframes ann-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--bg-alt); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* --------------------------------------------------------------------------
   27. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .skeleton { background: var(--bg-alt); }
  .hero__canvas { display:none; }
  .aifab::after { animation:none; }
  .announcement-ticker button { animation:none; white-space:normal; }
  .reveal { opacity:1; transform:none; }
}

/* --------------------------------------------------------------------------
   28. Print
   -------------------------------------------------------------------------- */
@media print {
  .utilitybar, .siteheader, .sitefooter, .aifab, .aipanel, .drawer, #toast { display: none !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}