/* UTMB Clinical Trials Search: Design System
   Tokens: primary UTMB blue, neutral slate, semantic statuses
   Type:   Inter (UI) + Source Serif 4 (display)
*/

:root {
  /* Brand: UTMB Health official palette */
  --utmb-blue: #003767;        /* navy from the official mark */
  --utmb-blue-700: #002951;
  --utmb-blue-800: #001B3A;
  --utmb-blue-50: #E6ECF3;
  --utmb-blue-100: #C2D0DF;
  --utmb-blue-600: #1D4E80;    /* slightly lighter for hover lift on dark surfaces */

  --utmb-orange: #CA4B0C;      /* accent from the mark */
  --utmb-orange-50: #FBEEE6;
  --utmb-orange-700: #A53D09;

  /* Neutrals */
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* Semantic */
  --success-50: #ECFDF5;
  --success-600: #059669;
  --success-700: #047857;
  --info-50: #EFF6FF;
  --info-600: #2563EB;
  --info-700: #1D4ED8;
  --warning-50: #FFFBEB;
  --warning-600: #D97706;
  --warning-700: #B45309;
  --danger-50: #FEF2F2;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;

  /* Surfaces */
  --bg: #FFFFFF;
  --bg-muted: var(--slate-50);
  --surface: #FFFFFF;
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --text: var(--slate-900);
  --text-muted: var(--slate-600);
  --text-subtle: var(--slate-500);

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 18px 40px -12px rgba(0, 62, 105, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Layout */
  --container: 1500px;
  --header-height: 76px;

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  /* alias: existing heading rules reference --font-serif, so they retheme to the display font */
  --font-serif: var(--font-display);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-muted);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--utmb-blue);
  text-decoration: none;
  transition: color 150ms ease;
}
a:hover { color: var(--utmb-blue-700); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(0, 85, 140, 0.35);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button { font-family: inherit; }

img { max-width: 100%; height: auto; display: block; }

/* ------- Skip link ------- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--utmb-blue);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 100;
  font-weight: 600;
}
.skip-link:focus { top: 8px; color: #fff; }

/* ------- Header ------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: var(--shadow-xs);
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--utmb-blue-800);
  font-weight: 600;
}
.brand:hover { color: var(--utmb-blue-800); }
.brand-logo {
  height: 40px;
  width: auto;
  display: block;
}
.brand-divider {
  height: 32px;
  width: 1px;
  background: var(--border);
}
.brand-product {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-product-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--slate-900);
  letter-spacing: -0.01em;
}
.brand-product-sub {
  font-size: 0.78rem;
  color: var(--text-subtle);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.header-nav a {
  color: var(--slate-700);
  font-weight: 500;
  font-size: 0.94rem;
}
.header-nav a:hover { color: var(--utmb-blue); }
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  background: var(--utmb-blue);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 40px;
  border: 1px solid var(--utmb-blue-700);
}
.header-cta:hover { background: var(--utmb-blue-700); }

/* ------- Layout shells ------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

main { min-height: calc(100vh - var(--header-height) - 120px); }

/* ------- Hero ------- */
.hero {
  position: relative;
  padding: 88px 0 96px;
  color: #fff;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(16, 185, 129, 0.18), transparent 60%),
    radial-gradient(800px 480px at 100% 100%, rgba(202, 75, 12, 0.14), transparent 60%),
    linear-gradient(160deg, #06222C 0%, #0B4456 45%, #0E7490 100%);
  overflow: hidden;
}
.hero::before {
  /* subtle dot grid adds depth without being noisy */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  opacity: 0.5;
}
.hero-grid {
  position: relative;   /* sit above the ::before dot-grid layer */
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: end;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--utmb-orange-50);
  color: var(--utmb-orange-700);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(202, 75, 12, 0.18);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 18px;
  max-width: 22ch;
}
.hero-title-accent {
  display: block;
  background: linear-gradient(90deg, #6EE7B7 0%, #7DD3FC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
  margin-top: 6px;
}
.hero p.lede {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 60ch;
  margin: 0 0 28px;
}

/* ------- Search card ------- */
.search-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  color: var(--text);          /* anchor card text to dark; hero sets color:#fff */
}
.search-card h2 {
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  margin: 0 0 16px;
  font-weight: 600;
}
.search-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: end;            /* line every input up on a common baseline */
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;                /* allow inputs to shrink in narrow columns */
}
.field-condition  { grid-column: span 6; }
.field-location   { grid-column: span 6; }
.field-status     { grid-column: span 3; }
.field-phase      { grid-column: span 3; }
.field-study-type { grid-column: span 3; }
.field-term       { grid-column: span 3; }
.field > label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--slate-700);
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;            /* same height across fields → inputs align */
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.field .helper {
  font-size: 0.78rem;
  color: var(--text-subtle);
}
.input,
.select {
  width: 100%;
  height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 0 14px;
  font-size: 0.97rem;
  background: #fff;
  color: var(--slate-900);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input::placeholder { color: var(--slate-400); }
.input:hover, .select:hover { border-color: var(--slate-400); }
.input:focus, .select:focus {
  border-color: var(--utmb-blue);
  box-shadow: 0 0 0 4px rgba(0, 85, 140, 0.12);
  outline: none;
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2364748B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.search-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.search-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-subtle);
  font-size: 0.85rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.97rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  min-width: 44px;
}
.btn-primary {
  background: var(--utmb-blue);
  color: #fff;
  border-color: var(--utmb-blue-700);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--utmb-blue-700); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary {
  background: #fff;
  color: var(--slate-700);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--slate-50); }
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  height: auto;
  padding: 6px 10px;
}
.btn-ghost:hover { color: var(--utmb-blue); background: var(--utmb-blue-50); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ------- Trial Finder promo (homepage) ------- */
.finder-promo {
  position: relative;
  padding: 76px 0;
  background:
    radial-gradient(900px 480px at 12% 0%, rgba(0, 55, 103, 0.10), transparent 60%),
    radial-gradient(700px 420px at 100% 100%, rgba(202, 75, 12, 0.08), transparent 60%),
    linear-gradient(180deg, var(--utmb-blue-50) 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--border);
}
.finder-promo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.finder-promo-copy h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--slate-900);
  margin: 18px 0 14px;
  max-width: 22ch;
}
.finder-promo-copy .lede {
  font-size: 1.02rem;
  color: var(--text-muted);
  margin: 0 0 22px;
  max-width: 56ch;
}
.finder-promo-points {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  gap: 10px;
}
.finder-promo-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--slate-800);
  font-size: 0.97rem;
  line-height: 1.5;
}
.finder-promo-points svg {
  color: var(--success-600);
  flex: 0 0 auto;
  margin-top: 2px;
}
.finder-promo-cta {
  height: 50px;
  padding: 0 22px;
  font-size: 1rem;
}

/* Mock preview stack */
.finder-promo-preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.finder-preview-extract {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--utmb-blue);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-md);
}
.finder-preview-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--utmb-blue-700);
  margin-bottom: 4px;
}
.finder-preview-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--slate-900);
  margin-bottom: 12px;
}
.finder-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.finder-preview-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.finder-preview-tag.stage {
  background: var(--utmb-orange-50);
  color: var(--utmb-orange-700);
  border-color: rgba(202, 75, 12, 0.25);
}
.finder-preview-tag.bio {
  background: var(--utmb-blue-50);
  color: var(--utmb-blue-700);
  border-color: var(--utmb-blue-100);
}
.finder-preview-tag.demo {
  background: var(--slate-100);
  color: var(--slate-700);
  border-color: var(--slate-200);
}

.finder-preview-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  transition: transform 200ms ease;
}
.finder-preview-card:hover { transform: translateY(-2px); }
.finder-preview-card.subdued {
  background: #FFF8F8;
  border-color: rgba(220, 38, 38, 0.18);
}
.finder-preview-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.finder-preview-card-title {
  font-weight: 600;
  color: var(--slate-900);
  font-size: 0.98rem;
  line-height: 1.35;
}
.finder-preview-card-title em {
  font-style: normal;
  background: #FEF3C7;
  color: #78350F;
  padding: 0 4px;
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 rgba(217, 119, 6, 0.25);
}
.finder-preview-card-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.finder-preview-card.subdued .finder-preview-card-meta strong {
  color: var(--danger-700);
}

@media (max-width: 960px) {
  .finder-promo { padding: 56px 0; }
  .finder-promo-grid { grid-template-columns: 1fr; gap: 28px; }
  .finder-promo-copy h2 { max-width: none; }
}

/* =========================================================
   AI HERO — star section on the home page.
   Visually the heaviest block: dark gradient, large type, 3-step
   demo flow on the right (Click → Progress → Verdict).
   ========================================================= */
.ai-hero {
  position: relative;
  padding: 88px 0 96px;
  color: #fff;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(16, 185, 129, 0.18), transparent 60%),
    radial-gradient(800px 480px at 100% 100%, rgba(202, 75, 12, 0.14), transparent 60%),
    linear-gradient(160deg, #00264D 0%, #003767 45%, #0E5C8C 100%);
  overflow: hidden;
}
.ai-hero::before {
  /* subtle grid noise to add depth without being noisy */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  opacity: 0.5;
}
.ai-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}

