:root {
  color-scheme: light;

  /* Brand */
  --primary: #38433e;         /* deep slate green — header, footer, dark panels */
  --primary-80: #4a564f;
  --primary-60: #67716b;
  --primary-ink: #2c352f;     /* darkest, for deep contrast */
  --accent: #f89e4e;          /* warm highlight — buttons, active, data emphasis */
  --accent-strong: #ee8a30;
  --accent-ink: #a5641c;      /* accessible accent text on white */
  --accent-soft: #fdeede;     /* faint accent wash for chips/hover */

  /* Canvas + surfaces */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f6f7f6;
  --surface-muted: #eef1ef;
  --surface-sunken: #f2f4f2;

  /* Text */
  --text: #1c2420;
  --muted: #5d6862;
  --muted-2: #8a938e;
  --on-dark: #f4f6f5;
  --on-dark-muted: rgba(244, 246, 245, 0.68);

  /* Lines */
  --border: #e5e8e6;
  --border-strong: #d2d7d3;
  --danger: #b64a3c;

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur: saturate(180%) blur(20px);
  --glass-dark-bg: rgba(44, 53, 47, 0.9);
  --glass-dark-border: rgba(255, 255, 255, 0.1);

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(28, 36, 32, 0.06), 0 1px 1px rgba(28, 36, 32, 0.04);
  --shadow: 0 12px 30px rgba(28, 36, 32, 0.08);
  --shadow-lg: 0 26px 60px rgba(28, 36, 32, 0.16);

  /* Shape */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --max: 1180px;
  --site-header-height: 70px;
  --sticky-top: 94px;
  --scroll-offset: 100px;

  /* Spacing.
     The horizontal gutter is a single value and never varies. A 2px difference
     between a panel header and the body under it reads as broken, where the
     same difference vertically is invisible — so horizontal gets one token and
     vertical gets a scale. 20px because it is already the most common panel
     gutter and the page rhythm (.main gap), which keeps the retrofit to ±2px.

     --gutter is what children read. A panel that pads itself sets it to 0 and
     every `padding-inline: var(--gutter)` rule below collapses to nothing. */
  --panel-gutter: 20px;
  --gutter: var(--panel-gutter);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --gap-sm: 8px;
  --gap: 12px;
  --gap-lg: 20px;

  /* Legacy aliases — remap old semantic colours onto the new brand so
     existing markup picks up the palette without per-call-site edits. */
  --green: var(--primary);
  --green-2: var(--primary-80);
  --blue: var(--primary);
  --amber: var(--accent-ink);
  --surface-green: var(--surface-soft);
  --surface-blue: var(--surface-soft);
  --surface-amber: var(--accent-soft);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  max-width: 100%;
  overflow-x: hidden;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 20;
  padding: 8px 12px;
  background: var(--text);
  color: #fff;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: 16px;
}

.app-shell {
  min-height: 100vh;
  padding-top: var(--site-header-height);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--glass-dark-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-dark-border);
  box-shadow: 0 8px 30px rgba(20, 26, 23, 0.18);
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  min-height: 70px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}

.brand-lockup:hover {
  text-decoration: none;
}

.brand-logo {
  height: 38px;
  width: auto;
  display: block;
}

.brand-mark {
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0;
}

.brand-rule {
  width: 1px;
  height: 30px;
  background: var(--border-strong);
}

.brand-lockup strong {
  display: block;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.brand-lockup small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

/* Header sits on the dark glass bar — flip brand text to light. */
.site-header .brand-lockup {
  color: var(--on-dark);
}

.site-header .brand-rule {
  background: var(--glass-dark-border);
}

.site-header .brand-lockup strong {
  color: var(--on-dark);
}

.site-header .brand-lockup small {
  color: var(--on-dark-muted);
}

.nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  align-self: stretch;
  flex: 1 1 auto;
  min-width: 0;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 8px;
  color: var(--on-dark-muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.16s ease;
}

.nav-link:hover {
  color: var(--on-dark);
  text-decoration: none;
}

.nav-link.is-active {
  color: var(--on-dark);
}

.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 230px;
  justify-content: flex-end;
}

.search-box {
  position: relative;
  width: 230px;
}

.global-search {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-dark);
  font-size: 13.5px;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.global-search::placeholder {
  color: var(--on-dark-muted);
}

.global-search:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--accent);
}

/* Recolour the native clear (X) button to white on the dark header. */
.global-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 13px;
  width: 13px;
  margin-left: 6px;
  cursor: pointer;
  opacity: 0.7;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.global-search::-webkit-search-cancel-button:hover {
  opacity: 1;
}

/* ---- Search overlay (Framer-style dropdown) ---- */
.search-overlay {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(380px, calc(100vw - 32px));
  z-index: 120;
  padding: 6px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-dark-border);
  background: var(--primary);
  box-shadow: var(--shadow-lg);
  max-height: min(70vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.search-overlay[hidden] {
  display: none;
}

.search-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-result-list li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.search-result {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  color: var(--on-dark);
  transition: background 0.14s ease;
}

.search-result:hover,
.search-result:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  text-decoration: none;
  outline: none;
}

.search-result-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
}

.search-result-icon .icon {
  width: 17px;
  height: 17px;
}

.search-result-body {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.search-result-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--on-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-meta {
  font-size: 11.5px;
  color: var(--on-dark-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-type {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  background: var(--accent);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

.search-empty {
  padding: 16px 12px;
  color: var(--on-dark-muted);
  font-size: 13px;
  text-align: center;
}

/* One vertical rhythm for every page. Sections used to carry their own
   margin-bottom, so any panel that forgot one sat flush against its neighbour. */
.main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 38px 24px 64px;
}

.main.has-jump-bar {
  padding-bottom: 132px;
}

.jump-target {
  scroll-margin-top: var(--scroll-offset);
}

.jump-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 70;
  width: min(calc(100vw - 32px), 820px);
  transform: translateX(-50%);
  border: 1px solid rgba(207, 218, 212, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 18px 48px rgba(11, 27, 21, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.jump-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  padding: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.jump-bar-inner::-webkit-scrollbar {
  display: none;
}

.jump-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 14px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.jump-link:hover,
.jump-link:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  text-decoration: none;
  outline: none;
}

.jump-link.is-active {
  border-color: transparent;
  background: var(--primary);
  color: var(--on-dark);
}

/* ------------------------------------------------------------------ *
 * Page hero — the shared header on every page. One vertical stack:
 * back, eyebrow, title, lede, meta, stats. The grid gap carries the
 * rhythm so absent slots collapse without leaving orphaned margins.
 * ------------------------------------------------------------------ */
.page-hero {
  display: grid;
  gap: 20px;
  margin: 0 0 8px;
  padding: 4px 0 30px;
  border-bottom: 1px solid var(--border);
}

.page-hero > .back-button {
  justify-self: start;
  margin-bottom: 0;
}

.page-hero-copy {
  min-width: 0;
}

.page-hero-eyebrow {
  margin: 0 0 11px;
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* max-width in em keeps the measure constant in characters across the clamp. */
.page-hero-title {
  max-width: 15em;
  margin: 0;
  color: var(--primary-ink);
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* SIP logo. The supplied marks run from portrait (ACT) to 6:1 landscape
   (Humansdorp), so the standard is one white square for every SIP; `contain`
   scales each mark on its longer side, so the whole mark is always visible
   and never cropped or stretched. */
.sip-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.sip-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.page-hero-lede {
  max-width: 65ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.55;
  overflow-wrap: break-word;
}

.page-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Accent marks interactive; a static fact takes the muted icon. */
.page-hero-meta .chip:not(.chip-link) .chip-icon {
  color: var(--primary-60);
}

.chip-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* auto-fit gives 4 cols for 4 stats and 5 for 5, but orphans a 6th. */
.page-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.page-hero-stats.is-6up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Coverage has seven distinct context measures. Keep a stable four-card
   reading grid rather than letting auto-fit create five cards then an orphaned
   second row. Smaller breakpoints retain the shared responsive layout. */
.coverage-hero .page-hero-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* SIP profiles use their verified Kwantu coverage coordinates as a quiet,
   non-interactive service-area map. The reading column stays entirely white;
   the map has its own dedicated right-hand frame. */
.profile-map-hero {
  position: relative;
  isolation: isolate;
  min-height: 648px;
  margin: -38px calc(50% - 50vw) 8px;
  padding: 42px max(24px, calc((100vw - var(--max)) / 2 + 24px)) 30px;
  overflow: hidden;
  border-bottom: 0;
  background: #fff;
}

.profile-map-hero > :not(.profile-hero-map) {
  position: relative;
  z-index: 2;
}

.profile-map-hero .back-button,
.profile-map-hero .page-hero-copy,
.profile-map-hero .page-hero-meta {
  max-width: min(650px, calc(50vw - 42px));
}

.profile-hero-map {
  z-index: 0;
  position: absolute;
  top: 0;
  right: 16px;
  bottom: 0;
  left: 53%;
  overflow: hidden;
  pointer-events: none;
  background: #f1f4f2;
}

.profile-hero-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0.18) 71%, rgba(255, 255, 255, 0.76) 88%, #fff 100%);
  pointer-events: none;
}

.profile-hero-map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.88) 12%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.16) 42%, rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}

.profile-hero-map.is-unavailable::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), #fff 100%); }
.profile-hero-map .maplibregl-ctrl-attrib { right: 8px; bottom: 5px; padding: 1px 4px; background: rgba(255, 255, 255, 0.68); color: var(--muted); font-size: 8px; }
.profile-hero-map .maplibregl-ctrl-attrib a { color: inherit; }

/* ------------------------------------------------------------------ *
 * Profile hero layouts (?hero=a|b|c). Shared parts first: the logo and
 * name sit in one lockup, and the name is a step down from the standard
 * page title so a long organisation name holds one or two lines.
 * ------------------------------------------------------------------ */
.profile-hero-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
}

.profile-hero-title {
  max-width: 22em;
  margin: 0;
  color: var(--primary-ink);
  font-size: clamp(27px, 2.6vw, 33px);
  line-height: 1.13;
  letter-spacing: -0.018em;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.profile-hero-lede {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.55;
}

/* Measures without card chrome, for the layouts that read as one band. */
.profile-hero-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}

.profile-hero-rail-item {
  padding: 0 20px;
  border-left: 1px solid var(--border);
}

.profile-hero-rail-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.profile-hero-rail dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.profile-hero-rail dd {
  margin: 5px 0 2px;
  color: var(--primary-ink);
  font-size: 31px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.profile-hero-rail p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

/* a — cards. The reading column keeps the left half, the four measures
   stay as the site's standard metric cards across the full width. */
.profile-hero-a {
  gap: 22px;
}

.profile-hero-a .page-hero-copy {
  display: grid;
  gap: 18px;
}

/* b — panel. Map goes full-bleed and the whole header floats over it in
   one frosted card, which is the same language as the site header. */
.profile-hero-b {
  min-height: 600px;
  align-content: start;
}

.profile-hero-b .profile-hero-map {
  left: 0;
  right: 0;
}

.profile-hero-b .profile-hero-map::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.6) 34%, rgba(255, 255, 255, 0.1) 62%, rgba(255, 255, 255, 0) 78%);
}

.profile-hero-panel {
  display: grid;
  gap: 20px;
  width: min(640px, 100%);
  padding: 26px 28px 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 20px 46px rgba(28, 47, 42, 0.14);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
}

