/* ============================================================
   Soro patient portal — ledger monochrome, one signal green.
   Ink-on-white with hairlines; green (#2E6B4F) only where it
   means something: live status, done tasks, focus.
   Same tokens as the internal platform and client portal
   (soro-client-database/public/portal.css) so every Soro
   surface reads as one product.
   ============================================================ */
:root {
  --sage: #2E6B4F;          /* brand green — used sparingly, on purpose */
  --sage-light: #4BA97B;
  --sage-wash: #EAF2ED;     /* green tint for the rare highlighted surface */
  --sand: #D8D4CA;
  --cream: #FFFFFF;
  --surface: #FFFFFF;       /* paper: cards, inputs, chips */
  --on-pine: #FFFFFF;       /* text on a --pine / --sage fill */
  --page-a: #FBFBF9;        /* the gradient behind the sign-in card */
  --page-b: #F1F3EF;
  --rail-bg: #FBFBF9;       /* the sidebar, a half-shade off paper */
  --topbar-bg: rgba(255, 255, 255, .86);
  --pine: #161A17;          /* primary buttons + headline text */
  --pine-deep: #101312;     /* toasts, chat bubbles, dark accents */
  --pine-soft: #2A2F2B;
  --ink: #141614;
  --text: #33372F;
  --muted: #6E7268;
  --sage-text: #85897F;     /* micro-labels — neutral gray */
  --mint: #F0F1EC;
  --wash: #F7F7F4;
  --wash-deep: #EEEFEA;
  --line: #E9E9E4;
  --line-strong: #D9DAD3;
  --flag: #C03B30;
  --flag-bg: #FBEFED;
  --ok: #2E6B4F;
  --ok-bg: #EAF2ED;
  --font: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(20, 22, 20, .04);
  --shadow-md: 0 6px 18px -6px rgba(20, 22, 20, .10);
  --shadow-lg: 0 24px 60px -18px rgba(20, 22, 20, .22), 0 6px 18px rgba(20, 22, 20, .07);
  --rail: 232px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }
h1, h2, h3 { color: var(--ink); letter-spacing: -0.02em; }

/* ---------- sign-in gate (light card, matches the internal platform) ---------- */
.gate {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(60% 42% at 50% 0%, var(--sage-wash) 0%, transparent 72%),
    linear-gradient(180deg, var(--page-a) 0%, var(--page-b) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px 26px;
  text-align: center;
}
.gate-card {
  position: relative; z-index: 2;
  width: 100%; max-width: 408px;
  margin-top: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 36px 32px 30px;
  overflow: hidden;
  opacity: 0; transform: translateY(14px);
  animation: gate-rise .6s cubic-bezier(.16,1,.3,1) .08s forwards;
}
.gate-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px;
  background: radial-gradient(72% 100% at 50% 0%, rgba(75,169,123,.13), transparent 72%);
  pointer-events: none;
}
@keyframes gate-rise { to { opacity: 1; transform: none; } }
.gate-emblem {
  position: relative;
  width: 84px; height: 84px; margin: 0 auto 22px; display: block;
  padding: 16px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md);
  object-fit: contain;
}
.gate-card h1 {
  position: relative;
  font-size: clamp(1.5rem, 4.5vw, 1.85rem); font-weight: 800;
  letter-spacing: -.02em; color: var(--ink); margin-bottom: 8px; text-wrap: balance;
}
.gate-sub {
  position: relative;
  font-size: 14px; line-height: 1.6; color: var(--muted);
  margin-bottom: 24px; max-width: 40ch; margin-left: auto; margin-right: auto;
}
.gate-card form, .gate-card #linkVerify { position: relative; text-align: left; }
.gate-card label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--sage-text); margin: 4px 0 7px;
}
.gate-card input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  font-size: 15px; color: var(--ink); background: var(--wash);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.gate-card input::placeholder { color: var(--sage-text); }
.gate-card input:focus { outline: none; border-color: var(--sage); background: var(--surface); box-shadow: 0 0 0 3px rgba(46,107,79,.14); }
.gate-error {
  margin-top: 14px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--flag-bg); border: 1px solid rgba(192,59,48,.22);
  color: var(--flag); font-size: 13px; font-weight: 600;
}
.btn-primary {
  width: 100%; margin-top: 20px; padding: 13px 16px;
  background: var(--pine); color: var(--on-pine); border: none; border-radius: var(--r-md);
  font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
  transition: filter .15s, transform .1s;
}
.btn-primary:hover { filter: brightness(1.18); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary[disabled] { opacity: .55; cursor: default; }
.gate-foot { position: relative; margin-top: 22px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.gate-legal {
  position: relative; z-index: 2;
  margin-top: auto; padding-top: 26px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .02em; color: var(--sage-text);
}
.gate-legal::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage-light); box-shadow: 0 0 0 3px rgba(75,169,123,.18);
}
@media (prefers-reduced-motion: reduce) {
  .gate-card { animation: none; opacity: 1; transform: none; }
}

/* ---------- portal chrome ---------- */
.btn-ghost {
  background: none; border: 1px solid var(--line-strong); color: var(--text);
  border-radius: var(--r-sm); padding: 7px 14px; font-size: 13px; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.btn-ghost:hover { border-color: var(--sage); background: var(--wash); }

.empty { padding: 26px 4px; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- findings ---------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px;
  background: var(--wash); color: var(--muted); border: 1px solid var(--line);
}
.chip.recovered { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
/* In dispute is active work, not a warning — so it reads as ink on the
   deep wash with a hairline, not as the retired amber. */
.chip.in_dispute { background: var(--wash-deep); color: var(--pine-soft); border-color: var(--line-strong); }
.chip.identified { background: var(--wash-deep); color: var(--sage-text); border-color: transparent; }
.chip.in_review { background: var(--wash); color: var(--muted); }
.chip.dismissed { background: var(--mint); color: var(--sage-text); border-color: transparent; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--sage-text); padding: 10px 10px 8px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 10px; border-bottom: 1px solid var(--wash-deep); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.tbl .dim { color: var(--muted); font-size: 12px; }
.tbl-scroll { overflow-x: auto; }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: var(--wash); }
.tbl .id { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tbl .tag { display: inline-block; font-size: .7rem; font-weight: 600; color: var(--sage-text); background: var(--wash-deep); padding: .25em .65em; border-radius: 6px; }

/* ---------- audits ---------- */
.audit { padding: 14px 0; border-bottom: 1px solid var(--wash-deep); }
.audit:last-child { border-bottom: none; }
.audit-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.audit-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.audit-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.audit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.audit-nums { display: flex; gap: 18px; font-size: 12.5px; }
.audit-nums b { color: var(--ink); font-variant-numeric: tabular-nums; }
.btn-report {
  background: var(--wash); border: 1px solid var(--line-strong); color: var(--pine);
  border-radius: var(--r-sm); padding: 7px 13px; font-size: 12.5px; font-weight: 700;
  transition: background .15s, border-color .15s;
}
.btn-report:hover { background: var(--wash-deep); border-color: var(--sage); }
.btn-report[disabled] { opacity: .55; cursor: default; }

/* ---------- timeline ---------- */
.tl { list-style: none; }
.tl li { position: relative; padding: 0 0 18px 24px; }
.tl li:last-child { padding-bottom: 4px; }
.tl li::before {
  content: ""; position: absolute; left: 5px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sage); box-shadow: 0 0 0 3px rgba(46,107,79,.16);
}
.tl li::after {
  content: ""; position: absolute; left: 9px; top: 18px; bottom: 2px;
  width: 1px; background: var(--line);
}
.tl li:last-child::after { display: none; }
.tl-date { font-size: 11px; font-weight: 700; color: var(--sage-text); text-transform: uppercase; letter-spacing: .06em; }
.tl-text { font-size: 13px; color: var(--text); margin-top: 2px; }

/* ---------- agreements ---------- */
.agr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--wash-deep); font-size: 13px; }
.agr:last-child { border-bottom: none; }
.agr b { color: var(--ink); }
.agr .dim { color: var(--muted); font-size: 12px; }