.ai-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.18);
  color: #6EE7B7;
  border: 1px solid rgba(16, 185, 129, 0.40);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 22px;
}
.ai-hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: ai-hero-pulse 2.2s ease-out infinite;
}
@keyframes ai-hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ai-hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 18px;
  max-width: 18ch;
}
.ai-hero-title-sub {
  display: block;
  background: linear-gradient(90deg, #6EE7B7 0%, #93C5FD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-weight: 500;
  margin-top: 6px;
}
.ai-hero-lede {
  font-size: 1.12rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 24px;
  max-width: 52ch;
}

.ai-hero-ondemand {
  display: flex;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.94rem;
  line-height: 1.5;
}
.ai-hero-ondemand svg {
  flex: 0 0 20px;
  color: #6EE7B7;
  margin-top: 2px;
}
.ai-hero-ondemand strong { color: #fff; display: block; margin-bottom: 2px; }
.ai-hero-ondemand em {
  font-style: normal;
  font-weight: 600;
  color: #93C5FD;
}

.ai-hero-points {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 14px;
}
.ai-hero-points li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.96rem;
  line-height: 1.45;
}
.ai-hero-points li strong { color: #fff; }
.ai-hero-points li em { font-style: normal; color: #6EE7B7; font-weight: 600; }
.ai-hero-point-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #6EE7B7;
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ai-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.ai-hero-cta-primary {
  height: 52px;
  padding: 0 24px;
  font-size: 1.02rem;
  background: linear-gradient(180deg, #10B981 0%, #059669 100%);
  border-color: transparent;
  box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.5);
}
.ai-hero-cta-primary:hover {
  background: linear-gradient(180deg, #34D399 0%, #10B981 100%);
}
.ai-hero-cta-primary svg { margin-left: 6px; }
.ai-hero-cta-secondary {
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: transparent;
  height: 52px;
  padding: 0 20px;
}
.ai-hero-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ----- 3-step demo flow ----- */
.ai-hero-demo {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  align-items: stretch;
  gap: 14px;
}
.ai-hero-demo-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ai-hero-demo-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6EE7B7;
}
.ai-hero-demo-card {
  background: rgba(255, 255, 255, 0.96);
  color: var(--slate-900);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.55);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.ai-hero-demo-card-title {
  font-weight: 600;
  font-size: 0.93rem;
  line-height: 1.35;
  color: var(--slate-900);
}
.ai-hero-demo-card-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.ai-hero-demo-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #10B981 0%, #059669 100%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  cursor: default;
  align-self: flex-start;
  box-shadow: 0 8px 20px -8px rgba(16, 185, 129, 0.7);
}
.ai-hero-demo-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.ai-hero-demo-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
}

.ai-hero-demo-progress { gap: 14px; }
.ai-hero-demo-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  font-size: 0.85rem;
}
.ai-hero-demo-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--slate-500);
}
.ai-hero-demo-steps li.done { color: var(--slate-800); }
.ai-hero-demo-steps li.done svg { color: var(--success-600); }
.ai-hero-demo-steps li.active {
  color: var(--slate-900);
  font-weight: 600;
}
.ai-hero-demo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--slate-200);
  display: inline-block;
}
.ai-hero-demo-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--utmb-blue-100);
  border-top-color: var(--utmb-blue);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  display: inline-block;
}
.ai-hero-demo-elapsed {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.ai-hero-demo-result {
  position: relative;
  padding-left: 18px;
}
.ai-hero-demo-result::before {
  content: "";
  position: absolute;
  inset: 16px auto 16px 0;
  width: 4px;
  border-radius: 2px;
  background: #10B981;
}
.ai-hero-demo-result-head { display: flex; }
.ai-hero-demo-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
}
.ai-hero-demo-pill.verdict-likely_eligible { background: #10B981; }
.ai-hero-demo-result-headline {
  margin: 0;
  font-size: 0.88rem;
  color: var(--slate-800);
  line-height: 1.45;
}
.ai-hero-demo-result-meta {
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

@media (max-width: 1100px) {
  .ai-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .ai-hero-demo {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ai-hero-demo-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
}
@media (max-width: 960px) {
  .ai-hero { padding: 64px 0 72px; }
  .ai-hero-title { font-size: clamp(1.9rem, 7vw, 2.4rem); }
  .ai-hero-lede { font-size: 1rem; }
}

/* ------- Feature strip (homepage) ------- */
.features {
  padding: 72px 0;
}
.features-header {
  text-align: center;
  margin-bottom: 40px;
}
.features-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--slate-900);
}
.features-header p {
  color: var(--text-muted);
  margin: 0;
  max-width: 60ch;
  margin-inline: auto;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.feature {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.feature:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--utmb-blue-50);
  color: var(--utmb-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.feature h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--slate-900);
}
.feature p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ------- Results layout ------- */
.page-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 28px 0 22px;
}
.page-header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--slate-900);
}
.result-count {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 4px;
}
.result-count strong { color: var(--slate-900); }

.results-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 32px;
  padding: 32px 0 64px;
}
.filters {
  position: sticky;
  top: calc(var(--header-height) + 16px);
  align-self: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-xs);
}
.filters h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  margin: 0 0 14px;
  font-weight: 600;
}
.filters .field { margin-bottom: 14px; }
.filters .filters-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.filters .filters-actions .btn { flex: 1; height: 42px; padding: 0 14px; font-size: 0.9rem; }

.results { min-width: 0; }

.trial-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  margin-bottom: 14px;
  transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
  box-shadow: var(--shadow-xs);
  /* No overflow:hidden — the rank-badge tooltip needs to escape this
     container. The AI verdict banner's own border-radius already
     matches the card's top corners, so nothing visible bleeds past. */
}
.trial-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--slate-300);
}
.trial-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

/* Rank badge — populated by paintRankBadges() with "#N" + a custom
   hover tooltip explaining which signals drove the rank. We use a
   DOM-based tooltip (not native `title`) so it can appear instantly —
   browsers impose a ~700ms delay on native tooltips that makes the
   ranking feel unresponsive. */
.trial-rank-badge {
  position: relative;        /* anchor for the tooltip */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  background: var(--utmb-blue, #003b71);
  color: #fff;
  cursor: help;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  letter-spacing: -0.01em;
  transition: background 120ms ease;
}
.trial-rank-badge:hover,
.trial-rank-badge:focus-visible { background: #002a52; }
.trial-rank-badge:focus-visible { outline: 2px solid var(--utmb-blue, #003b71); outline-offset: 2px; }
.trial-rank-badge:empty { display: none; }

/* Tooltip — instant-show on hover/focus. Anchored to top-left of the
   badge, opens *below* the badge so it doesn't slide off the top of
   the page for the first card. */
.trial-rank-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 230px;
  max-width: 320px;
  padding: 10px 12px;
  background: #0f172a;             /* slate-900 */
  color: #f8fafc;                  /* slate-50 */
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.30),
              0 1px 3px rgba(15, 23, 42, 0.20);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  /* Hidden by default — appear instantly on hover/focus */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 60ms ease-out, transform 60ms ease-out, visibility 0s linear 60ms;
}
.trial-rank-tooltip::before {
  /* upward arrow */
  content: "";
  position: absolute;
  top: -5px;
  left: 14px;
  width: 10px;
  height: 10px;
  background: #0f172a;
  transform: rotate(45deg);
  border-radius: 1px;
}
.trial-rank-badge:hover .trial-rank-tooltip,
.trial-rank-badge:focus-visible .trial-rank-tooltip,
.trial-rank-badge:focus-within .trial-rank-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 60ms ease-out, transform 60ms ease-out, visibility 0s;
}
.trial-rank-tooltip-head {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(248, 250, 252, 0.12);
  color: #f8fafc;
}
.trial-rank-tooltip-row {
  margin: 3px 0;
  color: rgba(248, 250, 252, 0.92);
}
.trial-rank-tooltip-row strong {
  color: #fff;
  font-weight: 600;
}
.trial-rank-tooltip-muted { color: rgba(248, 250, 252, 0.55); font-style: italic; }
.trial-rank-tooltip-meta {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(248, 250, 252, 0.12);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.75);
  vertical-align: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .trial-rank-tooltip { transition: opacity 0s, visibility 0s, transform 0s; }
}
.trial-card h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--slate-900);
  letter-spacing: -0.005em;
  /* Take the flexible space inside .trial-card-head so the title wraps
     instead of pushing the pills into a squished column. min-width:0 is
     required for flex children that contain inline content to be
     allowed to shrink below their intrinsic width. */
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.trial-card h3 a { color: inherit; }
.trial-card h3 a:hover { color: var(--utmb-blue); }
.trial-card .summary {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 8px 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trial-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--text-muted);
  font-size: 0.86rem;
}
.trial-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trial-meta-item svg { color: var(--slate-400); }
.trial-meta-item.is-matched {
  color: var(--success-700);
  font-weight: 600;
}
.trial-meta-item.is-matched svg { color: var(--success-600); }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 14px;
}
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--slate-100);
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
}
.tag.phase {
  background: var(--utmb-blue-50);
  color: var(--utmb-blue-700);
  border-color: var(--utmb-blue-100);
}

/* status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-pill::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.status-pill.success { background: var(--success-50); color: var(--success-700); border-color: rgba(5, 150, 105, 0.2); }
.status-pill.info    { background: var(--info-50);    color: var(--info-700);    border-color: rgba(37, 99, 235, 0.2); }
.status-pill.warning { background: var(--warning-50); color: var(--warning-700); border-color: rgba(217, 119, 6, 0.25); }
.status-pill.danger  { background: var(--danger-50);  color: var(--danger-700);  border-color: rgba(220, 38, 38, 0.2); }
.status-pill.neutral { background: var(--slate-100);  color: var(--slate-700);   border-color: var(--slate-200); }

/* pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 12px;
}
.pagination .hint { color: var(--text-subtle); font-size: 0.88rem; }

/* empty / error states */
.empty,
.error-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 28px;
  text-align: center;
  color: var(--text-muted);
}
.empty h3,
.error-box h3 {
  margin: 8px 0 6px;
  color: var(--slate-900);
  font-size: 1.15rem;
}
.empty p,
.error-box p { margin: 0 auto; max-width: 52ch; }

.error-box {
  border-color: rgba(220, 38, 38, 0.25);
  background: var(--danger-50);
  color: var(--danger-700);
  text-align: left;
}
.error-box h3 { color: var(--danger-700); }

.inline-error {
  margin-top: 14px;
  background: var(--danger-50);
  color: var(--danger-700);
  border: 1px solid rgba(220, 38, 38, 0.25);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
}

/* ------- Match panel (Trial Finder → Trial detail) ------- */
/* ── AI Clinical Assessment panel on trial detail ──
   Visually outranks the deterministic match panel since the AI verdict is
   the authoritative call when both are present. */
