:root {
  --color-bg: #ffffff;
  --color-bg-subtle: #f6f7f8;
  --color-text: #16191c;
  --color-text-muted: #545c64;
  --color-border: #d7dbdf;
  --color-accent: #0a3662;
  --color-accent-dark: #072844;
  --color-highlight: #d64545;
  --color-bordeaux: #7a1f30;
  --max-width: 1400px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  overflow-x: hidden;
}

body {
  margin: 0;
  /* Not overflow-x: hidden here too — html's copy above already clips
     horizontal overflow at the viewport, and giving body its own copy
     made it a scroll container in its own right (overflow-x: hidden
     makes overflow-y compute to auto), which broke position: sticky
     for children: it resolved against body's scrollport instead of
     the page's actual scrolling element. */
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

a {
  color: var(--color-accent);
}

a:hover {
  color: var(--color-accent-dark);
}

/* The width/height attributes on every <img> only tell the browser the
   file's aspect ratio, so it can reserve the right space before the image
   loads (no layout shift). Actual sizing stays with the component rules
   below; this reset stops the attributes from acting as a size themselves. */
img {
  width: auto;
  height: auto;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header + navigation */

.site-header {
  background: var(--color-accent);
  position: relative;
  z-index: 5;
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.4rem 1.5rem;
}

.site-title {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.site-title img {
  display: block;
  height: 92px;
  width: auto;
}

.nav-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  color: #ffffff;
  cursor: pointer;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.main-nav a {
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.05rem;
  padding: 0.45rem 0.55rem;
  border-radius: 5px;
}

.main-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
}

.main-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.26);
  font-weight: 600;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  flex: none;
}

.lang-switch a,
.lang-switch-current {
  color: #ffffff;
  text-decoration: none;
  padding: 0.2rem 0.3rem;
  border-radius: 4px;
}

.lang-switch a {
  opacity: 0.75;
}

.lang-switch a:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
}

.lang-switch-current {
  font-weight: 700;
}

.lang-switch-sep {
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 720px) {
  /* Sticky so the nav (and its menu toggle / language switch) stays
     reachable while scrolling a long page — shorter than the desktop
     bar so it doesn't eat too much of the viewport while pinned. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .site-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
    align-items: center;
    padding: 0.3rem 1.5rem;
  }

  .site-title img {
    height: 60px;
  }

  .site-title {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .nav-toggle {
    display: inline-block;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .nav-area {
    display: contents;
  }

  .main-nav {
    display: none;
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
  }

  .main-nav.is-open {
    display: block;
  }

  .lang-switch {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    margin-top: 1rem;
    padding-top: 0.5rem;
  }

  .main-nav a {
    display: block;
    padding: 0.7rem 0.75rem;
  }
}

@media (max-width: 360px) {
  .site-title img {
    height: 50px;
  }
}

/* Layout */

main {
  padding: 3rem 0 4.5rem;
  flex: 1;
}

main:has(.top-bg-wrap) {
  padding-top: 1rem;
  padding-bottom: 0;
}

/* Homepage — compact hero/dashboard so the whole above-the-fold view
   (hero + both dashboard cards) reads as a single unscrolled screen on a
   typical laptop viewport, with minimal trailing space before the footer. */
main.page-index .top-bg-wrap {
  padding-bottom: 2rem;
}

main.page-index:has(.top-bg-wrap) {
  padding-top: 0.5rem;
}

section + section {
  margin-top: 1.75rem;
}

h1 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 1rem;
}

h3 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

p {
  margin: 0 0 1rem;
  max-width: 70ch;
}

.lede {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 65ch;
}

.eyebrow {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: 600;
  padding-bottom: 0.6rem;
  margin-bottom: 0.5rem;
}

.eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: var(--color-highlight);
}

/* Buttons */

.button {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  padding: 0.75rem 1.4rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--color-accent);
}

.button:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #fff;
}

.button-secondary {
  background: transparent;
  color: var(--color-accent);
}

.button-secondary:hover {
  background: var(--color-bg-subtle);
  color: var(--color-accent-dark);
}

/* Hero */

.top-bg-wrap {
  position: relative;
  padding-bottom: 5.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 55%, #e7f0fa 100%);
}

.top-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero {
  /* No explicit top padding — matches the other pages' .page-header /
     .pro-hero, which rely on the eyebrow <p>'s own default top margin for
     spacing under the nav, rather than adding extra padding on top of it. */
  padding-top: 0;
  padding-bottom: 0.5rem;
}

.hero + section {
  margin-top: 0.75rem;
}

.hero-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  flex-wrap: nowrap;
}

.hero-content {
  flex: 0 1 640px;
  max-width: 660px;
}

.hero-eyebrow {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding-bottom: 0.5rem;
  margin-bottom: 0.6rem;
}

.hero-eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: var(--color-highlight);
}

.hero-content h1 {
  font-size: clamp(2.1rem, 3.4vw, 2.85rem);
  margin-bottom: 0.6rem;
}

.hero-h1-primary {
  color: var(--color-accent-dark);
}

.hero-h1-accent {
  color: var(--color-highlight);
}

.hero-lede {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 62ch;
  margin-bottom: 0;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(115px, 1fr));
  column-gap: 1.25rem;
  row-gap: 1.5rem;
  list-style: none;
  margin: 0;
  /* Matches the gap each .hero-stats li uses after its own divider, so the
     very first divider (this one) doesn't sit with extra space before it. */
  padding: 0 0 0 1.25rem;
  flex: 1 1 auto;
  border-left: 1px solid var(--color-border);
}

.hero-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--color-border);
}

.hero-stats li:nth-child(4n+1) {
  border-left: none;
  padding-left: 0;
}

@media (max-width: 980px) {
  .hero-inner {
    flex-wrap: wrap;
  }

  .hero-stats {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    column-gap: 1.25rem;
    padding-left: 0;
    border-left: none;
  }

  .hero-stats li {
    padding-left: 1.25rem;
    border-left: 1px solid var(--color-border);
  }

  .hero-stats li:nth-child(2n+1) {
    border-left: none;
    padding-left: 0;
  }

  html[lang="da"] .hero-stats li:nth-child(3) .hero-stat-value {
    font-size: clamp(1rem, 4.9vw, 1.25rem);
  }
}

.hero-stat-icon {
  display: block;
  height: 30px;
}

.hero-stat-icon img {
  display: block;
  height: 100%;
  width: auto;
}

.hero-stat-value {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  white-space: nowrap;
}

@media (min-width: 981px) {
  html[lang="da"] .hero-stats li:nth-child(3) .hero-stat-value {
    font-size: 1.4rem;
  }
}

.hero-stat-label {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}


/* Home link cards (onward routes under the dashboard) */

.home-links {
  margin-top: 1.5rem;
}

.home-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem 1.5rem;
}

.home-link-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.home-link-card:hover,
.home-link-card:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 6px 18px rgba(10, 54, 98, 0.1);
  transform: translateY(-1px);
}

.home-link-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #e9f0f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-link-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.home-link-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.home-link-title {
  font-weight: 700;
  color: var(--color-accent);
}

.home-link-sub {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.home-link-arrow {
  margin-left: auto;
  color: var(--color-accent);
  font-weight: 600;
  transition: transform 0.15s ease;
}

.home-link-card:hover .home-link-arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .home-link-card,
  .home-link-arrow {
    transition: none;
  }
}


/* Dashboard (recruitment + patients-by-site) */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.dashboard-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.85rem 1.5rem 1rem;
  background: var(--color-bg-subtle);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dashboard-card--recruitment {
  background: #fff;
  border-radius: 18px;
  padding: 0.95rem 1.5rem 1.1rem;
}

.dashboard-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.dashboard-card-header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.dashboard-card-meta-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.dashboard-card-meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #2f8f4e;
  white-space: nowrap;
}

/* Hidden until recruitment.js has loaded figures and confirmed they are
   recent — see isDataFresh. (The display rule above would otherwise
   override the hidden attribute.) */
.live-badge[hidden] {
  display: none;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2f8f4e;
  animation: live-dot-pulse 2.2s ease-out infinite;
}

@keyframes live-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(47, 143, 78, 0.55);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(47, 143, 78, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(47, 143, 78, 0);
  }
}

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

.dashboard-card-link {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Recruitment card */

.recruitment-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}

.recruitment-header-row h2 {
  margin: 0;
  font-size: 1.35rem;
}

.dashboard-card-subtitle {
  margin: 0.2rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.recruitment-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem 1rem;
  margin-bottom: 0.85rem;
}

.recruitment-summary-badge {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: min(100%, 250px);
  min-height: 62px;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  background: #edf7f3;
}

.recruitment-summary-icon {
  width: 32px;
  height: 32px;
  flex: none;
  object-fit: contain;
  padding-right: 0.6rem;
  border-right: 1px solid #d1dfdc;
  box-sizing: content-box;
}

.recruitment-summary-details {
  min-width: 0;
}

