/*
 * Cortex UI — design system for the redesigned dashboard (2026-09).
 *
 * Med2Cast brand: navy ink #0B1F33, warm paper background, Figtree for
 * display type and Instrument Sans for UI text (the same self-hosted fonts as
 * med2cast.com). Colour is reserved for the Cortex "orb" and the gradient
 * accents; everything else is ink on paper.
 *
 * Every class here is prefixed `cx-` so it never collides with the vendored
 * Tailwind build or the legacy dashboard classes the renderers still emit.
 * Reference design: docs/design/cortex_physician_flow_prototype_src.html.
 */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --cx-bg: #FAF9F7;
  --cx-surface: #FFFFFF;
  --cx-fill: #F1EFEC;
  --cx-fill-2: #F7F6F3;
  --cx-ink: #0B1F33;
  --cx-ink-2: rgba(11, 31, 51, .74);
  --cx-muted: rgba(11, 31, 51, .54);
  --cx-faint: rgba(11, 31, 51, .32);
  --cx-line: rgba(11, 31, 51, .08);
  --cx-line-2: rgba(11, 31, 51, .15);
  --cx-mist: #EAF2F7;
  --cx-ok: #1F8A55; --cx-ok-bg: #E7F3EC;
  --cx-warn: #A86A12; --cx-warn-bg: #FBF1DF;
  --cx-bad: #C0362C; --cx-bad-bg: #FBEAE8;
  --cx-g1: #3E7BFA; --cx-g2: #8B5CF6; --cx-g3: #F472B6; --cx-g4: #FDBA74; --cx-g5: #2DD4BF;
  --cx-grad: linear-gradient(100deg, var(--cx-g1) 0%, var(--cx-g2) 35%, var(--cx-g3) 70%, var(--cx-g4) 100%);
  --cx-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cx-display: "Figtree", "Instrument Sans", -apple-system, sans-serif;
  --cx-he: "SF Hebrew", "Arial Hebrew", "Noto Sans Hebrew", -apple-system, sans-serif;
  --cx-mono: "SF Mono", ui-monospace, Menlo, monospace;
  --cx-ease: cubic-bezier(.2, .8, .2, 1);
  --cx-r-lg: 28px; --cx-r-md: 20px; --cx-r-sm: 12px;
  --cx-shadow: 0 0 0 1px var(--cx-line), 0 2px 4px rgba(11, 31, 51, .02), 0 24px 60px -18px rgba(11, 31, 51, .16);
}

body.cx {
  margin: 0;
  background: var(--cx-bg);
  color: var(--cx-ink);
  font-family: var(--cx-sans);
  font-size: 14.5px;
  line-height: 1.5;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
}
body.cx button, body.cx input, body.cx textarea, body.cx select { font-family: inherit; letter-spacing: inherit; }
.cx h1, .cx h2, .cx h3 { font-family: var(--cx-display); margin: 0; }
.cx-he { font-family: var(--cx-he); }
.cx-mono { font-family: var(--cx-mono); font-size: .9em; }
.cx-hidden { display: none !important; }
/* The page toggles Tailwind's `hidden` class for state; cx- components set
   their own display, which would otherwise win (this sheet loads later).
   Responsive variants like `hidden sm:inline` are left to Tailwind. */
.cx .hidden:not([class*="sm:"]):not([class*="md:"]):not([class*="lg:"]) { display: none !important; }

/* ── Orb: the one living, coloured element ───────────────────────── */
.cx-orb { position: relative; display: inline-block; border-radius: 50%; isolation: isolate; flex-shrink: 0; }
.cx-orb::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--cx-g5) 0%, transparent 45%),
    radial-gradient(circle at 70% 25%, var(--cx-g3) 0%, transparent 45%),
    radial-gradient(circle at 65% 75%, var(--cx-g4) 0%, transparent 50%),
    radial-gradient(circle at 25% 75%, var(--cx-g2) 0%, transparent 50%),
    var(--cx-g1);
  filter: blur(var(--cx-blur, 2px)) saturate(1.2);
  animation: cx-swirl var(--cx-speed, 12s) linear infinite;
}
.cx-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 38%);
  mix-blend-mode: soft-light;
}
.cx-breathe { animation: cx-breathe 4s var(--cx-ease) infinite; }
@keyframes cx-swirl { to { transform: rotate(360deg); } }
@keyframes cx-breathe { 50% { transform: scale(1.05); } }
@keyframes cx-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes cx-blink { 50% { opacity: .35; } }
@keyframes cx-shimmer { to { background-position: -200% 0; } }
.cx-glow { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.cx-grad-text { background: var(--cx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .cx-orb::before, .cx-breathe, .cx-st.cur .d, .cx-ph.cur .track i { animation: none !important; }
}

/* ── Top bar ─────────────────────────────────────────────────────── */
.cx-nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(250, 249, 247, .78);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--cx-line);
}
.cx-nav-inner { max-width: 1480px; margin: 0 auto; height: 58px; padding: 0 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.cx-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cx-brand img { height: 16px; display: block; }
.cx-brand-div { width: 1px; height: 18px; background: var(--cx-line-2); }
.cx-brand-prod { font-family: var(--cx-display); font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.cx-brand-prod .cx-orb { width: 16px; height: 16px; }
.cx-tabs { display: flex; align-items: center; gap: 2px; background: var(--cx-fill); border-radius: 999px; padding: 3px; }
.cx-tabs > button, .cx-admin-trigger {
  border: 0; background: none; padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 500;
  color: var(--cx-ink-2); cursor: pointer; white-space: nowrap; transition: .2s var(--cx-ease);
}
.cx-tabs > button:hover, .cx-admin-trigger:hover { color: var(--cx-ink); }
.cx-tabs > button.is-active, .cx-admin-trigger.is-active { background: var(--cx-surface); color: var(--cx-ink); box-shadow: 0 1px 3px rgba(11, 31, 51, .12); }
.cx-admin-trigger { color: var(--cx-muted); }
.cx-me { justify-self: end; display: flex; align-items: center; gap: 8px; }
.cx-icon-btn { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; color: var(--cx-ink-2); cursor: pointer; }
.cx-icon-btn:hover { background: var(--cx-fill); color: var(--cx-ink); }
.cx-user { display: flex; align-items: center; gap: 10px; }
.cx-user .cx-user-name { font-size: 13px; line-height: 1.2; text-align: right; }
.cx-user .cx-user-name small { display: block; color: var(--cx-muted); font-size: 11.5px; }
.cx-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--cx-ink); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; object-fit: cover; }