/* ---------- footer / toast ---------- */
.foot {
  max-width: 1080px; margin: 0 auto; padding: 0 28px 44px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 16px);
  background: var(--pine-deep); color: var(--on-pine); font-size: 13px; font-weight: 600;
  padding: 11px 18px; border-radius: 999px; box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- gate: multi-step screens (Cognito) ---------- */
.gate-link {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: none; padding: 4px;
  font-size: 12.5px; font-weight: 700; color: var(--sage);
  text-align: center;
}
.gate-link:hover { color: var(--pine); text-decoration: underline; }
.gate-note {
  font-size: 13px; color: var(--muted); margin: 2px 0 10px;
  line-height: 1.55;
}

/* ---------- drop box ---------- */
.dropzone {
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 26px 18px;
  text-align: center;
  background: var(--wash);
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone:focus-visible, .dropzone.drag {
  border-color: var(--sage);
  background: var(--mint);
  outline: none;
}
/* Still droppable mid-batch: the queue below reports progress, so
   there's no reason to lock people out of adding one more file. */
.dropzone.busy { border-style: solid; border-color: var(--sage-light); }
.dz-icon { font-size: 26px; color: var(--sage-text); line-height: 1; margin-bottom: 8px; }
.dz-text { font-size: 14px; color: var(--ink); margin-bottom: 8px; }
.dz-hint { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* ---------- the sending queue ----------
   One row per file in flight. A stalled or rejected file says so on
   its own line instead of taking the whole batch down with it. */
.upload-queue { margin-top: 14px; }
.uq-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--sage-text); margin-bottom: 8px;
}
.uq-row { padding: 7px 2px 9px; border-bottom: 1px solid var(--line); }
.uq-row:last-child { border-bottom: none; }
.uq-top { display: flex; align-items: baseline; gap: 10px; }
.uq-name {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uq-state { font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.uq-row.sent .uq-state { color: var(--ok); font-weight: 600; }
.uq-row.failed .uq-state { color: var(--flag); white-space: normal; text-align: right; }
.uq-retry {
  background: none; border: none; padding: 0 0 0 4px;
  font-family: var(--font); font-size: 11.5px; font-weight: 700;
  color: var(--sage); cursor: pointer; border-bottom: 1px solid currentColor;
  white-space: nowrap;
}

.uq-bar {
  margin-top: 6px; height: 3px; border-radius: 999px;
  background: var(--wash-deep); overflow: hidden;
}
.uq-bar span {
  display: block; height: 100%; width: 0;
  background: var(--sage-light);
  border-radius: 999px;
  transition: width .22s ease, background .18s ease;
}
.uq-row.sent .uq-bar span { background: var(--sage); }
.uq-row.failed .uq-bar span { background: var(--flag); }
.uq-row.waiting .uq-bar span { background: var(--line-strong); width: 100%; opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .uq-bar span { transition: none; }
}

.upload-list { margin-top: 14px; }
.upload-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--sage-text); margin-bottom: 6px;
}
.upload-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.upload-row:last-child { border-bottom: none; }
.upload-name {
  color: var(--ink); font-weight: 600; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.upload-name:hover { color: var(--pine); text-decoration: underline; }
.upload-meta { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.upload-del {
  background: none; border: none; color: var(--muted);
  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.upload-del:hover { color: var(--flag); background: var(--flag-bg); }

/* ============================================================
   Dashboard shell (rail + topbar + routed views)
   ============================================================ */
.rail-signout {
  margin-top: 12px; width: 100%; text-align: center;
}

.app { display: grid; grid-template-columns: var(--rail, 232px) 1fr; min-height: 100vh; }

.rail {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--rail-bg);
  color: var(--text);
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  overflow-y: auto;
}
.rail-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 4px 8px 18px; }
.rail-brand .rail-logo { height: 26px; width: auto; display: block; flex-shrink: 0; }
.rail-brand .sub { font-size: 11px; color: var(--muted); }

.rail-live {
  display: inline-flex; align-items: center; gap: .5em; align-self: flex-start;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 100px;
  padding: .35em .8em; margin: 0 8px 18px; box-shadow: var(--shadow-sm);
}
.rail-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--sage-light); animation: pulse 2.4s ease-in-out infinite; display: inline-block; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.nav-label { font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--sage-text); padding: 0 8px; margin: 6px 0 8px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: .7em;
  font-size: .87rem; font-weight: 600; color: var(--text);
  padding: .6em .7em; border-radius: var(--r-sm);
  transition: background .15s, color .15s;
}
.nav a svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.nav a:hover { color: var(--ink); background: var(--wash-deep); }
.nav a:hover svg { color: var(--muted); }
.nav a.active {
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  padding: calc(.6em - 1px) calc(.7em - 1px);
}
.nav a.active svg { color: var(--sage); }
.nav a .badge { margin-left: auto; font-size: .68rem; font-weight: 700; color: var(--muted); background: var(--mint); padding: .05em .6em; border-radius: 100px; }
/* An empty count is not a count. Without this a nav item with nothing
   waiting wears a small blank pill that reads as a badge you can't
   parse. */
.nav a .badge:empty { display: none; }

