/* AI Bot Defender — Duke-branded design system.
 *
 * Palette (official Duke brand, full strength only — opacity/saturation of the
 * two blues is never altered):
 *   Duke Navy   #012169   primary, headers, primary buttons
 *   Royal Blue  #00539B   links, hovers, secondary accents
 *   Copper      #C84E00   alert / leak-detected accent + key CTA
 *   Eno (teal)  #339898   success / clean
 *   Persimmon   #E89923   warning / pending
 *   Neutrals    Whisper #F3F2F1 · Limestone #E5E5E5 · Hatteras #E2E6ED
 *               Iron #262626 (text) · Graphite #666666 (muted)
 *
 * Light + dark themes share one set of CSS variables. The semantic tokens
 * (--surface/--heading/--link) plus the *neutrals* are remapped under
 * :root[data-theme="dark"] at the bottom of this file; the two Duke blues stay
 * constant in both themes (per the brand rule), so components don't change.
 */

:root {
  --navy: #012169;
  --royal: #00539B;
  --prussian: #005587;
  --copper: #C84E00;
  --persimmon: #E89923;
  --dandelion: #FFD960;
  --eno: #339898;
  --magnolia: #1D6363;
  --hatteras: #E2E6ED;
  --whisper: #F3F2F1;
  --ginger: #FCF7E5;
  --iron: #262626;
  --graphite: #666666;
  --granite: #B5B5B5;
  --limestone: #E5E5E5;
  --white: #ffffff;

  /* Theme-able semantic tokens — remapped under [data-theme="dark"].
   * --white stays literal white (text/icons on the Duke blues); surfaces use
   * --surface, navy headings use --heading, link/accent text uses --link. */
  --surface: var(--white);
  --heading: var(--navy);
  --link: var(--royal);
  color-scheme: light;

  --radius: 8px;
  /* Neutral (iron) shadows only — the two Duke blues are never used at reduced
   * opacity, per the brand rule. */
  --shadow-sm: 0 1px 2px rgba(38, 38, 38, .06), 0 1px 3px rgba(38, 38, 38, .08);
  --shadow-md: 0 6px 18px rgba(38, 38, 38, .12);
}

* { box-sizing: border-box; }

html {
  margin: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { margin: 0; min-width: 0; }
img, video, canvas { max-width: 100%; height: auto; }

body {
  font-family: "Source Sans 3", system-ui, sans-serif;
  background: var(--whisper);
  color: var(--iron);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header { background: var(--navy); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
.brand__logo {
  display: block; flex: none; width: 56px; height: 42px;
  object-fit: cover; object-position: center;
}
.brand__name { color: var(--white); font-weight: 700; font-size: 17px; letter-spacing: .01em; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav__link {
  color: #c9d4e8; font-weight: 600; font-size: 14px;
  padding: 8px 14px; border-radius: 6px; line-height: 1;
}
.main-nav__link:hover { color: var(--white); background: var(--royal); text-decoration: none; }
.main-nav__link.is-active { color: var(--white); background: var(--royal); }
.main-nav__form { display: inline; margin: 0; }
.main-nav__button { border: 0; font-family: inherit; cursor: pointer; }
.main-nav__user {
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #c9d4e8; font-weight: 600; font-size: 13px; padding: 0 6px 0 10px;
}
.main-nav__jobs {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--white); background: rgba(200, 78, 0, .92); border-radius: 999px;
  padding: 6px 10px; margin: 0 4px; font-size: 12px; font-weight: 700;
}
.main-nav__jobs:hover { color: var(--white); background: var(--copper); text-decoration: none; }
.main-nav__jobs[hidden] { display: none; }
.main-nav__jobs .live-dot { background: currentColor; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }

/* Theme toggle (sits in the navy header in both themes). */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-left: 6px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 7px;
  background: transparent; color: #c9d4e8; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.theme-toggle:hover { background: var(--royal); color: var(--white); border-color: var(--royal); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
/* Moon shows in light mode (click → dark); sun shows in dark mode (click → light). */
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }

.header-accent { height: 4px; background: var(--royal); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; align-items: center; gap: 10px; padding-top: 18px; font-size: 13px; }
.breadcrumb__back { display: inline-flex; align-items: center; gap: 4px; color: var(--graphite); font-weight: 600; }
.breadcrumb__back:hover { color: var(--link); text-decoration: none; }
.breadcrumb__sep { color: var(--granite); }
.breadcrumb__current { color: var(--iron); font-weight: 600; }

/* ---------- Page ---------- */
.page { padding-top: 28px; padding-bottom: 56px; }

.page-head { margin-bottom: 28px; }
.page-head h1 { font-size: 28px; font-weight: 800; margin: 0 0 6px; color: var(--heading); letter-spacing: -.01em; }
.page-head p { margin: 0; color: var(--graphite); font-size: 15px; max-width: 60ch; }

.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--link); margin-bottom: 10px;
}

h2.section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--graphite); margin: 0 0 14px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--limestone);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card--pad { padding: 22px; }

.nav-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--limestone);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.nav-card:hover { text-decoration: none; border-color: var(--link); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.nav-card__icon {
  width: 42px; height: 42px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--white);
}
.nav-card h3 { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: var(--heading); }
.nav-card p { margin: 0; color: var(--graphite); font-size: 14px; }
.nav-card__cta { margin-top: auto; padding-top: 6px; color: var(--link); font-weight: 700; font-size: 14px; }

/* ---------- Stat tiles ---------- */
.stat {
  background: var(--surface); border: 1px solid var(--limestone); border-radius: var(--radius);
  padding: 16px 18px;
}
.stat__value { font-size: 30px; font-weight: 800; color: var(--heading); line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { margin-top: 8px; font-size: 13px; color: var(--graphite); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 14px; border-radius: 6px; padding: 10px 18px;
  border: 1px solid transparent; cursor: pointer; line-height: 1; transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--royal); color: var(--white); }
.btn--cta { background: var(--copper); color: var(--white); }
.btn--cta:hover { background: #a83f00; color: var(--white); }
.btn--danger { background: #9f2d20; color: var(--white); border-color: #9f2d20; }
.btn--danger:hover { background: #7f2117; color: var(--white); }
.btn--ghost { background: var(--surface); color: var(--heading); border-color: var(--limestone); }
.btn--ghost:hover { border-color: var(--link); color: var(--link); }
.btn--sm { padding: 7px 12px; font-size: 13px; }
.btn--block { width: 100%; }
.btn:disabled, .btn.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- Forms ---------- */
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--iron); margin-bottom: 6px; }
.field-hint { font-weight: 400; color: var(--graphite); }
.input, select.input, textarea.input {
  width: 100%; background: var(--surface); color: var(--iron);
  border: 1px solid var(--granite); border-radius: 6px; padding: 9px 11px;
  font-size: 14px; font-family: inherit;
}
.input:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--hatteras); }
.help { font-size: 12.5px; color: var(--graphite); margin-top: 6px; }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--graphite); }
.check input { margin-top: 3px; }

.choice {
  display: flex; align-items: center; gap: 9px; font-size: 13.5px;
  border: 1px solid var(--limestone); border-radius: 6px; padding: 9px 12px; cursor: pointer; background: var(--surface);
}
.choice:hover { border-color: var(--link); }
.choice .mono { color: var(--iron); }
/* A locked model row (its checkbox is disabled, so it never submits). */
.choice.is-disabled { opacity: .55; cursor: not-allowed; }
.choice.is-disabled:hover { border-color: var(--limestone); }

