/* ════
   DESIGN TOKENS — HTAA identity, Direction E "The Majlis" (board visual
   identity proposal, 10.2026). Replaces the earlier PHPSA navy/teal system.
   Rule from the guideline: Deep Palm and ivory LEAD; Kingdom Green and
   Founding Gold are ACCENTS (every national institution is green, so a
   green-led site would read as a government body). Najdi Clay is for small
   text and highlights; Desert Sand for panels and lines.
     Deep Palm      #0B2E1C   lead colour — text, marks, dark panels
     Ivory          #FBF7EC   lead background
     Kingdom Green  #006C35   accent, used sparingly
     Founding Gold  #C8A24A   accent — "the decision point"
     Najdi Clay     #A8512C   small text and highlights
     Desert Sand    #E6DCC3   panels, lines, soft fills
   The 19-colour regional palette on the Clusters page (.c-r1 etc.) is a
   separate categorical data-viz system and is deliberately untouched.
   Change values here only; never hard-code a hex value in a component.
   ════ */
:root {
  --primary:      #0B2E1C; /* Deep Palm — headers, dark surfaces, text */
  --accent:       #006C35; /* Kingdom Green — 6.0:1 on ivory; white text on it 6.6:1 */
  --accent-dark:  #00552A; /* links / small text on ivory (8:1) */
  --accent-light: #2A9D62; /* decorative dots on Deep Palm only (reversed-logo green) */
  --accent-pale:  #E8F1E6; /* tint of Kingdom Green for chips / hovers */
  --copper:       #A8512C; /* Najdi Clay */
  --copper-text:  #A8512C; /* Najdi Clay already clears AA on ivory (5.3:1) */
  --gold:         #C8A24A; /* Founding Gold — fills/borders; NOT for text on light */
  --gold-text:    #8A6A1F; /* gold family darkened to clear AA as small text on ivory */
  --info:         #1565C0; /* categorical data-viz only */
  --purple:       #7B1FA2;
  --success:      #2E7D32;
  --danger:       #C62828;
  --bg:           #FBF7EC; /* Ivory */
  --surface:      #FFFFFF;
  --text:         #0B2E1C;
  --text-secondary: #4B5C50;
  --border:       #E6DCC3; /* Desert Sand */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --primary-dark:   #08210F; /* Deep Palm, one step deeper — gradient/bottom stops */
  --primary-light:  #17432B; /* Deep Palm, lifted — pattern tone "just off the background" */
  --gold-pale:      #F6EBCB;
  --copper-pale:    #F3E6DC;
  --border-light:   #EFE7D0;
  --sand:           #F3EDDB; /* card/panel fill from the guideline's slides */
  --text-muted:     #5B6A5F;
  --radius-xl:      22px;
  --shadow-sm:      0 1px 3px rgba(11,46,28,.06);
  --shadow:         0 4px 12px rgba(11,46,28,.08);
  --shadow-md:      0 8px 24px rgba(11,46,28,.10);
  --shadow-lg:      0 16px 40px rgba(11,46,28,.14);
  --shadow-glow:    0 0 0 4px rgba(0,108,53,.15);
  --font-en:      'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-ar:      'IBM Plex Sans Arabic', 'Segoe UI', sans-serif;
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif; /* English headlines, large sizes only */
  --pattern-dark:  url("brand/pattern-dark.svg");
  --pattern-light: url("brand/pattern-light.svg");
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body { font-family: var(--font-en); line-height: 1.6; }
html[lang="ar"] body, [dir="rtl"] body { font-family: var(--font-ar); }

/* Logical properties throughout so RTL mirrors correctly — do not
   replace with left/right, margin-left, etc. */
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }

/* ── Accessibility pass: skip-to-content link (static markup in
   index.html, kept in sync with the current language by render() in
   app.js) — visually hidden off-screen until it receives keyboard
   focus, the standard pattern for a skip link. ── */
.skip-link {
  position: absolute; inset-inline-start: -999px; top: 0;
  background: var(--primary); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 600; font-size: 0.9rem;
  z-index: 100;
}
.skip-link:focus { inset-inline-start: 12px; }

/* ── Nav ──── */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); border-block-end: 1px solid var(--border);
}
.site-nav .bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 14px;
}
/* 2026-10-06, follow-up: the nav still wrapped to 2 rows on every
   real desktop width (1280-1920px tested) even after the 12→6
   top-level consolidation, because .container's 1120px max-width
   (sized for comfortable reading-column width, not for the nav's
   own brand+6-items+search+lang+login row) left only ~434px for the
   6-item list once brand and nav-actions took their share — short by
   ~160px of what the items need laid out flat. The nav bar doesn't
   need to match the page's reading width, so it gets its own wider
   container here, instead of trimming nav copy to fit an
   accidentally-too-narrow box. */
.site-nav .container { max-width: 1320px; }
.site-nav .brand {
  font-weight: 700; color: var(--primary); font-size: 1.1rem; display: inline-flex;
  align-items: center; gap: 9px; flex-shrink: 0;
  /* Tightened from min(46vw,420px) during the single-row fix above:
     the English name ("Health Technology Assessment Society") was
     riding right up against the old 420px cap, eating space the
     6-item nav needed and tipping it onto a second row. 320px still
     shows the full Arabic name uncropped and a readable chunk of the
     English one before ellipsis — PHPSA's own nav keeps its brand
     just as compact. */
  max-width: min(30vw, 320px);
}
/* Nav real estate is inherently tight regardless of what the final
   org name turns out to be — but it's especially visible today since
   ORG.nameEn/nameAr are still the long bracketed "[Society Name —
   TBD]" placeholder (see hero_name_pending). Ellipsis it in the nav
   specifically so a long name can never crowd the menu items beside
   it into wrapping, the way PHPSA's compact logo+wordmark never does. */
.site-nav .brand .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.site-nav .brand .abbr { color: var(--accent-dark); flex-shrink: 0; }
/* Brand mark ("Nabd" pulse) — pure stroke, currentColor, so it
   inherits whichever element it's placed in: teal here, white on
   the dashboard sidebar, accent coral in the hero (see those rules
   below). See app.js's BRAND_MARK for where this markup comes from. */
.brand-mark { flex-shrink: 0; display: block; }
.site-nav ul { display: flex; gap: 12px; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; align-items: center; }
.site-nav ul li a { color: var(--text); font-weight: 500; font-size: 0.95rem; }
.site-nav ul li a:hover { color: var(--accent-dark); text-decoration: none; }

/* ── Nav dropdown (About Society / Knowledge & Data / HTA Tools /
   Academy / Get Involved) ────
   2026-10-06: every dropdown now shares one consistent look — a
   small leading icon per row (same emoji-icon convention already
   used for hospital pills and the login lock, nothing newly
   invented) plus a full-row hover highlight — instead of a bare
   text list, closer to phpsa.org's own icon-row dropdown style
   (checked against their live "المعرفة والبيانات" menu). All 5
   dropdowns use the exact same .dropdown rules below, so they read
   as one family rather than each having its own treatment.
   Knowledge & Data carries 14 destinations (this site's own content
   is simply broader than PHPSA's at this stage — not something to
   shrink), so it alone gets .dropdown-wide: a 2-column grid instead
   of one very tall column, which is what made it feel cluttered. */
.site-nav li.has-dropdown { position: relative; }
.site-nav li.has-dropdown > a::after { content: " ▾"; font-size: 0.7em; opacity: 0.6; }
/* Fixed 2026-10-06 (reported: dropdowns "break" when moving the
   mouse down into them): .dropdown used to sit 8px below the
   trigger (margin: 8px 0 0), but that 8px gap belonged to neither
   the trigger <a> nor the dropdown panel — it was empty space inside
   the <li>'s own stacking context with nothing there to keep
   li:hover alive while the cursor crossed it. Verified with a
   stepped Playwright mouse-move: the panel vanished at the exact
   midpoint of that gap on every dropdown, before the cursor ever
   reached the panel. Dropping the gap (margin: 0, dropdown now flush
   against the trigger's own box) makes the hoverable area
   continuous — trigger and panel touch, so there's no dead zone to
   lose hover in. The border + shadow still read as a distinct panel
   without needing the gap. */
.site-nav .dropdown {
  display: none; position: absolute; inset-inline-start: 0; top: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(11,46,28,0.14); min-width: 240px; padding: 8px;
  list-style: none; margin: 0; z-index: 60;
}
.site-nav li.has-dropdown:hover > .dropdown,
.site-nav li.has-dropdown.open > .dropdown { display: block; }
.site-nav .dropdown.dropdown-wide {
  display: none; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 2px 6px; min-width: 460px;
}
.site-nav li.has-dropdown:hover > .dropdown.dropdown-wide,
.site-nav li.has-dropdown.open > .dropdown.dropdown-wide { display: grid; }
.site-nav .dropdown li a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 0.88rem; white-space: nowrap;
}
.site-nav .dropdown li a:hover { background: var(--accent-pale); color: var(--accent-dark); }
.site-nav .dropdown .dd-icon { font-size: 15px; line-height: 1; width: 18px; text-align: center; flex-shrink: 0; }

/* "قريباً" / Coming Soon badge on nav items and section headers,
   matching PHPSA's own convention for its still-inert sections. */
.badge-soon {
  display: inline-block; margin-inline-start: 6px; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--gold-text);
  background: #FFF8E6; border: 1px solid #F0DC9C; border-radius: 999px; padding: 1px 7px;
  vertical-align: middle;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.9rem; cursor: pointer; border: none;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--primary); border: 1px solid var(--border); }
.btn-hero-ghost { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.lang-switch { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer; font-size: 0.85rem; }
.nav-search { display: flex; }
.nav-search-input {
  /* Narrowed from 150px as part of the single-row fix above — still
     comfortably usable, just no longer the single biggest line item
     in nav-actions' width budget. */
  width: 92px; max-width: 18vw; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.85rem; font-family: inherit; background: var(--surface);
}
.nav-search-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Mobile nav (UX pass, 2026-10-05; breakpoint raised 2026-10-06 —
   see the comment on the media query below) ───────────────────────
   Desktop (≥1280px): .nav-burger stays hidden, .nav-panel displays
   inline as before (flex row via .nav-panel's own rule below), all 5
   dropdowns open on :hover same as always — nothing above this
   comment changes on desktop. Below 1280px: the burger shows, the
   panel (nav links + search + lang toggle + login) hides until
   toggleMobileNav() (app.js) adds .nav-open on .site-nav, and the
   dropdowns become inline accordions (click-to-expand, which
   toggleDropdown() in app.js already drives — no JS change needed
   for that part, only the CSS context it opens into). ── */
.nav-panel { display: flex; align-items: center; gap: 16px; flex: 1; justify-content: space-between; }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px; padding: 8px; background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0;
}
.nav-burger span { display: block; width: 100%; height: 2px; background: var(--primary); border-radius: 2px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 2026-10-06, follow-up: raised from 880px. 880px was the point
   where the *old* desktop nav visibly fell apart, but it was never
   actually the point where the *fixed* single-row nav starts fitting
   — measured with Playwright across real widths, the 6-item nav (in
   either language, with the brand + search + lang toggle + login
   button crowding it) only guarantees one row from 1280px up. Between
   880-1279px there's no good desktop layout to show — not enough
   room for one row, and showing a broken two-row wrap there is worse
   than just handing that range the already-solid mobile accordion
   nav a bit early. So the breakpoint now matches where the fix
   actually holds, instead of an arbitrary older value. */
@media (min-width: 1440px) {
  .site-nav ul { gap: 6px; }
  .site-nav nav ul > li > a { font-size: 0.88rem; padding-inline: 6px; white-space: nowrap; }
  .nav-panel { gap: 8px; }
  .nav-search-input { width: 76px; }
}
@media (max-width: 1439px) {
  .site-nav .bar { flex-wrap: wrap; }
  .nav-burger { display: flex; }
  .nav-panel {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 0; border-block-start: 1px solid var(--border); margin-block-start: 12px; padding-block-start: 8px;
  }
  .site-nav.nav-open .nav-panel { display: flex; }
  .site-nav nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav nav ul > li { border-block-end: 1px solid var(--border-light); }
  .site-nav nav ul > li > a { display: block; padding: 12px 4px; min-height: 44px; }
  /* Dropdowns become inline accordions instead of absolutely-positioned
     hover panels — same .open class toggleDropdown() already applies. */
  .site-nav li.has-dropdown:hover > .dropdown { display: none; }
  .site-nav .dropdown {
    position: static; box-shadow: none; border: none; min-width: 0;
    margin: 0; padding-inline-start: 14px; background: var(--bg);
  }
  .site-nav li.has-dropdown.open > .dropdown { display: block; }
  /* .dropdown-wide's desktop 2-column grid doesn't fit a phone
     width — collapse it back to a single accordion column. This
     needs to match the desktop rule's selector exactly (same
     specificity) so the later, mobile one wins. */
  .site-nav li.has-dropdown.open > .dropdown.dropdown-wide { display: block; min-width: 0; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 10px; padding-block: 14px 4px; }
  .nav-search, .nav-search-input { width: 100%; max-width: none; }
  .lang-switch, .nav-actions .btn { width: 100%; justify-content: center; min-height: 44px; }
}

/* ── Hero ────
   2026-10-06 visual-parity pass. First pass reused the card-style
   stat grid from .clusters-hero; this revision replaces it with a
   closer match after checking phpsa.org's actual live homepage
   directly (not just the screenshot) — PHPSA centers its entire hero
   column, shows one badge pill above the headline (not a separate
   eyebrow + badge), and its stat row is plain centered numbers with
   no card chrome. All three are matched below. The gradient keeps
   the same navy→teal radial-accent recipe as .clusters-hero so both
   big gradient surfaces on this site read as one family.
   The stat counts themselves are real, non-aspirational structural
   facts about this site's own content (domain count, mapped
   clusters, academy tracks, peer bodies referenced) — never a
   membership, committee, or document count. The board itself became
   real on 2026-10-12 (ORG.board — the official founding roster, see
   org.config.js), but committee formation (ORG.committees) and
   membership are still placeholders, and showing those as achieved
   numbers would be exactly the fabricated-activity problem this
   project's demo-data-hygiene convention exists to avoid. PHPSA can
   honestly show a real "12 board members" count; this Society,
   pre-launch, still can't claim committees or members yet. */
.hero {
  background:
    radial-gradient(circle at 0% 0%, rgba(0,108,53,.45) 0%, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(168,81,44,.3) 0%, transparent 55%),
    linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--accent-dark) 100%);
  color: #fff; padding-block: 64px 56px; position: relative; overflow: hidden;
}
.hero-inner { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-top { display: flex; justify-content: center; margin-block-end: 18px; }
.hero-mark { color: var(--accent-light); margin: 0; }
.hero-mark .brand-mark { width: 58px; height: 25px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14);
  backdrop-filter: blur(10px); padding: 7px 16px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.22); color: #fff; margin-block-end: 22px;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-light); flex-shrink: 0; }