/* Admin menu (primary admin only — markup arrives with the admin bundle) */
.cx-admin-menu { position: relative; }
.cx-admin-pop {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 220px;
  background: var(--cx-surface); border-radius: 16px; padding: 6px; z-index: 40;
  box-shadow: 0 0 0 1px var(--cx-line), 0 20px 50px -16px rgba(11, 31, 51, .3);
}
.cx-admin-pop button { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 10px; padding: 9px 12px; font-size: 13.5px; cursor: pointer; color: var(--cx-ink); }
.cx-admin-pop button:hover, .cx-admin-pop button.is-active { background: var(--cx-fill); }
.cx-admin-pop hr { border: 0; border-top: 1px solid var(--cx-line); margin: 6px 4px; }

/* ── Layout ──────────────────────────────────────────────────────── */
.cx-wrap { max-width: 1480px; margin: 0 auto; padding: 0 24px 96px; }
.cx-narrow { max-width: 880px; margin: 0 auto; }
.cx-section { animation: cx-rise .5s var(--cx-ease); }
.cx-card { background: var(--cx-surface); border-radius: var(--cx-r-lg); box-shadow: 0 0 0 1px var(--cx-line); }
.cx-card.lift { box-shadow: var(--cx-shadow); }
.cx-pad { padding: 24px 28px; }
.cx-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 40px 0 22px; flex-wrap: wrap; }
.cx-page-head h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; margin-top: 10px; }
.cx-page-head p { margin: 6px 0 0; color: var(--cx-muted); font-size: 16px; }
.cx-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cx-muted); }
.cx-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cx-ink-2); background: var(--cx-surface); border: 1px solid var(--cx-line); border-radius: 999px; padding: 5px 14px 5px 6px; }
.cx-kicker .cx-orb { width: 18px; height: 18px; }
.cx-footer { text-align: center; color: var(--cx-faint); font-size: 12px; padding: 32px 0 12px; }

/* ── Controls ────────────────────────────────────────────────────── */
.cx-seg { display: inline-flex; gap: 2px; background: var(--cx-fill); border-radius: 999px; padding: 3px; }
.cx-seg > button {
  border: 0; background: none; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
  color: var(--cx-muted); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap;
}
.cx-seg > button.is-active { background: var(--cx-surface); color: var(--cx-ink); box-shadow: 0 1px 3px rgba(11, 31, 51, .12); }
.cx-pill {
  border: 1px solid var(--cx-line-2); background: var(--cx-surface); border-radius: 999px; padding: 8px 14px;
  font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; color: var(--cx-ink);
}
.cx-pill:hover { background: var(--cx-fill-2); }
.cx-pill .k { color: var(--cx-muted); font-weight: 400; }
.cx-cta {
  border: 0; background: var(--cx-ink); color: #fff; border-radius: 999px; padding: 11px 20px 11px 22px;
  font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(11, 31, 51, .55); transition: transform .25s var(--cx-ease), box-shadow .25s var(--cx-ease); white-space: nowrap;
}
.cx-cta:hover { transform: translateY(-1px); }
.cx-cta .arr { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .14); display: grid; place-items: center; }
.cx-cta:disabled, .cx-cta[disabled] { background: #C9CFD6; box-shadow: none; cursor: not-allowed; transform: none; }
.cx-btn { border: 1px solid var(--cx-line-2); background: var(--cx-surface); border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; color: var(--cx-ink); }
.cx-btn:hover { background: var(--cx-fill-2); }
.cx-btn:disabled { opacity: .5; cursor: not-allowed; }
.cx-btn.danger { color: var(--cx-bad); }
.cx-link { color: var(--cx-muted); font-size: 13.5px; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cx-line-2); padding: 0; }
.cx-link:hover { color: var(--cx-ink); }
.cx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.cx-chip.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cx-c-wait { background: var(--cx-warn-bg); color: var(--cx-warn); }
.cx-c-ok { background: var(--cx-ok-bg); color: var(--cx-ok); }
.cx-c-sent { background: var(--cx-mist); color: var(--cx-ink); }
.cx-c-bad { background: var(--cx-bad-bg); color: var(--cx-bad); }
.cx-c-neutral { background: var(--cx-fill); color: var(--cx-ink-2); }
.cx-switch { position: relative; width: 32px; height: 19px; flex-shrink: 0; }
.cx-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cx-switch span { position: absolute; inset: 0; border-radius: 99px; background: #C9CFD6; transition: .2s; pointer-events: none; }
.cx-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: .2s var(--cx-ease); }
.cx-switch input:checked + span { background: var(--cx-ok); }
.cx-switch input:checked + span::after { transform: translateX(13px); }
.cx-input { width: 100%; border: 1px solid var(--cx-line-2); border-radius: 14px; padding: 11px 14px; font-size: 14.5px; outline: none; background: var(--cx-surface); color: var(--cx-ink); box-sizing: border-box; }
.cx-input:focus { border-color: var(--cx-ink); }

