/* ============================================================================
   RareTrial design system  (css/rt.css)
   Science meeting sunlight. Luminous, warm, calm, trustworthy.
   No build step. One file. Tokens first, then base, then components.
   Every colour pair used for text was checked for WCAG AA contrast by
   computation on 5 Sep 2026 (see ARCHITECTURE-AUDIT-2026-09-05.md).
   ============================================================================ */

:root {
  /* Ground. Pearl page, white surfaces, and five section tints so every chapter of a page reads as a new chapter. */
  --pearl:      #FAFAF7;
  --surface:    #FFFFFF;
  --surface-2:  #F3F6FB;
  --line:       #E2E8F1;
  --line-2:     #D1DAE7;
  --tint-sky:   #EAF4FF;   /* what is happening now */
  --tint-lilac: #F1ECFF;   /* My RareTrial, alerts */
  --tint-mint:  #E6FBF3;   /* explore conditions */
  --tint-warm:  #FFF1EA;   /* practical support, organisations */

  /* Ink (text). Checked by computation against pearl, white and all four tints. */
  --ink:        #15223B;   /* 13.7:1 or better everywhere */
  --ink-2:      #44506B;   /*  7.7:1 on pearl */
  --ink-3:      #52607F;   /*  4.6:1 on the warmest tint; secondary text only */

  /* Primary identity: aqua + blue + pearl. Fills are the bright values; text and buttons use the deep values. */
  --aqua:       #16C7D9;   /* fills, glows, large decorative only */
  --aqua-deep:  #0D7782;   /* text, 5.3:1 on white */
  --aqua-soft:  #E3F8FB;
  --aqua-glow:  rgba(22,199,217,.30);
  --blue:       #3461FF;   /* primary buttons, white text 4.9:1 */
  --blue-deep:  #325DF5;   /* blue text, 4.5:1 on tints */
  --blue-soft:  #EAF0FF;
  --blue-glow:  rgba(52,97,255,.22);
  --cobalt:     #2A4FD6;   /* gradient start, white text 6.6:1 */
  --teal:       #0A7F8C;   /* gradient end, white text 4.7:1 */

  /* Accents, used sparingly */
  --violet:      #A78BFA;  /* lilac fill */
  --violet-deep: #7360AC;  /* lilac text, 5.3:1 */
  --violet-soft: #F1ECFF;
  --violet-glow: rgba(167,139,250,.24);
  --coral:       #FF6F61;
  --coral-deep:  #B04D43;  /* 5.3:1 */
  --coral-soft:  #FFEDE9;
  --peach:       #FFC9B8;
  --sun:         #FFD65A;  /* accent only, never for text */
  --sun-soft:    #FFF6D6;
  --mint:        #86E7C4;
  --mint-soft:   #E6FBF3;

  /* Trial status system. Always paired with a text label. */
  --st-recruiting-fg: #0B7A47; --st-recruiting-bg: #E4F7EC;
  --st-notyet-fg:     #2456D6; --st-notyet-bg:     #E9EFFF;
  --st-active-fg:     #5646D6; --st-active-bg:     #EEEBFF;
  --st-completed-fg:  #55627D; --st-completed-bg:  #F0F2F6;
  --st-expanded-fg:   #A6501F; --st-expanded-bg:   #FFF0E6;
  --st-stopped-fg:    #B3261E; --st-stopped-bg:    #FDECEA;
  --st-invite-fg:     #0B7A7E; --st-invite-bg:     #E0F7F7;

  /* Type */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: .8125rem;  /* 13px */
  --fs-sm: .9375rem;  /* 15px */
  --fs-md: 1.0625rem; /* 17px, body */
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(1.75rem, 3.5vw, 2.25rem);
  --fs-3xl: clamp(2.25rem, 5vw, 3.25rem);
  --fs-hero: clamp(2.6rem, 7.5vw, 5rem);

  /* Space and shape */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --r-sm: .5rem; --r-md: .875rem; --r-lg: 1.25rem; --r-xl: 1.75rem; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15,30,61,.05), 0 2px 8px rgba(15,30,61,.05);
  --shadow-md: 0 4px 16px rgba(15,30,61,.07), 0 12px 40px rgba(15,30,61,.06);
  --shadow-lg: 0 10px 30px rgba(15,30,61,.10), 0 30px 80px rgba(15,30,61,.08);
  --glow-aqua: 0 0 0 4px var(--aqua-glow);
  --container: 72rem;
  --container-narrow: 46rem;
  --ease: cubic-bezier(.22,1,.36,1);
}