.ai-panel {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 26px 18px;
  margin: 16px 0 24px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.ai-panel::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #6366F1 0%, #8B5CF6 100%);
}
.ai-panel.verdict-eligible::before          { background: var(--success-600); }
.ai-panel.verdict-likely_eligible::before   { background: #10B981; }
.ai-panel.verdict-uncertain::before         { background: var(--slate-500); }
.ai-panel.verdict-likely_ineligible::before { background: var(--warning-600); }
.ai-panel.verdict-ineligible::before {
  background: linear-gradient(180deg, #DC2626 0%, #B91C1C 50%, #991B1B 100%);
}

.ai-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ai-panel-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: #6366F1;
  margin-bottom: 4px;
}
.ai-panel.verdict-eligible          .ai-panel-eyebrow { color: var(--success-700); }
.ai-panel.verdict-likely_eligible   .ai-panel-eyebrow { color: var(--success-700); }
.ai-panel.verdict-uncertain         .ai-panel-eyebrow { color: var(--slate-700); }
.ai-panel.verdict-likely_ineligible .ai-panel-eyebrow { color: var(--warning-700); }
.ai-panel.verdict-ineligible        .ai-panel-eyebrow { color: var(--danger-700); }
.ai-panel-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--slate-900);
  margin: 0;
}
.ai-panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-panel-verdict {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  border: 1px solid transparent;
}
.ai-panel-verdict.verdict-eligible          { background: var(--success-600); }
.ai-panel-verdict.verdict-likely_eligible   { background: #10B981; }
.ai-panel-verdict.verdict-uncertain         { background: var(--slate-500); }
.ai-panel-verdict.verdict-likely_ineligible { background: var(--warning-600); }
.ai-panel-verdict.verdict-ineligible {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 60%, #991B1B 100%);
}
.ai-panel-conf {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ai-panel-headline {
  font-size: 1.08rem;
  font-weight: 500;
  font-style: italic;
  color: var(--slate-900);
  margin: 0 0 18px;
  padding: 10px 16px;
  background: var(--slate-50);
  border-left: 3px solid var(--utmb-blue);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.ai-panel-section { margin: 0 0 16px; }
.ai-panel-section:last-child { margin-bottom: 0; }
.ai-panel-section p {
  margin: 0 0 10px;
  color: var(--slate-800);
  line-height: 1.6;
  font-size: 0.97rem;
}
.ai-panel-section p:last-child { margin-bottom: 0; }

.ai-panel-sublabel {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 700;
  margin-bottom: 8px;
}

.ai-panel-recommended p {
  margin: 0;
  padding: 12px 16px;
  background: var(--utmb-blue-50);
  border: 1px solid var(--utmb-blue-100);
  border-radius: var(--radius-md);
  color: var(--slate-900);
  font-size: 0.98rem;
  font-weight: 500;
}

.ai-panel-criteria {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-panel-crit {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px 10px 12px;
  border-left: 3px solid var(--slate-300);
}
.ai-panel-crit.ok        { border-left-color: var(--success-600); }
.ai-panel-crit.bad       { border-left-color: var(--danger-600); }
.ai-panel-crit.uncertain { border-left-color: var(--warning-600); }
.ai-panel-crit-head {
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.ai-panel-crit-verdict {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  width: 80px;
  flex: 0 0 auto;
}
.ai-panel-crit.ok        .ai-panel-crit-verdict { color: var(--success-700); }
.ai-panel-crit.bad       .ai-panel-crit-verdict { color: var(--danger-700); }
.ai-panel-crit.uncertain .ai-panel-crit-verdict { color: var(--warning-700); }
.ai-panel-crit-name {
  font-size: 0.95rem;
  color: var(--slate-900);
  font-weight: 500;
  line-height: 1.4;
}
.ai-panel-crit-evidence {
  margin-top: 4px;
  padding-left: 92px;
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
}

.ai-panel-blockers li,
.ai-panel-uncertainties li {
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.93rem;
  color: var(--slate-800);
  margin-bottom: 6px;
  list-style: none;
}
.ai-panel-blockers ul,
.ai-panel-uncertainties ul {
  padding: 0;
  margin: 0;
}
.ai-panel-blockers li { border-left: 3px solid var(--danger-600); }
.ai-panel-uncertainties li { border-left: 3px solid var(--warning-600); }

.ai-panel-rule-mismatch p {
  margin: 0;
  padding: 10px 14px;
  background: var(--warning-50);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: var(--radius-md);
  color: var(--warning-700);
  font-size: 0.92rem;
}

.ai-panel-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-subtle);
  line-height: 1.55;
}

/* When the AI panel is present, the deterministic panel is visually secondary */
.match-panel-secondary {
  opacity: 0.95;
  border-style: solid;
}

@media (max-width: 640px) {
  .ai-panel { padding: 18px; }
  .ai-panel-title { font-size: 1.25rem; }
  .ai-panel-crit-head { flex-direction: column; gap: 4px; }
  .ai-panel-crit-verdict { width: auto; }
  .ai-panel-crit-evidence { padding-left: 0; }
}

.match-panel {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--utmb-blue-50) 100%);
  border: 1px solid var(--utmb-blue-100);
  border-radius: var(--radius-lg);
  padding: 22px 24px 20px;
  margin: 16px 0 24px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.match-panel::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 4px;
  background: var(--utmb-blue);
  border-radius: 0 4px 4px 0;
}
.match-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.match-panel-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--slate-900);
}
.match-back { height: 38px; padding: 0 14px; font-size: 0.88rem; }

.match-section { margin-bottom: 14px; }
.match-section:last-child { margin-bottom: 0; }


.match-tag.condition {
  background: var(--utmb-blue);
  color: #fff;
  border-color: var(--utmb-blue-700);
}
.match-tag.stage {
  background: var(--utmb-orange-50);
  color: var(--utmb-orange-700);
  border-color: rgba(202, 75, 12, 0.25);
}
.match-tag.biomarker {
  background: var(--utmb-blue-50);
  color: var(--utmb-blue-700);
  border-color: var(--utmb-blue-100);
}
.match-tag.age,
.match-tag.sex {
  background: var(--slate-100);
  color: var(--slate-700);
  border-color: var(--slate-200);
}
.match-tag.extent {
  background: var(--utmb-orange-50);
  color: var(--utmb-orange-700);
  border-color: rgba(202, 75, 12, 0.25);
}
.extent-mstage {
  margin-left: 4px;
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--text-subtle);
}

.match-foot {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.match-tip {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 6px 10px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
}

/* Confidence badge */
.match-panel-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* AI Assessment button on trial cards.
   Default appearance (no verdict tier) is gradient indigo→purple. When the
   verdict is known (verdict-eligible / -likely_eligible / -uncertain /
   -likely_ineligible / -ineligible), the button picks up a tier-specific
   color that matches the triage-pill palette. */
/* AI Clinical Assessment banner — spans the top of each trial card.
   Two states: assessed (color-coded per verdict) or not-yet-assessed
   (subtle CTA). Built as a full-width button so the click handler
   continues to fire via the .ai-assessment-btn / .ai-assess-now-btn
   class hooks. Sits flush against the card's top edge via negative
   margins; rounds only its top corners to match the card. */
.ai-verdict-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: calc(100% + 44px);
  margin: -22px -22px 14px;
  padding: 13px 18px;
  border: 0;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  font: inherit;
  color: #fff;
  text-align: left;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: filter 180ms ease-out, box-shadow 180ms ease-out;
}
.ai-verdict-banner:hover {
  filter: brightness(1.05);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}
.ai-verdict-banner:hover .ai-verdict-chevron { transform: translateX(2px); }
.ai-verdict-banner:active { filter: brightness(0.97); }
.ai-verdict-banner:focus-visible {
  outline: 2px solid var(--utmb-blue, #003b71);
  outline-offset: -3px;
}

/* Decorative diagonal shimmer line — adds the "premium" touch without
   competing for attention. Pointer-events:none so the click still lands
   on the button. */
.ai-verdict-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 45%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 55%,
    transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.ai-verdict-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.ai-verdict-icon svg { width: 20px; height: 20px; display: block; }

.ai-verdict-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ai-verdict-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.ai-verdict-eyebrow {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.80;
}
.ai-verdict-label {
  font-size: 1.0rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.ai-verdict-conf {
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  opacity: 0.88;
  margin-left: 2px;
}
.ai-verdict-headline {
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.35;
  opacity: 0.95;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ai-verdict-chevron {
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
  flex-shrink: 0;
  transition: transform 180ms ease-out;
}
.ai-verdict-chevron svg { width: 18px; height: 18px; display: block; }

/* Per-verdict color variants. All chosen to maintain >=4.5:1 contrast for
   white body text and 7:1 for the bold label. */
.ai-verdict-banner.verdict-eligible {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
}
.ai-verdict-banner.verdict-likely_eligible {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.ai-verdict-banner.verdict-uncertain {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
}
.ai-verdict-banner.verdict-likely_ineligible {
  background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
}
.ai-verdict-banner.verdict-ineligible {
  background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);
}

/* "Run AI In-depth Assessment" CTA — deliberately thin so it reads as
   an action *button* rather than a status banner. Sits at the top of
   unassessed cards as a clear call-to-click without competing visually
   with the colored verdict banners. */
.ai-verdict-banner-cta {
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 9px 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
  color: var(--utmb-blue, #003b71);
  border-bottom: 1px solid #cbd5e1;
}
.ai-verdict-banner-cta:hover {
  filter: none;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border-bottom-color: var(--utmb-blue, #003b71);
}
.ai-verdict-banner-cta:active {
  background: #dbeafe;
}
.ai-verdict-banner-cta::after { display: none; }
.ai-verdict-banner-cta .ai-verdict-icon {
  width: 24px;
  height: 24px;
  background: rgba(0, 59, 113, 0.10);
  color: var(--utmb-blue, #003b71);
}
.ai-verdict-banner-cta .ai-verdict-icon svg { width: 14px; height: 14px; }
.ai-verdict-banner-cta .ai-verdict-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--utmb-blue, #003b71);
  line-height: 1.2;
}
.ai-verdict-banner-cta .ai-verdict-chevron { color: var(--utmb-blue, #003b71); opacity: 0.9; }
.ai-verdict-banner-cta .ai-verdict-chevron svg { width: 14px; height: 14px; }

/* Loading state — keep the user oriented while the ~25s API call runs */
.ai-verdict-banner-cta.is-loading {
  cursor: progress;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
}
.ai-verdict-banner-cta.is-loading .ai-verdict-icon svg {
  animation: spin 1.2s linear infinite;
  transform-origin: center;
}
.ai-verdict-banner-cta[disabled] { opacity: 1; cursor: progress; }

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .ai-verdict-banner,
  .ai-verdict-chevron { transition: none; }
  .ai-verdict-banner-cta.is-loading .ai-verdict-icon svg { animation: none; }
}

/* Mobile: tighter padding, allow headline to wrap */
@media (max-width: 640px) {
  .ai-verdict-banner {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 11px 14px;
  }
  .ai-verdict-icon { width: 34px; height: 34px; }
  .ai-verdict-icon svg { width: 18px; height: 18px; }
  .ai-verdict-label { font-size: 0.95rem; }
  .ai-verdict-eyebrow { font-size: 0.62rem; }
}

/* AI dialog — wider than the standard scoring dialog because the clinical
   review reads better with more horizontal room for criteria rows + evidence.
   Selector intentionally chains both classes to outrank the later
   `.scoring-dialog { max-width: 660px }` rule. */
.scoring-dialog.ai-dialog {
  max-width: 980px;
}
.ai-dialog .scoring-modal-body {
  padding-bottom: 28px;
}
.ai-loading, .ai-error {
  color: var(--text-muted);
  text-align: center;
  padding: 40px 0;
}
.ai-error { color: var(--danger-700); }

/* Stepped progress shown while POST /api/assessment is in flight. */
.ai-progress {
  padding: 24px 6px 8px;
}
.ai-progress-head { margin-bottom: 18px; }
.ai-progress-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--utmb-blue-700);
  margin-bottom: 4px;
}
.ai-progress-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  color: var(--slate-900);
  margin: 0;
}
.ai-progress-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}
.ai-progress-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--slate-500);
  transition: color 200ms ease;
}
.ai-progress-steps li > svg,
.ai-progress-steps li > .ai-progress-spinner,
.ai-progress-steps li > .ai-progress-dot {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ai-progress-steps li.done {
  color: var(--slate-700);
}
.ai-progress-steps li.done > svg {
  color: var(--success-600);
}
.ai-progress-steps li.active {
  color: var(--slate-900);
  font-weight: 600;
}
.ai-progress-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50%;
  background: var(--slate-200);
}
.ai-progress-spinner {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid var(--utmb-blue-100);
  border-top-color: var(--utmb-blue);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.ai-progress-elapsed {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ai-block { padding: 4px 2px 0; }
.ai-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 28px 0;
}
.ai-trial-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ai-nct {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--utmb-blue);
  text-decoration: none;
}
.ai-nct:hover { text-decoration: underline; }
.ai-trial-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
  color: var(--slate-900);
  line-height: 1.3;
}
.ai-verdict-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.ai-verdict-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.ai-verdict-pill.eligible {
  background: var(--success-50); color: var(--success-700);
  border-color: rgba(5, 150, 105, 0.3);
}
.ai-verdict-pill.likely_eligible {
  background: #EFF6FF; color: var(--info-700);
  border-color: rgba(37, 99, 235, 0.3);
}
.ai-verdict-pill.uncertain {
  background: var(--slate-100); color: var(--slate-700);
  border-color: var(--slate-200);
}
.ai-verdict-pill.likely_ineligible {
  background: var(--warning-50); color: var(--warning-700);
  border-color: rgba(217, 119, 6, 0.35);
}
.ai-verdict-pill.ineligible {
  background: var(--danger-50); color: var(--danger-700);
  border-color: rgba(220, 38, 38, 0.3);
}
.ai-confidence {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ai-rule-compare {
  font-size: 0.78rem;
  color: var(--text-subtle);
  margin-left: auto;
}
.ai-rule-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: var(--warning-50);
  color: var(--warning-700);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ai-headline {
  font-size: 1rem;
  font-weight: 500;
  color: var(--slate-900);
  margin: 0 0 14px;
  font-style: italic;
  border-left: 3px solid var(--utmb-blue);
  padding-left: 12px;
}
.ai-reasoning p {
  margin: 0 0 10px;
  color: var(--slate-800);
  line-height: 1.6;
}
.ai-section { margin: 16px 0; }
.ai-section-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  font-weight: 600;
  margin-bottom: 6px;
}
.ai-criteria, .ai-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-criterion {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px 8px 10px;
  border-left: 3px solid var(--slate-300);
}
.ai-criterion.ok { border-left-color: var(--success-600); }
.ai-criterion.bad { border-left-color: var(--danger-600); }
.ai-criterion.uncertain { border-left-color: var(--warning-600); }
.ai-criterion-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.ai-criterion-verdict {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  flex: 0 0 auto;
  width: 70px;
}
.ai-criterion.ok .ai-criterion-verdict { color: var(--success-700); }
.ai-criterion.bad .ai-criterion-verdict { color: var(--danger-700); }
.ai-criterion.uncertain .ai-criterion-verdict { color: var(--warning-700); }
.ai-criterion-name {
  font-size: 0.92rem;
  color: var(--slate-900);
  font-weight: 500;
}
.ai-criterion-evidence {
  margin-top: 4px;
  padding-left: 80px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}