/* ── New case ────────────────────────────────────────────────────── */
.cx-hero { text-align: center; padding: 56px 0 30px; }
.cx-hero h1 { font-size: clamp(36px, 5.4vw, 58px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.cx-hero p { font-size: 18px; color: var(--cx-muted); margin: 12px 0 0; }
.cx-composer-wrap { position: relative; }
.cx-composer-wrap .cx-glow.a { width: 380px; height: 220px; background: var(--cx-g2); left: -40px; top: 40px; opacity: .16; }
.cx-composer-wrap .cx-glow.b { width: 380px; height: 220px; background: var(--cx-g4); right: -40px; bottom: 10px; opacity: .2; }
.cx-composer { position: relative; background: var(--cx-surface); border-radius: var(--cx-r-lg); box-shadow: var(--cx-shadow); }
.cx-composer-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 0; gap: 12px; flex-wrap: wrap; }
.cx-lock { font-size: 12.5px; color: var(--cx-muted); display: flex; gap: 6px; align-items: center; }
.cx-drop {
  margin: 16px 18px 0; border-radius: var(--cx-r-md); padding: 40px 24px 34px; text-align: center; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 0%, rgba(139, 92, 246, .06), transparent 60%), #FAFAFA;
  border: 1.5px dashed var(--cx-line-2); transition: .3s var(--cx-ease);
}
.cx-drop:hover, .cx-drop.dragover { border-color: rgba(139, 92, 246, .5); background: radial-gradient(120% 90% at 50% 0%, rgba(139, 92, 246, .11), transparent 60%), #FAFAFA; }
.cx-drop .cx-orb { width: 58px; height: 58px; margin: 0 auto 16px; display: block; --cx-blur: 5px; }
.cx-drop b { display: block; font-family: var(--cx-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.cx-drop p { margin: 6px 0 0; color: var(--cx-muted); font-size: 14px; }
.cx-drop u { text-decoration: none; color: var(--cx-g2); font-weight: 500; }
.cx-paste { margin: 16px 18px 0; }
.cx-paste textarea { width: 100%; box-sizing: border-box; min-height: 220px; border-radius: var(--cx-r-md); border: 1.5px solid var(--cx-line-2); padding: 16px 18px; font-size: 14.5px; line-height: 1.6; resize: vertical; outline: none; background: #FCFCFB; color: var(--cx-ink); }
.cx-paste textarea:focus { border-color: var(--cx-ink); background: #fff; }
.cx-paste .cx-count { text-align: right; font-size: 12px; color: var(--cx-muted); margin-top: 6px; }
.cx-files { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 18px 0; align-items: center; }
.cx-file { display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 14px; background: var(--cx-fill); font-size: 13.5px; max-width: 100%; }
.cx-file .ic { width: 28px; height: 32px; border-radius: 6px; background: var(--cx-surface); box-shadow: 0 0 0 1px var(--cx-line); display: grid; place-items: center; font-size: 8.5px; font-weight: 700; color: #E0443A; flex-shrink: 0; }
.cx-file .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.cx-file small { color: var(--cx-muted); font-size: 12px; }
.cx-file .x { border: 0; background: none; color: var(--cx-muted); cursor: pointer; width: 22px; height: 22px; border-radius: 50%; }
.cx-file .x:hover { background: rgba(11, 31, 51, .08); color: var(--cx-ink); }
.cx-toolbar { display: flex; align-items: center; gap: 8px; padding: 16px 18px 18px; margin-top: 16px; border-top: 1px solid var(--cx-line); flex-wrap: wrap; position: relative; }
.cx-spacer { flex: 1; }

/* Language popover */
.cx-lang-pop {
  position: absolute; left: 12px; bottom: 64px; width: 480px; max-width: calc(100vw - 48px);
  background: var(--cx-surface); border-radius: var(--cx-r-md); padding: 14px; z-index: 20;
  box-shadow: 0 0 0 1px var(--cx-line), 0 30px 70px -20px rgba(11, 31, 51, .35);
  animation: cx-rise .25s var(--cx-ease);
}
.cx-lang-search { display: flex; align-items: center; gap: 8px; background: var(--cx-fill); border-radius: 12px; padding: 9px 12px; color: var(--cx-muted); }
.cx-lang-search input { border: 0; background: none; outline: none; flex: 1; font-size: 14px; color: var(--cx-ink); }
.cx-lang-h { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cx-muted); margin: 14px 4px 8px; display: flex; justify-content: space-between; align-items: center; }
.cx-lang-h .beta-key { text-transform: none; letter-spacing: 0; font-weight: 400; display: flex; align-items: center; gap: 5px; }
.cx-lang-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.cx-lang-grid.all { max-height: 230px; overflow-y: auto; }
.lang-pill.cx-lang { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 13.5px; border: 0; background: none; text-align: left; color: var(--cx-ink); font-weight: 400; }
.lang-pill.cx-lang:hover { background: var(--cx-fill-2); }
.lang-pill.cx-lang.active { background: var(--cx-mist); font-weight: 600; }
.lang-pill.cx-lang .flag { font-size: 17px; line-height: 1; }
.lang-pill.cx-lang .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-beta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cx-warn); margin-left: auto; flex-shrink: 0; display: inline-block; }
.cx-lang-empty { color: var(--cx-muted); font-size: 13px; padding: 10px; grid-column: 1 / -1; }

/* Recent cases */
.cx-recent { margin-top: 36px; overflow: hidden; }
.cx-recent-head { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 28px 10px; }
.cx-recent-head h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.cx-rc { display: grid; grid-template-columns: 1fr 170px 90px 160px; gap: 12px; align-items: center; padding: 14px 28px; border-top: 1px solid var(--cx-line); font-size: 14px; cursor: pointer; }
.cx-rc:hover { background: var(--cx-fill-2); }
.cx-rc .dim { color: var(--cx-muted); }
.cx-rc .cx-chip { justify-self: end; }
.cx-rc .main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-empty { padding: 18px 28px 24px; color: var(--cx-muted); font-size: 14px; }

/* ── Redaction review ────────────────────────────────────────────── */
.cx-steps-mini { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--cx-muted); flex-wrap: wrap; }
.cx-steps-mini span { display: flex; align-items: center; gap: 6px; }
.cx-steps-mini i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--cx-line-2); display: grid; place-items: center; font-style: normal; font-size: 10px; }
.cx-steps-mini .done i { background: var(--cx-ink); border-color: var(--cx-ink); color: #fff; }
.cx-steps-mini .cur { color: var(--cx-ink); font-weight: 600; }
.cx-steps-mini .cur i { border-color: var(--cx-ink); }
.cx-steps-mini .sep { width: 22px; height: 1px; background: var(--cx-line-2); }
.cx-rr { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.cx-viewer { overflow: hidden; }
.cx-viewer-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--cx-line); gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--cx-muted); }
.cx-viewer-bar button { border: 1px solid var(--cx-line-2); background: var(--cx-surface); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; color: var(--cx-ink); }
.cx-viewer-bar button:disabled { opacity: .4; cursor: not-allowed; }
.cx-paper-stage { background: #EEECE8; }
.cx-side { padding: 22px; max-height: 76vh; overflow-y: auto; }
.cx-side h3 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.cx-side-sec { margin-top: 18px; }
.cx-side-sec > .cx-eyebrow { margin-bottom: 8px; display: block; }
.cx-side .cx-input { font-family: var(--cx-he); }
.cx-doc-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-doc-tabs:empty { display: none; }
.cx-dock {
  position: sticky; bottom: 16px; z-index: 20; margin-top: 20px;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 999px; box-shadow: 0 0 0 1px var(--cx-line), 0 16px 40px -14px rgba(11, 31, 51, .3);
  padding: 8px 8px 8px 24px; display: flex; align-items: center; gap: 12px;
}
.cx-dock .t { font-size: 13.5px; color: var(--cx-ink-2); min-width: 0; }
.cx-dock .t small { display: block; color: var(--cx-muted); font-size: 12px; }

/* ── Processing ──────────────────────────────────────────────────── */
.cx-stage { margin-top: 28px; background: #0B1F33; color: #fff; border-radius: 32px; padding: 52px 56px 40px; position: relative; overflow: hidden; }
.cx-stage .cx-glow.a { width: 520px; height: 520px; background: var(--cx-g2); left: -120px; top: -160px; opacity: .35; }
.cx-stage .cx-glow.b { width: 420px; height: 420px; background: var(--cx-g3); left: 140px; bottom: -260px; opacity: .2; }
.cx-stage-grid { position: relative; display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: center; }
.cx-orb-holder { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.cx-orb-holder .cx-orb { width: 200px; height: 200px; --cx-blur: 13px; --cx-speed: 5s; display: block; }
.cx-orb-ring { position: absolute; inset: -18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); }
.cx-orb-ring.r2 { inset: -40px; border-color: rgba(255, 255, 255, .04); }
.cx-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--cx-display); font-size: 42px; font-weight: 600; letter-spacing: -.04em; z-index: 2; text-shadow: 0 2px 20px rgba(0, 0, 0, .25); }
.cx-pct small { font-size: 19px; opacity: .7; }
.cx-live-l { font-size: 13px; color: rgba(255, 255, 255, .55); display: flex; gap: 10px; align-items: center; }
.cx-live { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); animation: cx-blink 1.4s infinite; }
.cx-stage h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.07; letter-spacing: -.04em; font-weight: 600; margin: 14px 0 12px; }
.cx-stage .desc { color: rgba(255, 255, 255, .62); font-size: 17px; max-width: 480px; margin: 0; }
.cx-metrics { display: flex; gap: 36px; margin-top: 28px; flex-wrap: wrap; }
.cx-metrics div { font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.cx-metrics b { display: block; font-family: var(--cx-mono); font-size: 20px; font-weight: 500; color: #fff; margin-top: 2px; }
.cx-psteps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 44px; }
.cx-ps { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); font-size: 14px; color: rgba(255, 255, 255, .5); }
.cx-ps .i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, .2); flex-shrink: 0; font-size: 12px; }
.cx-ps.done { color: rgba(255, 255, 255, .85); }
.cx-ps.done .i { background: #fff; color: #0B1F33; border-color: #fff; }
.cx-ps.done .i::after { content: "✓"; }
.cx-ps.cur { color: #fff; background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .16); }
.cx-ps.cur .i { border: 0; background: conic-gradient(var(--cx-g1), var(--cx-g2), var(--cx-g3), var(--cx-g4), var(--cx-g1)); animation: cx-swirl 1.6s linear infinite; }
.cx-ps.cur .i::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: #16304A; }
.cx-leave { position: relative; margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .5); display: flex; gap: 8px; align-items: center; }

/* Detailed step list (primary admin — markup arrives with the admin bundle) */
.cx-all-steps { margin-top: 16px; padding: 26px 30px; }
.cx-all-steps .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.cx-all-steps h3 { font-size: 17px; font-weight: 600; }
#stage-list.cx-st-grid { columns: 2; column-gap: 40px; }
#stage-list .stage-row { break-inside: avoid; }
#stage-list .stage-row { display: grid !important; grid-template-columns: 20px 1fr; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--cx-line); font-size: 13.5px; }
#stage-list .stage-row.conditional { display: none !important; }
#stage-list .stage-row.conditional.visible { display: grid !important; }
#stage-list .stage-label { color: var(--cx-ink); }
#stage-list .stage-label span { color: var(--cx-muted); font-size: 12px; }
/* The dot already shows done / failed / retried — the classic text mark would repeat it. */
#stage-list .stage-time { display: none; }
#stage-list .stage-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cx-line-2); background: var(--cx-surface); display: grid; place-items: center; }
#stage-list .stage-dot.done { background: var(--cx-ink); box-shadow: none; }
#stage-list .stage-dot.done::after { content: "✓"; color: #fff; font-size: 10px; }
#stage-list .stage-dot.active, #stage-list .stage-dot.regeneration { box-shadow: none; background: conic-gradient(var(--cx-g1), var(--cx-g2), var(--cx-g3), var(--cx-g4), var(--cx-g1)); animation: cx-swirl 1.6s linear infinite; }
#stage-list .stage-dot.active::after, #stage-list .stage-dot.regeneration::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cx-surface); }
#stage-list .stage-dot.regeneration-done { background: var(--cx-warn); box-shadow: none; }
#stage-list .stage-dot.error { background: var(--cx-bad); box-shadow: none; }
#stage-list .stage-dot.error::after { content: "✕"; color: #fff; font-size: 10px; }
#stage-list .stage-detail-live { color: var(--cx-g2); font-size: 12px; }

/* ── Case review ─────────────────────────────────────────────────── */
.cx-case-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 40px 0 22px; flex-wrap: wrap; }
.cx-case-head h1 { font-size: clamp(32px, 4.4vw, 46px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; margin: 12px 0 6px; }
.cx-case-head p { margin: 0; color: var(--cx-muted); font-size: 15.5px; }
.cx-case-right { display: flex; align-items: center; gap: 18px; }
.cx-score { display: flex; align-items: center; gap: 14px; }
.cx-ring {
  --ring-color: var(--cx-ok); --ring-pct: 0;
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--ring-color) calc(var(--ring-pct) * 1%), var(--cx-fill) 0);
}
.cx-ring.grad { background: conic-gradient(var(--cx-g5) 0, var(--cx-g1) calc(var(--ring-pct) * .45%), var(--cx-g2) calc(var(--ring-pct) * 1%), var(--cx-fill) 0); }
.cx-ring > div { width: 60px; height: 60px; border-radius: 50%; background: var(--cx-bg); display: grid; place-items: center; font-family: var(--cx-display); font-size: 21px; font-weight: 700; }
.cx-score b { font-size: 15px; display: block; }
.cx-score small { color: var(--cx-muted); font-size: 12.5px; }
#verification-badge.status-badge { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; font-weight: 600; letter-spacing: .02em; }
.cx-cost { margin-top: 6px; font-size: 12.5px; color: var(--cx-muted); }
.cx-pipeline-error { margin-top: 8px; font-size: 13px; color: var(--cx-bad); background: var(--cx-bad-bg); border-radius: 12px; padding: 8px 12px; max-width: 560px; }