.hero h1 { font-size: 2.5rem; line-height: 1.25; margin: 0 0 18px; }
.hero p.lead { font-size: 1.1rem; color: #DCE3D2; max-width: 620px; margin-block-end: 30px; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-block-end: 44px; }

/* Home hero's stat row — plain numbers, no card chrome, matching
   phpsa.org's actual treatment (see comment above). */
.hero-stats-plain { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
.hero-stat-plain { text-align: center; min-width: 110px; }
.hero-stat-plain .v {
  font-size: 28px; font-weight: 800; letter-spacing: -.5px; color: #fff;
  /* white, not --accent-light: the hero gradient shades toward
     --accent-dark in its bottom-right corner (RTL: bottom-left), and
     teal-on-teal there fell to ~2.5:1 — below AA even for this large
     text. White clears AA (7.9:1+) against every stop in the
     gradient. Verified with this project's usual Python luminance
     check. PHPSA's own stat numbers are white/light too, not teal —
     teal there is reserved for the headline's highlighted phrase. */
}
.hero-stat-plain .l { font-size: 11.5px; opacity: .85; font-weight: 500; margin-block-start: 4px; }
@media (max-width: 560px) { .hero-stats-plain { gap: 24px 32px; } }

/* Card-style stat grid — still used by .clusters-hero (Health
   Clusters page), which keeps its own distinct look. */
.hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-block-start: 24px; }
.hero-stat { background: rgba(255,255,255,.08); backdrop-filter: blur(10px); padding: 14px 18px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.12); }
.hero-stat .v { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.hero-stat .l { font-size: 11px; opacity: .8; font-weight: 500; text-transform: uppercase; letter-spacing: .8px; margin-block-start: 2px; }

/* ── Sections ──── */
section.block { padding-block: 56px; }
section.block.alt { background: var(--surface); }
h2.section-title { color: var(--primary); font-size: 1.7rem; margin-block-end: 8px; }
p.section-intro { color: var(--text-secondary); max-width: 720px; margin-block-end: 32px; }

/* Small uppercase label above a section heading — mirrors PHPSA's
   "overline" pattern (e.g. "ABOUT PHPSA" above "Public Healthcare
   Policy Society"). */
.overline {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-dark); margin-block-end: 8px;
}
.section-header { margin-block-end: 28px; }
.section-header .section-title { margin-block-end: 6px; }

.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.8rem; }
}

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 22px;
}
.card .tag {
  display: inline-block; background: var(--accent-pale); color: var(--accent-dark);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 3px 9px; border-radius: 999px; margin-block-end: 10px; text-transform: uppercase;
}
.card h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--primary); }
.card p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; }
.tag-muted {
  display: inline-block; background: var(--bg); color: var(--text-secondary);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; border: 1px solid var(--border);
  padding: 3px 9px; border-radius: 999px; margin-block-end: 10px; text-transform: uppercase;
}
.academy-track-badge {
  display: inline-block; float: inline-end; background: var(--bg); color: var(--text-secondary);
  font-size: 0.7rem; font-weight: 600; border: 1px solid var(--border);
  padding: 3px 9px; border-radius: 999px; margin-block-end: 10px;
}
/* Stackable micro-credentials, innovation batch 2026-10-05 */
.academy-credential-badge {
  display: inline-block; clear: inline-end; font-size: 0.7rem; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; margin: 0 0 10px; letter-spacing: 0.02em;
}
.academy-credential-badge.is-earned { background: var(--gold); color: var(--primary); }
.academy-credential-badge.is-progress { background: var(--accent-pale); color: var(--accent-dark); }

/* Academy — quick-jump track tabs, ported from phpsa.org/academy.html's
   nicer tab bar: one rounded segmented surface holding all 12 track
   pills, each tinted in its own track's color only while active (not
   just an underline), smooth transition on click. Unlike PHPSA's
   version, which hides every track but the active one, this is a
   *jump* — every card in the grid below stays visible, since Majid
   asked for this page to read as expansive; a click smooth-scrolls to
   and briefly pulses the matching card instead (acadJumpToTrack() in
   app.js). Text color per active tab is picked for WCAG AA against its
   own fill — ink on the two light colors (accent, gold), white on the
   rest — same contrast math as the button fixes earlier in this file. */
.acad-track-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; background: var(--surface);
  padding: 6px; border-radius: var(--radius-lg); box-shadow: var(--shadow);
  margin-block-end: 20px;
}
.acad-track-tab {
  flex: 1 1 auto; min-width: 84px; padding: 9px 10px; border: none;
  border-radius: var(--radius-sm); font-family: inherit; font-size: 0.72rem;
  font-weight: 700; cursor: pointer; background: transparent;
  color: var(--text-secondary); transition: background .2s, color .2s, box-shadow .2s;
  text-align: center; line-height: 1.3; white-space: nowrap;
}
.acad-track-tab:hover { background: var(--bg); }
.acad-track-tab.active { box-shadow: var(--shadow-sm); }
.acad-track-tab[data-color="accent"].active      { background: var(--accent);      color: #fff; }
.acad-track-tab[data-color="copper"].active      { background: var(--copper);      color: #fff; }
.acad-track-tab[data-color="gold"].active        { background: var(--gold);        color: var(--text); }
.acad-track-tab[data-color="info"].active        { background: var(--info);        color: #fff; }
.acad-track-tab[data-color="purple"].active      { background: var(--purple);      color: #fff; }
.acad-track-tab[data-color="success"].active     { background: var(--success);     color: #fff; }
.acad-track-tab[data-color="accent-dark"].active { background: var(--accent-dark); color: #fff; }
.acad-track-tab[data-color="danger"].active      { background: var(--danger);      color: #fff; }
@media (max-width: 560px) {
  .acad-track-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .acad-track-tab { flex: 0 0 auto; }
}

/* Icon paired with each track card's own number tag — the "image"
   half of the PHPSA tab pattern above; .acad-track-card / jump-highlight
   are the scroll target and transition acadJumpToTrack() applies. */
.acad-track-tag-icon { font-size: 0.95em; margin-inline-end: 2px; }
.acad-track-card.jump-highlight { animation: acadJumpPulse 1.1s ease; }
@keyframes acadJumpPulse {
  0%   { box-shadow: 0 0 0 0 rgba(15, 124, 123, .45); }
  60%  { box-shadow: 0 0 0 10px rgba(15, 124, 123, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 124, 123, 0); }
}

/* Academy — small meta chips under an expanded track card (module
   count / format / CME status), all placeholder values. */
.acad-meta {
  display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 14px;
  padding-block-start: 12px; border-top: 1px solid var(--border);
}
.acad-meta span {
  font-size: 0.74rem; color: var(--text-secondary); background: var(--bg);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
}

/* Academy — full draft curriculum detail (objectives / modules /
   assessment) shown under each track's summary card. */
.acad-curriculum {
  margin-block-start: 14px; padding-block-start: 14px; border-top: 1px solid var(--border);
}
.acad-curriculum-meta {
  display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 10px; font-size: 0.78rem; color: var(--text-secondary);
}
.acad-curriculum-meta span:not(.tag-muted) {
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
}
.acad-curriculum-h {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary); margin: 12px 0 6px;
}
.acad-curriculum-list {
  margin: 0; padding-inline-start: 18px; font-size: 0.86rem; line-height: 1.6; color: var(--text);
}
.acad-curriculum-assessment {
  margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--text);
}

/* Academy — expandable lesson content for a module, where it has been
   written (currently Track 1 only). Native <details>/<summary>, no JS. */
.acad-module-list { list-style: none; padding-inline-start: 0; }
.acad-module-detail {
  border: 1px solid var(--border); border-radius: 8px;
  margin-block-end: 8px; padding: 10px 12px; background: var(--surface);
}
.acad-module-detail summary {
  cursor: pointer; font-weight: 600; color: var(--text);
  list-style: none;
}
.acad-module-detail summary::-webkit-details-marker { display: none; }
.acad-module-detail summary::before {
  content: "+"; display: inline-block; width: 1em; color: var(--accent); font-weight: 700;
}
.acad-module-detail[open] summary::before { content: "–"; }
.acad-module-body {
  margin-block-start: 10px; padding-block-start: 10px; border-top: 1px solid var(--border);
  font-size: 0.86rem; line-height: 1.7; color: var(--text);
}
.acad-module-body p { margin: 0 0 10px; }
.acad-module-body p:last-child { margin-block-end: 0; }
.acad-module-takeaway {
  background: var(--accent-pale); border-radius: 6px; padding: 8px 10px;
  margin-block-start: 4px !important;
}

/* Academy — the module list item now links to a dedicated page
   instead of opening an inline <details>. */
.acad-module-link {
  display: block; padding: 8px 2px; color: var(--text); text-decoration: none;
  border-radius: 6px;
}
.acad-module-link:hover { color: var(--accent-dark); text-decoration: underline; }

/* Academy — a single module's own page (Pages.academyModule). */
.acad-module-page { max-width: 760px; }
.acad-breadcrumb {
  font-size: 0.82rem; color: var(--text-secondary); margin-block-end: 10px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.acad-breadcrumb a { color: var(--accent-dark); text-decoration: none; }
.acad-breadcrumb a:hover { text-decoration: underline; }
.acad-breadcrumb-sep { color: var(--border); }
.acad-module-title { font-size: 1.7rem; line-height: 1.3; margin: 2px 0 18px; }
.acad-module-subhead {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary); margin: 26px 0 10px;
}
.acad-module-diagram { margin-block-start: 8px; }
.acad-diagram-note {
  font-size: 0.78rem; color: var(--text-secondary); margin-block-start: 6px;
  font-style: italic;
}
.acad-module-keypoints ul {
  margin: 0; padding-inline-start: 18px; font-size: 0.88rem; line-height: 1.7; color: var(--text);
}
.acad-module-keypoints li { margin-block-end: 6px; }

/* Academy "cautionary tale" / "real-world impact" callouts (2026-10-04
   module-expansion batch) — amber for a real documented failure,
   teal for a real documented case of impact on a decision or a
   patient. Deliberately distinct from .placeholder-note (copper),
   which always means "this feature is not live yet" — these boxes
   instead hold real, sourced historical case studies. */
.acad-callout {
  border-radius: var(--radius-sm); padding: 14px 16px; margin-block-start: 16px;
  font-size: 0.92rem; line-height: 1.7;
}
.acad-callout p { margin: 0 0 8px; }
.acad-callout p:last-of-type { margin-block-end: 0; }
.acad-callout-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  margin-block-end: 6px;
}
.acad-callout-title {
  margin: 0 0 8px; font-size: 1rem; color: var(--primary);
}
.acad-callout-source {
  font-size: 0.76rem; color: var(--text-secondary); font-style: italic;
  margin-block-start: 8px !important; padding-block-start: 8px; border-block-start: 1px dashed var(--border);
}
.acad-callout-caution {
  background: #FBF2EC; border: 1px solid #EFD9C9;
}
.acad-callout-caution .acad-callout-label { color: var(--copper-text); }
.acad-callout-impact {
  background: var(--accent-pale); border: 1px solid #F3C9AE;
}
.acad-callout-impact .acad-callout-label { color: var(--accent-dark); }
@media print {
  .acad-callout { break-inside: avoid; }
}
.acad-module-nav {
  display: flex; justify-content: space-between; gap: 14px; margin-block-start: 32px;
  padding-block-start: 16px; border-top: 1px solid var(--border);
}
.acad-module-nav-link {
  font-size: 0.86rem; color: var(--accent-dark); text-decoration: none; max-width: 46%;
}
.acad-module-nav-link:hover { text-decoration: underline; }
.acad-module-nav-next { text-align: end; margin-inline-start: auto; }
.acad-module-back { margin-block-start: 14px; font-size: 0.86rem; }
.acad-module-back a { color: var(--text-secondary); text-decoration: none; }
.acad-module-back a:hover { text-decoration: underline; }

/* Academy diagrams — "flow" and "compare" render as plain HTML
   (not SVG) for simple responsive wrapping; "wheel", "pyramid",
   "tree", and "bars" reuse the HTA Lab's .sb-chart SVG styling. */
.acad-diagram-flow {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; margin-block-start: 4px;
}
.acad-flow-step {
  display: flex; align-items: center; gap: 8px; background: var(--accent-pale);
  border: 1px solid var(--accent); border-radius: 8px; padding: 10px 12px;
  font-size: 0.84rem; color: var(--primary); flex: 1 1 160px; min-width: 140px;
}
.acad-flow-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: 0.72rem; font-weight: 700; flex-shrink: 0;
}
.acad-flow-arrow {
  display: flex; align-items: center; justify-content: center; color: var(--text-secondary);
  font-size: 1.1rem; flex: 0 0 auto;
}
.acad-flow-loop {
  flex: 1 1 100%; font-size: 0.8rem; color: var(--copper-text); margin-block-start: 2px;
}
.acad-diagram-compare {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px;
  margin-block-start: 4px;
}
.acad-compare-col {
  border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: var(--surface);
}
.acad-compare-head { font-weight: 600; font-size: 0.86rem; color: var(--primary); margin-block-end: 8px; }
.acad-compare-list { margin: 0; padding-inline-start: 16px; font-size: 0.8rem; line-height: 1.6; color: var(--text); }

.acad-module-headrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.acad-print-btn { flex-shrink: 0; }

/* ── Glossary tooltip links (on Academy module pages) + Glossary page ── */
.gloss-term {
  color: var(--accent-dark); text-decoration: underline dotted; text-underline-offset: 3px;
  cursor: help; font-weight: 500;
}
.gloss-term:hover, .gloss-term:focus { background: var(--accent-pale); text-decoration-style: solid; }
.gloss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-block-start: 12px; }
.gloss-entry {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; background: var(--surface);
}
.gloss-entry.gloss-highlight { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-pale); }
.gloss-term-title { font-size: 0.95rem; color: var(--primary); margin: 0 0 6px; }
.gloss-term-def { font-size: 0.85rem; color: var(--text-secondary); margin: 0; line-height: 1.6; }
.gloss-see-also { font-size: 0.78rem; color: var(--text-secondary); margin: 8px 0 0; padding-block-start: 8px; border-block-start: 1px dashed var(--border); }
.gloss-see-also .gloss-term { font-weight: 600; }

/* ── Core Formulas cheat sheet ── */
/* .formula-box is intentionally forced ltr even in Arabic — the notation
   itself (variable names, operators, subscripts) is written in Latin
   script regardless of page language, same convention as a number. */
.formula-card { display: flex; flex-direction: column; gap: 10px; }
.formula-box {
  font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 0.86rem; line-height: 1.8;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 16px; overflow-x: auto; direction: ltr; text-align: start; color: var(--primary);
}
.formula-frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin-inline: 4px; }
.formula-num { border-block-end: 1px solid var(--primary); padding-inline: 4px; padding-block-end: 2px; }
.formula-den { padding-inline: 4px; padding-block-start: 2px; }
.formula-see-also { font-size: 0.78rem; color: var(--text-secondary); margin: 0; }
.formula-links { display: flex; flex-direction: column; gap: 4px; }

