/* ============================================================
   IE Hub for Africa — Design System
   WCAG 2.2 AA · Inclusion Ribbon design language
   Fonts: Lexend (headings) + Atkinson Hyperlegible (body)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light;

  /* Brand ribbon colours (decorative) */
  --rb-purple: #1C4E7A;
  --rb-pink:   #ed559e;
  --rb-blue:   #1cb7ee;
  --rb-red:    #ed1c24;
  --rb-green:  #00a170;
  --rb-orange: #f7941d;

  /* Text-safe brand colours (≥ 4.5:1 on white where used as text) */
  --c-primary:        #0077B6;  /* Public site primary */
  --c-primary-hover:  #005A8C;
  --c-primary-deep:   #00496F;
  --c-primary-light:  #E6F4FA;
  --c-on-primary:     #FFFFFF;
  --c-pink-text:     #b0246a;
  --c-blue-text:     #00496F;
  --c-green-text:    #00734d;
  --c-red-text:      #c8102e;
  --c-orange-text:   #8a4a00;

  --c-ink:      #182433;
  --c-muted:    #49576A;
  --c-paper:    #ffffff;
  --c-wash:     var(--c-primary-light);
  --c-sand:     #fbf7f0;
  --c-border:   #C5D9E8;
  --c-dark:     #00496F;
  --c-dark-2:   #005A8C;
  --c-on-dark:  #EEF2F8;
  --c-on-dark-muted: #B9C6DB;
  --c-focus:    #0077B6;
  --c-focus-dark: #ffd23f;
  --c-link:     var(--c-primary-deep);

  /* Solid accent fill — toolbar, active nav, selected chips */
  --c-accent:       var(--c-primary);
  --c-accent-hover: var(--c-primary-hover);
  --c-on-accent:    var(--c-on-primary);

  --ribbon: linear-gradient(90deg,
      var(--rb-purple) 0 16.6%, var(--rb-pink) 16.6% 33.3%,
      var(--rb-purple) 33.3% 50%, var(--rb-orange) 50% 66.6%,
      var(--rb-green) 66.6% 83.3%, var(--rb-blue) 83.3% 100%);

  --font-head: "Lexend", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --arch: 999px 999px var(--radius-l) var(--radius-l);

  --shadow-1: 0 2px 10px rgba(0, 119, 182, 0.08);
  --shadow-2: 0 10px 34px rgba(0, 119, 182, 0.14);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --header-h: 4.5rem;
  --lh-body: 1.65;
  --para-gap: 1em;
  --letter: 0;
  --word: 0;
}

/* Member forum — blue, distinct from the public site's own blue tone */
body.site-forum {
  --c-primary:        #0057A8;
  --c-primary-hover:  #00427F;
  --c-primary-deep:   #00335F;
  --c-primary-light:  #E8F1FA;
  --c-on-primary:     #FFFFFF;
  --c-blue-text:      #00335F;
  --c-wash:           var(--c-primary-light);
  --c-border:         #B3CEE7;
  --c-dark:           #00335F;
  --c-dark-2:         #00427F;
  --c-focus:          #0057A8;
  --c-link:           var(--c-primary-deep);
  --c-accent:         var(--c-primary);
  --c-accent-hover:   var(--c-primary-hover);
  --c-on-accent:      var(--c-on-primary);
  --shadow-1: 0 2px 10px rgba(0, 87, 168, 0.09);
  --shadow-2: 0 10px 34px rgba(0, 87, 168, 0.16);
}

body.site-forum .site-header {
  --nav-gap: 1rem;
  --nav-pad-x: 0.78rem;
}
body.site-forum .header-inner {
  width: min(100% - 1.5rem, 96rem);
}
body.site-forum .site-header.nav-compact .nav-toggle { margin-inline-end: auto; }
body.site-forum .site-header.nav-compact .header-actions .btn { display: none; }
body.site-forum .site-header:not(.nav-compact) .btn-signout { display: none; }
@media (min-width: 76.0625rem) {
  body.site-forum .site-header:not(.nav-compact) .header-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
  }
  body.site-forum .site-header:not(.nav-compact) .header-inner > .main-nav {
    grid-area: 1 / 1;
    justify-self: start;
    flex: none;
    width: max-content;
    max-width: calc(100% - 18rem);
    z-index: 1;
  }
  body.site-forum .site-header:not(.nav-compact) .header-inner > .header-actions {
    grid-area: 1 / 1;
    justify-self: end;
    margin-inline-start: 0;
    z-index: 2;
  }
  body.site-forum .site-header:not(.nav-compact) .header-inner > .nav-toggle {
    grid-area: 1 / 1;
    justify-self: start;
    z-index: 2;
  }
  /* Minimal-nav pages render the brand as its own element instead of
     nesting it inside .main-nav (see partials/header.php) — give it the
     same left-anchored grid slot .main-nav would otherwise occupy. */
  body.site-forum .site-header:not(.nav-compact) .header-inner > .brand {
    grid-area: 1 / 1;
    justify-self: start;
    z-index: 2;
  }
}

.forum-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - var(--header-h) - 6px);
}
.forum-shell--sidebar {
  grid-template-columns: 16.5rem minmax(0, 1fr);
  padding-block-start: 0.85rem;
}
.forum-sidebar {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h) - 0.85rem);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--c-dark);
  color: var(--c-on-dark);
  padding: 1.3rem 0.85rem 2rem;
  border-radius: var(--radius-m);
}
.forum-shell--sidebar .forum-stage .container {
  margin-inline: 0;
  width: 100%;
  max-width: 92rem;
}
.forum-sidebar-title {
  margin: 0 0.75rem 1.1rem;
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 800;
  letter-spacing: -0.02em; color: #fff;
}
.forum-sidebar-kicker {
  margin: 0.4rem 0.75rem 0.45rem;
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #9EBFDE;
}
.forum-sidebar-kicker:not(:first-child) { margin-top: 1.4rem; }
.forum-sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
/* Phones only (the header keeps its own link on wider screens). */
.forum-sidebar .forum-sidebar-website { display: none; margin-block-end: 1rem; padding-block-end: 1rem; border-bottom: 1px solid rgba(255,255,255,0.15); }
.forum-sidebar-lang { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; color: rgba(255,255,255,0.85); font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; }
.forum-sidebar-lang select { max-width: 100%; min-height: 40px; border-radius: var(--radius-s); padding: 0.3rem 0.5rem; font-size: 1rem; }
.forum-sidebar a {
  display: flex; align-items: center; gap: 0.7rem;
  min-height: 44px; padding: 0.45rem 0.75rem;
  border-radius: 10px; color: var(--c-on-dark); text-decoration: none;
  font-family: var(--font-head); font-weight: 600; font-size: 0.92rem;
}
.forum-sidebar a svg { flex: none; opacity: 0.9; }
.forum-sidebar a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.forum-sidebar a[aria-current="page"] {
  background: var(--c-primary); color: var(--c-on-primary);
}
.forum-sidebar a[aria-current="page"] svg { opacity: 1; }
.forum-stage { min-width: 0; }
.forum-shell--sidebar .forum-stage { padding-inline: 1.5rem; }
.forum-page-head {
  padding-block: 1.35rem 0.2rem;
}
.forum-page-head h1 {
  margin: 0;
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
}
.hub-workspace .forum-panel { scroll-margin-top: calc(var(--header-h) + 1.2rem); }
.hub-workspace .forum-panel + .forum-panel {
  margin-top: 2.8rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--c-border);
}
@media (max-width: 56rem) {
  .forum-shell { grid-template-columns: 1fr; }
  .forum-sidebar {
    display: none;
    position: fixed; z-index: 300;
    inset-block: var(--header-h) 0;
    inset-inline-start: 0;
    width: min(85vw, 20rem);
    height: auto;
  }
  .forum-sidebar.open { display: block; }
  .forum-sidebar-backdrop {
    display: none;
    position: fixed; inset: var(--header-h) 0 0 0;
    background: rgba(10, 20, 15, 0.5);
    z-index: 299;
    border: none; padding: 0; margin: 0; cursor: pointer;
  }
  .forum-sidebar-backdrop.open { display: block; }
}
html[data-contrast="high"] .forum-sidebar { background: #000; border-inline-end: 2px solid #fff; }
html[data-contrast="high"] .forum-sidebar a[aria-current="page"] { background: #ffd23f; color: #000; }

/* ---------- Simplified top bar (logged-in forum pages) ----------
   Guests still get the full main-nav tab bar (unchanged, see above);
   once signed in, the same 7 links live in the left sidebar instead, so the
   top bar collapses to: logo, notifications, and a profile menu. This
   deliberately bypasses the .main-nav / nav-fits / nav-compact machinery
   above (built for measuring & collapsing the tab row), since there's no
   tab row here to measure. */
body.site-forum .site-header.header-simple .header-inner {
  display: flex; align-items: center; gap: 1rem;
}
body.site-forum .site-header.header-simple .brand { margin-inline-start: 0; order: 0; }
@media (max-width: 56rem) {
  /* Overrides the generic <=48rem mobile-fallback ordering above (built for
     the .main-nav/.header-actions pair), which would otherwise still apply
     here and scramble this row: logo stays first, toggle second, actions
     last. The extra "body" ancestor gives these the higher specificity they
     need to win regardless of source order. */
  /* The menu button sits in the right-hand group, straight after the
     messages icon; "Back to website" moves into the menu it opens. */
  body.site-forum .site-header.header-simple .nav-toggle { display: flex; order: 0; margin: 0; }
  body.site-forum .site-header.header-simple .simple-actions { order: 2; margin-inline-start: auto; }
  body.site-forum.has-forum-sidebar .site-header.header-simple .back-to-site { display: none; }
  .forum-sidebar .forum-sidebar-website { display: block; }
  /* The third-party language-switcher widget renders its own ~120px-wide
     dropdown once its script loads; there's no room for it once the row
     is down to logo + toggle + bell + profile on a phone screen. */
  body.site-forum .site-header.header-simple .gtranslate_wrapper { display: none; }
}
@media (max-width: 48rem) {
  body.site-forum .site-header.header-simple .brand img { width: 150px; }
}
.simple-actions { display: flex; align-items: center; gap: 0.7rem; margin-inline-start: auto; }
/* Forum landing / sign in / sign up: these pages drop the site nav, so give
   visitors arriving from a shared link a way back to the main website. */
.back-to-site {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-head); font-weight: 600; font-size: 0.92rem;
  color: var(--c-primary); text-decoration: none; white-space: nowrap;
}
.back-to-site:hover, .back-to-site:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
html[data-contrast="high"] .back-to-site { color: #ffd23f; }
/* Signed-in forum header is tight on phones (logo, bell, profile): keep the
   arrow and drop the words visually; screen readers still hear them. */
@media (max-width: 40rem) {
  .site-header.header-simple .back-to-site-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .site-header.header-simple .back-to-site { padding: 0.4rem; }
}

.profile-menu { position: relative; }
.profile-toggle {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: none; border: 1.5px solid transparent; cursor: pointer;
  padding: 0.3rem 0.6rem 0.3rem 0.3rem; border-radius: 999px;
  font-family: var(--font-head); color: var(--c-ink); min-height: 44px;
}
.profile-toggle:hover, .profile-toggle[aria-expanded="true"] { background: var(--c-wash); border-color: var(--c-border); }
.avatar-circle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--c-primary); color: var(--c-on-primary);
  font-family: var(--font-head); font-weight: 700; font-size: 0.82rem;
}
.profile-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.profile-name { font-weight: 700; font-size: 0.86rem; }
.profile-role { font-size: 0.72rem; color: var(--c-muted); font-weight: 500; }
.profile-toggle .dropdown-icon { flex: none; transition: transform 0.2s ease; }
.profile-toggle[aria-expanded="true"] .dropdown-icon { transform: rotate(180deg); }
@media (max-width: 34rem) { .profile-meta { display: none; } }
/* Phones: logo + menu button + back arrow + two bells + avatar needed ~430px
   and pushed the whole forum sideways. Tighten every piece so the row fits
   a 360px screen (tap targets stay at least 40px). */
@media (max-width: 30rem) {
  body.site-forum .site-header.header-simple .header-inner { gap: 0.5rem; }
  body.site-forum .site-header.header-simple .brand img { width: 118px; height: auto; }
  body.site-forum .site-header.header-simple .nav-toggle { width: 42px; height: 42px; }
  .site-header.header-simple .simple-actions { gap: 0.3rem; min-width: 0; }
  .site-header.header-simple .back-to-site { padding: 0.3rem; }
  .site-header.header-simple .notif-bell { min-width: 40px; min-height: 40px; padding-inline: 0.5rem !important; }
  .site-header.header-simple .profile-toggle { padding: 0.2rem; gap: 0; }
  .site-header.header-simple .profile-toggle .dropdown-icon { display: none; }
}