.cx-player { padding: 24px 28px; }
.cx-player-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cx-play { width: 54px; height: 54px; border-radius: 50%; background: var(--cx-ink); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; box-shadow: 0 8px 20px -6px rgba(11, 31, 51, .5); }
.cx-play:disabled { opacity: .5; cursor: default; }
.cx-hosts { display: flex; }
.cx-host { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; }
.cx-host + .cx-host { margin-left: -10px; }
.cx-ptitle b { display: block; font-family: var(--cx-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.cx-ptitle span { color: var(--cx-muted); font-size: 13px; }
.cx-p-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.cx-ptime { font-family: var(--cx-mono); font-size: 13px; color: var(--cx-muted); }
.cx-wave { display: flex; align-items: center; gap: clamp(1px, .25vw, 3px); height: 60px; margin: 20px 0 4px; cursor: pointer; overflow: hidden; }
.cx-wave i { flex: 1; border-radius: 3px; background: #E4E2DE; min-width: 1px; transition: background .15s; }
.cx-wave i.p { background: var(--cx-grad); background-attachment: fixed; }
.cx-audio-warning { margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--cx-warn-bg); color: var(--cx-warn); font-size: 13.5px; font-weight: 500; }
.cx-docs-strip { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; font-size: 13px; color: var(--cx-muted); }
.cx-doc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 12px; background: var(--cx-surface); box-shadow: 0 0 0 1px var(--cx-line); color: var(--cx-ink); font-size: 13px; max-width: 100%; }
.cx-doc-chip .ty { font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 7px; background: var(--cx-mist); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.cx-doc-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.cx-doc-chip small { color: var(--cx-muted); white-space: nowrap; }

.cx-case-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; margin-top: 20px; align-items: start; }
.cx-case-grid > * { min-width: 0; }
.cx-panel { overflow-x: auto; }
.cx-ctabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--cx-line); overflow-x: auto; scrollbar-width: none; }
.cx-ctabs::-webkit-scrollbar { display: none; }
.cx-ctabs .sub-tab { border: 0; background: none; padding: 9px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 500; color: var(--cx-muted); cursor: pointer; display: flex; gap: 7px; align-items: center; white-space: nowrap; }
.cx-ctabs .sub-tab:hover { color: var(--cx-ink); background: var(--cx-fill-2); }
.cx-ctabs .sub-tab.is-active { color: var(--cx-ink); background: var(--cx-fill); }
.cx-ctabs .n { font-size: 11px; font-weight: 600; background: var(--cx-surface); box-shadow: 0 0 0 1px var(--cx-line); border-radius: 999px; padding: 0 7px; color: var(--cx-ink-2); }
.cx-ctabs .n.warn { background: var(--cx-warn-bg); color: var(--cx-warn); box-shadow: none; }
.cx-ctabs .n:empty { display: none; }
.cx-panel { padding: 22px 26px 26px; animation: cx-rise .35s var(--cx-ease); }

/* Rail */
.cx-rail { position: sticky; top: 76px; display: grid; gap: 14px; }
.cx-rail .cx-card { padding: 22px; }
.cx-rail h3 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.cx-rail p.sub { color: var(--cx-muted); font-size: 13px; margin: 4px 0 0; }
.cx-prog { margin: 18px 0 6px; display: flex; justify-content: space-between; font-size: 13px; }
.cx-prog b { font-family: var(--cx-mono); font-weight: 500; }
.cx-bar { height: 6px; border-radius: 6px; background: var(--cx-fill); overflow: hidden; }
.cx-bar i { display: block; height: 100%; width: 0; background: var(--cx-grad); border-radius: 6px; transition: width .5s var(--cx-ease); }
.cx-rail-list { margin: 16px 0 18px; display: grid; gap: 8px; font-size: 13px; }
.cx-rail-list div { display: flex; justify-content: space-between; color: var(--cx-ink-2); }
.cx-rail-list div span:last-child { font-family: var(--cx-mono); font-size: 12px; color: var(--cx-muted); }
.cx-rail-list div.done span:last-child { color: var(--cx-ok); }
#approval-actions { display: grid; gap: 8px; }
#approval-actions .cx-cta, #approval-actions .cx-btn { width: 100%; }
.cx-hint { margin-top: 10px; font-size: 12.5px; color: var(--cx-warn); display: flex; gap: 6px; align-items: flex-start; }
.cx-rail textarea { width: 100%; box-sizing: border-box; min-height: 96px; border: 1px solid var(--cx-line-2); border-radius: 14px; padding: 10px 12px; font-size: 14px; resize: vertical; outline: none; margin: 10px 0 8px; }
.cx-rail textarea:focus { border-color: var(--cx-ink); }
.cx-rail-meta { font-size: 12.5px; color: var(--cx-muted); display: grid; gap: 8px; }
.cx-rail-meta div { display: flex; justify-content: space-between; gap: 10px; }
.cx-rail-meta b { color: var(--cx-ink); font-weight: 500; }
.cx-status { margin-top: 12px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 600; }
.cx-status-ok { background: var(--cx-ok-bg); color: var(--cx-ok); }
.cx-status-warn { background: var(--cx-warn-bg); color: var(--cx-warn); }
.cx-status-bad { background: var(--cx-bad-bg); color: var(--cx-bad); }