/* Live mini-calculators ("enrich the formulas... play around with
   it" batch, 2026-10-04) — reuses .input-group/.slider-row/.wb-table
   from the Policy Sandbox and HTA Lab calculators (same look, same
   behavior), just wrapped in its own section inside a formula card. */
.formula-interactive { margin-block-start: 6px; padding-block-start: 14px; border-block-start: 1px dashed var(--border); }
.formula-interactive-label { font-size: 0.74rem; font-weight: 700; color: var(--accent-dark); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 10px; }
.formula-interactive .input-group { margin-block-end: 10px; }
.formula-interactive .wb-table { margin-block-start: 8px; font-size: 0.86rem; }
.formula-interactive .wb-table th, .formula-interactive .wb-table td { padding: 7px 12px; }
.formula-category-heading { margin-block: 32px 4px; }
.formula-category-heading:first-child { margin-block-start: 0; }

/* Innovation batch, 2026-10-05: export button + formula finder */
.fx-export-btn { margin-block-start: 10px; font-size: 0.82rem; }
.fx-finder { background: var(--accent-pale); border-radius: var(--radius); padding: 14px 16px; margin-block-end: 24px; }
.fx-finder label { display: block; font-weight: 600; font-size: 0.9rem; margin-block-end: 8px; }
.fx-finder-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-finder-row input { flex: 1; min-width: 220px; }
.fx-finder-feedback { margin: 8px 0 0; font-size: 0.84rem; color: var(--text-secondary); min-height: 1.1em; }
.fx-finder-highlight { animation: fx-finder-pulse 2.2s ease-out; }
@keyframes fx-finder-pulse {
  0% { box-shadow: 0 0 0 4px var(--accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Public Consultations placeholder page ── */
.consult-steps { margin: 0; padding-inline-start: 20px; line-height: 1.8; }
.consult-empty-state {
  border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 16px;
  color: var(--text-secondary); background: var(--bg); font-size: 0.9rem;
}
.consult-form-preview input:disabled, .consult-form-preview textarea:disabled {
  background: #F8F9FB; cursor: not-allowed;
}

/* ── Sitewide search page ── */
.search-page-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-block-end: 18px; }
.search-page-form input { width: 100%; }
.search-results { display: flex; flex-direction: column; gap: 10px; }
.search-result {
  display: block; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 16px; text-decoration: none; color: inherit; background: var(--surface);
}
.search-result:hover { border-color: var(--accent); background: var(--accent-pale); }
.search-result-kind {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-dark); font-weight: 600;
}
.search-result-title { font-size: 1rem; color: var(--primary); margin: 4px 0; }
.search-result-snippet { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }
.search-empty-state {
  border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 16px;
  color: var(--text-secondary); background: var(--bg); font-size: 0.9rem;
}

.empty-state {
  border: 1px dashed var(--border); border-radius: var(--radius-md);
  padding: 32px; text-align: center; color: var(--text-secondary);
  background: var(--surface);
}
.placeholder-note {
  font-size: 0.82rem; color: var(--copper-text); background: #FBF2EC;
  border: 1px solid #EFD9C9; border-radius: var(--radius-sm);
  padding: 8px 12px; margin-block-start: 10px;
}

/* ── Member gate ──── */
.gate-screen {
  min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 14px;
}
.gate-screen .icon { font-size: 2.2rem; }
/* Member-gate teaser (PHPSA-pattern integration, 2026-10-05) — the
   feature list shown above the disabled sign-in button; kept
   left-aligned within the otherwise-centered .gate-screen since a
   checklist reads better that way than centered line-by-line. */
.gate-features { max-width: 440px; text-align: start; margin-block: 4px; }
.gate-features .overline { text-align: start; }
.gate-feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.gate-feature-list li { padding-inline-start: 24px; position: relative; font-size: 0.88rem; color: var(--text-secondary); }
.gate-feature-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--accent); font-weight: 700; }
.gate-feature-list strong { color: var(--text); }

/* ── Footer ──── */
footer.site-footer {
  background: var(--primary); color: #DCE3D2;
  padding-block: 36px; margin-block-start: 48px; font-size: 0.85rem;
}
footer.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
footer.site-footer .footer-link { color: inherit; text-decoration: underline; }

/* ── Dashboard shell (gated) ──── */
.dash-layout { display: flex; min-height: 100vh; }
.dash-sidebar {
  width: 240px; background: var(--primary); color: #fff; padding: 20px 0;
  flex-shrink: 0;
}
.dash-sidebar .brand { padding-inline: 20px; font-weight: 700; margin-block-end: 24px; display: flex; align-items: center; gap: 9px; }
.dash-sidebar nav a {
  display: block; padding: 10px 20px; color: #DCE3D2; font-size: 0.92rem;
}
.dash-sidebar nav a.active, .dash-sidebar nav a:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.dash-main { flex: 1; padding: 28px; background: var(--bg); }

/* ── Workbench (gated advisory HTA review workflow) ──── */
.wb-section { margin-block-end: 28px; }
.wb-section h3 { color: var(--primary); font-size: 1.1rem; margin-block-end: 10px; }
.wb-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-block-end: 24px; }
@media (max-width: 880px) { .wb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wb-grid { grid-template-columns: 1fr; } }
.wb-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; }
.wb-stat .num { font-size: 1.8rem; font-weight: 700; color: var(--accent-dark); }
.wb-stat .label { color: var(--text-secondary); font-size: 0.85rem; }

table.wb-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
table.wb-table th, table.wb-table td { text-align: start; padding: 10px 14px; border-block-end: 1px solid var(--border); font-size: 0.9rem; }
table.wb-table th { background: var(--accent-pale); color: var(--accent-dark); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
table.wb-table tr:last-child td { border-block-end: none; }
/* UX pass, 2026-10-05: on a narrow phone a multi-column results table
   (membership tiers, diagnostic-accuracy 2x2, etc.) would otherwise
   force the whole page to scroll horizontally. Standard markup-free
   responsive-table technique: the table and its header/body groups
   become block boxes (so the table itself can scroll), while each
   row stays display:table so its own cells still align as columns. */
@media (max-width: 680px) {
  table.wb-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.wb-table thead, table.wb-table tbody { display: block; }
  table.wb-table tr { display: table; width: 100%; table-layout: auto; }
}

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.badge-intake { background: #EAF1FB; color: #2A5CAA; }
.badge-under_review { background: #FBF2EC; color: var(--copper-text); }
.badge-decided { background: var(--accent-pale); color: var(--accent-dark); }
.badge-impasse { background: #FBE7E5; color: var(--danger); }

/* Negotiation Lab, innovation batch 2026-10-05 */
.nego-stances { margin-block-start: 10px; display: flex; flex-direction: column; gap: 6px; }
.nego-stance { margin: 0; font-size: 0.88rem; background: var(--bg); border-radius: var(--radius); padding: 8px 12px; }

/* International Policy Radar, innovation batch 2026-10-05 */
.radar-agency-row { border-block-start: 1px dashed var(--border); padding-block-start: 12px; margin-block-start: 12px; }
.radar-agency-row:first-of-type { border-block-start: none; margin-block-start: 0; padding-block-start: 0; }
.radar-agency-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.radar-agency-date { color: var(--text-secondary); font-size: 0.82rem; }
.radar-agency-detail { margin: 6px 0; font-size: 0.9rem; }
.radar-agency-source { margin: 0; font-size: 0.78rem; }
.radar-agency-source a { color: var(--text-secondary); }

.wb-form { display: grid; gap: 12px; max-width: 640px; }
.wb-form label { font-size: 0.85rem; font-weight: 600; color: var(--primary); display: block; margin-block-end: 4px; }
.wb-form input, .wb-form select, .wb-form textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.92rem; background: var(--surface); color: var(--text);
}
.wb-form textarea { min-height: 100px; font-family: ui-monospace, monospace; font-size: 0.82rem; }
.wb-actions { display: flex; gap: 10px; margin-block-start: 4px; }

.wb-pre { background: var(--primary); color: #D7E6E6; padding: 14px; border-radius: var(--radius-sm); font-size: 0.8rem; overflow: auto; max-height: 360px; }
.wb-note { font-size: 0.82rem; color: var(--text-secondary); margin-block-start: 6px; }
.wb-links a { margin-inline-end: 14px; font-size: 0.85rem; }
.wb-flash { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.85rem; margin-block-end: 14px; }
.wb-flash-error { background: #FBEAEA; color: #B23B3B; border: 1px solid #EFC9C9; }
.wb-flash-ok { background: var(--accent-pale); color: var(--accent-dark); border: 1px solid #F0C4A8; }

.signin-screen { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding-block: 48px; }
.signin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; width: 100%; max-width: 380px; }
.signin-card h2 { color: var(--primary); margin-block-start: 0; }

/* ── Coming-soon banner (payment, e-signature, search, libraries) ─ */
.coming-soon-banner {
  display: flex; align-items: center; gap: 10px;
  background: #FFF8E6; border: 1px solid #F0DC9C; color: #7A5C00;
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.85rem;
  margin-block-end: 16px;
}
.coming-soon-banner .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--gold); flex-shrink: 0; }

/* ── Knowledge Library (searchable grid, placeholder) ──── */
.kl-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-block-end: 14px; }
.kl-search {
  flex: 1; min-width: 220px; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: #F8F9FB; color: var(--text-secondary);
  font-family: inherit; font-size: 0.9rem; cursor: not-allowed;
}
.kl-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.kl-chip {
  background: #F0F2F5; color: var(--text-secondary); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 13px; font-size: 0.78rem; cursor: not-allowed;
}
.kl-stats { color: var(--text-secondary); font-size: 0.82rem; margin-block-end: 18px; }

/* Gap-closing templates (2026-10-04): the Resources/Publications and
   Policy Tracker/Registry search boxes and selects are now genuinely
   functional (filterPublications()/filterRegistry() in app.js), while
   the Academy Video Library and Career Board search boxes using these
   same base classes stay real disabled previews — these two rules
   only override the "disabled" look when the "disabled" attribute is
   actually absent, so the still-disabled instances are untouched. */
.kl-search:not(:disabled) { cursor: text; background: var(--surface); color: var(--text); }
.pt-select:not(:disabled) { cursor: pointer; background: var(--surface); color: var(--text); }

/* Board member avatar — a plain initial-letter circle, never a real
   or implied photo, for the placeholder board cards. */
.board-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent-pale);
  color: var(--accent-dark); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem; margin-block-end: 10px;
}

/* ── Payment placeholder (Moyasar-style checkout card) ──── */
.pay-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px; max-width: 420px; position: relative; overflow: hidden;
}
.pay-card .pay-methods { display: flex; gap: 8px; margin-block-end: 16px; }
.pay-card .pay-methods span {
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px;
  font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); background: #F8F9FB;
}
.pay-card .pay-overlay {
  position: absolute; inset: 0; background: rgba(244,246,249,0.82);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: 20px; backdrop-filter: blur(1px);
}
.pay-card .pay-overlay .lock { font-size: 1.6rem; }
.pay-card fieldset { border: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pay-card input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #F8F9FB; font-family: inherit; }

/* ── Health Policy Index (hero + legend + category pills) ──── */
.idx-hero {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff; border-radius: var(--radius-lg); padding: 30px 28px; margin-block-end: 20px;
}
.idx-hero h2 { color: #fff; margin: 0 0 8px; }
.idx-hero p { color: rgba(255,255,255,0.92); max-width: 720px; margin: 0; font-size: 0.95rem; }
.idx-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-block-start: 16px; font-size: 0.78rem; }
.idx-legend span { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.14); padding: 4px 11px; border-radius: 999px; }
.idx-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; flex-shrink: 0; }
.idx-dot.up { background: var(--success); }
.idx-dot.flat { background: var(--gold); }
.idx-dot.down { background: var(--danger); }
.idx-dot.pending { background: rgba(255,255,255,0.55); }
.card .idx-dot.pending { background: var(--border); }

.idx-pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 18px; }
.idx-pill {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 999px; padding: 6px 14px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.idx-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.idx-card .idx-value { font-size: 1.6rem; font-weight: 700; color: var(--primary); margin-block: 6px 4px; }
.idx-card .idx-trend { font-size: 0.78rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.idx-card .idx-source { font-size: 0.72rem; color: var(--text-secondary); border-block-start: 1px solid var(--border); padding-block-start: 8px; margin-block-start: 10px; }

/* ── Policy Tracker controls (search + filter selects, disabled) ── */
.pt-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-block-end: 16px; }
.pt-select {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #F8F9FB; color: var(--text-secondary); font-family: inherit; font-size: 0.85rem; cursor: not-allowed;
}

/* ── E-signature / onboarding wizard placeholder ──── */
.onb-steps { display: flex; gap: 0; margin-block-end: 22px; list-style: none; padding: 0; }
.onb-steps li {
  flex: 1; text-align: center; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
  padding-block-end: 10px; border-block-end: 3px solid var(--border); position: relative;
}
.onb-steps li.active { color: var(--accent-dark); border-block-end-color: var(--accent); }
.onb-sig-pad {
  border: 1px dashed var(--border); border-radius: var(--radius-md); background: #FAFBFC;
  height: 120px; display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 0.85rem; margin-block-end: 12px; cursor: not-allowed;
}
.onb-actions { display: flex; gap: 10px; }
.onb-actions .btn { opacity: 0.55; cursor: not-allowed; }
.onb-typed-name {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #F8F9FB; font-family: inherit; margin-block-end: 14px; cursor: not-allowed;
}

/* ── HTA Lab — multi-model sandbox (pill switcher + inline-SVG charts) ── */
.sandbox-model { margin-block-start: 20px; }
.sandbox-academy-link { margin-block: 14px 0; font-size: 0.88rem; }
.sandbox-academy-link a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.sandbox-academy-link a:hover { text-decoration: underline; }
.sb-chart-wrap { margin-block-start: 6px; }
.sb-chart { width: 100%; max-width: 420px; height: auto; display: block; }
.sb-chart-caption { font-size: 0.78rem; color: var(--text-secondary); margin-block-start: 6px; }
.sandbox-share-row { margin-block-start: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sandbox-copy-feedback { font-size: 0.82rem; color: var(--accent-dark); font-weight: 600; }

/* ── HTA Lab round-4 "what else can we add here" batch ──────────── */
.sb-why-matters {
  font-size: 0.86rem; color: var(--text); background: var(--accent-pale);
  border-inline-start: 3px solid var(--accent); border-radius: var(--radius-sm);
  padding: 8px 12px; margin-block-end: 14px; max-width: 760px;
}
.sb-why-matters strong { color: var(--accent-dark); }

.sandbox-compare-row { margin-block-start: 10px; }
.sandbox-compare-panel { margin-block-start: 10px; display: flex; flex-direction: column; gap: 8px; max-width: 480px; }
.sandbox-compare-panel label { font-size: 0.82rem; font-weight: 600; color: var(--primary); }
.sandbox-compare-panel input[type="text"] {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.88rem; background: var(--surface); color: var(--text);
}

.brief-contrib-table { display: flex; flex-direction: column; gap: 8px; margin-block-start: 8px; }
.brief-contrib-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; }
@media (max-width: 760px) { .brief-contrib-row { grid-template-columns: 1fr; } }
.brief-contrib-row input, .brief-contrib-row select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.82rem; background: var(--surface); color: var(--text);
}
.brief-preview-card { background: var(--bg); min-height: 200px; }

/* ── HTA Lab's 6th model: dossier-readiness checklist ── */
.dossier-progress-row { display: flex; align-items: center; gap: 12px; margin-block-end: 6px; }
.dossier-progress-track { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.dossier-progress-bar { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.2s ease; }
.dossier-progress-complete {
  font-size: 0.85rem; color: var(--accent-dark); font-weight: 600; margin-block: 4px 16px;
}
.checklist-group { display: flex; flex-direction: column; gap: 8px; margin-block-start: 8px; }
.checklist-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; line-height: 1.5; cursor: pointer; }
.checklist-item input[type="checkbox"] { margin-block-start: 3px; flex-shrink: 0; }

/* ── Academy module self-check quizzes ── */
.acad-quiz {
  margin-block-start: 32px; padding-block-start: 24px; border-block-start: 1px solid var(--border);
}
.acad-quiz-question {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px;
  margin-block-end: 14px; background: var(--surface);
}
.acad-quiz-question legend { font-weight: 600; font-size: 0.92rem; color: var(--primary); padding: 0; margin-block-end: 8px; }
.acad-quiz-option { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; padding-block: 4px; cursor: pointer; }
.acad-quiz-option input { margin-block-start: 3px; flex-shrink: 0; }
.acad-quiz-feedback { font-size: 0.84rem; font-weight: 600; margin-block: 8px 2px; min-height: 1.2em; }
.acad-quiz-feedback.is-correct { color: var(--accent-dark); }
.acad-quiz-feedback.is-incorrect { color: var(--copper-text); }
.acad-quiz-explanation { font-size: 0.82rem; color: var(--text-secondary); margin: 0; }
.acad-quiz-actions { display: flex; gap: 10px; margin-block-start: 6px; }
.acad-quiz-result { font-weight: 600; color: var(--primary); margin-block-start: 10px; }
.acad-quiz-best { font-size: 0.85rem; color: var(--text-secondary); }

/* ── HTA Lab "Model structures" trio — sliders, decision tree, ── */
/* ── Markov/microsimulation trace charts and patient grid ──────── */
.sb-slider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 20px; margin-block-end: 14px; }
.sb-slider-row { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 8px; font-size: 0.82rem; }
.sb-slider-row label { color: var(--text-secondary); }
.sb-slider-row input[type="range"] { width: 100%; }
.sb-slider-val { font-weight: 600; color: var(--primary); min-width: 3.5em; text-align: end; }

.dtree-arms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-block-start: 6px; }
.dtree-arm { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; background: var(--surface); }
.dtree-root { font-weight: 700; color: var(--primary); font-size: 0.95rem; margin-block-end: 8px; }
.dtree-root-sub { font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); }
.dtree-branches { display: flex; flex-direction: column; gap: 8px; margin-block-end: 8px; }
.dtree-branch { border-inline-start: 3px solid var(--accent); padding-inline-start: 10px; }
.dtree-branch-label { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.dtree-leaf { font-size: 0.78rem; color: var(--text-secondary); }
.dtree-expected { font-size: 0.85rem; font-weight: 600; color: var(--accent-dark); margin-block-start: 4px; }
.dtree-icer { font-size: 0.95rem; margin-block-start: 12px; }

.sb-chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-secondary); margin-block-start: 4px; }
.sb-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.sb-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sb-legend-dashed::before { content: ""; width: 14px; height: 0; border-top: 2px dashed var(--text-secondary); display: inline-block; margin-inline-end: 4px; }
.markov-summary, .microsim-summary { font-size: 0.85rem; margin-block-start: 8px; }
.microsim-grid-wrap { margin-block-start: 14px; }
.microsim-grid-label { font-size: 0.8rem; color: var(--text-secondary); margin-block-end: 6px; }
.microsim-grid { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.microsim-row { display: flex; align-items: center; gap: 1px; }
.microsim-row-label { font-size: 0.68rem; color: var(--text-secondary); min-width: 2.2em; flex-shrink: 0; }
.microsim-cell { width: 8px; height: 14px; display: inline-block; border-radius: 1px; }

/* ── "My Progress" page (round-3 batch) ── */
.progress-track-card { display: flex; flex-direction: column; gap: 8px; }
.progress-track-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.progress-track-count { font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; }
.progress-track-details summary { cursor: pointer; font-size: 0.84rem; color: var(--accent-dark); font-weight: 600; margin-block-start: 4px; }
.progress-module-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.progress-module-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.84rem; padding-block: 2px; border-block-end: 1px solid var(--border); }
.progress-module-row:last-child { border-block-end: none; }
.progress-module-row.is-done a { color: var(--accent-dark); font-weight: 600; }
.progress-module-score { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; }
.progress-view-link { font-size: 0.86rem; margin-block-start: 10px; }

/* ── Print-friendly Academy module pages ──────────────────────────
   Task: "what else can we add" batch, item 7. `.no-print` (set on
   the nav, breadcrumb, print button itself, the prev/next and
   back-to-academy chrome in Pages.academyModule) hides everything
   that only makes sense on screen; the module's own title, body,
   diagrams, key points, takeaway, and quiz stay — but result/
   interactive chrome within the quiz is hidden too since there is
   no "submit" on paper. */
@media print {
  .site-nav, .site-footer, .no-print { display: none !important; }
  .acad-module-page { max-width: 100%; }
  .acad-module-diagram svg { max-width: 100%; }
  a.gloss-term { color: inherit; text-decoration: none; }
  .acad-quiz-actions, .acad-quiz-result, .acad-quiz-best { display: none !important; }
  body { background: #fff; }

  /* HTA Lab (round-4 batch, item: export-to-PDF) — the model pill
     switcher, each panel's share/print row, the academy "try this
     method" links, and the compare-scenario controls only make sense
     on screen; the active panel's own heading, inputs (with their
     currently-typed values) and result stay. `.sandbox-model[style*=
     "display:none"]` panels are already hidden inline by
     switchSandboxModel()/sandbox() itself, so only this page's own
     screen-only chrome needs listing here. */
  #sandbox-pills, .sandbox-share-row, .sandbox-academy-link, .sandbox-compare-row {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Saudi Health Clusters page (#/clusters) — ported from the user's
   own phpsa.org "Saudi Health Clusters" page (clusters.html), at
   their explicit instruction to reuse its structure, numbers, and
   map. Class names mostly match that source so the two stay easy to
   compare; physical left/right properties and the phpsa page's own
   [dir="rtl"] overrides have been converted to logical properties
   throughout, per this project's RTL convention — no override rules
   needed here as a result, except where a value is a JS-computed
   screen coordinate (the tooltip position), which is never a logical
   quantity and is called out below.
   ══════════════════════════════════════════════════════════════════ */
.clusters-hero {
  background:
    radial-gradient(circle at 0% 0%, rgba(0,108,53,.5) 0%, transparent 50%),
    radial-gradient(circle at 100% 0%, rgba(212,160,23,.4) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(168,81,44,.4) 0%, transparent 50%),
    linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff; padding: 48px 36px; border-radius: var(--radius-xl);
  margin-block-end: 28px; position: relative; overflow: hidden; box-shadow: var(--shadow-md);
}
.clusters-hero .badge {
  display: inline-block; background: rgba(255,255,255,.15); backdrop-filter: blur(10px);
  padding: 6px 14px; border-radius: 20px; font-size: 11px; font-weight: 600;
  letter-spacing: 1.2px; margin-block-end: 12px; border: 1px solid rgba(255,255,255,.2);
}
.clusters-hero-title { font-size: clamp(24px, 4vw, 34px); margin-block-end: 10px; font-weight: 800; line-height: 1.2; letter-spacing: -.5px; }
.clusters-hero-intro { opacity: .92; font-size: 15px; max-width: 760px; line-height: 1.7; }
/* .hero-stats / .hero-stat are now shared with .hero (home) — see
   the "── Hero ────" block above. */

.clusters-filter-bar {
  background: var(--surface); padding: 18px 22px; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); margin-block-end: 18px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
.clusters-filter-bar .group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.clusters-filter-bar .group-label { font-size: 11px; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; margin-inline-end: 8px; }
.clusters-search-box { flex: 1; min-width: 200px; position: relative; }
.clusters-search-box input {
  width: 100%; padding-block: 10px; padding-inline: 38px 16px; border: 2px solid var(--border);
  border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; background: var(--bg); transition: .2s;
}
.clusters-search-box input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--shadow-glow); }
.clusters-search-box::before { content: '🔍'; position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .5; }
.clusters-chip {
  background: var(--surface); border: 1px solid var(--border); padding: 6px 14px; border-radius: 18px;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--text-secondary);
  transition: .2s; white-space: nowrap;
}
.clusters-chip:hover { border-color: var(--accent-dark); color: var(--accent-dark); }
.clusters-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,108,53,.3); }