/* Size-matched fallbacks, measured 5 Sep 2026 with Playwright against the real
   fonts, so the swap from system font to web font moves nothing (CLS 0.192 -> ~0). */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 96.43%; ascent-override: 101.63%; descent-override: 26.96%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107.02%; ascent-override: 90.64%; descent-override: 22.43%; line-gap-override: 0%; }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--aqua-deep); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--ink); }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 var(--s-4); color: var(--ink); font-variation-settings: "SOFT" 60, "opsz" 72; }
h1 { font-size: var(--fs-hero); font-weight: 400; }
h2 { font-size: var(--fs-3xl); font-weight: 400; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
.lede { font-size: var(--fs-lg); color: var(--ink-2); line-height: 1.55; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--aqua-deep); margin-bottom: var(--s-3); }
.eyebrow.violet { color: var(--violet-deep); }
.eyebrow.coral { color: var(--coral-deep); }
.measure { max-width: 62ch; }
.center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Focus: visible, generous, never removed */
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; border-radius: var(--r-sm); }
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 1000; background: var(--ink); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-weight: 600; }
.skip-link:focus { top: var(--s-4); }

/* ---------------------------------------------------------------- layout */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }
.container.narrow { max-width: var(--container-narrow); }
.section { padding: var(--s-8) 0; }
.section.tight { padding: var(--s-6) 0; }
.section.alt { background: var(--surface-2); }
.stack > * + * { margin-top: var(--s-4); }
.stack.lg > * + * { margin-top: var(--s-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.cluster.between { justify-content: space-between; }
.grid { display: grid; gap: var(--s-4); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.split { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .split.even { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------ luminosity */
/* Soft coloured light behind heroes. Pure CSS, no images, reduce-motion safe. */
.glow-field { position: relative; isolation: isolate; overflow: hidden; }
.glow-field::before, .glow-field::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(64px); opacity: .75; pointer-events: none;
}
.glow-field::before { width: 42rem; height: 42rem; left: -12rem; top: -18rem; background: radial-gradient(closest-side, rgba(20,184,188,.35), transparent 70%); }
.glow-field::after  { width: 36rem; height: 36rem; right: -10rem; top: 2rem; background: radial-gradient(closest-side, rgba(124,108,246,.28), transparent 70%); }
.glow-field .orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(48px); pointer-events: none; }
.glow-field .orb.coral { width: 20rem; height: 20rem; background: radial-gradient(closest-side, rgba(255,122,89,.28), transparent 70%); left: 55%; bottom: -8rem; }
.glow-field .orb.sun   { width: 14rem; height: 14rem; background: radial-gradient(closest-side, rgba(255,200,69,.30), transparent 70%); left: 12%; bottom: -4rem; }
/* The glow is static by design. Animating large blurred layers repaints every
   frame and keeps low-end phones busy for the life of the page; measured as the
   cause of Lighthouse never reaching idle. Light and colour, without motion. */
.shine { background: linear-gradient(92deg, var(--aqua-deep), var(--blue-deep) 60%, var(--violet-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ------------------------------------------------- section chapters
   Alternating tints and a gradient close, so a scroll without reading still
   says "new section". Text inside stays ink; links stay deep tones. */
.bg-pearl { background: var(--pearl); }
.bg-sky   { background: linear-gradient(180deg, var(--tint-sky), #F6FAFF); }
.bg-lilac { background: linear-gradient(135deg, var(--tint-lilac), var(--blue-soft)); }
.bg-mint  { background: linear-gradient(180deg, var(--tint-mint), #F4FCF8); }
.bg-warm  { background: linear-gradient(180deg, var(--tint-warm), #FFF8F4); }
.bg-cobalt { background: linear-gradient(120deg, var(--cobalt), var(--teal)); color: #fff; }
.bg-cobalt h2, .bg-cobalt h3, .bg-cobalt p { color: #fff; }
.bg-cobalt a:not(.btn) { color: #fff; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); }
.section-head h2 { margin: 0; }
.section-head .eyebrow { margin-bottom: .35rem; }

/* Metric tiles: the number is the content */
.metric { background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.95); border-radius: var(--r-lg); padding: 1rem 1.15rem; box-shadow: 0 1px 2px rgba(21,34,59,.04); min-height: 7.25rem; display: flex; flex-direction: column; }
.metric .n { font-family: var(--font-display); font-size: 2.35rem; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.metric .n.blue { color: var(--blue-deep); } .metric .n.aqua { color: var(--aqua-deep); } .metric .n.violet { color: var(--violet-deep); } .metric .n.coral { color: var(--coral-deep); }
.metric .l { margin-top: .4rem; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; line-height: 1.35; }
.metric .src { margin-top: auto; padding-top: .35rem; font-size: var(--fs-xs); color: var(--ink-3); }
.metric.live .src::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--st-recruiting-fg); margin-right: .35rem; vertical-align: middle; }

/* Chips: a condition and its count in one tap */
.chip { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.5rem; padding: .4rem 1rem .4rem 1.05rem; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); transition: border-color .15s, transform .15s var(--ease), box-shadow .15s; }
.chip:hover { border-color: var(--aqua); transform: translateY(-1px); box-shadow: var(--shadow-sm); color: var(--ink); }
.chip .count { color: var(--aqua-deep); font-variant-numeric: tabular-nums; font-weight: 700; }
.chip .count.muted { color: var(--ink-3); font-weight: 500; }

/* Steps: three, numbered, one line each */
.steps3 { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-5); display: flex; flex-direction: column; gap: .6rem; }
.step .num { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; box-shadow: 0 6px 16px var(--blue-glow); }
.step h3 { margin: .35rem 0 0; font-size: 1.35rem; }
.step p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }

/* Preview window: show the product, do not describe it */
.preview { background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); border: 1px solid rgba(21,34,59,.06); overflow: hidden; }
.preview .bar { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.preview .bar i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line-2); display: inline-block; }
.preview .bar span { margin-left: .5rem; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; letter-spacing: .04em; }
.preview .body { padding: var(--s-5); }
.preview .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.preview .row:last-child { border-bottom: 0; }
.preview .row b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.preview .row .k { color: var(--ink-2); }
.preview .cond { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 .25rem; }

/* Category tiles */
.tiles { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .15s var(--ease), box-shadow .15s, border-color .15s; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--mint); color: var(--ink); }
.tile b { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; }
.tile span { font-size: var(--fs-xs); color: var(--ink-3); }

/* Support cards: icon, title, one line */
.support { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--r-lg); background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.95); text-decoration: none; color: var(--ink); transition: transform .15s var(--ease), box-shadow .15s; }
.support:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--ink); }
.support b { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; }
.support span { font-size: var(--fs-sm); color: var(--ink-2); }

/* Timeline for "what changed" */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem 1rem; padding: .65rem 0; border-bottom: 1px dashed var(--line-2); font-size: var(--fs-sm); color: var(--ink-2); }
.timeline li:last-child { border-bottom: 0; }
.timeline time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .timeline li { grid-template-columns: 1fr; gap: .1rem; } }

/* Checklists for "who might this be for" */
.check { list-style: none; margin: 0; padding: 0; }
.check li { position: relative; padding: .5rem 0 .5rem 1.9rem; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.check li:last-child { border-bottom: 0; }
.check li::before { content: "✓"; position: absolute; left: 0; top: .5rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; background: var(--st-recruiting-bg); color: var(--st-recruiting-fg); }
.check.out li::before { content: "✕"; background: var(--st-stopped-bg); color: var(--st-stopped-fg); }
.check.ask li::before { content: "?"; background: var(--sun-soft); color: #6B5200; }

/* Highlighted plain-language panel */
.panel-aqua { background: linear-gradient(135deg, var(--aqua-soft), #fff 75%); border: 1px solid rgba(22,199,217,.3); border-radius: var(--r-xl); padding: var(--s-6); }
.panel-lilac { background: linear-gradient(135deg, var(--tint-lilac), var(--blue-soft)); border: 1px solid rgba(167,139,250,.35); border-radius: var(--r-xl); padding: var(--s-6); }
.panel-warm { background: linear-gradient(135deg, var(--tint-warm), #fff 80%); border: 1px solid rgba(255,111,97,.25); border-radius: var(--r-xl); padding: var(--s-6); }
.glass { background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--shadow-md); }
.constellation { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; }

/* --------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251,250,247,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(227,232,240,.8); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.brand .mark { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: conic-gradient(from 200deg, var(--aqua), var(--violet), var(--coral), var(--sun), var(--aqua)); box-shadow: 0 0 0 3px #fff, 0 0 18px var(--aqua-glow); flex: none; }
.nav-links { display: none; align-items: center; gap: var(--s-2); }
.nav-links a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: var(--fs-sm); padding: .55rem .8rem; border-radius: var(--r-pill); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.nav-links a.cta { color: var(--aqua-deep); border: 1.5px solid var(--aqua-soft); background: #fff; }
.nav-links a.cta:hover { border-color: var(--aqua); }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; cursor: pointer; }
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.mobile-nav { display: none; border-top: 1px solid var(--line); background: #fff; }
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav a { display: block; padding: var(--s-4) var(--s-5); color: var(--ink); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-nav a:last-child { border-bottom: 0; }
.saved-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: var(--r-pill); background: var(--coral); color: #fff; font-size: .72rem; font-weight: 700; margin-left: .35rem; }
.saved-badge[data-count="0"] { display: none; }
@media (min-width: 56rem) { .nav-links { display: flex; } .nav-toggle, .mobile-nav { display: none !important; } }

/* -------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.9rem; padding: .7rem 1.35rem; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s, border-color .18s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px var(--blue-glow); }
.btn.primary:hover { background: var(--cobalt); box-shadow: 0 10px 26px var(--blue-glow); color: #fff; }
.btn.white { background: #fff; color: var(--cobalt); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.btn.white:hover { background: #F3F6FB; color: var(--cobalt); }
.btn.outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn.outline-white:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn.violet { background: var(--violet-deep); color: #fff; box-shadow: 0 6px 18px var(--violet-glow); }
.btn.violet:hover { background: #4A3BC4; color: #fff; }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--aqua); color: var(--aqua-deep); }
.btn.soft { background: var(--aqua-soft); color: var(--aqua-deep); }
.btn.soft:hover { background: #CFF2F2; }
.btn.coral { background: var(--coral-soft); color: var(--coral-deep); }
.btn.sm { min-height: 2.4rem; padding: .45rem 1rem; font-size: var(--fs-xs); }
.btn.lg { min-height: 3.4rem; padding: .9rem 1.8rem; font-size: var(--fs-md); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn .ico { width: 1.05em; height: 1.05em; }
.btn.saved { background: var(--coral-soft); color: var(--coral-deep); border-color: transparent; }
.link-btn { background: none; border: 0; padding: 0; color: var(--aqua-deep); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: .15em; }

/* ---------------------------------------------------------------- search */
.search {
  display: flex; align-items: center; gap: var(--s-2);
  background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--r-pill);
  padding: .4rem .4rem .4rem 1.25rem; box-shadow: var(--shadow-md);
  transition: box-shadow .2s var(--ease), border-color .2s;
  position: relative;
}
.search:focus-within { border-color: var(--aqua); box-shadow: var(--shadow-lg), var(--glow-aqua); }
.search.hero { padding: .55rem .55rem .55rem 1.5rem; }
.search .lens { width: 1.35rem; height: 1.35rem; color: var(--aqua-deep); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-md); color: var(--ink); padding: .65rem 0; }
.search.hero input { font-size: var(--fs-lg); }
.search input::placeholder { color: var(--ink-3); }
.search .btn { flex: none; }
@media (max-width: 40rem) { .search.hero { flex-wrap: wrap; border-radius: var(--r-xl); padding: .75rem; } .search.hero input { width: 100%; padding: .5rem .5rem; } .search.hero .btn { width: 100%; } .search.hero .lens { display: none; } }
.search-wrap { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; display: none; text-align: left; }
.suggest[data-open="true"] { display: block; }
.suggest [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; text-align: left; padding: .8rem 1.1rem; border: 0; background: #fff; cursor: pointer; color: var(--ink); font-size: var(--fs-sm); border-bottom: 1px solid var(--line); }
.suggest [role="option"]:last-child { border-bottom: 0; }
.suggest [role="option"][aria-selected="true"], .suggest [role="option"]:hover { background: var(--aqua-soft); }
.suggest mark { background: transparent; color: var(--aqua-deep); font-weight: 700; }
.suggest .cat { font-size: var(--fs-xs); color: var(--ink-3); flex: none; }
.suggest .foot { padding: .6rem 1.1rem; font-size: var(--fs-xs); color: var(--ink-3); background: var(--surface-2); }

/* ------------------------------------------------------------ pills/tags */
.pill { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.35rem; padding: .35rem .95rem; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: #fff; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.pill:hover { border-color: var(--aqua); color: var(--aqua-deep); }
.pill[aria-pressed="true"], .pill.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill.sm { min-height: 2rem; padding: .2rem .75rem; font-size: var(--fs-xs); }
.tag { display: inline-block; padding: .18rem .6rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 500; }
.tag.aqua { background: var(--aqua-soft); color: var(--aqua-deep); }
.tag.violet { background: var(--violet-soft); color: var(--violet-deep); }

/* Trial status badges. Text label always present. */
.status { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem .25rem .55rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.status.recruiting { color: var(--st-recruiting-fg); background: var(--st-recruiting-bg); }
.status.notyet     { color: var(--st-notyet-fg);     background: var(--st-notyet-bg); }
.status.active     { color: var(--st-active-fg);     background: var(--st-active-bg); }
.status.completed  { color: var(--st-completed-fg);  background: var(--st-completed-bg); }
.status.expanded   { color: var(--st-expanded-fg);   background: var(--st-expanded-bg); }
.status.stopped    { color: var(--st-stopped-fg);    background: var(--st-stopped-bg); }
.status.invite     { color: var(--st-invite-fg);     background: var(--st-invite-bg); }
.status.unknown    { color: var(--ink-2);            background: var(--surface-2); }
/* No infinite pulse on recruiting badges: twenty of them on a results page meant twenty repaints per frame. The green dot carries the meaning. */

/* ------------------------------------------------------------------ cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.card.hover:hover, a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
a.card { display: block; color: inherit; text-decoration: none; }
.card.soft { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.card.aqua { background: linear-gradient(135deg, var(--aqua-soft), #fff 70%); border-color: rgba(20,184,188,.25); }
.card.violet { background: linear-gradient(135deg, var(--violet-soft), #fff 70%); border-color: rgba(124,108,246,.25); }
.card.sun { background: linear-gradient(135deg, var(--sun-soft), #fff 70%); border-color: rgba(255,200,69,.35); }
.card.coral { background: linear-gradient(135deg, var(--coral-soft), #fff 70%); border-color: rgba(255,122,89,.3); }
.card .title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; line-height: 1.25; margin: 0 0 var(--s-2); color: var(--ink); }
.card-row { display: flex; gap: var(--s-4); align-items: flex-start; }
.icon-dot { width: 2.6rem; height: 2.6rem; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--aqua-soft); color: var(--aqua-deep); }
.icon-dot.violet { background: var(--violet-soft); color: var(--violet-deep); }
.icon-dot.coral { background: var(--coral-soft); color: var(--coral-deep); }
.icon-dot.sun { background: var(--sun-soft); color: #7A5A00; }
.icon-dot svg { width: 1.3rem; height: 1.3rem; }

/* Trial card */
.trial { display: block; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; position: relative; }
.trial:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.trial .head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: var(--s-3); }
.trial .head .nct { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.trial h3 { font-size: 1.2rem; margin: 0 0 var(--s-2); color: var(--ink); }
.trial .summary { color: var(--ink-2); font-size: var(--fs-sm); margin-bottom: var(--s-4); }
.trial .meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: var(--fs-sm); color: var(--ink-2); }
.trial .meta b { color: var(--ink); font-weight: 600; }
.trial .meta .k { color: var(--ink-3); }
.trial .changed { position: absolute; top: -.6rem; right: 1rem; background: var(--sun); color: var(--ink); font-size: .72rem; font-weight: 700; padding: .15rem .6rem; border-radius: var(--r-pill); }
.trial .save { position: absolute; top: .9rem; right: .9rem; }

/* Stat tiles */
/* Fixed heights: live figures replace baked ones after load and must not move the page (CLS). */
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); text-align: left; box-shadow: var(--shadow-sm); min-height: 9.75rem; display: flex; flex-direction: column; }
.stat .l { min-height: 2.9em; }
.stat .src { min-height: 1.3em; margin-top: auto; }
.stat .n { font-family: var(--font-display); font-size: 2.35rem; font-weight: 500; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat .n.aqua { color: var(--aqua-deep); }
.stat .n.violet { color: var(--violet-deep); }
.stat .n.coral { color: var(--coral-deep); }
.stat .l { margin-top: .35rem; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; }
.stat .src { margin-top: .35rem; font-size: var(--fs-xs); color: var(--ink-3); }
.stat.live .src::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--st-recruiting-fg); margin-right: .35rem; vertical-align: middle; }

/* ----------------------------------------------------------- zero states */
.zero { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-6); box-shadow: var(--shadow-sm); }
.zero.warn { border-color: rgba(196,85,47,.3); background: linear-gradient(180deg, var(--coral-soft), #fff 60%); }
.zero.info { border-color: rgba(20,184,188,.3); background: linear-gradient(180deg, var(--aqua-soft), #fff 60%); }
.zero h3 { font-size: var(--fs-xl); margin-bottom: var(--s-2); }
.zero p { color: var(--ink-2); }
.zero .actions { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-top: var(--s-5); }
.zero .actions a, .zero .actions button { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--fs-sm); cursor: pointer; text-align: left; }
.zero .actions a:hover, .zero .actions button:hover { border-color: var(--aqua); color: var(--aqua-deep); }
.zero .actions svg { width: 1.1rem; height: 1.1rem; color: var(--aqua-deep); flex: none; }

/* ---------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.field .hint { font-size: var(--fs-xs); color: var(--ink-3); }
.input { width: 100%; min-height: 2.9rem; padding: .65rem 1rem; border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: #fff; font: inherit; color: var(--ink); }
.input:focus { outline: 0; border-color: var(--aqua); box-shadow: var(--glow-aqua); }
.input::placeholder { color: var(--ink-3); }
.inline-form { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: stretch; }
.inline-form .input { flex: 1 1 14rem; }
.form-msg { margin-top: var(--s-3); font-size: var(--fs-sm); padding: .75rem 1rem; border-radius: var(--r-md); }
.form-msg.ok { background: var(--st-recruiting-bg); color: var(--st-recruiting-fg); }
.form-msg.err { background: var(--st-stopped-bg); color: var(--st-stopped-fg); }
.form-msg.info { background: var(--aqua-soft); color: var(--aqua-deep); }
.toggle { display: inline-flex; background: var(--surface-2); border-radius: var(--r-pill); padding: .25rem; gap: .25rem; }
.toggle button { border: 0; background: transparent; border-radius: var(--r-pill); padding: .45rem 1rem; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.toggle button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

/* ----------------------------------------------------------- misc blocks */
.breadcrumbs { font-size: var(--fs-sm); color: var(--ink-3); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.breadcrumbs li + li::before { content: "›"; margin-right: .35rem; color: var(--line-2); }
.breadcrumbs a { color: var(--ink-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--aqua-deep); }
.notice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-sm); }
.notice.sun { background: var(--sun-soft); color: var(--ink); }
.notice svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--aqua-deep); margin-top: .1rem; }
.divider { height: 1px; background: var(--line); border: 0; margin: var(--s-6) 0; }
.az { display: flex; flex-wrap: wrap; gap: .3rem; }
.az a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.az a:hover { border-color: var(--aqua); color: var(--aqua-deep); }
.az a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.list-rows { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.list-rows a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: .9rem 1.25rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.list-rows a:last-child { border-bottom: 0; }
.list-rows a:hover { background: var(--aqua-soft); }
.list-rows .go { color: var(--aqua-deep); font-size: var(--fs-xs); font-weight: 700; flex: none; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; font-size: var(--fs-sm); }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; color: var(--ink); font-weight: 500; }
.criteria { list-style: none; padding: 0; margin: 0; }
.criteria li { position: relative; padding: .55rem 0 .55rem 1.6rem; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.criteria li:last-child { border-bottom: 0; }
.criteria li::before { content: ""; position: absolute; left: .2rem; top: 1rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--aqua); }
.criteria.out li::before { background: var(--coral); }
.prose { max-width: 66ch; color: var(--ink-2); }
.prose h2, .prose h3 { color: var(--ink); margin-top: var(--s-6); }
.prose pre { white-space: pre-wrap; font: inherit; color: var(--ink-2); background: var(--surface-2); padding: var(--s-4); border-radius: var(--r-md); }
.toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: .75rem 1.1rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .2s, transform .2s var(--ease); z-index: 100; pointer-events: none; }
.toast[data-show="true"] { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Consent choice */
.consent { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 90; max-width: 30rem; margin: 0 auto; padding: .8rem 1rem; border-radius: var(--r-lg); font-size: var(--fs-xs); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.consent p { flex: 1 1 14rem; margin: 0; }
.consent .row { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (min-width: 40rem) { .consent { left: auto; right: 1.25rem; bottom: 1.25rem; font-size: var(--fs-sm); padding: var(--s-4) var(--s-5); } }

/* Skeletons */
.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); color: transparent !important; }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); transform: translateX(-100%); }
@media (prefers-reduced-motion: no-preference) { .skel::after { animation: shimmer 1.4s infinite; } @keyframes shimmer { to { transform: translateX(100%); } } }

