/* ============================================================
   Soro client portal — ledger monochrome, one signal green.
   Ink-on-white with hairlines; green (#2E6B4F) only where it
   means something: recovered money, live status, focus.
   Same tokens as the internal platform (internal-db/public/
   styles.css) so the two apps read as one product.
   Legacy token names kept so downstream rules keep working.
   ============================================================ */
: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;
}
.dropzone.busy { opacity: .7; pointer-events: none; }
.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; }

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

/* ============================================================
   The published half: team, tasks, updates, messages
   ------------------------------------------------------------
   Same components as the patient portal (soro-patient-database/
   public/portal.css) so the two portals stay one product.
   ============================================================ */

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

/* ---- the Soro team on the account ---- */
.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-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); }

/* ---- rail: second nav group ---- */
.nav-label-mid { margin-top: 14px; }

/* ============================================================
   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 (overview)
   ------------------------------------------------------------
   Answers "where are we" before any of the numbers do, so it
   sits above the KPI row rather than inside the grid.
   ============================================================ */
.progress-card { margin-bottom: 16px; }
.progress-card .pcount { font-size: 12px; color: var(--muted); font-weight: 600; }

.psteps { display: flex; list-style: none; margin: 6px 0 0; padding: 0; gap: 0; flex-wrap: wrap; }
.pstep { flex: 1 1 130px; min-width: 118px; position: relative; padding: 0 6px; text-align: center; }
/* The connector is drawn behind the dots and stops at the last
   step, so the track never trails off past the final stage. */
.pstep::before {
  content: ""; position: absolute; top: 13px; left: -50%; width: 100%;
  height: 2px; background: var(--line); z-index: 0;
}
.pstep:first-child::before { display: none; }
.pstep.done::before, .pstep.current::before { background: var(--sage); }

.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);
}
.pstep.done .pdot { background: var(--sage); border-color: var(--sage); color: var(--on-pine); }
.pstep.current .pdot { border-color: var(--sage); color: var(--sage); box-shadow: 0 0 0 4px var(--sage-wash); }

.plabel { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.pstep.current .plabel { color: var(--ink); font-weight: 700; }
.pstep.done .plabel { color: var(--text); }

.pbar { margin-top: 20px; height: 9px; border-radius: 99px; background: var(--sand); overflow: hidden; }
.pbar-fill { display: block; height: 100%; background: var(--sage); border-radius: 99px; transition: width .5s ease; }
.pbar-key { display: flex; gap: 20px; margin-top: 9px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.pbar-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: baseline; }
.pbar-key .k-rec { background: var(--sage); }
.pbar-key .k-out { background: var(--sand); }
.pnote { margin-top: 16px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 700px) {
  .pstep { flex-basis: 33%; margin-bottom: 14px; }
  .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; }
}

/* ============================================================
   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
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    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. */
  .gate-emblem-light, .rail-brand .rail-logo-light { display: none; }
  .gate-emblem-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. */
  .gate-emblem { background: var(--wash); border-color: var(--line-strong); }

  /* Pale tints that only make sense on white, re-pitched. */
  .gate-error { border-color: rgba(240, 104, 92, .28); }
  .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. */
  .rail-logo, .gate-emblem { filter: brightness(.95); }
}