.clusters-layout { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.clusters-cards-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; align-items: start; }
@media (min-width: 900px) { .clusters-cards-row { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1280px) { .clusters-cards-row { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 599px) { .clusters-cards-row { grid-template-columns: 1fr; } }

.clusters-map-card {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
  border-radius: var(--radius-xl); padding: 28px 28px 24px; box-shadow: 0 24px 60px rgba(11,46,28,.18);
  color: #fff; position: relative; overflow: hidden;
}
.clusters-map-card > * { position: relative; z-index: 1; }
.clusters-map-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 18px; flex-wrap: wrap; gap: 10px; }
.clusters-map-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -.2px; display: flex; align-items: center; gap: 10px; color: #fff; }
.clusters-map-head h3 .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-light); box-shadow: 0 0 0 4px rgba(42,157,98,.25); }
.clusters-map-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: rgba(255,255,255,.72); font-weight: 500; }
.clusters-map-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.clusters-map-legend .lg-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 2px solid rgba(255,255,255,.6); }
.clusters-map-legend .lg-dot.lg-dot-cluster { background: #fff; border-color: var(--accent-light); }
.clusters-map-legend .lg-dot.lg-dot-region { background: linear-gradient(135deg, #1976D2, var(--accent)); border: none; }
.clusters-map-legend .lg-dot.lg-dot-active { background: var(--gold); border-color: var(--gold); }
.clusters-map-stage {
  position: relative; width: 100%; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg); padding: 14px; backdrop-filter: blur(4px);
}
.clusters-map-stage .svg-map { width: 100%; height: auto; display: block; max-height: 780px; }
.clusters-map-stage .region-label {
  paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 2.5; stroke-linejoin: round;
  font-size: 10px; font-weight: 700; fill: rgba(255,255,255,.92); pointer-events: none;
  text-anchor: middle; font-family: var(--font-ar); letter-spacing: .2px; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
[dir="ltr"] .clusters-map-stage .region-label { font-family: var(--font-en); }
.clusters-map-stage .region { cursor: pointer; transition: .3s ease; stroke: rgba(255,255,255,.18); stroke-width: 1; fill-opacity: .78; }
.clusters-map-stage .region:hover { fill-opacity: 1; stroke: rgba(255,255,255,.55); stroke-width: 1.5; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.clusters-map-stage .region.dim { fill-opacity: .18; stroke-opacity: .1; }
.clusters-map-stage .cluster-pin { cursor: pointer; transition: .25s; }
.clusters-map-stage .cluster-pin:hover .pin-bubble { r: 18; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.clusters-map-stage .cluster-pin:hover .pin-num { font-size: 12px; }
.clusters-map-stage .cluster-pin.active .pin-bubble { r: 20; stroke-width: 3; }
.clusters-map-stage .cluster-pin.active .pin-ring { r: 30; opacity: .7; }
.clusters-map-stage .pin-bubble { fill: #fff; stroke: var(--c-pin, var(--accent)); stroke-width: 2.5; transition: .25s; }
.clusters-map-stage .pin-num { font-size: 11px; font-weight: 800; fill: var(--c-pin, var(--accent)); text-anchor: middle; dominant-baseline: central; pointer-events: none; font-family: var(--font-en); transition: .2s; }
.clusters-map-stage .pin-ring { fill: none; stroke: var(--c-pin, var(--accent)); stroke-width: 1.5; opacity: 0; animation: clustersPinPulse 2.4s infinite; }
@keyframes clustersPinPulse { 0% { r: 14; opacity: .5; } 100% { r: 32; opacity: 0; } }
.clusters-map-tooltip {
  position: absolute; pointer-events: none; background: #fff; color: var(--primary);
  padding: 10px 14px; border-radius: 10px; font-size: 12px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: 240px; opacity: 0; transition: .15s;
  z-index: 5; transform: translate(-50%, -110%); white-space: normal;
  /* left/top below are JS-computed screen coordinates (mouse position
     relative to the map stage), not a layout direction — intentionally
     physical, not logical; see moveClusterTooltip() in app.js. */
}
.clusters-map-tooltip.show { opacity: 1; }
.clusters-map-tooltip .tt-region { font-size: 10px; color: var(--accent-dark); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; margin-block-end: 2px; }
.clusters-map-tooltip .tt-name { font-size: 13px; line-height: 1.3; margin-block-end: 6px; }
.clusters-map-tooltip .tt-stats { display: flex; gap: 10px; font-size: 11px; color: var(--text-secondary); font-weight: 500; border-block-start: 1px dashed var(--border); padding-block-start: 6px; margin-block-start: 4px; }
.clusters-map-tooltip .tt-stats span b { color: var(--primary); font-weight: 700; }
.clusters-map-corner { position: absolute; top: 24px; font-size: 10px; color: rgba(255,255,255,.5); font-weight: 600; letter-spacing: 1px; }
.clusters-map-corner.tl { inset-inline-start: 24px; }
.clusters-map-corner.tr { inset-inline-end: 24px; text-align: end; }

.cluster-card {
  background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  transition: .3s; border: 1px solid var(--border-light); cursor: pointer; position: relative;
}
.cluster-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cluster-card.expanded { box-shadow: var(--shadow-lg); border-color: var(--accent); }
.cluster-card .head {
  padding: 18px 22px; display: flex; align-items: center; gap: 14px; position: relative;
  background: linear-gradient(135deg, var(--c1, var(--accent)), var(--c2, var(--accent-dark))); color: #fff;
}
.cluster-card .head::after {
  content: ''; position: absolute; top: -30%; inset-inline-end: -10%; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.2), transparent 70%); border-radius: 50%;
}
.cluster-card .icon-block {
  width: 54px; height: 54px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px);
  border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px;
  border: 1px solid rgba(255,255,255,.25); flex-shrink: 0; position: relative; z-index: 1;
}
.cluster-card .head-text { flex: 1; position: relative; z-index: 1; min-width: 0; }
.cluster-card .head-text .region { font-size: 10px; opacity: .85; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; display: block; margin-block-end: 4px; }
.cluster-card .head-text h3 { font-size: 17px; font-weight: 700; letter-spacing: -.3px; margin: 0; }
.cluster-card .head-num { position: relative; z-index: 1; background: rgba(255,255,255,.15); padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.cluster-card .meta { padding: 14px 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; border-block-end: 1px solid var(--border-light); }
.cluster-card .meta-cell { text-align: center; }
.cluster-card .meta-cell .v { font-size: 18px; font-weight: 800; color: var(--primary); line-height: 1; letter-spacing: -.3px; }
.cluster-card .meta-cell .l { font-size: 10px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; margin-block-start: 3px; }
.cluster-card .footer { padding: 10px 22px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-secondary); }
.cluster-card .footer .toggle { color: var(--accent-dark); font-weight: 600; cursor: pointer; }

.cluster-card .hospitals-section { padding-inline: 22px; max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .4s ease; background: var(--bg); }
.cluster-card.expanded .hospitals-section { max-height: 2000px; padding-block: 18px 22px; }
.cluster-card .hospitals-section .group-title {
  font-size: 11px; color: var(--copper-text); font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  margin: 14px 0 8px; padding-block-end: 4px; border-block-end: 2px solid var(--copper-pale);
}
.cluster-card .hospitals-section .group-title:first-child { margin-block-start: 0; }
.hospital-pill {
  display: inline-flex; align-items: center; gap: 6px; background: var(--surface); padding: 7px 12px;
  border-radius: 8px; font-size: 12px; color: var(--text); font-weight: 500; margin: 3px; border: 1px solid var(--border-light); transition: .2s;
}
.hospital-pill:hover { border-color: var(--accent-dark); color: var(--accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.hospital-pill.tertiary { border-inline-start: 3px solid var(--gold); background: linear-gradient(90deg, var(--gold-pale), var(--surface)); }
.hospital-pill.medical-city { border-inline-start: 3px solid var(--copper); background: linear-gradient(90deg, var(--copper-pale), var(--surface)); font-weight: 700; }
.hospital-pill .icon { font-size: 14px; }

/* Per-cluster color palettes — same hex pairs as phpsa.org's own
   .c-<id> rules, just targeting --c1/--c2 used above. */
.c-r1 { --c1: #0F7C7B; --c2: #0A5B5A; }
.c-r2 { --c1: #1976D2; --c2: #0D47A1; }
.c-r3 { --c1: #7B1FA2; --c2: #4A148C; }
.c-makkah { --c1: #A56A4A; --c2: #7B4B2D; }
.c-madinah { --c1: #2E7D32; --c2: #1B5E20; }
.c-jeddah1 { --c1: #0288D1; --c2: #01579B; }
.c-jeddah2 { --c1: #00838F; --c2: #006064; }
.c-taif { --c1: #D4A017; --c2: #A57A00; }
.c-east { --c1: #E65100; --c2: #BF360C; }
.c-ahsa { --c1: #5D4037; --c2: #3E2723; }
.c-hafr { --c1: #558B2F; --c2: #33691E; }
.c-qassim { --c1: #388E3C; --c2: #1B5E20; }
.c-asir { --c1: #C2185B; --c2: #880E4F; }
.c-najran { --c1: #7B1FA2; --c2: #4A148C; }
.c-jazan { --c1: #0097A7; --c2: #006064; }
.c-bahah { --c1: #43A047; --c2: #1B5E20; }
.c-tabuk { --c1: #1976D2; --c2: #0D47A1; }
.c-hail { --c1: #F57C00; --c2: #E65100; }
.c-jouf { --c1: #5D4037; --c2: #3E2723; }
.c-northern { --c1: #0277BD; --c2: #01579B; }

.clusters-empty { text-align: center; padding: 50px 20px; color: var(--text-secondary); }
.clusters-empty .ico { font-size: 48px; opacity: .3; margin-block-end: 10px; }

.clusters-source-note {
  text-align: center; color: var(--text-muted); font-size: 11px; margin-block-start: 20px;
  padding: 12px; background: var(--surface); border-radius: var(--radius-sm); border: 1px dashed var(--border);
}
.clusters-source-note a { color: var(--accent-dark); text-decoration: none; font-weight: 600; }

@media print {
  .clusters-hero, .clusters-filter-bar, .clusters-map-card { display: none !important; }
  .cluster-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .cluster-card .hospitals-section { max-height: none; padding: 18px 22px; }
}

/* ════
   Policy Sandbox — ported from the user's own phpsa.org "Policy
   Sandbox" page (sandbox.html) at their explicit instruction for
   "the same aesthetics, looks, and feel". Class names (.ov-card,
   .sim-card, .sim-grid, .model-info, .mi-toggle, .mi-body, .ptable,
   .cite, .results-box, .result-row, .input-group, .slider-row,
   .slider-val, .assumptions, .btn/.btn-run/.btn-reset/.btn-group,
   .chart-wrap, .overview-grid, .ov-icon) are kept identical to
   phpsa's own markup so its exact visual design carries over. Reuses
   this site's existing design tokens where they already match
   phpsa's palette (--accent/--primary/--copper/--success/--danger
   are the same hex values — confirmed during the earlier Clusters
   page port) and adds the few extra tokens phpsa's sandbox design
   needs beyond that shared set (--cream, --warning, --info-bg).
   Physical left/right rules from the source are converted to
   logical (inline-start/inline-end) properties for this site's RTL
   support, same convention as the rest of this file. ════ */
:root {
  --ps-cream: #F6F3EF;
  --ps-text-sec: #555;
  --ps-warning: #E65100;
}

.module.policy-sandbox-model { padding-block: 24px; }
.sandbox-back-link { margin-block-end: 12px; }
.sandbox-back-link a { color: var(--accent-dark); text-decoration: none; font-weight: 600; font-size: 14px; }
.sandbox-back-link a:hover { text-decoration: underline; }
.ps-intro { color: var(--ps-text-sec); margin-block-end: 20px; }

/* Overview grid (hub) */
.overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-block-start: 24px; }
.ov-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px; text-align: center; cursor: pointer; transition: all .25s; }
.ov-card:hover, .ov-card:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ov-icon { font-size: 40px; margin-block-end: 12px; }
.ov-card h3 { color: var(--primary); margin-block-end: 6px; border: none; padding: 0; font-size: 18px; font-weight: 600; }
.ov-card p { font-size: 13px; color: var(--ps-text-sec); line-height: 1.6; margin: 0; }

/* Sim cards & grid (detail view) */
.sim-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; margin-block-end: 20px; box-shadow: var(--shadow-sm); }
.sim-card h3 { border-bottom: 2px solid var(--accent); padding-block-end: 8px; margin-block-end: 12px; color: var(--primary); font-size: 18px; font-weight: 600; }
.sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .sim-grid { grid-template-columns: 1fr; } }
.assumptions { background: #f9fafb; border-inline-start: 4px solid var(--copper); padding: 16px; border-radius: var(--radius-sm); margin-block: 12px; }
.ps-assumptions-lines { font-size: 13px; color: var(--ps-text-sec); margin-block-start: 6px; line-height: 1.8; }
.results-box { background: #f0f9ff; border: 1px solid #bfdbfe; border-radius: var(--radius-md); padding: 16px; margin-block-start: 16px; }
.results-box h4 { color: var(--primary); margin-block-end: 8px; }
.result-row { display: flex; justify-content: space-between; padding-block: 8px; border-bottom: 1px solid #dbeafe; font-size: 14px; }
.result-row:last-child { border-bottom: none; }
.result-val { font-weight: 700; color: var(--accent-dark); }

/* Inputs */
.input-group { margin-block-end: 14px; }
.input-group label { display: block; font-size: 13px; font-weight: 600; color: var(--ps-text-sec); margin-block-end: 4px; }
.input-group input[type="number"], .input-group input[type="text"], .input-group select {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; background: var(--surface);
}
.input-group input:focus, .input-group select:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-glow); }
.slider-row { display: flex; align-items: center; gap: 10px; }
.slider-row input[type="range"] { flex: 1; accent-color: var(--accent); min-height: 44px; }
@media (max-width: 420px) {
  /* Lets a long (esp. Arabic) label drop to its own line on very
     narrow phones rather than squeezing the slider track to near
     nothing. */
  .slider-row { flex-wrap: wrap; }
  .slider-row input[type="range"] { flex-basis: 100%; }
}
.slider-val { min-width: 55px; text-align: center; font-weight: 700; color: var(--accent-dark); font-size: 15px; }

/* Buttons (scoped to Policy Sandbox's own btn classes, distinct from this site's .btn-primary/.btn-secondary) */
.btn-run, .btn-reset {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border: none;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .2s;
}
.btn-run { background: var(--accent); color: #fff; }
.btn-run:hover { background: var(--primary); color: #fff; }
.btn-reset { background: var(--ps-cream); color: var(--text); border: 1px solid var(--border); }
.btn-reset:hover { background: var(--border); }
.btn-group { display: flex; gap: 10px; margin-block-start: 16px; flex-wrap: wrap; }

/* Chart */
.chart-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; margin-block: 16px; min-height: 260px; }
.chart-wrap canvas { max-width: 100%; height: auto; }

/* Model info / methodology panel */
.model-info { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin-block-end: 20px; overflow: hidden; }
.mi-toggle {
  width: 100%; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--primary);
  background: linear-gradient(135deg, #f0f9ff, #e6f5f5); border: none; font-family: inherit; transition: background .2s;
}
.mi-toggle:hover { background: linear-gradient(135deg, #e0f2fe, #d5f0f0); }
.mi-body { display: none; padding: 20px; font-size: 13px; line-height: 1.9; color: var(--ps-text-sec); }
.mi-body.open { display: block; }
.mi-body h4 { color: var(--primary); font-size: 14px; margin: 14px 0 6px; font-weight: 700; }
.mi-body h4:first-child { margin-block-start: 0; }
.ptable { width: 100%; border-collapse: collapse; margin-block: 8px 14px; font-size: 12.5px; }
.ptable th { background: var(--primary); color: #fff; padding: 6px 10px; text-align: start; font-weight: 600; }
.ptable td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
.ptable tr:last-child td { border-bottom: none; }
.cite { font-size: 12px; color: var(--accent-dark); line-height: 1.7; margin-block: 4px; padding-inline-start: 12px; border-inline-start: 2px solid var(--accent); }

@media print {
  .overview-grid, .sandbox-back-link, .sandbox-share-row { display: none !important; }
}


/* ════
   HTAA IDENTITY LAYER — Direction E "The Majlis"
   Wordmark lockup, display type, pattern device, hero, footer, dashboard.
   Pattern rule (guideline p.16): the mark repeated on a half-drop grid, in
   a tone just off the background; behind covers, dividers and digital
   headers — NEVER behind body text, never in competing colours.
   ════ */
h1, h2.section-title, .hero h1, .block h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; }
html[lang="ar"] h1, html[lang="ar"] h2.section-title, html[lang="ar"] .hero h1,
[dir="rtl"] h1, [dir="rtl"] h2.section-title, [dir="rtl"] .hero h1, [dir="rtl"] .block h2 {
  font-family: var(--font-ar); font-weight: 700; letter-spacing: 0;
}
/* eyebrow / overline labels: tracked caps in Najdi Clay, as in the guideline */
.overline, .about-overline, .section-overline { color: var(--copper); letter-spacing: .14em; font-weight: 600; text-transform: uppercase; }

/* ── Nav: white bar, horizontal lockup (guideline p.18) ── */
.site-nav { background: #fff; }
.site-nav .brand { max-width: none; gap: 12px; font-weight: 400; margin-inline-end: 28px; }
.site-nav .brand:hover { text-decoration: none; }
.shta-symbol { flex-shrink: 0; display: block; }
.wm { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; min-width: 0; }
.wm-en1, .wm-en2 { font-family: var(--font-en); font-weight: 600; font-size: 11.5px; letter-spacing: .09em; white-space: nowrap; }
.wm-en1 { color: var(--primary); }
.wm-en2 { color: var(--copper); }
.wm-ar { font-family: var(--font-ar); font-weight: 600; font-size: 12.5px; color: var(--primary); white-space: nowrap; margin-block-start: 1px; }
.site-nav .brand .abbr { display: none; }
/* symbol alone where space is tight (guideline: "or the symbol alone where space is tight") */
@media (max-width: 1180px) { .site-nav .brand .wm-ar { display: none; } }
@media (max-width: 980px)  { .site-nav .brand .wm { display: none; } }
@media (max-width: 560px)  { .site-nav .brand .shta-symbol { width: 38px; height: 38px; } }

/* ── Hero: Deep Palm panel with the pattern, ivory display headline ── */
.hero {
  background: var(--primary) var(--pattern-dark) 0 0 / 160px 160px repeat;
  color: var(--bg); padding-block: 84px 72px;
}
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,46,28,0) 55%, var(--primary) 100%); }
.hero-inner { position: relative; z-index: 1; max-width: 860px; align-items: flex-start; text-align: start; }
.hero-top { justify-content: flex-start; margin-block-end: 22px; }
.hero-mark { color: inherit; }
.hero-mark .shta-symbol { width: 72px; height: 72px; }
.hero-badge { background: rgba(251,247,236,.08); border-color: rgba(200,162,74,.55); color: var(--bg); letter-spacing: .06em; }
.hero-badge .dot { background: var(--gold); }
.hero h1 { text-wrap: balance; font-size: clamp(2.3rem, 5.4vw, 3.9rem); line-height: 1.12; font-weight: 400; font-style: italic; color: #fff; margin: 0 0 14px; }
html[lang="ar"] .hero h1, [dir="rtl"] .hero h1 { font-style: normal; font-weight: 700; line-height: 1.35; }
.hero p.lead { font-size: 1.2rem; color: var(--gold); max-width: 640px; margin-block-end: 30px; font-weight: 500; }
.hero .actions { justify-content: flex-start; }
.hero .btn-primary { background: var(--gold); color: var(--primary); }
.hero .btn-primary:hover { background: #D8B864; color: var(--primary); }
.btn-hero-ghost { background: transparent; color: var(--bg); border: 1px solid rgba(251,247,236,.45); }
.btn-hero-ghost:hover { background: rgba(251,247,236,.1); text-decoration: none; }
.hero-stats-plain { justify-content: flex-start; border-block-start: 1px solid rgba(200,162,74,.45); padding-block-start: 26px; width: 100%; }
.hero-stat-plain { text-align: start; }
.hero-stat-plain .v { font-family: var(--font-display); color: var(--gold); }

/* ── Cards / panels: Desert Sand family ── */
.card { background: var(--sand); border-color: var(--border); }
section.block.alt { background: var(--sand); }
.card .tag { color: var(--copper); }

/* ── Footer: Deep Palm, gold rule, pattern strip ── */
footer.site-footer { background: var(--primary); color: #DCE3D2; border-block-start: 3px solid var(--gold); position: relative; }
footer.site-footer::before { content: ""; display: block; height: 0; }
footer.site-footer .footer-link { color: var(--bg); }

/* ── Dashboard / workbench shell ── */
.dash-sidebar { background: var(--primary) var(--pattern-dark) 0 100% / 120px 120px no-repeat; }
.dash-sidebar .brand { font-family: var(--font-en); letter-spacing: .04em; }
.dash-sidebar nav a.active, .dash-sidebar nav a:hover { background: rgba(200,162,74,.14); box-shadow: inset 3px 0 0 var(--gold); }
[dir="rtl"] .dash-sidebar nav a.active, [dir="rtl"] .dash-sidebar nav a:hover { box-shadow: inset -3px 0 0 var(--gold); }

/* ── Auth pages: lockup above the card ── */
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-block-end: 18px; }
.auth-card { box-shadow: var(--shadow-md); border-top: 3px solid var(--gold) !important; }

/* Focus rings follow the accent */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Round 2: simpler nav, commitments, founding card, governance ── */
.site-nav .dropdown li.dd-head { grid-column: 1 / -1; padding: 8px 14px 2px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; }
.site-nav .dropdown li.dd-head:not(:first-child) { border-block-start: 1px solid var(--border); margin-block-start: 4px; }
.nav-search-input { width: 120px; }
.hero-commit { gap: 28px 40px; align-items: flex-start; }
.hero-commit-item { flex: 1 1 200px; max-width: 280px; display: flex; flex-direction: column; gap: 4px; }
.hero-commit-item strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold); font-weight: 500; }
.hero-commit-item span { color: rgba(255,255,255,.78); font-size: .9rem; line-height: 1.5; }
.founding-card { background: var(--surface, #fff); border: 1px solid var(--border); border-inline-start: 4px solid var(--gold); border-radius: var(--radius, 8px); padding: 28px; }
.founding-card h3 { margin: 0 0 8px; font-family: var(--font-display); }
.founding-card .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-block-start: 16px; }
.gov-list { padding-inline-start: 1.2em; line-height: 1.7; }
.gov-list li { margin-block-end: 8px; }

/* ── News tabs, automated feeds, link directory ── */
.news-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 22px; border-block-end: 1px solid var(--border); }
.news-tab { background: none; border: 0; border-block-end: 3px solid transparent; padding: 10px 14px; font: inherit; font-weight: 500; color: var(--text-muted); cursor: pointer; }
.news-tab:hover { color: var(--primary); }
.news-tab.active { color: var(--primary); border-block-end-color: var(--gold); }
.feed-list { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius, 8px); background: #fff; overflow: hidden; }
.feed-item { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; text-decoration: none; color: inherit; border-block-end: 1px solid var(--border); }
.feed-item:last-of-type { border-block-end: 0; }
.feed-item:hover { background: var(--sand); }
.feed-meta { font-size: .78rem; color: var(--text-muted); }
.feed-source { color: var(--clay, #A8512C); font-weight: 600; }
.feed-title { font-weight: 600; color: var(--primary); line-height: 1.45; }
.feed-sum { font-size: .9rem; color: var(--text-muted); line-height: 1.5; }
.feed-foot { font-size: .8rem; color: var(--text-muted); padding: 12px 20px; margin: 0; }
.link-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.link-card strong { color: var(--primary); }
.link-card:hover { border-color: var(--gold); }
.link-host { font-size: .78rem; color: var(--text-muted); }

.doc-narrow { max-width: 820px; }
.doc-steps { display: grid; gap: 14px; margin-block-start: 18px; }
.doc-step { display: flex; gap: 18px; align-items: flex-start; }
.doc-step h3 { margin: 0 0 6px; }
.doc-step p { margin: 0; line-height: 1.7; }
.doc-num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: var(--gold); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.1rem; }
.digest-text { width: 100%; font: inherit; line-height: 1.7; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius, 8px); background: #fff; resize: vertical; }

/* ── Share bars ── */
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-block-start: 22px; padding-block-start: 14px; border-block-start: 1px dashed var(--border); }
.share-label { font-size: .78rem; color: var(--text-muted); margin-inline-end: 4px; letter-spacing: .02em; }
.share-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--primary); cursor: pointer; padding: 0; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.share-btn:hover, .share-btn:focus-visible { background: var(--primary); color: var(--gold); border-color: var(--primary); }
.share-btn.copied { background: var(--accent); color: #fff; border-color: var(--accent); }
.share-btn[hidden] { display: none; }
.share-compact { margin-block-start: 12px; padding-block-start: 10px; }
.share-compact .share-btn { width: 30px; height: 30px; }
.share-compact .share-btn svg { width: 15px; height: 15px; }
.hero .share-bar { border-block-start-color: rgba(200,162,74,.35); }
.hero .share-label { color: rgba(255,255,255,.7); }
.hero .share-btn { color: #FBF7EC; border-color: rgba(255,255,255,.3); }
.hero .share-btn:hover, .hero .share-btn:focus-visible { background: var(--gold); color: var(--primary); border-color: var(--gold); }
.feed-row { border-block-end: 1px solid var(--border); }
.feed-row:last-of-type { border-block-end: 0; }
.feed-row .feed-item { border-block-end: 0; }
.feed-row .share-bar { margin: 0; padding: 0 20px 14px; border: 0; }
@media print { .share-bar { display: none; } }

.card[data-shared] { position: relative; }
.share-toggle { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0; opacity: .55; transition: opacity .15s, background .15s; }
.share-toggle svg { width: 15px; height: 15px; }
.card:hover .share-toggle, .share-toggle:focus-visible, .card.share-open .share-toggle { opacity: 1; background: var(--sand); color: var(--primary); }
.card .share-bar { display: none; }
.card.share-open .share-bar { display: flex; }
.share-in-inline { margin-block: 4px 18px; padding-block-start: 0; border-block-start: 0; }
.section-header + .share-in-inline, .share-in-inline + * { }

/* ═════ Academy expansion (Oct 2026): path map, tools, visuals, flashcards, badges ═════ */
.acad-block { margin-block: 28px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.acad-block-h { margin: 0 0 6px; font-family: var(--font-display, inherit); }
.acad-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; }
.acad-lane { background: var(--sand); border-radius: var(--radius-md); padding: 12px; border-top: 4px solid var(--accent); }
.acad-lane.lane-1 { border-top-color: var(--gold); }
.acad-lane.lane-2 { border-top-color: var(--copper); }
.acad-lane-title { font-weight: 700; font-size: .9rem; color: var(--primary); margin-bottom: 8px; }
.acad-lane-chips { display: flex; flex-direction: column; gap: 6px; }
.acad-chip { display: flex; align-items: center; gap: 6px; text-align: start; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: .82rem; color: var(--text); cursor: pointer; }
.acad-chip:hover, .acad-chip:focus-visible { border-color: var(--accent); background: var(--accent-pale); }
.acad-chip-prog { margin-inline-start: auto; font-size: .72rem; color: var(--accent-dark); font-weight: 700; }
@media (max-width: 820px) { .acad-lanes { grid-template-columns: 1fr; } }

.acad-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 14px 0 6px; }
.acad-badges li { padding: 6px 12px; border-radius: 999px; font-size: .8rem; border: 1px solid var(--border); }
.acad-badges li.on { background: var(--gold-pale); border-color: var(--gold); color: var(--primary); font-weight: 600; }
.acad-badges li.off { background: var(--sand); color: var(--text-secondary); }
.acad-badges li.off > span[aria-hidden] { filter: grayscale(1); opacity: .6; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.acad-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.acad-tool-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: var(--accent-pale); border: 1px solid var(--accent); border-radius: var(--radius-md); text-decoration: none; color: var(--primary); }
.acad-tool-card:hover, .acad-tool-card:focus-visible { background: #dcebd8; }
.acad-tool-card-title { font-weight: 700; font-size: .92rem; }
.acad-tool-card-mod { font-size: .78rem; color: var(--text-secondary); }
.acad-tool-card-go { font-size: .78rem; color: var(--accent-dark); font-weight: 700; margin-top: auto; }

.acad-tools-wrap { margin-block: 22px; }
.acad-tool { border: 1.5px solid var(--accent); border-radius: var(--radius-lg); padding: 16px; background: var(--surface); margin-block: 14px; box-shadow: var(--shadow-sm); }
.acad-tool-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.acad-tool-head h4 { margin: 0; font-size: 1.02rem; }
.acad-tool-badge { background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .03em; }
.tool-intro { color: var(--text-secondary); font-size: .88rem; margin: 4px 0 12px; }
.tool-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 18px; margin-bottom: 14px; }
.tool-field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; font-size: .84rem; }
.tool-field-label { grid-column: 1 / -1; color: var(--text); font-weight: 600; }
.tool-field input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 28px; }
.tool-field output { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-dark); min-width: 4.5ch; text-align: end; }
.tool-field-text, .tool-field-sel, .tool-field-num { grid-template-columns: 1fr; }
.tool-field input[type="text"], .tool-field input[type="number"], .tool-field select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--bg); color: var(--text); }
.tool-checks { grid-column: 1 / -1; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; }
.tool-checks legend { font-weight: 600; padding-inline: 4px; }
.tool-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 10px; }
.tool-stat { background: var(--sand); border-radius: var(--radius-md); padding: 10px 12px; text-align: center; border-bottom: 3px solid var(--border); }
.tool-stat.tone-good { border-bottom-color: var(--accent); }
.tool-stat.tone-bad { border-bottom-color: var(--danger); }
.tool-stat-num { font-weight: 700; font-size: 1.15rem; color: var(--primary); font-variant-numeric: tabular-nums; }
.tool-stat-label { font-size: .72rem; color: var(--text-secondary); margin-top: 2px; }
.tool-verdict { margin: 8px 0; font-size: .92rem; }
.tool-verdict.tone-good strong { color: var(--accent-dark); }
.tool-verdict.tone-bad strong { color: var(--danger); }
.tool-note { font-size: .78rem; color: var(--text-muted); margin: 8px 0 0; }
.tool-code { background: var(--primary); color: #E8F1E6; padding: 12px; border-radius: 8px; font-size: .82rem; white-space: pre-wrap; overflow-x: auto; }
.tool-question { font-size: 1.02rem; font-weight: 600; }
.tool-big { font-size: 1.3rem; font-weight: 700; color: var(--primary); margin: 6px 0; }
.tool-tablewrap { overflow-x: auto; }
.grade-boxes { display: flex; gap: 6px; }
.grade-box { width: 38px; height: 38px; border-radius: 6px; border: 2px solid var(--border); background: var(--surface); }
.grade-box.on { border-color: transparent; }

.tree-arms { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tree-arm { background: var(--sand); border-radius: var(--radius-md); padding: 12px; }
.tree-arm-head { font-weight: 700; margin-bottom: 8px; }
.tree-bar { display: flex; height: 24px; border-radius: 6px; overflow: hidden; font-size: .72rem; color: #fff; }
.tree-bar span { display: flex; align-items: center; justify-content: center; min-width: 0; }
.tree-bar .resp { background: var(--accent); }
.tree-bar .noresp { background: var(--copper); }
.tree-legend { font-size: .72rem; color: var(--text-secondary); margin: 4px 0 8px; display: flex; gap: 6px; align-items: center; }
.resp-dot, .noresp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.resp-dot { background: var(--accent); } .noresp-dot { background: var(--copper); margin-inline-start: 8px; }
.tree-exp { font-size: .86rem; }

.icon-array { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 320px; margin: 10px 0; }
.icon-dot { display: inline-block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--border); }
.icon-array .icon-dot.event { background: var(--copper); }
.icon-array .icon-dot.saved { background: var(--accent); }
.icon-array .icon-dot.harm { background: var(--danger); }
.icon-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .78rem; color: var(--text-secondary); }
.icon-legend .icon-dot { width: 11px; height: 11px; margin-inline-end: 5px; vertical-align: middle; }
.icon-legend .event { background: var(--copper); } .icon-legend .saved { background: var(--accent); } .icon-legend .harm { background: var(--danger); }

.tool-committee .scen { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px; }
.tool-committee legend { font-weight: 700; padding-inline: 6px; }
.scen-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.scen-opt.picked { background: var(--accent); color: #fff; border-color: var(--accent); }
.scen-fb { font-size: .86rem; margin: 6px 0 0; }
.scen-score { font-weight: 700; color: var(--accent-dark); }

.acad-worked { background: var(--gold-pale); border: 1px solid var(--gold); border-radius: var(--radius-md); padding: 14px 18px; margin-block: 20px; }
.acad-worked-title { margin: 0 0 6px; }
.acad-worked ol { margin: 6px 0 8px; padding-inline-start: 22px; }
.acad-worked li { margin-block: 4px; }
.acad-worked-result { margin: 8px 0 0; font-size: .9rem; }
.acad-reading { margin-block: 20px; }
.acad-reading ul { padding-inline-start: 20px; }
.acad-reading-cite { color: var(--text-secondary); font-size: .85rem; }

.acad-timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.acad-timeline::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 74px; width: 3px; background: var(--border); }
.acad-timeline li { display: grid; grid-template-columns: 62px 1fr; gap: 24px; position: relative; padding-block: 8px; align-items: start; }
.acad-timeline li::before { content: ""; position: absolute; inset-inline-start: 68px; top: 14px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.tl-when { font-weight: 700; color: var(--accent-dark); text-align: end; font-variant-numeric: tabular-nums; }
.tl-what { font-size: .92rem; }

.acad-matrix { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 6px 8px; max-width: 560px; margin-inline: auto; }
.mx-ylabel { grid-row: 1; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .78rem; font-weight: 700; color: var(--text-secondary); }
[dir="rtl"] .mx-ylabel { transform: none; }
.mx-grid { display: grid; grid-template-columns: 52px 1fr 1fr; gap: 6px; }
.mx-cell { padding: 14px 10px; border-radius: 10px; font-size: .84rem; min-height: 84px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--sand); border: 1px solid var(--border); }
.mx-cell.tone-a { background: var(--accent-pale); border-color: var(--accent); }
.mx-cell.tone-b { background: var(--gold-pale); border-color: var(--gold); }
.mx-cell.tone-c { background: var(--copper-pale); border-color: var(--copper); }
.mx-cell.tone-d { background: #F3E1E1; border-color: var(--danger); }
.mx-ax { font-size: .72rem; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; }
.mx-xlabel { grid-column: 2; text-align: center; font-size: .78rem; font-weight: 700; color: var(--text-secondary); }

.acad-funnel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fn-step { background: var(--accent); color: #fff; border-radius: 8px; padding: 10px 14px; font-size: .86rem; text-align: center; min-width: 170px; display: flex; gap: 8px; align-items: center; justify-content: center; }
.fn-step:nth-child(2) { background: #0a5f31; } .fn-step:nth-child(3) { background: #0d5a39; } .fn-step:nth-child(4) { background: var(--accent-dark); } .fn-step:nth-child(5) { background: var(--primary); }
.fn-num { background: rgba(255,255,255,.22); width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex-shrink: 0; }

.acad-flash .flash-card { background: var(--primary); color: #FBF7EC; border-radius: var(--radius-lg); min-height: 150px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; cursor: pointer; transition: background .2s; }
.acad-flash .flash-card.flipped { background: var(--accent-dark); }
.flash-term { font-size: 1.25rem; font-weight: 700; margin: 0; }
.flash-hint { font-size: .75rem; opacity: .75; margin: 8px 0 0; }
.flash-def { font-size: .98rem; margin: 0; line-height: 1.55; }
.flash-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: center; }
.flash-count { text-align: center; font-size: .78rem; color: var(--text-muted); margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) { .acad-flash .flash-card { transition: none; } }
@media print { .acad-tool .tool-controls, .acad-flash, .acad-block, .acad-tools-wrap { display: none !important; } }
.board-photo{object-fit:cover;border-radius:50%;display:block;width:72px;height:72px}

/* Footer newsletter form (HTAHub.subscribeForm) */
.nl-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-block: 8px; }
.nl-form strong { margin-inline-end: 4px; }
.nl-form input[type=email] {
  min-width: 220px; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08); color: #fff;
}
.nl-form input[type=email]::placeholder { color: rgba(255,255,255,.65); }
.nl-form input[type=email]:focus-visible, .nl-form .btn:focus-visible { outline: 2px solid #d4a94a; outline-offset: 2px; }
.nl-form .btn { min-height: 40px; }
.nl-msg { font-size: .85rem; }
.nav-actions .btn { white-space: nowrap; }

/* Audit fixes: h1 promotion keeps section-title look; footer tap targets; inline links not colour-only */
h1.section-title { color: var(--primary); font-size: 1.7rem; margin-block-end: 8px; }
.section-header h1.section-title { margin-block-end: 6px; }
html[lang="ar"] h1.section-title, [dir="rtl"] h1.section-title { font-family: var(--font-display); }
footer.site-footer .footer-link { display: inline-block; padding-block: 8px; min-height: 24px; }
main p a:not(.btn), main li a:not(.btn), .card p a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }

/* ═══ Design pass (Oct 2026): "decisions in plain sight" ═══ */
:root { --ink-soft: #1F4A33; --paper: #FFFDF6; --shadow-soft: 0 1px 2px rgba(11,46,28,.06), 0 8px 24px -12px rgba(11,46,28,.18); }
body { -webkit-font-smoothing: antialiased; }
.block { padding-block: 72px; }
.section-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.25; letter-spacing: -.01em; }
.section-intro { max-width: 62ch; font-size: 1.05rem; line-height: 1.8; }

/* Hero: copy beside a published-decision record */
.hero { padding-block: 72px 56px; overflow: hidden; }
.hero-inner { max-width: 1180px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 48px 56px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero-commit { grid-column: 1 / -1; }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.hero-record { background: var(--paper); color: var(--primary); border-radius: 18px; padding: 22px 24px 20px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.55), 0 0 0 1px rgba(200,162,74,.5); position: relative; transform: rotate(-1.2deg); }
[dir="rtl"] .hero-record { transform: rotate(1.2deg); }
.hero-record::before { content: ""; position: absolute; inset-inline-start: 24px; top: -7px; width: 54px; height: 14px; background: var(--gold); border-radius: 3px; }
.rec-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-weight: 700; padding-block-end: 12px; border-block-end: 1px solid var(--border); }
.rec-ex { font-size: .78rem; font-weight: 600; color: var(--gold-text); background: var(--gold-pale); padding: 3px 10px; border-radius: 999px; }
.rec-rows { margin: 0; }
.rec-row { padding-block: 12px; border-block-end: 1px dashed var(--border); display: grid; gap: 2px; }
.rec-row dt { font-size: .8rem; color: var(--text-secondary); font-weight: 600; }
.rec-row dd { margin: 0; font-size: 1rem; line-height: 1.5; }
.rec-final dd { font-weight: 700; color: var(--accent-dark); font-size: 1.1rem; }
.rec-foot { display: flex; justify-content: space-between; align-items: center; padding-block-start: 14px; font-size: .8rem; color: var(--text-secondary); }
.rec-stamp { border: 2px solid var(--accent); color: var(--accent); border-radius: 8px; padding: 3px 12px; font-weight: 700; transform: rotate(-4deg); display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .rec-row { animation: rec-in .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 260ms + 250ms); }
  .rec-stamp { animation: rec-stamp .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: 1.5s; }
}
@keyframes rec-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rec-stamp { from { opacity: 0; transform: scale(1.6) rotate(-10deg); } to { opacity: 1; transform: rotate(-4deg); } }
@media (max-width: 920px) { .hero-inner { grid-template-columns: minmax(0,1fr); } .hero-record { transform: none; max-width: 520px; } [dir="rtl"] .hero-record { transform: none; } }

/* Cards: paper surface, soft depth, calmer than beige boxes */
.card { background: var(--paper); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-soft); }
.domain-tile { position: relative; padding: 22px 22px 22px; border-inline-start: 4px solid var(--gold); transition: transform .18s, box-shadow .18s, border-color .18s; }
.domain-tile:hover { transform: translateY(-2px); border-inline-start-color: var(--accent); box-shadow: 0 12px 28px -14px rgba(11,46,28,.35); }
.domain-tile h3 { font-size: 1.08rem; line-height: 1.5; margin: 0; }
section.block.alt { background: linear-gradient(180deg, var(--sand), #EFE7D0); }

/* Pathways */
.path-picker { background: var(--primary) var(--pattern-dark) 0 0 / 140px 140px; color: var(--bg); border-radius: 20px; padding: 28px 30px; margin-block-end: 32px; box-shadow: var(--shadow-soft); }
.path-picker h3 { color: #fff; margin: 0 0 14px; font-size: 1.3rem; }
.path-picker-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; }
.path-picker label { display: block; font-size: .85rem; margin-block-end: 6px; color: #DCE3D2; font-weight: 600; }
.path-picker select { appearance: none; min-height: 46px; min-width: 220px; padding: 8px 40px 8px 14px; border-radius: 12px; border: 1px solid rgba(251,247,236,.4); background: rgba(251,247,236,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C8A24A' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; color: #fff; font: inherit; }
[dir="rtl"] .path-picker select { padding: 8px 14px 8px 40px; background-position: left 14px center; }
.path-picker select option { color: var(--primary); background: #fff; }
.path-picker .btn-primary { background: var(--gold); color: var(--primary); min-height: 46px; }
#path-result .card { margin-block-start: 6px; color: var(--primary); }
.path-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.path-card { display: flex; flex-direction: column; gap: 10px; background: var(--paper); border: 1px solid var(--border); border-radius: 16px; padding: 22px; color: inherit; text-decoration: none; box-shadow: var(--shadow-soft); transition: transform .18s, box-shadow .18s; position: relative; overflow: hidden; }
.path-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--gold)); }
.path-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(11,46,28,.4); text-decoration: none; }
.path-card h3 { margin: 0; font-size: 1.15rem; color: var(--primary); }
.path-card p { margin: 0; color: var(--text-secondary); font-size: .94rem; line-height: 1.7; flex: 1; }
.path-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.path-meta span { font-size: .8rem; font-weight: 600; background: var(--accent-pale); color: var(--accent-dark); padding: 3px 10px; border-radius: 999px; }
.path-bar { height: 6px; background: #E8E3D2; border-radius: 6px; overflow: hidden; }
.path-bar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.path-bar-lg { height: 10px; margin-block-start: 14px; }
.path-hero { background: var(--primary) var(--pattern-dark) 0 0 / 140px 140px; color: var(--bg); border-radius: 22px; padding: 34px 36px; margin-block: 8px 24px; }
.path-hero .section-title { color: #fff; margin: 0 0 8px; }
.path-hero p { color: #DCE3D2; margin: 0 0 16px; max-width: 60ch; font-size: 1.05rem; }
.path-hero .path-meta span { background: rgba(200,162,74,.18); color: var(--gold); }
.path-steps { list-style: none; counter-reset: step; padding: 0; margin: 12px 0 0; }
.path-steps li { counter-increment: step; position: relative; padding: 12px 0; padding-inline-start: 46px; border-block-end: 1px dashed var(--border); margin: 0 !important; }
.path-steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-pale); color: var(--accent-dark); font-weight: 700; display: grid; place-items: center; font-size: .85rem; }
.path-steps li a { font-weight: 600; }
@media (max-width: 560px) { .path-picker, .path-hero { padding: 22px 18px; } .path-picker select { min-width: 100%; } }
/* Quieter chrome: share controls stay on articles and records, not on the landing hero or topic tiles */
.hero .share-bar, .domain-tile .share-toggle { display: none; }
.share-bar.share-compact { opacity: .85; }
.path-hero .share-bar { display: none; }
.path-note { color: var(--text-secondary); font-size: .88rem; margin: 0 0 6px; }
.path-st { font-size: .82rem; color: var(--text-secondary); margin-inline-start: 8px; }
.path-st:empty { display: none; }
@media (min-width:1440px) and (max-width:1500px) { .nav-search-input { width: 56px; } .site-nav nav ul > li > a { padding-inline: 4px; } }

/* Page headers: full-bleed Deep Palm band behind the first heading of every inner page */
main > section.block:first-child { padding-block-start: 0; overflow-x: clip; }
main > section.block:first-child > .container > :is(.section-header, h1.section-title, h2.section-title):first-child {
  background: var(--primary); color: #fff; box-shadow: 0 0 0 100vmax var(--primary); clip-path: inset(0 -100vmax);
  padding-block: 44px 38px; margin-block-end: 38px;
}
main > section.block:first-child > .container > :is(.section-header, h1.section-title, h2.section-title):first-child :is(.section-title, h1, h2) { color: #fff; }
main > section.block:first-child > .container > h1.section-title:first-child,
main > section.block:first-child > .container > h2.section-title:first-child { color: #fff; font-size: clamp(1.8rem, 3vw, 2.5rem); }
main > section.block:first-child > .container > .section-header:first-child .section-intro { color: #DCE3D2; margin-block-end: 0; }
main > section.block:first-child > .container > .section-header:first-child :is(.overline, .about-overline, .section-overline) { color: var(--gold); }
main > section.block:first-child > .container > :is(.section-header, h1.section-title, h2.section-title):first-child { margin-block-start: 0; }
main > section.block:first-child > .container > .section-header:first-child .share-bar { display: none; }
.container > .card + .card { margin-block-start: 16px; }

/* Academy data charts */
.acad-chart { margin: 8px 0 0; }
.acad-chart figcaption { margin-block-start: 10px; font-size: .88rem; line-height: 1.7; color: var(--text-secondary); max-width: 68ch; border-inline-start: 3px solid var(--gold); padding-inline-start: 12px; }
.acad-chart .sb-chart { width: 100%; max-width: 560px; height: auto; display: block; }

/* ── UX pass (Oct 2026): phone dashboard shell, tap targets, minimum type size ── */
.tag-muted, .academy-track-badge { font-size: 0.75rem; }
.site-nav .dropdown li.dd-head { font-size: .75rem; }
@media (max-width: 820px) {
  .dash-layout { flex-direction: column; min-height: 0; }
  .dash-sidebar { width: 100%; padding: 12px 0; background-image: none; }
  .dash-sidebar .brand { margin-block-end: 8px; }
  .dash-sidebar nav { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding-inline: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .dash-sidebar nav a, .dash-sidebar nav > * { flex: 0 0 auto; white-space: nowrap; }
  .dash-sidebar nav a { padding: 12px 14px; border-radius: 8px; }
  .dash-sidebar nav a.active, .dash-sidebar nav a:hover { box-shadow: none; }
  .dash-sidebar .nav-group { display: inline-block !important; margin: 0 6px !important; padding: 0 !important; align-self: center; flex: 0 0 auto; white-space: nowrap; }
  .dash-sidebar nav form { flex: 0 0 180px; padding: 0 !important; }
  .dash-sidebar #dash-extra { display: contents; }
  .dash-sidebar nav { align-items: center; }
  .dash-main { padding: 16px; min-width: 0; }
  .dash-main table.wb-table { display: block; overflow-x: auto; max-width: 100%; }
  .dash-main .grid.cols-2, .dash-main .grid.cols-3, .dash-main .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .dash-main .grid > *, .dash-main .card, .dash-main .wb-card { min-width: 0; max-width: 100%; }
  .dash-main { overflow-wrap: anywhere; }
  .dash-main pre, .dash-main code { white-space: pre-wrap; }
}
@media (pointer: coarse) {
  .btn, .acad-track-tab, .idx-pill, .share-toggle, .tabs button, select, input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height: 44px; }
  .share-btn { width: 40px; height: 40px; }
  .share-compact .share-btn { width: 40px; height: 40px; }
  .dash-sidebar nav a { min-height: 44px; display: flex; align-items: center; }
}
/* Large-text safety: grid/flex children may shrink, long words may wrap */
.hero-inner > *, .hero-copy > * { min-width: 0; }
h1, h2, h3, .lead { overflow-wrap: anywhere; }
.nl-form input[type=email] { min-width: 0; max-width: 100%; box-sizing: border-box; flex: 1 1 12rem; }
footer.site-footer .container > * { min-width: 0; max-width: 100%; }

/* Large text (scale >= 125%): use the compact (burger) navigation at every width */
html.ts-big .site-nav .bar { flex-wrap: wrap; }
html.ts-big .nav-burger { display: flex; }
html.ts-big .nav-panel {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 0; border-block-start: 1px solid var(--border); margin-block-start: 12px; padding-block-start: 8px;
  }
html.ts-big .site-nav.nav-open .nav-panel { display: flex; }
html.ts-big .site-nav nav ul { flex-direction: column; align-items: stretch; gap: 0; }
html.ts-big .site-nav nav ul > li { border-block-end: 1px solid var(--border-light); }
html.ts-big .site-nav nav ul > li > a { display: block; padding: 12px 4px; min-height: 44px; }
html.ts-big .site-nav li.has-dropdown:hover > .dropdown { display: none; }
html.ts-big .site-nav .dropdown {
    position: static; box-shadow: none; border: none; min-width: 0;
    margin: 0; padding-inline-start: 14px; background: var(--bg);
  }
html.ts-big .site-nav li.has-dropdown.open > .dropdown { display: block; }
html.ts-big .site-nav li.has-dropdown.open > .dropdown.dropdown-wide { display: block; min-width: 0; }
html.ts-big .nav-actions { flex-direction: column; align-items: stretch; gap: 10px; padding-block: 14px 4px; }
html.ts-big .nav-search, html.ts-big .nav-search-input { width: 100%; max-width: none; }
html.ts-big .lang-switch, html.ts-big .nav-actions .btn { width: 100%; justify-content: center; min-height: 44px; }