.recruitment-summary-count {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

.recruitment-summary-label {
  margin: 0;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.recruitment-target-card {
  display: contents;
}

.recruitment-percent-row {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100%, 200px);
  min-height: 62px;
  box-sizing: border-box;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  background: #f0f5fd;
  color: var(--color-text-muted);
}

.recruitment-percent-value {
  display: block;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
}

.recruitment-percent-label {
  font-size: 0.7rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.progress-bar-row {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.progress-bar {
  flex: 1;
  background: #e7eef7;
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.progress-bar-target {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (min-width: 481px) and (max-width: 1150px) {
  .recruitment-summary-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .recruitment-summary-badge,
  .recruitment-percent-row {
    width: 100%;
  }

  .recruitment-target-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
}

/* Below ~480px the badge no longer has room to sit beside the percent
   text without squeezing "of recruitment target" onto three lines, so
   the row stacks instead — and the badge switches to a single compact
   line (count and label side by side) rather than the two-line block
   used at wider widths, to keep the stack from costing extra height. */
@media (max-width: 480px) {
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-card--recruitment {
    padding: 0.95rem 1rem 1.1rem;
  }

  .recruitment-header-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    column-gap: 0.35rem;
    row-gap: 0.15rem;
    align-items: center;
  }

  .recruitment-header-row > div,
  .recruitment-header-row .dashboard-card-meta-group {
    display: contents;
  }

  .recruitment-header-row h2 {
    grid-column: 1;
    grid-row: 1;
  }

  .recruitment-header-row .dashboard-card-meta {
    grid-column: 2 / 4;
    grid-row: 1;
    justify-self: end;
    font-size: 0.7rem;
  }

  .recruitment-header-row .dashboard-card-subtitle {
    grid-column: 1 / 3;
    grid-row: 2;
    margin-top: 0;
  }

  .recruitment-header-row .live-badge {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }

  .recruitment-summary-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    margin-bottom: 0.6rem;
  }

  .recruitment-summary-badge {
    width: 100%;
    min-height: 39px;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem;
  }

  .recruitment-summary-icon {
    width: 24px;
    height: 24px;
    padding-right: 0.45rem;
  }

  .recruitment-target-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    border-radius: 12px;
    background: #f0f5fd;
  }

  .recruitment-percent-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.4rem;
    width: auto;
    min-height: 0;
    padding: 0;
    background: none;
  }

  .recruitment-percent-value {
    font-size: 1.15rem;
    line-height: 1;
  }

  .recruitment-percent-label {
    font-size: 0.7rem;
    line-height: 1.1;
  }

  .recruitment-summary-count {
    font-size: 1.1rem;
    line-height: 1;
  }

  .recruitment-summary-label {
    font-size: 0.7rem;
    line-height: 1.1;
  }

  .progress-bar-row {
    gap: 0.5rem;
  }

  .progress-bar {
    height: 7px;
  }

  .progress-bar-target {
    font-size: 0.72rem;
    line-height: 1;
  }
}

@media (max-width: 360px) {
  .recruitment-header-row {
    column-gap: 0.2rem;
  }

  .recruitment-header-row h2 {
    font-size: 1.15rem;
  }

  .recruitment-header-row .dashboard-card-meta {
    font-size: 0.7rem;
  }
}

.progress-bar .fill {
  background: var(--color-accent);
  height: 100%;
  width: 0%;
}

.chart-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--color-border);
}

.chart-section-title {
  margin: 0;
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  font-weight: 700;
}

.chart-wrap {
  margin-top: 0.75rem;
}

/* The homepage recruitment chart gets noticeably more vertical room than
   the compact per-site charts in the "Recruitment data by site" modal —
   the SVG's viewBox aspect ratio controls its rendered height since width
   always scales to 100% of the container. */
.chart-wrap--tall {
  margin-top: 0.6rem;
}

.chart-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

@media (min-width: 900px) {
  .dashboard-card--recruitment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    align-content: start;
    padding-bottom: 0.8rem;
  }

  .recruitment-header-row,
  .recruitment-summary-row {
    display: contents;
  }

  .recruitment-header-row > div:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
    min-width: 0;
  }

  .recruitment-header-row .dashboard-card-meta-group {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .recruitment-summary-badge {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    min-height: 0;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem;
  }

  .recruitment-summary-count {
    font-size: 1.1rem;
    line-height: 1.05;
  }

  .recruitment-summary-label {
    font-size: 0.7rem;
    line-height: 1.15;
  }

  .recruitment-summary-icon {
    width: 24px;
    height: 24px;
    padding-right: 0.45rem;
  }

  .recruitment-target-card {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    grid-row: 3;
    gap: 0.1rem;
    margin-top: 0.45rem;
    padding: 0.2rem 0.65rem;
    border-radius: 10px;
    background: #f0f5fd;
  }

  .recruitment-percent-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.4rem;
    width: auto;
    min-height: 0;
    padding: 0;
    background: none;
  }

  .recruitment-percent-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.75rem;
    line-height: 1.1;
  }

  .recruitment-percent-value {
    font-size: 1.2rem;
    line-height: 1;
  }

  .progress-bar-row {
    gap: 0.6rem;
  }

  .progress-bar {
    height: 7px;
  }

  .progress-bar-target {
    font-size: 0.72rem;
    line-height: 1;
  }

  .chart-section-header,
  .chart-wrap--tall,
  .dashboard-card--recruitment .dashboard-card-link {
    grid-column: 1 / -1;
  }

  .chart-section-header {
    grid-row: 4;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
  }

  .chart-wrap--tall {
    grid-row: 5;
    margin-top: 0.3rem;
  }

  .dashboard-card--recruitment .dashboard-card-link {
    grid-row: 6;
  }

  .dashboard-card--site-bars .site-bars {
    row-gap: 0.5rem;
  }

  .dashboard-card--site-bars .site-bar-track {
    height: 24px;
  }
}

@media (min-width: 900px) and (max-width: 1150px) {
  .recruitment-summary-badge {
    width: 180px;
  }

  .recruitment-summary-icon {
    display: none;
  }

  .dashboard-card--recruitment .chart-section-title {
    font-size: 1rem;
  }

  .dashboard-card--recruitment .time-filter-btn {
    padding: 0.2rem 0.4rem;
  }
}

.chart-wrap .chart-gridline {
  stroke: var(--color-border);
  stroke-width: 1;
}

.chart-wrap .chart-gridline--dashed {
  stroke-dasharray: 4 4;
}

.chart-wrap .chart-axis-label {
  fill: var(--color-text-muted);
  font-size: 10px;
}

.chart-wrap .chart-axis-title {
  fill: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
}

/* Patients-by-site card */

.dashboard-card--site-bars .dashboard-card-header h2 {
  font-size: 1.4rem;
}

.site-bars-total-badge {
  display: inline-block;
  /* Same tint as the value bubble on the recruitment chart above (e.g.
     "296 (5.8%)"), for a consistent "boxed figure" look across the
     dashboard. */
  background: rgba(10, 54, 98, 0.1);
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.site-bars-total-badge [data-sites-total] {
  font-weight: 700;
  color: var(--color-accent);
}

/* One shared grid for the whole list (not one grid per row) so every
   row's bar starts at exactly the same x position — each .site-bar-row
   is `display: contents`, so its children become direct items of this
   grid and share its column tracks pixel-for-pixel. The gridlines/axis
   "rows" are built the same way, so they line up with the bars too. */
.site-bars {
  display: grid;
  /* Capped at 40% of the available width (not just a flat 15rem) so the
     name column can't squeeze the bar track to nothing on narrow screens
     — long names fall back to the existing ellipsis instead. Value column
     is sized to its own content (never wider than "1,000"-ish needs),
     rather than a flat fixed width, so the bar track — and the gridlines
     measured against it — extends as close as possible to the same right
     edge as the "Total n = …" badge above. */
  grid-template-columns: minmax(90px, min(15rem, 40%)) 1fr max-content;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.85rem;
  position: relative;
  /* Fills the card's full height (dashboard-grid stretches both cards to
     match the taller one) and centers the rows in it, instead of leaving
     all the slack pooled below the last row. */
  flex: 1;
  align-content: center;
}

.site-bar-row {
  display: contents;
}

.site-bar-name {
  grid-column: 1;
  font-size: 0.9rem;
  text-align: right;
  color: rgba(10, 54, 98, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-bar-track {
  grid-column: 2;
  position: relative;
  z-index: 1;
  height: 26px;
}

.site-bar-fill {
  position: relative;
  z-index: 1;
  height: 100%;
  border-radius: 4px;
  background: #a9c6e6;
}

.site-bar-row--top .site-bar-fill {
  background: var(--color-accent);
}

.site-bar-value {
  grid-column: 3;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-accent);
}

/* Positioned in JS (left/width/height, in px) against the rendered bar
   column's own bounding box — a grid-placed overlay would fight the grid's
   auto-placement of the row items sharing that same column. */
.site-bars-gridlines {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.site-bars-gridline {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--color-border);
}

.site-bars-gridline--zero {
  border-left: 1px solid var(--color-border);
}

.site-bars-axis {
  position: relative;
  height: 1rem;
}

.site-bars-axis-tick {
  position: absolute;
  top: 0;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.card {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1.4rem;
}

/* Treatment arms */

.arms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.arm {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1.5rem;
}

.arm h3 {
  color: var(--color-accent);
}

.arm .drug {
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border);
}

.arm .drug:first-of-type {
  border-top: none;
}

.arm .drug-name {
  font-weight: 600;
}

.arm .connector {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  padding: 0.25rem 0;
}

.arm .procedure {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  font-weight: 600;
}

/* Endpoint cards */

.endpoint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.endpoint-card {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1.5rem;
  border-top: 3px solid var(--color-accent);
}

/* Tables / definition-style lists */

.info-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-list dt {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.info-list dd {
  margin: 0;
  color: var(--color-text-muted);
}

/* Criteria lists */

.criteria-list {
  padding-left: 1.2rem;
}

.criteria-list li {
  margin-bottom: 0.5rem;
  max-width: 65ch;
}

details.criteria-block {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1rem 1.25rem;
}

details.criteria-block summary {
  cursor: pointer;
  font-weight: 600;
}

details.criteria-block[open] summary {
  margin-bottom: 0.75rem;
}

/* Professionals page — global spacing rhythm */
/* Uses the site-wide section gap (see `section + section` above). */

.page-professionals .top-bg-wrap {
  padding-bottom: 3.5rem;
}

/* Professionals page — hero + eligibility */

.pro-heading {
  color: var(--color-accent-dark);
}

.pro-hero .lede {
  margin-bottom: 0;
}

.eligibility-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: 2rem;
  margin-top: 2.5rem;
}

.eligibility-col {
  padding: 1.75rem 2rem;
  border-radius: 12px;
}

.eligibility-col--inclusion {
  background: rgba(47, 143, 78, 0.05);
  border: 1px solid rgba(47, 143, 78, 0.16);
}

.eligibility-col--exclusion {
  background: rgba(214, 69, 69, 0.05);
  border: 1px solid rgba(214, 69, 69, 0.16);
}

.eligibility-col-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}

.eligibility-col-header h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent-dark);
}

.eligibility-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}

.eligibility-icon--yes {
  background: rgba(47, 143, 78, 0.12);
  color: #2f8f4e;
}

.eligibility-icon--yes::before {
  content: "✓";
}

.eligibility-icon--no {
  background: rgba(214, 69, 69, 0.12);
  color: var(--color-highlight);
}

.eligibility-icon--no::before {
  content: "✕";
  font-size: 0.95rem;
}

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