.profile-hero-panel .profile-hero-rail {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.profile-hero-panel .profile-hero-rail dd {
  font-size: 27px;
}

.profile-hero-panel .profile-hero-rail-item {
  padding: 0 14px;
}

.profile-hero-panel .profile-hero-rail-item:first-child {
  padding-left: 0;
}

/* c — masthead. Name, logo and tags share one line, the lede sits under
   it, and the measures close the band as a full-width rail. */
.profile-hero-c {
  min-height: 560px;
  align-content: start;
  gap: 24px;
}

/* Capped to the reading column so a short name never pushes its tags out
   over the live part of the map. */
.profile-hero-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
  max-width: min(1000px, calc(64vw - 42px));
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.profile-hero-masthead .page-hero-meta {
  max-width: none;
}

.profile-hero-c .profile-hero-rail {
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

/* Home — the same skeleton, one step up the scale. */
.page-hero-lead .page-hero-title {
  max-width: 14em;
  font-size: clamp(38px, 4.8vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.022em;
}

.page-hero-lead .page-hero-lede {
  max-width: 60ch;
  font-size: 17.5px;
  line-height: 1.5;
}

.metric-card {
  position: relative;
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-content: center;
  align-items: center;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.metric-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
}

.metric-card:hover::before {
  opacity: 1;
}

/* White on white, lifted by a green-tinted shadow — what gives the cards depth. */
.metric-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 5px 14px rgba(28, 47, 42, 0.08);
  color: var(--primary);
}

.metric-icon .icon {
  width: 20px;
  height: 20px;
}

.metric-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.metric-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.metric-value {
  color: var(--primary-ink);
  font-size: clamp(30px, 2.6vw, 38px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.metric-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.95fr);
  gap: 20px;
  align-items: start;
}

.dashboard-grid > * {
  min-width: 0;
}

.dashboard-main-stack,
.dashboard-side-stack {
  align-content: start;
}

.dashboard-map-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(300px, 0.78fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 16px;
}

.dashboard-map-grid > * {
  min-width: 0;
}

.dashboard-map-grid .geo-panel {
  height: 100%;
}

.dashboard-side-stack .geo-panel .panel-header {
  min-height: 70px;
  padding: 16px 20px;
}

.dashboard-side-stack .geo-panel .panel-body {
  padding: var(--space-4) var(--panel-gutter) var(--space-4);
}

.dashboard-side-stack .geo-summary {
  margin-bottom: 6px;
}

.dashboard-side-stack .geo-summary strong {
  font-size: 21px;
}

.dashboard-side-stack .geo-map-wrap {
  margin: 8px 0 6px;
  padding: 4px;
}

.dashboard-side-stack .sa-map,
.dashboard-side-stack .sa-map-svg {
  min-height: 180px;
}

.dashboard-side-stack .geo-panel .viz-bars {
  display: none;
}
.dashboard-footnote {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12.5px;
}

.dashboard-footnote p {
  flex: 1 1 auto;
  margin: 0;
}

.dashboard-footnote strong {
  color: var(--muted);
  font-weight: 650;
  white-space: nowrap;
}

.dashboard-footnote-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-ink);
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-footnote-action .icon {
  width: 16px;
  height: 16px;
}

.dashboard-two-column {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: stretch;
}

.dashboard-primary-column,
.dashboard-secondary-column {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.dashboard-secondary-column {
  position: relative;
  align-self: stretch;
  overflow: visible;
}

.dashboard-secondary-column .dashboard-command-geo {
  position: relative;
  align-self: start;
  z-index: 5;
}

.dashboard-secondary-column .dashboard-command-geo.is-fixed {
  position: fixed;
  top: var(--dashboard-sticky-top);
  left: var(--dashboard-sticky-left);
  width: var(--dashboard-sticky-width);
  z-index: 90;
}

.dashboard-secondary-column .dashboard-command-geo.is-bottomed {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}

.dashboard-command-grid {
  display: grid;
  grid-template-columns: minmax(460px, 1.48fr) minmax(290px, 0.88fr) minmax(360px, 1.08fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}

.dashboard-command-panel {
  min-width: 0;
}

.dashboard-command-panel .panel-header {
  min-height: 72px;
  padding: 17px var(--panel-gutter);
}

.dashboard-command-panel .panel-body {
  padding: 15px var(--panel-gutter) 18px;
}

.coverage-table,
.evidence-list,
.dashboard-profile-table,
.dashboard-source-preview {
  display: grid;
}

.coverage-head,
.coverage-row {
  display: grid;
  grid-template-columns: 26px minmax(220px, 1.25fr) minmax(180px, 0.85fr) 48px 52px;
  align-items: center;
  gap: 12px;
}

.coverage-head {
  min-height: 34px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0 14px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.coverage-row {
  min-height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(30, 48, 43, 0.08);
  color: var(--text);
  font-size: 12px;
}

.coverage-row:hover,
.evidence-list-row:hover,
.library-profile-row:hover,
.compact-indicator-row:hover,
.compact-theme-row:hover,
.compact-source-row:hover {
  background: var(--surface-soft);
  text-decoration: none;
}

.coverage-rank,
.coverage-count,
.coverage-percent,
.evidence-list-value,
.compact-indicator-row b,
.compact-theme-row b,
.compact-source-row b,
.library-profile-row span {
  color: var(--primary-ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.coverage-theme {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.coverage-theme strong {
  overflow: visible;
  white-space: normal;
}

.coverage-theme .icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--primary-60);
}

.coverage-meter .inline-meter-fill {
  background: var(--accent);
}

.dashboard-command-geo .panel-header {
  min-height: 66px;
}

.dashboard-command-geo .geo-summary {
  margin-bottom: 6px;
}

.dashboard-command-geo .geo-map-wrap {
  margin: 2px 0 4px;
  padding: 2px;
  background: transparent;
}

.dashboard-command-geo .sa-map,
.dashboard-command-geo .sa-map-svg {
  min-height: 330px;
}

.dashboard-command-geo .dashboard-geo-hover-copy {
  margin-top: 12px;
  min-height: 78px;
  white-space: pre-line;
  line-height: 1.35;
}

.dashboard-coverage-card { overflow: hidden; }
.dashboard-coverage-card .panel-header { padding-bottom: 13px; }
.dashboard-coverage-map-link { display: block; color: inherit; text-decoration: none; }
.dashboard-coverage-map { height: 300px; min-height: 240px; background: #f8fbfa; }
.dashboard-coverage-map .maplibregl-canvas { pointer-events: none; }
.dashboard-coverage-map .maplibregl-ctrl-attrib { background: rgba(255,255,255,0.78); font-size: 9px; }
.dashboard-coverage-map > span { display: grid; height: 100%; place-items: center; color: #fff; font-size: 12px; }
.dashboard-coverage-map-button { margin: var(--panel-gutter); }
.dashboard-coverage-map-button .icon { width: 14px; height: 14px; color: var(--accent); }
.dashboard-coverage-map-button:hover { background: var(--primary-80); }
.dashboard-coverage-map-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.dashboard-coverage-map-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.geo-legend {
  display: grid;
  grid-template-columns: auto auto minmax(84px, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11.5px;
}

.geo-legend-bar {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fbe1c6, var(--accent-strong));
}

.evidence-list-head,
.evidence-list-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 12px;
}

.evidence-list-head {
  min-height: 34px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0 18px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.evidence-list-head span:first-child {
  grid-column: 2;
}

.evidence-list-row {
  min-height: 64px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(30, 48, 43, 0.08);
  color: var(--text);
}

.evidence-list-copy {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.evidence-list-copy strong {
  color: var(--primary-ink);
  font-size: 12px;
}

.evidence-list-copy span {
  overflow: visible;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  white-space: normal;
}

.most-evidenced-panel .dashboard-library-footer {
  display: flex;
  width: fit-content;
  margin: 14px auto 16px;
  justify-self: auto;
}

.dashboard-command-library-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.dashboard-compact-library.dashboard-library-panel {
  gap: 12px;
  padding: 18px var(--panel-gutter) var(--space-4);
}

.dashboard-compact-library .dashboard-library-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.library-count-pill {
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--primary-ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.library-profile-head,
.library-profile-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 70px 58px 58px 74px;
  align-items: center;
  gap: 8px;
}

.library-profile-row,
.compact-indicator-row,
.compact-theme-row,
.compact-source-row {
  min-height: 38px;
  border-top: 1px solid rgba(30, 48, 43, 0.08);
  padding: 6px 2px;
  color: var(--text);
  font-size: 11.5px;
}

.library-profile-row strong,
.compact-indicator-row span,
.compact-theme-row span strong,
.compact-source-row strong {
  min-width: 0;
  overflow: visible;
  white-space: normal;
}

.compact-indicator-head,
.compact-indicator-row {
  display: grid;
  grid-template-columns: 82px minmax(190px, 1fr) minmax(120px, 0.6fr) 62px;
  align-items: center;
  gap: 8px;
}

.compact-indicator-row small {
  overflow: visible;
  color: var(--muted);
  font-size: 11px;
  white-space: normal;
}

.compact-theme-head,
.compact-theme-row,
.compact-source-head,
.compact-source-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 54px 66px 74px;
  align-items: center;
  gap: 8px;
}

.compact-theme-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.compact-theme-row .icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--primary-60);
}

.compact-source-row {
  grid-template-columns: minmax(180px, 1fr) 62px 70px 88px;
}

.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.panel-header {
  min-height: 58px;
  padding: 18px var(--panel-gutter);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.panel-header > div {
  min-width: 0;
}

.panel-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 750;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.panel-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.panel-body {
  padding: 18px var(--panel-gutter);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.control {
  min-width: 150px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 11px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
}

.control.search {
  min-width: min(260px, 100%);
}

/* One button shape, three weights.

   .text-button keeps its name and stays canonical — it is used in ~30 places
   across an 8,000-line template-literal file with no compiler to catch a
   mistyped class, so .button-secondary is aliased onto it rather than the other
   way round. .button-primary and .button-secondary were referenced in the
   markup with no rule at all, which is why "Clear filters" rendered as a raw
   browser button next to styled selects. */
.button-primary,
.button-secondary,
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0 15px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.button-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-dark);
  font-weight: 750;
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--primary-80);
  border-color: var(--primary-80);
  color: var(--on-dark);
  text-decoration: none;
}

.button-secondary,
.text-button {
  border-color: var(--border-strong);
  color: var(--primary);
}

.button-secondary:hover,
.button-secondary:focus-visible,
.text-button:hover,
.text-button:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  text-decoration: none;
}

.button-primary:focus-visible,
.button-secondary:focus-visible,
.text-button:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}

/* The one full-width case, replacing .dashboard-coverage-map-button. */
.button-block { display: flex; margin: var(--panel-gutter); }

/* --- Panel base classes ------------------------------------------------
   Every class below was used in the markup with no rule anywhere in this
   file. .panel-note was the worst of them: with no CSS it took the UA default
   `margin: 1em 0` and zero horizontal padding, so it sat flush against the
   panel border while its siblings were inset — the "ugly spacing" under
   "What this SIP reports changed".
   ---------------------------------------------------------------------- */

.eyebrow {
  display: block;
  margin: 0 0 var(--space-1);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.panel-note {
  margin: 0 0 var(--space-4);
  padding-inline: var(--gutter);
  max-width: 88ch;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

/* Prose dropped straight into a panel, bypassing .panel-body, gets the gutter
   rather than the border. This is the class of bug .panel-note fell into. */
.panel > p,
.panel > h3,
.panel > ul,
.panel > ol,
.panel > dl { padding-inline: var(--gutter); }

/* Panels that carry their own padding opt their children out in one line. */
.portfolio-method-panel,
.portfolio-detail-link,
.results-method { --gutter: 0px; }

.outcome-claims-panel,
.profile-narrative-panel { padding-bottom: var(--space-5); }

.control-mini { min-width: 0; height: 34px; padding: 0 9px; font-size: 12px; }

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

th {
  color: #24302b;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--surface-soft);
}

th.sortable-header {
  cursor: pointer;
  user-select: none;
}

th.sortable-header:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.sort-header-label {
  display: inline;
}

.sort-indicator {
  display: none;
  width: 0;
  height: 0;
  margin-left: 7px;
  vertical-align: middle;
}

th.sortable-header[aria-sort="ascending"] .sort-indicator {
  display: inline-block;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--green);
  border-left: 4px solid transparent;
}

th.sortable-header[aria-sort="descending"] .sort-indicator {
  display: inline-block;
  border-top: 6px solid var(--green);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

tr:last-child td {
  border-bottom: 0;
}

.name-link {
  color: var(--primary);
  font-weight: 700;
  transition: color 0.15s ease;
}

.name-link:hover {
  color: var(--accent-ink);
  text-decoration: none;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 13px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.chip {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  gap: 6px;
  inline-size: fit-content;
  min-width: 0;
  min-height: 30px;
  max-inline-size: 100%;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.82);
  color: var(--primary);
  box-shadow: inset 0 -1px 0 rgba(28, 36, 32, 0.04);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Legacy tone variants collapse into the single brand pill. */
.chip.blue,
.chip.amber {
  background: var(--surface-soft);
  color: var(--primary);
}

.chip .chip-icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--accent-ink);
}

.chip-label {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.chip-link {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip-link:hover,
.chip-link:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  outline: none;
}

.chip-link:hover .chip-icon,
.chip-link:focus-visible .chip-icon {
  color: var(--accent-ink);
}

.theme-chip-row {
  width: 100%;
  min-width: 0;
  align-content: flex-start;
}

.chip-expander {
  display: inline-flex;
  max-width: 100%;
}

.chip-expander summary {
  cursor: pointer;
  list-style: none;
}

.chip-expander summary::-webkit-details-marker {
  display: none;
}

.chip-expander[open] {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-expander-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chart-list {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1.2fr) 42px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.bar-track {
  height: 9px;
  border-radius: 999px;
  background: var(--surface-muted);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

/* ---- Icons ---- */
.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
}

/* ---- Ranked bar chart ---- */
.viz-bars {
  display: grid;
  gap: 3px;
}

.viz-bar {
  display: grid;
  grid-template-columns: minmax(130px, 1.1fr) minmax(90px, 1.5fr) auto;
  align-items: center;
  gap: 14px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.viz-bar:hover {
  background: var(--surface-soft);
}

.viz-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 550;
}

.viz-bar-label > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.viz-bar-label:hover {
  color: var(--accent-ink);
  text-decoration: none;
}

.viz-bar-icon {
  width: 16px;
  height: 16px;
  color: var(--primary-60);
  transition: color 0.15s ease;
}

a.viz-bar-label:hover .viz-bar-icon {
  color: var(--accent-ink);
}

.viz-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  overflow: hidden;
}

.viz-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary-60);
}

.viz-bar.is-lead .viz-bar-fill {
  background: var(--accent);
}

.viz-bar-value {
  min-width: 40px;
  text-align: right;
  color: var(--primary-ink);
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.viz-bar-value small {
  margin-left: 3px;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 500;
}

/* ---- Donut ratio ---- */
.viz-donut {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.viz-donut svg {
  width: 128px;
  height: 128px;
}

.viz-donut-track {
  fill: none;
  stroke: var(--surface-muted);
  stroke-width: 12;
}

.viz-donut-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease;
}

.viz-donut-figure {
  fill: var(--primary-ink);
  font-size: 30px;
  font-weight: 800;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

.viz-donut-sub {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
}

.viz-donut-caption {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

/* ---- Option 2 portfolio map + library launch panels ---- */
.inline-meter {
  display: block;
  min-width: 72px;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  overflow: hidden;
}

.inline-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary-60);
}

.inline-meter.theme-record-meter span,
.mini-indicator-row:hover .inline-meter span,
.mini-theme-row:hover .inline-meter span {
  background: var(--accent);
}

.portfolio-map-panel {
  min-height: 330px;
}

.portfolio-map-panel .panel-header {
  min-height: 70px;
  padding: 16px 20px;
}

.portfolio-map-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) minmax(210px, 0.75fr) minmax(250px, 0.95fr);
  gap: 18px;
  align-items: center;
  min-height: 242px;
  padding: 16px 18px;
}

.portfolio-map-body::before,
.portfolio-map-body::after {
  content: "";
  position: absolute;
  top: 104px;
  height: 76px;
  pointer-events: none;
  opacity: 0.62;
}

.portfolio-map-body::before {
  left: 24%;
  right: 55%;
  border-radius: 999px;
  background: rgba(248, 158, 78, 0.16);
  transform: skewY(5deg);
}

.portfolio-map-body::after {
  left: 51%;
  right: 23%;
  border-radius: 999px;
  background: rgba(103, 113, 107, 0.07);
  transform: skewY(-5deg);
}

.portfolio-map-col {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.portfolio-map-label {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.portfolio-theme-col,
.portfolio-family-list {
  display: grid;
  gap: 7px;
}

.portfolio-theme-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 9px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  box-shadow: 0 10px 22px rgba(28, 36, 32, 0.04);
  text-decoration: none;
}

.portfolio-theme-row:hover,
.portfolio-family-row:hover,
.mini-indicator-row:hover,
.mini-theme-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-soft);
  text-decoration: none;
}

.portfolio-theme-icon,
.portfolio-family-icon,
.dashboard-library-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--on-dark);
}

.portfolio-theme-icon .icon,
.portfolio-family-icon .icon,
.dashboard-library-icon .icon {
  width: 17px;
  height: 17px;
}

.portfolio-theme-copy,
.portfolio-family-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.portfolio-theme-copy strong,
.portfolio-family-copy strong {
  color: var(--primary-ink);
  font-size: 12px;
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-theme-copy small,
.portfolio-family-copy small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
}

.portfolio-matrix-col {
  justify-self: center;
  width: min(100%, 220px);
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-sm);
}

.portfolio-matrix-key {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.portfolio-matrix {
  display: grid;
  gap: 5px;
}

.portfolio-matrix-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}

.matrix-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--surface-muted);
}