/* Footer */
.site-footer { background: var(--ink); color: #C9D3E6; padding: var(--s-8) 0 var(--s-6); margin-top: var(--s-9); }
.site-footer a { color: #C9D3E6; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .cols { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.site-footer h4, .site-footer .h4 { color: #fff; font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--s-3); }
/* Links inside running text keep their underline so they are not identified by colour alone (WCAG 1.4.1). */
p a:not(.btn):not(.pill):not(.tag), li a:not(.btn):not(.pill):not(.tag), .notice a, .zero p a, .prose a { text-decoration: underline; text-decoration-color: rgba(9,116,119,.45); }
p a:not(.btn):not(.pill):not(.tag):hover, li a:not(.btn):not(.pill):not(.tag):hover { text-decoration-color: currentColor; }
.site-footer li a, .breadcrumbs a, .nav-links a, .mobile-nav a { text-decoration: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: var(--fs-sm); }
.site-footer .legal { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-xs); color: #9FB0CC; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; }
.site-footer .legal a { color: #5FD4D7; text-decoration: underline; text-decoration-color: rgba(95,212,215,.5); }
.site-footer .brand { color: #fff; }

/* Reveal on scroll, opt-in via [data-reveal]. Reduced-motion users see everything immediately. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  [data-reveal].in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Print: trial pages should print cleanly */
@media print { .site-header, .site-footer, .consent, .toast, .btn, .no-print { display: none !important; } body { background: #fff; } .trial, .card, .zero { box-shadow: none; break-inside: avoid; } }

/* RareTrial Signal: one motif for "something in the research changed".
   The dot is always visible and always carries a text label in the markup, so
   the meaning never depends on the animation. The pulse is added only where
   motion is welcome; the global reduced-motion rule above already disables all
   animation, and the static dot is the intended fallback, not a degraded one. */
.rt-signal { display: inline-flex; align-items: center; gap: .4rem; vertical-align: middle; }
.rt-signal > i { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: var(--aqua); flex: none; }
.rt-signal > b { font-size: var(--fs-xs, .78rem); font-weight: 600; color: var(--aqua-deep); letter-spacing: .01em; }
.rt-signal.muted > i { background: var(--ink-3, #7b8794); }
.rt-signal.muted > b { color: var(--ink-2, #4a5563); }
@media (prefers-reduced-motion: no-preference) {
  .rt-signal > i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--aqua); animation: rt-pulse 2.4s ease-out infinite; }
  @keyframes rt-pulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
}

/* A followed condition reads as an active state, not another call to action. */
.btn.following { background: var(--aqua-soft); border-color: var(--aqua-deep); color: var(--aqua-deep); }
.btn.following::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--aqua-deep); margin-right: .5rem; flex: none; }

/* Utility parity with the Tailwind CDN the eleven content pages still load.
   Without this, .hidden means nothing when that CDN is blocked or slow, and
   /partners renders its success AND error boxes to a visitor who submitted
   nothing. A confirmation nobody earned is worse than no page at all. */
.hidden { display: none !important; }

/* Long condition names must wrap rather than run off the screen. The primary
   call to action on a disease page ("Search all <condition> trials") is nowrap
   like every button, which clipped it mid-word at 390px for any name longer
   than about "Marfan Syndrome", and pushed the alerts button clean off the
   viewport on conditions like cystic fibrosis. Scoped to buttons sitting in a
   cluster so ordinary short buttons keep their single line. */
.cluster > .btn { white-space: normal; max-width: 100%; text-align: center; }

/* Status pills are nowrap because a trial status is two or three words. The
   drug pipeline reuses the same class for approval labels like "Approved:
   Elexacaftor (Elexacaftor component of ...)", which at 400px wide pushed the
   whole disease page past the viewport on conditions such as cystic fibrosis
   and Huntington's. Long ones now wrap instead of widening the page. */
.status { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }