/* UTMB Clinical Trials Search: Design System
   Tokens: modern clinical teal-blue primary, neutral slate, semantic statuses
   Type:   Inter (UI) + Plus Jakarta Sans (display)
*/

:root {
  /* Brand: modern clinical ocean palette (harmonizes with the UTMB mark) */
  --utmb-blue: #0E7490;        /* primary action teal-blue (cyan-700) */
  --utmb-blue-700: #155E75;
  --utmb-blue-800: #134152;
  --utmb-blue-50: #EDF7FA;
  --utmb-blue-100: #CDEAF2;
  --utmb-blue-600: #0891B2;    /* brighter lift for gradients + hovers on dark */

  --utmb-orange: #CA4B0C;      /* warm accent from the mark, used sparingly */
  --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: #F6FAFB;
  --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 - soft, diffuse, faintly teal-tinted */
  --shadow-xs: 0 1px 2px rgba(13, 60, 76, 0.05);
  --shadow-sm: 0 1px 3px rgba(13, 60, 76, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px -6px rgba(13, 60, 76, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 24px 48px -16px rgba(13, 60, 76, 0.18), 0 4px 12px rgba(15, 23, 42, 0.05);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --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;
  --font-serif: var(--font-display); /* legacy alias, kept so older rules retheme */
}

* { box-sizing: border-box; }

::selection { background: rgba(8, 145, 178, 0.18); }

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;
}

h1, h2, h3, h4 { text-wrap: balance; }

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(8, 145, 178, 0.40);
  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: frosted glass ------- */
.site-header {
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(13, 60, 76, 0.08);
  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 18px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--utmb-blue-600) 0%, var(--utmb-blue) 100%);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 40px;
  border: 1px solid transparent;
  box-shadow: 0 6px 16px -6px rgba(8, 145, 178, 0.5);
}
.header-cta:hover { background: linear-gradient(180deg, #17A2C6 0%, var(--utmb-blue-600) 100%); }

/* ------- 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;
  background:
    radial-gradient(1200px 540px at 85% -10%, rgba(8, 145, 178, 0.12), transparent 60%),
    radial-gradient(900px 460px at 5% 0%, rgba(16, 185, 129, 0.07), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F4FAFB 100%);
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero-grid {
  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-serif);
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--slate-900);
  margin: 20px 0 12px;
  max-width: 22ch;
}
.hero p.lede {
  font-size: 1.08rem;
  color: var(--text-muted);
  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);
}
.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(8, 145, 178, 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 24px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.97rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
  min-width: 44px;
}
.btn-primary {
  background: linear-gradient(180deg, var(--utmb-blue-600) 0%, var(--utmb-blue) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(8, 145, 178, 0.55), var(--shadow-sm);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #17A2C6 0%, var(--utmb-blue-600) 100%);
  box-shadow: 0 10px 24px -8px rgba(8, 145, 178, 0.65), var(--shadow-sm);
}
.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(8, 145, 178, 0.10), transparent 60%),
    radial-gradient(700px 420px at 100% 100%, rgba(16, 185, 129, 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, #06222C 0%, #0B4456 45%, #0E7490 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%, #7DD3FC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
  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(--utmb-blue-100);
  transform: translateY(-1px);
}
.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, #0E7490);
  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: #155E75; }
.trial-rank-badge:focus-visible { outline: 2px solid var(--utmb-blue, #0E7490); 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, #0E7490);
  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%, #ebf6f9 100%);
  color: var(--utmb-blue, #0E7490);
  border-bottom: 1px solid #cbd5e1;
}
.ai-verdict-banner-cta:hover {
  filter: none;
  background: linear-gradient(180deg, #f0fbfd 0%, #d9f2f8 100%);
  border-bottom-color: var(--utmb-blue, #0E7490);
}
.ai-verdict-banner-cta:active {
  background: #d9f2f8;
}
.ai-verdict-banner-cta::after { display: none; }
.ai-verdict-banner-cta .ai-verdict-icon {
  width: 24px;
  height: 24px;
  background: rgba(14, 116, 144, 0.10);
  color: var(--utmb-blue, #0E7490);
}
.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, #0E7490);
  line-height: 1.2;
}
.ai-verdict-banner-cta .ai-verdict-chevron { color: var(--utmb-blue, #0E7490); 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, #f0fbfd 0%, #d9f2f8 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(8, 145, 178, 0.55);
  animation: scan-progress-pulse 1.4s ease-out infinite;
}
@keyframes scan-progress-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(8, 145, 178, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(8, 145, 178, 0); }
  100% { box-shadow: 0 0 0 0   rgba(8, 145, 178, 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: transparent;
  border-top: 1px solid var(--border);
  padding: 32px 0;
  color: var(--text-subtle);
  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(8, 145, 178, 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, #0E7490);
  color: var(--utmb-blue, #0E7490);
}
.finder-toolbar-help:focus-visible {
  outline: 2px solid var(--utmb-blue, #0E7490);
  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, #0E7490);
  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(8, 145, 178, 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(8, 145, 178, 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(8, 145, 178, 0.10), rgba(99, 102, 241, 0.08));
  border-color: rgba(8, 145, 178, 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(8, 145, 178, 0.15), rgba(99, 102, 241, 0.12));
  border-color: rgba(8, 145, 178, 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(8, 145, 178, 0.14), rgba(8, 145, 178, 0.04));
  border-color: rgba(8, 145, 178, 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(8, 145, 178, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(8, 145, 178, 0); }
  100% { box-shadow: 0 0 0 0   rgba(8, 145, 178, 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(8, 145, 178, 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 ------- */
.login-body {
  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(--font-serif);
  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);
}

/* ------- 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(8, 145, 178, 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, #0E7490);
}
.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, #0E7490); }
.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; }
}