.eligibility-list li {
  position: relative;
  padding-left: 4.75rem;
  margin-bottom: 0.4rem;
  max-width: 48ch;
  font-size: 0.92rem;
  line-height: 1.35;
}

.eligibility-list li::before {
  position: absolute;
  left: 3.35rem;
  top: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.eligibility-list--yes li::before {
  content: "✓";
  color: #2f8f4e;
}

.eligibility-list--no li::before {
  content: "✕";
  color: var(--color-highlight);
}

@media (max-width: 760px) {
  .eligibility-columns {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
  }
}

/* Professionals page — intervention arms */

.arms {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.arms::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-border);
  transform: translateX(-50%);
}

.arm {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-radius: 16px;
  padding: 2rem;
  min-width: 0;
}

.arm--alone {
  background: linear-gradient(160deg, rgba(10, 54, 98, 0.07), rgba(10, 54, 98, 0.02));
}

.arm--combo {
  background: linear-gradient(160deg, rgba(214, 69, 69, 0.07), rgba(214, 69, 69, 0.02));
}

.arm h3 {
  position: relative;
  margin: 0;
  padding-bottom: 0.65rem;
  font-size: 1.25rem;
}

.arm h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 3px;
}

.arm--alone h3::after {
  background: var(--color-accent);
}

.arm--combo h3::after {
  background: var(--color-highlight);
}

.arm-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
}

.arm-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 90px;
  flex: none;
}

.arm-icon {
  display: block;
}

.arm-icon--big {
  width: 52px;
  transform: rotate(-18deg);
}

.arm-icon--small {
  width: 30px;
  transform: rotate(-18deg);
}

.arm-icon--syringe {
  width: 34px;
  flex: none;
}

.arm-extra-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
}

.arm-doses--continued {
  margin-top: 0.5rem;
}

.arm-doses-col {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 260px;
  padding-left: 1.75rem;
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.arm-doses {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.02rem;
  color: var(--color-text-muted);
  min-width: 0;
}

.arm-doses li {
  margin-bottom: 0.5rem;
}

.arm-doses li:last-child {
  margin-bottom: 0;
}

.arm-doses strong {
  color: var(--color-text);
  font-weight: 700;
}

.arm-note {
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.arm-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: 0 4px 18px rgba(10, 54, 98, 0.14);
  text-align: center;
}

.arm-center-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-text);
}

.arm-center-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

.arm-footer {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.arm-footer-item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex: 1 1 260px;
  padding: 0 2rem;
}

.arm-footer-item:first-child {
  padding-left: 0;
}

.arm-footer-item + .arm-footer-item {
  border-left: 1px solid var(--color-border);
}

.arm-footer-icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e9f0f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arm-footer-icon img {
  width: 28px;
  height: 28px;
}

.arm-footer-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.arm-footer-title {
  font-weight: 700;
  color: var(--color-text);
  font-size: 1.05rem;
}