.ai-blockers li, .ai-uncertainties li {
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.92rem;
  color: var(--slate-800);
}
.ai-blockers li { border-left: 3px solid var(--danger-600); }
.ai-uncertainties li { border-left: 3px solid var(--warning-600); }
.ai-recommended p,
.ai-rule-mismatch p {
  margin: 0;
  padding: 10px 14px;
  background: var(--utmb-blue-50);
  border: 1px solid var(--utmb-blue-100);
  border-radius: var(--radius-md);
  color: var(--slate-900);
  font-size: 0.92rem;
}
.ai-rule-mismatch p { background: var(--warning-50); border-color: rgba(217, 119, 6, 0.3); }
.ai-meta-foot {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-subtle);
}
.ai-summary-meta {
  margin-bottom: 18px;
  padding: 10px 12px;
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.ai-summary-meta strong { color: var(--slate-900); }

@media (max-width: 640px) {
  .ai-criterion-head { flex-direction: column; gap: 4px; }
  .ai-criterion-verdict { width: auto; }
  .ai-criterion-evidence { padding-left: 0; }
  .ai-rule-compare { margin-left: 0; width: 100%; }
}

/* Compact confidence pill (used on trial cards in the Finder) */
.trial-card-pills {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* Lock the pill cluster's intrinsic width so a long title doesn't push
     the triage / status pills into a squished single column. */
  flex-shrink: 0;
}

/* Local-LLM triage pill. Reuses the verdict-tier color scale so a
   clinician sees the same green/yellow/red signal whether it came from
   the local triage layer or the full AI Clinical Assessment.
   Deliberately rendered in pastel/tinted colors with verdict-tier text
   + border so it never reads as authoritative as the full AI Clinical
   Assessment (which uses the saturated palette below). Same compact
   size as the assessment pill so the trial card's pill row stays
   consistent. */
.triage-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--slate-700);
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  cursor: default;
}
.triage-pill-spinner {
  width: 9px;
  height: 9px;
  border: 1.5px solid rgba(15, 23, 42, 0.18);
  border-top-color: var(--slate-700);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  display: none;
}
.triage-pill.triage-pending {
  background: var(--slate-50);
  color: var(--slate-600);
  border-color: var(--slate-200);
}
.triage-pill.triage-pending .triage-pill-spinner { display: inline-block; }
.triage-pill.verdict-eligible {
  background: rgba(5, 150, 105, 0.10);
  color: var(--success-700);
  border-color: rgba(5, 150, 105, 0.32);
}
.triage-pill.verdict-likely_eligible {
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.32);
}
.triage-pill.verdict-uncertain {
  background: var(--slate-100);
  color: var(--slate-700);
  border-color: var(--slate-200);
}
.triage-pill.verdict-likely_ineligible {
  background: rgba(217, 119, 6, 0.10);
  color: var(--warning-700);
  border-color: rgba(217, 119, 6, 0.32);
}
.triage-pill.verdict-ineligible {
  background: rgba(220, 38, 38, 0.10);
  color: var(--danger-700);
  border-color: rgba(220, 38, 38, 0.32);
}
.triage-pill.triage-error {
  background: var(--slate-50);
  color: var(--slate-500);
  border-color: var(--slate-200);
}

@media (max-width: 640px) {
}
@media (prefers-reduced-motion: reduce) {
}

/* Distance filter inside the finder form */
.finder-distance {
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.finder-distance-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--slate-700);
  margin-bottom: 10px;
}
.finder-distance-head svg { color: var(--utmb-blue); }
.finder-distance-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.finder-distance-zip { flex: 0 0 180px; }
.finder-distance-radius { flex: 0 0 220px; }
.finder-distance-resolved {
  font-size: 0.85rem;
  color: var(--success-700);
  background: var(--success-50);
  border: 1px solid rgba(5, 150, 105, 0.2);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  align-self: center;
}
.finder-distance-resolved-err {
  color: var(--danger-700);
  background: var(--danger-50);
  border-color: rgba(220, 38, 38, 0.25);
}
.finder-distance-helper {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Phase + study-type row — mirrors the distance block so the pre-scan
   form reads as a single set of "filters applied before AI ranking". */
.finder-prefilter {
  background: var(--utmb-blue-50);
  border: 1px solid var(--utmb-blue-100);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin: 0 0 12px;
}
.finder-prefilter-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--utmb-blue-800);
  margin-bottom: 10px;
}
.finder-prefilter-head svg { color: var(--utmb-blue); }
.finder-prefilter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.finder-prefilter-field { flex: 1 1 220px; min-width: 180px; margin: 0; }

/* Full-page progress overlay shown while a scan is in flight. Stays up
   until the browser swaps the document for the response page. */
.scan-progress-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scan-progress-fade-in 200ms ease-out;
}
/* Honor the HTML5 `hidden` attribute even when our class sets display: flex.
   Without this the overlay paints on page load before the user has scanned. */
.scan-progress-overlay[hidden] { display: none; }
@keyframes scan-progress-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.scan-progress-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 32px 24px;
  width: min(520px, 92vw);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.scan-progress-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid var(--utmb-blue-100);
  border-top-color: var(--utmb-blue);
  border-radius: 50%;
  margin: 0 auto 14px;
  animation: spin 700ms linear infinite;
}
.scan-progress-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--slate-900);
  margin: 0 0 4px;
}
.scan-progress-subtitle {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
  min-height: 2.6em;
}
.scan-progress-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  text-align: left;
  display: grid;
  gap: 8px;
}
.scan-progress-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--slate-500);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--slate-50);
  transition: background 200ms ease, color 200ms ease;
}
.scan-progress-steps li.done {
  color: var(--slate-800);
  background: rgba(16, 185, 129, 0.08);
}
.scan-progress-steps li.active {
  color: var(--slate-900);
  background: var(--utmb-blue-50);
  font-weight: 600;
}
.scan-progress-step-icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--slate-200);
  position: relative;
}
.scan-progress-steps li.done .scan-progress-step-icon {
  background: var(--success-600);
}
.scan-progress-steps li.done .scan-progress-step-icon::after {
  content: "";
  position: absolute;
  inset: 3px 5px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  width: 4px;
  height: 7px;
}
.scan-progress-steps li.active .scan-progress-step-icon {
  background: var(--utmb-blue);
  box-shadow: 0 0 0 0 rgba(0, 85, 140, 0.55);
  animation: scan-progress-pulse 1.4s ease-out infinite;
}
@keyframes scan-progress-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(0, 85, 140, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 85, 140, 0); }
  100% { box-shadow: 0 0 0 0   rgba(0, 85, 140, 0); }
}
.scan-progress-elapsed {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
}
@media (prefers-reduced-motion: reduce) {
}

.empty-distance {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--utmb-blue-50) 100%);
  border: 1px solid var(--utmb-blue-100);
}
.empty-distance h3 { color: var(--slate-900); }
.empty-distance-actions {
  display: inline-flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.empty-distance-tip {
  margin: 14px auto 0;
  max-width: 48ch;
  color: var(--text-subtle);
  font-size: 0.85rem;
}


/* Weight tuner inside scoring modal */
.scoring-tuner-section .scoring-section-label .scoring-step {
  background: var(--utmb-orange);
  color: #fff;
}

.weight-row {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.weight-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.weight-row-label strong {
  display: block;
  font-size: 0.92rem;
  color: var(--slate-900);
  margin-bottom: 1px;
}
.weight-row-helper {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.weight-row-value {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.weight-num {
  width: 64px;
  height: 32px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--slate-900);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.weight-default {
  font-size: 0.72rem;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

/* Scoring Equation modal — research-grade typography */
.equation-dialog .scoring-modal-inner {
  max-width: 820px;
}
.equation-body {
  background: #FFFFFF;
  font-family: var(--font-serif), Georgia, serif;
  color: var(--slate-900);
  line-height: 1.6;
}
.equation-body .scoring-intro {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.eq-section { margin-bottom: 22px; }
.eq-section h3 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--utmb-blue-700);
  letter-spacing: 0.01em;
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.eq-section p {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--slate-800);
  margin: 8px 0;
}
.eq-section .eq-foot {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 8px;
}
.eq-block {
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 10px 0;
  overflow-x: auto;
  font-size: 1.02rem;
}

.eq-weights-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  margin-top: 8px;
}
.eq-weights-table thead th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong);
}
.eq-weights-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--slate-800);
}
.eq-symbol { font-family: var(--font-serif); font-size: 1rem; }
.eq-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 80px;
}
.eq-default { color: var(--text-subtle); font-weight: 500; }
.eq-total td {
  background: var(--utmb-blue-50);
  color: var(--utmb-blue-700);
  font-size: 0.95rem;
}

.eq-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

@media print {
  .equation-dialog .scoring-modal-head .scoring-close-btn,
  .eq-actions {
    display: none;
  }
  .equation-body { padding: 0; }
}


@media (max-width: 640px) {
  .finder-distance-zip,
  .finder-distance-radius { flex: 1 1 100%; }
  .weight-row-head { flex-direction: column; align-items: flex-start; }
}