.matrix-cell.level-1 { background: #edf1ee; }
.matrix-cell.level-2 { background: #d7e0da; }
.matrix-cell.level-3 { background: #b8c8bd; }
.matrix-cell.level-4 { background: #829489; }
.matrix-cell.level-5 { background: var(--primary-60); }

.portfolio-family-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(70px, 0.55fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 5px 7px;
}

.portfolio-family-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--primary-60);
}

.portfolio-family-icon .icon {
  width: 15px;
  height: 15px;
}

.portfolio-family-value {
  color: var(--primary-ink);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.theme-dot-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.theme-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary-60);
}

.theme-dot.tone-1,
.portfolio-theme-row.tone-1 { --tone: #f89e4e; }
.theme-dot.tone-2,
.portfolio-theme-row.tone-2 { --tone: #88a68f; }
.theme-dot.tone-3,
.portfolio-theme-row.tone-3 { --tone: #6384a5; }
.theme-dot.tone-4,
.portfolio-theme-row.tone-4 { --tone: #7a5e96; }
.theme-dot.tone-5,
.portfolio-theme-row.tone-5 { --tone: #54a6a0; }
.theme-dot.tone-6 { background: #d89b52; }
.theme-dot.tone-7 { background: #7b8b80; }
.theme-dot.tone-8 { background: #b36b54; }
.theme-dot.tone-1,
.theme-dot.tone-2,
.theme-dot.tone-3,
.theme-dot.tone-4,
.theme-dot.tone-5 {
  background: var(--tone);
}

.portfolio-theme-row[class*="tone-"] {
  border-left-color: var(--tone);
}

.dashboard-library-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
}

.dashboard-library-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.dashboard-library-head h2 {
  margin: 0;
  color: var(--primary-ink);
  font-size: 18px;
  line-height: 1.15;
}

.dashboard-library-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}

.dashboard-profile-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.dashboard-profile-preview .profile-card {
  min-height: 0;
  padding: 12px;
  gap: 10px;
}

.dashboard-profile-preview .profile-card-head {
  grid-template-columns: 34px minmax(0, 1fr) 14px;
  gap: 9px;
}

.dashboard-profile-preview .profile-card-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.dashboard-profile-preview .profile-card-avatar .icon {
  width: 17px;
  height: 17px;
}

.dashboard-profile-preview .profile-card-name {
  font-size: 12.5px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dashboard-profile-preview .profile-card-meta,
.dashboard-profile-preview .profile-card-geo,
.dashboard-profile-preview .chip {
  font-size: 10.5px;
}

.dashboard-profile-preview .profile-card .theme-chip-row {
  display: none;
}

.dashboard-library-footer {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 750;
}

.dashboard-library-footer:hover {
  color: var(--accent-strong);
  text-decoration: none;
}

.dashboard-indicator-preview,
.dashboard-theme-preview,
.compact-record-list {
  display: grid;
  gap: 2px;
}

.mini-table-head,
.mini-indicator-row,
.mini-theme-row {
  display: grid;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mini-table-head {
  grid-template-columns: 1fr 60px 100px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mini-indicator-row {
  grid-template-columns: 24px minmax(0, 1fr) 52px minmax(70px, 0.55fr) 54px;
  min-height: 38px;
  border-radius: var(--radius-sm);
  padding: 5px 7px;
  color: var(--text);
  font-size: 11.5px;
}

.mini-rank {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.mini-indicator-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.mini-indicator-source,
.mini-indicator-rows,
.mini-theme-row strong {
  text-align: right;
  color: var(--primary-ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mini-theme-row {
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.7fr) 58px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  color: var(--text);
  font-size: 12px;
}

.mini-theme-row > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-theme-row .icon {
  width: 15px;
  height: 15px;
  color: var(--primary-60);
}

.dashboard-compact-library .mini-table-head {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.dashboard-compact-library .library-profile-head,
.dashboard-compact-library .library-profile-row {
  grid-template-columns: minmax(220px, 1fr) 80px 70px 70px 86px;
}

.dashboard-compact-library .compact-indicator-head,
.dashboard-compact-library .compact-indicator-row {
  grid-template-columns: 90px minmax(250px, 1fr) minmax(160px, 0.55fr) 74px;
}

.dashboard-compact-library .compact-theme-head,
.dashboard-compact-library .compact-theme-row {
  grid-template-columns: minmax(260px, 1fr) 70px 80px 90px;
}

.dashboard-compact-library .compact-source-head,
.dashboard-compact-library .compact-source-row {
  grid-template-columns: minmax(260px, 1fr) 80px 90px 110px;
}

/* icon sizing inside pill buttons / links */
.text-button .icon,
.name-link .icon {
  width: 15px;
  height: 15px;
}

/* ---- Profile cards ---- */
.profile-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.profile-card-grid.is-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 760px) {
  .profile-card-grid.is-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

.profile-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 16px;
  min-width: 0;
  min-height: 238px;
  overflow: clip;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(28, 36, 32, 0.04);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.profile-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.profile-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 18px 44px rgba(28, 36, 32, 0.1);
  transform: translateY(-2px);
}

.profile-card:hover::before {
  opacity: 1;
}

.profile-card-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 22px;
  align-items: start;
  gap: 14px;
  color: var(--text);
  min-width: 0;
}

.profile-card-head:hover {
  text-decoration: none;
}

.profile-card-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: var(--primary);
  color: var(--on-dark);
  box-shadow: inset 0 -10px 18px rgba(28, 36, 32, 0.18), 0 10px 24px rgba(56, 67, 62, 0.12);
}

.profile-card-avatar .icon {
  width: 23px;
  height: 23px;
}

/* Carrying the SIP's own logo, the tile turns white and takes a hairline so
   it still reads as a tile against the card. Same contain rule as the hero:
   whole mark, scaled on its longer side. */
.profile-card-avatar.has-logo {
  /* Flex, not the grid the icon case uses: inside a grid the image's 100%
     height resolves against an indefinite track and falls back to auto, so a
     portrait mark grew taller than the tile once it loaded. A flex box has a
     definite content height, which is also how .sip-logo does it. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 6px 15px rgba(28, 47, 42, 0.07);
}

.profile-card-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.profile-card-id {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.profile-card-name {
  min-width: 0;
  font-size: 18px;
  font-weight: 850;
  color: var(--primary-ink);
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.profile-card:hover .profile-card-name {
  color: var(--accent-ink);
}

.profile-card-meta {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.profile-card-arrow {
  justify-self: end;
  width: 19px;
  height: 19px;
  color: var(--muted-2);
  transition: color 0.16s ease, transform 0.16s ease;
}

.profile-card:hover .profile-card-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

.profile-card-geo {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}

.profile-card-geo .icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--primary-60);
}

.profile-card-geo span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.profile-card .theme-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-self: end;
  min-width: 0;
  width: 100%;
  padding-top: 2px;
}

.profile-card .theme-chip-row .chip,
.profile-card .theme-chip-row .chip-expander {
  flex: 1 1 min(100%, 168px);
  inline-size: auto;
  max-width: 100%;
}

.profile-card .theme-chip-row .chip {
  justify-content: flex-start;
}

.profile-card .theme-chip-row .chip-label {
  flex: 1 1 auto;
  max-width: 100%;
}

.profile-card .theme-dot-strip {
  align-self: start;
}

.evidence-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.68);
  overflow: hidden;
}

.evidence-stat-strip span {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.15;
}

.evidence-stat-strip span:last-child {
  border-right: 0;
}

.evidence-stat-strip strong {
  color: var(--primary-ink);
  font-size: 18px;
  line-height: 1;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.theme-profile-layout .profile-card-grid.is-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .theme-profile-layout .profile-card-grid.is-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Rank list ---- */
.rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.rank-list-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.rank-list-item:hover {
  background: var(--surface-soft);
}

.rank-list-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--primary-60);
}

.rank-list-icon .icon {
  width: 16px;
  height: 16px;
}

.rank-list-body {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.rank-list-name {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rank-list-name:hover {
  color: var(--accent-ink);
  text-decoration: none;
}

.rank-list-meta {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-list-stat {
  display: grid;
  justify-items: end;
  color: var(--primary-ink);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.rank-list-stat small {
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 3px;
}

.library-breakdown-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 20px;
}

.indicator-family-panel,
.indicator-cluster-panel,
.indicator-library-table-panel,
.profile-library-table-panel {
  overflow: hidden;
}


.family-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.family-filter-button {
  min-width: 0;
  min-height: 86px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 11px;
  background: #fff;
  color: var(--text);
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.family-filter-button:hover,
.family-filter-button:focus-visible,
.family-filter-button.is-active {
  border-color: rgba(15, 107, 70, 0.32);
  background: var(--surface-green);
  color: var(--green);
  outline: none;
}

.family-filter-button span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 800;
}

.family-filter-button .icon {
  width: 15px;
  height: 15px;
  color: var(--primary-60);
}

.family-filter-button.is-active .icon,
.family-filter-button:hover .icon,
.family-filter-button:focus-visible .icon {
  color: var(--accent-ink);
}

.family-filter-button strong {
  display: block;
  margin-top: 7px;
  color: var(--green);
  font-size: 22px;
  line-height: 1;
  font-weight: 850;
}

.family-filter-button small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

/* Neutral card base shared by the indicator clusters and the Sources download cards. */
.mini-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.mini-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: #fff;
}

.mini-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
}

.mini-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.mini-card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-card-metrics span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--green);
  background: var(--surface-green);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.indicator-cluster-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}

.indicator-cluster-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--accent);
}

.indicator-cluster-families {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.indicator-cluster-family {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.indicator-cluster-family span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.indicator-cluster-family:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.indicator-cluster-family:hover span {
  color: var(--accent);
}

.indicator-cluster-family[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--on-dark);
  background: var(--accent);
}

.indicator-cluster-family[aria-pressed="true"] span {
  color: var(--on-dark);
}

.indicator-library-toolbar,
.profile-library-toolbar {
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex: 0 1 auto;
}

.toc-library-panel-header > div:first-child {
  flex: 0 1 360px;
}

.toc-library-toolbar {
  flex: 1 1 720px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}

.toc-library-toolbar .control {
  min-width: 0;
}

.toc-library-toolbar .control.search {
  flex: 1 1 220px;
  min-width: 220px;
}

.toc-library-toolbar #tocRound {
  flex: 0 0 145px;
  min-width: 145px;
}

.toc-library-toolbar #tocAvailability {
  flex: 1 1 240px;
  min-width: 220px;
}

.toc-library-toolbar .text-button {
  flex: 0 0 auto;
}

.indicator-library-toolbar .control,
.profile-library-toolbar .control {
  flex: 0 0 auto;
}

.profile-library-toolbar .control {
  min-width: 170px;
}

.profile-library-toolbar #profileTheme {
  min-width: 230px;
}

.indicator-library-toolbar .control {
  min-width: 190px;
}

.indicator-library-toolbar #indicatorSort {
  min-width: 170px;
}

.indicator-library-toolbar .text-button,
.profile-library-toolbar .text-button {
  flex: 0 0 auto;
}

.indicator-library-table,
.profile-library-table {
  min-width: 1050px;
}

.indicator-library-table th,
.indicator-library-table td,
.profile-library-table th,
.profile-library-table td {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
}

.indicator-library-table th,
.profile-library-table th {
  font-size: 11px;
}

.indicator-library-table td:first-child,
.indicator-library-table td:nth-child(5),
.indicator-library-table td:nth-child(6),
.indicator-library-table td:nth-child(7),
.indicator-library-table td:nth-child(8),
.profile-library-table td:first-child,
.profile-library-table td:nth-child(2),
.profile-library-table td:nth-child(3),
.profile-library-table td:nth-child(6) {
  white-space: nowrap;
}

.profile-library-panel-header {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px 16px;
}

.profile-library-panel-header > div:first-child {
  flex: 1 1 300px;
  min-width: 0;
}

.profile-library-panel-header .panel-subtitle {
  max-width: 52ch;
}

.profile-province-filter {
  display: grid;
  gap: 10px;
  padding: var(--space-4) var(--panel-gutter);
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

.profile-province-filter-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-province-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.province-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px 5px 9px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.province-filter-chip:hover,
.province-filter-chip:focus-within,
.province-filter-chip.is-active {
  border-color: rgba(15, 107, 70, 0.32);
  background: var(--surface-green);
  color: var(--green);
}

.province-filter-chip input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--green);
}

.list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.item-card {
  min-height: 190px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.item-card h2,
.item-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.item-card p {
  margin: 0;
  color: var(--muted);
}

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
  color: var(--muted);
  font-size: 13px;
}

.stat-strip strong {
  color: var(--text);
}

/* ---- Theme card ---- */
.theme-card {
  gap: 12px;
  color: var(--text);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.theme-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  text-decoration: none;
}

.theme-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.theme-card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--primary);
  color: var(--on-dark);
}

.theme-card-icon .icon {
  width: 20px;
  height: 20px;
}

.theme-card:hover .theme-card-icon {
  background: var(--accent);
  color: var(--primary-ink);
}

.theme-card-head h2 {
  font-size: 15.5px !important;
  font-weight: 700;
  color: var(--primary-ink);
  letter-spacing: -0.01em;
}

.theme-card-arrow {
  width: 17px;
  height: 17px;
  color: var(--muted-2);
  transition: color 0.16s ease, transform 0.16s ease;
}

.theme-card:hover .theme-card-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

.theme-card p {
  font-size: 13px;
  line-height: 1.5;
}

.theme-card-records {
  display: grid;
  grid-template-columns: auto minmax(70px, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.theme-card-records strong {
  color: var(--primary-ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.theme-card-subthemes .chip {
  min-height: 24px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 700;
}

.theme-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.theme-card-stats div {
  display: grid;
  gap: 1px;
}

.theme-card-stats strong {
  font-size: 16px;
  font-weight: 750;
  color: var(--primary-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.theme-card-stats span {
  font-size: 10.5px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-theme-carousel-panel {
  overflow: hidden;
}

.theme-carousel {
  position: relative;
  overflow: hidden;
  padding: 16px 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}

.theme-carousel-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: theme-carousel-loop 82s linear infinite;
}

.theme-carousel:hover .theme-carousel-track,
.theme-carousel:focus-within .theme-carousel-track {
  animation-play-state: paused;
}

.theme-carousel-card {
  flex: 0 0 320px;
  width: 320px;
  min-height: 210px;
}

@keyframes theme-carousel-loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 7px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-carousel {
    overflow-x: auto;
    mask-image: none;
  }

  .theme-carousel-track {
    animation: none;
  }
}

/* Generic carousel item wrapper — sizes any card type inside the track. */
.carousel-item {
  flex: 0 0 clamp(260px, 24vw, 330px);
  width: clamp(260px, 24vw, 330px);
  min-width: 0;
  display: flex;
}

.carousel-item > * {
  width: 100%;
}

/* Few cards → static, left-aligned, scrollable row (no auto-loop). */
.theme-carousel.is-static {
  overflow-x: auto;
  mask-image: none;
  scrollbar-width: none;
}

.theme-carousel.is-static::-webkit-scrollbar {
  display: none;
}

.theme-carousel.is-static .theme-carousel-track {
  animation: none;
  width: auto;
}

/* Indicator card (family carousels) */
.indicator-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.indicator-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  text-decoration: none;
}

.indicator-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.indicator-card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--primary-60);
}

.indicator-card-icon .icon {
  width: 19px;
  height: 19px;
}

.indicator-card:hover .indicator-card-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--primary-ink);
}

.indicator-card-arrow {
  width: 17px;
  height: 17px;
  color: var(--muted-2);
  transition: color 0.16s ease, transform 0.16s ease;
}

.indicator-card:hover .indicator-card-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

.indicator-card-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--primary-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.indicator-card:hover .indicator-card-name {
  color: var(--accent-ink);
}

.indicator-card-family {
  font-size: 12px;
  color: var(--muted);
}

.indicator-card-id {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.indicator-card-meter {
  display: grid;
  gap: 5px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.indicator-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
}

.indicator-card-stats strong {
  display: block;
  color: var(--primary-ink);
  font-variant-numeric: tabular-nums;
}

.library-visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 18px;
  align-items: start;
  margin: 0 0 22px;
}

.indicator-visual-grid,
.theme-visual-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.library-visual-panel {
  min-width: 0;
}

.profile-visual-grid .geo-panel .panel-body {
  padding-top: 12px;
}

.meter-cell {
  min-width: 96px;
}

.meter-cell span:first-child {
  display: block;
  margin-bottom: 5px;
  font-weight: 800;
}

.meter-cell .inline-meter {
  margin-left: auto;
}

.theme-indicator-panel {
  margin: 0 0 20px;
}

.theme-profile-layout .theme-indicator-panel {
  margin: 0;
}

.theme-main-column {
  min-width: 0;
}

.theme-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 20px;
  align-items: start;
}

.theme-detail-layout > * {
  min-width: 0;
}

.theme-main {
  min-width: 0;
}

.theme-side-rail {
  position: sticky;
  top: var(--sticky-top);
  display: grid;
  gap: 20px;
  align-self: start;
  height: fit-content;
  min-width: 0;
}

.theme-report-panel .panel-header {
  align-items: flex-start;
}

.theme-profile-layout .theme-report-panel {
  overflow: hidden;
}

.report-meta-badge {
  flex: 0 0 auto;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  background: var(--surface-green);
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.report-body {
  max-width: 820px;
  padding: 22px var(--panel-gutter) var(--space-6);
}

.report-body h2,
.report-body h3,
.report-body h4 {
  margin: 24px 0 10px;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: 0;
}

.report-body h2:first-child,
.report-body h3:first-child,
.report-body h4:first-child {
  margin-top: 0;
}

.report-body h2 {
  font-size: 22px;
}

.report-body h3 {
  font-size: 18px;
}

.report-body h4 {
  font-size: 16px;
}

.report-body p,
.report-body li {
  color: #2f3935;
  font-size: 15px;
  line-height: 1.65;
}

.report-body p {
  margin: 0 0 12px;
}

.report-body ul,
.report-body ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.report-body li + li {
  margin-top: 7px;
}

.report-body strong {
  color: var(--text);
}

.report-body code {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  background: var(--surface-soft);
  color: #25312d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.report-table-wrap {
  width: 100%;
  margin: 12px 0 18px;
  overflow-x: auto;
}

.theme-profile-layout .report-body {
  max-width: 980px;
}

.report-page-panel {
  margin-top: 20px;
  overflow: hidden;
}

.report-page-panel .panel-body {
  padding: 0 20px 20px;
}


.report-summary-list {
  color: #2f3935;
  font-size: 15px;
}

.report-summary-list ul {
  margin: 0;
  padding-left: 20px;
}

.report-summary-list li + li {
  margin-top: 8px;
}

.report-subheading {
  margin: 18px 0 8px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.25;
}

.report-page-panel .report-table-wrap {
  max-width: 100%;
  margin-bottom: 0;
}

.report-page-panel table {
  min-width: 860px;
}

.report-page-panel th,
.report-page-panel td {
  vertical-align: top;
}

.report-page-panel td {
  color: #2f3935;
}

.theme-sip-list {
  display: grid;
}

.theme-sip-item {
  min-width: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}

.theme-sip-item:last-child {
  border-bottom: 0;
}

.theme-sip-item .name-link {
  display: inline-block;
  max-width: 100%;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.indicator-profile-layout {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
}

.indicator-section-layout {
  grid-template-columns: minmax(0, 4fr) minmax(180px, 20%);
  align-items: stretch;
  column-gap: 18px;
}

.indicator-main-column {
  min-width: 0;
}

.indicator-section-rail {
  align-self: stretch;
  width: auto;
  min-width: 0;
  min-height: 100%;
  --rail-left: auto;
  --rail-width: auto;
}

.indicator-section-card {
  position: static;
  width: 100%;
  min-width: 0;
  max-width: none;
  border: 1px solid rgba(207, 218, 212, 0.78);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.indicator-section-rail.is-docked .indicator-section-card {
  position: fixed;
  top: var(--sticky-top);
  left: var(--rail-left);
  z-index: 65;
  width: var(--rail-width);
  min-width: 0;
}

.section-nav-eyebrow {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.section-nav-list {
  display: grid;
  gap: 5px;
}

.section-nav-link {
  display: flex;
  align-items: center;
  min-height: 27px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 9px;
  color: #26342f;
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}

.section-nav-link:hover,
.section-nav-link:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-ink);
  outline: none;
  text-decoration: none;
}

.section-nav-link.is-active {
  background: var(--primary);
  color: var(--on-dark);
}

.metric-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
}

.metric-tile {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  background: var(--surface-soft);
}

.metric-tile span,
.indicator-detail-grid span,
.guidance-item span,
.guidance-callout span,
.indicator-definition-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metric-tile strong {
  display: block;
  margin-top: 5px;
  color: var(--green);
  font-size: 24px;
  line-height: 1;
  font-weight: 850;
}

.metric-tile small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.indicator-overview-body,
.indicator-guidance-body {
  display: grid;
  gap: 14px;
}

.indicator-definition-card,
.guidance-callout {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--surface-green);
}

.indicator-definition-card p,
.guidance-callout p {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 750;
}

.indicator-profile-copy {
  display: grid;
  gap: 10px;
  max-width: 920px;
}