/* Approved + send */
.cx-approved { background: #0B1F33; color: #fff; border-radius: var(--cx-r-lg); padding: 24px; position: relative; overflow: hidden; }
.cx-approved .cx-glow.a { width: 260px; height: 260px; background: var(--cx-g5); right: -80px; top: -120px; opacity: .3; }
.cx-approved .tick { width: 44px; height: 44px; border-radius: 50%; background: rgba(52, 211, 153, .16); display: grid; place-items: center; color: #34D399; position: relative; }
.cx-approved h3 { position: relative; margin-top: 14px; font-size: 20px; }
.cx-approved p { position: relative; color: rgba(255, 255, 255, .6); margin: 4px 0 0; font-size: 13px; }
.cx-send h3 { font-size: 17px; }
.cx-phone { display: flex; align-items: center; gap: 8px; border: 1px solid var(--cx-line-2); border-radius: 14px; padding: 4px 4px 4px 12px; margin-top: 14px; }
.cx-phone:focus-within { border-color: var(--cx-ink); }
.cx-phone input { border: 0; outline: none; flex: 1; min-width: 0; font-size: 16px; font-family: var(--cx-mono); padding: 9px 0; background: none; }
.cx-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: 13px; color: var(--cx-ink-2); cursor: pointer; }
.cx-consent input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--cx-ink); flex-shrink: 0; }

/* Readability pass over the classic renderers inside the case panels
   (physician summary, key messages, script, source trace, verification):
   the classic dashboard used 9–10 px text throughout. */
.cx-panel { font-size: 14px; }
.cx-panel .text-\[9px\] { font-size: 11px !important; }
.cx-panel .text-\[10px\] { font-size: 12px !important; }
.cx-panel .text-\[11px\] { font-size: 12.5px !important; }
.cx-panel .text-xs { font-size: 13px !important; line-height: 1.55; }
.cx-panel .text-sm { font-size: 14.5px !important; }
.cx-panel .rounded-xl { border-radius: 18px; }
.cx-panel .rounded-lg { border-radius: 12px; }
.cx-panel .border-gray-200 { border-color: var(--cx-line) !important; }
.cx-panel .bg-white.rounded-xl.border { box-shadow: none; }
.cx-panel .font-black { font-weight: 700; }
.cx-panel table { border-collapse: collapse; }
.cx-panel th { letter-spacing: .04em; }
.cx-panel input[type="checkbox"] { accent-color: var(--cx-ink); width: 16px; height: 16px; }

/* Key messages (echo) cards */
.cx-echo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cx-echo { border-radius: 18px; box-shadow: 0 0 0 1px var(--cx-line); padding: 18px 18px 16px; position: relative; overflow: hidden; background: var(--cx-surface); }
.cx-echo::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c, var(--cx-g1)); }
.cx-echo .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cx-echo .ty { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.cx-echo .meta { display: flex; gap: 6px; }
.cx-echo .meta span { font-family: var(--cx-mono); font-size: 11px; color: var(--cx-muted); background: var(--cx-fill-2); padding: 2px 6px; border-radius: 6px; }
.cx-echo h4 { font-family: var(--cx-display); font-size: 16px; font-weight: 600; margin: 10px 0 4px; letter-spacing: -.015em; }
.cx-echo p { margin: 0; color: var(--cx-ink-2); font-size: 13.5px; }
.cx-echo .pre { margin-top: 8px; font-size: 12px; color: var(--cx-muted); }

/* ── Archive ─────────────────────────────────────────────────────── */
.cx-arch-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.cx-search { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 10px; background: var(--cx-surface); border-radius: 999px; box-shadow: 0 0 0 1px var(--cx-line); padding: 11px 18px; color: var(--cx-muted); }
.cx-search input { border: 0; outline: none; flex: 1; font-size: 14.5px; background: none; color: var(--cx-ink); min-width: 0; }
.cx-table-wrap { overflow-x: auto; }
.cx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cx-table th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-muted); padding: 12px 18px; background: var(--cx-fill-2); white-space: nowrap; }
.cx-table td { padding: 15px 18px; border-top: 1px solid var(--cx-line); vertical-align: middle; }
.cx-table tbody tr.cx-row:hover td { background: var(--cx-fill-2); cursor: pointer; }
.cx-table .sub { display: block; color: var(--cx-muted); font-size: 12px; }
.cx-dx { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--cx-mist); margin: 2px 4px 2px 0; }
.cx-table .fn { font-weight: 500; }
.cx-table .fn small { color: var(--cx-muted); font-weight: 400; }
.cx-table-msg { padding: 28px 18px !important; text-align: center; color: var(--cx-muted); }
.cx-archive-status { font-size: 13px; color: var(--cx-muted); margin: 0 0 10px 4px; }