/* Inline highlight markers */
mark.match-highlight {
  background: #FEF3C7;
  color: #78350F;
  padding: 0 4px;
  margin: 0 -1px;
  border-radius: 4px;
  font-weight: 600;
  box-shadow: inset 0 -1px 0 rgba(217, 119, 6, 0.25);
}
mark.match-highlight:hover {
  background: #FDE68A;
}

/* ------- Trial detail page ------- */
.detail {
  padding: 32px 0 64px;
}
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.detail-back:hover { color: var(--utmb-blue); }

.detail-hero {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.detail-hero .nct {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: var(--text-subtle);
  letter-spacing: 0.04em;
}
.detail-hero h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 6px 0 14px;
  color: var(--slate-900);
}
.detail-hero .official {
  color: var(--text-muted);
  margin: 0 0 16px;
  font-size: 0.98rem;
}
.detail-hero .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
}
.detail-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
}
.detail-section h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  margin: 0 0 12px;
  font-weight: 600;
}
.detail-section p,
.detail-section pre.criteria {
  margin: 0;
  color: var(--slate-800);
  font-size: 0.97rem;
  line-height: 1.6;
  white-space: pre-wrap;
  font-family: inherit;
}
.criteria {
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  max-height: 320px;
  overflow: auto;
}

/* Eligibility highlights */
.elig-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 14px 16px;
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.elig-quick-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--slate-600);
}
.elig-quick-item svg { color: var(--utmb-blue); flex: 0 0 auto; margin-top: 2px; }
.elig-quick-k {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  font-weight: 600;
}
.elig-quick-v {
  color: var(--slate-900);
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.elig-block { margin-bottom: 14px; }
.elig-block:last-of-type { margin-bottom: 6px; }
.elig-block-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 8px;
}
.elig-block-head.inclusion { color: var(--success-700); }
.elig-block-head.inclusion svg { color: var(--success-600); }
.elig-block-head.exclusion { color: var(--danger-700); }
.elig-block-head.exclusion svg { color: var(--danger-600); }
.elig-block-count {
  margin-left: auto;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  font-weight: 600;
}
.elig-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.elig-list li {
  padding: 10px 12px 10px 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--slate-800);
  font-size: 0.94rem;
  line-height: 1.5;
  position: relative;
}
.elig-list li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.elig-list.inclusion li::before { background: var(--success-600); }
.elig-list.exclusion li::before { background: var(--danger-600); }
.elig-foot {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--text-subtle);
  font-style: italic;
}

.kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}
.kv-grid .k {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  margin-bottom: 2px;
  font-weight: 600;
}
.kv-grid .v {
  color: var(--slate-900);
  font-size: 0.97rem;
  font-variant-numeric: tabular-nums;
}

.locations-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
}
.locations-list li {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.locations-list .facility {
  font-weight: 600;
  color: var(--slate-900);
  margin-bottom: 2px;
}
.locations-list .place {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.intervention-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.intervention-list li {
  border-left: 3px solid var(--utmb-blue);
  padding: 4px 0 4px 14px;
}
.intervention-list .iv-type {
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--utmb-blue-700);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.intervention-list .iv-name {
  font-weight: 600;
  color: var(--slate-900);
}
.intervention-list .iv-desc { color: var(--text-muted); font-size: 0.92rem; margin-top: 4px; }

/* ------- Footer ------- */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 28px 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ------- Loading state for submit button (JS-driven) ------- */
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn-label { opacity: 0; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.6);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn { position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------- Responsive ------- */
@media (max-width: 960px) {
  .results-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .detail-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .field-condition, .field-location { grid-column: span 12; }
  .field-status, .field-phase, .field-study-type, .field-term { grid-column: span 6; }
}
@media (max-width: 640px) {
  .hero { padding: 48px 0 36px; }
  .brand-product-sub { display: none; }
  .brand-divider { display: none; }
  .field-status, .field-phase, .field-study-type, .field-term { grid-column: span 12; }
  .kv-grid { grid-template-columns: 1fr; }
}

/* ------- Mobile nav (hamburger drawer, ≤768px) ------- */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--slate-700);
  padding: 0;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.nav-toggle:hover { color: var(--utmb-blue); border-color: var(--utmb-blue-100); }
.nav-toggle:focus-visible {
  outline: 3px solid rgba(0, 85, 140, 0.35);
  outline-offset: 2px;
}
.nav-toggle-icon-close { display: none; }
.nav-toggle[aria-expanded="true"] {
  background: var(--utmb-blue-50);
  color: var(--utmb-blue-700);
  border-color: var(--utmb-blue-100);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon-close { display: block; }

.header-signout-label { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 768px) {
  .header-inner { position: relative; }
  .nav-toggle { display: inline-flex; }

  .header-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 16px 16px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 220ms ease, padding 220ms ease, visibility 0s linear 220ms;
    z-index: 50;
  }
  .header-nav.is-open {
    max-height: calc(100vh - var(--header-height));
    visibility: visible;
    overflow-y: auto;
    transition: max-height 220ms ease, padding 220ms ease, visibility 0s;
  }
  .header-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 4px;
    font-size: 1rem;
    color: var(--slate-800);
    border-bottom: 1px solid var(--border);
    min-height: 48px;
  }
  .header-nav a:last-child { border-bottom: none; }
  .header-nav a.is-active {
    color: var(--utmb-blue);
    font-weight: 600;
  }
  .header-nav a.is-active::after { display: none; }
  .header-cta {
    margin-top: 10px;
    justify-content: center;
    height: 48px;
    border-radius: var(--radius-md);
  }
  .header-signout {
    color: var(--text-muted);
  }
  .header-signout-label {
    display: inline;
    font-weight: 500;
  }

  .nav-backdrop {
    display: none;
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: rgba(15, 23, 42, 0.32);
    z-index: 40;
  }
  .nav-backdrop.is-open { display: block; }

  body.nav-locked { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .header-nav { transition: none !important; }
}

/* ------- Header nav active state ------- */
.header-nav a.is-active {
  color: var(--utmb-blue);
  position: relative;
}
.header-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -28px;
  height: 3px;
  background: var(--utmb-blue);
  border-radius: 3px 3px 0 0;
}

/* ------- Trial Finder ------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.scroll-anchor {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--header-height) + 16px);
}
.finder-layout {
  padding: 28px 0 64px;
}
.finder-form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

/* Collapsed summary — hidden by default, revealed when .is-collapsed.
   Compact one-line view of what was scanned, with an Edit search button. */
.finder-collapsed-summary { display: none; }
.finder-form.is-collapsed .finder-form-body { display: none; }
.finder-form.is-collapsed { padding: 14px 20px; }
.finder-form.is-collapsed .finder-collapsed-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.finder-collapsed-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--text);
  font-size: 0.95rem;
  min-width: 0;
}
.finder-collapsed-info svg { color: var(--brand); flex-shrink: 0; }
.finder-collapsed-label {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.finder-collapsed-info strong {
  color: var(--text);
  font-weight: 600;
}
.finder-collapsed-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-subtle, #f1f5f9);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.finder-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.85rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  flex-shrink: 0;
}
.finder-expand-btn:hover {
  background: var(--surface-subtle, #f1f5f9);
  border-color: var(--brand);
  color: var(--brand);
}

/* Collapse-back bar at the top of the expanded form body. */
.finder-form-collapse-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.finder-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.finder-collapse-btn:hover {
  background: var(--surface-subtle, #f1f5f9);
  border-color: var(--brand);
  color: var(--brand);
}
.finder-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.finder-toolbar-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-700);
  white-space: nowrap;
}
.finder-toolbar .select { max-width: 460px; flex: 1; min-width: 240px; }

/* "Note Requirements" help button — sits at the right end of the toolbar.
   Visually subordinate to the scan button so it doesn't compete; uses the
   UTMB-blue accent on hover to signal "more info available". */