.indicator-profile-copy p {
  margin: 0;
  color: #26342f;
  font-size: 15px;
  line-height: 1.55;
}

.indicator-definition-card .indicator-profile-copy p,
.guidance-callout .indicator-profile-copy p {
  color: var(--text);
  font-size: 16px;
  font-weight: 650;
}

.indicator-profile-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.indicator-profile-field-grid > div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  background: #fff;
}

.indicator-profile-field-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.indicator-profile-field-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.indicator-detail-grid,
.guidance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.indicator-detail-grid > div,
.guidance-item {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  background: #fff;
}

.indicator-detail-grid strong,
.guidance-item strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.indicator-build-section {
  margin-top: 0;
}

.indicator-data-panel {
  overflow: hidden;
}

.indicator-outcome-body {
  display: grid;
  gap: 16px;
}

.indicator-outcome-lede,
.indicator-outcome-sips {
  max-width: 88ch;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}

.indicator-outcome-sips {
  color: var(--muted);
  font-size: 12px;
}

.indicator-outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.indicator-outcome-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.indicator-outcome-card > span {
  display: block;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.indicator-outcome-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}

.indicator-outcome-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 640px) {
  .indicator-outcome-grid {
    grid-template-columns: 1fr;
  }
}

.indicator-use-profile-body {
  display: grid;
  gap: 14px;
}

.indicator-use-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.indicator-use-theme-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: #fff;
}

.indicator-use-theme-card span {
  display: block;
  margin-bottom: 7px;
  color: var(--green);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.3;
}

.indicator-use-theme-card p {
  margin: 0;
  color: #26342f;
  font-size: 13px;
  line-height: 1.45;
}

.indicator-use-theme-card small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.indicator-table-wrap {
  max-width: 100%;
  max-height: 640px;
  overflow: auto;
}

.indicator-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.indicator-wide-table {
  min-width: 920px;
}

.sources-table {
  min-width: 940px;
}

.sips-table {
  min-width: 1140px;
}

.indicator-sip-usage-table th:nth-child(1),
.indicator-sip-usage-table td:nth-child(1) {
  width: 180px;
}

.indicator-sip-usage-table th:nth-child(2),
.indicator-sip-usage-table td:nth-child(2) {
  width: 26%;
}

.indicator-sip-usage-table th:nth-child(3),
.indicator-sip-usage-table td:nth-child(3) {
  width: 20%;
}

/* Theme chips carry long names. Give each its own row so it sizes to content
   and wraps on word boundaries, instead of being shrunk to a character column. */
.indicator-sip-usage-table th:nth-child(4),
.indicator-sip-usage-table td:nth-child(4) {
  width: 250px;
}

.indicator-sip-usage-table td:nth-child(4) .chip-row,
.indicator-sip-usage-table td:nth-child(4) .chip-expander,
.indicator-sip-usage-table td:nth-child(4) .chip-expander-body {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 6px;
}

.indicator-sip-usage-table td:nth-child(4) .chip-label {
  overflow-wrap: normal;
}

.indicator-usage-copy,
.indicator-usage-example {
  color: #26342f;
  font-size: 13px;
  line-height: 1.45;
}

.indicator-usage-example {
  color: var(--muted);
}

.themes-table {
  min-width: 520px;
}

.theme-sips-table {
  min-width: 1080px;
}

.theme-indicators-table {
  min-width: 900px;
}

.grouped-table {
  min-width: 1160px;
}

.financial-table {
  min-width: 1120px;
}

.indicator-profile-layout th,
.indicator-profile-layout td {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
}

.indicator-profile-layout th {
  font-size: 11px;
}

.indicator-profile-layout td strong {
  font-weight: 750;
}

.number-cell {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

.sources-table th:first-child,
.sources-table td:first-child,
.sources-table th:nth-child(3),
.sources-table td:nth-child(3),
.sources-table th:nth-child(4),
.sources-table td:nth-child(4) {
  white-space: nowrap;
}

.indicator-profile-layout .fact dt {
  width: auto;
}

/* Back button (detail pages) */
.back-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.back-button:hover,
.back-button:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  text-decoration: none;
  outline: none;
}

.back-button-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

.back-button:hover .back-button-icon {
  transform: translateX(-2px);
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}

.profile-layout.indicator-section-layout {
  grid-template-columns: minmax(0, 4fr) minmax(180px, 20%);
  column-gap: 18px;
  align-items: stretch;
}

.profile-layout > * {
  min-width: 0;
}

.stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
}

.org-profile-main {
  min-width: 0;
}

.org-profile-rail {
  display: grid;
  align-content: start;
  gap: 12px;
}

.org-profile-note {
  font-size: 12px;
  line-height: 1.45;
}

.profile-intro-body {
  display: grid;
  gap: 12px;
}

.profile-intro-body p,
.report-extract-body p {
  max-width: 840px;
  margin: 0;
  color: #26342f;
  font-size: 16px;
  line-height: 1.55;
}

.profile-intro-body p:first-child {
  font-size: 17px;
  font-weight: 650;
}

.profile-theme-grid,
.profile-indicator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-theme-card,
.profile-indicator-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 16px;
}

.profile-theme-card {
  display: grid;
  align-content: start;
  gap: 10px;
}

.profile-theme-card .chip-row {
  margin: 0;
}

.profile-theme-card p,
.profile-indicator-card p {
  margin: 0;
  color: #26342f;
  font-size: 14px;
  line-height: 1.45;
}

.profile-indicator-card {
  display: grid;
  gap: 9px;
}

.profile-indicator-card-head {
  display: grid;
  gap: 5px;
}

.profile-indicator-card-head .name-link {
  font-weight: 800;
  line-height: 1.25;
}

.profile-indicator-card-head span,
.profile-indicator-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.profile-card-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-card-list li {
  position: relative;
  padding-left: 14px;
  color: #40524b;
  font-size: 13px;
  line-height: 1.4;
}

.profile-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.finance-profile-body,
.profile-narrative-body {
  display: grid;
  gap: 16px;
}

.finance-summary-copy,
.profile-section-copy {
  display: grid;
  gap: 10px;
  max-width: 880px;
}

.finance-summary-copy p,
.profile-section-copy p {
  margin: 0;
  color: #26342f;
  font-size: 15px;
  line-height: 1.55;
}

.finance-group-stack {
  display: grid;
  gap: 10px;
}

.finance-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}

.finance-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 13px 16px;
  cursor: pointer;
  color: var(--text);
  font-size: 15px;
  font-weight: 850;
}

.finance-group summary strong {
  color: var(--green);
  font-size: 13px;
  white-space: nowrap;
}

.finance-table-wrap,
.source-documents-table-wrap {
  border-top: 1px solid var(--border);
}

.finance-table,
.source-documents-table {
  min-width: 880px;
}

.finance-table th,
.finance-table td,
.source-documents-table th,
.source-documents-table td {
  padding: 10px 12px;
  font-size: 13px;
}

.profile-narrative-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-narrative-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  padding: 14px;
}

.profile-narrative-card span {
  display: block;
  margin-bottom: 7px;
  color: var(--green);
  font-size: 13px;
  font-weight: 850;
}

.profile-narrative-card p {
  margin: 0;
  color: #26342f;
  font-size: 14px;
  line-height: 1.45;
}

.profile-narrative-card p + p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.report-extract-panel {
  overflow: hidden;
}

.report-extract-body {
  display: grid;
  gap: 14px;
}

.report-structured-table-wrap {
  margin-top: 2px;
}

.report-structured-table {
  min-width: 980px;
}

.report-structured-table.is-narrow {
  min-width: 0;
  width: 100%;
}

/* Key/value extract (e.g. Area of expertise) — fills width, no sideways scroll. */
.report-defs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.report-def {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.report-def-term {
  display: block;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
}

.report-def-desc {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

@media (max-width: 620px) {
  .report-defs {
    grid-template-columns: minmax(0, 1fr);
  }
}

.report-structured-table th,
.report-structured-table td,
.profile-universal-table th,
.profile-universal-table td,
.profile-stats-table th,
.profile-stats-table td,
.profile-impact-table th,
.profile-impact-table td {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
}

.report-structured-table th,
.profile-universal-table th,
.profile-stats-table th,
.profile-impact-table th {
  font-size: 11px;
}

.table-footnote {
  padding: 9px 12px 0;
  color: var(--muted);
  font-size: 12px;
}

.round-coverage-stack,
.round-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.round-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 15px 16px;
  background: #fff;
}

.round-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.round-card-content {
  min-width: 0;
}

.round-card-header span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.round-card-header h3 {
  margin: 3px 0 0;
  color: var(--green);
  font-size: 22px;
  line-height: 1.1;
}

.round-card-marker {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--surface-green);
  color: var(--green);
}

.round-icon {
  display: block;
  width: 18px;
  height: 18px;
  color: currentColor;
  flex: 0 0 auto;
}

.round-card-marker .round-icon {
  width: 21px;
  height: 21px;
}

.round-badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.round-badge-row span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 9px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.round-card p {
  margin: 0;
  color: #26342f;
  font-size: 15px;
  line-height: 1.5;
}

.round-update-list {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.round-update-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(207, 218, 212, 0.68);
}

.round-update-row:first-child {
  border-top: 0;
}

.round-update-row strong {
  color: var(--green);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 850;
}

.round-update-row span {
  color: #26342f;
  font-size: 14px;
  line-height: 1.45;
}

.round-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 16px 0 0;
}

.round-detail-grid > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  min-width: 0;
}

.round-detail-grid .round-icon {
  grid-row: 1 / span 2;
  margin-top: 1px;
  color: var(--green);
}

.round-card dt,
.round-detail-grid dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.round-card dd,
.round-detail-grid dd {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.profile-theme-link-band {
  display: contents;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.round-stat-stack {
  display: grid;
  gap: 10px;
}

.round-stat-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}

.round-stat-group summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  padding: 0 16px;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-weight: 800;
}

.round-stat-group summary::-webkit-details-marker {
  display: none;
}

.round-stat-group summary strong {
  margin-left: auto;
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--surface-green);
  color: var(--green);
  font-size: 13px;
  white-space: nowrap;
}

.round-stat-group summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.round-stat-group[open] summary {
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.round-stat-group[open] summary::after {
  transform: rotate(225deg);
}

.profile-stats-table {
  min-width: 1180px;
  background: #fff;
}

.profile-stats-table td:nth-child(3),
.profile-stats-table td:nth-child(4),
.profile-stats-table td:nth-child(5),
.profile-stats-table td:nth-child(6),
.profile-impact-table td:nth-child(2),
.profile-impact-table td:nth-child(3) {
  white-space: nowrap;
}

.profile-universal-table {
  min-width: 1040px;
}

.profile-impact-table {
  min-width: 920px;
}

.impact-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.impact-metric-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--surface-soft);
}

.impact-metric-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.impact-metric-card strong {
  display: block;
  margin-top: 7px;
  color: var(--green);
  font-size: 30px;
  line-height: 1;
  font-weight: 850;
}

.impact-metric-card p {
  margin: 9px 0 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.impact-metric-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.fact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fact {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--surface-soft);
}

.fact:last-child {
  padding-bottom: 12px;
}

.fact dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fact dd {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.source-doc-list {
  display: grid;
  gap: 12px;
}

.source-doc-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.source-doc-card-header {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.source-doc-card-header > div {
  min-width: 0;
}

.source-doc-card-header h3 {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.source-doc-card-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.source-doc-id {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.source-doc-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.source-doc-field {
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.source-doc-field:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.source-doc-field dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.source-doc-field dd {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.source-doc-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 11px;
  color: var(--muted);
  font-size: 12px;
}

.notice {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--surface-soft);
  color: var(--muted);
}

.geo-panel {
  overflow: hidden;
}

.geo-panel .panel-body {
  padding: var(--space-4) var(--panel-gutter) 18px;
}

.geo-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.geo-summary strong {
  display: block;
  color: var(--text);
  font-size: 22px;
  line-height: 1.15;
}

.geo-summary span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.geo-badge {
  min-width: 48px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-green);
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.geo-map-wrap {
  margin: 10px -6px 6px;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.sa-map {
  display: block;
  width: 100%;
  min-height: 250px;
  aspect-ratio: 46 / 35;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  background: var(--surface-soft);
  isolation: isolate;
}

.sa-map-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 250px;
}

.sa-map-loading,
.sa-map-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.province-group {
  outline: none;
}

.province-shape {
  fill: #eef1ef;
  stroke: #ffffff;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  transition: fill 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.province-shape.is-active {
  fill: var(--accent);
  filter: drop-shadow(0 7px 12px rgba(217, 123, 31, 0.28));
}

.geo-panel-aggregate .province-shape.level-1 {
  fill: #fbe1c6;
}

.geo-panel-aggregate .province-shape.level-2 {
  fill: #f7bf88;
}

.geo-panel-aggregate .province-shape.level-3 {
  fill: #f29d4c;
}

.geo-panel-aggregate .province-shape.level-4 {
  fill: #dd7d1f;
}

.province-group:hover .province-shape,
.province-group:focus .province-shape {
  fill: var(--accent-strong);
}

.province-group:not(.is-active):hover .province-shape,
.province-group:not(.is-active):focus .province-shape {
  fill: #f3e2cf;
}

.province-label {
  fill: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.province-label.is-active {
  fill: var(--primary-ink);
}

.geo-hover-copy {
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--muted);
  font-size: 13px;
}

.province-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.province-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.geo-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.geo-profile-copy {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  max-width: 860px;
}

.geo-profile-copy p {
  margin: 0;
  color: #26342f;
  font-size: 15px;
  line-height: 1.5;
}

.geo-place-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.geo-place-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 12px;
}

.geo-place-card span {
  display: block;
  margin-bottom: 5px;
  color: var(--green);
  font-size: 12px;
  font-weight: 850;
}

.geo-place-card strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.geo-place-card p,
.geo-place-card small {
  display: block;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.province-rank-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.province-rank-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(74px, 0.9fr) 24px;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
}

.province-rank-row span:first-child {
  color: var(--text);
  font-weight: 650;
}

.province-rank-row .bar-track {
  height: 7px;
}

.province-rank-row .bar-fill {
  background: var(--accent);
}

.province-rank-row strong {
  color: var(--text);
  font-size: 12px;
  text-align: right;
}

.footer {
  margin-top: 48px;
  background: var(--primary);
  color: var(--on-dark);
  box-shadow: inset 0 3px 0 var(--accent);
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 52px 24px 24px;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 40px 72px;
  align-items: start;
  padding-bottom: 40px;
}

.footer-brand {
  max-width: 380px;
}

.footer-logo {
  height: 44px;
  width: auto;
  display: block;
}

.footer-logo-pes {
  height: 52px;
}

.footer-tagline {
  margin: 20px 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-dark);
}

.footer-lede {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

.footer-snapshot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--on-dark-muted);
}

.footer-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(248, 158, 78, 0.2);
}

.footer-heading {
  display: block;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: rgba(244, 246, 245, 0.5);
}

.footer-nav {
  display: grid;
  gap: 11px;
  white-space: nowrap;
}

.footer-nav a {
  color: var(--on-dark);
  font-size: 13.5px;
  font-weight: 500;
  transition: color 0.16s ease, padding-left 0.16s ease;
}

.footer-nav a:hover {
  color: var(--accent);
  padding-left: 3px;
  text-decoration: none;
}

.footer-partner {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-copyright {
  margin: 0;
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--on-dark-muted);
}

.footer-fineprint {
  margin: 0;
  flex: 1 1 420px;
  max-width: 640px;
  text-align: right;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(244, 246, 245, 0.45);
}

@media (max-width: 860px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-fineprint {
    text-align: left;
  }
}

.error-state {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 24px;
  color: var(--danger);
}

/* Full-screen green splash while the published data loads. */
.loading-state {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--primary);
}