/* Grouped model picker (LLM Forensics launcher): offline simulators vs live models. */
.model-group + .model-group { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--limestone); }
.model-group__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--graphite); padding: 3px 2px 4px; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; text-transform: uppercase; }
.badge--navy   { background: var(--hatteras); color: var(--heading); }
.badge--clean  { background: #e0efef; color: var(--magnolia); }
.badge--alert  { background: #fbe6da; color: var(--copper); }
.badge--warn   { background: #fdeccb; color: #9a6510; }
.badge--neutral{ background: var(--limestone); color: var(--graphite); }
/* Solid status chips used by the Crawler Analytics "Device" verdict column. */
.badge--flag     { background: #993399; color: var(--white); }   /* INCONSISTENT */
.badge--disguise { background: var(--copper); color: var(--white); } /* DISGUISED */
.badge--vm       { background: var(--prussian); color: var(--white); }
.badge--auto     { background: var(--copper); color: var(--white); }
.badge--synth    { background: #7a2980; color: var(--white); }
.badge--xs       { font-size: 10px; padding: 2px 6px; letter-spacing: .01em; }
/* A tidy vertical stack of chips inside one table cell. */
.chipstack { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* ---------- Tables ---------- */
.table-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 700; color: var(--graphite); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: 11px 12px; border-bottom: 2px solid var(--limestone); background: var(--whisper); position: sticky; top: 0; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--limestone); vertical-align: top; }
.tbl tbody tr:hover td { background: var(--ginger); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.truncate { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowrap { white-space: nowrap; }
/* Three-tier request severity — the WHOLE row is tinted so the verdict reads at a
 * glance (green = certainly fine, orange = needs verification, red = certainly a
 * bot), with a matching colored left rail for a color-blind-friendlier cue. The
 * fills are light pastels: clearly visible, but soft enough that the row text stays
 * fully readable. td-level backgrounds override the hover fill so a tinted row
 * stays tinted (hover just deepens it a touch). */
.tbl tbody tr.row--clean td { background: #e7f6ee; }
.tbl tbody tr.row--clean:hover td { background: #d7efe2; }
.tbl tbody tr.row--suspicious td { background: #fff3d9; }
.tbl tbody tr.row--suspicious:hover td { background: #ffeabf; }
.tbl tbody tr.row--malicious td { background: #fdeaea; }
.tbl tbody tr.row--malicious:hover td { background: #fadbdb; }
.tbl tbody tr.row--clean td:first-child { box-shadow: inset 3px 0 0 #2fa36f; }
.tbl tbody tr.row--suspicious td:first-child { box-shadow: inset 3px 0 0 var(--persimmon); }
.tbl tbody tr.row--malicious td:first-child { box-shadow: inset 3px 0 0 #d84343; }
/* Dark theme: the same hues as translucent glows over the dark surface. */
:root[data-theme="dark"] .tbl tbody tr.row--clean td { background: rgba(63, 185, 121, .10); }
:root[data-theme="dark"] .tbl tbody tr.row--clean:hover td { background: rgba(63, 185, 121, .17); }
:root[data-theme="dark"] .tbl tbody tr.row--suspicious td { background: rgba(232, 153, 35, .13); }
:root[data-theme="dark"] .tbl tbody tr.row--suspicious:hover td { background: rgba(232, 153, 35, .20); }
:root[data-theme="dark"] .tbl tbody tr.row--malicious td { background: rgba(235, 87, 87, .14); }
:root[data-theme="dark"] .tbl tbody tr.row--malicious:hover td { background: rgba(235, 87, 87, .21); }
/* The one-word severity chip (the legend above the table + the Detail panel). */
.sev { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px;
       border-radius: 999px; letter-spacing: .02em; text-transform: uppercase; }
.sev--clean { background: #d7efe2; color: #17603e; }
.sev--suspicious { background: #fdeccb; color: #9a6510; }
.sev--malicious { background: #fadbdb; color: #a82626; }
/* Disguise-panel rows (a different table) keep the copper "malicious" tint. */
.tbl tbody tr.row--disguise td { background: rgba(200, 78, 0, .10); }
.tbl tbody tr.row--disguise:hover td { background: rgba(200, 78, 0, .15); }
/* Full-width expandable detail row shown under a request (replaces the old
 * in-cell <details>, which was pinned to the narrow right-hand column). */
.tbl tbody tr.detailrow > td { padding: 0; background: var(--whisper); border-bottom: 1px solid var(--limestone); }
.tbl tbody tr.detailrow:hover > td { background: var(--whisper); }
.detailpanel { padding: 14px 18px; font-size: 12.5px; }
.detail-toggle[aria-expanded="true"] { border-color: var(--link); color: var(--link); }

/* ---------- Notices ---------- */
.notice { border: 1px solid var(--limestone); border-left-width: 4px; border-radius: var(--radius); padding: 14px 16px; background: var(--surface); }
.notice--ok   { border-left-color: var(--eno); }
.notice--warn { border-left-color: var(--persimmon); }
.notice--err  { border-left-color: var(--copper); }
.notice__title { font-weight: 700; margin-bottom: 3px; }

/* Cancellable page-level background operation. */
.job-control { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--limestone); border-left: 4px solid var(--persimmon);
  border-radius: var(--radius); padding: 13px 15px; background: var(--surface); box-shadow: var(--shadow-sm); }
.job-control__body { min-width: 0; }
.job-control__eyebrow { display: flex; align-items: center; gap: 7px; color: var(--graphite);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; }
.job-control__label { margin-top: 3px; color: var(--heading); font-size: 14px; font-weight: 700; }
.job-control__error { margin-top: 4px; color: var(--copper); font-size: 12px; white-space: pre-wrap; }
@media (max-width: 520px) { .job-control { align-items: stretch; flex-direction: column; } }

/* ---------- Authentication / account approval ---------- */
.auth-shell { width: 100%; max-width: 460px; margin: 0 auto; }
.auth-shell--wide { max-width: 820px; }
.auth-card { display: flex; flex-direction: column; gap: 18px; }
.auth-card__title { margin: 0; color: var(--heading); font-size: 18px; font-weight: 700; }
.auth-card > p, .auth-card__title + p { margin: -10px 0 0; }
.auth-form { display: grid; gap: 16px; }
.auth-links { margin: 0; color: var(--graphite); font-size: 13.5px; }
.auth-links p { margin: 5px 0 0; }
.auth-notice { margin-bottom: 18px; }
.auth-card .auth-notice { margin-bottom: 0; }
.auth-steps { margin: 0; padding-left: 22px; color: var(--iron); }
.auth-steps li + li { margin-top: 7px; }
.auth-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.auth-decline { border-color: var(--copper); color: var(--copper); }
.auth-decline:hover { border-color: var(--copper); color: var(--copper); }
.auth-admin-help { margin-top: 14px; overflow-wrap: anywhere; }

/* ---------- Admin panel + monitoring ---------- */
.admin-shell { width: 100%; max-width: 1180px; margin: 0 auto; }
.admin-tabs {
  display: flex; gap: 4px; margin: -10px 0 24px; padding: 4px;
  width: max-content; max-width: 100%; overflow-x: auto;
  border: 1px solid var(--limestone); border-radius: 8px; background: var(--whisper);
}
.admin-tab {
  display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px;
  border-radius: 5px; color: var(--graphite); font-size: 13.5px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.admin-tab:hover { color: var(--link); text-decoration: none; }
.admin-tab.is-active { background: var(--navy); color: var(--white); }

.monitor-healthbar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-bottom: 16px; padding: 13px 16px; border: 1px solid var(--limestone);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm);
}
.monitor-healthbar__label {
  display: block; color: var(--graphite); font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
#monitor-status { color: var(--graphite); font-size: 15px; }
#monitor-status.is-online { color: var(--magnolia); }
#monitor-status.is-offline { color: var(--copper); }
.monitor-services { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.monitor-service {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px;
  border: 1px solid var(--limestone); border-radius: 999px; color: var(--graphite);
  font-size: 11.5px; font-weight: 700;
}
.monitor-service__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--granite); }
.monitor-service.is-online { color: var(--magnolia); border-color: rgba(51, 152, 152, .45); }
.monitor-service.is-online .monitor-service__dot { background: var(--eno); }
.monitor-service.is-offline { color: var(--copper); border-color: rgba(200, 78, 0, .4); }
.monitor-service.is-offline .monitor-service__dot { background: var(--copper); }

.monitor-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.monitor-alerts { margin-bottom: 18px; }
.monitor-section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 15px;
}
.monitor-section-head h2 { margin: 0; color: var(--heading); font-size: 18px; }
.monitor-section-head p { margin: 3px 0 0; font-size: 13px; }
.monitor-offline {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-bottom: 18px;
}
.monitor-offline[hidden] { display: none; }
.monitor-offline p { margin: 2px 0 0; color: var(--graphite); font-size: 13px; }
.monitor-offline code {
  flex: none; padding: 7px 10px; border: 1px solid var(--limestone);
  border-radius: 5px; background: var(--whisper); color: var(--iron); font-size: 12.5px;
}
.monitor-grafana { display: grid; gap: 18px; }
.monitor-grafana[hidden] { display: none; }
.monitor-frame {
  display: block; width: 100%; border: 1px solid var(--limestone);
  border-radius: 6px; background: var(--whisper);
}
.monitor-frame--dashboard { height: 720px; }
.monitor-frame--logs { height: 430px; }
:root[data-theme="dark"] .monitor-service.is-online { color: #62c2ad; }

@media (max-width: 900px) {
  .monitor-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitor-frame--dashboard { height: 620px; }
}

@media (max-width: 600px) {
  .admin-tabs { width: 100%; }
  .admin-tab { flex: 1; justify-content: center; }
  .monitor-healthbar, .monitor-section-head, .monitor-offline {
    align-items: stretch; flex-direction: column;
  }
  .monitor-kpis { grid-template-columns: minmax(0, 1fr); }
  .monitor-section-head .btn { width: 100%; }
  .monitor-frame--dashboard { height: 540px; }
  .monitor-frame--logs { height: 380px; }
}

/* ---------- Manual LLM evaluation ----------
 * One target owns both halves of the workflow. The panels stay compact in the
 * page, while a native dialog provides a full-size response editor on demand. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.manual-workflow { scroll-margin-top: 20px; }
.manual-workflow__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.manual-workflow__head h2 { margin: 0 0 6px; }
.manual-workflow__head p { max-width: 760px; margin: 0; color: var(--graphite); font-size: 13.5px; }
.manual-workflow__head > .badge { margin-top: 1px; flex: none; }
.manual-workflow__notice { margin-top: 16px; }
.manual-workflow__notice p { margin: 0; }

.manual-progress {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none; margin: 18px 0; padding: 12px 14px;
  border: 1px solid var(--limestone); border-radius: var(--radius); background: var(--whisper);
}
.manual-progress li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 2px 14px; color: var(--graphite); }
.manual-progress li:first-child { padding-left: 0; }
.manual-progress li:last-child { padding-right: 0; }
.manual-progress li + li { border-left: 1px solid var(--limestone); }
.manual-progress__num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 25px; height: 25px; border: 1px solid var(--granite); border-radius: 50%;
  background: var(--surface); color: var(--graphite); font-size: 12px; font-weight: 800;
}
.manual-progress strong, .manual-progress small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual-progress strong { color: var(--graphite); font-size: 12.5px; }
.manual-progress small { margin-top: 1px; font-size: 11.5px; }
.manual-progress li.is-current strong, .manual-progress li.is-complete strong { color: var(--heading); }
.manual-progress li.is-current .manual-progress__num { border-color: var(--navy); background: var(--navy); color: var(--white); }
.manual-progress li.is-complete .manual-progress__num { border-color: var(--eno); background: var(--eno); color: var(--white); }

.manual-target {
  display: grid; grid-template-columns: minmax(240px, .7fr) minmax(420px, 1.3fr); gap: 6px 24px;
  padding: 16px 18px; border: 1px solid var(--hatteras); border-radius: var(--radius); background: var(--whisper);
}
.manual-target__copy { display: flex; flex-direction: column; align-self: center; min-width: 0; }
.manual-target__eyebrow { color: var(--link); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.manual-target__copy strong { margin-top: 2px; color: var(--heading); font-size: 14px; }
.manual-target__copy > span:last-child { margin-top: 2px; color: var(--graphite); font-size: 12px; }
.manual-target__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.manual-target__form .btn { white-space: nowrap; }
.manual-target__help { grid-column: 2; margin: 0; }
.manual-scope-warning { grid-column: 1 / -1; margin: 6px 0 0; padding: 9px 12px; font-size: 12.5px; }
.manual-scope-warning[hidden] { display: none; }

.manual-workspace { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 14px; margin-top: 14px; }
.manual-panel { min-width: 0; padding: 17px; border: 1px solid var(--limestone); border-radius: var(--radius); background: var(--surface); }
.manual-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.manual-panel__title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.manual-panel__title > span:last-child { min-width: 0; }
.manual-panel__title strong, .manual-panel__title small { display: block; }
.manual-panel__title strong { color: var(--heading); font-size: 14px; }
.manual-panel__title small { margin-top: 1px; color: var(--graphite); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual-step-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 27px; height: 27px; border-radius: 6px; background: var(--navy); color: var(--white);
  font-size: 12px; font-weight: 800;
}
.manual-panel__tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.manual-prompt { min-height: 244px; max-height: 390px; resize: vertical; font-size: 11.5px; line-height: 1.5; }
.manual-panel > .help { margin-bottom: 0; }
.manual-scope-lock {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 7px 9px;
  border-radius: 6px; background: var(--whisper); color: var(--graphite); font-size: 11.5px;
}
.manual-scope-lock svg { flex: none; color: var(--magnolia); }
.manual-scope-lock .mono { color: var(--iron); font-size: 11.5px; }
.manual-response-list { display: grid; gap: 9px; }
.manual-response-row { padding: 10px; border: 1px solid var(--limestone); border-radius: 7px; background: var(--whisper); }
.manual-response-row:focus-within { border-color: var(--link); }
.manual-response-row__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.manual-response-row__title { color: var(--graphite); font-size: 10.5px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.manual-remove, .manual-expand {
  border: 0; padding: 0; background: transparent; color: var(--link); cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
}
.manual-remove { color: var(--copper); }
.manual-remove:hover, .manual-expand:hover { text-decoration: underline; }
.manual-remove:focus-visible, .manual-expand:focus-visible, .manual-dialog__close:focus-visible {
  outline: 2px solid var(--link); outline-offset: 3px; border-radius: 2px;
}
.manual-response-row__fields { display: grid; grid-template-columns: 145px minmax(0, 1fr); align-items: start; gap: 9px; }
.manual-response-row .field-label { margin-bottom: 4px; font-size: 11.5px; }
.manual-model-field { min-width: 0; }
.manual-response-field { min-width: 0; }
.manual-response-field__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.manual-response-field__label .field-label { margin-bottom: 4px; }
.manual-expand { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; white-space: nowrap; }
.manual-compact-response { min-height: 76px; resize: vertical; line-height: 1.4; }
.manual-response-count { display: block; margin-top: 3px; color: var(--graphite); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.manual-add { margin-top: 9px; }
.manual-submit { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--limestone); }
.manual-submit p { margin: 0; color: var(--graphite); font-size: 11.5px; }
.manual-submit .btn { flex: none; }
.manual-empty { display: flex; align-items: center; gap: 13px; margin-top: 14px; padding: 20px; border: 1px dashed var(--granite); border-radius: var(--radius); color: var(--graphite); }
.manual-empty__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 8px; background: var(--whisper); color: var(--link); }
.manual-empty strong { color: var(--heading); font-size: 13.5px; }
.manual-empty p { margin: 2px 0 0; font-size: 12.5px; }

.manual-dialog {
  width: min(840px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  border: 1px solid var(--limestone); border-radius: 10px; background: var(--surface); color: var(--iron);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
}
.manual-dialog::backdrop { background: rgba(0, 0, 0, .62); }
.manual-dialog__surface { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); }
.manual-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 19px 21px 15px; border-bottom: 1px solid var(--limestone); }
.manual-dialog__head h3 { margin: 2px 0 0; color: var(--heading); font-size: 18px; }
.manual-dialog__head p { margin: 2px 0 0; color: var(--graphite); font-size: 12.5px; }
.manual-dialog__close { border: 0; background: transparent; color: var(--graphite); cursor: pointer; font-family: inherit; font-size: 28px; line-height: 1; }
.manual-dialog__body { min-height: 0; padding: 17px 21px; overflow: auto; }
.manual-dialog__editor { min-height: min(48dvh, 430px); resize: vertical; line-height: 1.5; }
.manual-dialog__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 21px 17px; border-top: 1px solid var(--limestone); }
.manual-dialog__foot > div { display: flex; gap: 8px; }
.manual-dialog__foot .manual-response-count { margin: 0; font-size: 11.5px; }

@media (max-width: 1023px) {
  .manual-target { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .manual-target__help { grid-column: 1; }
  .manual-workspace { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
    /* Keep controls clear of an iPhone notch in landscape; the first values
       are fallbacks for older engines that do not understand env()/max(). */
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .page { padding-top: 22px; padding-bottom: 40px; }
  .page-head { margin-bottom: 22px; }
  .page-head h1 { font-size: 24px; line-height: 1.18; }
  .card--pad { padding: 18px; }
  .stat { padding: 14px; min-width: 0; }
  .stat__value { font-size: 26px; }
  .auth-admin-grid { grid-template-columns: 1fr; }
  .site-header__inner {
    gap: 10px; height: auto; min-height: 60px;
    padding-top: 8px; padding-bottom: 8px;
  }
  .brand { flex: none; }
  .brand__name, .main-nav__user { display: none; }
  .main-nav {
    flex: 1; min-width: 0; overflow-x: auto; justify-content: flex-start;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav__link {
    display: inline-flex; align-items: center; min-height: 44px;
    white-space: nowrap; padding-left: 9px; padding-right: 9px;
  }
  .main-nav__jobs { min-height: 38px; padding-left: 9px; padding-right: 9px; }
  .theme-toggle { width: 44px; height: 44px; min-width: 44px; margin-left: 0; }
  .btn { min-height: 44px; }
  /* iOS Safari zooms the viewport when a focused field is below 16px. */
  .input, select.input, textarea.input { font-size: 16px; }
  .keygrid, .dl-grid { grid-template-columns: minmax(0, 1fr); }
  .segmented { max-width: 100%; overflow-x: auto; }
  .genprog { padding: 17px; }
  .genprog__head { gap: 10px; }
  .genprog__pct { font-size: 1.8rem; }
  .manual-progress { grid-template-columns: 1fr; gap: 9px; }
  .manual-progress li, .manual-progress li:first-child, .manual-progress li:last-child { padding: 2px 0; }
  .manual-progress li + li { padding-top: 9px; border-top: 1px solid var(--limestone); border-left: 0; }
  .manual-workflow__head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .manual-target { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .manual-target__form { grid-template-columns: minmax(0, 1fr); }
  .manual-target__help { grid-column: 1; }
  .manual-workspace { grid-template-columns: minmax(0, 1fr); }
  .manual-panel { padding: 14px; }
  .manual-panel__head { flex-direction: column; }
  .manual-panel__tools { width: 100%; justify-content: flex-start; }
  .manual-response-row__fields { grid-template-columns: minmax(0, 1fr); }
  .manual-submit { align-items: stretch; flex-direction: column; }
  .manual-submit .btn { width: 100%; }
  .manual-dialog { width: calc(100% - 18px); max-height: calc(100dvh - 18px); }
  .manual-dialog__surface { max-height: calc(100dvh - 20px); }
  .manual-dialog__head, .manual-dialog__body, .manual-dialog__foot { padding-left: 15px; padding-right: 15px; }
  .manual-dialog__foot { align-items: stretch; flex-direction: column; }
  .manual-dialog__foot > div { display: grid; grid-template-columns: 1fr 1fr; }
  .site-footer {
    padding-bottom: 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .brand__logo { width: 50px; height: 38px; }
  .main-nav { gap: 2px; }
  .main-nav__link { padding-left: 7px; padding-right: 7px; font-size: 13px; }
}

/* ---------- Steps ---------- */
.step { background: var(--surface); border: 1px solid var(--limestone); border-radius: var(--radius); padding: 18px; }
.step__num { width: 28px; height: 28px; border-radius: 6px; background: var(--navy); color: var(--white); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.step h3 { margin: 0 0 5px; font-size: 15px; color: var(--heading); font-weight: 700; }
.step p { margin: 0; font-size: 13.5px; color: var(--graphite); }

/* ---------- Misc ---------- */
.muted { color: var(--graphite); }
.divider { height: 1px; background: var(--limestone); border: 0; margin: 18px 0; }
details > summary { cursor: pointer; list-style: none; color: var(--link); font-weight: 600; font-size: 13.5px; }
details > summary::-webkit-details-marker { display: none; }
.codeblock { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--whisper); border: 1px solid var(--limestone); border-radius: 6px; padding: 12px; overflow: auto; white-space: pre-wrap; color: var(--iron); }
iframe.preview { width: 100%; height: 230px; border: 1px solid var(--limestone); border-radius: 6px; background: var(--white); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--limestone); background: var(--surface); padding: 20px 0; font-size: 12.5px; color: var(--graphite); }

/* ---------- Live run view (detection in progress) ---------- */
/* Horizontal stepper: resolve → prompt → query → attribute → results. */
.runsteps { display: flex; flex-wrap: wrap; gap: 10px; }
.runstep {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--graphite);
  padding: 7px 13px; border: 1px solid var(--limestone); border-radius: 999px;
  background: var(--surface);
}
.runstep__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--granite); flex: none; }
.runstep.is-done { color: var(--magnolia); border-color: #cfe7e7; background: #eaf5f5; }
.runstep.is-done .runstep__dot { background: var(--eno); }
.runstep.is-active { color: var(--heading); border-color: var(--link); }
.runstep.is-active .runstep__dot { background: var(--copper); animation: aq-pulse 1s ease-in-out infinite; }
:root[data-theme="dark"] .runstep.is-done { background: rgba(51,152,152,.14); border-color: rgba(51,152,152,.4); }

/* Pulsing "running" dot next to the status badge. */
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; margin-right: 5px; animation: aq-pulse 1s ease-in-out infinite; }

/* A model card actively being queried gets a soft accent ring + shimmer. */
.model-card { transition: border-color .2s, box-shadow .2s; }
.model-card.is-querying { border-color: var(--persimmon); box-shadow: 0 0 0 3px rgba(232,153,35,.14); }

@keyframes aq-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .runstep.is-active .runstep__dot, .live-dot { animation: none; }
}

/* ---------- Template generation progress (live, animated) ----------
 * The Template Generator page renders this while a background model run is in
 * flight. The fill uses the constant Duke blues -> eno teal (so it reads the
 * same in light and dark), with travelling stripes + a periodic sweep for a
 * lively "working" feel; terminal states swap to a solid teal/copper and stop. */
.genprog {
  position: relative; overflow: hidden;
  border: 1px solid var(--limestone); border-radius: 12px;
  padding: 20px 22px; margin-bottom: 24px;
  background:
    radial-gradient(900px 180px at -5% -60%, rgba(0, 83, 155, .10), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow-md);
}
.genprog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.genprog__eyebrow { display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--graphite); }
.genprog__title { font-size: 1.05rem; font-weight: 700; color: var(--heading); margin: 6px 0 0; }
.genprog__pct { display: flex; align-items: baseline; gap: 1px; flex: none;
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 2.15rem; line-height: 1; color: var(--heading); }
.genprog__pct-sign { font-size: 1.05rem; font-weight: 700; color: var(--graphite); }

.genprog__bar { position: relative; height: 14px; margin: 16px 0 2px;
  border-radius: 999px; background: var(--whisper); border: 1px solid var(--limestone); overflow: hidden; }
.genprog__fill {
  position: relative; height: 100%; width: 0; border-radius: 999px;
  /* Clip the travelling stripes + sheen to the filled width: the sweep below
     animates past the fill's right edge, and without this it spills out of the
     colour into the empty part of the track (box-shadow is unaffected). */
  overflow: hidden;
  background: linear-gradient(90deg, var(--navy), var(--royal) 52%, var(--eno));
  box-shadow: 0 0 12px rgba(0, 83, 155, .45);
  transition: width .6s cubic-bezier(.22, .61, .36, 1), background .4s, box-shadow .4s;
}
/* Barber-pole stripes travelling along the fill. */
.genprog__fill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: repeating-linear-gradient(115deg,
    rgba(255, 255, 255, .26) 0 10px, rgba(255, 255, 255, 0) 10px 22px);
  background-size: 44px 100%;
  animation: genprog-stripes 1.1s linear infinite;
}
/* Bright highlight that periodically sweeps across the fill. */
.genprog__fill::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -55%; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-18deg); filter: blur(2px);
  animation: genprog-sweep 1.9s ease-in-out infinite;
}
@keyframes genprog-stripes { to { background-position: -44px 0; } }
@keyframes genprog-sweep { 0% { left: -55%; } 55%, 100% { left: 115%; } }

/* Terminal states: solid colour, motion stops. */
.genprog.is-ok  .genprog__fill { background: linear-gradient(90deg, var(--eno), var(--magnolia)); box-shadow: 0 0 14px rgba(51, 152, 152, .5); }
.genprog.is-err .genprog__fill { background: linear-gradient(90deg, var(--copper), #a33f00); box-shadow: 0 0 14px rgba(200, 78, 0, .45); }
.genprog.is-ok .genprog__fill::before, .genprog.is-err .genprog__fill::before,
.genprog.is-ok .genprog__fill::after,  .genprog.is-err .genprog__fill::after { animation: none; opacity: 0; }

.genprog__steps { list-style: none; display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 15px 0 0; padding: 0; }
.genstep { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--granite); }
.genstep__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--limestone);
  transition: background .3s, box-shadow .3s; }
.genstep.is-active { color: var(--heading); }
.genstep.is-active .genstep__dot { background: var(--royal);
  box-shadow: 0 0 0 4px rgba(0, 83, 155, .14); animation: aq-pulse 1s ease-in-out infinite; }
.genstep.is-done { color: var(--magnolia); }
.genstep.is-done .genstep__dot { background: var(--eno); box-shadow: none; animation: none; }
.genprog.is-err .genstep.is-active .genstep__dot { background: var(--copper); box-shadow: 0 0 0 4px rgba(200, 78, 0, .16); }

.genprog__logwrap { margin-top: 14px; }
.genprog__logwrap summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--link); width: max-content; }
.genprog__log { margin-top: 8px; max-height: 170px; overflow: auto; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.genprog__hint { margin-top: 12px; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .genprog__fill { transition: none; }
  .genprog__fill::before, .genprog__fill::after,
  .genstep.is-active .genstep__dot { animation: none; }
}

/* ---------- Provider API keys (compact card grid) ---------- */
.keys-filter { margin: 14px 0 4px; max-width: 340px; }
.keys-empty { font-size: 12.5px; color: var(--graphite); margin: 12px 2px 0; }
.keygroup { margin-top: 16px; }
.keygroup__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--graphite); margin: 0 0 9px; display: flex; align-items: center; gap: 8px; }
.keygroup__hint { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--granite); }
.keygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 10px; }

.keycard { display: flex; flex-direction: column; gap: 7px;
  border: 1px solid var(--limestone); border-radius: 9px; padding: 10px 12px; background: var(--surface); min-width: 0; }
.keycard--engine { border-color: var(--hatteras); background: var(--whisper); }
.keycard--manual { background: transparent; border-style: dashed; }
.keycard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.keycard__name { font-weight: 700; color: var(--heading); font-size: 13.5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keycard__pub { font-weight: 500; color: var(--graphite); font-size: 11.5px; margin-left: 6px; }
.keycard__status { display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.keycard__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--granite); flex: none; }
.keycard__status.is-set { color: #1E8E3E; }
.keycard__status.is-set .keycard__dot { background: #1E8E3E; }
.keycard__status.is-unset { color: var(--granite); }
.keycard__form { display: flex; gap: 6px; align-items: center; }
.keycard__form .input { flex: 1; min-width: 0; padding: 6px 9px; font-size: 12.5px; }
.keycard__clear { padding: 6px 9px; }
.keycard__foot { font-size: 11px; color: var(--graphite); display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; }
.keycard__foot .mono { font-size: 11px; color: var(--graphite); overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="dark"] .keycard__status.is-set { color: #3FB979; }
:root[data-theme="dark"] .keycard__status.is-set .keycard__dot { background: #3FB979; }

/* ---------- Toggle (segmented control) ---------- */
.segmented { display: inline-flex; background: var(--whisper); border: 1px solid var(--limestone); border-radius: 7px; padding: 3px; gap: 3px; }
.segmented button { border: 0; background: transparent; color: var(--graphite); font-weight: 600; font-size: 13.5px; padding: 7px 14px; border-radius: 5px; cursor: pointer; }
.segmented button.is-active { background: var(--navy); color: var(--white); }

/* ---------- Run-artifact downloads (run detail page) ----------
 * Final results + the intermediate pipeline stages as download tiles; the
 * intermediates are deliberately not rendered inline on the results view. */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.dl {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 13px;
  border: 1px solid var(--limestone); border-radius: var(--radius);
  background: var(--surface); text-decoration: none;
}
.dl:hover { border-color: var(--link); text-decoration: none; }
.dl__name { font-weight: 700; font-size: 13.5px; color: var(--heading); }
.dl__name::before { content: "⤓ "; color: var(--link); }
.dl__ext { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--graphite); font-weight: 600; }
.dl__meta { font-size: 11.5px; color: var(--graphite); line-height: 1.35; }
/* Intermediate-stage tiles sit a step back from the final results. */
.dl--step { background: var(--whisper); }

/* ---------- Dark theme ----------
 * Only the neutrals + semantic tokens shift; the two Duke blues (--navy,
 * --royal) and the accent hues stay constant, so the header, primary buttons
 * and status colors keep their brand identity on a dark surface. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --whisper:   #14171b;   /* page background + inset fills (table head, code) */
  --iron:      #e7e9ee;   /* primary text */
  --graphite:  #9aa3b2;   /* muted text */
  --limestone: #2c313a;   /* hairline borders / dividers */
  --granite:   #3a414d;   /* input borders */
  --hatteras:  #1f3052;   /* focus-ring halo + navy badge background */
  --ginger:    #232830;   /* table row hover */
  --surface:   #1b1f26;   /* cards, inputs, footer */
  --heading:   #cdddf7;   /* lightened navy for headings + key figures */
  --link:      #6ea8e6;   /* lightened royal for links / accent text */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
}

/* Tailwind's text-navy utility is a fixed dark navy — unreadable on dark
 * surfaces, so map it onto the themed heading color in dark mode. */
:root[data-theme="dark"] .text-navy { color: var(--heading); }