.finder-toolbar-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  color: var(--text-muted, #475569);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.finder-toolbar-help:hover {
  background: var(--surface-subtle, #f1f5f9);
  border-color: var(--utmb-blue, #003b71);
  color: var(--utmb-blue, #003b71);
}
.finder-toolbar-help:focus-visible {
  outline: 2px solid var(--utmb-blue, #003b71);
  outline-offset: 2px;
}
.finder-toolbar-help svg { flex-shrink: 0; color: currentColor; }

/* Note Requirements modal body content. Reuses the .scoring-dialog frame
   so width/padding/close-button styling match the other dialogs. */
.note-req-lede {
  color: var(--slate-700, #334155);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: #f8fafc;
  border-left: 3px solid var(--utmb-blue, #003b71);
  border-radius: 4px;
}
.note-req-section {
  margin-bottom: 20px;
}
.note-req-h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--slate-900, #0f172a);
}
.note-req-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.note-req-pill-required    { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.note-req-pill-recommended { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.note-req-pill-helpful     { background: #f0f9ff; color: #075985; border: 1px solid #bae6fd; }

.note-req-body {
  margin: 0 0 8px;
  color: var(--slate-700, #334155);
  font-size: 0.88rem;
  line-height: 1.55;
}
.note-req-examples {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  color: var(--text-muted, #475569);
}
.note-req-examples li {
  margin: 4px 0;
  font-size: 0.85rem;
}
.note-req-examples code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--slate-900, #0f172a);
}

.note-req-best-practices {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border, #e2e8f0);
}
.note-req-bullets {
  margin: 0;
  padding-left: 20px;
  color: var(--slate-700, #334155);
}
.note-req-bullets li {
  margin: 8px 0;
  font-size: 0.88rem;
  line-height: 1.55;
}
.note-req-bullets strong { color: var(--slate-900, #0f172a); }

.note-req-footer {
  margin-top: 22px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-muted, #475569);
  text-align: center;
}

.epic-logo {
  height: 20px;
  width: auto;
  flex: 0 0 auto;
  vertical-align: middle;
}

.note-textarea {
  width: 100%;
  min-height: 260px;
  height: 320px;
  resize: vertical;
  padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--slate-900);
  background: var(--slate-50);
}
.note-textarea:focus {
  background: #fff;
}
.finder-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Extraction summary card */
.finder-extraction { margin-top: 22px; }
.extraction-card {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--utmb-blue);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.extraction-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.extraction-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-subtle);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.extraction-parser-badge {
  text-transform: none;
  letter-spacing: 0;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.extraction-parser-badge.regex {
  background: var(--slate-100);
  color: var(--slate-700);
  border-color: var(--slate-200);
}
.extraction-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--slate-900);
  margin: 0;
}
.extraction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px 24px;
  margin: 0 0 16px;
}
.extraction-grid dt {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  margin-bottom: 2px;
  font-weight: 600;
}
.extraction-grid dd {
  margin: 0;
  font-size: 1rem;
  color: var(--slate-900);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.extraction-sublabel {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  margin-bottom: 6px;
  font-weight: 600;
}
.extraction-biomarkers { margin-bottom: 16px; }
.extraction-query {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.extraction-query code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  background: var(--slate-50);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--slate-700);
}
.extraction-query code strong { color: var(--utmb-blue); font-weight: 600; }

/* Finder results */
/* 2-column results layout: filter aside on the left, trials on the right.
   On screens narrower than ~1100px the aside collapses above the list. */
.finder-results-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  margin-top: 26px;
  align-items: start;
}
@media (max-width: 1100px) {
  .finder-results-layout { grid-template-columns: 1fr; }
}

/* Refine sidebar (mirrors the registry search aside). */
.finder-filters {
  position: sticky;
  top: calc(var(--header-height) + 16px);
}
.finder-filter-group {
  border: none;
  padding: 0;
  margin: 0 0 18px;
}
.finder-filter-group legend {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  margin-bottom: 8px;
  padding: 0;
}
.finder-filter-check,
.finder-filter-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--slate-800);
  padding: 4px 0;
  cursor: pointer;
  line-height: 1.35;
}
.finder-filter-check input,
.finder-filter-radio input {
  margin: 0;
  accent-color: var(--utmb-blue);
  cursor: pointer;
}
.finder-filter-check:hover,
.finder-filter-radio:hover { color: var(--slate-900); }
/* Mirror the pre-scan filter: when the user narrowed Phase / Study type
   server-side, the non-matching options are locked to avoid creating a
   client-side filter that has no candidate trials to act on. */
.finder-filter-check.is-locked {
  color: var(--slate-400);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--slate-300);
}
.finder-filter-check.is-locked input { cursor: not-allowed; }
.finder-filter-check.is-locked:hover { color: var(--slate-400); }
.finder-filter-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
  background: var(--slate-300);
}
.finder-filter-swatch.verdict-eligible          { background: var(--success-600); }
.finder-filter-swatch.verdict-likely_eligible   { background: #10B981; }
.finder-filter-swatch.verdict-uncertain         { background: var(--slate-500); }
.finder-filter-swatch.verdict-likely_ineligible { background: var(--warning-600); }
.finder-filter-swatch.verdict-ineligible        { background: linear-gradient(135deg, #DC2626 0%, #B91C1C 60%, #991B1B 100%); }
.finder-filter-swatch.verdict-pending           { background: var(--slate-400); }

.finder-filter-select-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--slate-800);
}
.finder-filter-select {
  height: 36px;
  font-size: 0.9rem;
}
.finder-filter-helper {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 8px 0 0;
  line-height: 1.4;
}

.finder-results { margin-top: 0; }

/* AI-pipeline progress badges (rerank + triage) under the matched-trials
   title. Both share the same shape, layout, and animation; each gets a
   color modifier so the green "Reordering by AI relevance" pill and the
   blue "Triaging trials" pill read as a paired set. Three visual states
   keyed on classes set by JS:
     .is-working   → tinted pulsing dot + sweep light across the bottom
     .is-complete  → solid checkmark, no animation, faint celebratory tint
     (no class)    → static initial state from server render */
.ai-pipeline-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.ai-pipeline-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 28px 3px 10px;   /* extra right-padding for the live-dot */
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  overflow: hidden;
  border: 1px solid transparent;
}
.ai-pipeline-badge svg { flex: 0 0 14px; }
.ai-pipeline-badge-dim {
  color: var(--slate-500);
  font-weight: 500;
  font-variant-numeric: tabular-nums;   /* digits don't jitter as they tick */
}
.ai-pipeline-badge-live {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--slate-300);
  transition: background 200ms ease;
}
.ai-pipeline-badge::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  pointer-events: none;
}
.ai-pipeline-badge.is-working::after {
  width: 40%;
  animation: ai-pipeline-sweep 1.8s linear infinite;
}
.ai-pipeline-badge.is-complete::after { display: none; }
@keyframes ai-pipeline-sweep {
  from { left: -40%; }
  to   { left: 100%; }
}

/* Rerank badge — green (relevance ranking) */
.rerank-badge {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(0, 85, 140, 0.10));
  border-color: rgba(16, 185, 129, 0.30);
  color: #047857;
}
.rerank-badge svg { color: #10B981; }
.rerank-badge::after {
  background: linear-gradient(90deg, transparent, #10B981, transparent);
}
.rerank-badge.is-working {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(0, 85, 140, 0.14));
  border-color: rgba(16, 185, 129, 0.45);
}
.rerank-badge.is-working .ai-pipeline-badge-live {
  background: #10B981;
  animation: rerank-live-pulse 1.4s ease-out infinite;
}
.rerank-badge.is-complete {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.06));
  border-color: rgba(16, 185, 129, 0.45);
}
.rerank-badge.is-complete .ai-pipeline-badge-live {
  background: var(--success-600);
}
@keyframes rerank-live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0); }
}

/* Triage badge — blue (preliminary clinical triage) */
.triage-badge {
  background: linear-gradient(135deg, rgba(0, 85, 140, 0.10), rgba(99, 102, 241, 0.08));
  border-color: rgba(0, 85, 140, 0.30);
  color: var(--utmb-blue-800);
}
.triage-badge svg { color: var(--utmb-blue); }
.triage-badge::after {
  background: linear-gradient(90deg, transparent, var(--utmb-blue), transparent);
}
.triage-badge.is-working {
  background: linear-gradient(135deg, rgba(0, 85, 140, 0.15), rgba(99, 102, 241, 0.12));
  border-color: rgba(0, 85, 140, 0.45);
}
.triage-badge.is-working .ai-pipeline-badge-live {
  background: var(--utmb-blue);
  animation: triage-live-pulse 1.4s ease-out infinite;
}
.triage-badge.is-complete {
  background: linear-gradient(135deg, rgba(0, 85, 140, 0.14), rgba(0, 85, 140, 0.04));
  border-color: rgba(0, 85, 140, 0.45);
}
.triage-badge.is-complete .ai-pipeline-badge-live {
  background: var(--utmb-blue);
}
@keyframes triage-live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(0, 85, 140, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 85, 140, 0); }
  100% { box-shadow: 0 0 0 0   rgba(0, 85, 140, 0); }
}

/* Legacy class aliases — old JS that targeted these classes still works
   because they sit on the same elements as the new base classes. */
.rerank-badge-label, .triage-badge-label { }
.rerank-badge-dim, .triage-badge-dim {
  color: var(--slate-500);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.rerank-badge-live, .triage-badge-live { /* same as .ai-pipeline-badge-live */ }

/* Progressive rerank: while the server-side head (top 20) has scored some
   trials but the client-side tail is still working, hide unscored cards so
   the user only sees the ranked head. Each tail card animates into view
   when its score lands. Subtle fade-in keeps the reveal from feeling jumpy. */
.trial-list.is-progressive-rerank .trial-card[data-rerank-score=""] {
  display: none;
}
.trial-list.is-progressive-rerank .trial-card:not([data-rerank-score=""]) {
  animation: rerank-reveal 220ms ease-out;
}
@keyframes rerank-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* In-page text filter above the trial list — substring match over title,
   NCT id, summary, conditions, phase, location, and the triage verdict label. */
.trial-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin: 0 0 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.trial-filter:focus-within {
  border-color: var(--utmb-blue);
  box-shadow: 0 0 0 3px rgba(0, 85, 140, 0.15);
}
.trial-filter-icon {
  color: var(--text-muted);
  flex: 0 0 16px;
}
.trial-filter-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  color: var(--slate-900);
}
.trial-filter-input::placeholder { color: var(--text-muted); }
.trial-filter-input::-webkit-search-cancel-button { display: none; }
.trial-filter-clear {
  flex: 0 0 auto;
  background: var(--slate-100);
  color: var(--slate-700);
  border: none;
  border-radius: var(--radius-full);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.trial-filter-clear:hover {
  background: var(--slate-200);
  color: var(--slate-900);
}
.trial-filter-count {
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.trial-filter-empty {
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 4px;
}

.finder-results-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.finder-results-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--slate-900);
  margin: 0;
}

@media (max-width: 640px) {
  .header-nav a.is-active::after { display: none; }
  .note-textarea { min-height: 240px; height: 260px; }
}

/* ------- Login screen -------
   Teal/mint sign-in, ported from the sibling UTMB Trial Search app. All the
   teal theming and the shared-control overrides are scoped under .login-body
   so the rest of this app keeps its navy theme untouched. */
.login-body {
  /* login-only palette + display font so the shared .btn/.input retheme here only */
  --login-teal: #0E7490;
  --login-teal-600: #0891B2;
  --login-teal-700: #155E75;
  --login-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  background:
    radial-gradient(900px 540px at 80% -10%, rgba(8, 145, 178, 0.16), transparent 60%),
    radial-gradient(900px 540px at -10% 110%, rgba(16, 185, 129, 0.10), transparent 60%),
    linear-gradient(180deg, #F8FAFC 0%, #EAF4F6 100%);
}
.login-shell {
  margin: auto;
  width: 100%;
  max-width: 460px;
  padding: 40px 20px;
}
.login-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 32px 28px;
  box-shadow: var(--shadow-lg);
}
.login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.login-brand img { height: 46px; width: auto; }
.login-card h1 {
  font-family: var(--login-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 6px;
  color: var(--slate-900);
}
.login-sub {
  text-align: center;
  color: var(--text-muted);
  margin: 0 0 24px;
  font-size: 0.95rem;
}
.login-submit {
  width: 100%;
  margin-top: 6px;
}
.login-footnote {
  margin: 20px 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-subtle);
}

/* Teal retheme of the shared controls, login page only (higher specificity
   than the global navy rules thanks to the .login-body prefix). */
.login-body .btn-primary {
  background: linear-gradient(180deg, var(--login-teal-600) 0%, var(--login-teal) 100%);
  color: #fff;
  border-color: transparent;
  border-radius: var(--radius-full);          /* pill */
  box-shadow: 0 8px 20px -8px rgba(8, 145, 178, 0.55), var(--shadow-sm);
}
.login-body .btn-primary:hover {
  background: linear-gradient(180deg, #17A2C6 0%, var(--login-teal-600) 100%);
  box-shadow: 0 10px 24px -8px rgba(8, 145, 178, 0.65), var(--shadow-sm);
}
.login-body .btn-primary:active { transform: translateY(1px); }
.login-body .input:focus {
  border-color: var(--login-teal);
  box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.12);
  outline: none;
}
.login-body a:focus-visible,
.login-body button:focus-visible,
.login-body input:focus-visible {
  outline: 3px solid rgba(8, 145, 178, 0.40);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ------- ASTRO 2026 PDF viewer (Read page) ------- */
.pdf-viewer-layout { padding: 24px 0 48px; }
.pdf-frame {
  height: calc(100vh - var(--header-height) - 220px);
  min-height: 520px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--slate-100);
  box-shadow: var(--shadow-sm);
}
.pdf-embed { width: 100%; height: 100%; border: 0; display: block; }
.pdf-fallback {
  margin: 12px 2px 0;
  font-size: 0.88rem;
  color: var(--text-subtle);
}
@media (max-width: 640px) {
  .pdf-frame { height: calc(100vh - var(--header-height) - 180px); }
}