.loading-inner {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.loading-logo {
  height: 62px;
  width: auto;
}

.loading-title {
  margin: 6px 0 0;
  color: var(--on-dark);
  font-size: 15px;
  font-weight: 700;
}

.loading-title span {
  display: block;
  margin-top: 4px;
  color: var(--on-dark-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.loading-note {
  margin: 4px 0 0;
  color: var(--on-dark-muted);
  font-size: 13.5px;
  animation: loading-pulse 1.4s ease-in-out infinite;
}

@keyframes loading-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-note { animation: none; }
}

.empty {
  padding: 32px 18px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 980px) {
  :root {
    --site-header-height: 112px;
    --sticky-top: 126px;
    --scroll-offset: 138px;
  }

  .page-hero-stats,
  .page-hero-stats.is-6up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 0;
  }

  .nav {
    width: 100%;
    overflow-x: auto;
    min-height: 44px;
    gap: 0;
  }

  .nav-link {
    box-sizing: border-box;
    flex: 0 0 20%;
    width: 20%;
    max-width: 20%;
    padding: 0;
    justify-content: center;
    min-width: 0;
  }

  .header-actions {
    display: none;
  }

  .dashboard-grid,
.dashboard-map-grid,
.dashboard-command-grid,
.dashboard-two-column,
.dashboard-command-library-grid,
.portfolio-map-body,
.library-visual-grid,
.indicator-visual-grid,
.theme-visual-grid,
.library-breakdown-grid,
.theme-detail-layout,
.indicator-section-layout,
.profile-layout,
.round-card-grid,
.list-grid{
    grid-template-columns: 1fr;
  }

  .profile-layout.indicator-section-layout {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .profile-library-panel-header {
    display: grid;
    align-items: start;
  }

  .profile-library-toolbar {
    width: 100%;
    margin-top: 0;
  }

  .profile-library-toolbar .control {
    flex: 1 1 220px;
  }

  .indicator-section-rail {
    position: fixed;
    left: 20px;
    right: 20px;
    top: var(--sticky-top);
    align-self: start;
    width: auto;
    min-width: 0;
    min-height: auto;
    z-index: 65;
    order: -1;
  }

  .indicator-section-card {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 9px;
    border-radius: 999px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .indicator-section-rail.is-docked .indicator-section-card {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    background: transparent;
  }

  .indicator-section-rail {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .indicator-section-rail.is-docked {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .section-nav-eyebrow {
    margin-bottom: 6px;
  }

  .section-nav-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .section-nav-list::-webkit-scrollbar {
    display: none;
  }

  .section-nav-link {
    flex: 0 0 auto;
    min-height: 32px;
    border-radius: 999px;
    padding: 0 11px;
  }

  .theme-side-rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .profile-layout > aside.stack {
    order: -1;
  }

  .indicator-profile-layout > aside.stack {
    order: 0;
  }

    .indicator-profile-field-grid,
  .indicator-use-theme-grid {
    grid-template-columns: 1fr;
  }

  .panel-header {
    align-items: flex-start;
    flex-direction: column;
    max-width: 100%;
  }

  .dashboard-command-grid,
  .dashboard-two-column,
  .dashboard-command-library-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-secondary-column {
    position: static;
  }

  .dashboard-secondary-column .dashboard-command-geo {
    position: static;
  }

    .dashboard-profile-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portfolio-map-body::before,
  .portfolio-map-body::after {
    display: none;
  }

  .portfolio-matrix-col {
    justify-self: stretch;
    width: 100%;
  }

  .panel-header > div,
  .panel-title,
  .panel-subtitle {
    width: 100%;
    max-width: 100%;
  }

  .panel-title {
    word-break: break-word;
  }

  .panel,
  .table-wrap {
    max-width: 100%;
  }

  .theme-indicator-panel {
    overflow: hidden;
  }

  .report-body {
    max-width: none;
  }

  .text-button {
    white-space: normal;
  }

  .indicator-library-toolbar,
  .profile-library-toolbar {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  .indicator-section-rail.org-profile-rail,
  .indicator-section-rail.org-profile-rail.is-docked {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    min-width: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    order: -1;
    gap: 8px;
  }

  .org-profile-rail .indicator-section-card,
  .org-profile-rail.is-docked .indicator-section-card {
    border-radius: 18px;
  }

  .org-profile-note {
    display: none;
  }
}

@media (max-width: 640px) {
  :root {
    --site-header-height: 106px;
    --sticky-top: 118px;
    --scroll-offset: 130px;
  }

  /* The title clamps already pin at 34px here, so no font-size override. */
  .page-hero {
    gap: 18px;
    padding-bottom: 24px;
    margin-bottom: 22px;
  }

  .profile-map-hero {
    min-height: 0;
    margin: -28px -16px 22px;
    padding: 34px 16px 24px;
  }

  .profile-map-hero .back-button,
  .profile-map-hero .page-hero-copy,
  .profile-map-hero .page-hero-meta {
    max-width: none;
  }

  .profile-hero-map {
    display: none;
  }

  .page-hero-meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* No room for a logo beside the name at this width, so the lockup wraps
     and the mark sits above it. Four measures side by side become two. */
  .profile-hero-lockup {
    flex-wrap: wrap;
    gap: 14px;
  }

  .sip-logo {
    width: 58px;
    height: 58px;
    padding: 7px;
  }

  .profile-hero-panel {
    padding: 20px 18px 18px;
    border-radius: var(--radius);
  }

  .profile-hero-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
  }

  .profile-hero-rail-item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .profile-hero-masthead {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-hero-stats,
  .page-hero-stats.is-6up {
    grid-template-columns: 1fr;
  }

  .main {
    width: 100%;
    max-width: 100%;
    padding: 28px 16px 48px;
  }

  .main.has-jump-bar {
    padding-bottom: 120px;
  }

  .indicator-section-rail {
    left: 12px;
    right: 12px;
  }

  .jump-target {
    scroll-margin-top: var(--scroll-offset);
  }

  .jump-bar {
    bottom: 12px;
    width: calc(100vw - 24px);
    border-radius: 18px;
  }

  .jump-bar-inner {
    justify-content: flex-start;
    padding: 6px;
  }

  .jump-link {
    min-height: 32px;
    padding: 0 11px;
    font-size: 12px;
  }

  .brand-mark {
    font-size: 28px;
  }

  .brand-lockup {
    min-width: 0;
  }

  .nav-link {
    box-sizing: border-box;
    flex: 0 0 20% !important;
    width: 20% !important;
    max-width: 20% !important;
    padding: 0 !important;
    font-size: 10px;
    justify-content: center;
    min-width: 0;
  }

  .nav {
    display: flex;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

          .metric-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .metric-card,
  .panel,
  .item-card {
    max-width: 100%;
  }

  .dashboard-grid > .stack,
  .dashboard-map-grid > .stack,
  .dashboard-command-grid > *,
  .dashboard-two-column > *,
  .geo-panel {
    width: 100%;
    max-width: calc(100vw - 32px);
  }

  .dashboard-profile-preview {
    grid-template-columns: 1fr;
  }

  .dashboard-library-head {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .dashboard-compact-library .dashboard-library-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-library-head .text-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .dashboard-footnote {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-footnote strong {
    white-space: normal;
  }

  .mini-table-head {
    display: none;
  }

  .coverage-table,
  .evidence-list,
  .dashboard-profile-table,
  .dashboard-indicator-preview,
  .dashboard-theme-preview,
  .dashboard-source-preview {
    overflow-x: auto;
  }

  .coverage-row,
  .coverage-head {
    min-width: 600px;
  }

  .evidence-list-row,
  .evidence-list-head {
    min-width: 460px;
  }

  .library-profile-row,
  .compact-indicator-row,
  .compact-theme-row,
  .compact-source-row {
    min-width: 520px;
  }

  .mini-indicator-row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  .mini-indicator-source,
  .mini-indicator-meter {
    display: none;
  }

  .mini-theme-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mini-theme-row .inline-meter {
    display: none;
  }

  .portfolio-family-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .portfolio-family-row .inline-meter {
    display: none;
  }

  .theme-carousel-card {
    flex-basis: min(280px, calc(100vw - 80px));
    width: min(280px, calc(100vw - 80px));
  }

      .indicator-section-rail,
.indicator-section-card,
.indicator-overview-panel,
.indicator-guidance-panel,
.indicator-data-panel,
.profile-intro-panel,
.report-extract-panel{
    width: 100%;
    max-width: 100%;
  }

        .indicator-coverage-tiles{
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
  }

  .family-filter-grid {
    grid-template-columns: 1fr;
  }

  .indicator-overview-body,
  .indicator-guidance-body,
  .profile-intro-body,
  .report-extract-body {
    width: 100%;
    max-width: 100%;
  }

  .profile-theme-grid,
  .profile-indicator-grid,
  .profile-narrative-grid,
  .geo-place-grid {
    grid-template-columns: 1fr;
  }

  .profile-theme-card,
  .profile-indicator-card,
  .profile-narrative-card,
  .geo-place-card {
    width: 100%;
    max-width: 100%;
  }

  .indicator-definition-card,
  .guidance-callout,
  .indicator-detail-grid > div,
  .guidance-item {
    width: calc(100vw - 96px);
    max-width: calc(100vw - 96px);
  }

  .indicator-definition-card p,
  .guidance-callout p,
  .indicator-detail-grid strong,
  .guidance-item strong {
    width: calc(100vw - 120px);
    max-width: calc(100vw - 120px);
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .indicator-detail-grid,
  .guidance-grid {
    grid-template-columns: 1fr;
  }

  .profile-layout .panel {
    overflow: hidden;
  }

  .panel-subtitle,
  .geo-hover-copy,
  .geo-profile-copy,
  .geo-place-card,
  .province-list,
  .province-pill,
  .round-card,
  .round-card p,
  .round-card dd,
  .round-stat-group summary,
  .profile-intro-body p,
  .finance-summary-copy p,
  .profile-section-copy p,
  .profile-card-list li,
  .profile-narrative-card p,
  .report-extract-body p,
  .report-body {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .finance-group summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .round-card-header,
  .round-stat-group summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .round-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px;
  }

  .round-card-marker {
    width: 40px;
    height: 40px;
  }

  .round-badge-row {
    justify-content: flex-start;
  }

  .round-detail-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .fact-list,
  .impact-metric-grid {
    grid-template-columns: 1fr;
  }

  .round-update-row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
  }

  .profile-theme-link-band {
    display: contents;
    padding: 0;
  }

  .report-body {
    padding: 18px var(--panel-gutter) 22px;
  }

  .report-body h2 {
    font-size: 20px;
  }

  .report-meta-badge {
    white-space: normal;
  }

  .geo-map-wrap,
  .province-list,
  .source-doc-list {
    overflow: hidden;
  }

  .source-doc-fields {
    grid-template-columns: 1fr;
  }

  .source-doc-field:nth-child(odd) {
    border-right: 0;
  }

  .source-doc-card-header p,
  .source-doc-footer,
  .source-doc-footer span {
    overflow-wrap: anywhere;
  }

  .source-doc-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .geo-map-wrap {
    margin-left: 0;
    margin-right: 0;
  }

  .panel-header{
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbar,
  .control,
  .control.search {
    width: 100%;
  }

  .bar-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .fact {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  th,
  td {
    padding: 11px 12px;
  }
}

/* ------------------------------------------------------------------ *
 * Coverage — Kwantu locality explorer.  The map deliberately uses an open
 * workspace and a narrow data rail rather than the card-heavy dashboard grid.
 * ------------------------------------------------------------------ */
.coverage-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(340px, 0.86fr);
  gap: 18px;
  align-items: start;
}

.coverage-map-column,
.coverage-rail,
.coverage-bottom-grid > * { min-width: 0; }

.coverage-map-column {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--primary-ink);
  box-shadow: var(--shadow);
}

.coverage-map-toolbar {
  min-height: 52px;
  padding: 10px 14px 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--on-dark);
  font-size: 13px;
}

.coverage-map-toolbar strong { color: #fff; font-variant-numeric: tabular-nums; }

.coverage-reset {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  background: transparent;
  color: var(--on-dark);
  font-size: 12px;
  font-weight: 750;
}

.coverage-reset:hover,
.coverage-reset:focus-visible { border-color: var(--accent); background: var(--accent); color: var(--primary-ink); outline: none; }

.coverage-map { height: min(67vh, 680px); min-height: 520px; }
.coverage-map .maplibregl-ctrl-top-left { top: 12px; left: 12px; }
.coverage-map .maplibregl-ctrl-group { border: 0; box-shadow: var(--shadow-sm); }
.coverage-map .maplibregl-ctrl-group button { width: 32px; height: 32px; }
.coverage-map .maplibregl-ctrl-attrib { background: rgba(255,255,255,0.78); font-size: 10px; }

.coverage-popup { display: grid; gap: 5px; min-width: 200px; max-height: min(360px, 50vh); overflow-y: auto; padding-right: 3px; color: var(--text); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.coverage-popup strong { font-size: 13px; line-height: 1.25; }
.coverage-popup span,
.coverage-popup small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.coverage-popup .coverage-popup-sip { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 700; }
.coverage-popup-sip a { color: var(--primary); }
.coverage-popup-theme { padding-top: 3px; }
.coverage-popup-theme b { color: var(--accent-ink); }
.coverage-popup i { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.coverage-popup-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; padding-top: 9px; border-top: 1px solid var(--border); }
.coverage-popup-actions button,
.coverage-popup-actions a { min-height: 30px; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--primary-ink); font: inherit; font-size: 11px; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; }
.coverage-popup-actions button { border: 1px solid var(--primary); background: var(--primary); color: #fff; }
.coverage-popup-actions a { border: 1px solid var(--border-strong); background: var(--surface); }
.coverage-popup-actions button:hover { background: var(--primary-80); }
.coverage-popup-actions a:hover { border-color: var(--accent); color: var(--accent-ink); }
.coverage-popup-actions button:focus-visible,
.coverage-popup-actions a:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.maplibregl-popup { pointer-events: auto; }
.maplibregl-popup-content { padding: 12px 14px; border-radius: 10px; box-shadow: var(--shadow); }

.coverage-rail {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.coverage-rail-head { padding: 19px var(--panel-gutter) var(--space-4); border-bottom: 1px solid var(--border); }
.coverage-rail-head h2,
.coverage-rail-section-head h2 { margin: 0; color: var(--primary-ink); font-size: 16px; line-height: 1.2; }
.coverage-rail-head p { margin: 7px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

.coverage-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); }
.coverage-filter { position: relative; min-width: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.coverage-filter summary { min-height: 38px; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--text); cursor: pointer; list-style: none; font-size: 12px; font-weight: 750; }
.coverage-filter summary::-webkit-details-marker { display: none; }
.coverage-filter summary::after { content: ""; width: 6px; height: 6px; margin-left: 3px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); }
.coverage-filter[open] summary { border-bottom: 1px solid var(--border); }
.coverage-filter[open] summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.coverage-filter summary b { margin-left: auto; color: var(--accent-ink); font-size: 10px; font-weight: 800; white-space: nowrap; }
.coverage-filter-options { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 22; max-height: 218px; overflow: auto; padding: 6px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow); }
.coverage-filter-options label { display: flex; align-items: flex-start; gap: 7px; padding: 7px; border-radius: var(--radius-sm); color: var(--text); font-size: 11.5px; line-height: 1.25; cursor: pointer; }
.coverage-filter-options label:hover { background: var(--surface-soft); }
.coverage-filter-options input { accent-color: var(--accent-strong); margin: 1px 0 0; }

.coverage-search { grid-column: 1 / -1; display: grid; gap: 5px; color: var(--text); font-size: 11px; font-weight: 800; }
.coverage-search input { width: 100%; min-width: 0; height: 38px; border: 1px solid var(--border); border-radius: 9px; padding: 0 10px; background: var(--surface-soft); color: var(--text); font-size: 12px; outline: none; }
.coverage-search input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }

.coverage-legend { padding: 16px 0 0; }
.coverage-rail-section-head { padding: 0 var(--panel-gutter) 11px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.coverage-rail-section-head span { color: var(--muted); font-size: 11px; font-weight: 700; }
.coverage-legend-table { border-top: 1px solid var(--border); }
.coverage-legend-head,
.coverage-legend-row { display: grid; grid-template-columns: minmax(110px, 1fr); gap: 8px; padding: 10px 14px; }
.coverage-legend-head { color: var(--muted); background: var(--surface-soft); font-size: 9.5px; font-weight: 800; letter-spacing: 0.045em; text-transform: uppercase; }
.coverage-legend-body { max-height: 334px; overflow: auto; }
.coverage-legend-row { align-items: center; border-bottom: 1px solid var(--border); color: var(--text); font-size: 11px; }
.coverage-legend-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coverage-legend-row > span:first-child { display: flex; align-items: center; gap: 7px; font-weight: 750; }
.coverage-legend-row a { color: var(--primary); text-decoration: none; }
.coverage-legend-row a:hover { color: var(--accent-ink); text-decoration: underline; }
.coverage-swatch { width: 11px; height: 11px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.12); border-radius: 3px; }
.coverage-empty { margin: 0; padding: var(--space-5) var(--panel-gutter); color: var(--muted); font-size: 13px; text-align: center; }

.coverage-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: 18px; }
.coverage-detail-panel,
.coverage-context-panel,
.coverage-results-panel { height: 100%; }
.coverage-detail-panel .panel-header { align-items: flex-start; }
.coverage-participants { flex: 0 0 auto; border-radius: var(--radius-sm); padding: 7px 9px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 800; }
.coverage-eyebrow { display: block; margin-bottom: 5px; color: var(--accent-ink); font-size: 10px; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
.coverage-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.coverage-programme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.coverage-detail-grid > div { min-width: 0; padding: 15px var(--panel-gutter); border-right: 1px solid var(--border); }
.coverage-detail-grid > div:last-child { border-right: 0; }
.coverage-detail-grid span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: 0.055em; text-transform: uppercase; }
.coverage-detail-grid strong { display: block; color: var(--primary-ink); font-size: 14px; line-height: 1.35; }
.coverage-detail-grid small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.coverage-round-allocation { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 18px; margin: 0 var(--panel-gutter) var(--space-4); padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; }
.coverage-round-allocation > span:nth-child(-n + 2) { padding-bottom: 6px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: 0.055em; text-transform: uppercase; }
.coverage-round-allocation strong,
.coverage-round-allocation > span:not(:nth-child(-n + 2)) { padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent); }
.coverage-round-allocation strong { color: var(--primary-ink); text-align: right; font-variant-numeric: tabular-nums; }

.coverage-context-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--border); }
.coverage-sip-profile { padding: 18px var(--panel-gutter); background: var(--surface); }
.coverage-sip-profile h3 { margin: 0 0 15px; color: var(--primary-ink); font-size: 16px; line-height: 1.25; }
.coverage-sip-profile h3 a { color: inherit; }
.coverage-contact-list { display: grid; gap: 10px; margin: 0; }
.coverage-contact-list div { display: grid; gap: 2px; }
.coverage-contact-list dt { color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.coverage-contact-list dd { margin: 0; color: var(--text); font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }
.coverage-contact-list dd a { color: var(--primary); }
.coverage-view-profile { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--accent-ink); font-size: 12px; font-weight: 850; }
.coverage-view-profile .icon { width: 14px; height: 14px; }
.coverage-profile-note { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

.coverage-participation-panel { margin-top: 18px; overflow: hidden; }
.coverage-participation-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.coverage-participation-kpis > div { min-width: 0; padding: var(--space-4) var(--panel-gutter); border-right: 1px solid var(--border); background: var(--surface-soft); }
.coverage-participation-kpis > div:last-child { border-right: 0; }
.coverage-participation-kpis span { display: block; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.coverage-participation-kpis strong { display: block; margin-top: 7px; color: var(--primary-ink); font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.coverage-allocation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; gap: 18px; padding: 18px var(--panel-gutter); background: var(--surface); }
.coverage-allocation-grid > div { min-width: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.coverage-allocation-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface-soft); border-bottom: 1px solid var(--border); }
.coverage-allocation-head h3 { margin: 0; color: var(--primary-ink); font-size: 14px; }
.coverage-allocation-head span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.coverage-allocation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 12px; }
.coverage-allocation-row:last-child { border-bottom: 0; }
.coverage-allocation-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.coverage-allocation-row strong { color: var(--primary-ink); font-variant-numeric: tabular-nums; }
.coverage-allocation-row small { grid-column: 1 / -1; color: var(--muted); font-size: 10.5px; }
/* A scroll container with no scroll affordance reads as a truncated list. The
   fade tells the reader there is more below without adding a control that would
   imply pagination the data does not have. */
.coverage-sip-allocation-list {
  max-height: 390px;
  overflow: auto;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  scrollbar-width: thin;
}
.coverage-sip-allocation-list:hover { mask-image: none; }
.coverage-sip-allocation-row > span a { color: var(--primary); text-decoration: none; }
.coverage-sip-allocation-row > span a:hover { color: var(--accent-ink); text-decoration: underline; }

.coverage-results-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--panel-gutter); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.coverage-results-count { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.coverage-results-count strong { color: var(--primary-ink); font-variant-numeric: tabular-nums; }
.coverage-results-filters { display: grid; grid-template-columns: repeat(3, minmax(118px, 1fr)); gap: 8px; flex: 1 1 540px; max-width: 620px; }
.coverage-results-table { border-top: 0; }
.coverage-results-head,
.coverage-result-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(100px, 0.85fr) 76px 86px; gap: var(--space-3); width: 100%; padding: 11px var(--panel-gutter); text-align: left; }
.coverage-results-head { color: var(--muted); background: var(--surface-soft); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.coverage-result-row { contain-intrinsic-size: auto 44px; content-visibility: auto; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; }
.coverage-result-row > button { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coverage-result-row > a,
.coverage-result-row > span { min-width: 0; color: var(--primary); font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coverage-result-row > a:hover { color: var(--accent-ink); }
.coverage-result-row:hover,
.coverage-result-row.is-selected { background: var(--accent-soft); outline: none; }
.coverage-result-row > button:focus-visible,
.coverage-result-row > a:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.coverage-result-row > button:last-child { font-variant-numeric: tabular-nums; font-weight: 800; text-align: right; }
.coverage-results-note,
/* Two uses: a footnote inside the participation panel, and a page-level note
   under the map. The second rule used to zero the padding for both, which is
   why the panel footnote sat outside the panel's left edge. */
.coverage-source-note { margin: 0; padding: 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.panel > .coverage-source-note { padding: 13px var(--panel-gutter); }

.profile-coverage-map-shell { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.profile-coverage-map-meta { padding: 10px 13px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11.5px; font-weight: 750; }
.profile-coverage-map { height: 400px; min-height: 320px; }
.profile-coverage-map .maplibregl-ctrl-top-left { top: 10px; left: 10px; }
.profile-coverage-map .maplibregl-ctrl-group { border: 0; box-shadow: var(--shadow-sm); }
.profile-coverage-map .maplibregl-ctrl-group button { width: 32px; height: 32px; }
.profile-coverage-map .maplibregl-ctrl-attrib { background: rgba(255,255,255,0.78); font-size: 10px; }
.profile-coverage-empty { margin: 0; padding: 32px 18px; color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 980px) {
  .coverage-workspace,
  .coverage-bottom-grid,
  .coverage-allocation-grid { grid-template-columns: 1fr; }
  .coverage-rail { max-width: none; }
  .coverage-map { height: 60vh; min-height: 440px; }
}

@media (max-width: 640px) {
  .coverage-map-toolbar { align-items: flex-start; flex-direction: column; }
  .coverage-map { height: 56vh; min-height: 390px; }
  .coverage-filters { grid-template-columns: 1fr; }
  .coverage-results-controls { align-items: stretch; flex-direction: column; padding: var(--space-3) var(--panel-gutter); }
  .coverage-results-filters { grid-template-columns: 1fr; max-width: none; }
  .coverage-detail-grid { grid-template-columns: 1fr; }
  .coverage-detail-grid > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .coverage-detail-grid > div:last-child { border-bottom: 0; }
  .coverage-legend-head,
  .coverage-legend-row { grid-template-columns: minmax(120px, 1fr); }
  .coverage-results-head,
  .coverage-result-row { grid-template-columns: minmax(0, 1fr) 66px; padding: 11px var(--panel-gutter); }
  .coverage-results-head span:nth-child(2),
  .coverage-result-row > :nth-child(2),
  .coverage-results-head span:nth-child(3),
  .coverage-result-row > :nth-child(3) { display: none; }
  .coverage-results-panel .panel-header { padding: 17px var(--panel-gutter); }
  .coverage-participation-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage-participation-kpis > div:nth-child(2) { border-right: 0; }
  .coverage-participation-kpis > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .coverage-allocation-grid { padding: var(--space-4) var(--panel-gutter); }
  .profile-coverage-map { height: 340px; min-height: 300px; }
}

/* --- v2: sub-theme index, sub-theme detail, and sources downloads --------- */
.subtheme-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.subtheme-index-group {
  display: grid;
  gap: 10px;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-soft);
}

.subtheme-index-theme {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.subtheme-index-theme:hover .subtheme-index-name,
.subtheme-index-theme:focus-visible .subtheme-index-name {
  color: var(--accent-strong);
}

.subtheme-index-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--on-dark, #fff);
}

.subtheme-index-icon .icon {
  width: 17px;
  height: 17px;
}

.subtheme-index-name {
  flex: 1 1 auto;
  min-width: 0;
}

.subtheme-index-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.subtheme-card {
  display: grid;
  gap: 10px;
  align-content: start;
}

.subtheme-card-head h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  color: var(--text);
}

.source-download-card {
  align-content: start;
}

.source-download-action {
  display: flex;
}

.source-download-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--radius-pill, 999px);
  padding: 9px 15px;
  background: var(--accent);
  color: #241a0c;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}

.source-download-button:hover,
.source-download-button:focus-visible {
  background: var(--accent-strong);
}

.source-download-button .icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 640px) {
  .subtheme-index-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Generated per-section summary lede + profile tile grids -------------- */
.panel-lede {
  margin: 6px 0 0;
  max-width: 70ch;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.indicator-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

/* Generated per-section indicator copy, shown above the data tables. */
.indicator-copy-lede {
  margin: 0;
  padding: 18px var(--panel-gutter) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}
.indicator-copy-lede p {
  margin: 0 0 8px;
  max-width: 78ch;
}
.indicator-copy-lede p:last-child {
  margin-bottom: 0;
}

/* --- Theory of Change public layer --------------------------------------- */
.dashboard-toc-panel {
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 10%, rgba(248, 158, 78, 0.2), transparent 34%),
    linear-gradient(135deg, var(--primary) 0%, #46564c 100%);
  border-color: var(--primary);
  color: var(--on-dark);
}

.dashboard-toc-panel .panel-title,
.dashboard-toc-panel .panel-subtitle,
.dashboard-toc-panel .text-button,
.dashboard-toc-panel .toc-dashboard-note {
  color: var(--on-dark);
}

.dashboard-toc-panel .panel-title {
  font-size: 20px;
}

.dashboard-toc-panel .panel-subtitle,
.dashboard-toc-panel .toc-dashboard-note {
  color: var(--on-dark-muted);
}

.dashboard-toc-panel .panel-subtitle {
  font-size: 14px;
}

.dashboard-toc-panel .text-button {
  flex: 0 0 auto;
  border-color: rgba(255, 255, 255, 0.92);
  background: #fff;
  color: var(--primary-ink);
  box-shadow: 0 2px 0 rgba(16, 27, 21, 0.2);
}

.dashboard-toc-panel .text-button:hover,
.dashboard-toc-panel .text-button:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--primary-ink);
  box-shadow: 0 3px 0 rgba(16, 27, 21, 0.24);
}

.toc-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 var(--panel-gutter) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.toc-dashboard-metrics > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 13px 15px;
  border-right: 1px solid rgba(255, 255, 255, 0.17);
}

.toc-dashboard-metrics > div:last-child { border-right: 0; }

.toc-dashboard-metrics strong {
  font-size: 28px;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.toc-dashboard-metrics span {
  color: var(--on-dark-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.toc-dashboard-note {
  max-width: 82ch;
  margin: 0 0 21px;
  font-size: 12px;
  line-height: 1.5;
}

.toc-library-intro { margin: 0 auto 18px; max-width: var(--max); padding: 0 24px; }

.toc-method-note,
.toc-round-notice,
.toc-theme-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.toc-method-note > .icon,
.toc-round-notice > .icon,
.toc-theme-note > .icon {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  color: var(--accent-ink);
}

.toc-method-note p,
.toc-round-notice p,
.toc-theme-note p {
  flex: 1 1 auto;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.toc-method-note .text-button { flex: 0 0 auto; align-self: center; }

.toc-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  gap: 14px;
}

.toc-library-card,
.toc-context-card,
.toc-transition-card {
  display: grid;
  align-content: start;
  gap: 11px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.toc-library-card:hover,
.toc-context-card:hover,
.toc-transition-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.toc-library-card-top,
.toc-context-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.toc-library-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
}

.toc-library-rounds,
.toc-context-card > div:first-child > span:first-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.toc-library-card h2,
.toc-context-card h3,
.toc-context-card h4,
.toc-transition-card h2 {
  margin: 0;
  color: var(--primary-ink);
  font-size: 18px;
  line-height: 1.25;
}

.toc-library-card-top h2 { min-width: 0; }

.toc-library-card h2 a,
.toc-context-card h3 a,
.toc-context-card h4 a { color: inherit; }
.toc-library-card h2 a:hover,
.toc-context-card h3 a:hover,
.toc-context-card h4 a:hover { color: var(--accent-ink); }

.toc-library-card > p,
.toc-context-card > p,
.toc-transition-card > .toc-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.52;
}

.toc-library-stats,
.toc-round-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}

.toc-library-stats span,
.toc-round-stats span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 9px;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
}

.toc-library-stats span:last-child,
.toc-round-stats span:last-child { border-right: 0; }
.toc-library-stats strong,
.toc-round-stats strong { color: var(--primary-ink); font-size: 16px; font-variant-numeric: tabular-nums; }

.toc-library-card .toc-library-stats {
  padding-top: 11px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  overflow: visible;
}

.toc-library-card .toc-library-stats span {
  padding: 0 10px;
}

.toc-library-card .toc-library-stats span:first-child { padding-left: 0; }
.toc-library-card .toc-library-stats strong { font-size: 18px; }

.toc-library-card .text-button {
  justify-self: start;
  margin-top: 1px;
}

.toc-library-status {
  display: grid;
  gap: 3px;
  color: var(--primary);
  font-size: 12px;
  line-height: 1.35;
}

.toc-library-status strong { font-weight: 800; }

.toc-status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid #d9deda;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

.toc-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto 18px;
  padding: 0 24px;
}

.toc-copy { display: grid; gap: 9px; }
.toc-copy p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.58; }