.arm-footer-sub {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

@media (max-width: 760px) {
  .arms {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .arms::before {
    display: none;
  }

  .arm--alone {
    padding-bottom: 3.75rem;
  }

  .arm--combo {
    padding-top: 3.75rem;
  }

  .arm-center {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: -3rem auto;
  }

  .arm-footer-item {
    flex: 1 1 100%;
    padding: 1.25rem 0;
  }

  .arm-footer-item:first-child {
    padding-top: 0;
  }

  .arm-footer-item + .arm-footer-item {
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
}

/* Professionals page — non-inferiority forest plot */

.ni-forest {
  margin: 2.5rem 0 0;
}

.ni-forest-labels-spacer {
  flex: 0 0 230px;
}

.ni-forest-callout-row {
  display: flex;
  height: 6.75rem;
}

.ni-forest-callout-col {
  position: relative;
  flex: 1;
  min-width: 0;
}

.ni-forest-zero-callout {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.ni-forest-zero-callout strong {
  display: block;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 800;
}

.ni-forest-zero-callout span {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.ni-forest-direction {
  position: absolute;
  top: 3.4rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ni-forest-direction span {
  display: block;
  line-height: 1.3;
}

.ni-forest-direction--left {
  text-align: right;
  transform: translateX(-14px);
}

.ni-forest-direction--right {
  text-align: left;
  transform: translateX(14px);
}

.ni-forest-margin-callout {
  position: absolute;
  top: 2.9rem;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.ni-forest-margin-callout span {
  display: block;
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.ni-forest-margin-callout strong {
  display: block;
  color: var(--color-accent);
  font-size: 1.3rem;
  font-weight: 800;
}

.ni-forest-margin-note {
  position: absolute;
  top: 2.9rem;
  left: 84%;
  margin: 0;
  transform: translateX(3rem);
  max-width: 10rem;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.ni-forest-body {
  display: flex;
}

.ni-forest-labels {
  display: flex;
  flex: 0 0 230px;
  flex-direction: column;
  min-width: 0;
  padding-right: 1rem;
}

.ni-forest-label {
  height: 4.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ni-forest-label-bar {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  flex: none;
}

.ni-forest-label-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.ni-forest-label-title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
}

.ni-forest-label-detail {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.ni-forest-label--superior .ni-forest-label-bar { background: #2f8f4e; }
.ni-forest-label--superior .ni-forest-label-title { color: #2f8f4e; }
.ni-forest-label--noninferior .ni-forest-label-bar { background: var(--color-accent); }
.ni-forest-label--noninferior .ni-forest-label-title { color: var(--color-accent); }
.ni-forest-label--not .ni-forest-label-bar { background: var(--color-highlight); }
.ni-forest-label--not .ni-forest-label-title { color: var(--color-highlight); }
.ni-forest-label--inferior .ni-forest-label-bar { background: var(--color-bordeaux); }
.ni-forest-label--inferior .ni-forest-label-title { color: var(--color-bordeaux); }

.ni-forest-plot {
  position: relative;
  flex: 1;
  min-width: 0;
}

.ni-forest-grid {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-image: linear-gradient(var(--color-border) 60%, transparent 40%);
  background-size: 1px 7px;
  background-repeat: repeat-y;
}

.ni-forest-grid--zero {
  width: 0;
  border-left: 1px dashed var(--color-text-muted);
  background: none;
}

.ni-forest-margin-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px dashed var(--color-accent);
}

.ni-forest-band {
  position: relative;
  height: 4.25rem;
}

.ni-forest-whisker {
  position: absolute;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}

.ni-forest-whisker::before,
.ni-forest-whisker::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 16px;
  transform: translateY(-50%);
}

.ni-forest-whisker::before { left: 0; }
.ni-forest-whisker::after { right: 0; }

.ni-forest-band--superior .ni-forest-whisker,
.ni-forest-band--superior .ni-forest-whisker::before,
.ni-forest-band--superior .ni-forest-whisker::after {
  background: #2f8f4e;
}

.ni-forest-band--noninferior .ni-forest-whisker,
.ni-forest-band--noninferior .ni-forest-whisker::before,
.ni-forest-band--noninferior .ni-forest-whisker::after {
  background: var(--color-accent);
}

.ni-forest-band--not .ni-forest-whisker,
.ni-forest-band--not .ni-forest-whisker::before,
.ni-forest-band--not .ni-forest-whisker::after {
  background: var(--color-highlight);
}

.ni-forest-band--inferior .ni-forest-whisker,
.ni-forest-band--inferior .ni-forest-whisker::before,
.ni-forest-band--inferior .ni-forest-whisker::after {
  background: var(--color-bordeaux);
}

.ni-forest-point {
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
}

.ni-forest-band--superior .ni-forest-point { background: #2f8f4e; }
.ni-forest-band--noninferior .ni-forest-point { background: var(--color-accent); }
.ni-forest-band--not .ni-forest-point { background: var(--color-highlight); }
.ni-forest-band--inferior .ni-forest-point { background: var(--color-bordeaux); }

.ni-forest-axis-row {
  display: flex;
}

.ni-forest-axis {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.ni-forest-axis span {
  position: absolute;
  top: 0.5rem;
  transform: translateX(-50%);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ni-forest-axis span:first-child { transform: translateX(0); }
.ni-forest-axis span:last-child { transform: translateX(-100%); }

.ni-forest-axis-caption-row {
  display: flex;
}

.ni-forest-axis-caption-col {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 3.2rem;
}

.ni-forest-axis-caption {
  position: absolute;
  top: 0.6rem;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  white-space: nowrap;
  line-height: 1.4;
}

.ni-forest-axis-caption-main {
  display: block;
  font-weight: 700;
  color: var(--color-text);
  font-size: 0.95rem;
}

.ni-forest-axis-caption-sub {
  display: block;
  margin-top: 0.15rem;
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

@media (max-width: 760px) {
  .ni-forest-labels-spacer {
    flex-basis: 130px;
  }

  .ni-forest-labels {
    flex-basis: 130px;
  }

  .ni-forest-label-title {
    font-size: 0.8rem;
  }

  .ni-forest-label-detail {
    font-size: 0.7rem;
  }

  .ni-forest-label,
  .ni-forest-band {
    height: 5.5rem;
  }

  .ni-forest-callout-row {
    display: none;
  }

  .ni-forest-axis-caption-col {
    min-height: 0;
  }

  .ni-forest-axis-caption {
    position: static;
    top: auto;
    transform: none;
    margin: 0.6rem 0 0;
    white-space: normal;
  }
}

/* Professionals page — non-inferiority statistical summary */

.ni-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.ni-stat-row-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

.ni-stat-row-item:first-child {
  border-left: none;
}

.ni-stat-row-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.1;
}

.ni-stat-row-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}

@media (max-width: 760px) {
  .ni-stat-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5rem;
  }

  .ni-stat-row-item:nth-child(2n+1) {
    border-left: none;
  }
}

/* Professionals page — endpoint cards */

.endpoint-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.endpoint-card {
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  min-width: 0;
}

.endpoint-card--primary {
  background: rgba(10, 54, 98, 0.05);
}

.endpoint-card--safety {
  background: rgba(214, 69, 69, 0.05);
  border-top-color: var(--color-highlight);
}

.endpoint-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.endpoint-card-kicker {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.endpoint-card--safety .endpoint-card-kicker {
  color: var(--color-highlight);
}

.endpoint-card-timepoint {
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.endpoint-card-title {
  margin: 0.9rem 0 0;
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.endpoint-timeline {
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
}

.endpoint-card--safety .endpoint-timeline {
  margin-top: 1.4rem;
}

.endpoint-timeline li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding-top: 0.4rem;
}

.endpoint-timeline li + li {
  margin-top: 1.15rem;
}

.endpoint-timeline-dot {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 0.9rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.endpoint-card--safety .endpoint-timeline-dot {
  background: var(--color-highlight);
}

.endpoint-timeline li + li .endpoint-timeline-dot::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 2px;
  height: 1.15rem;
  transform: translateX(-50%);
  background: var(--color-accent);
  opacity: 0.3;
}

.endpoint-card--safety .endpoint-timeline li + li .endpoint-timeline-dot::before {
  background: var(--color-highlight);
}

.endpoint-timeline-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 54, 98, 0.09);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.endpoint-card--safety .endpoint-timeline-icon {
  background: rgba(214, 69, 69, 0.1);
  color: var(--color-highlight);
}

.endpoint-timeline-icon svg {
  width: 22px;
  height: 22px;
}

.endpoint-timeline-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.5rem;
  min-width: 0;
}

.endpoint-timeline-label {
  font-weight: 700;
  color: var(--color-text);
  font-size: 1.05rem;
}

.endpoint-timeline-sub {
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

@media (max-width: 760px) {
  .endpoint-cards {
    grid-template-columns: 1fr;
  }
}

/* Professionals page — secondary endpoints accordion */

.secondary-endpoints {
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.25rem;
}

.secondary-endpoints summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}

.secondary-endpoints summary::-webkit-details-marker {
  display: none;
}

.secondary-endpoints-heading {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.secondary-endpoints-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.secondary-endpoints-toggle {
  font-weight: 600;
  color: var(--color-accent-dark);
  font-size: 1rem;
}

.secondary-endpoints-chevron {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.secondary-endpoints[open] .secondary-endpoints-chevron {
  transform: rotate(180deg);
}

.secondary-endpoints-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.secondary-endpoints-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--color-border);
}

.secondary-endpoints-title {
  font-weight: 700;
  color: var(--color-text);
  font-size: 0.95rem;
}

.secondary-endpoints-detail {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

@media (max-width: 760px) {
  .secondary-endpoints-body {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Professionals page — follow-up */

/* Each endpoint (time label, dot, title, subtitle) is placed in its own
   explicit grid row/column — not auto-flowed by source order — so the
   line (also explicitly placed, spanning both columns on the dot's row)
   can overlap the dots without fighting the grid's auto-placement, and
   every piece in a column shares that column's own horizontal center
   regardless of how wide its content is. */
.followup-timeline {
  position: relative;
  margin-top: 2.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  --followup-gap: 5rem;
  column-gap: var(--followup-gap);
  align-items: center;
  justify-items: center;
}

.followup-track-line {
  grid-row: 2;
  grid-column: 1 / -1;
  /* Spans this item's own box (both columns + the gap between them), so
     a plain 50%/auto-margin split would come up short of each dot's
     true center by half the gap — dots sit centered in their own
     column alone, excluding the gap. Correcting for that here keeps the
     endpoints exactly at dot-center regardless of --followup-gap. */
  width: calc(50% + var(--followup-gap) / 2);
  margin: 0 calc(25% - var(--followup-gap) / 4);
  height: 2px;
  background: rgba(10, 54, 98, 0.2);
}

.followup-mobile-icon {
  display: none;
}

.followup-track-label {
  grid-row: 1;
  grid-column: 1;
  margin-bottom: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  white-space: nowrap;
}

.followup-track-label--end {
  grid-column: 2;
}

.followup-track-dot {
  grid-row: 2;
  grid-column: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
}

.followup-track-dot--end {
  grid-column: 2;
}

.followup-title {
  grid-row: 3;
  grid-column: 1;
  /* The dot->title gap (was the dot's own margin-bottom) has to live here
     instead: margin on a grid item inflates its own row's auto-sized
     track height, and centering the dot within a row taller than its own
     14px box (via align-items: center) would throw off vertical
     alignment with the connecting line, which shares that row. */
  margin: 1.1rem 0 0.4rem;
  font-size: 1.5rem;
  color: var(--color-accent-dark);
  text-align: center;
}

.followup-title--end {
  grid-column: 2;
}

.followup-sub {
  grid-row: 4;
  grid-column: 1;
  max-width: 22rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  text-align: center;
}

.followup-sub--end {
  grid-column: 2;
}

.followup-notice {
  display: flex;
  align-items: center;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
}

.followup-notice-icon {
  flex: none;
  display: flex;
  align-items: center;
  width: 22px;
  height: 22px;
  margin-right: 1.25rem;
  padding-right: 1.25rem;
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
  box-sizing: content-box;
}

.followup-notice-icon svg {
  width: 22px;
  height: 22px;
}

.followup-notice p {
  margin: 0;
  color: var(--color-text-muted);
}

.pro-disclaimer {
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .followup-section .pro-heading {
    max-width: 12ch;
    font-size: clamp(2rem, 8vw, 2.6rem);
    line-height: 1.13;
  }

  html[lang="da"] .followup-section .pro-heading {
    max-width: none;
  }

  .followup-timeline {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1.25rem;
    justify-items: center;
    align-items: start;
    margin-top: 2.25rem;
  }

  .followup-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #d3e0ef;
  }

  .followup-track-line,
  .followup-track-dot {
    display: none;
  }

  .followup-mobile-icon {
    display: flex;
    grid-row: 1;
    grid-column: 1;
    width: clamp(76px, 24vw, 100px);
    height: clamp(76px, 24vw, 100px);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-dark);
    background: #e8f1fc;
    margin: 0 auto 1rem;
  }

  .followup-mobile-icon--end {
    grid-column: 2;
  }

  .followup-mobile-icon svg {
    width: 48%;
    height: 48%;
  }

  .followup-track-label,
  .followup-track-label--end {
    grid-row: 2;
    margin: 0 0 1.25rem;
    font-size: clamp(0.72rem, 3vw, 0.95rem);
    letter-spacing: 0.055em;
    text-align: center;
  }

  .followup-track-label--end {
    grid-column: 2;
  }

  .followup-title,
  .followup-title--end {
    grid-row: 3;
    margin: 0 0 0.7rem;
    font-size: clamp(1rem, 4vw, 1.3rem);
    line-height: 1.2;
  }

  .followup-title {
    grid-column: 1;
  }

  .followup-title--end {
    grid-column: 2;
  }

  .followup-sub,
  .followup-sub--end {
    grid-row: 4;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: center;
  }

  .followup-sub {
    grid-column: 1;
  }

  .followup-sub--end {
    grid-column: 2;
  }

  .followup-notice {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    align-items: flex-start;
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .followup-notice-icon {
    margin-right: 0.85rem;
    padding-right: 0.85rem;
  }
}

/* Contact page */

.contact-hero-row {
  display: flex;
  align-items: flex-end;
  gap: 3rem;
}

.contact-hero-text {
  flex: 1 1 420px;
  min-width: 0;
}

.contact-hero-aside {
  display: flex;
  align-items: flex-end;
  gap: 1.75rem;
  flex: 0 1 560px;
  min-width: 0;
}

.contact-map {
  flex: none;
  width: 220px;
}

.contact-map-img {
  display: block;
  width: 100%;
  height: auto;
}

.contact-address {
  min-width: 0;
  padding-left: 1.75rem;
  border-left: 1px solid var(--color-border);
}

.contact-address-title {
  margin: 0 0 0.6rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  font-size: 1.05rem;
}

.contact-address-body {
  margin: 0 0 0.6rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.contact-address-body:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .contact-hero-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .contact-hero-aside {
    flex: 1 1 auto;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .contact-hero-aside {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-map {
    width: 200px;
  }

  .contact-address {
    padding-left: 0;
    border-left: none;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
  }
}

.contact-email {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.25rem;
}

.contact-email-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #e5eefb;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-email-icon svg {
  width: 22px;
  height: 22px;
}

.contact-email-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.contact-email-value {
  display: inline-block;
  max-width: 100%;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-accent-dark);
  text-decoration: none;
  overflow-wrap: break-word;
}

.contact-email-value:hover {
  text-decoration: underline;
}

.contact-email-caption {
  color: var(--color-text-muted);
  font-size: 0.84rem;
}

.contact-section {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}

.team-intro {
  margin: 0.5rem 0 0;
}

/* One shared grid across all three profiles rather than three
   independently-flowing columns: .team-row defines 4 explicit row
   tracks (role / name+credentials / affiliation / email) and each
   .team-col subgrids into them, so e.g. all three role labels sit in
   the same row and that row's height is set by whichever role label is
   tallest — no per-element min-height guesswork, and short content
   doesn't drag in extra reserved space it doesn't need. */

.team-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  column-gap: 1.75rem;
  row-gap: 1.125rem;
  margin-top: 1.75rem;
}

.team-col {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: subgrid;
  grid-row: span 4;
  column-gap: 26px;
  align-items: start;
  min-width: 0;
  padding-left: 1.75rem;
  border-left: 1px solid transparent;
}

.team-col:not(:first-child) {
  border-left-color: var(--color-border);
}

.team-photo {
  display: block;
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: #e5eefb;
}

.team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.team-role {
  grid-column: 2;
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.team-name-wrap {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.team-name {
  margin: 0;
  font-weight: 700;
  color: var(--color-accent-dark);
  font-size: 1.05rem;
  line-height: 1.3;
}

.team-credentials {
  margin: 0;
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1.3;
}

.team-affiliation {
  grid-column: 2;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.3;
}

.team-email {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-accent-dark);
  font-size: 0.9rem;
  text-decoration: none;
}

.team-email:hover {
  text-decoration: underline;
}

.team-email svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--color-accent-dark);
}

@media (max-width: 1100px) {
  .team-row {
    grid-template-columns: 1fr;
    row-gap: 1.75rem;
  }

  .team-col {
    grid-template-columns: 120px minmax(0, 520px);
    padding-left: 0;
    padding-top: 1.5rem;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }

  .team-col:first-child {
    padding-top: 0;
    border-top: none;
  }
}

@media (max-width: 760px) {
  .team-row {
    grid-template-rows: none;
    row-gap: 0.9rem;
  }

  .team-col {
    grid-template-rows: repeat(4, auto);
    grid-row: auto;
    row-gap: 0.45rem;
    padding-top: 1.15rem;
  }

  .team-role {
    margin-bottom: 0;
  }

  .team-name-wrap {
    gap: 0.15rem;
  }

  .team-affiliation {
    position: relative;
    padding-left: 1.45rem;
  }

  .team-affiliation::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 16px;
    height: 16px;
    background: url("/img/icons/icon-hospital.webp") center / contain no-repeat;
  }

  .team-email {
    min-width: 0;
    gap: 0.4rem;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  .team-col {
    grid-template-columns: 88px minmax(0, 520px);
    column-gap: 16px;
  }

  .team-photo {
    width: 88px;
    height: 88px;
  }
}

@media (max-width: 360px) {
  .team-col {
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 12px;
  }

  .team-photo {
    width: 76px;
    height: 76px;
  }
}

/* Publications page */
/* Uses the site-wide section gap (see `section + section` above). */

.section-kicker {
  position: relative;
  display: inline-block;
  margin: 1.5rem 0 1.25rem;
  padding-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
}

.section-kicker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: var(--color-highlight);
}

.ext-link-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-left: 0.2rem;
}

.reg-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.reg-card {
  display: flex;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  min-width: 0;
}

.reg-card-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e5eefb;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reg-card-icon svg {
  width: 18px;
  height: 18px;
}

.reg-card-body {
  min-width: 0;
}

.reg-card-title {
  margin: 0 0 0.2rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text);
}

.reg-card-value {
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  text-decoration: none;
  word-break: break-word;
}

.reg-card-value:hover {
  text-decoration: underline;
}

.reg-card-plain {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

.reg-card-caption {
  margin: 0.2rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.reg-card-download {
  display: inline-flex;
  align-items: center;
  margin-top: 0.2rem;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.reg-card-download:hover {
  text-decoration: underline;
}

.pub-section {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}

.pub-card {
  display: flex;
  gap: 1.75rem;
  padding: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.pub-thumb {
  position: relative;
  flex: none;
  width: 140px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  text-align: center;
}

.pub-thumb-rule {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-highlight);
}

.pub-thumb-journal {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  line-height: 1.3;
}

.pub-thumb-icon {
  width: 44px;
  height: 44px;
  opacity: 0.85;
}

.pub-card-body {
  min-width: 0;
}

.pub-card-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.pub-card-title {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  line-height: 1.4;
}

.pub-card-title a {
  color: var(--color-accent-dark);
  text-decoration: none;
}

.pub-card-title a:hover {
  text-decoration: underline;
}

.pub-card-authors {
  margin: 0 0 0.3rem;
  color: var(--color-text);
}

.pub-card-journal {
  margin: 0 0 0.3rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.pub-card-pmid {
  margin: 0 0 1.1rem;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.pub-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.pub-card-button {
  display: inline-flex;
  align-items: center;
}

.pub-notice {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding: 1.1rem 1.4rem;
  background: rgba(10, 54, 98, 0.06);
  border-radius: 10px;
  color: var(--color-accent-dark);
}

.pub-notice-icon {
  flex: none;
  display: flex;
  color: var(--color-accent);
}

.pub-notice-icon svg {
  width: 22px;
  height: 22px;
}

.pub-notice p {
  margin: 0;
}

@media (max-width: 760px) {
  .reg-cards {
    grid-template-columns: 1fr;
  }

  .pub-card {
    flex-direction: column;
  }

  .pub-thumb {
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 1rem 1.25rem;
  }
}

/* Denmark map + centres layout */

.page-header {
  padding: 0 0 1.25rem;
  margin-top: 0;
}

.page-header h1 {
  margin: 0;
  max-width: 24ch;
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.page-header-adjacent {
  margin-top: 1rem;
}

/* Stat cards (Participating Centres header) */

.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

@media (max-width: 720px) {
  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(10, 54, 98, 0.07);
  border: none;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  min-width: 120px;
}

.stat-card-active {
  background: rgba(47, 143, 78, 0.09);
}

.stat-card-initiated {
  background: rgba(184, 134, 11, 0.1);
}

.stat-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--color-accent);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
}

.stat-card-icon svg {
  width: 21px;
  height: 21px;
}

.stat-card-active .stat-card-icon {
  background: #2f8f4e;
}

.stat-card-initiated .stat-card-icon {
  background: #d2a223;
}

.stat-card-text {
  display: flex;
  flex-direction: column;
}

.stat-card-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.05;
}

.stat-card-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  line-height: 1.2;
  margin-top: 0.15rem;
}

.stat-card-label-sub {
  font-size: 0.7rem;
}

.centres-layout {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.map-wrap {
  flex: 1 1 420px;
  max-width: 560px;
  position: relative;
}

@media (min-width: 861px) {
  .map-wrap {
    margin: -6.5rem 0 0 8.65rem;
  }
}

.denmark-map {
  width: 100%;
  height: auto;
  display: block;
  cursor: default;
}

.denmark-landmass {
  fill: #d7dbdf;
}

.map-marker {
  stroke: #ffffff;
  stroke-width: 1.5;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.15s ease;
}

.map-marker:hover,
.map-marker:focus,
.map-marker.is-hovered,
.map-marker.is-selected {
  transform: scale(1.35);
}

.map-marker.is-hovered {
  stroke: var(--color-accent);
  stroke-width: 2.5;
}

.map-marker:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.map-marker-active {
  fill: #2f8f4e;
}

.map-marker-pulse {
  fill: #2f8f4e;
  opacity: 0.55;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: map-marker-ping 2s ease-out infinite;
}

@keyframes map-marker-ping {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70%,
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-marker-pulse {
    animation: none;
    opacity: 0;
  }
}

.map-marker-initiated {
  fill: #b8860b;
}

.map-marker-upcoming {
  fill: #9aa2a9;
}

.map-source {
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0.5rem 0 0;
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
  flex: none;
}

.legend-dot-active {
  background: #2f8f4e;
  animation: live-dot-pulse 2.2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .legend-dot-active {
    animation: none;
  }
}

.legend-dot-initiated {
  background: #b8860b;
}

.legend-dot-upcoming {
  background: #9aa2a9;
}

/* Site popup (shown on marker click) */

.site-popup {
  position: absolute;
  transform: translate(14px, -50%);
  z-index: 5;
  width: max-content;
  min-width: 220px;
  max-width: 300px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(16, 24, 32, 0.15);
  padding: 0.75rem;
}

.site-popup.site-popup-left {
  transform: translate(calc(-100% - 14px), -50%);
}

.site-popup-close {
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.15rem;
}

.site-popup-close:hover {
  color: var(--color-text);
}

.site-popup-photo {
  width: 100%;
  height: 88px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-bg-subtle);
  margin-bottom: 0.6rem;
}

.site-popup-photo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.site-popup-name {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
}

.site-popup-status {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}

.site-popup-status.status-active {
  background: rgba(47, 143, 78, 0.12);
  color: #2f8f4e;
}

.site-popup-status.status-initiated {
  background: rgba(184, 134, 11, 0.14);
  color: #8a6508;
}

.site-popup-status.status-upcoming {
  background: rgba(154, 162, 169, 0.2);
  color: #5c6469;
}

.site-popup-pi {
  margin: 0;
  font-size: 0.76rem;
}

.site-popup-investigators:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-popup-pi-label {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Site list (Participating Centres, right of the map) */

.site-list-wrap {
  flex: 0 1 477px;
  min-width: 260px;
  max-width: 477px;
  margin-left: auto;
}

@media (max-width: 860px) {
  .site-list-wrap {
    margin-left: 0;
  }
}

.site-groups {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-group {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}

.site-group summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  list-style: none;
}

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

.site-group-title {
  flex: 1;
}

.site-group-chevron {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.site-group[open] .site-group-chevron {
  transform: rotate(180deg);
}

.site-group-active summary {
  background: rgba(47, 143, 78, 0.08);
}

.site-group-initiated summary {
  background: rgba(184, 134, 11, 0.1);
}

.site-group-upcoming summary {
  background: rgba(154, 162, 169, 0.14);
}

.site-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.site-group-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
}

.site-group-item:last-child {
  border-bottom: none;
}

.site-group-item.is-hovered {
  background: rgba(10, 54, 98, 0.07);
}

.site-group-item-name {
  font-weight: 600;
  font-size: 0.82rem;
}

.site-group-item-region {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-align: right;
}

/* Publications categories */

.pub-category {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.pub-category h3 {
  margin-bottom: 0.35rem;
}

.pub-category p {
  margin: 0;
  color: var(--color-text-muted);
}

/* Notices / disclaimers */

.notice {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  background: var(--color-bg-subtle);
}

.placeholder-text {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 2.5rem 0;
  background: var(--color-bg-subtle);
}

.site-footer .footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.site-footer address {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.site-footer .footer-ids {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 0.9rem;
}

/* About page — scientific narrative */

.about-scene {
  padding: 0.75rem 0;
}

.scene-heading {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.35;
  max-width: 46ch;
  margin: 0 0 2.75rem;
}

/* Reveal-on-scroll utility: progressive enhancement only. Without the
   .reveal-pending class (added by JS, skipped under reduced-motion or
   without IntersectionObserver) everything below is fully visible. */

/* Hides [data-reveal] elements the instant they exist in the DOM,
   before reveal.js (loaded at the end of body, on every page) has run —
   otherwise a section already in the initial viewport (e.g. a page's
   hero-adjacent content) paints visible for a frame and then snaps to
   hidden once reveal-pending is added, which reads as a flash/blink on
   load. html.reveal-js is set by a synchronous inline script in <head>,
   using the same bail-out check as reveal.js, so this never fires when
   that script won't take over. Wrapped in :where() so this carries zero
   specificity — it must always lose to .reveal-pending.is-revealed (and
   any more specific override) once JS actually reveals the element, or
   it would stay invisible. */
:where(.reveal-js) [data-reveal] {
  opacity: 0;
}

.reveal-pending {
  opacity: 0;
  transform: translateY(14px);
}

.reveal-pending.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-pending,
  .reveal-pending.is-revealed {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Scene 1 — the question */

.about-hero {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
}

.about-hero-inner {
  position: relative;
  z-index: 1;
}

.about-hero-art {
  position: absolute;
  top: -130px;
  right: 140px;
  width: 790px;
  z-index: 0;
  pointer-events: none;
}

.about-hero-art img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1100px) {
  .about-hero-art {
    display: none;
  }
}

.about-hero-content {
  max-width: 640px;
}

.about-hero-lede {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-bottom: 0.85rem;
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.scroll-cue:hover {
  color: var(--color-accent);
}

.about-hero-caption {
  float: right;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0.25rem 0 1rem 1.5rem;
}

/* On phones the floated caption would stack above the eyebrow as a
   stray line (the home page already carries the tagline), so drop it. */
@media (max-width: 720px) {
  .about-hero-caption {
    display: none;
  }
}

/* Scene 2 — then / now */

.then-now-intro {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.35;
  color: var(--color-text);
  max-width: 56ch;
  margin: 0;
}

.then-now-sub {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: 0.6rem 0 0;
}

.then-now-heading {
  position: relative;
  z-index: 1;
  margin-bottom: 3rem;
}

.then-now-heading.reveal-pending {
  opacity: 0;
  transform: translateY(-18px);
}

.then-now-heading.reveal-pending.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.then-now-visual {
  margin-bottom: 0;
}

.tn-cards {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr minmax(220px, 340px);
  align-items: stretch;
  gap: 2rem;
}

.tn-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 16px;
  padding: 1.75rem 1.5rem 0;
  overflow: hidden;
}

.tn-card--then {
  background: rgba(10, 54, 98, 0.04);
  border: 1px solid rgba(10, 54, 98, 0.14);
}

.tn-card--now {
  background: rgba(214, 69, 69, 0.05);
  border: 1px solid rgba(214, 69, 69, 0.16);
}

@media (min-width: 1101px) {
  .tn-card--now {
    position: relative;
    z-index: 1;
    background: #fff9fa;
  }
}

.tn-era {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 0.3rem;
}

.tn-card--now .tn-era {
  color: var(--color-highlight);
}

/* "1990s" — keep the decade's "s" lowercase despite .tn-era's uppercase
   transform (which would otherwise render it as "1990S"). */
.tn-era-lower {
  text-transform: lowercase;
}

.tn-ref {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.tn-figure {
  display: block;
  font-size: clamp(2.8rem, 6.5vw, 4.25rem);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 0.9rem;
  letter-spacing: -0.01em;
}

.tn-card--then .tn-figure {
  color: var(--color-accent);
}

.tn-card--now .tn-figure {
  color: var(--color-highlight);
}

.tn-caption {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  max-width: 24ch;
  margin: 0 auto;
}

.tn-card-art {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin-top: auto;
  padding-top: 1.5rem;
}

.tn-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.tn-track-label {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 1.1rem;
}

.tn-arrow {
  position: relative;
  height: 8px;
  border-radius: 4px;
  margin: 0 12px 2rem 0;
  background: linear-gradient(90deg, rgba(10, 54, 98, 0.18), var(--color-accent) 82%);
}

.tn-arrow::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 13px solid var(--color-accent);
  transform: translateY(-50%);
}

.tn-milestones {
  display: flex;
  gap: 0.5rem;
}

.tn-milestone {
  flex: 1;
  min-width: 0;
  padding: 0 0.75rem;
  text-align: center;
}

.tn-milestone:not(:first-child) {
  border-left: 1px solid var(--color-border);
}

.tn-milestone svg,
.tn-milestone img {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 0.6rem;
  color: var(--color-text-muted);
}

.tn-milestone p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.tn-management-row {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr minmax(220px, 340px);
  gap: 2rem;
  margin-top: 1.25rem;
}

.tn-management {
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
}

.tn-management--then {
  grid-column: 1;
  background: rgba(10, 54, 98, 0.04);
  color: var(--color-accent);
}

.tn-management--now {
  grid-column: 3;
  background: rgba(214, 69, 69, 0.08);
  color: var(--color-highlight);
}

/* Icon, divider and text centered together as one group within the
   banner (not the text alone) — the icon stays immediately to the left
   of the text at the same gap, just as a unit that sits mid-banner. */
.tn-conclusion-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin-top: 2.5rem;
}

.tn-conclusion-icon {
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--color-highlight);
}

.tn-conclusion-divider {
  flex: none;
  align-self: stretch;
  width: 1px;
  background: var(--color-border);
}

.tn-conclusion {
  margin: 0;
  text-align: left;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
}

.tn-conclusion-accent {
  color: var(--color-highlight);
}

@media (max-width: 900px) {
  /* Single mobile column, but interleaved rather than following raw DOM
     order: the "then" card, its management pill, the connecting track,
     the "now" card, its management pill, then the conclusion. The pills
     and the cards live in separate sibling containers in the markup
     (.tn-cards and .tn-management-row), so `display: contents` on both
     lets their children become direct flex items of .then-now-visual,
     which `order` can then interleave freely. */
  .then-now-visual {
    display: flex;
    flex-direction: column;
  }

  .tn-cards,
  .tn-management-row {
    display: contents;
  }

  .tn-card--then {
    order: 1;
  }

  .tn-management--then {
    order: 2;
    margin-top: 1.25rem;
  }

  .tn-middle {
    order: 3;
  }

  .tn-card--now {
    order: 4;
    margin-top: 1.5rem;
  }

  .tn-management--now {
    order: 5;
    margin-top: 1.25rem;
  }

  .tn-conclusion-banner {
    order: 6;
  }

  /* The connecting track becomes a compact two-column layout: the label
     and the facts stack on the left, and a single vertical arrow runs
     the full height on the right — visually linking the "then" card
     above to the "now" card below — instead of a horizontal bar with
     the facts stacked underneath it. */
  .tn-middle {
    display: grid;
    grid-template-columns: 1fr 28px;
    grid-template-areas:
      "label facts-arrow"
      "facts facts-arrow";
    column-gap: 1.25rem;
    row-gap: 0.75rem;
    height: auto;
    padding: 1.75rem 0;
  }

  .tn-track-label {
    grid-area: label;
    text-align: left;
    margin-bottom: 0;
  }

  .tn-milestones {
    grid-area: facts;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .tn-milestone {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0;
    text-align: left;
    border: none;
  }

  .tn-milestone svg,
  .tn-milestone img {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
  }

  .tn-milestone p {
    font-size: 0.82rem;
    text-align: left;
  }

  .tn-arrow {
    grid-area: facts-arrow;
    width: 6px;
    height: auto;
    align-self: stretch;
    margin: 0;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(10, 54, 98, 0.18), var(--color-accent) 85%);
  }

  .tn-arrow::after {
    right: auto;
    top: auto;
    left: 50%;
    bottom: -11px;
    border-top: 12px solid var(--color-accent);
    border-bottom: none;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    transform: translateX(-50%);
  }
}

@media (max-width: 640px) {
  .tn-conclusion-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .tn-conclusion-divider {
    display: none;
  }

  .tn-conclusion {
    text-align: left;
  }
}

@media (max-width: 760px) {
  .tn-middle {
    grid-template-columns: minmax(0, 1fr) 12px 34px;
    grid-template-areas: "facts facts-arrow label";
    column-gap: 0.75rem;
    align-items: stretch;
    padding: 2rem 0 2.5rem;
  }

  .tn-track-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    border-right: 1px solid var(--color-border);
    padding-right: 0.45rem;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }

  .tn-milestones {
    position: relative;
    justify-content: space-between;
    gap: 1rem;
  }

  .tn-milestones::before {
    content: "";
    position: absolute;
    top: 52px;
    bottom: 52px;
    left: 27px;
    width: 2px;
    background: #dce5ef;
  }

  .tn-milestone {
    position: relative;
    min-height: 78px;
    gap: 0.75rem;
  }

  .tn-milestone svg,
  .tn-milestone img {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 54px;
    padding: 11px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #edf4fd;
    object-fit: contain;
    color: var(--color-accent);
  }

  .tn-milestone img {
    padding: 7px;
  }

  .tn-milestone p {
    font-size: clamp(0.85rem, 3.6vw, 1rem);
    line-height: 1.35;
  }

  .tn-arrow {
    width: 12px;
    border-radius: 8px;
    background: linear-gradient(180deg, #cbd8e6, var(--color-accent) 88%);
  }

  .tn-arrow::after {
    bottom: -15px;
    border-top-width: 16px;
    border-left-width: 13px;
    border-right-width: 13px;
  }
}

/* Scene 3 — trial design diagram */

.trial-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
}

.diagram-node {
  background: rgba(10, 54, 98, 0.06);
  border: 1px solid rgba(10, 54, 98, 0.14);
  border-radius: 12px;
  padding: 0.9rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
}

.diagram-node img {
  width: 28px;
  height: 28px;
  flex: none;
}

.diagram-node-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
}

.diagram-node-title {
  font-weight: 700;
  color: var(--color-accent);
  font-size: 1.05rem;
}

.diagram-node-sub {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.diagram-connector {
  position: relative;
  width: 2px;
  height: 2.25rem;
  background: var(--color-accent);
}

.diagram-connector::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: translateX(-50%) rotate(45deg);
}

.diagram-split,
.diagram-merge {
  width: 100%;
}

.diagram-split svg,
.diagram-merge svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The split/merge connectors ship two svgs: the desktop one uses fixed
   pixel coordinates tuned for the two-column .diagram-branches width,
   the mobile one uses a percentage viewBox so its split points track
   the arms' centers as they reflow to a narrower two-up row instead. */
.diagram-split .diagram-flow-mobile,
.diagram-merge .diagram-flow-mobile {
  display: none;
}

.diagram-flow-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
}

.diagram-flow-arrow {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.diagram-branches {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 3.5rem;
  width: 100%;
}

.diagram-arm {
  position: relative;
  flex: 0 1 220px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}

.diagram-arm--single {
  background: rgba(47, 143, 78, 0.07);
  border-color: rgba(47, 143, 78, 0.3);
}

.diagram-arm--combo {
  background: rgba(214, 69, 69, 0.07);
  border-color: rgba(214, 69, 69, 0.3);
}

.diagram-arm img {
  width: 32px;
  height: 32px;
}

.diagram-arm-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.trial-question {
  text-align: center;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin: 2.5rem auto 0;
}

.trial-diagram.reveal-pending .diagram-step {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.trial-diagram.reveal-pending.is-revealed .diagram-step-1 { transition-delay: 0ms; }
.trial-diagram.reveal-pending.is-revealed .diagram-step-2 { transition-delay: 240ms; }
.trial-diagram.reveal-pending.is-revealed .diagram-step-3 { transition-delay: 420ms; }
.trial-diagram.reveal-pending.is-revealed .diagram-step-4 { transition-delay: 420ms; }
.trial-diagram.reveal-pending.is-revealed .diagram-step-5 { transition-delay: 620ms; }
.trial-diagram.reveal-pending.is-revealed .diagram-step-6 { transition-delay: 780ms; }

.trial-diagram.reveal-pending.is-revealed .diagram-step {
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  .diagram-split .diagram-flow-desktop,
  .diagram-merge .diagram-flow-desktop {
    display: none;
  }

  .diagram-split .diagram-flow-mobile,
  .diagram-merge .diagram-flow-mobile {
    display: block;
    height: clamp(6.5rem, 32vw, 10rem);
  }

  /* Use the same fixed-size chevron as the straight connectors. SVG
     arrowheads scale with the diagram width and otherwise change size
     relative to the arrows between the other nodes. */
  .diagram-split,
  .diagram-merge {
    position: relative;
  }

  .diagram-flow-mobile .diagram-flow-arrow {
    display: none;
  }

  .diagram-split::before,
  .diagram-split::after,
  .diagram-merge::after {
    content: "";
    position: absolute;
    bottom: 12px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: translateX(-50%) rotate(45deg);
  }

  .diagram-split::before { left: 25%; }
  .diagram-split::after { left: 75%; }
  .diagram-merge::after { left: 50%; }

  /* Kept side by side rather than stacked — a phone-width column would
     read as a sequential "alone, then combo" flow instead of two
     alternative arms from the same randomization split. Arms shrink to
     fit two-up instead. */
  .diagram-branches {
    gap: 0.85rem;
  }

  .diagram-arm {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 0.85rem 0.75rem;
    font-size: 0.92rem;
  }

  .diagram-arm img {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 400px) {
  .diagram-arm {
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;
  }
}

/* Scene 4 — protection / bleeding balance */

.balance > .container {
  background: transparent;
  border: 0;
  border-radius: 14px;
  padding: 0 1.5rem;
  box-shadow: none;
}

.balance-heading .scene-heading {
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
  max-width: none;
  margin-bottom: 1.75rem;
}

.balance-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  position: relative;
  align-items: start;
  max-width: 1260px;
  min-height: 270px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.balance-side {
  min-width: 0;
  text-align: center;
  position: relative;
  z-index: 2;
}

.balance-icon-wrap {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 3rem;
  background: var(--color-bg-subtle);
}

.balance-icon-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  width: 102px;
  height: 17px;
  border-radius: 0 0 55% 55%;
  background: linear-gradient(#b6beca, #929caa);
}

.balance-icon-wrap img {
  width: 60px;
  height: 65px;
  object-fit: contain;
}

.balance-side--protection .balance-icon-wrap {
  background: #e9f0f8;
}

.balance-side--bleeding .balance-icon-wrap {
  background: #f9ecec;
}

.balance-side h3 {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.3rem;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.balance-side--bleeding h3 {
  color: var(--color-highlight);
}

.balance-items {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.4;
  max-width: 24ch;
  margin: 0 auto;
  text-wrap: normal;
}

.balance-center {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.balance-center::after {
  content: "";
  position: absolute;
  top: 157px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 72px;
  background: linear-gradient(#8793a3, #aeb7c4);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  border-radius: 7px;
}

.balance-line {
  position: absolute;
  top: 132px;
  left: 25%;
  width: 50%;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(#b9c1cd, #939eae);
}

.balance-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #c4ccd7;
  border: 3px solid #e7ebf1;
  box-shadow: 0 1px 3px rgba(10, 54, 98, 0.18);
  transform: translate(-50%, -50%);
  z-index: 2;
}

.balance-core {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: linear-gradient(135deg, #214b78, #0b2f55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}

.balance-question {
  text-align: center;
  font-size: 1.35rem;
  color: var(--color-text-muted);
  max-width: none;
  margin: 0;
  border-top: 1px solid #dce5ef;
  padding: 1.35rem 0 0;
}

.balance-diagram.reveal-pending .balance-indicator {
  left: 18%;
  opacity: 0.55;
  transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease;
}

.balance-diagram.reveal-pending.is-revealed .balance-indicator {
  left: 50%;
  opacity: 1;
}

@media (max-width: 760px) {
  .balance > .container {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 1.5rem;
  }

  .balance-heading .scene-heading {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    margin-bottom: 1.35rem;
  }

  .balance-card {
    background: transparent;
    border: 0;
    border-radius: 18px;
    padding: 1.4rem 1rem 1.25rem;
    box-shadow: none;
  }

  .balance-diagram {
    min-height: 228px;
    padding: 0;
    column-gap: 2rem;
    align-items: start;
  }

  .balance-side {
    min-width: 0;
  }

  .balance-icon-wrap {
    width: 64px;
    height: 64px;
    margin-bottom: 3.6rem;
  }

  .balance-icon-wrap::after {
    width: 70px;
    height: 11px;
    bottom: -14px;
  }

  .balance-icon-wrap img {
    width: 34px;
    height: 40px;
  }

  .balance-center {
    z-index: 3;
  }

  .balance-line {
    top: 77px;
    left: 21%;
    width: 58%;
    height: 7px;
  }

  .balance-indicator {
    width: 14px;
    height: 14px;
    border-width: 2px;
  }

  .balance-center::after {
    top: 106px;
    width: 46px;
    height: 48px;
  }

  .balance-core {
    top: 44px;
    width: 64px;
    height: 64px;
    font-size: 0.8rem;
  }

  .balance-side h3 {
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
  }

  .balance-items {
    font-size: 0.78rem;
    max-width: none;
    text-wrap: balance;
  }

  .balance-question {
    font-size: 1rem;
    line-height: 1.5;
    padding-top: 1rem;
  }
}

/* Scene 5 — why it matters */

.why-matters {
  position: relative;
  overflow: hidden;
}

.why-matters::before,
.why-matters::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 48px solid rgba(10, 54, 98, 0.05);
  pointer-events: none;
  z-index: 0;
}

.why-matters::before {
  top: -160px;
  right: -160px;
  width: 420px;
  height: 420px;
}

.why-matters::after {
  bottom: -200px;
  left: -200px;
  width: 460px;
  height: 460px;
}

.why-matters-inner {
  position: relative;
  z-index: 1;
}

.why-matters h2 {
  color: var(--color-accent);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.32;
  margin-bottom: 1.25rem;
}

.why-matters-sub {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 62ch;
}

.why-matters-meta {
  display: flex;
  flex-wrap: wrap;
  margin: 2.5rem 0 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-border);
}

.why-matters-meta-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 1 220px;
  padding: 0 1.75rem;
}

.why-matters-meta-item:first-child {
  padding-left: 0;
}

.why-matters-meta-item + .why-matters-meta-item {
  border-left: 1px solid var(--color-border);
}

.why-matters-meta-icon {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e9f0f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-matters-meta-icon img {
  width: 30px;
  height: 30px;
}

.why-matters-meta-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.why-matters-meta-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-accent);
}

.why-matters-meta-sub {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

@media (min-width: 761px) {
  .why-matters-meta {
    padding-left: 2.5rem;
  }

  .why-matters-meta-icon {
    width: 72px;
    height: 72px;
  }

  .why-matters-meta-icon img {
    width: 34px;
    height: 34px;
  }

  .why-matters-meta-sub {
    font-size: 1rem;
  }
}

.why-matters-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem 2.5rem;
}

.why-matters-support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.why-matters-support-label {
  display: flex;
  align-items: center;
  height: 64px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding-right: 1.25rem;
  border-right: 1px solid var(--color-border);
}

.why-matters-support-org {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 64px;
}

.why-matters-support-logo {
  width: 44px;
  height: 44px;
  flex: none;
}

.why-matters-support-name {
  text-transform: uppercase;
  color: #a83b3f;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.why-matters-support-fund {
  display: flex;
  align-items: center;
  height: 64px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  padding-right: 1.25rem;
  border-right: 1px solid var(--color-border);
}

.trial-org-link {
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 760px) {
  .why-matters-meta-item {
    flex: 1 1 100%;
    padding: 1rem 0;
    border-left: none !important;
    border-top: 1px solid var(--color-border);
  }

  .why-matters-meta-item:first-child {
    border-top: none;
    padding-top: 0;
  }

  .why-matters-support-label,
  .why-matters-support-fund {
    height: auto;
    border-right: none;
    padding-right: 0;
  }

  .why-matters-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: 18px;
    background: #f7faff;
  }

  .trial-org-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #d9e5f2;
    color: var(--color-accent-dark);
    font-size: 1.3rem;
    font-weight: 700;
  }

  .trial-org-link span {
    font-size: 1.45em;
    line-height: 0.8;
  }

  .why-matters-support {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.4rem;
    width: 100%;
    align-items: start;
  }

  .why-matters-support-label {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  .why-matters-support-org {
    display: contents;
  }

  .why-matters-support-logo {
    grid-column: 1;
    grid-row: 2 / 4;
    width: 60px;
    height: 60px;
  }

  .why-matters-support-name {
    grid-column: 2;
    grid-row: 2;
    font-size: 1.05rem;
  }

  .why-matters-support-fund {
    grid-column: 2;
    grid-row: 3;
    display: block;
    font-size: 0.95rem;
    line-height: 1.35;
  }
}

/* Site modal ("Recruitment data by site", opened from the dashboard) */

.site-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 20, 30, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Belt-and-braces alongside the body scroll lock in recruitment.js:
     stops a touch-scroll that reaches the end of a scrollable area in
     here (the region list, the detail panel) from chaining through to
     scroll the page behind the modal. */
  overscroll-behavior: contain;
}

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

.site-modal {
  position: relative;
  width: 100%;
  max-width: 980px;
  height: min(720px, 90vh);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(10, 20, 30, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.site-modal-close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
}

.site-modal-close:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

.site-modal-close svg {
  width: 18px;
  height: 18px;
}

.site-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 3.25rem 1.25rem 1.75rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.site-modal-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-bg-subtle);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-modal-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.site-modal-header h2 {
  margin: 0 0 0.2rem;
  font-size: 1.5rem;
}

.site-modal-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.site-modal-body {
  display: grid;
  /* Wide enough that the longest one-line entries — "Region of Southern
     Denmark" and "Aarhus University Hospital" (bold when selected) — fit
     next to their totals without wrapping. */
  grid-template-columns: 310px 1fr;
  flex: 1;
  min-height: 0;
}

.site-modal-regions {
  display: flex;
  flex-direction: column;
  /* Grid items default to min-height: auto (sized to fit all content), which
     would keep growing as more regions expand instead of scrolling. */
  min-height: 0;
}

/* Mobile-only fold-out toggle — hidden on desktop, where the region list
   is always visible as the sidebar below. */
.site-modal-mobile-toggle {
  display: none;
}

.site-modal-region-list {
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem;
  flex: 1;
  min-height: 0;
}

.site-modal-region {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 0.4rem;
  background: #fff;
}

.site-modal-region:last-child {
  margin-bottom: 0;
}

.site-modal-region[data-active="true"] {
  background: rgba(10, 54, 98, 0.05);
  border-color: rgba(10, 54, 98, 0.2);
  box-shadow: 0 2px 8px rgba(10, 54, 98, 0.08);
}

.site-modal-region-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  text-align: left;
  padding: 0.7rem 0.6rem;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
}

.site-modal-region-name {
  flex: 1;
  min-width: 0;
}

/* The region's total: same right-hand column as its sites' totals (the
   toggle's and the site buttons' right padding differ by the list's own
   inset, which the margin makes up). */
.site-modal-region-count {
  flex-shrink: 0;
  margin-right: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.site-modal-region-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.site-modal-region-chevron {
  transition: transform 0.15s ease;
}

.site-modal-region[data-expanded="true"] .site-modal-region-chevron {
  transform: rotate(180deg);
}

.site-modal-region[data-active="true"] .site-modal-region-chevron {
  color: var(--color-accent);
}

.site-modal-region-sites {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0 0.35rem 0.6rem;
}

.site-modal-region[data-expanded="false"] .site-modal-region-sites {
  display: none;
}

.site-modal-site {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.site-modal-site:hover {
  background: var(--color-bg-subtle);
}

.site-modal-site-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f8f4e;
}

.site-modal-site-name {
  flex: 1;
  min-width: 0;
}

/* Each site's total, right-aligned so the numbers line up down the list. */
.site-modal-site-count {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text-muted);
}

.site-modal-site[aria-current="true"] .site-modal-site-count {
  color: inherit;
}

.site-modal-site[aria-current="true"] {
  background: rgba(10, 54, 98, 0.08);
  font-weight: 600;
  color: var(--color-accent);
}

.site-modal-site[aria-current="true"] .site-modal-site-dot {
  background: var(--color-accent);
}

.site-modal-detail {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1.75rem;
  min-height: 0;
}

.site-modal-detail-region {
  flex-shrink: 0;
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site-modal-detail-name {
  flex-shrink: 0;
  margin: 0 0 1rem;
  font-size: 1.5rem;
}

.site-modal-chart-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

/* The chart wrapper is the only flexible element between the header text
   and the stat cards: it grows to fill available vertical space (up to
   its max-height) on tall viewports and shrinks first (down to its
   min-height) on short ones, before the panel as a whole starts
   scrolling. See renderSiteChart in recruitment.js, which recomputes the
   chart's internal viewBox height to match so the SVG fills this box
   exactly without distorting. */
.site-modal-chart-wrap {
  flex: 1 1 auto;
  min-height: 220px;
  max-height: 420px;
  overflow: hidden;
}

.chart-wrap.site-modal-chart-wrap svg {
  height: 100%;
}

.site-modal-chart-label {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

/* Time-range control (3M/6M/12M/All) — shared between the homepage
   recruitment chart and the per-site chart in the "Recruitment data by
   site" modal. */

.time-filter {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
}

.time-filter-btn {
  border: none;
  background: none;
  border-radius: 6px;
  padding: 0.25rem 0.65rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}

.time-filter-btn:hover {
  color: var(--color-text);
}

.time-filter-btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: #fff;
}

.site-modal-stats {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.site-modal-stat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--color-bg-subtle);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}

.site-modal-stat-value {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.site-modal-stat-label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  max-width: 11ch;
}

.site-modal-stat-sublabel {
  display: block;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  opacity: 0.75;
}

.site-modal-stat-icon {
  flex-shrink: 0;
  align-self: center;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

/* Mobile-only fold-out: below 640px, .site-modal-mobile-toggle and
   .site-modal-region-list (both normally part of the desktop sidebar —
   see .site-modal-regions above) are repositioned into a collapsed
   toggle bar that expands into an overlay panel on tap, so the chart
   gets the full width instead of sharing it with an always-open
   sidebar. See the media query below and setMobilePickerExpanded in
   recruitment.js. */

@media (max-width: 640px) {
  .site-modal-overlay {
    /* Small, safe-area-aware margin so the modal never touches the
       screen edges — and never gets clipped by a phone's home-indicator
       or notch — on any device, instead of the desktop's fixed 1.5rem. */
    padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem
      max(0.75rem, env(safe-area-inset-bottom));
  }

  .site-modal {
    /* dvh accounts for the mobile browser's address bar showing/hiding,
       which a plain vh value doesn't — that mismatch was clipping the
       bottom of the modal on phones. The vh line is a fallback for
       browsers without dvh support; the dvh line overrides it when
       supported. A maximum, not a fixed height: the modal is only as tall
       as its content (see .site-modal-chart-wrap below, which takes the
       spare room first), so a tall phone doesn't get a blank white area
       under the stat cards. */
    height: auto;
    max-height: 90vh;
    max-height: 90dvh;
    /* The chart's height on phones — see .site-modal-chart-wrap below for
       how it's arrived at. A variable because the fold-out site list's
       maximum height is derived from it too. */
    --site-modal-chart-height: clamp(170px, calc(90vh - 360px), 300px);
  }

  @supports (height: 1dvh) {
    .site-modal {
      --site-modal-chart-height: clamp(170px, calc(90dvh - 360px), 300px);
    }
  }

  .site-modal-body {
    /* A column — site picker on top, detail below — sized by its content
       now that the modal itself is (see above). On a phone too short for
       everything, the detail area is the part that shrinks and scrolls
       (min-height: 0 lets it), so the stat cards stay reachable instead of
       being cut off at the modal's bottom edge. */
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    /* Not hidden: the fold-out region list below is positioned absolute
       and needs to be able to overlap the chart beneath it instead of
       being clipped at the body's own edge. */
    overflow: visible;
  }

  .site-modal-regions {
    position: relative;
    display: block;
    flex-shrink: 0;
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    padding: 0.6rem 1rem 0.75rem;
  }

  .site-modal-header {
    padding: 0.85rem 2.75rem 0.7rem 1rem;
    gap: 0.6rem;
  }

  .site-modal-icon {
    width: 38px;
    height: 38px;
  }

  .site-modal-icon img {
    width: 18px;
    height: 18px;
  }

  .site-modal-header h2 {
    font-size: 1.05rem;
  }

  .site-modal-subtitle {
    display: none;
  }

  .site-modal-detail {
    height: auto;
    flex: 0 1 auto;
    min-height: 0;
    padding: 0.75rem 0.85rem 0.85rem;
  }

  .site-modal-detail-region {
    font-size: 0.7rem;
    margin-bottom: 0.1rem;
  }

  .site-modal-detail-name {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
  }

  .site-modal-chart-label {
    font-size: 0.82rem;
  }

  .time-filter-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
  }

  /* An explicit height, because the modal is content-sized here and so
     has no spare space for a flexible chart to grow into. It takes what
     the modal's 90dvh leaves once everything else is laid out — header,
     site picker, headings and stat cards come to about 345px with the
     (taller) Danish labels, plus a little breathing room — so the stat
     row below always stays fully visible on short phones. Capped at
     300px: on a tall phone a chart much taller than it is wide reads
     oddly, and the modal simply ends up shorter instead. */
  .site-modal-chart-wrap {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    height: var(--site-modal-chart-height);
  }

  .site-modal-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-top: 0.75rem;
  }

  .site-modal-stat {
    padding: 0.5rem 0.4rem;
    gap: 0.3rem;
  }

  .site-modal-stat-value {
    font-size: 1.05rem;
  }

  .site-modal-stat-label {
    font-size: 0.7rem;
    max-width: none;
  }

  .site-modal-stat-sublabel {
    font-size: 0.7rem;
  }

  .site-modal-stat-icon {
    width: 22px;
    height: 22px;
  }

  /* The toggle bar always sits at the top of the fold-out region; tapping
     it reveals .site-modal-region-list — the exact same region/site
     accordion markup used on desktop (see renderRegions in
     recruitment.js) — as an overlay panel instead of native <select>
     chrome, so it matches the rest of the site's design. */
  .site-modal-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(10, 20, 30, 0.06);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-accent);
    cursor: pointer;
  }

  .site-modal-regions[data-mobile-expanded="true"] .site-modal-mobile-toggle {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(10, 54, 98, 0.12);
  }

  .site-modal-mobile-toggle-chevron {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--color-accent);
    transition: transform 0.15s ease;
  }

  .site-modal-regions[data-mobile-expanded="true"] .site-modal-mobile-toggle-chevron {
    transform: rotate(180deg);
  }

  .site-modal-region-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 1rem;
    right: 1rem;
    z-index: 30;
    margin-top: 0.4rem;
    /* Must end inside the modal, which clips it. Below the picker the
       modal holds the chart plus about 205px of headings, stat cards and
       padding; the list may use that minus a small gap at the bottom. It
       scrolls when it's longer. */
    max-height: calc(var(--site-modal-chart-height) + 185px);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(10, 20, 30, 0.2);
  }

  .site-modal-regions[data-mobile-expanded="true"] .site-modal-region-list {
    display: block;
  }
}

/* Utility */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}