/* ── Error ───────────────────────────────────────────────────────── */
.cx-error { margin-top: 40px; padding: 32px; text-align: center; }
.cx-error .ic { width: 52px; height: 52px; border-radius: 50%; background: var(--cx-bad-bg); color: var(--cx-bad); display: grid; place-items: center; margin: 0 auto 14px; font-size: 22px; font-weight: 700; }
.cx-error h2 { font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.cx-error p { color: var(--cx-ink-2); margin: 8px auto 0; max-width: 560px; }
.cx-error-stages { text-align: left; max-width: 520px; margin: 18px auto 0; padding: 14px 18px; border-radius: 16px; background: var(--cx-fill-2); }

/* ── Toast ───────────────────────────────────────────────────────── */
.toast.cx-toast { position: fixed; top: 72px; left: 50%; transform: translate(-50%, -12px); z-index: 60; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; box-shadow: 0 16px 40px -12px rgba(11, 31, 51, .4); opacity: 0; pointer-events: none; transition: .3s var(--cx-ease); }
.toast.cx-toast.show { opacity: 1; transform: translate(-50%, 0); }
.cx-toast-ok { background: var(--cx-ink); color: #fff; }
.cx-toast-err { background: var(--cx-bad); color: #fff; }

/* ── Sign-in ─────────────────────────────────────────────────────── */
.cx-auth-card { background: var(--cx-surface); border-radius: var(--cx-r-lg); box-shadow: var(--cx-shadow); padding: 36px 32px 28px; max-width: 380px; width: 100%; margin: 0 16px; text-align: center; position: relative; z-index: 1; }
.cx-auth-card img { height: 18px; }
.cx-auth-card h2 { font-size: 26px; font-weight: 600; letter-spacing: -.035em; margin: 22px 0 6px; }
.cx-auth-card p { color: var(--cx-muted); font-size: 14px; margin: 0 0 24px; }
.cx-auth-card .cx-orb { width: 44px; height: 44px; --cx-blur: 4px; margin: 22px auto 0; display: block; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .cx-rr, .cx-case-grid { grid-template-columns: 1fr; }
  .cx-rail { position: static; }
  .cx-stage { padding: 36px 24px; }
  .cx-stage-grid { grid-template-columns: 1fr; text-align: center; gap: 36px; }
  .cx-stage .desc { margin: 0 auto; }
  .cx-metrics, .cx-live-l { justify-content: center; }
  .cx-echo-grid { grid-template-columns: 1fr; }
  #stage-list.cx-st-grid { columns: 1; }
  .cx-rc { grid-template-columns: 1fr auto; }
  .cx-rc .dim { display: none; }
  .cx-nav-inner { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 14px; }
  .cx-tabs { justify-self: center; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .cx-tabs::-webkit-scrollbar { display: none; }
  .cx-me { gap: 2px; }
  .cx-brand img, .cx-brand-div, .cx-user .cx-user-name { display: none; }
  .cx-wrap { padding: 0 14px 120px; }
}
@media (max-width: 640px) {
  .cx-psteps { grid-template-columns: 1fr; }
  .cx-lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-dock { border-radius: 24px; flex-wrap: wrap; padding: 12px; }
  .cx-toolbar .cx-spacer { display: none; }
  .cx-toolbar .cx-cta { width: 100%; }
  .cx-case-right { width: 100%; justify-content: space-between; }
  .cx-player { padding: 20px; }
  .cx-p-right { margin-left: 0; width: 100%; justify-content: space-between; }
  .cx-stage { border-radius: 24px; }
  .cx-tabs > button, .cx-admin-trigger { padding: 6px 10px; }
  .cx-me [data-admin-only] { display: none !important; }
  .cx-brand-prod { font-size: 0; gap: 0; }
}

/* Admin pipeline panel on New case (collapsed by default) */
.cx-admin-details { margin-top: 16px; padding: 0 22px; }
.cx-admin-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 14px; font-weight: 500; color: var(--cx-ink-2); }
.cx-admin-details summary::-webkit-details-marker { display: none; }
.cx-admin-details[open] summary { border-bottom: 1px solid var(--cx-line); margin-bottom: 12px; }
.cx-admin-details > div { padding-bottom: 18px; font-size: 13px !important; }
.cx-admin-details > div > div { padding: 3px 0; }
.cx-admin-details hr { border: 0; border-top: 1px solid var(--cx-line); margin: 8px 0; }

/* ── Model settings (primary admin — markup arrives with the admin bundle) ──
   The classic modal becomes a full page in the Cortex style; ids and logic
   are unchanged. */
#settings-modal { background: var(--cx-bg) !important; padding: 0 !important; z-index: 45; }
#settings-modal > div { max-width: 1040px !important; width: 100%; margin: 0 auto !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 24px 60px; }
#settings-modal > div > div:first-child { background: transparent !important; border: 0 !important; padding: 34px 0 18px !important; border-radius: 0 !important; }
#settings-modal h2 { font-family: var(--cx-display); font-size: 34px !important; font-weight: 600 !important; letter-spacing: -.04em !important; color: var(--cx-ink) !important; }
#settings-modal h2 + p { font-size: 15px !important; color: var(--cx-muted) !important; }
#settings-modal img { height: 16px !important; }
#settings-modal [data-settings-tab] { border-radius: 999px !important; padding: 7px 16px !important; font-size: 13px !important; font-weight: 500 !important; background: transparent !important; color: var(--cx-muted) !important; }
#settings-modal [data-settings-tab].bg-gray-900 { background: var(--cx-surface) !important; color: var(--cx-ink) !important; box-shadow: 0 1px 3px rgba(11, 31, 51, .12); }
#settings-modal > div > div:nth-child(2) { background: var(--cx-fill) !important; border: 0 !important; border-radius: 999px; padding: 3px !important; display: inline-flex !important; margin-bottom: 18px; }
#settings-modal .rounded-xl { border-radius: 22px !important; }
#settings-modal .border-2 { border-width: 0 !important; box-shadow: 0 0 0 1px var(--cx-line); }
#settings-modal .bg-gray-100 { background: transparent !important; }
#settings-modal select, #settings-modal input[type="text"] { border-radius: 12px !important; border: 1px solid var(--cx-line-2) !important; padding: 10px 12px !important; font-size: 14px !important; background-color: #fff; color: var(--cx-ink); }
#settings-modal label { font-size: 12.5px !important; }
#settings-modal .text-sm { font-size: 15px !important; }
#settings-modal .font-black, #settings-modal .font-bold { font-weight: 600 !important; }
#settings-modal #s-save-btn, #settings-modal #sg-save-btn { background: var(--cx-ink) !important; border-radius: 999px !important; box-shadow: 0 8px 22px -8px rgba(11, 31, 51, .55); }
#settings-modal #s-reset-btn { border-radius: 999px !important; }
#settings-modal > div > div:last-child { position: sticky; bottom: 16px; background: rgba(255, 255, 255, .9) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 999px !important; box-shadow: 0 0 0 1px var(--cx-line), 0 16px 40px -14px rgba(11, 31, 51, .3); padding: 8px !important; border: 0 !important; margin-top: 20px; }
.cx-pair-select { display: none !important; }
.cx-pair-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 6px 0 4px; }
.cx-pair { text-align: left; border: 0; cursor: pointer; border-radius: 18px; padding: 14px 16px; background: var(--cx-surface); box-shadow: 0 0 0 1px var(--cx-line); color: var(--cx-ink); display: grid; gap: 6px; transition: box-shadow .2s var(--cx-ease); }
.cx-pair:hover { box-shadow: 0 0 0 1px var(--cx-line-2); }
.cx-pair.is-active { background: #0B1F33; color: #fff; box-shadow: none; }
.cx-pair .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cx-pair b { font-family: var(--cx-display); font-size: 15px; font-weight: 600; }
.cx-pair .badge { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-g2); }
.cx-pair.is-active .badge { color: #FDE68A; }
.cx-pair small { font-size: 12px; color: var(--cx-muted); }
.cx-pair.is-active small { color: rgba(255, 255, 255, .6); }
.cx-pair .play { font-size: 12px; font-weight: 600; color: var(--cx-ink-2); }
.cx-pair.is-active .play { color: #fff; }

/* Reading the upload — shown between New case and the redaction review */
.cx-reading { max-width: 560px; margin: 64px auto 0; padding: 44px 36px 34px; text-align: center; }
.cx-reading-orb { width: 96px; height: 96px; margin-bottom: 26px; }
.cx-reading-orb .cx-orb { width: 96px; height: 96px; --cx-blur: 7px; --cx-speed: 4s; display: block; }
.cx-reading-orb .cx-orb-ring { inset: -12px; border-color: var(--cx-line); }
.cx-reading .cx-steps-mini { margin-bottom: 20px; }
.cx-reading h2 { font-size: 28px; font-weight: 600; letter-spacing: -.035em; }
.cx-reading-file { margin: 6px 0 0; color: var(--cx-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-reading-status { margin: 22px 0 12px; font-size: 15px; font-weight: 500; color: var(--cx-ink); min-height: 22px; animation: cx-rise .4s var(--cx-ease); }
.cx-reading-bar { height: 4px; border-radius: 4px; background: var(--cx-fill); overflow: hidden; position: relative; }
.cx-reading-bar i { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 4px; background: var(--cx-grad); animation: cx-indeterminate 1.6s var(--cx-ease) infinite; }
@keyframes cx-indeterminate { from { left: -40%; } to { left: 100%; } }
.cx-reading-note { margin: 18px 0 0; font-size: 12.5px; color: var(--cx-muted); }
/* Google profile pictures can be transparent logos — never on the ink fill. */
.cx-avatar-img { background: #fff; box-shadow: 0 0 0 1px var(--cx-line); object-fit: contain; }

/* Wide clinical tables (diagnoses, medications, procedures): a visible
   horizontal scrollbar — macOS hides overlay scrollbars, so the cut-off
   columns looked unreachable. */
.cx-panel .overflow-x-auto { scrollbar-width: thin; scrollbar-color: var(--cx-line-2) transparent; padding-bottom: 6px; }
.cx-panel .overflow-x-auto::-webkit-scrollbar { height: 10px; }
.cx-panel .overflow-x-auto::-webkit-scrollbar-thumb { background: var(--cx-line-2); border-radius: 10px; }
.cx-panel .overflow-x-auto::-webkit-scrollbar-track { background: var(--cx-fill-2); border-radius: 10px; }
.cx-panel td { word-break: normal; overflow-wrap: anywhere; }

/* Keyboard focus only — no ring left behind after a mouse click. */
.cx-ctabs .sub-tab:focus, .cx-tabs > button:focus, .cx-seg > button:focus { outline: none; }
.cx-ctabs .sub-tab:focus-visible, .cx-tabs > button:focus-visible, .cx-seg > button:focus-visible { outline: 2px solid var(--cx-g1); outline-offset: 2px; }

/* Right-to-left episodes: the script bubbles read naturally. */
.cx-panel [dir="rtl"] { text-align: right; }
.cx-panel [dir="rtl"] .flex-row-reverse > .flex-1, .cx-panel [dir="rtl"] .flex > .flex-1 { text-align: right; }