.toc-status-panel { max-width: var(--max); margin: 0 auto 36px; }
.toc-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.toc-status-card { display: grid; align-content: start; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.toc-status-card strong { color: var(--primary-ink); font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.toc-status-card > span:last-child { color: var(--muted); font-size: 12px; }

.toc-profile-panel { overflow: hidden; }
.toc-profile-header { align-items: flex-start; }
.toc-profile-availability {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  color: var(--primary);
  font-size: 13px;
  line-height: 1.35;
}
.toc-profile-availability strong { font-weight: 800; }

.toc-round-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(162px, 1fr));
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.toc-round-tab {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 82px;
  margin: 6px 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}

.toc-round-tab:hover,
.toc-round-tab:focus-visible { background: var(--surface-soft); text-decoration: none; }
.toc-round-tab.is-active { border-color: var(--primary); background: #fff; box-shadow: none; }
.toc-round-tab > span:first-child { color: var(--primary-ink); font-size: 14px; font-weight: 850; }
.toc-round-tab-status { display: grid; gap: 2px; color: var(--primary); font-size: 11px; line-height: 1.3; }
.toc-round-tab-status strong { font-weight: 760; }

.toc-round-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 18px;
  align-items: center;
  margin: 20px 0 22px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.toc-round-overview-heading { display: grid; align-content: center; min-height: 72px; }
.toc-round-overview-heading > span { color: var(--accent-ink); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.toc-round-overview h3 { margin: 4px 0 0; color: var(--primary-ink); font-size: 21px; line-height: 1.2; }
.toc-round-overview .toc-round-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); align-self: center; border: 0; border-radius: 0; overflow: visible; }
.toc-round-overview .toc-round-stats span { padding: 3px 12px; }
.toc-round-overview .toc-round-stats span:first-child { padding-left: 0; }
.toc-round-overview .toc-round-stats strong { font-size: 18px; }

.toc-profile-disclosures { display: grid; gap: 10px; }
.toc-profile-disclosure { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.toc-profile-disclosure > summary { display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; gap: 12px; align-items: center; min-height: 66px; padding: 13px 15px; color: var(--primary-ink); cursor: pointer; list-style: none; }
.toc-profile-disclosure > summary::-webkit-details-marker { display: none; }
.toc-profile-disclosure > summary:hover { background: var(--surface-soft); }
.toc-profile-disclosure > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.toc-profile-disclosure[open] > summary { border-bottom: 1px solid var(--border); }
.toc-profile-disclosure-number { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; }
.toc-profile-disclosure-copy { display: grid; gap: 2px; min-width: 0; }
.toc-profile-disclosure-copy strong { font-size: 15px; line-height: 1.3; }
.toc-profile-disclosure-copy small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.toc-profile-disclosure-chevron { width: 17px; height: 17px; color: var(--primary); transform: rotate(-90deg); transition: transform 0.16s ease; }
.toc-profile-disclosure[open] .toc-profile-disclosure-chevron { transform: rotate(90deg); }
.toc-profile-disclosure-body { padding: 0 15px 5px 57px; }
.toc-profile-detail-list { display: grid; }
.toc-profile-detail-list .toc-detail-card { padding: 13px 0; border: 0; border-radius: 0; border-top: 1px solid var(--border); background: transparent; }
.toc-profile-detail-list .toc-detail-card:first-child { border-top: 0; }
.toc-profile-detail-list .toc-detail-card h3 { margin-bottom: 4px; color: var(--primary-ink); }
.toc-profile-detail-list .toc-detail-card .toc-copy p { font-size: 13px; line-height: 1.5; }
.toc-profile-disclosure-body .toc-linked-block { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--border); }
.toc-profile-disclosure-body .toc-pathway-details { margin-bottom: 10px; }

.toc-detail-grid,
.toc-measurement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.toc-detail-card { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.toc-detail-card h3 { margin: 0 0 7px; color: var(--primary); font-size: 13px; line-height: 1.35; }
.toc-detail-card .toc-copy { gap: 6px; }
.toc-detail-card .toc-copy p { color: var(--text); font-size: 13px; line-height: 1.48; }

.toc-linked-block { margin-top: 16px; }
.toc-linked-block > h3 { margin: 0 0 9px; color: var(--primary-ink); font-size: 14px; }
.toc-linked-details,
.toc-pathway-details { margin-top: 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.toc-linked-details summary,
.toc-pathway-details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; cursor: pointer; color: var(--primary-ink); font-weight: 780; font-size: 13px; }
.toc-linked-details summary span,
.toc-pathway-details summary span { color: var(--muted); font-size: 12px; }
.toc-linked-details > p,
.toc-pathway-details > p { margin: 0; padding: 0 14px 11px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.toc-linked-details ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.toc-linked-details li { display: grid; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.toc-linked-details li:last-child { border-bottom: 0; }
.toc-linked-details li > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.toc-linked-details li small { color: var(--muted); font-size: 11px; font-weight: 650; }
.toc-linked-details li > span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.toc-pathway-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; padding: 0 14px 14px; }
.toc-pathway-list article { display: grid; align-content: start; gap: 8px; padding: 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.toc-pathway-list p { margin: 0; color: var(--text); font-size: 12px; line-height: 1.45; }
.toc-pathway-list .text-button { font-size: 12px; }

.toc-theme-panel .panel-body { display: grid; gap: 15px; }
.toc-context-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 11px; }
.toc-context-card h4 { font-size: 16px; }
.toc-context-card small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.toc-indicator-context-group + .toc-indicator-context-group { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.toc-indicator-context-group h3 { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--primary-ink); font-size: 16px; }
.toc-indicator-context-group h3 span { color: var(--muted); font-size: 12px; font-weight: 700; }
.toc-indicator-context-group > p { max-width: 80ch; margin: 5px 0 12px; color: var(--muted); font-size: 13px; }
.toc-transition-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

@media (max-width: 980px) {
  .toc-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc-dashboard-metrics > div:nth-child(2) { border-right: 0; }
  .toc-dashboard-metrics > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.17); }
  .toc-round-overview { grid-template-columns: 1fr; }
  .toc-round-overview .toc-round-stats { max-width: 650px; }
}

@media (max-width: 700px) {
  .toc-method-grid { grid-template-columns: 1fr; padding: 0 16px; }
  .toc-library-intro { padding: 0 16px; }
  .toc-method-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); }
  .toc-method-note .text-button { grid-column: 2; justify-self: start; }
  .toc-detail-grid,
  .toc-measurement-grid { grid-template-columns: 1fr; }
  .toc-round-overview .toc-round-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc-round-overview .toc-round-stats span { padding: 8px 10px; }
  .toc-round-overview .toc-round-stats span:nth-child(2) { border-right: 0; }
  .toc-round-overview .toc-round-stats span:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .toc-profile-disclosure-body { padding-left: 15px; }
}