.profile-dropdown {
  position: absolute; top: calc(100% + 0.5rem); inset-inline-end: 0;
  min-width: 13rem; background: var(--c-paper);
  border: 1.5px solid var(--c-border); border-radius: var(--radius-m);
  box-shadow: var(--shadow-2); padding: 0.45rem;
  list-style: none; margin: 0; display: flex; flex-direction: column; gap: 0.15rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 250; pointer-events: none;
}
.profile-menu.is-open .profile-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.profile-dropdown a {
  display: flex; align-items: center; width: 100%;
  padding: 0.55rem 0.85rem; border-radius: var(--radius-s);
  font-size: 0.9rem; font-weight: 500; color: var(--c-ink); text-decoration: none;
}
.profile-dropdown a:hover, .profile-dropdown a:focus { background: var(--c-primary); color: var(--c-on-primary); }
.profile-dropdown-sep { border-top: 1px solid var(--c-border); margin-top: 0.25rem; padding-top: 0.25rem; }
html[data-theme="dark"] .profile-dropdown { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
html[data-contrast="high"] .profile-dropdown { background: #000; border: 2px solid #fff; }
html[data-contrast="high"] .profile-dropdown a { color: #fff; }
html[data-contrast="high"] .profile-dropdown a:hover, html[data-contrast="high"] .profile-dropdown a:focus { background: #333; color: #ffd23f; }
html[data-contrast="high"] .avatar-circle { background: #ffd23f; color: #000; }

/* ---------- Reader preferences (a11y toolbar) ---------- */

/* Text scale — 90 %–170 %, stepped by the toolbar */
html { font-size: calc(100% * var(--fs-scale, 1)); }

/* Line spacing — 2 levels */
html[data-spacing="1"] { --lh-body: 1.9; --para-gap: 1.35em; }
html[data-spacing="2"] { --lh-body: 2.3; --para-gap: 1.8em; }

/* Letter & word spacing — 2 levels */
html[data-letter="1"] { --letter: 0.06em; --word: 0.16em; }
html[data-letter="2"] { --letter: 0.12em; --word: 0.28em; }

/* Heavier text weight */
html[data-weight="bold"] body { font-weight: 600; }
html[data-weight="bold"] p, html[data-weight="bold"] li,
html[data-weight="bold"] a, html[data-weight="bold"] label,
html[data-weight="bold"] td, html[data-weight="bold"] th,
html[data-weight="bold"] dt, html[data-weight="bold"] dd,
html[data-weight="bold"] summary { font-weight: 600; }
html[data-weight="bold"] h1, html[data-weight="bold"] h2,
html[data-weight="bold"] h3, html[data-weight="bold"] h4,
html[data-weight="bold"] strong, html[data-weight="bold"] b { font-weight: 800; }

/* Text alignment override */
html[data-align] p, html[data-align] li, html[data-align] dd,
html[data-align] h1, html[data-align] h2, html[data-align] h3, html[data-align] h4,
html[data-align] blockquote { text-align: var(--a11y-align) !important; text-wrap: wrap; }
html[data-align="left"]   { --a11y-align: start; }
html[data-align="center"] { --a11y-align: center; }
html[data-align="right"]  { --a11y-align: end; }

/* Dyslexia-friendly font preference */
html[data-font="dyslexic"] {
  --font-body: Verdana, "Trebuchet MS", "Segoe UI", sans-serif;
  --font-head: Verdana, "Trebuchet MS", "Segoe UI", sans-serif;
  --letter: 0.025em;
  --word: 0.12em;
}
html[data-font="dyslexic"][data-letter="1"] { --letter: 0.08em; --word: 0.2em; }
html[data-font="dyslexic"][data-letter="2"] { --letter: 0.14em; --word: 0.3em; }

/* Highlight links */
html[data-hl-links="1"] a:not(.btn):not(.skip-link) {
  background: #fff3b0; color: #2b1a00 !important;
  text-decoration: underline; text-decoration-thickness: 2px;
  box-shadow: 0 0 0 2px #8a4a00; border-radius: 3px;
}
html[data-hl-links="1"] a.btn { box-shadow: 0 0 0 3px #8a4a00; }
html[data-contrast="high"][data-hl-links="1"] a:not(.btn):not(.skip-link) {
  background: #000; color: #ffd23f !important; box-shadow: 0 0 0 2px #ffd23f;
}

/* Highlight headings */
html[data-hl-titles="1"] h1, html[data-hl-titles="1"] h2,
html[data-hl-titles="1"] h3, html[data-hl-titles="1"] h4 {
  outline: 2px dashed var(--c-primary); outline-offset: 4px; border-radius: 4px;
}
html[data-contrast="high"][data-hl-titles="1"] h1, html[data-contrast="high"][data-hl-titles="1"] h2,
html[data-contrast="high"][data-hl-titles="1"] h3, html[data-contrast="high"][data-hl-titles="1"] h4 {
  outline-color: #ffd23f;
}

/* Stronger focus indicator */
html[data-focus="strong"] :focus-visible {
  outline: 4px solid var(--c-focus) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 8px rgba(11, 123, 184, 0.28) !important;
}

/* Large cursor */
html[data-cursor="big"], html[data-cursor="big"] * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'><path d='M6 2l20 13-8.5 1.6L22 27l-4 1.8-4.4-10.4L6 24z' fill='%23fff' stroke='%23241833' stroke-width='2' stroke-linejoin='round'/></svg>") 4 2, auto;
}
html[data-cursor="big"] a, html[data-cursor="big"] button,
html[data-cursor="big"] summary, html[data-cursor="big"] [role="button"] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'><path d='M12 3a2.5 2.5 0 015 0v10h1.5a3 3 0 013-3 3 3 0 013 3 3 3 0 013 3v6a7 7 0 01-7 7h-5a7 7 0 01-7-7v-8a2.5 2.5 0 015 0z' fill='%23fff' stroke='%23241833' stroke-width='2' stroke-linejoin='round'/></svg>") 12 2, pointer;
}

/* Colour filters — applied to page regions, never to the toolbar itself */
html[data-filter] body > *:not(.a11y-fab):not(.toolbar-panel):not(.a11y-guide):not(.a11y-backdrop) {
  filter: var(--a11y-filter);
}
html[data-filter="mono"]     { --a11y-filter: grayscale(1); }
html[data-filter="low-sat"]  { --a11y-filter: saturate(0.45); }
html[data-filter="high-sat"] { --a11y-filter: saturate(1.9); }

/* ---------- Dark theme (toolbar preference) ---------- */
/* The forum's body sets its own palette (body.site-forum), which would win
   over these html-level values by inheritance, so the themes are applied to
   that body too. */
html[data-theme="dark"],
html[data-theme="dark"] body.site-forum {
  color-scheme: dark;
  --c-primary: #9CC1EC;
  --c-primary-hover: #B5D3F3;
  --c-primary-deep: #C3DCF5;
  --c-primary-light: #1C2B47;
  --c-on-primary: #0E1524;
  --c-dark: #0B1220;
  --c-dark-2: #111A2E;
  --c-pink-text: #ff9dc8;
  --c-blue-text: #78d4f7;
  --c-green-text: #6fdcb4;
  --c-red-text: #ff9d9d;
  --c-orange-text: #ffc76e;
  --c-ink: #EEF2F8;
  --c-muted: #AAB9CE;
  --c-paper: #0E1524;
  --c-wash: #16213A;
  --c-sand: #16213A;
  --c-border: #33455F;
  --c-on-dark: #EEF2F8;
  --c-on-dark-muted: #B9C6DB;
  --c-link: #A9C7EE;
  --c-focus: #7fdcff;
  --c-accent: #3C6096;
  --c-accent-hover: #4C76B3;
  --c-on-accent: #ffffff;
  --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 10px 34px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] body { background: var(--c-paper); }
html[data-theme="dark"] .band-wash, html[data-theme="dark"] .band-sand { background: var(--c-wash); }
html[data-theme="dark"] .card, html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat, html[data-theme="dark"] .notice { background: var(--c-wash); }
html[data-theme="dark"] .site-header { background: var(--c-paper); border-block-end: 1px solid var(--c-border); }
html[data-theme="dark"] .btn-primary { background: #3C6096; color: #fff; }
html[data-theme="dark"] .btn-primary:hover { background: #4C76B3; }
html[data-theme="dark"] .btn-donate { background: #3C6096; color: #fff; }
html[data-theme="dark"] .btn-donate:hover { background: #4C76B3; color: #fff; }
html[data-theme="dark"] .btn-light { background: var(--c-wash); color: var(--c-ink); }
html[data-theme="dark"] .btn-ghost { background: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(0.92); }

/* Surfaces that hard-code a light colour need a dark counterpart, or their
   text disappears when the dark theme is on. The hero's own photos and scrim
   already read the same in both themes, so it needs no override here. */
html[data-theme="dark"] .page-banner {
  background:
    radial-gradient(40rem 22rem at 110% -30%, rgba(28, 183, 238, 0.18), transparent 60%),
    radial-gradient(36rem 22rem at -12% 130%, rgba(237, 85, 158, 0.15), transparent 60%),
    linear-gradient(150deg, #1A2738 0%, #142030 60%, #1C2633 100%);
}
html[data-theme="dark"] .chip { color: var(--c-ink); }
html[data-theme="dark"] .chip-green,
html[data-theme="dark"] .chip-blue,
html[data-theme="dark"] .chip-pink,
html[data-theme="dark"] .chip-orange {
  background: #0d3244;
  color: #8fdcff;
  border-color: #1a5c7a;
}
html[data-theme="dark"] .tag-pin { background: #1B2A44; color: #A9C7EE; border-color: #33455F; }
html[data-theme="dark"] .tag-hot { background: #3d1428; color: #ff9dc8; border-color: #6f2549; }
html[data-theme="dark"] .tag-solved,
html[data-theme="dark"] .badge-priv { background: #0f3a2c; color: #7fe8c4; border-color: #1c6b52; }
html[data-theme="dark"] .badge-priv.is-private { background: #3b2a12; color: #ffc76e; border-color: #6d4c1c; }
html[data-theme="dark"] .notice { background: #3b2a12; border-color: #6d4c1c; }
html[data-theme="dark"] .error-summary { background: #3a1418; }
html[data-theme="dark"] .success-box { background: #0f3a2c; }

/* Dark-ink artwork needs a light plate on a dark or black background */
html[data-theme="dark"] .brand img,
html[data-contrast="high"] .brand img { background: #fff; border-radius: var(--radius-s); padding: 0.25rem 0.45rem; }
html[data-theme="dark"] .partner-tile,
html[data-theme="dark"] .member-card .logo-box { background: #fff; border-radius: var(--radius-s); }

/* ---------- High-contrast theme ---------- */
html[data-contrast="high"],
html[data-contrast="high"] body.site-forum {
  color-scheme: dark;
  --c-primary: #ffd23f;
  --c-primary-hover: #ffe071;
  --c-primary-deep: #ffd23f;
  --c-primary-light: #000000;
  --c-on-primary: #000000;
  --c-pink-text: #ffb3d9;
  --c-blue-text: #7fdcff;
  --c-green-text: #7fe8c4;
  --c-red-text: #ff9d9d;
  --c-orange-text: #ffc76e;
  --c-ink: #ffffff;
  --c-muted: #f2f2f2;
  --c-paper: #000000;
  --c-wash: #000000;
  --c-sand: #000000;
  --c-border: #ffffff;
  --c-dark: #000000;
  --c-dark-2: #000000;
  --c-on-dark: #ffffff;
  --c-on-dark-muted: #f2f2f2;
  --c-focus: #00e0ff;
  --c-focus-dark: #00e0ff;
  --c-link: #ffd23f;
  --c-accent: #ffd23f;
  --c-accent-hover: #ffe071;
  --c-on-accent: #000000;
  --shadow-1: none;
  --shadow-2: none;
}
html[data-contrast="high"] .card,
html[data-contrast="high"] .panel,
html[data-contrast="high"] .thread,
html[data-contrast="high"] .stat,
html[data-contrast="high"] .toolbar-panel { border: 2px solid #fff !important; }
html[data-contrast="high"] a { text-decoration: underline; }
html[data-contrast="high"] img { filter: none; }
html[data-contrast="high"] .btn-primary,
html[data-contrast="high"] .btn-donate { background: #ffd23f !important; color: #000 !important; border: 2px solid #fff !important; }
html[data-contrast="high"] .btn-ghost, html[data-contrast="high"] .btn-outline { background: #000 !important; color: #ffd23f !important; border: 2px solid #ffd23f !important; }
html[data-contrast="high"] .ribbon, html[data-contrast="high"] .ribbon-mini { background: #ffd23f !important; }
html[data-contrast="high"] .hero { background: #000 !important; }
/* The slideshow's photos and scrim are decorative gradients/images of their
   own — hide them rather than let them sit, unreadable, over solid black. */
/* Page banners (the hero at the top of inner pages) keep a pale gradient that
   would swallow high-contrast white text: give them a solid black ground. */
html[data-contrast="high"] .page-banner { background: #000 !important; border-block-end: 2px solid #fff; }
html[data-contrast="high"] .page-banner::before, html[data-contrast="high"] .page-banner::after { display: none !important; }
html[data-contrast="high"] .hero-slides,
html[data-contrast="high"] .hero-scrim,
html[data-contrast="high"] .hero-slide-controls { display: none !important; }
html[data-contrast="high"] .chip { border: 1px solid #fff !important; }
/* Surfaces that hard-code a white fill would otherwise swallow their own text */
html[data-contrast="high"] .hero-eyebrow,
html[data-contrast="high"] .btn-light,
html[data-contrast="high"] .chip-green,
html[data-contrast="high"] .chip-blue,
html[data-contrast="high"] .chip-pink,
html[data-contrast="high"] .chip-orange,
html[data-contrast="high"] .tag-pin,
html[data-contrast="high"] .tag-hot,
html[data-contrast="high"] .tag-solved,
html[data-contrast="high"] .badge-priv,
html[data-contrast="high"] .auth-done .ring { background: #000; color: #ffd23f; border-color: #fff; }

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
html[data-motion="reduced"] { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  letter-spacing: var(--letter);
  word-spacing: var(--word);
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.18;
  color: var(--c-ink);
  margin: 0 0 0.55em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.08rem; }
p, ul, ol, dl { margin: 0 0 var(--para-gap); }
a { color: var(--c-link); text-underline-offset: 0.18em; }
a:hover { color: var(--c-primary-deep); }
/* A small size bump for links in prose/body copy on the public site only —
   nav pills, buttons and card titles set their own font-size, so this only
   reaches plain inline links (paragraphs, lists, footer, breadcrumbs). */
body:not(.site-forum) a { font-size: 1.05em; }
strong { font-weight: 700; }
main { display: block; }
::selection { background: var(--rb-purple); color: #fff; }

/* Focus — always visible, thick, offset (WCAG 2.4.11-13 aware) */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible, .site-footer :focus-visible, .band-dark :focus-visible {
  outline-color: var(--c-focus-dark);
}

/* Reduced motion — user toggle + OS preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;
}

/* ---------- 3. Utilities ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.container { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.container-narrow { width: min(100% - 2.5rem, 52rem); margin-inline: auto; }
/* A lead line allowed to run wider than its .container-narrow parent,
   still centred on it (used by the homepage newsletter intro). */
.lead-wide { width: min(100vw - 2.5rem, 62rem); position: relative; left: 50%; translate: -50% 0; }
.ribbon { height: 6px; background: var(--ribbon); }
.ribbon-mini { display: inline-block; width: 4.5rem; height: 5px; border-radius: 99px; background: var(--ribbon); margin-block-end: 1rem; }
.center { text-align: center; }
.center .ribbon-mini { margin-inline: auto; }
/* Text columns beside a photo that should centre once the layout stacks on
   phones (homepage "Who we serve", About "Our story" and "How we work"). */
@media (max-width: 40rem) {
  .center-on-mobile { text-align: center; }
  .center-on-mobile .chip-row { justify-content: center; }
}
.section-action,
.blog-section-actions {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.7rem; margin-top: 1.8rem;
}
.section-head .section-action { margin-top: 1.1rem; }
p:has(> .btn:only-child),
p:has(> .to-top:only-child) { text-align: center; }
.flow > * + * { margin-block-start: var(--space-2); }

/* Skip link */
.skip-link {
  position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 1000;
  background: var(--c-dark); color: #fff; padding: 0.8rem 1.4rem;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  font-family: var(--font-head); font-weight: 600; text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; color: #fff; outline: 3px solid var(--c-focus-dark); }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  min-height: 48px; padding: 0.65rem 1.5rem;
  border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn[hidden] { display: none; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; }
.btn svg { flex: none; }
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: var(--c-primary-hover); color: var(--c-on-primary); }
.btn-primary:active { background: var(--c-primary-deep); color: var(--c-on-primary); }
.btn-donate { background: var(--c-primary); color: var(--c-on-primary); }
.btn-donate:hover { background: var(--c-primary-hover); color: var(--c-on-primary); }
.btn-donate:active { background: var(--c-primary-deep); color: var(--c-on-primary); }
.btn-outline { background: transparent; color: var(--c-primary); border-color: currentColor; }
.btn-outline:hover { background: var(--c-primary-light); color: var(--c-primary-hover); }
.btn-ghost { background: rgba(255,255,255,0.14); color: #fff !important; border-color: rgba(255,255,255,0.65); }
.btn-ghost:hover { background: rgba(255,255,255,0.24); color: #fff !important; }
.btn-light { background: #fff; color: var(--c-primary-deep) !important; }
.btn-light:hover { background: var(--c-wash); color: var(--c-primary-deep) !important; }
.btn-sm { min-height: 40px; padding: 0.35rem 1.1rem; font-size: 0.92rem; }
/* Base row layout: a handful of pages scope their own gap/justify-content
   (.cta-band, .hub-welcome), but every .btn-row needs at least this to lay
   its buttons out horizontally — without it, a row of <form>-wrapped
   buttons (block-level by default) stacks one per line instead. */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.btn-row form { margin: 0; }

/* ---------- 5. Header ----------
   The bar has to hold up in five languages — the same eight links run about
   60% wider in Swahili than in English — as well as in RTL and at the
   toolbar's seven text-size steps. So every size that reacts to label length
   is a custom property: main.js measures the real row and walks the header
   down a ladder of denser values (NAV_STEPS); if the densest rung still
   overflows, it falls back to .nav-compact — the drawer — even on a wide
   viewport, rather than letting the link row itself scroll sideways. The
   values below are the top rung. Nothing here depends on the viewport alone. */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--c-paper);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  --brand-w: 220px;
  --nav-gap: 3.86rem;
  --nav-pad-x: 0.5rem;
  --nav-fs: 0.92rem;
  --act-gap: 0.6rem;
}
.utility-bar {
  background: rgba(24, 36, 51, 0.04);
  border-block-end: 1px solid var(--c-border);
}
.utility-inner {
  width: min(100% - 2rem, 82rem); margin-inline: auto;
  min-height: 3.15rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
  width: min(100% - 2rem, 82rem); margin-inline: auto;
}
/* Desktop: center nav on the full header width, not just the space after the logo. */
@media (min-width: 76.0625rem) {
  body:not(.site-forum) .site-header:not(.nav-compact) .header-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
  }
  body:not(.site-forum) .site-header:not(.nav-compact) .header-inner > .brand {
    grid-area: 1 / 1;
    justify-self: start;
    z-index: 2;
  }
  body:not(.site-forum) .site-header:not(.nav-compact) .header-inner > .main-nav {
    grid-area: 1 / 1;
    justify-self: end; /* lines the last link (Contact Us) up under the end of the search box */
    flex: none;
    width: max-content;
    max-width: 100%;
    z-index: 1;
  }
  body:not(.site-forum) .site-header:not(.nav-compact) .header-inner > .header-search {
    grid-area: 1 / 1;
    justify-self: end;
    z-index: 2;
  }
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: var(--brand-w); max-width: 100%; height: auto; object-fit: contain; padding-top: 5px; }
/* Nudge the logo in from the edge on desktop/laptop, roughly above where
   the nav row starts below it. Left as flush-left in the mobile/compact
   drawer state, where it needs to sit right next to the hamburger. */
.site-header:not(.nav-compact) .brand { margin-inline-start: 1.75rem; }
.header-search { position: relative; flex: none; margin-inline-start: auto; }
.header-search-icon {
  position: absolute; inset-inline-start: 0.8rem; top: 50%; translate: 0 -50%;
  pointer-events: none; color: var(--c-primary);
}
.header-search input[type="search"] {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-body); font-size: var(--nav-fs);
  color: var(--c-ink); background: var(--c-wash);
  border: 1.5px solid var(--c-border); border-radius: 999px;
  min-height: 44px; width: 12rem; max-width: 40vw;
  padding-block: 0.35rem; padding-inline: 2.4rem 1rem;
}
.header-search input[type="search"]:focus-visible {
  outline: 3px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-primary);
}
.header-search input[type="search"]::-webkit-search-cancel-button { appearance: none; }
.main-nav {
  flex: 1 1 auto;
  min-width: 0;
  margin-inline-start: 0;
}
.main-nav ul { list-style: none; display: flex; gap: var(--nav-gap); margin: 0; padding: 0; flex-wrap: nowrap; justify-content: center; align-items: center; }
.header-actions {
  display: flex; align-items: center; gap: var(--act-gap); flex: none;
}
.main-nav a {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0.55rem var(--nav-pad-x); border-radius: 999px;
  font-family: var(--font-head); font-size: var(--nav-fs); font-weight: 600;
  color: var(--c-ink); text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.main-nav a:hover { background: var(--c-primary); color: var(--c-on-primary); }
.main-nav a[aria-current="page"] {
  background: var(--c-accent); color: var(--c-on-accent); font-weight: 600;
}

/* Nav dropdown styling */
.main-nav .has-dropdown {
  position: relative;
}
.main-nav .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}
.main-nav .dropdown-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  flex: none;
  pointer-events: none;
}
.main-nav .has-dropdown.is-open .dropdown-icon,
.main-nav .dropdown-toggle[aria-expanded="true"] .dropdown-icon {
  transform: rotate(180deg);
}

/* Dropdown Menu (Desktop) */
.main-nav .dropdown-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  inset-inline-start: 0;
  min-width: 13.5rem;
  background: var(--c-paper);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
  padding: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 250;
  pointer-events: none;
  list-style: none;
  margin: 0;
}

/* Show dropdown when open class is active */
.main-nav .has-dropdown.is-open > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.main-nav .dropdown-menu li {
  list-style: none;
  width: 100%;
}
.main-nav .dropdown-menu a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-s);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--c-ink);
  white-space: nowrap;
}
.main-nav .dropdown-menu a:hover,
.main-nav .dropdown-menu a:focus {
  background: var(--c-primary);
  color: var(--c-on-primary);
}
.main-nav .dropdown-menu a[aria-current="page"] {
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 600;
}
.main-nav .dropdown-toggle.is-active,
.main-nav .has-dropdown:has([aria-current="page"]) > .dropdown-toggle {
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
  color: var(--c-primary-deep);
}

/* Dark mode and high contrast support for dropdown */
html[data-theme="dark"] .main-nav .dropdown-menu {
  background: var(--c-paper);
  border-color: var(--c-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
html[data-contrast="high"] .main-nav .dropdown-menu {
  background: #000;
  border: 2px solid #fff;
}
html[data-contrast="high"] .main-nav .dropdown-menu a {
  color: #fff;
}
html[data-contrast="high"] .main-nav .dropdown-menu a:hover,
html[data-contrast="high"] .main-nav .dropdown-menu a:focus {
  background: #333;
  color: #ffd23f;
}
html[data-contrast="high"] .main-nav .dropdown-menu a[aria-current="page"] {
  background: #ffd23f;
  color: #000;
}

.header-actions { display: flex; align-items: center; gap: var(--act-gap); flex: none; }
/* "Members Forum" in the top bar: a small menu with the two ways in.
   Individuals go to the forum; organizations to the application form on
   the Organizations page. Built on <details>, so it works without script. */
.forum-menu { position: relative; }
.forum-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.forum-menu > summary::-webkit-details-marker { display: none; }
.forum-menu-icon { transition: transform 0.18s ease; }
.forum-menu[open] .forum-menu-icon { transform: rotate(180deg); }
.forum-menu-list {
  position: absolute; z-index: 300;
  inset-block-start: calc(100% + 0.35rem); inset-inline-end: 0;
  min-width: 12rem; margin: 0; padding: 0.4rem; list-style: none;
  background: var(--c-paper); border: 1.5px solid var(--c-border);
  border-radius: var(--radius-m); box-shadow: var(--shadow-2);
}
.forum-menu-list a {
  display: block; padding: 0.55rem 0.8rem; border-radius: 8px;
  color: var(--c-ink); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.forum-menu-list a:hover, .forum-menu-list a:focus-visible { background: var(--c-wash); color: var(--c-primary-deep); }
html[data-contrast="high"] .forum-menu-list { background: #000 !important; border: 2px solid #fff; }
html[data-contrast="high"] .forum-menu-list a { color: #ffd23f !important; }
/* The buttons and the language picker ride the same scale as the links, so one
   step down tightens the whole row instead of just its middle. */
.header-actions .btn-sm { white-space: nowrap; font-size: var(--nav-fs); padding-inline: calc(var(--nav-pad-x) * 1.9); }
/* Static count, no pulse or animation — the forum is quiet by default. */
.notif-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; padding-inline: calc(var(--nav-pad-x) * 1.1) !important; }
.notif-count {
  position: absolute; top: -0.4rem; inset-inline-end: -0.4rem;
  min-width: 1.15rem; height: 1.15rem; padding-inline: 0.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700; line-height: 1;
  background: var(--c-red-text); color: #fff; border-radius: 999px; border: 2px solid var(--c-paper);
}
/* The drawer's own Donate button, plus whatever main.js moves in beside it. */
.main-nav .nav-donate-mobile { display: none; }

.lang-switch { position: relative; flex: none; }
.lang-switch select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-head); font-size: var(--nav-fs); font-weight: 600;
  color: var(--c-ink); background: var(--c-wash);
  border: 1.5px solid var(--c-border); border-radius: 999px;
  min-height: 44px;
  padding-block: 0.35rem; padding-inline: 2.4rem 2.1rem;
  cursor: pointer;
}
.lang-switch .lang-globe {
  position: absolute; inset-inline-start: 0.8rem; top: 50%; translate: 0 -50%;
  pointer-events: none; color: var(--c-primary);
}
.lang-switch::after {
  content: ""; position: absolute; inset-inline-end: 0.9rem; top: 50%;
  width: 0.55rem; height: 0.55rem; margin-top: -0.45rem;
  border-inline-end: 2px solid var(--c-ink); border-block-end: 2px solid var(--c-ink);
  rotate: 45deg; pointer-events: none;
}

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0 12px; flex: none;
  background: var(--c-wash); border: 1.5px solid var(--c-border); border-radius: var(--radius-s);
  cursor: pointer;
}
.nav-toggle .bar { display: block; height: 2.5px; width: 100%; background: var(--c-ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] .bar:nth-last-child(3) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-last-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-last-child(1) { transform: translateY(-7.5px) rotate(-45deg); }

/* The drawer. Used whenever the viewport is too narrow to hold the links on
   one row, and also as the fallback when even the densest NAV_STEPS rung
   still overflows on a wide viewport (a long translation, or a large
   text-size step) — the nav row itself never becomes horizontally
   scrollable, it collapses to this instead. */
.site-header.nav-compact { --brand-w: clamp(150px, 34vw, 220px); }
.site-header.nav-compact .brand { margin-inline-end: auto; order: 1; flex-shrink: 1; }
.site-header.nav-compact .nav-toggle { display: flex; order: 2; }
.site-header.nav-compact .header-actions { order: 3; margin-inline-start: 0; display: flex; align-items: center; }
.site-header.nav-compact .header-inner { gap: 1.1rem; }
/* Public site only: the toggle has just been moved in next to the logo
   (see placeToggle() in main.js), so the row it used to live in is now
   empty apart from the absolutely-positioned drawer — collapse it instead
   of leaving a blank strip under the logo row. */
.site-header.nav-compact .header-inner:not(:has(.brand)) { min-height: 0; }
.site-header.nav-compact .main-nav {
  order: 4;
  display: none;
  position: absolute; inset-inline: 0; top: 100%;
  background: var(--c-paper); border-block-start: 1px solid var(--c-border);
  box-shadow: var(--shadow-2);
  padding: 1rem 1.25rem 1.4rem;
  max-height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
}
.site-header.nav-compact .main-nav.open { display: block; }
.site-header.nav-compact .main-nav ul { flex-direction: column; flex-wrap: nowrap; gap: 0.25rem; width: 100%; align-items: stretch; }
.site-header.nav-compact .main-nav a { width: 100%; padding: 0.8rem 1rem; font-size: 1.05rem; justify-content: center; text-align: center; }
.site-header.nav-compact .main-nav .has-dropdown { position: static; width: 100%; }
.site-header.nav-compact .main-nav .dropdown-toggle { justify-content: center; width: 100%; gap: 0.45rem; }
.site-header.nav-compact .main-nav .dropdown-menu {
  display: none;
  position: static;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  box-shadow: none;
  background: var(--c-wash);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
  padding: 0.35rem;
  margin: 0.25rem 0 0.5rem 0;
  width: 100%;
  gap: 0.2rem;
}
.site-header.nav-compact .main-nav .has-dropdown.is-open > .dropdown-menu {
  display: flex;
}
.site-header.nav-compact .main-nav .has-dropdown.is-open > .dropdown-toggle,
.site-header.nav-compact .main-nav .dropdown-toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
  color: var(--c-primary-deep);
}
.site-header.nav-compact .main-nav .dropdown-menu a { width: 100%; padding: 0.65rem 0.85rem; font-size: 0.95rem; justify-content: center; text-align: center; }
.site-header.nav-compact .header-actions .btn { display: none; }
/* Members Forum: the top-bar menu on wide screens, a drawer dropdown
   (built by main.js) when the nav collapses. Without this the hidden .btn
   summary left a bare browser "Details" marker on phones. */
.main-nav .nav-forum-mobile { display: none; }
.site-header.nav-compact .main-nav .nav-forum-mobile { display: block; }
.site-header.nav-compact .header-actions .forum-menu { display: none; }
@media (max-width: 48rem) {
  .site-header:not(.nav-fits) .header-actions .forum-menu { display: none; }
}
/* Mobile keeps the header to brand + hamburger; search and the utility
   buttons are reachable from the drawer/resources page instead of crowding it. */
.site-header.nav-compact .header-search { display: none; }
.site-header.nav-compact .main-nav .nav-donate-mobile,
.site-header.nav-compact .main-nav .nav-drawer-action {
  display: flex; width: 100%; margin-top: 0.5rem;
  min-height: 48px; font-size: 1rem; padding-inline: 1.5rem;   /* undo .btn-sm */
  justify-content: center; text-align: center;
}

/* Pre-JS fallback: until main.js has measured, keep narrow viewports
   collapsed so the nav never flashes as an overflowing row. Matches
   COMPACT_MAX in main.js — a genuine phone/small-tablet breakpoint, not an
   ordinary laptop window. */
@media (max-width: 48rem) {
  .site-header:not(.nav-fits):not(.nav-compact) .brand { margin-inline-end: auto; order: 1; }
  .site-header:not(.nav-fits):not(.nav-compact) .nav-toggle { display: flex; order: 2; }
  .site-header:not(.nav-fits):not(.nav-compact) .header-inner > .header-actions { order: 3; }
  .site-header:not(.nav-fits):not(.nav-compact) .header-inner > .header-actions .btn { display: none; }
  .site-header:not(.nav-fits):not(.nav-compact) .main-nav { display: none; order: 4; }
  .site-header:not(.nav-fits):not(.nav-compact) .header-search { display: none; }
  /* Minimal-nav pages (login, register, the forum landing page) have no
     #main-nav at all — main.js's fit-measuring script skips them entirely,
     so they'd otherwise sit in this "not yet classified" fallback forever,
     not just before JS runs, permanently hiding the brand and the Sign
     in/Sign up buttons. Give them their own small hamburger instead: the
     language switcher plus two buttons is wider than a phone screen on one
     line, so tuck it behind a toggle rather than wrapping it. */
  body.minimal-nav .site-header .header-inner > .minimal-nav-toggle { display: flex; margin-inline-start: auto; }
  body.minimal-nav .site-header .header-inner > .header-actions {
    display: none;
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0.6rem;
    background: var(--c-paper); border-block-start: 1px solid var(--c-border);
    box-shadow: var(--shadow-2);
    padding: 1rem 1.25rem 1.4rem;
  }
  body.minimal-nav .site-header .header-inner > .header-actions.open { display: flex; }
  body.minimal-nav .site-header .header-inner > .header-actions .btn { display: inline-flex !important; width: 100%; }
  body.minimal-nav .site-header .header-inner > .header-actions .gtranslate_wrapper { margin-inline: auto; }
  body.minimal-nav .site-header .header-inner > .header-actions .back-to-site { justify-content: center; padding-block: 0.4rem; }
}
@media (max-width: 40rem) {
  .header-inner { gap: 0.9rem; }
}
@media (max-width: 767px) {
  .brand {
    width: auto;
    height: auto;
  }

  .brand img {
    display: block;
    max-height: 52px; /* Adjust based on your header height */
    width: auto;
  }
}

/* ---------- 6. Hero ---------- */
.hero { position: relative; overflow: hidden; }

/* Homepage hero: message on warm sand on the left, photo on a pale wash on
   the right, with the vision statement as a card over the photo's corner. */
:root { --c-hero-accent: var(--c-primary); --c-hero-gold: #B8902F; }
html[data-theme="dark"] { --c-hero-gold: #D9B45A; }
.hero-split {
  background: linear-gradient(90deg, var(--c-sand) 0 55%, var(--c-wash) 55% 100%);
  border-block-start: 1px solid var(--c-border);
}
.hero-split-inner {
  width: min(100% - 2rem, 82rem);
  margin-inline: auto;
  padding-inline: 1.75rem;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero-kicker {
  margin: 0 0 1.1rem;
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-primary-deep);
}
.hero-split h1 {
  margin: 0 0 1.4rem;
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.hero-split h1 span { display: block; }
/* Side-by-side layout: one phrase per line, as in the approved design. */
@media (min-width: 62rem) { .hero-split h1 span { white-space: nowrap; } }
.hero-split h1 .hero-accent { color: var(--c-hero-accent); }
.hero-split .lead {
  margin: 0;
  max-width: 36em;
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--c-muted);
}
.hero-split .hero-ctas { margin-block: 2rem 0; }
.hero-media { position: relative; margin: 0; }
.hero-media img {
  display: block; width: 100%;
  aspect-ratio: 4 / 3.4; object-fit: cover;
  border-radius: 6px;
  box-shadow: var(--shadow-2);
}
.hero-vision {
  position: absolute;
  inset-inline-start: -1.75rem;
  inset-block-end: 1.5rem;
  max-width: min(21rem, 80%);
  padding: 1.1rem 1.4rem;
  background: var(--c-paper);
  border-inline-start: 5px solid var(--c-hero-gold);
  box-shadow: var(--shadow-2);
}
.hero-vision-label {
  display: block; margin-block-end: 0.45rem;
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-primary-deep);
}
.hero-vision-text {
  display: block;
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.12rem; line-height: 1.45;
  color: var(--c-ink);
}
/* Tablets and phones: one column, photo under the message, the vision card
   overlapping the photo's lower edge instead of hanging off its side. */
@media (max-width: 61.9375rem) {
  .hero-split { background: var(--c-sand); }
  .hero-split-inner { grid-template-columns: 1fr; padding-inline: 0.25rem; }
  .hero-split h1 { font-size: clamp(2.3rem, 7vw, 3.6rem); }
  .hero-media img { aspect-ratio: 16 / 10; }
  .hero-vision { position: relative; inset: auto; margin: -2.5rem 1rem 0; max-width: none; }
}
@media (max-width: 34rem) {
  .hero-split .hero-ctas .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
}
html[data-contrast="high"] .hero-split h1,
html[data-contrast="high"] .hero-split .lead,
html[data-contrast="high"] .hero-kicker,
html[data-contrast="high"] .hero-vision-label,
html[data-contrast="high"] .hero-vision-text { color: #fff !important; }
html[data-contrast="high"] .hero-split h1 .hero-accent { color: #ffd23f !important; }
html[data-contrast="high"] .hero-vision { background: #000 !important; border: 2px solid #fff; border-inline-start: 5px solid #ffd23f; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-block: 1.6rem 1.4rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; align-items: center; color: rgba(255,255,255,0.88); font-size: 0.92rem; padding: 0; margin: 0; list-style: none; }
.hero-trust li { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-trust svg { color: #7CE0B8; flex: none; }

/* Slide controls. The dots + play/pause stay inline with the text column so
   they never collide with it at any viewport width; the prev/next arrows sit
   at the hero's own left/right edges, vertically centred, clear of the text. */
.hero-slide-controls { display: flex; align-items: center; gap: 0.9rem; margin-block-start: 1.8rem; }
.hero-slide-arrow, .hero-slide-playpause {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  background: rgba(255,255,255,0.14); border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 50%; color: #fff; cursor: pointer;
  transition: background 0.15s ease;
}
.hero-slide-arrow:hover, .hero-slide-playpause:hover { background: rgba(255,255,255,0.28); }
.hero-slide-arrow {
  position: absolute; z-index: 3; top: 50%; translate: 0 -50%;
  width: 2.9rem; height: 2.9rem;
}
.hero-slide-prev { inset-inline-start: clamp(0.6rem, 2.5vw, 2rem); }
.hero-slide-next { inset-inline-end: clamp(0.6rem, 2.5vw, 2rem); }
.hero-slide-dots { display: flex; align-items: center; gap: 0.5rem; }
.hero-slide-dot {
  width: 0.6rem; height: 0.6rem; padding: 0; border-radius: 50%; flex: none;
  background: rgba(255,255,255,0.4); border: 1.5px solid rgba(255,255,255,0.6);
  cursor: pointer;
}
.hero-slide-dot.is-active { background: #fff; }
.hero-slide-playpause .icon-play { display: none; }
.hero-slide-playpause.is-paused .icon-pause { display: none; }
.hero-slide-playpause.is-paused .icon-play { display: inline-flex; }
@media (max-width: 34rem) {
  .hero-slide-arrow { display: none; }
}

/* ---------- 7. Sections ---------- */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-wash { background: var(--c-wash); }
.section-sand { background: var(--c-sand); }
.section-head { max-width: 46em; margin-block-end: var(--space-4); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.section-head-wide { max-width: 64em; }
.eyebrow {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 0.88rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-primary); margin-block-end: 0.6rem;
}
/* Primary blue is only 4.3:1 on the light blue wash, so text there uses ink. */
.section-wash .eyebrow,
.band-wash .eyebrow { color: var(--c-ink); }
.section-wash .btn-outline,
.band-wash .btn-outline { color: var(--c-primary-deep); }
.section-head .lead, .lead { color: var(--c-muted); font-size: 1.12rem; }

.band-dark { background: linear-gradient(140deg, var(--c-dark) 0%, var(--c-dark-2) 100%); color: var(--c-on-dark); }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark p { color: var(--c-on-dark-muted); }
.band-dark a:not(.btn) { color: #fff; }
.band-dark .eyebrow,
.hub-welcome .eyebrow,
.panel-dark .eyebrow,
.on-dark .eyebrow,
.site-footer .eyebrow {
  color: #fff;
}

/* Homepage "Members' forum" CTA: make the label the dominant element and
   the "Connect. Learn…" line a smaller supporting tagline underneath it. */
.eyebrow-cop {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  letter-spacing: 0.02em;
  text-transform: none;
  margin-block-end: 0.5rem;
}
#cop-title {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 600;
}

/* Homepage: the section-head's own top padding already separates this
   section from the one above it — the button below it doesn't need the
   section's full bottom padding on top of the next section's own top one. */
.section[aria-labelledby="proj-title"] {
  padding-block-end: clamp(1.25rem, 3vw, 2rem);
}

/* News & Events page: tighten the gap between the news grid and the
   events calendar below it — same double-padding situation as above. */
#events {
  padding-block-start: clamp(1rem, 2.5vw, 1.75rem);
}

/* ---------- 8. Cards & grids ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 62rem) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-l); box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card-body h3 { margin: 0; }
.card-body p { margin: 0; color: var(--c-muted); font-size: 0.98rem; }
.card-link { text-decoration: none; color: inherit; }
.card-link:hover { color: inherit; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:focus-visible::after { outline: 3px solid var(--c-focus); outline-offset: -3px; border-radius: var(--radius-l); }
.card-link:focus-visible { outline: none; }
.card .go {
  margin-top: auto; padding-top: 0.6rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; color: var(--c-primary);
  transition: color 0.18s ease;
}
.card .go svg { transition: transform 0.18s ease; }
/* The call-to-action ("Learn more", "Read more"...) is what gets the feedback, not the title. */
.card:hover .go, .card:focus-within .go { color: var(--c-primary-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.card:hover .go svg, .card:focus-within .go svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .card .go svg { transition: none; } }
.card-accent { height: 5px; background: var(--ribbon); }

/* Feature cards (what we do) */
.icon-round {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: 999px;
  color: #fff;
  background: var(--c-primary);
}
.tone-purple .icon-round,
.tone-pink   .icon-round,
.tone-blue   .icon-round,
.tone-green  .icon-round,
.tone-orange .icon-round,
.tone-red    .icon-round { background: var(--c-primary); }

/* Chips / tags */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-head); font-size: 0.85rem; font-weight: 600;
  padding: 0.32rem 0.85rem; border-radius: 999px;
  background: var(--c-wash); color: var(--c-ink);
  border: 1px solid var(--c-border);
}
.chip-green,
.chip-blue,
.chip-pink,
.chip-orange {
  background: #e8f5fc;
  color: #000;
  border-color: #bfe2f2;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 0; list-style: none; }
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--c-primary); }
a.chip[aria-current="page"] { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
html[data-contrast="high"] a.chip[aria-current="page"] { background: #ffd23f; color: #000; border-color: #fff; }

/* ---------- 9. Stats ---------- */
.stats-band { position: relative; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 62rem) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .stats-grid { grid-template-columns: 1fr; } }
@media (max-width: 544px) {
  .stats-grid { grid-template-columns: 1fr !important; }
}
.stat {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-m);
  padding: 1.4rem 1.5rem;
  text-align: center;
}
.stat .num {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.05; color: #fff;
  display: block;
}
.stat .num .unit { font-size: 0.6em; }
.stat .label { color: var(--c-on-dark-muted); font-size: 0.98rem; display: block; text-align: center; }
.stat-accent { width: 2.6rem; height: 4px; border-radius: 99px; margin-block-end: 0.9rem; }
.stat-source {
  display: inline-block; margin-block-start: 0.8rem;
  font-size: 0.82rem; color: #fff; text-decoration: underline; text-underline-offset: 0.2em;
  opacity: 0.85;
}
.stat-source:hover, .stat-source:focus-visible { opacity: 1; }
.stats-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 56rem;
  margin-inline: auto;
}
.stats-grid--3 .stat-accent { margin-inline: auto; }
@media (max-width: 62rem) {
  .stats-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}
@media (max-width: 34rem) {
  .stats-grid--3 { grid-template-columns: 1fr; }
}

/* ---------- 10. Quote band ---------- */
.quote-band { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 56rem) { .quote-band { grid-template-columns: 1fr; } }
.quote-band figure { margin: 0; }
.quote-band .arch-photo { border-radius: var(--arch); box-shadow: var(--shadow-2); overflow: hidden; }
.quote-band .arch-photo img { aspect-ratio: 4/3.4; object-fit: cover; width: 100%; }
blockquote.big-quote { margin: 0; }
blockquote.big-quote p {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.4; color: var(--c-ink);
}
blockquote.big-quote .mark { color: var(--rb-pink); font-size: 2.4em; line-height: 0; vertical-align: -0.35em; margin-inline-end: 0.1em; font-family: Georgia, serif; }
blockquote.big-quote .mark-close { margin-inline-end: 0; margin-inline-start: 0.05em; vertical-align: -0.55em; }
blockquote.big-quote footer { color: var(--c-muted); font-size: 1rem; margin-top: 0.8rem; }

/* ---------- 11. News & events ---------- */
/* Month calendar (partials/event-calendar.php, review F-10) */
.event-cal { margin-block: 2.5rem 1rem; }
.event-cal-head { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; justify-content: space-between; margin-block-end: 1rem; }
.event-cal-title { margin: 0; font-size: 1.35rem; }
.event-cal-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.event-cal-empty { color: var(--c-muted); margin: 0 0 1rem; }
.event-cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--c-paper); }
.event-cal-grid th { padding: 0.5rem; font-family: var(--font-head); font-size: 0.85rem; color: var(--c-muted); text-align: start; border-block-end: 2px solid var(--c-border); }
.event-cal-grid abbr { text-decoration: none; }
.event-cal-grid td { vertical-align: top; height: 6.5rem; padding: 0.4rem; border: 1px solid var(--c-border); }
.event-cal-grid td.is-blank { background: var(--c-wash); }
.event-cal-grid td.is-today { box-shadow: inset 0 0 0 3px var(--c-accent); }
.event-cal-day { display: block; font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; margin-block-end: 0.3rem; }
.event-cal-month { display: none; }
.event-cal-today { font-size: 0.72rem; font-weight: 700; color: var(--c-accent); text-transform: uppercase; letter-spacing: 0.04em; }
.event-cal-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.event-cal-grid li a { display: block; padding: 0.25rem 0.4rem; border-radius: 6px; background: var(--c-wash); color: var(--c-ink); font-size: 0.8rem; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.event-cal-grid li a:hover, .event-cal-grid li a:focus-visible { text-decoration: underline; }
.event-cal-grid li a time { display: block; font-family: var(--font-head); font-weight: 600; }
.event-cal-grid li.is-past a { opacity: 0.75; }
.event-cal-filter-note { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.8rem; }
.event-cal[aria-busy="true"] { opacity: 0.6; }
.event-cal-note { font-size: 0.85rem; color: var(--c-muted); margin: 0.6rem 0 0; }
/* Phones: a list of the days that have events, full date shown */
@media (max-width: 40rem) {
  .event-cal-grid, .event-cal-grid tbody, .event-cal-grid tr, .event-cal-grid td { display: block; width: 100%; }
  .event-cal-grid thead, .event-cal-grid td.is-blank, .event-cal-grid td.no-events:not(.is-today),
  .event-cal-grid td.is-filtered-out:not(.is-today) { display: none; }
  .event-cal-grid td { height: auto; border-width: 0 0 1px; padding: 0.7rem 0.2rem; }
  .event-cal-month { display: inline; }
  .event-cal-grid li a { font-size: 0.95rem; }
}

.news-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.88rem; color: var(--c-muted); align-items: center; }
.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.event {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center;
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); padding: 1.1rem 1.4rem; box-shadow: var(--shadow-1);
}
/* Phones and small tablets: stack each event - date, then details, then a compact button. */
@media (max-width: 767px) {
  .event { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.5rem; }
  .event .date-block { margin-bottom: 0.5rem; align-self: center; }
  .event > :last-child:not(:nth-child(2)) { width: 100%; margin-top: auto; }
  .event .btn { width: auto; min-height: 40px; padding: 0.35rem 1.1rem; font-size: 0.92rem; }
}
/* .event and .pager set display, which would override the hidden attribute
   that the News & Events filter and paging script use to hide rows. */
.event[hidden], .pager[hidden] { display: none; }
.event h3 { margin-bottom: 0.2rem; font-size: 1.1rem; }
.event h3 a { color: inherit; text-decoration: none; }
.event h3 a:hover { color: var(--c-primary-deep); text-decoration: underline; text-underline-offset: 0.15em; }
.event .ev-meta { color: var(--c-muted); font-size: 0.92rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.event .ev-meta span { display: inline-flex; gap: 0.4rem; align-items: center; }
.event-detail-meta {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center;
  text-align: center;
}
.event-register-panel { max-width: 40rem; margin-inline: auto; }
.form-actions-center { display: flex; justify-content: center; margin-top: 0.25rem; }
.event-nav-actions { display: flex; justify-content: center; margin-top: 1.5rem; }
.event-register-note { text-align: center; margin: 1.2rem 0 0; font-size: 0.92rem; color: var(--c-muted); }
.card-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.55rem 0.75rem; margin-top: auto; padding-top: 0.75rem;
}

.date-block {
  display: grid; place-items: center; text-align: center;
  width: 4.4rem; height: 4.6rem; border-radius: var(--radius-s);
  background: var(--c-wash); border: 1.5px solid var(--c-border);
  font-family: var(--font-head); line-height: 1.05; align-content: center;
}
.date-block .d { font-size: 1.5rem; font-weight: 800; color: var(--c-ink); }
.date-block .m { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); }
/* News & Events: event toolbar on phones (its inline styles are sized for desktop). */
@media (max-width: 40rem) {
  .mec-toolbar { padding: 1rem !important; }
  .mec-tabs { display: flex !important; width: 100%; }
  .mec-tabs .js-mec-tab { flex: 1 1 0; white-space: nowrap; padding-inline: 0.6rem !important; min-height: 44px; }
  .mec-filters { width: 100%; }
  .mec-filters select, .mec-filters input { flex: 1 1 100%; min-width: 0 !important; width: 100%; min-height: 44px; font-size: 1rem !important; }
}

section[aria-labelledby="news-h"] .card h3 a,
section[aria-labelledby="news-h"] .card h3 a:hover,
section[aria-labelledby="news-h"] .card h3 a:focus-visible,
section[aria-labelledby="news-h"] .card .card-link,
section[aria-labelledby="news-h"] .card .card-link:hover,
section[aria-labelledby="news-h"] .card .card-link:focus-visible {
  text-decoration: none !important;
}

/* ---------- 12. Partners ---------- */
/* ---------- 12. Partners ---------- */
.partner-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; align-items: stretch;
}
@media (max-width: 62rem) { .partner-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 40rem) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
.partner-tile {
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--radius-m);
  padding: 1rem; min-height: 6.5rem;
  transition: transform 0.18s ease;
}
.partner-tile:hover,
.partner-tile:focus-within { transform: scale(1.05); }
.partner-tile a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  text-decoration: none; border-radius: var(--radius-s);
}
.partner-tile img { max-height: 4.4rem; width: auto; max-width: 100%; object-fit: contain; }
html[data-contrast="high"] .partner-tile { background: #fff; border-radius: var(--radius-s); }

/* ---------- 13. Footer ---------- */
.site-footer { background: var(--c-dark-2); color: #fff; }
.site-footer .container { width: min(100% - 2rem, 82rem); margin-inline: auto; }
.footer-grid {
  display: grid; grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr 1.1fr; gap: 2rem 3.5rem;
  padding-block: var(--space-5) var(--space-4);
}
.footer-grid > .f-brand { margin-inline: 1.75rem 2rem; }
.footer-grid > .f-contact { margin-inline-start: 1.5rem; }
.footer-grid > *:not(.f-brand) { margin-top: 2.2rem; }
@media (max-width: 75rem) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; column-gap: 2rem; } }
/* Smaller screens: every link column gets the Contact column's left inset so they line up. */
@media (max-width: 75rem) { .footer-grid > *:not(.f-brand) { margin-inline-start: 1.5rem; } }
@media (max-width: 62rem) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 { color: #fff; font-size: 1.05rem; letter-spacing: 0.04em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer .f-nowrap { white-space: nowrap; }
/* Opportunities type filter on phones: an even 2 x 2 grid instead of a ragged wrap. */
@media (max-width: 40rem) {
  .opp-tabs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.6rem !important; }
  .opp-tabs .btn { width: 100%; padding-inline: 0.6rem; font-size: 0.92rem; }
  .opp-tabs .ms-auto { grid-column: 1 / -1; margin-left: 0 !important; }   /* editors' "Add new" button gets its own row */
}
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }
.site-footer .f-brand img {
  height: 72px;
  width: auto;
  margin-block-end: 1rem;
  object-fit: contain;
}
.site-footer .f-tagline {
  color: #fff;
  font-weight: 800;
  line-height: 1.3;
  max-width: 30em;
  margin: 0 0 0.5rem;
}
.site-footer .f-description {
  color: #fff;
  max-width: 30em;
  margin: 0;
}
.footer-bottom {
  border-block-start: 1px solid rgba(255,255,255,0.14);
  padding-block: 1.3rem;
  /* room for the fixed accessibility button (56px + 1.1rem offset) so it
     can never sit on top of a footer link (review UI-01) */
  padding-inline-end: calc(56px + 1.1rem + 0.8rem);
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; align-items: center; justify-content: space-between;
  color: #fff; font-size: 0.92rem;
}
.footer-social { display: flex; gap: 0.65rem; align-items: center; margin-top: 1rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  transition: background 0.15s ease, transform 0.15s ease;
}
.footer-social a:hover, .footer-social a:focus-visible {
  background: var(--c-primary); color: var(--c-on-primary); transform: translateY(-2px); text-decoration: none;
}
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
/* "(coming soon)" beside a menu item that has no content yet */
.nav-soon { font-size: 0.8em; font-weight: 400; opacity: 0.8; margin-inline-start: 0.35em; } /* menu links are flex, which drops the space before "(coming soon)" */
.footer-legal-links { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.footer-legal-links a { color: #fff; text-decoration: none; }
.footer-legal-links a:hover, .footer-legal-links a:focus-visible { color: #fff; text-decoration: underline; }
.badge-aa {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1.5px solid rgba(255,255,255,0.4); border-radius: 999px;
  padding: 0.3rem 0.9rem; font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; color: #fff;
}

/* ---------- 14. Accessibility toolbar ---------- */
.a11y-fab {
  position: fixed; inset-inline-end: 1.1rem; bottom: 1.1rem; z-index: 400;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0;   /* icon only, 44px+ target (review UI-02) */
  background: var(--c-accent); color: var(--c-on-accent);
  border: 2px solid #fff; border-radius: 50%;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  box-shadow: var(--shadow-2); cursor: pointer;
}
.a11y-fab:hover { background: var(--c-accent-hover); }
.a11y-fab[aria-expanded="true"] { background: var(--c-accent-hover); }
html[data-contrast="high"] .a11y-fab { background: #ffd23f; color: #000; border-color: #fff; }
/* The label shows as a tooltip on hover and keyboard focus; the button's
   accessible name comes from aria-label. */
.a11y-fab .fab-label {
  position: absolute; bottom: calc(100% + 0.5rem); inset-inline-end: 0;
  white-space: nowrap; padding: 0.35rem 0.65rem; border-radius: 6px;
  background: #1F2A44; color: #fff; font-size: 0.85rem; font-weight: 600;
  box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.a11y-fab:hover .fab-label,
.a11y-fab:focus-visible .fab-label { opacity: 1; visibility: visible; }
.a11y-fab[aria-expanded="true"] .fab-label { opacity: 0; visibility: hidden; }
html[data-motion="reduced"] .a11y-fab .fab-label { transition: none; }

/* Count of active adjustments, shown on the launcher */
.a11y-fab .fab-count {
  position: absolute; top: -0.35rem; inset-inline-end: -0.35rem;
  min-width: 1.5rem; height: 1.5rem; padding: 0 0.3rem;
  display: none; place-items: center;
  background: var(--c-green-text); color: var(--c-paper);
  border: 2px solid #fff; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: 0.75rem; line-height: 1;
}
.a11y-fab[data-active]:not([data-active="0"]) .fab-count { display: grid; }
html[data-contrast="high"] .a11y-fab .fab-count { background: #000; color: #ffd23f; border-color: #ffd23f; }

/* Backdrop — only used for the mobile sheet */
.a11y-backdrop {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(26, 15, 43, 0.55); border: 0;
  display: none;
}
.a11y-backdrop[hidden] { display: none; }

.toolbar-panel {
  position: fixed; inset-inline-end: 1.1rem; bottom: 5.6rem; z-index: 401;
  width: min(24.5rem, calc(100vw - 2.2rem));
  max-height: min(80vh, 44rem);
  display: flex; flex-direction: column;
  background: var(--c-paper); color: var(--c-ink);
  border: 1px solid var(--c-border); border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.toolbar-panel[hidden] { display: none; }

/* Header — stays put while the options scroll */
.toolbar-head {
  flex: none; display: flex; align-items: center; gap: 0.6rem;
  padding: 1rem 1.1rem;
  background: var(--c-accent); color: var(--c-on-accent);
}
.toolbar-head h2 { margin: 0; font-size: 1.05rem; color: inherit; flex: 1; min-width: 0; }
.toolbar-head .head-icon { flex: none; display: grid; place-items: center; }
.toolbar-head .head-hint { display: block; font-size: 0.72rem; font-weight: 500; opacity: 0.85; letter-spacing: 0.02em; }
.toolbar-close, .toolbar-reset {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  background: rgba(0, 0, 0, 0.16); border: 1.5px solid currentColor;
  border-radius: 999px; cursor: pointer; color: inherit;
}
.toolbar-close:hover, .toolbar-reset:hover { background: rgba(0, 0, 0, 0.3); }
html[data-contrast="high"] .toolbar-head { background: #000; border-block-end: 2px solid #fff; }
html[data-contrast="high"] .toolbar-head h2 { color: #ffd23f; }
html[data-contrast="high"] .toolbar-close, html[data-contrast="high"] .toolbar-reset { color: #ffd23f; border-color: #ffd23f; }

.toolbar-body { overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.1rem 0.4rem; }
.toolbar-foot {
  flex: none; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.85rem 1.1rem; border-block-start: 1px solid var(--c-border); background: var(--c-wash);
}
.toolbar-foot .tool-reset { flex: 1 1 9rem; min-height: 44px; padding: 0.5rem 1rem; font-size: 0.92rem; }
.toolbar-foot .foot-link { font-size: 0.85rem; font-family: var(--font-head); font-weight: 600; }

/* Section shell */
.tool-group { border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: 0.85rem 0.9rem; margin-block-end: 0.8rem; }
.tool-group > .tool-label {
  font-family: var(--font-head); font-weight: 700; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted);
  display: flex; gap: 0.45rem; align-items: center; margin-block-end: 0.6rem;
}
.tool-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tool-sub {
  font-family: var(--font-head); font-weight: 600; font-size: 0.88rem;
  margin: 0.75rem 0 0.4rem; color: var(--c-ink);
}
.tool-sub:first-child { margin-block-start: 0; }

/* Profile tiles */
.tool-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.tool-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  min-height: 76px; padding: 0.6rem 0.4rem; text-align: center;
  font-family: var(--font-head); font-weight: 600; font-size: 0.82rem; line-height: 1.25;
  background: var(--c-wash); color: var(--c-ink);
  border: 1.5px solid var(--c-border); border-radius: var(--radius-s); cursor: pointer;
}
.tool-tile svg { flex: none; }
.tool-tile:hover { border-color: var(--c-accent); }
.tool-tile[aria-pressed="true"] { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
html[data-contrast="high"] .tool-tile[aria-pressed="true"] { background: #ffd23f; color: #000; border-color: #fff; }

/* Stepper (text size) */
.tool-stepper { display: flex; align-items: center; gap: 0.5rem; }
.tool-stepper .step-btn {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  background: var(--c-accent); color: var(--c-on-accent); border: 1.5px solid var(--c-accent);
  border-radius: 999px; cursor: pointer;
}
.tool-stepper .step-btn:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.tool-stepper .step-btn[aria-disabled="true"] { background: var(--c-wash); color: var(--c-muted); border-color: var(--c-border); cursor: not-allowed; }
.tool-stepper .step-value {
  flex: 1; text-align: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  background: var(--c-wash); border: 1.5px solid var(--c-border); border-radius: var(--radius-s);
  min-height: 46px; display: grid; place-items: center;
}
html[data-contrast="high"] .tool-stepper .step-btn { background: #ffd23f; color: #000; border-color: #fff; }
html[data-contrast="high"] .tool-stepper .step-btn[aria-disabled="true"] { background: #000; color: #f2f2f2; border-color: #f2f2f2; }

/* Segmented choice (radiogroup) */
.tool-seg { display: flex; gap: 0.35rem; background: var(--c-wash); border: 1.5px solid var(--c-border); border-radius: var(--radius-s); padding: 0.25rem; }
.tool-seg[data-cols="2"] { display: grid; grid-template-columns: 1fr 1fr; }
.tool-seg .seg-opt {
  flex: 1; min-height: 42px; padding: 0.3rem 0.4rem;
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; line-height: 1.2; text-align: center;
  background: transparent; color: var(--c-ink);
  border: 1.5px solid transparent; border-radius: calc(var(--radius-s) - 3px); cursor: pointer;
}
.tool-seg .seg-opt:hover { border-color: var(--c-border); }
.tool-seg .seg-opt[aria-checked="true"] { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
html[data-contrast="high"] .tool-seg .seg-opt[aria-checked="true"] { background: #ffd23f; color: #000; border-color: #fff; }

/* Toggle switches */
.tool-switches { display: flex; flex-direction: column; gap: 0.4rem; }
.tool-switch {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  min-height: 48px; padding: 0.5rem 0.75rem;
  font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; text-align: start;
  background: var(--c-wash); color: var(--c-ink);
  border: 1.5px solid var(--c-border); border-radius: var(--radius-s); cursor: pointer;
}
.tool-switch:hover { border-color: var(--c-accent); }
.tool-switch .sw-label { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.tool-switch .sw-label svg { flex: none; }
.tool-switch .track {
  flex: none; width: 2.9rem; height: 1.6rem; border-radius: 999px;
  background: #8d7fa5; position: relative; transition: background 0.15s ease;
}
.tool-switch .track::after {
  content: ""; position: absolute; top: 0.17rem; inset-inline-start: 0.17rem;
  width: 1.26rem; height: 1.26rem; border-radius: 50%; background: #fff;
  transition: translate 0.15s ease;
}
.tool-switch[aria-pressed="true"] { border-color: var(--c-green-text); }
.tool-switch[aria-pressed="true"] .track { background: var(--c-green-text); }
.tool-switch[aria-pressed="true"] .track::after { translate: 1.28rem 0; }
html[dir="rtl"] .tool-switch[aria-pressed="true"] .track::after { translate: -1.28rem 0; }
html[data-contrast="high"] .tool-switch[aria-pressed="true"] .track { background: #ffd23f; }
html[data-contrast="high"] .tool-switch[aria-pressed="true"] .track::after { background: #000; }

.tool-reset { width: 100%; }

/* Reading guide */
.a11y-guide {
  position: fixed; inset-inline: 0; top: 0; height: 2.6rem; z-index: 399;
  pointer-events: none;
  border-block: 3px solid var(--c-primary);
  background: rgba(41, 76, 122, 0.1);
}
html[data-contrast="high"] .a11y-guide { border-color: #ffd23f; background: rgba(255, 210, 63, 0.18); }

/* Read aloud: the note under the controls, the paragraph being spoken, and
   a ring on the launcher while the page is being read. */
.tool-hint { margin: 0.6rem 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--c-muted); }
.a11y-reading { outline: 3px solid var(--c-focus); outline-offset: 4px; border-radius: 2px; background: rgba(0, 119, 182, 0.08); }
html[data-contrast="high"] .a11y-reading { outline-color: #ffd23f; background: none; }
.a11y-fab[data-reading="1"] { box-shadow: 0 0 0 4px var(--c-paper), 0 0 0 7px var(--c-focus); }
@media print { .a11y-reading { outline: 0; background: none; } }

/* Mobile: full-width sheet with a dimmed backdrop */
@media (max-width: 40rem) {
  .a11y-backdrop { display: block; }
  .toolbar-panel {
    inset-inline: 0; bottom: 0; width: 100%;
    max-height: 88vh; border-radius: var(--radius-l) var(--radius-l) 0 0; border-inline: 0; border-block-end: 0;
  }
  .toolbar-foot { padding-block-end: max(0.85rem, env(safe-area-inset-bottom)); }
}

/* ---------- 15. Forms ---------- */
.form-grid { display: grid; gap: 1.2rem; }
.form-grid[hidden] { display: none; }
.form-grid .two { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 40rem) { .form-grid .two { grid-template-columns: 1fr; } }
.field label, .field .label { display: block; font-family: var(--font-head); font-weight: 600; margin-block-end: 0.35rem; }
.field .hint { font-size: 0.9rem; color: var(--c-muted); margin-block-end: 0.4rem; }
/* "Fields marked with * are required" (required_legend()) */
.form-legend { font-size: 0.9rem; color: var(--c-muted); margin: 0 0 1rem; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="search"],
.field input[type="password"], .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 0.7rem 1rem;
  font: inherit; color: var(--c-ink); background: var(--c-paper);
  border: 1.5px solid #a99bc0; border-radius: var(--radius-s);
}
.field input[type="password"] { letter-spacing: 0.12em; }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-primary);
}
.req { color: var(--c-red-text); font-weight: 700; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--c-red-text); border-width: 2px; }
.error-msg { display: flex; gap: 0.4rem; align-items: flex-start; color: var(--c-red-text); font-weight: 600; font-size: 0.92rem; margin-block-start: 0.35rem; }
.error-summary {
  border: 2px solid var(--c-red-text); border-radius: var(--radius-m);
  background: #fdf0f1; color: var(--c-ink); padding: 1.1rem 1.3rem; margin-block-end: 1.4rem;
}
html[data-contrast="high"] .error-summary { background: #000; }
.error-summary h2 { font-size: 1.1rem; color: var(--c-red-text); margin-bottom: 0.4rem; }
.error-summary ul { margin: 0; padding-inline-start: 1.2rem; }
.error-summary a { color: var(--c-red-text); font-weight: 600; }
.success-box {
  border: 2px solid var(--c-green-text); border-radius: var(--radius-m);
  background: #eefaf4; padding: 1.2rem 1.4rem; margin-block-end: 1.4rem;
}
html[data-contrast="high"] .success-box { background: #000; }
.checkbox-row { display: flex; gap: 0.7rem; align-items: flex-start; }
.field .cf-turnstile { margin-block-start: 0.2rem; }
/* Labelled Turnstile group (turnstile_field() / hub.js turnstileField) */
.turnstile-label { font-family: var(--font-head); font-weight: 600; margin: 0 0 0.2rem; }
.turnstile-hint { font-size: 0.9rem; color: var(--c-muted); margin: 0 0 0.4rem; }
.checkbox-row input[type="checkbox"], .radio-row input[type="radio"] { width: 1.35rem; height: 1.35rem; margin-top: 0.2rem; accent-color: var(--c-primary); flex: none; }
fieldset { border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: 1rem 1.2rem 1.2rem; margin: 0 0 1.2rem; }
fieldset:disabled { opacity: 0.55; }
fieldset:disabled, fieldset:disabled * { cursor: not-allowed; }
legend { font-family: var(--font-head); font-weight: 700; padding-inline: 0.4rem; }
.radio-row { display: flex; gap: 0.6rem; align-items: center; }
.radio-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-pill span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: 5.2rem; padding: 0.5rem 1.2rem;
  border: 2px solid #a99bc0; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700;
}
.radio-pill input:checked + span { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
html[data-contrast="high"] .radio-pill input:checked + span { background: #ffd23f; color: #000; border-color: #fff; }
.radio-pill input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 3px; }

/* ---------- 16. Accordion (FAQ) ---------- */
.accordion { display: grid; gap: 0.8rem; }
.accordion details {
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); box-shadow: var(--shadow-1); overflow: hidden;
}
.accordion summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { background: var(--c-wash); }
.accordion summary:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.accordion summary .chev { flex: none; transition: rotate 0.18s ease; color: var(--c-primary); }
.accordion details[open] summary .chev { rotate: 180deg; }
.accordion details[open] summary { border-block-end: 1px solid var(--c-border); }
.accordion .acc-body { padding: 1.1rem 1.4rem 1.3rem; }
.accordion .acc-body :last-child { margin-bottom: 0; }

/* ---------- 17. Resource library ---------- */
.filter-bar {
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-l); box-shadow: var(--shadow-1);
  padding: 1.4rem;
}
/* Resource Library: search on its own row, five filters (type, topic,
   country, year, language) beneath it. */
.filter-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.filter-grid > .field:first-child { grid-column: 1 / -1; }
@media (max-width: 62rem) { .filter-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .filter-grid { grid-template-columns: 1fr; } }
.results-note { font-family: var(--font-head); font-weight: 600; color: var(--c-ink); }
/* The whole resource card opens its detail page (via .card-link::after);
   keep the download link above that overlay so it still downloads. */
.resource-card .dl-link { position: relative; z-index: 1; }
.resource-card h3 .card-link:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.resource-card .type-row { display: flex; align-items: center; gap: 0.6rem; }

/* Resource types: an icon and colour per type, so types stand out on cards
   while scrolling (resource_type_style() in app/helpers.php). Ink colours
   keep at least 4.5:1 contrast on their tint. */
.rtype-toolkit   { --rt: #0B5E8A; --rt-bg: #E1F2FA; }
.rtype-training  { --rt: #5B3B8C; --rt-bg: #EFE8F8; }
.rtype-case      { --rt: #8A4B08; --rt-bg: #FDEFDC; }
.rtype-checklist { --rt: #116B48; --rt-bg: #E2F4EA; }
.rtype-video     { --rt: #A3122A; --rt-bg: #FCE6E9; }
.rtype-podcast   { --rt: #9C1458; --rt-bg: #FBE5F0; }
.rtype-easyread  { --rt: #0B6B6B; --rt-bg: #DFF3F2; }
.rtype-policy    { --rt: #1C4E7A; --rt-bg: #E5EDF6; }
.rtype-data      { --rt: #6B5300; --rt-bg: #FBF1CF; }
.rtype-research  { --rt: #3F3A9E; --rt-bg: #ECEBFA; }
.rtype-guide     { --rt: #3D5A00; --rt-bg: #EDF5DB; }
.rtype-other     { --rt: #49576A; --rt-bg: #EEF1F4; }
.rtype { display: inline-flex; align-items: center; gap: 0.55rem; }
.rtype-icon {
  display: inline-grid; place-items: center; flex: none;
  width: 2.4rem; height: 2.4rem; border-radius: 12px;
  background: var(--rt-bg); color: var(--rt);
}
.rtype-label {
  font-family: var(--font-head); font-weight: 700; font-size: 0.86rem;
  letter-spacing: 0.02em; color: var(--rt);
}
/* "Browse by type" buttons above the library filters. */
.type-browse { margin-block-end: 1.4rem; }
.type-browse-title { font-size: 1rem; margin: 0 0 0.7rem; }
.type-browse-list { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.type-btn {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px;
  padding: 0.3rem 0.9rem 0.3rem 0.3rem; cursor: pointer;
  background: var(--c-paper); color: var(--c-ink);
  border: 1.5px solid var(--c-border); border-radius: 14px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.92rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.type-btn .rtype-icon { width: 2.3rem; height: 2.3rem; border-radius: 10px; }
.type-btn:hover { border-color: var(--rt); }
.type-btn[aria-pressed="true"] { border-color: var(--rt); background: var(--rt-bg); box-shadow: inset 0 0 0 1px var(--rt); }
.type-btn[aria-pressed="true"] .type-btn-name { color: var(--rt); }
.type-btn-count {
  min-width: 1.6rem; padding: 0.05rem 0.45rem; border-radius: 999px;
  background: var(--c-wash); color: var(--c-muted); font-size: 0.8rem; text-align: center;
}
html[data-theme="dark"] .rtype-icon,
html[data-theme="dark"] .type-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--rt) 35%, transparent); color: #fff; }
html[data-theme="dark"] .rtype-label,
html[data-theme="dark"] .type-btn[aria-pressed="true"] .type-btn-name { color: var(--c-ink); }
html[data-contrast="high"] .rtype-icon { background: #000 !important; color: #ffd23f !important; border: 2px solid #fff; }
html[data-contrast="high"] .rtype-label { color: #fff !important; }
html[data-contrast="high"] .type-btn { background: #000 !important; color: #fff !important; border-color: #fff !important; }
html[data-contrast="high"] .type-btn[aria-pressed="true"] { outline: 3px solid #ffd23f; }
@media (max-width: 40rem) {
  .type-browse-list { gap: 0.45rem; }
  .type-btn { font-size: 0.88rem; padding-inline-end: 0.7rem; }
}
/* Description is already capped to ~15 words in PHP/JS — this is a visual
   safety net so an unlucky wrap (long single words, a narrow column) still
   can't push one card, and therefore its whole grid row, taller than the rest. */
.resource-card .card-body p,
.blog-card .card-body p {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.resource-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; color: var(--c-muted); font-size: 0.88rem; padding: 0; margin: 0; list-style: none; }
.dl-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-head); font-weight: 600; color: var(--c-primary);
}
.pager {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0.5rem; margin-top: 2rem;
}
.pager-btn, .pager-page {
  min-height: 40px; border: 1.5px solid var(--c-border); border-radius: 999px;
  background: var(--c-paper); color: var(--c-ink); font-family: var(--font-head);
  font-weight: 600; font-size: 0.9rem; padding: 0.45rem 0.9rem; cursor: pointer;
}
.pager-btn:hover, .pager-page:hover { border-color: var(--c-primary); }
.pager-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pager-page.is-current {
  background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary);
}
@media (max-width: 40rem) {
  .pager { justify-content: stretch; }
  .pager-btn, .pager-page { flex: 1 1 auto; }
}

/* ---------- 18. Forum preview (hub) ---------- */
.panel {
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-l); box-shadow: var(--shadow-1); padding: 1.5rem;
}
.thread-list { display: grid; gap: 0.8rem; }
.thread {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem; align-items: center;
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); padding: 1rem 1.3rem;
}
@media (max-width: 40rem) { .thread { grid-template-columns: auto 1fr; } .thread .t-stats { grid-column: 2; justify-self: start; } }
.avatar {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);   /* keeps white initials readable on light avatar colours */
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 0.98rem; flex: none;
  object-fit: cover; object-position: center;
}
.thread h3 { font-size: 1.05rem; margin: 0 0 0.15rem; }
.thread .t-meta { color: var(--c-muted); font-size: 0.88rem; }
.thread .t-stats { text-align: end; font-size: 0.88rem; color: var(--c-muted); font-family: var(--font-head); }
.thread .t-stats strong { display: block; font-size: 1.05rem; color: var(--c-ink); }
.post {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); padding: 1.2rem 1.4rem;
}
.post .p-head { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline; }
.post .p-head .name { font-family: var(--font-head); font-weight: 700; }
.post .p-head .role { color: var(--c-muted); font-size: 0.88rem; }
.notice {
  display: flex; gap: 0.8rem; align-items: flex-start;
  background: #fdf1e2; border: 1.5px solid #e0b980; border-radius: var(--radius-m);
  padding: 1rem 1.2rem; color: var(--c-ink);
}
html[data-contrast="high"] .notice { background: #000; border-color: #fff; }
.notice svg { flex: none; color: var(--c-orange-text); margin-top: 0.15rem; }
.notice-error { background: #fbe9ea; border-color: #e2a8ad; }
.notice-error svg { color: var(--c-red-text); }
html[data-contrast="high"] .notice-error { background: #000; border-color: #fff; }

/* ---------- 19. Page banner (inner pages) ---------- */
.page-banner {
  position: relative;
  background:
    radial-gradient(40rem 22rem at 110% -30%, rgba(28,183,238,0.15), transparent 60%),
    radial-gradient(36rem 22rem at -12% 130%, rgba(68,125,187,0.08), transparent 60%),
    linear-gradient(150deg, #f3f8ff 0%, #edf4fd 58%, #f7fbff 100%);
  padding-block: clamp(1.8rem, 3.5vw, 3rem);
}
.page-banner .container { width: min(100% - 2.5rem, 87rem); text-align: center; }
.page-banner .crumbs { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; padding: 0; margin: 0 0 1rem; font-size: 0.92rem; }
.page-banner .crumbs li { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--c-muted); }
.page-banner .crumbs li + li::before { content: "/"; color: var(--c-muted); margin-inline-end: 0.4rem; }
.page-banner h1 { margin-bottom: 0.35em; }
.page-banner .lead { max-width: 46em; margin-inline: auto; }

/* Split feature rows */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* Wider gap between the two columns (homepage Members Forum band). */
.split.split-wide { column-gap: clamp(3rem, 9vw, 8rem); }
@media (max-width: 56rem) {
  .split { grid-template-columns: 1fr !important; gap: 1.2rem; }
  .split > * { order: initial !important; }
}
@media (max-width: 544px) {
  .split { grid-template-columns: 1fr !important; }
}
@media (max-width: 40rem) {
  .split { gap: 1rem; }
  .split .arch-photo, .split .round-photo { border-radius: var(--radius-m); }
  .split .arch-photo img, .split .round-photo img { aspect-ratio: 4 / 3; }
  .split h3 { margin-top: 0.5rem !important; }
  .split .news-meta { line-height: 1.55; }
}
.split .arch-photo { border-radius: var(--arch); overflow: hidden; box-shadow: var(--shadow-2); margin: 0; }
.split .arch-photo img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; }
.split .round-photo { border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-2); margin: 0; }
.split .round-photo img { width: 100%; aspect-ratio: 16/11; object-fit: cover; }

/* Numbered objective list */
.obj-list { list-style: none; counter-reset: obj; padding: 0; margin: 0; display: grid; gap: 1rem; }
.obj-list li {
  counter-increment: obj;
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: flex-start;
  background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--radius-m);
  padding: 1.1rem 1.3rem; box-shadow: var(--shadow-1);
}
.obj-list li::before {
  content: counter(obj, decimal-leading-zero);
  font-family: var(--font-head); font-weight: 800; font-size: 1.3rem;
  color: var(--c-ink);
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 999px; background: var(--c-wash);
  border: 1.5px solid var(--c-border);
}

/* Steps */
.steps { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 1.25rem; counter-reset: step; max-width: 980px; justify-items: center; }
@media (max-width: 62rem) { .steps { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 40rem) { .steps { grid-template-columns: 1fr; } }
.steps li {
  counter-increment: step; width: 100%; max-width: 280px; background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); padding: 1.3rem; box-shadow: var(--shadow-1); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.steps li::before {
  content: counter(step);
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 999px;
  background: var(--c-primary); color: var(--c-on-primary);
  font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; margin-block-end: 0.8rem;
}
html[data-contrast="high"] .steps li::before { background: #ffd23f; color: #000; }
.steps h3 { font-size: 1.05rem; text-align: center; }
.steps p { color: var(--c-muted); font-size: 0.95rem; margin: 0; text-align: center; }

/* CTA band */
.cta-band { text-align: center; }
.cta-band .btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 1.6rem; }

/* Table (used sparingly) */
.table-wrap { overflow-x: auto; position: relative; }   /* contains the visually-hidden labels in rows, which otherwise widen the page */
/* Report a post or discussion: the form opens on its own line, never wider than the post. */
.report-details { display: inline-block; margin-inline-start: 0.5rem; vertical-align: top; }
.report-details[open] { display: block; margin-inline-start: 0; margin-top: 0.6rem; }
.report-details-form { margin-top: 0.5rem; display: grid; gap: 0.4rem; max-width: min(22rem, 100%); }

/* @mention picker under a reply box (assets/js/mentions.js) */
.mention-list {
  list-style: none; margin: 0.3rem 0 0; padding: 0.3rem; max-width: 26rem; max-height: 16rem; overflow-y: auto;
  background: var(--c-paper); border: 1.5px solid var(--c-border); border-radius: var(--radius-m, 12px); box-shadow: var(--shadow-2);
}
.mention-list li { display: flex; flex-direction: column; padding: 0.45rem 0.7rem; border-radius: 8px; cursor: pointer; }
.mention-list li[aria-selected="true"] { background: var(--c-primary); color: var(--c-on-primary); }
.mention-list .mention-name { font-weight: 700; }
.mention-list .mention-detail { font-size: 0.85rem; opacity: 0.85; }
.report-details-form select, .report-details-form textarea { width: 100%; max-width: 100%; }
.post > * { min-width: 0; }   /* let a post's text column shrink to the screen instead of stretching to its widest child */
table.data { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
table.data th, table.data td { text-align: start; padding: 0.75rem 1rem; border-block-end: 1px solid var(--c-border); }
table.data th { font-family: var(--font-head); background: var(--c-wash); }

/* Back to top + misc */
.to-top { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-head); font-weight: 600; }
.divider { border: 0; border-top: 1px solid var(--c-border); margin-block: var(--space-4); }

/* ---------- 20. Hero polish ---------- */

/* ---------- 21. Member directory cards ---------- */
.member-card {
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.member-card.has-link:hover,
.member-card.has-link:focus-within {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.6rem 1.2rem rgba(0,0,0,0.12);
}
.member-card .logo-box {
  display: grid; place-items: center;
  min-height: 7.5rem; padding: 1.6rem 1.6rem 0.4rem;
}
.member-card .logo-box img {
  max-height: 4.8rem; width: auto; max-width: min(16rem, 80%); object-fit: contain;
  transition: transform 0.18s ease;
}
.member-card.has-link:hover .logo-box img { transform: scale(1.06); }
.member-card h3 a { color: inherit; text-decoration: none; }
.member-card h3 a:hover, .member-card h3 a:focus-visible { text-decoration: underline; }
.member-card h3 .ext-icon { margin-inline-start: 0.3rem; vertical-align: -1px; }
/* The whole card is the name link's hit area; focus is shown on the card. */
.member-card .stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.member-card .stretched-link:focus-visible { outline: none; }
.member-card:has(.stretched-link:focus-visible) { outline: 3px solid var(--c-focus, #1C4E7A); outline-offset: 3px; }
.member-card .card-body { padding-block-start: 0.6rem; }
.member-card h3 { font-size: 1.12rem; text-decoration: none; }
.member-card h3:hover { text-decoration: none; }
html[data-contrast="high"] .member-card .logo-box { background: #fff; border-radius: var(--radius-s); margin: 1rem 1rem 0; }

/* ---------- 22. Sign-in card (forum) ---------- */
.signin-card { max-width: 27rem; }
.signin-head { display: flex; align-items: center; gap: 0.9rem; margin-block-end: 1.2rem; }
.signin-head img { height: 2.9rem; width: auto; flex: none; }
.signin-head h3 { margin: 0; }
.signin-head .sub { margin: 0; color: var(--c-muted); font-size: 0.92rem; }
.pw-row { position: relative; }
.pw-row input { padding-inline-end: 5.6rem; }
.pw-toggle {
  position: absolute; inset-inline-end: 0.45rem; top: 50%; translate: 0 -50%;
  min-height: 38px; min-width: 4.2rem; padding: 0.2rem 0.8rem;
  border: 1.5px solid var(--c-border); border-radius: 8px;
  background: var(--c-wash); color: var(--c-primary-deep);
  font-family: var(--font-head); font-weight: 700; font-size: 0.85rem;
  cursor: pointer;
}
.pw-toggle[aria-pressed="true"] { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
html[data-contrast="high"] .pw-toggle[aria-pressed="true"] { background: #ffd23f; color: #000; border-color: #fff; }
.signin-links { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.95rem; margin: 0; }

/* ---------- 23. About page: objectives & deliverables ---------- */
.obj-list.cols-2 { grid-template-columns: 1fr 1fr; align-items: stretch; }
/* An odd item count leaves the last card alone on its row — centre it
   instead of leaving it stranded in the left column. */
.obj-list.cols-2 li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - 0.5rem);
  margin-inline: auto;
}
@media (max-width: 56rem) {
  .obj-list.cols-2 { grid-template-columns: 1fr; }
  .obj-list.cols-2 li:last-child:nth-child(odd) { max-width: none; margin-inline: 0; }
}
.obj-list h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }

.photo-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
  padding: 0; margin: 0; list-style: none;
}
.photo-strip li { margin: 0; }
.photo-strip figure { margin: 0; overflow: hidden; border-radius: var(--radius-l); box-shadow: var(--shadow-1); }
.photo-strip li:nth-child(odd) figure { border-radius: var(--arch); }
.photo-strip img { width: 100%; aspect-ratio: 3 / 3.3; object-fit: cover; }
@media (max-width: 56rem) { .photo-strip { grid-template-columns: repeat(2, 1fr); } }

.deliv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 62rem) { .deliv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .deliv-grid { grid-template-columns: 1fr; } }
.deliv-card {
  position: relative;
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); box-shadow: var(--shadow-1);
  padding: 1.3rem 1.3rem 1.2rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.deliv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.deliv-card .icon-round { width: 2.8rem; height: 2.8rem; margin-block-end: 0.8rem; }
.deliv-card h3 { font-size: 1.02rem; margin-bottom: 0.3rem; }
.deliv-card p { margin: 0; color: var(--c-muted); font-size: 0.93rem; }
.deliv-card .num-tag {
  position: absolute; top: 1.1rem; inset-inline-end: 1.2rem;
  font-family: var(--font-head); font-weight: 800; font-size: 1.5rem;
  color: var(--c-primary);
}
html[data-contrast="high"] .deliv-card { border: 2px solid #fff; }
html[data-contrast="high"] .deliv-card .num-tag { color: #fff; }

/* ============================================================
   24. Members' forum — auth modal
   Injected by assets/js/hub.js, so the markup lives in one place.
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(29, 15, 51, 0.62);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 1.25rem;
  overflow-y: auto;
  animation: modal-fade 0.18s ease-out;
}
.modal-backdrop[hidden] { display: none; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }

/* Embedded mode (membersforum.php): the exact same sign-in/create-account
   panel as the popup, laid out inline in the page instead of floating over
   it — no backdrop tint, no fixed positioning, no close button, since
   there's nothing to dismiss back to. */
.modal-backdrop.modal-embedded {
  position: static; inset: auto; z-index: auto;
  background: none; backdrop-filter: none;
  padding: 0; overflow: visible; animation: none;
  display: block;
}
.modal-embedded .modal { width: 100%; margin-inline: auto; animation: none; }
.modal-embedded .modal-close { display: none; }

.modal {
  position: relative; z-index: 1;
  width: min(100%, 58rem);
  background: var(--c-paper);
  border-radius: var(--radius-l);
  box-shadow: 0 24px 70px rgba(20, 8, 40, 0.45);
  overflow: hidden;
  display: grid; grid-template-columns: 20rem 1fr;
  animation: modal-rise 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes modal-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 6px;
  background: var(--ribbon); z-index: 3;
}

/* Left storytelling rail */
.modal-aside {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
  color: var(--c-on-dark);
  padding: 2.6rem 1.9rem 2rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.modal-aside::after {
  content: ""; position: absolute; z-index: 0;
  inset-inline-start: -4rem; bottom: -5rem;
  width: 15rem; height: 15rem; border-radius: 50%;
  border: 2px dashed rgba(237, 85, 158, 0.4);
  pointer-events: none;
}
.modal-aside > * { position: relative; z-index: 1; }
.modal-aside img.mark { height: 3.4rem; width: auto; max-width: 100%; align-self: flex-start; object-fit: contain; }
.modal-aside h3 { color: #fff; font-size: 1.28rem; margin: 0; }
.modal-aside .aside-lead { color: var(--c-on-dark-muted); font-size: 0.95rem; margin: 0; }
.modal-perks { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.75rem; }
.modal-perks li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.93rem; color: var(--c-on-dark-muted); }
.modal-perks svg { flex: none; color: var(--rb-green); margin-top: 0.15rem; }
.modal-aside .aside-foot {
  margin-top: auto; padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.86rem; color: var(--c-on-dark-muted);
}
.modal-aside .aside-foot strong { color: #fff; }

/* Right form column */
.modal-main { padding: 2.1rem 2.1rem 2rem; min-width: 0; }
.modal-close {
  position: absolute; top: 1.05rem; inset-inline-end: 1.05rem; z-index: 20;
  min-width: 40px; min-height: 40px;
  display: grid; place-items: center;
  border: 1.5px solid var(--c-border); border-radius: 50%;
  background: var(--c-paper); color: var(--c-ink); cursor: pointer;
}
.modal-close:hover { background: var(--c-wash); }
.modal-main h2 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.modal-main .modal-sub { color: var(--c-muted); font-size: 0.96rem; margin-block-end: 1.3rem; }

/* Sign in / Create account switch */
.auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem;
  background: var(--c-wash); border: 1px solid var(--c-border);
  border-radius: 99px; padding: 0.3rem; margin-block-end: 1.5rem;
}
.auth-tab {
  border: 0; border-radius: 99px; background: transparent;
  padding: 0.6rem 0.9rem; min-height: 44px; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 0.96rem;
  color: var(--c-muted);
  transition: background 0.18s ease, color 0.18s ease;
}
.auth-tab[aria-selected="true"] {
  background: var(--c-primary); color: var(--c-on-primary);
  box-shadow: var(--shadow-1);
}
html[data-contrast="high"] .auth-tab[aria-selected="true"] { background: #ffd23f; color: #000; }
.auth-tabs[hidden] { display: none; }

/* Step wizard */
.stepper { margin-block-end: 1.4rem; }
.stepper-track { height: 6px; border-radius: 99px; background: var(--c-border); overflow: hidden; }
.stepper-fill {
  height: 100%; border-radius: 99px; background: var(--ribbon); background-size: 300% 100%;
  transition: width 0.3s ease;
}
.stepper-marks { display: flex; justify-content: space-between; gap: 0.5rem; margin-block-start: 0.6rem; }
.stepper-marks li {
  flex: 1; list-style: none;
  font-family: var(--font-head); font-size: 0.8rem; font-weight: 600;
  color: var(--c-muted); display: flex; gap: 0.4rem; align-items: center;
}
.stepper-marks .dot {
  width: 1.35rem; height: 1.35rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 2px solid var(--c-border); background: var(--c-paper);
  font-size: 0.7rem; color: var(--c-muted);
}
.stepper-marks li[data-state="current"] { color: var(--c-primary); }
.stepper-marks li[data-state="current"] .dot { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-on-primary); }
.stepper-marks li[data-state="done"] .dot { border-color: var(--c-green-text); background: var(--c-green-text); color: #fff; }
@media (max-width: 34rem) { .stepper-marks li span:not(.dot) { display: none; } .stepper-marks li { flex: 0 0 auto; } }

/* Password strength */
.pw-meter { margin-block-start: 0.55rem; }
.pw-meter .segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; }
.pw-meter .seg { height: 6px; border-radius: 99px; background: var(--c-border); }
.pw-meter[data-score="1"] .seg:nth-child(-n+1) { background: var(--c-red-text); }
.pw-meter[data-score="2"] .seg:nth-child(-n+2) { background: #b35f00; }
.pw-meter[data-score="3"] .seg:nth-child(-n+3) { background: var(--c-blue-text); }
.pw-meter[data-score="4"] .seg { background: var(--c-green-text); }
.pw-meter .pw-note { font-size: 0.86rem; color: var(--c-muted); margin: 0.4rem 0 0; }

/* Selectable interest chips */
.chip-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.chip-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 40px; padding: 0.4rem 0.9rem;
  border: 1.5px solid var(--c-border); border-radius: 99px;
  background: var(--c-paper); color: var(--c-ink); cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 0.88rem;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.chip-toggle:hover { border-color: var(--c-primary); }
.chip-toggle .tick { width: 0.95rem; height: 0.95rem; opacity: 0; flex: none; }
.chip-toggle[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.chip-toggle[aria-pressed="true"] .tick { opacity: 1; }
html[data-contrast="high"] .chip-toggle[aria-pressed="true"] { background: #ffd23f; color: #000; border-color: #fff; }

.modal-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-block-start: 1.5rem; }
.modal-actions .grow { flex: 1 1 10rem; }
.modal-foot { margin: 1.1rem 0 0; font-size: 0.92rem; color: var(--c-muted); }

/* Success state */
.auth-done { text-align: center; padding-block: 1rem; }
.auth-done .ring {
  width: 4.6rem; height: 4.6rem; margin: 0 auto 1.1rem;
  border-radius: 50%; display: grid; place-items: center;
  background: #e7f6f0; color: var(--c-green-text);
  border: 3px solid var(--c-green-text);
}
html[data-contrast="high"] .auth-done .ring { background: #000; color: #ffd23f; border-color: #ffd23f; }

@media (max-width: 52rem) {
  .modal { grid-template-columns: 1fr; }
  .modal-aside { padding: 2.2rem 1.5rem 1.6rem; }
  .modal-aside .modal-perks, .modal-aside .aside-foot { display: none; }
  .modal-main { padding: 1.6rem 1.4rem 1.6rem; }
  .auth-tabs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) {
  .modal-backdrop { padding: 0; }
  .modal {
    width: 100%; min-height: 100vh; border-radius: 0;
    box-shadow: none;
  }
  .modal-main { padding: 1.35rem 1rem 1.25rem; }
  .auth-tabs { grid-template-columns: 1fr; border-radius: var(--radius-m); }
  .modal .form-grid { gap: 0.9rem; }
  .modal .two, .modal .form-grid .two { grid-template-columns: 1fr; }
  .modal .chip-picker { gap: 0.4rem; }
  .modal .chip-toggle { flex: 1 1 calc(50% - 0.4rem); justify-content: center; }
  .modal-actions { flex-direction: column; }
  .modal-actions .grow, .modal-actions .btn { width: 100%; flex: 0 0 auto; }   /* stacked: 10rem basis would become the height */
  .signin-card { max-width: 100%; }
  .hub-welcome .btn-row { flex-direction: column; }
  .hub-welcome .btn-row .btn { width: 100%; }
  .forum-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forum-tab { justify-content: center; border-radius: var(--radius-s); border-block-end: none; margin-block-end: 0; }
  .forum-tab[aria-selected="true"] { border-block-end-color: transparent; background: color-mix(in srgb, var(--c-primary) 10%, transparent); }
}
html[data-contrast="high"] .modal { border: 2px solid #fff; }
html[data-contrast="high"] .modal-backdrop { background: rgba(0, 0, 0, 0.9); backdrop-filter: none; }

/* ============================================================
   25. Members' forum — hub workspace
   ============================================================ */

/* Signed-out welcome bar */
.hub-welcome {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
  background: linear-gradient(150deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
  color: var(--c-on-dark);
  border-radius: var(--radius-l);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  position: relative; overflow: hidden;
}
.hub-welcome::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 6px; background: var(--ribbon);
}
.hub-welcome::after {
  content: ""; position: absolute; z-index: 0;
  inset-inline-end: -5rem; top: -5rem;
  width: 18rem; height: 18rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 183, 238, 0.26), transparent 65%);
  pointer-events: none;
}
.hub-welcome > * { position: relative; z-index: 1; }
.hub-welcome h2 { color: #fff; margin-bottom: 0.4rem; }
.hub-welcome p { color: var(--c-on-dark-muted); }
.hub-welcome .btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-block-start: 1.4rem; }
.hub-figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.hub-figure {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-m); padding: 1rem 1.1rem;
}
.hub-figure .n { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: #fff; display: block; line-height: 1.1; }
.hub-figure .l { font-size: 0.84rem; color: var(--c-on-dark-muted); }
@media (max-width: 56rem) { .hub-welcome { grid-template-columns: 1fr; } }
html[data-contrast="high"] .hub-welcome { background: #000; border: 2px solid #fff; }
html[data-contrast="high"] .hub-figure { border: 2px solid #fff; background: #000; }

/* Workspace tab bar */
.forum-tabs {
  display: flex; gap: 0.35rem; flex-wrap: wrap;
  border-block-end: 2px solid var(--c-border);
  margin-block-end: 2rem;
  padding: 0;
}
.forum-tab {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 48px; padding: 0.6rem 1.05rem;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 0.97rem;
  color: var(--c-muted);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  border-block-end: 3px solid transparent;
  margin-block-end: -2px;
}
.forum-tab:hover { background: var(--c-wash); color: var(--c-primary); }
.forum-tab[aria-selected="true"] { color: var(--c-primary); border-block-end-color: var(--c-primary); }
.forum-tab .count {
  font-size: 0.76rem; padding: 0.05rem 0.5rem; border-radius: 99px;
  background: var(--c-wash); border: 1px solid var(--c-border); color: var(--c-muted);
}
.forum-tab[aria-selected="true"] .count { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
html[data-contrast="high"] .forum-tab[aria-selected="true"] { color: #ffd23f; border-block-end-color: #ffd23f; }
.forum-panel[hidden] { display: none; }
.forum-panel:focus-visible { outline-offset: 8px; }

/* Community of practice cards */
.cop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 62rem) { .cop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .cop-grid { grid-template-columns: 1fr; } }
.cop-card {
  display: flex; flex-direction: column;
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); box-shadow: var(--shadow-1); overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.cop-cover { height: 6px; background: var(--rb-purple); }
.cop-card .cop-body { padding: 1.25rem 1.35rem 1.35rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.cop-card h3 { font-size: 1.05rem; margin: 0; }
.cop-card .cop-desc { color: var(--c-muted); font-size: 0.94rem; margin: 0; }
.cop-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.85rem; color: var(--c-muted); margin: 0; padding: 0; list-style: none; }
.cop-meta li { display: inline-flex; align-items: center; gap: 0.3rem; }
.badge-priv {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-head); font-weight: 700; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.12rem 0.55rem; border-radius: 99px;
  background: #e7f6f0; color: var(--c-green-text); border: 1px solid #bfe6d6;
}
.badge-priv.is-private { background: #fdf1e2; color: var(--c-orange-text); border-color: #f3d8b3; }
/* Joined community: a status badge plus a plain text "Leave" action, so only
   one thing on the card looks like a button (the Join button when not joined). */
.joined-row { display: inline-flex; align-items: center; gap: 0.7rem; }
.btn-leave {
  background: none; border: 0; padding: 0.2rem 0; cursor: pointer;
  font: inherit; font-size: 0.88rem; color: var(--c-muted);
  text-decoration: underline; text-underline-offset: 0.2em;
}
.btn-leave:hover, .btn-leave:focus-visible { color: var(--c-ink); }
html[data-contrast="high"] .btn-leave { color: #fff; }

/* CMS "Preview" bar on public pages (only editors ever see it). */
.preview-bar {
  position: sticky; top: 0; z-index: 300;
  background: #8a5a00; color: #fff; text-align: center;
  padding: 0.6rem 1rem; font-size: 0.92rem; line-height: 1.4;
}
/* ---------- Connections (friend requests) ---------- */
.conn-list { list-style: none; margin: 0; padding: 0; }
.conn-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: center; padding-block: 0.85rem; }
.conn-row + .conn-row { border-block-start: 1px solid var(--c-border); }
.conn-row .avatar { width: 2.6rem; height: 2.6rem; font-size: 0.8rem; }
.conn-who { display: flex; flex-direction: column; min-width: 0; }
.conn-name { font-weight: 700; font-family: var(--font-head); }
.conn-meta { color: var(--c-muted); font-size: 0.88rem; }
.conn-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.conn-actions .badge-priv svg, .badge-priv svg { width: 12px; height: 12px; }
@media (max-width: 40rem) {
  .conn-row { grid-template-columns: auto 1fr; }
  .conn-row .conn-actions { grid-column: 2; }
}

/* ---------- Direct messages ---------- */
.dm-layout { display: grid; grid-template-columns: minmax(15rem, 20rem) 1fr; gap: 1.4rem; align-items: start; }
.dm-list { padding: 0.6rem 0.6rem 0.8rem; }
.dm-list .panel-head { padding-inline: 0.6rem; }
.dm-list ul { list-style: none; margin: 0; padding: 0; }
.dm-convo {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: center;
  padding: 0.6rem; border-radius: var(--radius-m); color: inherit; text-decoration: none;
}
.dm-convo:hover, .dm-convo:focus-visible, .dm-convo.is-open { background: var(--c-wash); }
.dm-convo .avatar { width: 2.4rem; height: 2.4rem; font-size: 0.78rem; }
.dm-convo-text { display: flex; flex-direction: column; min-width: 0; }
.dm-convo-name { font-weight: 700; font-family: var(--font-head); font-size: 0.95rem; display: flex; align-items: center; gap: 0.4rem; }
.dm-convo-last { color: var(--c-muted); font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-convo-time { color: var(--c-muted); font-size: 0.78rem; align-self: start; white-space: nowrap; }
.dm-unread { background: var(--c-primary); color: var(--c-on-primary); border-radius: 99px; font-size: 0.72rem; padding: 0.05rem 0.45rem; }
.dm-thread { display: flex; flex-direction: column; min-height: 26rem; }
.dm-thread-head { border-block-end: 1px solid var(--c-border); padding-block-end: 0.8rem; margin-block-end: 0.4rem; }
.dm-thread-head h2 { margin: 0; font-size: 1.2rem; }
.dm-back { display: none; font-size: 0.9rem; margin-block-end: 0.4rem; }
.dm-messages { list-style: none; margin: 0; padding: 0.6rem 0; display: flex; flex-direction: column; gap: 0.7rem; max-height: 60vh; overflow-y: auto; flex: 1; }
.dm-empty { color: var(--c-muted); text-align: center; padding: 2rem 0; }
.dm-msg { display: flex; flex-direction: column; max-width: 78%; }
.dm-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.dm-msg.is-theirs { align-self: flex-start; }
.dm-bubble { padding: 0.6rem 0.9rem; border-radius: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.dm-msg.is-theirs .dm-bubble { background: var(--c-wash); border: 1px solid var(--c-border); border-end-start-radius: 0.3rem; }
.dm-msg.is-mine .dm-bubble { background: var(--c-primary); color: var(--c-on-primary); border-end-end-radius: 0.3rem; }
.dm-time { color: var(--c-muted); font-size: 0.76rem; margin-top: 0.2rem; }
/* Moderation queue (review P-04). */
.premod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.premod-item { border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: 1rem 1.1rem; }
.premod-meta { margin: 0 0 0.4rem; font-size: 0.88rem; color: var(--c-muted); }
.premod-title { margin: 0 0 0.4rem; font-size: 1.05rem; }
.premod-body { margin-bottom: 0.7rem; white-space: normal; }
.premod-file { margin: 0 0 0.8rem; font-size: 0.9rem; }
.report-urgent { background: #fdecec; }
.report-flag { color: var(--c-red-text); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.04em; }
html[data-theme="dark"] .report-urgent { background: #3a1616; }
/* Organisations page: invitation-to-join document link. */
.join-invite { display: flex; align-items: center; gap: 1rem; max-width: 34rem; margin: 0 auto; padding: 1.2rem 1.4rem; border: 1px solid var(--c-border); border-radius: var(--radius-m); background: var(--c-paper); color: var(--c-primary); }
.join-invite-title { margin: 0 0 0.2rem; font-family: var(--font-head); font-weight: 700; color: var(--c-ink); }
.join-invite .dl-link { display: inline; }
.join-form-cta { margin-top: 3rem; margin-bottom: 2rem; }
.join-form-intro { margin: 1rem auto 0; max-width: 34rem; text-align: center; }
@media (max-width: 40rem) { .join-form-cta .btn { min-height: 44px; padding: 0.45rem 1.2rem; font-size: 0.95rem; } }
.standards-head { text-align: center; }
.standards-head .eyebrow { display: block; }
.dm-report { font-size: 0.8rem; margin-top: 0.2rem; }
.dm-report summary { cursor: pointer; color: var(--c-muted); }
.dm-report form { display: grid; gap: 0.4rem; max-width: 22rem; margin-top: 0.4rem; text-align: start; }
.dm-compose { display: flex; gap: 0.7rem; align-items: flex-end; border-block-start: 1px solid var(--c-border); padding-block-start: 0.9rem; margin-block-start: 0.4rem; }
.dm-compose textarea { flex: 1; resize: vertical; min-height: 3.2rem; }
html[data-contrast="high"] .dm-msg.is-mine .dm-bubble { background: #000; border: 2px solid #fff; }
@media (max-width: 56rem) {
  .dm-layout { grid-template-columns: 1fr; }
  /* On small screens show either the list or the open conversation. */
  .dm-layout.has-open .dm-list { display: none; }
  .dm-layout.has-open .dm-back { display: inline-block; }
  .dm-layout:not(.has-open) .dm-thread { display: none; }
}
html[data-contrast="high"] .badge-priv { background: #000; color: #ffd23f; border-color: #fff; }
.cop-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-block-start: auto; padding-block-start: 0.6rem; }
.avatar-stack { display: flex; padding: 0; margin: 0; list-style: none; }
.avatar-stack li { margin-inline-start: -0.55rem; }
.avatar-stack li:first-child { margin-inline-start: 0; }
.avatar-stack .avatar {
  width: 2rem; height: 2rem; font-size: 0.72rem;
  border: 2px solid var(--c-paper); box-shadow: var(--shadow-1);
}
.avatar-stack .more {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-wash); border: 2px solid var(--c-paper);
  font-family: var(--font-head); font-weight: 700; font-size: 0.68rem; color: var(--c-muted);
}

/* Community search + sort toolbar */
.cop-toolbar { display: grid; grid-template-columns: 2fr 1fr auto; gap: 1rem; align-items: end; margin-block-end: 1.6rem; }
@media (max-width: 56rem) { .cop-toolbar { grid-template-columns: 1fr; } }
/* Discussions toolbar: search grows, actions follow, "Start a discussion"
   sits at the right edge above the list it adds to (review F-14). */
.cop-toolbar--row { display: flex; flex-wrap: wrap; }
.cop-toolbar--row .field { flex: 1 1 18rem; margin: 0; }
.cop-toolbar--row .cop-toolbar-action { margin-inline-start: auto; }
@media (max-width: 40rem) { .cop-toolbar--row .cop-toolbar-action { margin-inline-start: 0; } }

/* Activity feed */
.feed { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; position: relative; }
.feed::before {
  content: ""; position: absolute; top: 1.4rem; bottom: 1.4rem;
  inset-inline-start: 1.24rem; width: 2px; background: var(--c-border);
}
.feed-item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding-block: 1rem; position: relative; }
.feed-item + .feed-item { border-block-start: 1px solid var(--c-border); }
.feed-item .avatar { width: 2.6rem; height: 2.6rem; font-size: 0.8rem; border: 3px solid var(--c-paper); }
.feed-item .icon-round { width: 2.6rem; height: 2.6rem; flex: none; }
.feed-item .f-text { margin: 0; }
.feed-item .f-text .who { font-family: var(--font-head); font-weight: 700; }
.feed-item .f-meta { margin: 0.25rem 0 0; font-size: 0.86rem; color: var(--c-muted); display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.feed-item .f-quote {
  margin: 0.6rem 0 0; padding: 0.7rem 0.95rem;
  background: var(--c-wash); border-inline-start: 3px solid var(--c-primary);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: 0.94rem; color: var(--c-muted);
}

/* Leaderboard */
.leaderboard { display: grid; gap: 0.6rem; padding: 0; margin: 0; list-style: none; }
.lb-row {
  display: grid; grid-template-columns: 2.4rem auto 1fr auto; gap: 0.9rem; align-items: center;
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); padding: 0.75rem 1.1rem;
}
.lb-rank {
  font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
  color: var(--c-muted); text-align: center;
}
.lb-row:nth-child(1) .lb-rank { color: var(--c-orange-text); }
.lb-row:nth-child(2) .lb-rank { color: var(--c-blue-text); }
.lb-row:nth-child(3) .lb-rank { color: var(--c-pink-text); }
.lb-row .lb-name { font-family: var(--font-head); font-weight: 700; display: block; }
.lb-row .lb-role { font-size: 0.85rem; color: var(--c-muted); }
.lb-points { font-family: var(--font-head); font-weight: 700; color: var(--c-primary); white-space: nowrap; }
@media (max-width: 40rem) {
  .lb-row { grid-template-columns: 2rem auto 1fr; }
  .lb-points { grid-column: 2 / -1; }
}
html[data-contrast="high"] .lb-row, html[data-contrast="high"] .cop-card { border: 2px solid #fff; }

/* Reply composer */
.composer {
  background: var(--c-wash); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); padding: 1.2rem 1.3rem;
}
.composer textarea { width: 100%; }
.composer-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-block-start: 0.8rem; }
.composer-bar .spacer { margin-inline-start: auto; }
.composer-hint {
  display: flex; gap: 0.5rem; align-items: flex-start;
  font-size: 0.88rem; color: var(--c-muted); margin: 0.9rem 0 0;
}
.composer-hint svg { flex: none; color: var(--c-blue-text); margin-top: 0.1rem; }
.char-count { font-size: 0.85rem; color: var(--c-muted); font-family: var(--font-head); }

.field input[type="file"] {
  display: block; width: 100%; font: inherit; color: var(--c-ink); background: var(--c-paper);
  padding: 0.55rem 0.7rem; border: 1.5px solid #a99bc0; border-radius: var(--radius-s);
}
.field input[type="file"]:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-primary); }

/* Attachments — files shared on a thread or reply */
.attachment-list { display: flex; flex-direction: column; gap: 0.5rem; padding: 0; margin: 0.4rem 0 0; list-style: none; }
.attachment-chip {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  background: var(--c-wash); border: 1px solid var(--c-border); border-radius: var(--radius-s);
  padding: 0.55rem 0.85rem;
}
.attachment-chip .dl-link { font-size: 0.92rem; word-break: break-word; }
.attachment-meta { font-size: 0.82rem; color: var(--c-muted); }
.attachment-delete { margin-inline-start: auto; }

/* Materials library (dashboard/materials.php, admin/materials.php) */
.attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.attachment-card {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--radius-m);
  box-shadow: var(--shadow-1); padding: 1.1rem 1.2rem;
}
.attachment-card .att-icon {
  display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem;
  border-radius: var(--radius-s); background: var(--c-wash); color: var(--c-primary);
}
.attachment-card h3 { font-size: 0.98rem; margin: 0 0 0.2rem; word-break: break-word; }
.attachment-card .t-meta { font-size: 0.85rem; color: var(--c-muted); margin: 0; }
html[data-contrast="high"] .attachment-chip, html[data-contrast="high"] .attachment-card { border: 2px solid #fff; }

/* Member spotlight quotes */
.spotlight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 62rem) { .spotlight-grid { grid-template-columns: 1fr; } }
.spotlight {
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); box-shadow: var(--shadow-1);
  padding: 1.5rem 1.5rem 1.3rem; margin: 0;
  display: flex; flex-direction: column; gap: 1rem;
}
.spotlight blockquote { margin: 0; font-size: 1.02rem; }
.spotlight blockquote::before { content: "\201C"; font-family: var(--font-head); font-size: 2.6rem; line-height: 0.6; color: var(--rb-pink); display: block; margin-block-end: 0.35rem; }
.spotlight figcaption { display: flex; gap: 0.75rem; align-items: center; margin-block-start: auto; }
.spotlight figcaption .who { font-family: var(--font-head); font-weight: 700; display: block; font-size: 0.95rem; }
.spotlight figcaption .where { font-size: 0.85rem; color: var(--c-muted); }
html[data-contrast="high"] .spotlight { border: 2px solid #fff; }

/* Opportunities */
.opp-list { display: grid; gap: 1rem; padding: 0; margin: 0; list-style: none; }
.opp {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.5rem; align-items: center;
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-inline-start: 5px solid var(--c-primary);
  border-radius: var(--radius-m); padding: 1.2rem 1.4rem;
}
.opp h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.opp .opp-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.87rem; color: var(--c-muted); margin: 0; }
.deadline { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-head); font-weight: 600; color: var(--c-ink); }
.deadline.is-soon { color: var(--c-red-text); font-weight: 700; }
.deadline.is-closed { color: var(--c-muted); font-weight: 500; }
@media (max-width: 46rem) { .opp { grid-template-columns: 1fr; } }
html[data-contrast="high"] .opp { border: 2px solid #fff; border-inline-start: 5px solid #ffd23f; }

.opp-detail { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 56rem) { .opp-detail { grid-template-columns: 1fr; } }

/* Board index (forum categories) */
.board-list { display: grid; gap: 0.9rem; padding: 0; margin: 0; list-style: none; }
.board {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem; align-items: center;
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); padding: 1.1rem 1.3rem;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.board:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.board h3 { font-size: 1.03rem; margin: 0 0 0.2rem; }
.board p { margin: 0; font-size: 0.92rem; color: var(--c-muted); }
.board .board-nums { text-align: end; font-size: 0.85rem; color: var(--c-muted); font-family: var(--font-head); white-space: nowrap; }
.board .board-nums strong { display: block; font-size: 1.05rem; color: var(--c-ink); }
@media (max-width: 46rem) {
  .board { grid-template-columns: auto 1fr; }
  .board .board-nums { grid-column: 2; text-align: start; }
}
html[data-contrast="high"] .board { border: 2px solid #fff; }

/* Thread rows get a pinned/hot marker */
.thread .t-flags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-block-end: 0.3rem; }
.tag-pin, .tag-hot, .tag-solved {
  font-family: var(--font-head); font-weight: 700; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.1rem 0.5rem; border-radius: 99px; border: 1px solid;
}
.tag-pin { background: #F0F4FA; color: var(--c-primary); border-color: #CBD8EA; }
.tag-hot { background: #fdeef5; color: var(--c-pink-text); border-color: #f5c6dd; }
.tag-solved { background: #e7f6f0; color: var(--c-green-text); border-color: #bfe6d6; }
html[data-contrast="high"] .tag-pin, html[data-contrast="high"] .tag-hot, html[data-contrast="high"] .tag-solved {
  background: #000; color: #ffd23f; border-color: #fff;
}

/* An @[Full Name] mention rendered inline in a reply — bold and coloured like
   a link, but not underlined/clickable, since there's no profile page to
   send it to yet. */
.mention { font-weight: 700; color: var(--c-link); }

/* People directory */
.people-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 62rem) { .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .people-grid { grid-template-columns: 1fr; } }
.person {
  text-align: center; background: var(--c-paper);
  border: 1px solid var(--c-border); border-radius: var(--radius-m);
  padding: 1.5rem 1.1rem 1.3rem; box-shadow: var(--shadow-1);
}
.person .avatar { width: 3.6rem; height: 3.6rem; font-size: 1.1rem; margin: 0 auto 0.8rem; }
.person h3 { font-size: 1rem; margin: 0 0 0.2rem; }
.person .p-org { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.25rem; }
/* Role clamped to two whole lines (not a mid-word character cut). */
.person .p-role { font-size: 0.87rem; color: var(--c-muted); margin: 0 0 0.3rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.person .p-meta { font-size: 0.82rem; color: var(--c-muted); margin: 0 0 0.7rem; }
/* Member directory search + filters (review F-05). */
/* Stories & Insights filters (review M-07). */
.blog-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0.9rem; align-items: end; margin-block-end: 0.8rem; }
.blog-filter .field { margin: 0; }
.blog-filter-actions { display: flex; align-items: center; gap: 0.8rem; }
@media (max-width: 48rem) { .blog-filter { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .blog-filter { grid-template-columns: 1fr; } }
/* Forum: most active communities as a ranked list (review F-14). */
.active-communities { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.active-communities li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.active-communities a { font-weight: 600; }
.active-communities .ac-count { color: var(--c-muted); font-size: 0.86rem; white-space: nowrap; }
.dir-filter { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 0.9rem; align-items: end; margin-block-end: 0.8rem; }
.dir-filter .field { margin: 0; }
.dir-filter-actions { display: flex; align-items: center; gap: 0.8rem; }
@media (max-width: 48rem) { .dir-filter { grid-template-columns: 1fr 1fr; } .dir-filter .field:first-child { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .dir-filter { grid-template-columns: 1fr; } }

/* ---------- 24. Dashboard & admin workspace ----------
   `.hub-figure` (section 18) needs the dark `.hub-welcome` band behind it —
   its number and label are near-white. The member dashboard and admin area
   sit on the plain page background, so they get their own stat component
   plus a shared header/tab/panel language to stop every screen looking like
   a pile of unrelated boxes. */

/* Workspace intro: page heading + optional trailing action, above the tabs */
.dash-intro {
  display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: flex-end; justify-content: space-between;
  margin-block-end: 1.6rem;
}
.dash-intro h1 { margin: 0 0 0.3rem; }
.dash-intro p { margin: 0; }
.dash-intro .btn-row { margin: 0; }

/* Section sub-navigation (Overview / Forums / Directory / My profile, etc.) */
.dash-tabs {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  background: var(--c-wash); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); padding: 0.35rem;
  margin-block-end: 2.2rem;
}
.dash-tabs a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.05rem; border-radius: calc(var(--radius-m) - 0.35rem);
  font-family: var(--font-head); font-weight: 600; font-size: 0.92rem;
  color: var(--c-muted); text-decoration: none; white-space: nowrap;
}
.dash-tabs a svg { flex: none; opacity: 0.8; }
.dash-tabs a:hover { background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-1); }
.dash-tabs a[aria-current="page"] { background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--shadow-1); }
.dash-tabs a[aria-current="page"] svg { opacity: 1; }
html[data-contrast="high"] .dash-tabs { background: #000; border-color: #fff; }
html[data-contrast="high"] .dash-tabs a[aria-current="page"] { background: #ffd23f; color: #000; }

/* Stat cards — the light-background counterpart to .hub-figure */
.stat-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-block-end: 2.2rem; }
.stat-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-cards.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat-cards.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 64rem) {
  .stat-cards, .stat-cards.cols-3, .stat-cards.cols-5, .stat-cards.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
  .stat-cards, .stat-cards.cols-2, .stat-cards.cols-3, .stat-cards.cols-5, .stat-cards.cols-6 { grid-template-columns: 1fr; }
}
.stat-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-l); padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-1);
}
.stat-card .icon-round { width: 2.9rem; height: 2.9rem; }
.stat-card .icon-round svg { width: 20px; height: 20px; }
.stat-card .num {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: 1.6rem; line-height: 1.15; color: var(--c-ink);
}
.stat-card .label { font-size: 0.85rem; color: var(--c-muted); }
html[data-contrast="high"] .stat-card { border: 2px solid #fff; }

/* Consistent header for a panel/card: icon + title (+ optional trailing link) */
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-block-end: 1.1rem; padding-block-end: 0.9rem;
  border-block-end: 1px solid var(--c-border);
}
.panel-head h2, .panel-head h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 0.6rem; }
.panel-head h2 svg, .panel-head h3 svg { color: var(--c-primary); flex: none; }
.panel-head .panel-action { font-size: 0.86rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.panel-lead { color: var(--c-muted); font-size: 0.93rem; margin: -0.6rem 0 1.1rem; }

/* Vertical rhythm between stacked dashboard/admin sections */
.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.4rem; align-items: start; }
@media (max-width: 56rem) { .dash-grid { grid-template-columns: 1fr; } }
.dash-stack { display: grid; gap: 1.4rem; }

/* Quiet placeholder for "nothing here yet" states */
.empty-state { text-align: center; padding: 2.2rem 1.4rem; color: var(--c-muted); }
.empty-state svg { width: 2.6rem; height: 2.6rem; color: var(--c-border); margin-block-end: 0.9rem; }
.empty-state p:last-child { margin-block-end: 1rem; }
.empty-state .btn { margin-block-start: 0.2rem; }

/* Admin data tables sit inside a panel, header pattern matches the rest */
.table-panel { padding: 0; overflow: hidden; }
.table-panel .panel-head { padding: 1.3rem 1.5rem 0.9rem; margin-block-end: 0; }
.table-panel .table-wrap { padding: 0 0 0.2rem; }
.table-panel table.data { font-size: 0.94rem; }
.table-panel table.data th:first-child, .table-panel table.data td:first-child { padding-inline-start: 1.5rem; }
.table-panel table.data th:last-child, .table-panel table.data td:last-child { padding-inline-end: 1.5rem; }

/* A panel that sits on the same dark gradient as .hub-welcome/.band-dark */
.panel-dark {
  background: linear-gradient(150deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
  border: 0; color: var(--c-on-dark-muted);
}
.panel-dark .panel-head { border-block-end-color: rgba(255,255,255,0.18); }
.panel-dark .panel-head h3 { color: #fff; }
.panel-dark .panel-head h3 svg { color: #fff; }

/* Collapsible "add" forms (admin) styled to match .panel-head */
details.panel { padding: 1.3rem 1.5rem; }
details.panel summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.6rem; justify-content: space-between;
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--c-ink);
}
details.panel summary::-webkit-details-marker { display: none; }
details.panel summary .add-ic { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--c-wash); color: var(--c-primary); flex: none; font-size: 1.2rem; line-height: 1; }
details.panel summary .add-ic::before { content: "+"; }
details.panel[open] summary .add-ic { background: var(--c-primary); color: var(--c-on-primary); }
details.panel[open] summary .add-ic::before { content: "\2212"; }
details.panel[open] summary { margin-block-end: 1.2rem; padding-block-end: 0.9rem; border-block-end: 1px solid var(--c-border); }
details.panel summary:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: var(--radius-s); }

/* Role / status pills (admin users table) */
.pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.7rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; font-family: var(--font-head); }
.pill-admin { background: #fdf1e2; color: var(--c-orange-text); }
.pill-member { background: var(--c-wash); color: var(--c-muted); }
.pill-active { background: #e7f6f0; color: var(--c-green-text); }
.pill-suspended { background: #fdf0f1; color: var(--c-red-text); }
html[data-theme="dark"] .pill-admin { background: rgba(255,199,110,0.14); }
html[data-theme="dark"] .pill-member { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .pill-active { background: rgba(111,220,180,0.14); }
html[data-theme="dark"] .pill-suspended { background: rgba(255,157,157,0.14); }
html[data-contrast="high"] .person { border: 2px solid #fff; }

/* Guidelines checklist */
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; padding: 0; margin: 0; list-style: none; }
@media (max-width: 56rem) { .rules { grid-template-columns: 1fr; } }
.rules li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; }
.rules svg { flex: none; color: var(--rb-green); margin-top: 0.2rem; }
.band-dark .rules li { color: var(--c-on-dark-muted); }
.band-dark .rules strong { color: #fff; }

/* ============================================================
   26. Long-form pages — blog stories and project profiles
   ============================================================ */

/* Jump list at the top of a long page */
.jump-list { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 0; list-style: none; }
.jump-list a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 40px; padding: 0.35rem 0.95rem;
  border: 1.5px solid var(--c-border); border-radius: 99px;
  background: var(--c-paper); color: var(--c-ink); text-decoration: none;
  font-family: var(--font-head); font-weight: 600; font-size: 0.9rem;
}
.jump-list a:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-wash); }
.jump-list .n { color: var(--c-muted); font-variant-numeric: tabular-nums; }
html[data-contrast="high"] .jump-list a { border: 2px solid #fff; }

/* An article on the blog page */
.story { scroll-margin-top: calc(var(--header-h) + 2rem); }
.story-head { margin-block-end: 1.6rem; }
.story-head h2 { margin-bottom: 0.4rem; }
.story-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center;
  color: var(--c-muted); font-size: 0.92rem; margin: 0 0 1rem;
}
.story-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.7rem 1rem; margin: 0 0 2rem;
}
.story-stat {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-head); font-weight: 600; font-size: 0.88rem;
  color: var(--c-muted); background: var(--c-wash); border: 1px solid var(--c-border);
  border-radius: 999px; padding: 0.38rem 0.8rem;
}
.story-figure { margin: 0 0 1.8rem; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-2); }
.story-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.story-figure.arch { border-radius: var(--arch); }
.story > .container { width: min(100% - 2.5rem, 72rem); }
.story-head,
.story-figure,
.story-body,
.consent-note { margin-inline: auto; }
.story-body { max-width: none; }
.consent-note {
  display: flex; gap: 0.6rem; align-items: flex-start;
  background: var(--c-wash); border-radius: var(--radius-m);
  padding: 0.8rem 1rem; margin: 0 0 1.8rem;
  font-size: 0.92rem; color: var(--c-muted);
}
.consent-note svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--c-primary); }
.consent-note a { color: var(--c-ink); font-weight: 600; }
.article-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.7rem 1rem; margin: 0 0 1.5rem;
}
.story-body > p:first-of-type { font-size: 1.1rem; color: var(--c-ink); }
/* Pictures and videos added in the CMS text editor. */
.story-body p > img, .acc-body p > img { margin-block: 0.4rem; border-radius: var(--radius-m); }
iframe.ql-video {
  display: block; width: 100%; max-width: 48rem; aspect-ratio: 16 / 9; height: auto;
  border: 0; border-radius: var(--radius-m); margin-block: 1rem;
}
.pull {
  margin: 1.8rem 0; padding: 1.1rem 0 1.1rem 1.4rem;
  border-inline-start: 5px solid var(--rb-pink);
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.35;
  color: var(--c-primary-deep);
}
html[data-contrast="high"] .pull { border-inline-start-color: #ffd23f; color: #ffd23f; }
.source-note {
  margin-block-start: 1.8rem; padding: 1rem 1.2rem;
  background: var(--c-wash); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); font-size: 0.92rem; color: var(--c-muted);
}
.source-note p { margin: 0; }
.source-note p + p { margin-block-start: 0.5rem; }
html[data-contrast="high"] .source-note { border: 2px solid #fff; }

/* Project profile */
.project { scroll-margin-top: calc(var(--header-h) + 2rem); }
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
  margin: 0 0 1.8rem; padding: 0;
}
@media (max-width: 62rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .facts { grid-template-columns: 1fr; } }
.facts > div {
  background: var(--c-paper); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); padding: 0.95rem 1.1rem;
}
.facts dt {
  font-family: var(--font-head); font-weight: 700; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted);
  margin-block-end: 0.25rem;
}
.facts dd { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; }
html[data-contrast="high"] .facts > div { border: 2px solid #fff; }

.outcomes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 1.6rem 0 0; list-style: none; }
@media (max-width: 62rem) { .outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .outcomes { grid-template-columns: 1fr; } }
.outcomes li {
  background: var(--c-wash); border-radius: var(--radius-m);
  padding: 1.1rem 1.2rem; border-inline-start: 4px solid var(--c-primary);
}
.outcomes .figure {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: 1.7rem; line-height: 1.1; color: var(--c-ink);
}
.outcomes .what { font-size: 0.92rem; color: var(--c-muted); }
html[data-contrast="high"] .outcomes li { border: 2px solid #fff; border-inline-start: 4px solid #ffd23f; }

.obj-steps { list-style: none; padding: 0; margin: 1.4rem 0 0; counter-reset: obj; display: grid; gap: 1rem; }
.obj-steps li {
  counter-increment: obj; position: relative;
  padding-inline-start: 3.2rem; min-height: 2.4rem;
}
.obj-steps li::before {
  content: counter(obj); position: absolute; inset-inline-start: 0; top: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-wash); border: 2px solid var(--c-primary); color: var(--c-ink);
  font-family: var(--font-head); font-weight: 800;
}
.obj-steps h4 { margin: 0.2rem 0 0.3rem; }
.obj-steps p { margin: 0; color: var(--c-muted); font-size: 0.96rem; }
html[data-contrast="high"] .obj-steps li::before { background: #000; border-color: #ffd23f; color: #ffd23f; }

/* ---------- 25. Countries index & country page ---------- */
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0 0 1rem; font-size: 0.92rem; }
.crumbs li { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--c-muted); }
.crumbs li + li::before { content: "/"; color: var(--c-muted); margin-inline-end: 0.4rem; }

.az-nav { margin: 1.6rem 0; }
.az-nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; list-style: none; }
.az-nav .az-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.3rem; height: 2.3rem; padding: 0 0.35rem;
  border-radius: var(--radius-s); border: 1.5px solid var(--c-border);
  background: var(--c-paper); color: var(--c-primary-deep);
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
  text-decoration: none;
}
a.az-link:hover { border-color: var(--c-primary); background: var(--c-wash); }
a.az-link:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.az-link.disabled { color: var(--c-muted); opacity: 0.45; border-style: dashed; }

.country-header { margin: 1.6rem 0 1.2rem; }
.country-header h1 { margin-bottom: 0.3rem; }

.countries-index { margin-top: 1.6rem; display: grid; gap: 2rem; }
.letter-group { scroll-margin-top: 6rem; }
/* Country index grouped by region (review UX-04). */
.region-nav { margin-block: 1.4rem 2rem; }
.region-nav-label { font-family: var(--font-head); font-weight: 700; margin: 0 0 0.6rem; }
.region-nav .chip { text-decoration: none; }
.region-count { font-weight: 400; color: var(--c-muted); }
.region-group { margin-block-end: 2.2rem; scroll-margin-top: 6rem; }
.region-overview { margin: -0.2rem 0 0.8rem; }
.region-overview a { font-weight: 600; }
.letter-heading {
  font-family: var(--font-head); font-size: 1.3rem; font-weight: 700;
  color: var(--c-primary-deep); border-block-end: 2px solid var(--c-border);
  padding-block-end: 0.4rem; margin: 0 0 0.9rem;
}
.country-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem 1rem;
}
.country-link {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.7rem 1rem; border-radius: var(--radius-s); border: 1px solid var(--c-border);
  background: var(--c-paper); text-decoration: none; color: var(--c-ink);
}
.country-link:hover { border-color: var(--c-primary); background: var(--c-wash); }
.country-link:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.country-name { font-family: var(--font-head); font-weight: 600; }
.country-count { font-size: 0.82rem; color: var(--c-muted); white-space: nowrap; }

.content-list { display: grid; gap: 1rem; }
.content-card .type-row { display: flex; align-items: center; gap: 0.6rem; margin-block-end: 0.2rem; }
.content-meta { color: var(--c-muted); }

.pager-prev, .pager-next {
  display: inline-flex; align-items: center; min-height: 40px;
  border: 1.5px solid var(--c-border); border-radius: 999px;
  background: var(--c-paper); color: var(--c-ink); font-family: var(--font-head);
  font-weight: 600; font-size: 0.9rem; padding: 0.45rem 1.1rem; text-decoration: none;
}
.pager-prev:hover, .pager-next:hover { border-color: var(--c-primary); }
.pager-info { font-family: var(--font-head); font-weight: 600; color: var(--c-ink); }

@media (max-width: 40rem) {
  .country-list { grid-template-columns: 1fr; }
}

/* Print */
@media print {
  .site-header, .a11y-fab, .toolbar-panel, .a11y-backdrop, .a11y-guide,
  .site-footer .footer-grid, .nav-toggle, .modal-backdrop { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .forum-panel[hidden] { display: block !important; }
}

/* ---------- Site search (/search) ---------- */
.site-search { display: flex; gap: 0.6rem; max-width: 40rem; margin: 1.2rem auto 0; }
.site-search input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 48px; font-size: 1rem; }
.site-search .btn { flex: none; }
.search-summary { font-size: 1.15rem; margin: 0 0 1rem; }
.search-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 2rem; }
.search-filters .chip span { font-weight: 400; opacity: 0.8; }
.search-group { margin-block-end: 2.4rem; }
.search-group h3 { font-size: 1.2rem; margin: 0 0 0.8rem; padding-block-end: 0.5rem; border-bottom: 1px solid var(--c-border); }
.search-count { color: var(--c-muted); font-weight: 400; font-size: 1rem; }
.search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.search-results li { max-width: 52rem; }
.search-title { font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; }
.search-meta { margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--c-muted); }
.search-snippet { margin: 0.3rem 0 0; font-size: 0.95rem; line-height: 1.6; }
.search-results mark { background: #fff1a8; color: inherit; padding: 0 0.1em; border-radius: 2px; }
html[data-theme="dark"] .search-results mark { background: #5a4b10; color: var(--c-ink); }
html[data-contrast="high"] .search-results mark { background: #ffd23f; color: #000; }
@media (max-width: 40rem) {
  .site-search { flex-direction: column; }
  .site-search .btn { width: 100%; }
}
/* The search box on the results page. */
.site-search input[type="search"] {
  appearance: none; -webkit-appearance: none; font-family: var(--font-body); color: var(--c-ink);
  background: var(--c-paper); border: 1.5px solid var(--c-border); border-radius: 999px; padding-inline: 1.2rem;
}
.site-search input[type="search"]:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-primary); }

/* ---------- Site popup (CMS > Popups), built by main.js ----------
   Named "announce" because ad blockers hide elements called "popup". */
html.announce-open { overflow: hidden; }
.announce-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(12, 24, 40, 0.62);
  /* Towards the right of the page, with a gap so it does not sit on the edge. */
  display: grid; place-items: center end;
  padding: 1.25rem; padding-inline-end: clamp(1.25rem, 6vw, 6rem); overflow-y: auto;
  animation: modal-fade 0.18s ease-out;
}
.announce {
  position: relative;
  width: min(100%, 32rem);
  background: var(--c-paper); color: var(--c-ink);
  border-radius: 0;
  box-shadow: 0 24px 70px rgba(10, 20, 40, 0.45);
  overflow: hidden;
  animation: modal-rise 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.announce:focus { outline: none; }
.announce:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.announce-img { display: block; width: 100%; max-height: 17rem; object-fit: cover; }
.announce-body { padding: 1.5rem 1.6rem 1.6rem; }
/* Room for the close button when there is no image for it to sit on. */
.announce > .announce-close + .announce-body h2 { padding-inline-end: 2.8rem; }
.announce-body h2 { font-size: 1.45rem; margin: 0 0 0.5rem; }
.announce-body p { margin: 0; color: var(--c-muted); overflow-wrap: anywhere; }
.announce-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-block-start: 1.3rem; }
.announce-close {
  position: absolute; top: 0.8rem; inset-inline-end: 0.8rem; z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1.5px solid var(--c-border); border-radius: 50%;
  background: var(--c-paper); color: var(--c-ink); cursor: pointer;
}
.announce-close:hover { background: var(--c-wash); }
.announce-close:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
@media (max-width: 30rem) {
  .announce-backdrop { padding: 0.75rem; place-items: center; }
  .announce-img { max-height: 12rem; }
  .announce-actions .btn { flex: 1 1 100%; }
}
html[data-motion="reduced"] .announce-backdrop,
html[data-motion="reduced"] .announce { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .announce-backdrop, .announce { animation: none; }
}
html[data-contrast="high"] .announce-backdrop { background: rgba(0, 0, 0, 0.9); }
html[data-contrast="high"] .announce { border: 2px solid #fff; }
@media print { .announce-backdrop { display: none !important; } }