.rail-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.plan-card {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px; background: var(--surface); box-shadow: var(--shadow-sm);
}
.plan-card .pc-name { font-weight: 700; color: var(--ink); font-size: .92rem; letter-spacing: -0.01em; }
.plan-card .pc-meta { font-size: .72rem; color: var(--muted); margin-top: 3px; }
.plan-card .pc-row { display: flex; justify-content: space-between; font-size: .74rem; margin-top: 10px; color: var(--muted); }
.plan-card .pc-row b { color: var(--ink); font-weight: 700; }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 16px clamp(18px, 3vw, 34px);
  background: var(--topbar-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .tb-title { min-width: 0; }
.topbar h1 { font-size: 1.28rem; letter-spacing: -0.02em; }
.topbar .tb-sub { font-size: .8rem; color: var(--muted); margin-top: 1px; }
/* Most pages carry no subtitle. An empty one still owns its top margin,
   which nudges the title off-centre against the rest of the bar. */
.topbar .tb-sub:empty { display: none; }
.tb-spacer { flex: 1; }
.search {
  display: flex; align-items: center; gap: .5em;
  border: 1px solid var(--line-strong); border-radius: 100px;
  padding: .5em .9em; background: var(--surface); color: var(--muted);
  min-width: 220px; transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(46,107,79,.14); }
.search svg { width: 15px; height: 15px; flex: none; }
.search input { border: none; outline: none; background: none; width: 100%; font-size: .86rem; color: var(--ink); font-family: inherit; }

.view { padding: clamp(20px, 3vw, 34px); animation: fade .5s cubic-bezier(.22,.61,.21,1); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.eyebrow { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--sage-text); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 30px 0 14px; flex-wrap: wrap; }
.section-title h2 { font-size: 1.28rem; letter-spacing: -0.02em; }
.section-title .st-note { font-size: .82rem; color: var(--muted); }
.lead { color: var(--muted); font-size: .96rem; max-width: 70ch; }

/* ---- KPI cards ---- */
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 16px 15px; box-shadow: var(--shadow-sm); min-width: 0;
}
.kpi .k-label { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .5em; }
.kpi .k-label svg { width: 14px; height: 14px; color: var(--muted); }
.kpi .k-value { font-size: 1.72rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin-top: 8px; font-variant-numeric: tabular-nums; }
.kpi .k-value.pos { color: var(--ok); }
.kpi .k-sub { font-size: .74rem; color: var(--muted); margin-top: 3px; }
.kpi.feature { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-sm); }
.kpi.feature .k-label svg { color: var(--sage); }
.kpi.feature .k-value { color: var(--sage); }

/* ---- Card grid ---- */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 20px; box-shadow: var(--shadow-sm); min-width: 0;
}
.card.span4 { grid-column: span 4; }
.card.span5 { grid-column: span 5; }
.card.span6 { grid-column: span 6; }
.card.span7 { grid-column: span 7; }
.card.span8 { grid-column: span 8; }
.card.span12 { grid-column: span 12; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card-head .t { font-weight: 600; font-size: .98rem; color: var(--ink); }
.card-head .s { font-size: .76rem; color: var(--muted); }
.card-head a { font-size: .78rem; font-weight: 600; color: var(--sage-text); }
.card-head a:hover { color: var(--sage); }

/* ---- Donut ---- */
.donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut-wrap { position: relative; flex: none; }
.donut-wrap svg { width: 118px; height: 118px; }
.donut-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.donut-center .v { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.donut-center .l { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; font-size: .82rem; flex: 1 1 100%; min-width: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: 9px; min-width: 0; }
.legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.legend .lb { color: var(--text); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend .lval { flex: none; display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; padding-left: 4px; }
.legend .amt { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.legend .ct { color: var(--muted); font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Bars ---- */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding-top: 8px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; height: 100%; justify-content: flex-end; }
.bar-track { width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.bar { width: 46%; border-radius: 5px 5px 2px 2px; transform: scaleY(0); transform-origin: bottom; transition: transform .8s cubic-bezier(.22,.61,.21,1); }
.bar.identified { background: #C9CEC5; }
.bar.recovered { background: var(--sage); }
.bar-x { font-size: .66rem; font-weight: 600; color: var(--muted); }
.bars.in .bar { transform: scaleY(1); }
.chart-key { display: flex; gap: 18px; margin-top: 12px; font-size: .78rem; color: var(--muted); }
.chart-key span { display: inline-flex; align-items: center; gap: .5em; }
.chart-key i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }

/* ---- Filters / pager ---- */
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
select.sel {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line-strong); border-radius: 100px; background: var(--surface);
  padding: .55em 2.2em .55em 1em; font-size: .82rem; font-weight: 600; color: var(--ink); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%235F6B59' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85em center;
  transition: border-color .2s;
}
select.sel:hover { border-color: var(--sage); }
.filter-count { font-size: .8rem; color: var(--muted); margin-left: auto; }
.filter-count b { color: var(--ink); font-weight: 700; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.pager .pages { display: flex; gap: 6px; }
.pager button { border: 1px solid var(--line-strong); border-radius: 8px; padding: .4em .8em; font-size: .8rem; font-weight: 600; color: var(--ink); background: var(--surface); transition: .15s; }
.pager button:hover:not(:disabled) { border-color: var(--sage); color: var(--sage-text); }
.pager button:disabled { opacity: .4; cursor: default; }
.pager button.active { background: var(--pine); color: var(--on-pine); border-color: var(--pine); }

/* ---- Pipeline (claim stages) ---- */
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pipe-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.pipe-col::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--stage, var(--sage-light)); }
.pipe-col .pc-h { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pipe-col .pc-count { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin-top: 8px; font-variant-numeric: tabular-nums; }
.pipe-col .pc-amt { font-size: .84rem; font-weight: 600; color: var(--sage-text); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pipe-col .pc-bar { height: 5px; border-radius: 4px; background: var(--wash-deep); margin-top: 12px; overflow: hidden; }
.pipe-col .pc-bar > i { display: block; height: 100%; background: var(--stage, var(--sage-light)); }

/* ---- Drawer (finding detail) ---- */
.drawer-scrim { position: fixed; inset: 0; background: rgba(14,18,14,.42); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 60; }
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(480px, 94vw);
  background: var(--cream); box-shadow: var(--shadow-lg); z-index: 61;
  transform: translateX(100%); transition: transform .38s cubic-bezier(.22,.61,.21,1);
  display: flex; flex-direction: column; overflow-y: auto;
}
.drawer.open { transform: none; }
.drawer-head { position: sticky; top: 0; z-index: 1; background: var(--surface); color: var(--ink); padding: 22px 24px; border-bottom: 1px solid var(--line); }
.drawer-head .dh-id { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-text); }
.drawer-head .dh-amt { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--sage); }
.drawer-head .dh-sub { color: var(--muted); font-size: .84rem; margin-top: 4px; }
.drawer-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 9px; background: var(--wash); border: 1px solid var(--line); color: var(--muted); display: grid; place-items: center; }
.drawer-close:hover { background: var(--wash-deep); color: var(--ink); }
.drawer-body { padding: 22px 24px 40px; }
.dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 14px; font-size: .86rem; }
.dl dt { color: var(--muted); font-weight: 600; }
.dl dd { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.drawer h4 { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-text); margin: 24px 0 10px; }
.evidence-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; font-size: .88rem; line-height: 1.6; color: var(--text); }
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding-bottom: 16px; position: relative; }
.tl-item::before { content: ""; position: absolute; left: 9px; top: 18px; bottom: -4px; width: 2px; background: var(--line); }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--sage-light); background: var(--surface); margin-top: 2px; }
.tl-item.done .tl-dot { background: var(--sage); border-color: var(--sage); }
.tl-item .tl-t { font-size: .86rem; font-weight: 600; color: var(--ink); }
.tl-item .tl-d { font-size: .76rem; color: var(--muted); }

/* ---- Loading ---- */
.loading { padding: 60px; text-align: center; color: var(--muted); font-size: .9rem; }
.spinner { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--sage); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Responsive ---- */
.mobile-only { display: none; }
@media (max-width: 1120px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .card.span4, .card.span5, .card.span7, .card.span8, .card.span6 { grid-column: span 12; }
  .pipeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  :root { --rail: 0px; }
  .app { grid-template-columns: 1fr; }
  .rail { position: fixed; left: 0; top: 0; width: 260px; z-index: 80; transform: translateX(-100%); transition: transform .3s; }
  .rail.open { transform: none; box-shadow: var(--shadow-lg); }
  .mobile-only { display: inline-flex; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .topbar { gap: 10px; }
  .topbar h1 { font-size: 1.08rem; }
  .tb-sub { display: none; }
  .search { min-width: 0; flex: 1; max-width: 200px; }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bar, .bars.in .bar { transition: none; }
}

/* ============================================================
   Patient-portal additions
   ============================================================ */

/* ---- welcome band ---- */
.hello { display: flex; align-items: center; gap: 18px; }
.hello h2 { font-size: 1.35rem; letter-spacing: -0.02em; margin-bottom: 4px; }
.hello p { color: var(--muted); font-size: .92rem; max-width: 72ch; }

/* ---- care team ---- */
.ct-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--wash-deep); }
.ct-row:last-of-type { border-bottom: none; }
.ct-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--mint); color: var(--sage);
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 700; letter-spacing: .03em;
}
.ct-avatar-img { object-fit: cover; background: var(--mint); }
.ct-info { min-width: 0; flex: 1; }
.ct-name { font-weight: 700; font-size: .9rem; color: var(--ink); }
.ct-role { font-size: .76rem; color: var(--muted); }
.ct-mail { font-size: .78rem; font-weight: 600; color: var(--sage-text); text-decoration: none; }
.ct-mail:hover { color: var(--sage); text-decoration: underline; }
.ct-cta { margin-top: 14px; }
.ct-cta .btn-ghost { text-decoration: none; display: inline-block; }

/* ---- tasks ---- */
.task-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--wash-deep); }
.task-row:last-child { border-bottom: none; }
.task-check {
  width: 24px; height: 24px; flex: none; margin-top: 1px;
  border: 2px solid var(--line-strong); border-radius: 7px; background: var(--surface);
  color: transparent; display: grid; place-items: center;
  transition: border-color .15s, background .15s, color .15s;
}
.task-check svg { width: 14px; height: 14px; }
.task-check:hover { border-color: var(--sage); }
.task-row.done .task-check { background: var(--sage); border-color: var(--sage); color: var(--on-pine); }
.task-body { min-width: 0; }
.task-title { font-weight: 600; font-size: .92rem; color: var(--ink); }
.task-row.done .task-title { color: var(--muted); text-decoration: line-through; }
.task-detail { font-size: .82rem; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.task-due { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sage-text); margin-top: 5px; }

/* ---- timeline type tag ---- */
.tl-type { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ---- overview: latest team message ---- */
.ov-msg {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--wash); border: 1px solid var(--line);
  font-size: .84rem; color: var(--text); line-height: 1.5;
}
.ov-msg a { font-weight: 700; color: var(--sage); margin-left: 6px; }

/* ---- messages ---- */
.msg-card { display: flex; flex-direction: column; min-height: 480px; }
.msg-thread { flex: 1; overflow-y: auto; padding: 4px 2px 14px; max-height: 58vh; }
.msg { display: flex; flex-direction: column; margin-bottom: 14px; }
.msg.mine { align-items: flex-end; }
.msg.theirs { align-items: flex-start; }
.msg-bubble {
  max-width: min(52ch, 86%);
  padding: 11px 15px; border-radius: 16px;
  font-size: .92rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.msg.mine .msg-bubble { background: var(--pine-deep); color: var(--on-pine); border-bottom-right-radius: 5px; }
.msg.theirs .msg-bubble { background: var(--wash-deep); color: var(--ink); border-bottom-left-radius: 5px; }
.msg-meta { font-size: .7rem; color: var(--muted); margin-top: 4px; padding: 0 4px; }
.msg-compose { display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid var(--line); padding-top: 14px; }
.msg-compose textarea {
  flex: 1; resize: vertical; min-height: 44px; max-height: 160px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 11px 14px; font-family: inherit; font-size: .92rem; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.msg-compose textarea:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(46,107,79,.14); }

/* ============================================================
   Motion pass: nothing in the portal should snap
   ============================================================ */

/* Sign-in steps cross-fade instead of cutting. */
@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.gate-form.in { animation: stepIn .3s cubic-bezier(.16, 1, .3, 1) both; }
.gate-error.in { animation: stepIn .24s cubic-bezier(.16, 1, .3, 1) both; }

/* The whole app arriving after sign-in. */
@keyframes portalIn {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to { opacity: 1; transform: none; }
}
#portal.in { animation: portalIn .44s cubic-bezier(.16, 1, .3, 1) both; }

/* A list or table that swapped underneath you (filters, search, sort). */
@keyframes swapIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
.swap-in { animation: swapIn .26s cubic-bezier(.16, 1, .3, 1) both; }

/* Nav: a bar that grows on the current page, and a nudge on hover. */
.nav a { position: relative; transition: background .18s ease, color .18s ease, transform .2s cubic-bezier(.22, 1, .36, 1); }
.nav a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 0; border-radius: 0 3px 3px 0;
  background: var(--sage); transform: translateY(-50%);
  transition: height .28s cubic-bezier(.22, 1, .36, 1);
}
.nav a.active::before { height: 58%; }
.nav a:hover { transform: translateX(2px); }
.nav a .badge { transition: background .18s ease, color .18s ease; }

/* Rows, buttons and cards answer the pointer. */
.tbl tr.clickable td { transition: background .16s ease; }
.btn-primary, .btn-ghost, .btn-report {
  transition: filter .15s, border-color .18s ease, background .18s ease,
    transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease;
}
.btn-primary:hover, .btn-ghost:hover, .btn-report:hover { transform: translateY(-1px); }
.btn-primary:active, .btn-ghost:active, .btn-report:active { transform: translateY(0) scale(.98); }
.card { transition: box-shadow .24s ease, border-color .2s ease; }
.dropzone { transition: border-color .18s ease, background .18s ease, opacity .2s ease; }
select.sel { transition: border-color .2s ease, box-shadow .2s ease; }

/* A row folding out of a list when it's finished or removed. */
.task-row, .up-row {
  transition: background .16s ease, height .26s cubic-bezier(.4, 0, .2, 1),
    opacity .2s ease, margin .26s cubic-bezier(.4, 0, .2, 1),
    padding .26s cubic-bezier(.4, 0, .2, 1);
}
.row-gone { border-color: transparent !important; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .gate-form.in, .form-error.in, #portal.in, .swap-in, .view { animation: none !important; }
  .nav a, .nav a::before, .tbl tr.clickable td, .btn-primary, .btn-ghost, .btn-report,
  .card, .dropzone, select.sel, .task-row, .up-row { transition: none !important; }
  .nav a:hover { transform: none; }
}

/* ============================================================
   Progress meter
   ------------------------------------------------------------
   Only rendered when the team has published progress, so this
   never appears as an empty meter reading zero.
   ============================================================ */
.progress-card .psteps { display: flex; list-style: none; margin: 8px 0 0; padding: 0; flex-wrap: wrap; }
.progress-card .pstep { flex: 1 1 130px; min-width: 120px; position: relative; padding: 0 6px; text-align: center; }
.progress-card .pstep::before {
  content: ""; position: absolute; top: 13px; left: -50%; width: 100%;
  height: 2px; background: var(--line); z-index: 0;
}
.progress-card .pstep:first-child::before { display: none; }
.progress-card .pstep.done::before, .progress-card .pstep.current::before { background: var(--sage); }
.progress-card .pdot {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 700;
  background: var(--surface); border: 2px solid var(--line); color: var(--muted);
}
.progress-card .pstep.done .pdot { background: var(--sage); border-color: var(--sage); color: var(--on-pine); }
.progress-card .pstep.current .pdot { border-color: var(--sage); color: var(--sage); box-shadow: 0 0 0 4px rgba(46,107,79,.12); }
.progress-card .plabel { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.progress-card .pstep.current .plabel { color: var(--ink); font-weight: 700; }
.progress-card .pstep.done .plabel { color: var(--ink); }
.progress-card .pnote { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.progress-card .pfacts { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px; }
.progress-card .pfact { font-size: 13px; color: var(--muted); }
.progress-card .pfact b { color: var(--ink); font-size: 15px; }
.progress-card .pfact.ok b { color: var(--sage); }

@media (max-width: 640px) {
  .progress-card .pstep { flex-basis: 50%; margin-bottom: 14px; }
  .progress-card .pstep::before { display: none; }
}

/* ============================================================
   The drop box, wherever it lands
   ------------------------------------------------------------
   The upload card now leads the Overview as well as anchoring
   the Documents page, so it carries one line of context above
   the dashed box rather than relying on the page title.
   ============================================================ */
.upload-card .uc-lead {
  margin: -6px 0 14px; font-size: .88rem; line-height: 1.55; color: var(--muted); max-width: 76ch;
}

/* ============================================================
   Experience questionnaire
   ------------------------------------------------------------
   Answers are one tap wherever they can be. Every control is a
   real button with aria-pressed, so this works from a keyboard
   and reads correctly to a screen reader — the selected state is
   never carried by colour alone.
   ============================================================ */

/* ---- the ask, on the Overview ---- */
.fb-prompt {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--wash); border-color: var(--line-strong);
}
.fb-prompt .fbp-text { min-width: 0; }
.fb-prompt .fbp-text b { display: block; font-size: .98rem; color: var(--ink); }
.fb-prompt .fbp-text span { display: block; font-size: .86rem; color: var(--muted); margin-top: 3px; max-width: 70ch; }
.fb-prompt .fbp-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.fb-prompt .btn-primary {
  width: auto; margin: 0; padding: 10px 18px; font-size: .88rem;
  text-decoration: none; display: inline-block; white-space: nowrap;
}
.fb-prompt .gate-link { margin: 0; font-size: .84rem; }

/* ---- the questionnaire itself ---- */
.fb-card { max-width: 860px; }
.fb-card h2 { font-size: 1.3rem; }
.fb-intro { margin-top: 8px; font-size: .92rem; line-height: 1.6; color: var(--muted); max-width: 70ch; }
.fb-list { margin-top: 8px; }

.fb-q { padding: 22px 0; border-bottom: 1px solid var(--wash-deep); }
.fb-q:last-child { border-bottom: none; }
.fb-ask { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.fb-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--mint); color: var(--sage-text);
  display: grid; place-items: center; font-size: .74rem; font-weight: 700;
}
.fb-qtext { font-size: .98rem; font-weight: 600; color: var(--ink); line-height: 1.45; }
.fb-req, .fb-opt-note {
  font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; margin-left: 6px; white-space: nowrap;
}
.fb-req { color: var(--sage); }
.fb-opt-note { color: var(--sage-text); }
.fb-help { font-size: .82rem; color: var(--muted); margin-top: 3px; }

/* 5-point scale: every point labelled, because "3 out of 5" means
   different things to different people. */
.fb-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.fb-dot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); text-align: center;
  transition: border-color .16s, background .16s, transform .16s cubic-bezier(.22,1,.36,1);
}
.fb-dot b { font-size: 1.05rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.fb-dot span { font-size: .7rem; line-height: 1.3; color: var(--muted); }
.fb-dot:hover { border-color: var(--sage); transform: translateY(-1px); }
.fb-dot.on { border-color: var(--sage); background: var(--sage-wash); box-shadow: inset 0 0 0 1px var(--sage); }
.fb-dot.on b, .fb-dot.on span { color: var(--sage); }

/* 0-10 recommend scale: ends labelled, numbers do the rest. */
.fb-npsrow { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; }
.fb-nps {
  padding: 10px 0; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); font-size: .88rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: border-color .16s, background .16s, color .16s;
}
.fb-nps:hover { border-color: var(--sage); }
.fb-nps.on { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }
.fb-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .72rem; color: var(--muted); }