/* ------- Page header actions group ------- */
.page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Settings gear toggle + dropdown menu (top-right of Trial Finder header) */
.settings-menu {
  position: relative;
}
.settings-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--slate-700);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.settings-toggle:hover {
  color: var(--utmb-blue);
  border-color: var(--utmb-blue-100);
  background: var(--utmb-blue-50);
}
.settings-toggle:focus-visible {
  outline: 3px solid rgba(0, 85, 140, 0.35);
  outline-offset: 2px;
}
.settings-toggle[aria-expanded="true"] {
  background: var(--utmb-blue-50);
  border-color: var(--utmb-blue-100);
  color: var(--utmb-blue);
}
.settings-toggle[aria-expanded="true"] svg {
  transform: rotate(60deg);
}
.settings-toggle svg {
  transition: transform 240ms ease;
}

.settings-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 30px -8px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06);
  padding: 6px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.settings-dropdown[hidden] { display: none; }
.settings-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  transform: rotate(45deg);
}
.settings-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--slate-800);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.settings-item:hover, .settings-item:focus-visible {
  background: var(--utmb-blue-50);
  color: var(--utmb-blue-700);
  outline: none;
}
.settings-item svg {
  flex: 0 0 auto;
  color: var(--text-muted);
}
.settings-item:hover svg, .settings-item:focus-visible svg {
  color: var(--utmb-blue);
}
.settings-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 4px;
}
.scoring-model-btn {
  color: var(--utmb-blue-700);
  border-color: var(--utmb-blue-100);
  background: var(--utmb-blue-50);
  font-size: 0.9rem;
  height: 40px;
  padding: 0 16px;
}
.scoring-model-btn:hover {
  background: var(--utmb-blue-100);
  border-color: var(--utmb-blue-100);
}

/* ------- Match Scoring Model dialog ------- */
.scoring-dialog {
  border: none;
  border-radius: var(--radius-xl);
  padding: 0;
  max-width: 660px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow-lg);
  max-height: calc(100dvh - 48px);
  overflow-x: hidden;
  overflow-y: auto;
}
.scoring-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
}

.scoring-modal-inner {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.scoring-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: #fff;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 1;
}
.scoring-modal-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--utmb-blue-700);
  margin-bottom: 4px;
}
.scoring-modal-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--slate-900);
}
.scoring-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--slate-500);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 150ms ease, color 150ms ease;
}
.scoring-close-btn:hover {
  background: var(--slate-100);
  color: var(--slate-900);
}

.scoring-modal-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.scoring-intro {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.6;
}

.scoring-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--slate-800);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.scoring-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--utmb-blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.scoring-section-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.55;
}

/* Scoring table */
.scoring-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.93rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  word-break: break-word;
}
.scoring-table thead th {
  background: var(--slate-50);
  color: var(--text-subtle);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.scoring-table tbody tr {
  border-bottom: 1px solid var(--border);
}
.scoring-table tbody tr:last-child {
  border-bottom: none;
}
.scoring-table tbody td {
  padding: 11px 14px;
  color: var(--slate-700);
  vertical-align: middle;
  line-height: 1.5;
}
.scoring-table tbody td:first-child {
  width: 130px;
}
.scoring-table tfoot td {
  padding: 11px 14px;
  background: var(--slate-50);
  border-top: 2px solid var(--border);
  font-weight: 600;
  color: var(--slate-700);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.scoring-pts-col { width: 80px; }
.scoring-pts {
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--utmb-blue-700);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.scoring-max {
  color: var(--slate-800);
  font-size: 1rem;
}
.scoring-note {
  font-size: 0.82rem;
  color: var(--text-subtle);
  font-weight: 400;
}
.scoring-table-divider td {
  background: var(--utmb-blue-50) !important;
  border-top: 1px solid var(--utmb-blue-100) !important;
  border-bottom: 1px solid var(--utmb-blue-100) !important;
}
.scoring-divider-label {
  color: var(--utmb-blue-700);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 14px !important;
}

/* Signal type chips in extraction table */
.scoring-signal {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.scoring-signal.condition {
  background: var(--utmb-blue);
  color: #fff;
  border-color: var(--utmb-blue-700);
}
.scoring-signal.stage {
  background: var(--utmb-orange-50);
  color: var(--utmb-orange-700);
  border-color: rgba(202, 75, 12, 0.25);
}
.scoring-signal.biomarker {
  background: var(--utmb-blue-50);
  color: var(--utmb-blue-700);
  border-color: var(--utmb-blue-100);
}
.scoring-signal.demo {
  background: var(--slate-100);
  color: var(--slate-700);
  border-color: var(--slate-200);
}

/* Confidence levels list */
.scoring-levels {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.scoring-level {
  padding: 14px 16px;
  background: #fff;
}
.scoring-level:nth-child(even) { background: var(--slate-50); }
.scoring-level-ineligible { background: var(--danger-50) !important; }
.scoring-level-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.scoring-level-range {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.scoring-level p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Disclaimer */
.scoring-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-md);
  color: #78350F;
  font-size: 0.88rem;
  line-height: 1.55;
}
.scoring-disclaimer strong { font-weight: 700; color: #92400E; }

@media (max-width: 640px) {
  .scoring-modal-head { padding: 20px 20px 16px; }
  .scoring-modal-body { padding: 20px 20px 24px; gap: 22px; }
  .scoring-dialog { max-height: calc(100dvh - 24px); }
  .scoring-table tbody td:first-child { width: 100px; }
}

/* ------- Reduced motion ------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Admin / cost dashboard ===========================================
   Standalone styles for /admin/costs — kept separate from the main app
   styling so the dashboard's information density (lots of tables, tight
   spacing) doesn't bleed into the patient-facing UI. */

.admin-body {
  background: #f1f5f9;
  color: var(--slate-900, #0f172a);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.admin-topbar {
  background: #fff;
  border-bottom: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.admin-topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-topbar h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--utmb-blue, #003b71);
}
.admin-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.admin-summary-grid--3 { grid-template-columns: repeat(3, 1fr); }

.admin-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-section-title {
  margin: 4px 0 2px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #475569);
}

/* Provider cards — colored top-border accent so the eye can pick out
   "DigitalOcean spend" vs "Anthropic spend" at a glance. */
.admin-provider-card {
  position: relative;
  padding-top: 22px;
}
.admin-provider-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 12px 12px 0 0;
}
.admin-provider-card.is-total::before     { background: var(--utmb-blue, #003b71); }
.admin-provider-card.is-do::before        { background: #0080ff; }
.admin-provider-card.is-anthropic::before { background: #d97706; }

.admin-stat-card {
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.admin-stat-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #475569);
  margin-bottom: 8px;
}
.admin-stat-value {
  font-size: 1.85rem;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
  color: var(--slate-900, #0f172a);
  line-height: 1.1;
}
.admin-stat-meta {
  font-size: 0.78rem;
  color: var(--text-muted, #475569);
  margin-top: 6px;
  font-feature-settings: "tnum" 1;
}

.admin-card {
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 20px 22px 22px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.admin-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.admin-card-head h2 {
  margin: 0;
  font-size: 1.0rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--slate-900, #0f172a);
}
.admin-card-meta {
  font-size: 0.78rem;
  color: var(--text-muted, #475569);
  font-feature-settings: "tnum" 1;
}
.admin-note {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: var(--text-muted, #475569);
  line-height: 1.5;
}

.admin-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.admin-sparkline-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--text-muted, #475569);
  font-feature-settings: "tnum" 1;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.admin-table thead th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #475569);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: #f8fafc;
}
.admin-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.admin-table tbody tr:hover { background: #f8fafc; }
.admin-table .admin-num {
  text-align: right;
  font-feature-settings: "tnum" 1;
}
.admin-table .admin-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--text-muted, #475569);
}
.admin-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--slate-900, #0f172a);
}
.admin-empty {
  text-align: center;
  color: var(--text-muted, #475569);
  font-style: italic;
  padding: 20px !important;
}
.admin-table-scroll {
  overflow-x: auto;
}

.admin-logout button {
  font-size: 0.85rem;
  padding: 6px 14px;
}

@media (max-width: 900px) {
  .admin-summary-grid      { grid-template-columns: repeat(2, 1fr); }
  .admin-summary-grid--3   { grid-template-columns: repeat(1, 1fr); }
  .admin-two-col           { grid-template-columns: 1fr; }
}

/* =========================================================
   Code Lookup (this app: medical-code lookup + Galveston RVU pricing)
   Added section. All styling reuses the design tokens above.
   ========================================================= */

/* Visually-hidden text for screen readers (labels, table captions) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Home: centered CTA under the feature grid */
.features-cta { margin-top: 32px; text-align: center; }

/* Example / "Try:" code chips (home hero + lookup page) */
.lookup-examples {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px;
}
.lookup-examples-label { color: var(--text-subtle); font-size: 0.9rem; font-weight: 500; }
.lookup-example-chip {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: var(--radius-full);
  background: var(--utmb-blue-50); color: var(--utmb-blue);
  border: 1px solid var(--utmb-blue-100);
  font-size: 0.9rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lookup-example-chip:hover { background: var(--utmb-blue-100); color: var(--utmb-blue-700); }

/* Lookup page layout */
.lookup-layout { padding: 28px 0 56px; }
.lookup-search { margin-bottom: 28px; }
.lookup-search-bar { position: relative; display: flex; gap: 10px; }
.lookup-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--text-subtle); pointer-events: none;
}
.lookup-search-input { flex: 1; padding-left: 44px; height: 52px; font-size: 1.05rem; }
.lookup-search-btn { height: 52px; white-space: nowrap; }

.lookup-empty { margin-top: 8px; }
.lookup-result-count { margin: 4px 0 16px; }

/* Multi-match results list */
.lookup-result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lookup-result-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs); transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  color: var(--text);
}
.lookup-result-row:hover {
  border-color: var(--utmb-blue-100); box-shadow: var(--shadow-sm);
  transform: translateY(-1px); color: var(--text);
}
.lookup-result-code {
  font-weight: 700; font-size: 1.1rem; color: var(--utmb-blue);
  font-variant-numeric: tabular-nums; min-width: 72px;
}
.lookup-result-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lookup-result-desc { font-weight: 500; }
.lookup-result-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lookup-result-price { font-size: 0.9rem; font-weight: 600; color: var(--success-700); font-variant-numeric: tabular-nums; }
.lookup-result-price.muted { color: var(--text-subtle); font-weight: 500; }
.lookup-result-chevron { color: var(--text-subtle); flex: none; }

/* Single-code detail view */
.code-detail {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  padding: 28px; display: flex; flex-direction: column; gap: 26px;
}
.code-detail-head { display: flex; flex-direction: column; gap: 12px; }
.code-detail-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.code-big {
  font-size: 2rem; font-weight: 700; color: var(--utmb-blue);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.code-detail-desc { font-size: 1.15rem; color: var(--text); margin: 0; max-width: 70ch; }

/* 2026 change panel */
.changes-panel {
  background: var(--utmb-orange-50); border: 1px solid rgba(202, 75, 12, 0.18);
  border-radius: var(--radius-lg); padding: 18px 20px;
}
.changes-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.changes-panel h2 { font-size: 1.05rem; margin: 0; color: var(--utmb-orange-700); }
.changes-effective { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.changes-summary { margin: 10px 0 0; color: var(--text); max-width: 75ch; }
.changes-codes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.changes-codes-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-subtle); }

/* Pricing section */
.pricing-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pricing-head h2 { font-size: 1.2rem; margin: 0; }
.locality-banner {
  font-size: 0.85rem; color: var(--text-muted); font-weight: 500;
  background: var(--slate-50); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 6px 14px;
  font-variant-numeric: tabular-nums;
}
.pricing-empty { margin: 0; }

.price-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.price-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-muted); padding: 18px;
}
.price-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.price-card-modifier { font-weight: 600; }
.price-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.price-figure {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.price-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-subtle); font-weight: 700; }
.price-amount { font-size: 1.6rem; font-weight: 700; color: var(--utmb-blue); font-variant-numeric: tabular-nums; line-height: 1.1; }
.price-sub { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* RVU breakdown table */
.rvu-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--surface); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); }
.rvu-table thead th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-subtle); background: var(--slate-50);
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.rvu-table tbody th { text-align: left; font-weight: 500; padding: 8px 12px; }
.rvu-table tbody td { padding: 8px 12px; }
.rvu-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rvu-table tbody tr + tr th, .rvu-table tbody tr + tr td { border-top: 1px solid var(--slate-100); }
.rvu-table .rvu-total th, .rvu-table .rvu-total td { font-weight: 700; border-top: 2px solid var(--border); }

.calc-line { margin: 12px 0 0; font-size: 0.9rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.calc-line strong { color: var(--utmb-blue); font-size: 1rem; }
.price-meta { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* References */
.ref-section { border-top: 1px solid var(--border); padding-top: 22px; }
.ref-section h2 { font-size: 1.05rem; margin: 0 0 14px; }
.ref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 0; }
.ref-grid dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-subtle); font-weight: 700; margin-bottom: 3px; }
.ref-grid dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.ref-notes { margin-top: 18px; }
.ref-notes-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-subtle); font-weight: 700; margin-bottom: 8px; }
.ref-notes ul { margin: 0; padding-left: 18px; color: var(--text-muted); }
.ref-notes li { margin-bottom: 6px; }