@media (max-width: 480px) {
  .toc-dashboard-metrics { margin-left: var(--panel-gutter); margin-right: var(--panel-gutter); }
  .toc-library-grid,
  .toc-context-grid { grid-template-columns: 1fr; }
  .toc-library-stats { grid-template-columns: 1fr; }
  .toc-library-stats span { border-right: 0; border-bottom: 1px solid var(--border); }
  .toc-library-stats span:last-child { border-bottom: 0; }
}

/* Keep the ToC entry view genuinely narrow-screen safe even when a browser
   preserves a wider intrinsic grid measurement from a desktop visit. */
@media (max-width: 640px) {
  .page-hero,
  .page-hero-copy,
  .page-hero-title,
  .page-hero-lede,
  .page-hero-stats,
  .metric-card,
  .toc-library-panel,
  .toc-library-panel .panel-header,
  .toc-library-toolbar,
  .toc-library-toolbar .control,
  .toc-library-grid,
  .toc-library-card {
    min-width: 0;
    max-width: 100%;
  }

  .page-hero-title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(30px, 9vw, 34px);
    overflow-wrap: anywhere;
  }

  .page-hero-stats,
  .page-hero-stats.is-6up,
  .toc-library-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .metric-card { width: 100%; }
  .toc-library-panel-header > div:first-child { flex: 0 1 auto; }
  .toc-library-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 0 1 auto;
    width: 100%;
  }
  .toc-library-toolbar .control.search,
  .toc-library-toolbar #tocRound,
  .toc-library-toolbar #tocAvailability { min-width: 0; }
}

/* --- Verified results ----------------------------------------------------
   The index is a reading surface, not a spreadsheet. Every row carries one
   figure and opens into the sentence that explains it, the quote behind it and
   the values the analysis rejected. The styling follows from that: the figure
   is the largest thing in the row, the prose is set at reading width, and the
   rejected candidates sit visibly alongside the selected one rather than
   behind a separate view.
   ------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.results-method { padding: 18px var(--panel-gutter) var(--space-5); border-left: 3px solid var(--accent); }
.results-method-lede { margin: 6px 0 0; max-width: 88ch; color: var(--text); font-size: 14px; line-height: 1.65; }
.results-method-lede strong { color: var(--primary-ink); }
.results-method-lede + .results-method-lede { margin-top: 10px; }

/* Counts of findings, not sums of what they measure — so the table is plain
   and numeric, with no bars or shading that would imply magnitude. */
.results-shape-table { width: 100%; table-layout: fixed; }
.results-shape-table th:not(:first-child),
.results-shape-table td:not(:first-child) {
  width: 9%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.results-shape-table th:first-child,
.results-shape-table td:first-child { width: auto; overflow-wrap: anywhere; }

.results-toolbar { flex-wrap: wrap; gap: 8px; }
.results-toolbar .control { min-width: 150px; }
.results-toolbar #resultsSearch { min-width: 220px; }

.results-table-panel { min-width: 0; }
/* Vertical only. The index is long, not wide: a reader scanning 4,432 results
   should never have to push the table sideways to find the column that says
   which report a figure came from. */
.results-table-wrap {
  height: min(82vh, 720px);
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  contain: size layout paint;
}

/* Fixed layout is what makes that possible. Left to itself the browser sizes
   these columns to their longest unbroken content — a 60-character indicator
   name, a full date range — and the table grows past its container. Fixed
   layout hands every column a share of the width it actually has and wraps
   what does not fit.

   Every positional rule below excludes [colspan] cells. The expanded detail is
   a single cell spanning the row, which makes it both the first and the last
   child — so an unqualified :last-child rule meant for the Source column hides
   the entire detail panel instead. */
.results-table { width: 100%; min-width: 0; table-layout: fixed; }
.results-table th:nth-child(2), .results-table td:not([colspan]):nth-child(2) { width: 16%; }
.results-table th:nth-child(3), .results-table td:not([colspan]):nth-child(3) { width: 27%; }
.results-table th:nth-child(4), .results-table td:not([colspan]):nth-child(4) { width: 15%; }
.results-table th:nth-child(5), .results-table td:not([colspan]):nth-child(5) { width: 13%; }
.results-table th:nth-child(6), .results-table td:not([colspan]):nth-child(6) { width: 16%; }
.results-table th:last-child, .results-table td:not([colspan]):last-child { width: 13%; }
.results-table th,
.results-table td { overflow-wrap: break-word; }
.results-table td small.result-row-context { display: none; }

/* The whole head sticks as one block, rather than each row sticking at its own
   measured offset. The offset version needed the first row's height in pixels,
   which depends on how many columns wrapped, which depends on the width — so it
   was measured in JS and went stale the moment anything reflowed. */
.results-table thead { position: sticky; top: 0; z-index: 3; }
.results-table th {
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--border);
}
.results-table th small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  white-space: normal;
}
.results-table td { vertical-align: top; font-size: 12.5px; line-height: 1.5; }
.results-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.results-table th:first-child,
.results-table td:not([colspan]):first-child { width: 36px; padding-right: 0; }

.results-filter-row td {
  padding: 6px 8px;
  background: var(--surface-soft);
  box-shadow: inset 0 -1px 0 var(--border);
}
.results-filter-row .control-mini { width: 100%; min-width: 0; }

.result-row > td { border-top: 1px solid var(--border); }
.result-row.is-open > td { background: var(--accent-soft); }

.result-value {
  display: block;
  color: var(--primary-ink);
  font-size: 15px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.result-target { color: var(--muted-2); font-style: italic; }
.result-unit-note { color: var(--muted-2); font-style: italic; }
.result-label { display: block; color: var(--text); }
.result-indicator-link { display: block; margin-top: 4px; color: var(--muted); line-height: 1.35; }

.result-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  padding: 0;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-2);
  cursor: pointer;
}
.result-expand:hover,
.result-expand:focus-visible { border-color: var(--accent); color: var(--accent-ink); }
.result-expand-icon { font-size: 14px; font-weight: 700; line-height: 1; }

.result-detail-row > td { padding: 0; background: var(--surface-soft); border-top: 0; }
/* Two columns, bounded by the row it opens from rather than by a width of its
   own. The cell spans the table, the table spans its container, so nothing here
   can push the page sideways.

   The prose and the facts sit side by side because a single stacked column left
   half the row empty, and the alternative — running one sentence the full
   1,100px — is a 130-character line no one reads to the end of. Two columns use
   the width and keep each line at a length the eye can track. The audit chain
   spans both: its candidate values are a grid of their own. */
.result-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px 32px;
  align-items: start;
  max-width: 100%;
  padding: 18px 22px 20px;
  border-bottom: 1px solid var(--border);
  overflow-wrap: break-word;
}
.result-detail-prose { min-width: 0; }
.result-detail-facts { min-width: 0; }
.result-audit { grid-column: 1 / -1; }
.result-detail-audit-cta { grid-column: 1; }
.result-summary { margin: 0 0 12px; color: var(--text); font-size: 13.5px; line-height: 1.65; }

.result-quote {
  margin: 0 0 12px;
  overflow-wrap: break-word;
  padding: 10px 14px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.6;
}
.result-quote cite {
  display: block;
  margin-top: 6px;
  color: var(--muted-2);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.02em;
}

.result-detail-facts { display: grid; gap: 10px; margin: 0; align-content: start; }
.result-detail-facts > div { display: grid; gap: 2px; align-content: start; }
.result-detail-facts dt {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.result-detail-facts dd { margin: 0; color: var(--text); font-size: 12.5px; line-height: 1.55; }

.result-detail-audit-cta { align-self: start; }
.result-detail-audit-cta p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; }

.result-audit {
  align-self: start;
  min-width: 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.result-audit.is-loading { color: var(--muted); }
.result-audit-head { margin-bottom: 12px; }
.result-audit-reason { margin: 4px 0 0; color: var(--text); font-size: 12.5px; line-height: 1.6; }
.result-audit-scope { margin: 6px 0 0; color: var(--muted-2); font-size: 11.5px; line-height: 1.5; }
.result-audit-count { margin: 0 0 8px; color: var(--muted); font-size: 11.5px; }

.result-audit-resolutions { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; margin-bottom: 14px; }
.result-audit-resolution {
  padding: 10px 12px;
  background: var(--surface-soft);
  border-left: 3px solid var(--danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.result-audit-resolution p { margin: 0; font-size: 12px; line-height: 1.55; }
.result-audit-resolution-type {
  color: var(--danger);
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px !important;
}

/* Every candidate the source offered is listed, and the selected one is marked
   rather than being the only one shown. A reader who wants to disagree with the
   choice can see exactly what was set aside. */
.result-audit-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.result-audit-point {
  padding: 10px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.result-audit-point.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.result-audit-point-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.result-audit-point-value {
  color: var(--primary-ink);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.result-audit-point-meta { margin: 6px 0 0; color: var(--muted-2); font-size: 11px; line-height: 1.45; }
.result-audit-point-raw { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.result-audit-point .result-quote { margin: 8px 0 0; padding: 8px 10px; font-size: 11.5px; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.tag-selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.tag-quiet { border-style: dashed; }

.results-show-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--space-4) var(--panel-gutter);
  border-top: 1px solid var(--border);
}
.results-show-more p { margin: 0; font-size: 12px; }

/* What did not make it onto the page, given the same weight as what did. */
.results-held-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-6); padding: var(--space-1) var(--panel-gutter) var(--space-5); }
.results-held-list,
.results-source-relevance { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.results-source-relevance { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding: var(--space-1) var(--panel-gutter) var(--space-5); }
.results-held-list li,
.results-source-relevance li {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
}
.results-held-count {
  color: var(--primary-ink);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.results-held-label { color: var(--muted); font-size: 12px; line-height: 1.45; }
.results-held-resolutions p { margin: 0 0 8px; font-size: 12px; line-height: 1.55; }
.results-held-resolutions ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.results-held-resolutions ul strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* --- V4 portfolio output totals ----------------------------------------- */

.results-page-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--space-4);
}
.results-page-jumps a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--primary-ink);
  font-size: 12px;
  font-weight: 750;
}
.results-page-jumps a:hover { border-color: var(--accent); text-decoration: none; }
.results-individual-section { display: grid; gap: var(--space-5); margin-top: var(--space-6); }

.portfolio-results-panel .panel-header { padding-bottom: 12px; }
.portfolio-panel-note { margin: 0 0 var(--space-4); padding-inline: var(--gutter); color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.portfolio-results-panel > .text-button { margin: 0 var(--panel-gutter) var(--space-5); }
.portfolio-carousel { position: relative; padding: 0 var(--panel-gutter) var(--space-4); }
.portfolio-carousel-controls { display: flex; justify-content: flex-end; gap: 8px; margin: -2px 0 10px; }
.portfolio-carousel-button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary-ink);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}
.portfolio-carousel-button .icon { width: 17px; height: 17px; }
.portfolio-carousel-button:hover { border-color: var(--accent); background: var(--accent); color: #fff; transform: translateY(-1px); }
.portfolio-carousel-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.portfolio-carousel-viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  border-radius: var(--radius);
}
.portfolio-carousel-viewport::-webkit-scrollbar { display: none; }
.portfolio-carousel-rail { display: flex; gap: 14px; width: max-content; padding: 1px; }
.portfolio-carousel-rail .portfolio-total-card {
  width: clamp(280px, 27vw, 326px);
  min-height: 178px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.profile-results-hub .panel-header { padding-bottom: 8px; }
.profile-results-round-tabs { margin: 0 var(--panel-gutter) var(--space-4); }
.profile-results-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 var(--panel-gutter) var(--space-4);
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.profile-results-actions > div:first-child { display: grid; gap: 4px; min-width: 0; }
.profile-results-actions strong { color: var(--primary-ink); font-size: 14px; }
.profile-results-actions span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.profile-results-action-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.profile-results-action-links .button-primary,
.profile-results-action-links .button-secondary { min-height: 38px; text-decoration: none; }

.portfolio-total-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.portfolio-total-grid.is-compact { padding: 0 var(--panel-gutter); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.portfolio-total-card {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.portfolio-total-card:hover { border-color: var(--accent); }
.portfolio-total-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; }
.portfolio-total-group,
.portfolio-total-scope {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.portfolio-total-scope { color: var(--accent-ink); text-align: right; white-space: nowrap; }
.portfolio-total-card h3 { margin: 11px 0 6px; color: var(--primary-ink); font-size: 15px; line-height: 1.35; }
.portfolio-total-value { margin: 0; color: var(--primary-ink); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: normal; }
.portfolio-total-meta { margin: 9px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.portfolio-total-summary { margin: 12px 0 0; color: var(--text); font-size: 12px; line-height: 1.55; }
.portfolio-total-caveat { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted-2); font-size: 11px; line-height: 1.5; }
.portfolio-total-audit { margin: 9px 0 0; color: var(--muted-2); font-size: 10.5px; line-height: 1.45; }
.portfolio-total-drawer { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 9px; color: var(--muted-2); font-size: 11px; line-height: 1.45; }
.portfolio-total-drawer summary { cursor: pointer; color: var(--ink); font-weight: 700; }
.portfolio-total-drawer p { margin: 7px 0; }
.portfolio-total-drawer ul { max-height: 220px; overflow: auto; margin: 0; padding-left: 17px; }
.portfolio-total-drawer li { margin: 4px 0; }
.portfolio-total-drawer code { font-size: 10px; word-break: break-word; }
.portfolio-total-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.portfolio-total-tags .tag { text-decoration: none; }
.portfolio-total-indicators { align-items: center; }
.portfolio-total-indicator-label { color: var(--muted-2); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

.portfolio-method-panel { padding: var(--space-5) var(--panel-gutter); border-left: 3px solid var(--accent); }
.portfolio-method-panel .panel-header { padding: 0 0 9px; }
.portfolio-method-panel p { max-width: 94ch; margin: 0; color: var(--text); font-size: 13.5px; line-height: 1.65; }
.portfolio-method-panel .portfolio-panel-note { margin: 10px 0 0; color: var(--muted); }
.portfolio-results-controls { display: grid; gap: var(--space-4); margin: var(--space-6) 0; padding: 18px var(--panel-gutter); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.portfolio-scope-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.portfolio-scope-tabs a { padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--muted); background: var(--surface); font-size: 12px; font-weight: 700; text-decoration: none; }
.portfolio-scope-tabs a:hover { border-color: var(--accent); color: var(--accent-ink); }
.portfolio-scope-tabs a.is-active { border-color: var(--primary); background: var(--primary); color: #fff; }
.portfolio-filter-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.portfolio-filter-row label { display: grid; gap: 5px; min-width: 0; color: var(--muted-2); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.portfolio-filter-row select,
.portfolio-filter-row input { width: 100%; min-width: 0; min-height: 37px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 12px; text-transform: none; letter-spacing: normal; }
.portfolio-filter-row .button-secondary { min-height: 37px; white-space: nowrap; }
.portfolio-results-list { display: grid; gap: 16px; }
.portfolio-results-list-head { display: flex; justify-content: space-between; gap: 26px; align-items: end; }
.portfolio-results-list-head h2 { margin: 3px 0 0; color: var(--primary-ink); font-size: 24px; }
.portfolio-results-list-head p { max-width: 55ch; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.portfolio-show-more { display: flex; justify-content: center; padding: 4px 0 10px; }
.portfolio-detail-link { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-5) var(--panel-gutter); }
.portfolio-detail-link .eyebrow { margin-bottom: 5px; }
.portfolio-detail-link .panel-title { margin: 0; }
.portfolio-detail-link .panel-subtitle { max-width: 78ch; margin-bottom: 0; }
.portfolio-detail-link .button-primary { flex: 0 0 auto; text-decoration: none; }

@media (max-width: 1080px) {
  .result-detail { grid-template-columns: minmax(0, 1fr); }
  .results-held-grid { grid-template-columns: minmax(0, 1fr); }
  .portfolio-filter-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Seven fixed columns in a phone's width would give each about 45px, which is
   not a table, it is a stack of broken words. Rather than reintroduce sideways
   scrolling, the narrow layout drops the two columns the opened row repeats —
   theme and source — and gives the width back to the figure and what it
   measured. Nothing is lost: both are in the detail. */
/* Hiding a column takes two declarations, not one. The expanded detail spans
   all seven columns, so the table keeps seven column slots however many cells
   are hidden — and a slot whose only cell is display:none still holds on to its
   percentage. Without width: 0 the hidden columns quietly eat 65% of a phone
   screen and the visible ones are squeezed to a letter wide. */
@media (max-width: 900px) {
  .results-table th:nth-child(5), .results-table td:not([colspan]):nth-child(5),
  .results-table th:last-child, .results-table td:not([colspan]):last-child { display: none; width: 0; }
  .results-table th:nth-child(2), .results-table td:not([colspan]):nth-child(2) { width: 22%; }
  .results-table th:nth-child(3), .results-table td:not([colspan]):nth-child(3) { width: 34%; }
  .results-table th:nth-child(4), .results-table td:not([colspan]):nth-child(4) { width: 22%; }
  .results-table th:nth-child(6), .results-table td:not([colspan]):nth-child(6) { width: 22%; }
}

/* At a phone's width even four columns break words mid-syllable. Two carry the
   thing worth reading — the figure and what it measured — and the organisation,
   round and source move into the second cell as a context line. */
@media (max-width: 720px) {
  .results-table th:nth-child(4), .results-table td:not([colspan]):nth-child(4),
  .results-table th:nth-child(6), .results-table td:not([colspan]):nth-child(6) { display: none; width: 0; }
  /* Explicit shares, not auto. Under fixed layout the leftover from a zeroed
     column is not handed to an auto column, so "auto" here left the second
     column a letter wide. */
  .results-table th:nth-child(2), .results-table td:not([colspan]):nth-child(2) { width: 32%; }
  .results-table th:nth-child(3), .results-table td:not([colspan]):nth-child(3) { width: 68%; }
  .results-table td small.result-row-context { display: block; margin-top: 6px; font-style: normal; }
}

@media (max-width: 720px) {
  .results-toolbar .control,
  .results-toolbar #resultsSearch { width: 100%; min-width: 0; max-width: none; }
  .results-table-wrap { height: min(70vh, 640px); }
  .results-show-more { flex-direction: column; align-items: flex-start; }
  .result-detail { padding: var(--space-4) var(--panel-gutter) var(--space-4); }
  .results-shape-table th:not(:first-child),
  .results-shape-table td:not(:first-child) { width: 13%; }
  .portfolio-filter-row { grid-template-columns: minmax(0, 1fr); }
  .portfolio-filter-row .button-secondary { width: 100%; }
  .portfolio-results-list-head,
  .portfolio-detail-link { display: grid; grid-template-columns: minmax(0, 1fr); }
  .portfolio-detail-link .button-primary { justify-self: start; }
  .portfolio-total-grid { grid-template-columns: minmax(0, 1fr); }
  .portfolio-total-grid.is-compact { padding: 0 var(--panel-gutter); }
  .portfolio-carousel { padding-bottom: var(--space-3); }
  .portfolio-carousel-controls { margin-bottom: 9px; }
  .portfolio-carousel-rail { gap: 12px; }
  .portfolio-carousel-rail .portfolio-total-card { width: min(82vw, 348px); }
  .profile-results-actions { align-items: stretch; flex-direction: column; }
  .profile-results-action-links { display: grid; grid-template-columns: minmax(0, 1fr); }
  .profile-results-action-links .button-primary,
  .profile-results-action-links .button-secondary { width: 100%; justify-content: space-between; }
  .page-hero,
  .page-hero-copy,
  .page-hero-lede,
  .page-hero-stats,
  .portfolio-results-controls,
  .portfolio-results-list,
  .portfolio-total-card { min-width: 0; max-width: 100%; }
  .page-hero-lede,
  .portfolio-total-card h3,
  .portfolio-total-summary,
  .portfolio-total-caveat { overflow-wrap: anywhere; }
}
/* ---------------------------------------------------------------------------
   Outcome claims
   Deliberately unlike the totals tables above. These are quoted statements, not
   measurements, and the visual language should not let them be mistaken for
   figures.
   --------------------------------------------------------------------------- */

.outcome-claims-heading {
  margin: 22px 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.outcome-claims-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }

.outcome-claim {
  padding: 14px 16px;
  background: var(--surface-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.outcome-claim-text { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--text); }
.outcome-claim-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.outcome-claim-meta a { color: var(--accent-ink); text-decoration: none; }
.outcome-claim-meta a:hover { text-decoration: underline; }

.chip-quiet {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted-2);
}

/* -------------------------------------------------------------------------
   Mobile surface pass
   -------------------------------------------------------------------------
   The portal remains information-rich on a phone, but it should never ask a
   reader to pan sideways just to reach primary navigation or a card's core
   content.  Dense evidence tables retain their own contained scroll area;
   every card and page-level grid becomes one reading column instead.
   ------------------------------------------------------------------------- */
.mobile-nav-toggle { display: none; }

@media (max-width: 980px) {
  :root {
    --site-header-height: 70px;
    --sticky-top: 84px;
    --scroll-offset: 92px;
  }

  .site-header { overflow: visible; }

  .header-inner {
    position: relative;
    min-height: 70px;
    padding: 0 16px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .brand-lockup { gap: 9px; min-width: 0; }
  .brand-logo { height: 36px; max-width: 120px; object-fit: contain; object-position: left center; }
  .brand-rule { height: 28px; }
  .brand-lockup strong { font-size: 13px; }
  .brand-lockup small { font-size: 9px; }

  .mobile-nav-toggle {
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.33);
    border-radius: 10px;
    background: transparent;
    color: var(--on-dark);
    cursor: pointer;
  }

  .mobile-nav-toggle:hover,
  .mobile-nav-toggle:focus-visible {
    border-color: var(--accent);
    background: rgba(248, 158, 78, 0.12);
    outline: none;
  }

  .mobile-nav-toggle-icon { width: 24px; height: 24px; stroke-width: 2; }
  /* Keep global search available on phones. It follows the complete menu
     rather than competing with the brand in the 64px header row. */
  .header-actions {
    display: none;
    position: absolute;
    top: calc(100% + 388px);
    left: 0;
    right: 0;
    z-index: 111;
    min-width: 0;
    padding: 0 12px 14px;
    background: var(--primary-ink);
  }

  .nav.is-open + .header-actions { display: block; }
  .header-actions .search-box { width: 100%; }
  .header-actions .global-search { height: 44px; font-size: 15px; }
  .header-actions .search-overlay { width: 100%; right: 0; max-height: min(38vh, 320px); }

  .nav,
  .nav.is-open {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    z-index: 110;
    width: auto !important;
    max-width: none !important;
    min-height: 0;
    padding: 8px 16px 16px;
    border-bottom: 1px solid var(--glass-dark-border);
    background: var(--primary-ink);
    box-shadow: 0 16px 30px rgba(20, 26, 23, 0.22);
    overflow: hidden !important;
    scrollbar-width: auto;
  }

  .nav { display: none !important; }
  .nav.is-open { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 2px !important; }

  .nav-link,
  .nav.is-open .nav-link {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px;
    padding: 0 14px !important;
    border-radius: 8px;
    color: var(--on-dark-muted);
    font-size: 15px;
    font-weight: 700;
    white-space: normal;
  }

  .nav-link:hover,
  .nav-link:focus-visible,
  .nav-link.is-active { background: rgba(255, 255, 255, 0.09); color: var(--on-dark); outline: none; }
  .nav-link.is-active::after { left: 0; right: auto; bottom: 8px; width: 3px; height: 28px; background: var(--accent); }
}

@media (max-width: 640px) {
  :root { --site-header-height: 64px; --sticky-top: 78px; --scroll-offset: 86px; }

  .header-inner { min-height: 64px; padding: 0 12px; }
  .brand-logo { height: 32px; max-width: 105px; }
  .brand-rule { height: 24px; }
  .brand-lockup strong { font-size: 12px; }
  .brand-lockup small { display: none; }
  .mobile-nav-toggle { flex-basis: 42px; width: 42px; height: 42px; border-radius: 9px; }
  .nav,
  .nav.is-open { padding: 8px 12px 14px; }
  .header-actions { top: calc(100% + 388px); }

  /* Page, collection and portfolio grids stack. This deliberately includes
     auto-fit grids so no card starts a second phone column. */
  [class*="-grid"],
  .page-hero-stats,
  .page-hero-stats.is-6up,
  .toc-dashboard-metrics,
  .toc-library-stats,
  .toc-round-stats,
  .coverage-participation-kpis,
  .footer-top {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .toc-dashboard-metrics > div,
  .toc-library-stats span,
  .toc-round-stats span,
  .coverage-participation-kpis > div {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .toc-dashboard-metrics > div:last-child,
  .toc-library-stats span:last-child,
  .toc-round-stats span:last-child,
  .coverage-participation-kpis > div:last-child { border-bottom: 0; }

  .coverage-map { height: 52vh; min-height: 330px; }
  .profile-coverage-map { height: 300px; min-height: 260px; }
  .coverage-round-allocation { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .coverage-round-allocation strong { text-align: left; }
  .coverage-round-allocation > span:nth-child(2) { display: none; }
  .coverage-round-allocation > span:not(:nth-child(-n + 2)) { padding: 4px 0 10px; border-top: 0; }

  .portfolio-scope-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-scope-tabs a { display: flex; align-items: center; justify-content: center; min-height: 40px; text-align: center; }
  .results-table-wrap,
  .coverage-legend-body,
  .coverage-sip-allocation-list { -webkit-overflow-scrolling: touch; }
}

/* --- What's new ---------------------------------------------------------
   Header trigger plus a native <dialog> of release notes, each linking to
   the page it changed. The dialog sits on <body>, outside the page render.
   ---------------------------------------------------------------------- */

.whats-new-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(248, 158, 78, 0.55);
  border-radius: var(--radius-pill);
  background: rgba(248, 158, 78, 0.12);
  color: var(--on-dark);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.whats-new-trigger:hover,
.whats-new-trigger:focus-visible {
  border-color: var(--accent);
  background: rgba(248, 158, 78, 0.24);
  outline: none;
}

.whats-new-trigger-icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
  stroke-width: 2;
}

.whats-new-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.whats-new-dialog[open] {
  display: flex;
  flex-direction: column;
}

.whats-new-dialog::backdrop {
  background: rgba(28, 36, 32, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.whats-new-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.whats-new-head h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.whats-new-lede {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

.whats-new-close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.whats-new-close:hover,
.whats-new-close:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  outline: none;
}

.whats-new-close .icon { width: 18px; height: 18px; }

.whats-new-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 24px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.whats-new-group {
  padding: 16px 0;
}

.whats-new-group + .whats-new-group {
  border-top: 1px solid var(--border);
}

.whats-new-group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.whats-new-group-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-ink);
}

.whats-new-group ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.whats-new-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 -10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
  text-decoration: none;
}

a.whats-new-item:hover,
a.whats-new-item:focus-visible {
  background: var(--accent-soft);
  outline: none;
  text-decoration: none;
}

.whats-new-item.is-static {
  color: var(--muted);
}

.whats-new-go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.whats-new-go .icon {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

a.whats-new-item:hover .whats-new-go .icon { transform: translateX(2px); }

.whats-new-also {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.whats-new-also span { margin-right: 2px; }

.whats-new-also a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--primary);
  font-weight: 650;
  text-decoration: none;
}

.whats-new-also a:hover,
.whats-new-also a:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  outline: none;
}

.whats-new-foot {
  display: flex;
  justify-content: flex-end;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}

/* Desktop: the eight-item nav already fills the row, so the trigger is a
   round icon (named by its visually hidden label and title) and takes its
   width from the search box, leaving the nav exactly the room it had. */
@media (min-width: 981px) {
  .whats-new-trigger { width: 38px; margin-left: -10px; padding: 0; justify-content: center; }
  .whats-new-trigger span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .header-actions { min-width: 182px; }
  .search-box { width: 182px; }
}

@media (max-width: 980px) {
  /* Nav and search collapse into the menu here, so the trigger sits beside
     the menu toggle instead of at the far end of the row. */
  .whats-new-trigger { order: 1; margin-left: auto; height: 40px; }
  .mobile-nav-toggle { order: 2; margin-left: 0; }
}

@media (max-width: 640px) {
  .whats-new-trigger { width: 42px; padding: 0; justify-content: center; }
  .whats-new-trigger span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .whats-new-dialog { width: calc(100vw - 24px); max-height: 88vh; }
  .whats-new-head { padding: 18px 16px 14px; }
  .whats-new-head h2 { font-size: 18px; }
  .whats-new-body { padding: 4px 16px 6px; }
  .whats-new-foot { padding: 12px 16px; }
  .whats-new-item { flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .whats-new-go .icon { transition: none; }
}

/* --- Cookie consent and privacy notice -------------------------------- */

.footer-link-button {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-dark);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color 0.16s ease, padding-left 0.16s ease;
}

.footer-link-button:hover,
.footer-link-button:focus-visible {
  color: var(--accent);
  padding-left: 3px;
}

/* Non-modal, so the portal stays usable before a choice is made. */
.consent-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(920px, calc(100vw - 32px));
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
}

.consent-banner[hidden] { display: none; }

.consent-banner-copy { flex: 1 1 auto; min-width: 0; }

.consent-banner-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
}

.consent-banner-copy p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.consent-banner a {
  color: var(--accent-ink);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-banner-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.policy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.policy-actions button:disabled {
  opacity: 0.5;
  cursor: default;
}

.policy-prose {
  max-width: 760px;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
}

.policy-prose h2 {
  margin: 28px 0 8px;
  font-size: 18px;
  line-height: 1.3;
}

.policy-prose h2:first-child { margin-top: 4px; }

.policy-prose h3 {
  margin: 18px 0 6px;
  font-size: 15px;
}

.policy-prose p,
.policy-prose ul { margin: 0 0 12px; }

.policy-prose ul { padding-left: 20px; }

.policy-prose li + li { margin-top: 6px; }

.policy-prose a {
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.policy-table-wrap {
  margin: 4px 0 14px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.policy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.45;
}

.policy-table th,
.policy-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.policy-table th {
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.policy-table tr:last-child td { border-bottom: 0; }

.policy-table code { white-space: nowrap; font-size: 12px; }

@media (max-width: 760px) {
  .consent-banner {
    bottom: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }

  .consent-banner-actions { flex-direction: column-reverse; }
  .consent-banner-actions button { width: 100%; min-height: 44px; }
  .policy-table { min-width: 560px; }
}