/* "What was hard to find" — the answer that points at a screen. */
.fb-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-opt {
  padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 100px;
  background: var(--surface); font-size: .85rem; color: var(--text); text-align: left;
  transition: border-color .16s, background .16s, color .16s;
}
.fb-opt:hover { border-color: var(--sage); }
.fb-opt.on { background: var(--sage-wash); border-color: var(--sage); color: var(--sage); font-weight: 600; }
.fb-opt.on::before { content: "✓ "; font-weight: 700; }

.fb-text {
  width: 100%; resize: vertical; min-height: 88px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 12px 14px; font-family: inherit; font-size: .92rem; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.fb-text:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(46,107,79,.14); }

.fb-q-check { padding-top: 18px; }
.fb-check { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--text); cursor: pointer; }
.fb-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--sage); flex: none; }

.fb-missing { background: var(--flag-bg); border-radius: var(--r-md); padding-left: 12px; padding-right: 12px; }

.fb-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.fb-foot .btn-primary { width: auto; margin: 0; padding: 12px 24px; font-size: .92rem; }
.fb-privacy { font-size: .78rem; color: var(--muted); max-width: 46ch; }

.fb-thanks h2 { font-size: 1.24rem; }
.fb-thanks p { margin-top: 10px; font-size: .92rem; color: var(--muted); max-width: 62ch; }
.fb-thanks-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.fb-thanks-actions .btn-ghost { text-decoration: none; }
.fb-thanks-actions .gate-link { margin: 0; font-size: .84rem; }

@media (max-width: 700px) {
  .fb-scale { grid-template-columns: 1fr; }
  .fb-dot { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 14px; text-align: left; }
  .fb-npsrow { grid-template-columns: repeat(6, 1fr); }
  .fb-prompt .fbp-actions { width: 100%; }
  .fb-prompt .btn-primary { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-dot, .fb-nps, .fb-opt { transition: none; }
  .fb-dot:hover { transform: none; }
}

/* ============================================================
   Classify — "what did you just send us?"
   ------------------------------------------------------------
   Unfolds inside the upload card, so answering never means
   leaving the page you are already on. Same ink-on-white
   hairline vocabulary as everything else; the one green is
   reserved for the option you actually picked.
   ============================================================ */
.classify {
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  animation: cf-unfold .34s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes cf-unfold {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.cf-head h3 { font-size: 1.06rem; font-weight: 700; }
.cf-head p { margin-top: 6px; font-size: .87rem; color: var(--muted); max-width: 64ch; line-height: 1.55; }

/* The files being described, so there is never a doubt about which
   batch this form is attached to. */
.cf-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.cf-file {
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; color: var(--text);
  background: var(--wash); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px;
}

/* Numbered steps: the later ones appear only once the answer above
   makes them relevant, so the form is never longer than the question. */
.cf-step { display: flex; gap: 14px; margin-top: 22px; }
.cf-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pine); color: var(--on-pine);
  font-size: 11.5px; font-weight: 700; line-height: 22px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.cf-step-body { flex: 1; min-width: 0; }
.cf-q { font-size: .95rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.cf-sub { font-size: .82rem; color: var(--muted); margin-bottom: 12px; max-width: 62ch; }

/* Option cards. The hint under each label is the point: patients do
   not know what an EOB is, and a bare list of jargon produces
   confidently wrong answers. */
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.opts.tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.opt:hover { border-color: var(--sage-light); background: var(--wash); }
.opt.on {
  border-color: var(--sage); background: var(--sage-wash);
  box-shadow: inset 0 0 0 1px var(--sage);
}
.opt input { margin-top: 3px; accent-color: var(--sage); flex: none; }
.opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-label { font-size: .87rem; font-weight: 600; color: var(--ink); }
.opt-hint { font-size: .76rem; color: var(--muted); line-height: 1.45; }

/* Detail fields */
.flds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fld label { font-size: .78rem; font-weight: 600; color: var(--text); }
.fld input, .fld textarea {
  font-family: var(--font); font-size: .88rem; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.fld textarea { resize: vertical; line-height: 1.5; }
.fld input:focus, .fld textarea:focus {
  outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-wash);
}
.fld-note { font-size: .72rem; color: var(--sage-text); }

/* One-tap triage. Not a dropdown: the whole list is worth reading,
   and it is the field most likely to be skipped if it costs effort. */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-family: var(--font); font-size: .82rem; font-weight: 600; color: var(--text);
  padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.chip:hover { border-color: var(--sage-light); background: var(--wash); }
.chip.on { border-color: var(--sage); background: var(--sage); color: var(--on-pine); }

.cf-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line);
}
.cf-foot .gate-link { margin: 0; font-size: .84rem; }
.cf-foot .btn-primary[disabled] { opacity: .45; cursor: not-allowed; }
.cf-err { font-size: .82rem; color: var(--flag); font-weight: 600; }

/* ---------- what you have sent us ---------- */
.submission-list { margin-top: 18px; }
.sub-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 11px 2px; border-bottom: 1px solid var(--line);
}
.sub-row:last-child { border-bottom: none; }
.sub-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sub-type { font-size: .88rem; font-weight: 700; color: var(--ink); }
.sub-kind { font-size: .78rem; font-weight: 600; color: var(--sage); }
.sub-meta { font-size: .8rem; color: var(--muted); }
.sub-concern { font-size: .78rem; color: var(--text); font-style: italic; }
.sub-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.sub-status {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--wash-deep); color: var(--muted);
}
.sub-status.s-in_review { background: var(--sage-wash); color: var(--sage); }
.sub-status.s-needs_info { background: var(--flag-bg); color: var(--flag); }
.sub-status.s-resolved { background: var(--sage); color: var(--on-pine); }
.sub-when { font-size: .72rem; color: var(--sage-text); font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .opts, .opts.tight, .flds { grid-template-columns: 1fr; }
  .cf-step { gap: 10px; }
  .cf-foot .btn-primary { flex: 1; text-align: center; }
  .sub-row { flex-direction: column; gap: 6px; }
  .sub-side { align-items: flex-start; flex-direction: row; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .classify { animation: none; }
  .opt, .chip, .fld input, .fld textarea { transition: none; }
}

/* ============================================================
   The assistant — inline, never a takeover
   ============================================================ */
.ai-card .ai-body { margin-top: 14px; }
.ai-toggle {
  background: none; border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--font); font-size: .76rem; font-weight: 700;
  color: var(--text); padding: 4px 13px;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.ai-toggle:hover { border-color: var(--sage); color: var(--sage); background: var(--sage-wash); }

.ai-thread {
  display: flex; flex-direction: column; gap: 9px;
  max-height: 340px; overflow-y: auto;
  padding: 2px 2px 2px 0;
}
.ai-thread:empty { display: none; }
.ai-msg {
  max-width: 78%; padding: 9px 13px; border-radius: var(--r-md);
  font-size: .88rem; line-height: 1.55;
  animation: ai-in .22s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ai-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ai-msg.me { align-self: flex-end; background: var(--pine-deep); color: var(--on-pine); border-bottom-right-radius: 4px; }
.ai-msg.bot { align-self: flex-start; background: var(--wash); border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 4px; }

/* What it is doing, while it does it. A ten-second document read with no
   sign of life reads as broken. */
.ai-tool {
  align-self: flex-start; font-size: .74rem; font-weight: 600;
  color: var(--sage-text); letter-spacing: .02em; padding-left: 2px;
}
.ai-tool::before { content: "· "; }

.ai-starters { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

.ai-ask { display: flex; gap: 9px; margin-top: 14px; }
.ai-ask input {
  flex: 1; min-width: 0; font-family: var(--font); font-size: .88rem; color: var(--ink);
  padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ai-ask input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-wash); }
.ai-note { margin-top: 9px; font-size: .72rem; color: var(--sage-text); }

@media (max-width: 700px) {
  .ai-msg { max-width: 90%; }
  .ai-ask { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-msg { animation: none; }
  .ai-toggle, .ai-ask input { transition: none; }
}

/* ---------- assistant: microphone and attachments ---------- */
.ai-icon {
  flex: none; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--muted); padding: 0;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.ai-icon svg { width: 19px; height: 19px; }
.ai-icon:hover { border-color: var(--sage); color: var(--sage); background: var(--sage-wash); }

/* Recording is a state you must never be in by accident, so it is the one
   place on this page that pulses. */
.ai-icon.on {
  border-color: var(--flag); background: var(--flag); color: var(--on-pine);
  animation: mic-pulse 1.5s ease-in-out infinite;
}
.ai-icon.on:hover { background: var(--flag); color: var(--on-pine); border-color: var(--flag); }
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 59, 48, .40); }
  50%      { box-shadow: 0 0 0 7px rgba(192, 59, 48, 0); }
}

.ai-rec {
  display: flex; align-items: center; gap: 8px;
  margin-top: 9px; font-size: .8rem; font-weight: 600; color: var(--flag);
}
.ai-rec-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--flag); flex: none;
  animation: mic-pulse 1.5s ease-in-out infinite;
}

.ai-attached { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ai-attached[hidden] { display: none; }
.ai-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 240px;
  font-size: 11.5px; font-weight: 600; color: var(--text);
  background: var(--wash); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 6px 4px 12px;
}
.ai-chip button {
  border: none; background: none; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 50%;
}
.ai-chip button:hover { color: var(--flag); }

@media (max-width: 700px) {
  /* The composer wraps rather than shrinking the buttons — a 38px target
     is already the floor on a phone. */
  .ai-ask { flex-direction: row; flex-wrap: wrap; }
  .ai-ask input { flex: 1 1 100%; order: -1; }
  .ai-ask .btn-primary { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-icon.on, .ai-rec-dot { animation: none; }
  .ai-icon { transition: none; }
}

/* ============================================================
   Team preview bar
   ------------------------------------------------------------
   Shown only when a Soro person is reading this portal from the
   internal platform. Deliberately the one piece of chrome that
   is NOT in the portal's own palette: it has to be impossible to
   mistake for something the person whose portal this is would
   ever see.
   ============================================================ */
.preview-bar {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 18px;
  background: var(--pine-deep); color: var(--on-pine);
  font-size: 13px; line-height: 1.4;
}
.preview-bar b {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--on-pine) 14%, transparent); color: var(--on-pine);
}
.preview-bar span { color: color-mix(in srgb, var(--on-pine) 76%, transparent); }
.preview-bar a {
  margin-left: auto; color: var(--on-pine); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--on-pine) 40%, transparent); padding-bottom: 1px;
}
.preview-bar a:hover { border-bottom-color: var(--on-pine); }

/* Anything that writes is inert rather than merely refused: a composer
   you can type into is a promise the preview can't keep. */
body.is-preview .dropzone,
body.is-preview .msg-compose,
body.is-preview .fb-form,
body.is-preview .task-check {
  opacity: .55; pointer-events: none;
}

/* ---------- collapsible cards ----------
   Lists that only grow — finished tasks, activity trails — fold away.
   The whole head is the hit target; the count stays readable closed. */
.card-head-toggle {
  width: 100%;
  align-items: center;
  background: none; border: none; padding: 0;
  font-family: inherit; text-align: left; cursor: pointer;
  justify-content: flex-start; gap: 8px;
}
.card-head-toggle .s { margin-left: auto; }
.card-head-toggle:hover .t { color: var(--sage); }
.card-head-toggle:not(.open) { margin-bottom: 0; }
.ch-chevron {
  display: inline-flex; width: 15px; height: 15px;
  color: var(--muted);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.ch-chevron svg { width: 100%; height: 100%; }
.card-head-toggle.open .ch-chevron { transform: rotate(90deg); }

.collapsible {
  overflow: hidden;
  height: auto;
  transition: height .26s cubic-bezier(.22, 1, .36, 1);
}
.collapsible:not(.open) { height: 0; }
.collapsible.open { padding-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  .collapsible, .ch-chevron { transition: none; }
}

/* ============================================================
   Billing
   ------------------------------------------------------------
   An invoice row is read in one glance for two facts — what it
   is and what it costs — so those are the only things at full
   weight. The status chip carries the third: whether anyone has
   confirmed the money moved.
   ============================================================ */
.pay-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.pay-row:first-of-type { border-top: none; }
.pay-title { font-weight: 600; color: var(--ink); }
.pay-meta { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.pay-chips { margin-top: 8px; }
.pay-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pay-amt {
  font-size: 1.25rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pay-btn { white-space: nowrap; }
.pay-form {
  grid-column: 1 / -1;
  margin-top: 4px; padding: 16px;
  background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-md);
}
.pay-form label {
  display: block; margin: 12px 0 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--sage-text);
}
.pay-form label:first-child { margin-top: 0; }
.pay-form label i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); }
.pay-form input, .pay-form select, .pay-form textarea {
  width: 100%; padding: 10px 12px;
  font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.pay-form input:focus, .pay-form select:focus, .pay-form textarea:focus {
  outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(46, 107, 79, .14);
}
.pay-form .btn-primary { width: auto; padding: 11px 20px; }
.pay-note { margin-top: 16px; font-size: .8rem; line-height: 1.6; color: var(--muted); }
.pay-how p { font-size: .86rem; line-height: 1.7; color: var(--text); }
.pay-how p + p { margin-top: 12px; }
.pay-how b { color: var(--ink); font-weight: 700; }
/* Payment redirection is the fraud this page invites, so the warning
   against it is the one thing here that is allowed to shout. */
.pay-warn {
  margin-top: 14px; padding: 11px 13px;
  background: var(--flag-bg); border: 1px solid rgba(192, 59, 48, .2);
  border-radius: var(--r-sm);
  font-size: .82rem !important; line-height: 1.6; color: var(--flag) !important; font-weight: 600;
}

@media (max-width: 640px) {
  .pay-row { grid-template-columns: minmax(0, 1fr); }
  .pay-side { text-align: left; align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%; }
}

/* ============================================================
   Settings
   ============================================================ */
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 0;
  border-top: 1px solid var(--line);
}
.set-row-t { font-weight: 600; color: var(--ink); font-size: .93rem; }
.set-row-s { font-size: .8rem; color: var(--muted); margin-top: 2px; max-width: 52ch; }
.set-row-ctl { flex-shrink: 0; }
.set-note { font-size: .8rem; line-height: 1.65; color: var(--muted); margin-top: 12px; max-width: 68ch; }
.set-note a { color: var(--sage); font-weight: 600; }
.set-facts, .set-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 22px; }
.set-facts .fact span, .set-team .fact span {
  display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--sage-text); margin-bottom: 3px;
}
.set-facts .fact b, .set-team .fact b { font-weight: 600; color: var(--ink); font-size: .93rem; }

.seg { display: inline-flex; background: var(--wash-deep); border-radius: 100px; padding: 3px; }
.seg-btn {
  border: none; background: none; border-radius: 100px;
  padding: 6px 14px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--muted); transition: background .15s, color .15s;
}
.seg-btn.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.switch {
  width: 42px; height: 24px; border-radius: 100px; border: none;
  background: var(--line-strong); position: relative;
  transition: background .18s;
}
.switch.on { background: var(--sage); }
.switch-knob {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}
.switch.on .switch-knob { transform: translateX(18px); }

/* ---------- the two display preferences, applied ---------- */
body.text-large { font-size: 17px; }
body.text-large .pay-meta,
body.text-large .set-row-s,
body.text-large .set-note { font-size: .88rem; }
body.no-motion *, body.no-motion *::before, body.no-motion *::after {
  animation-duration: .001s !important;
  transition-duration: .001s !important;
}
@media (prefers-reduced-motion: reduce) {
  .switch, .switch-knob, .seg-btn { transition: none; }
}

/* ---------- theme-swapped brand marks ----------
   Two <img> per mark, because CSS cannot change an img's src and the
   ink mark on a dark card is a black square on a black card.

   Placed here, last, on purpose: `.gate-emblem` and `.rail-brand
   .rail-logo` both set display:block, and at equal specificity the
   later rule wins. Declared earlier in the file this silently showed
   both marks stacked. */
.gate-emblem-dark, .rail-brand .rail-logo-dark { display: none; }

/* ============================================================
   Dark mode
   ------------------------------------------------------------
   Driven by the OS setting rather than a switch. Nobody signs in
   to a portal to configure it, and the sign-in gate is the first
   thing they see — a white card at midnight is the complaint
   this answers.

   Same token values as the internal platform's dark block, so a
   Soro person moving between the platform and a portal preview
   sees one product in one lighting. Three rules make it work:
     · --surface is paper (cards, inputs, chips); --page-* is ground
     · --pine is "the solid fill carrying the opposite colour", so
       it inverts, and text on it is --on-pine, never #fff
     · a literal white survives only where the fill behind it is
       the same colour in both themes
   ============================================================ */
/* Driven by data-theme on <html>, not by the media query directly:
   the setting offers System / Light / Dark, so "the OS says dark" has to
   be overridable. portal.js resolves System against
   prefers-color-scheme and writes the concrete theme here, falling back
   to light when the OS expresses no preference. An inline script in
   index.html does it before first paint so nothing flashes. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --surface: #151917;
    --page-a: #101312;
    --page-b: #0B0D0C;
    --rail-bg: #121514;
    --topbar-bg: rgba(21, 25, 23, .86);
    --sage: #5CB489;
    --sage-light: #7ED0A6;
    --sage-wash: #16271E;
    --sand: #333833;
    --cream: #151917;
    --pine: #E8ECE4;
    --pine-deep: #F3F6EF;
    --pine-soft: #FFFFFF;
    --on-pine: #12150F;
    --ink: #F0F3EC;
    --text: #CFD5C9;
    --muted: #99A093;
    --sage-text: #7E857A;
    --mint: #232823;
    --wash: #1A1E1C;
    --wash-deep: #222724;
    --line: #282D29;
    --line-strong: #3A403B;
    --flag: #F0685C;
    --flag-bg: #2B1614;
    --ok: #5CB489;
    --ok-bg: #16271E;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-md: 0 8px 22px -8px rgba(0, 0, 0, .60);
    --shadow-lg: 0 26px 64px -20px rgba(0, 0, 0, .75), 0 8px 20px rgba(0, 0, 0, .45);
  }

  /* The mark is ink on paper in one theme and cream in the other. */
  :root[data-theme="dark"] .gate-emblem-light,
  :root[data-theme="dark"] .rail-brand .rail-logo-light { display: none; }
  :root[data-theme="dark"] .gate-emblem-dark,
  :root[data-theme="dark"] .rail-brand .rail-logo-dark { display: block; }
  /* both marks share .gate-emblem / .rail-logo, so only the pair above
     decides which one you see */

  /* The gate tile has to read as a tile, not as a hole in the card. */
  :root[data-theme="dark"] .gate-emblem { background: var(--wash); border-color: var(--line-strong); }

  /* Pale tints that only make sense on white, re-pitched. */
  :root[data-theme="dark"] .gate-error { border-color: rgba(240, 104, 92, .28); }
  :root[data-theme="dark"] .chip.in_dispute { background: var(--wash-deep); color: var(--ink); }

  /* Attachments and logos carry their own light; a touch less of it
     keeps a PDF thumbnail from glowing on a near-black surface. */
  :root[data-theme="dark"] .rail-logo,
  :root[data-theme="dark"] .gate-emblem { filter: brightness(.95); }