.lookup-disclaimer { font-size: 0.82rem; color: var(--text-subtle); border-top: 1px solid var(--border); padding-top: 16px; margin: 0; }

@media (max-width: 560px) {
  .price-figures { grid-template-columns: 1fr; }
  .lookup-result-code { min-width: 0; }
}

/* --- Code Lookup: expanded detail sections --- */
.descriptor-block { margin-top: 4px; }
.descriptor-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-subtle); font-weight: 700; margin-bottom: 4px;
}
.descriptor-list { margin: 0; padding-left: 18px; color: var(--text-muted); }
.descriptor-list li { margin-bottom: 4px; }

.ref-count { color: var(--text-subtle); font-weight: 500; font-size: 0.85em; }

.notes-list { margin: 0; padding-left: 18px; color: var(--text); }
.notes-list li { margin-bottom: 8px; max-width: 80ch; }

/* Wide tables scroll horizontally instead of breaking the layout */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { font-size: 0.85rem; }
.data-table thead th { white-space: nowrap; }
.data-table tbody th, .data-table tbody td { vertical-align: top; }
.data-table tbody td { color: var(--text-muted); }

/* Source tables (one per table the code appears in) */
.source-tables { display: grid; gap: 16px; }
.source-table { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.source-table-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: var(--slate-50); border-bottom: 1px solid var(--border);
}
.source-table-title { font-weight: 600; font-size: 0.9rem; }
.source-table-page { font-size: 0.8rem; color: var(--text-subtle); font-weight: 600; white-space: nowrap; }
.source-table .rvu-table { border: 0; border-radius: 0; }

/* Context excerpts (collapsible) */
.excerpts-details > summary { cursor: pointer; list-style: none; }
.excerpts-details > summary::-webkit-details-marker { display: none; }
.excerpts-details > summary h2 {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
}
.excerpts-details > summary h2::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid var(--text-subtle);
  border-bottom: 2px solid var(--text-subtle); transform: rotate(45deg);
  transition: transform 150ms ease; margin-left: 4px;
}
.excerpts-details[open] > summary h2::after { transform: rotate(-135deg); }
.excerpt-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.excerpt-item {
  display: flex; gap: 12px; padding: 10px 14px;
  background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.excerpt-page { flex: none; font-size: 0.78rem; font-weight: 700; color: var(--utmb-blue); }
.excerpt-text { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

/* --- Clickable page references + full-screen book-page modal --- */
.page-ref {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: var(--utmb-blue); font-weight: 600;
  cursor: pointer; font-variant-numeric: tabular-nums;
  border-bottom: 1px dashed var(--utmb-blue-100);
}
.page-ref:hover { color: var(--utmb-blue-700); border-bottom-color: var(--utmb-blue); }
.ref-pages { display: flex; flex-wrap: wrap; gap: 4px 12px; }

.page-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.page-modal[hidden] { display: none; }
.page-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.78); backdrop-filter: blur(2px);
}
.page-modal-inner {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  max-width: min(1100px, 96vw); max-height: 94vh;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.page-modal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-muted);
}
.page-modal-title { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.page-modal-actions { display: flex; align-items: center; gap: 14px; }
.page-modal-open { font-size: 0.85rem; font-weight: 600; }
.page-modal-close {
  appearance: none; background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--text-muted); border-radius: var(--radius-sm); display: inline-flex;
}
.page-modal-close:hover { color: var(--text); background: var(--slate-100); }
.page-modal-stage {
  overflow: auto; padding: 16px; display: flex; align-items: flex-start; justify-content: center;
  background: var(--slate-100);
}
.page-modal-img {
  max-width: 100%; height: auto; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); background: #fff;
}

/* --- Autocomplete suggestions (custom, replaces native datalist) --- */
.autocomplete { position: relative; }
.autocomplete-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  max-height: 340px; overflow-y: auto;
}
.autocomplete-list[hidden] { display: none; }
.autocomplete-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
}
.autocomplete-item:hover,
.autocomplete-item.is-active { background: var(--utmb-blue-50); }
.ac-code {
  font-weight: 700; color: var(--utmb-blue);
  font-variant-numeric: tabular-nums; flex: none; min-width: 62px;
}
.ac-desc {
  flex: 1; min-width: 0; color: var(--text-muted); font-size: 0.9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-type { flex: none; color: var(--text-subtle); font-size: 0.72rem; font-weight: 600; }

/* --- Locality / pricing-basis stat cards (one metric per card) --- */
.locality-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.locality-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.locality-card-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-subtle); font-weight: 700;
}
.locality-card-value {
  font-size: 1.15rem; font-weight: 700; color: var(--utmb-blue);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.locality-card-sub { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* =========================================================
   Code Table page (all codes, one row per modifier)
   ========================================================= */
.code-table-layout { padding: 24px 0 56px; }

.code-table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.code-table-filter { position: relative; flex: 1; max-width: 480px; }
.code-table-filter-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-subtle); pointer-events: none;
}
.code-table-search {
  width: 100%; height: 44px; padding: 0 14px 0 40px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font: inherit; color: var(--text); background: var(--surface);
}
.code-table-count { color: var(--text-muted); font-size: 0.9rem; font-weight: 600; white-space: nowrap; }

.code-table-scroll {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); max-height: 80vh; overflow-x: hidden; overflow-y: auto;
}
/* Fixed layout + percentage column widths: the table fills the container and
   long text wraps within its column instead of forcing a horizontal scroll. */
.code-table {
  width: 100%; table-layout: fixed; border-collapse: separate;
  border-spacing: 0; font-size: 0.82rem;
}

.code-table thead th {
  position: sticky; top: 0; z-index: 2; text-align: left;
  background: var(--utmb-blue); color: #fff; font-weight: 600;
  font-size: 0.73rem; letter-spacing: 0.01em;
  padding: 9px 10px; border-bottom: 1px solid var(--utmb-blue-700);
}
.code-table thead th.num { text-align: right; }

/* Column widths sum to 100% */
.code-table th:nth-child(1)  { width: 5%; }   /* Code */
.code-table th:nth-child(2)  { width: 5%; }   /* Modifier */
.code-table th:nth-child(3)  { width: 16%; }  /* Official Descriptor */
.code-table th:nth-child(4)  { width: 11%; }  /* Process */
.code-table th:nth-child(5)  { width: 14%; }  /* When Billed */
.code-table th:nth-child(6)  { width: 6%; }   /* RVU Professional */
.code-table th:nth-child(7)  { width: 6%; }   /* RVU Technical */
.code-table th:nth-child(8)  { width: 7%; }   /* Non Facility Price */
.code-table th:nth-child(9)  { width: 14%; }  /* Note */
.code-table th:nth-child(10) { width: 16%; }  /* What Changed */

.code-table tbody th, .code-table tbody td {
  padding: 8px 10px; border-bottom: 1px solid var(--slate-100);
  vertical-align: top; overflow-wrap: anywhere;
}
.code-table tbody tr:hover th, .code-table tbody tr:hover td { background: var(--utmb-blue-50); }
.code-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.ct-code { font-weight: 700; }
.ct-code a { color: var(--utmb-blue); font-variant-numeric: tabular-nums; }
.ct-mod { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.ct-price { font-weight: 600; color: var(--success-700); }
.ct-descriptor { color: var(--text); }
.ct-when { color: var(--text-muted); }
.ct-note { color: var(--text-muted); }
.ct-changed { color: var(--text-muted); }
.ct-process-pill {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-md);
  background: var(--utmb-blue-50); color: var(--utmb-blue);
  border: 1px solid var(--utmb-blue-100);
  font-size: 0.68rem; line-height: 1.35; font-weight: 600;
}

.code-table-empty { padding: 24px; text-align: center; color: var(--text-muted); }

/* Code Table toolbar right group (count + Excel export) */
.code-table-toolbar-right { display: flex; align-items: center; gap: 14px; }
.code-table-export { white-space: nowrap; }

/* --- Pricing source badge (live vs cached) + full CMS field table --- */
.pricing-source {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
  background: var(--slate-50); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 4px 12px;
}
.pricing-source-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--slate-400); }
.pricing-source.is-live { color: var(--success-700); background: var(--success-50); border-color: rgba(5,150,105,0.2); }
.pricing-source.is-live .pricing-source-dot { background: var(--success-600); }

.cms-fulltable { margin-top: 24px; }
.cms-fulltable-title { font-size: 0.95rem; margin: 0 0 10px; color: var(--text); }
.cms-table { width: auto; min-width: 100%; font-size: 0.78rem; }
.cms-table th, .cms-table td { white-space: nowrap; }
.cms-table thead th { background: var(--slate-100); color: var(--text-muted); }

/* --- Locality picker (Code Lookup page header) --- */
.locality-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.locality-picker-label { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.locality-picker-select { min-width: 240px; }
.locality-picker-apply { white-space: nowrap; }

/* CMS full-table heading with locality identification */
.cms-fulltable-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cms-fulltable-head .cms-fulltable-title { margin: 0; }
.cms-fulltable-locality { font-size: 0.82rem; font-weight: 600; color: var(--utmb-blue); background: var(--utmb-blue-50); border: 1px solid var(--utmb-blue-100); border-radius: var(--radius-full); padding: 4px 12px; font-variant-numeric: tabular-nums; }