/* Codex-Reviewer — "Command Center" UI (docs: UI_REDESIGN_COMMAND_CENTER.md).
   Loaded after clinic.css. 1) spec tokens; 2) the old clinic.css variables remapped onto them, so pages that have no
   mockup (job detail, document review, CRUD forms) share the same look; 3) shell + shared components, all scoped
   under body.codex. Templates use these variables only — no hex values in templates. */

/* Palette, fonts and buttons follow codexaba.com (Codex-ABA): navy text on white, a light blue-grey for the sidebar
   and fills, the teal→cyan gradient as the accent, pill buttons, the system font stack. Light is the default; dark
   (html[data-theme="dark"], from the top bar, remembered per browser) is the same brand on navy. */
:root {
  color-scheme: light;
  /* surfaces */
  --bg: #FFFFFF; --bg-sidebar: #F4F9FC; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F4F9FC;
  --surface-hover: #EEF5FA; --border: #E3EAF3; --border-strong: #D4E0EE; --row-divider: #EDF2F8;
  /* text (codexaba navy / body / muted; "dim" darkened from #8896AC so small text keeps 4.5:1 on white) */
  --text: #17294D; --text-2: #22365F; --text-muted: #5A6B85; --text-dim: #66778F;
  /* brand / accent: fills use the cyan; text and links use a darker teal (the cyan is too light for text on white) */
  --grad: linear-gradient(to right, #2DD4BF, #06B6D4);
  --accent: #06B6D4; --accent-strong: #0A7F86; --accent-ink: #FFFFFF;
  --accent-soft: rgba(20,194,201,.10); --accent-line: rgba(6,182,212,.35);
  --focus-ring: 0 0 0 4px rgba(6,182,212,.16);
  --glow-accent: 0 8px 22px -8px rgba(6,182,212,.65);
  --nav-on-bg: #FFFFFF; --nav-on-text: #0A7F86; --nav-on-shadow: 0 1px 3px rgba(23,41,77,.09);
  --seg-bg: #F4F9FC; --seg-on: #FFFFFF; --seg-on-shadow: 0 1px 2px rgba(23,41,77,.10);
  --btn-out-bg: #FFFFFF; --btn-out-border: #D4E0EE; --btn-out-hover: #F4F9FC;
  /* semantic (codexaba pills: ok teal, warn amber, info blue) */
  --ok: #0A6F74; --ok-dot: #14C2C9;
  --warn: #B07D0A; --warn-text: #8A6110; --warn-soft: #FDF0D3;
  --danger: #D92D20; --danger-text: #B42318; --danger-soft: #FDECEC;
  --info: #3B6BB5; --info-text: #33507F;
  --violet-text: #6D28D9; --violet-soft: rgba(124,58,237,.09);
  /* type: codexaba's system stack; mono only for IDs, numbers and code */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
  --heading-tracking: -0.028em;
  /* shape */
  --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 18px; --r-pill: 999px;
  /* spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 22px; --s-6: 28px; --s-7: 36px;
  --page-glow: radial-gradient(900px 400px at 85% -10%, #EEF8FB 0%, rgba(255,255,255,0) 70%);
  /* component colors (kept here so templates stay hex-free) */
  --hover-row: #F7FAFD; --hover-nav: #EAF3F9; --soft-border: #A5E3E6; --chip-dashed: #C5D3E4;
  --danger-dashed: #EFB4B4; --danger-dashed-text: #A85555; --dry-dashed: #E0BD5E; --bar-muted: #E9EFF6; --slate: #94A3B8;
  --slate-2: #E3EAF3; --desc: #5A6B85; --toggle-off: #8896AC; --card-hover: #F7FAFD; --pulse: rgba(6,182,212,.3);
  --warn-grad: #FFF8EB; --warn-border: #F2D48C; --danger-grad: #FEF3F2; --danger-border: #F3C1C1;
  --av-1: #DBEAFE; --av-2: #EDE9FE; --av-3: #DFF6F7; --av-4: #FFEDD5; --av-5: #E0E9F7; --av-6: #FCE7F3; --av-7: #D7F4F5; --av-8: #FDF0D3;
  --ok-bg: #D7F4F5; --ok-surface: rgba(20,194,201,.06); --warn-surface: rgba(176,125,10,.05); --err-surface: rgba(217,45,32,.04);
  --info-bg: #E0E9F7; --info-line: rgba(59,107,181,.3); --ok-line: rgba(10,111,116,.3); --warn-line: rgba(176,125,10,.3); --danger-line: rgba(217,45,32,.3);
  --shadow-pop: 0 1px 2px rgba(23,41,77,.05), 0 18px 44px -14px rgba(23,41,77,.18);
  --modal-backdrop: rgba(23,41,77,.45);
  --tp-stripe: rgba(255,255,255,.35);

  /* ── clinic.css variables → tokens (compatibility for pages without a mockup) ── */
  --navy: var(--text); --navy-hover: var(--surface-hover); --navy-line: var(--border-strong); --navy-line-hi: var(--border-strong);
  --navy-ink: var(--text); --navy-muted: var(--text-muted); --navy-faint: var(--text-dim);
  --accent-hover: var(--accent-strong); --accent-tint: var(--accent-soft); --accent-tint-soft: var(--accent-soft); --accent-border: var(--accent-line);
  --white: var(--surface-2); --c-25: var(--surface); --c-30: var(--surface); --c-50: var(--surface); --c-75: var(--surface-3);
  --c-110: var(--surface-3); --c-150: var(--surface-hover); --c-200: var(--border-strong); --c-250: var(--border-strong);
  --c-300: var(--border-strong); --meta: var(--text-dim); --c-400: var(--text-dim); --slate-500: var(--text-muted);
  --slate-600: var(--text-muted); --c-700: var(--text-2); --c-800: var(--text-2);
  --warn-ink: var(--warn-text); --warn-bg: var(--warn-soft);
  --err: var(--danger); --err-bg: var(--danger-soft); --err-border: var(--danger-border); --live: var(--danger); --live-bg: var(--danger-soft);
  --r-xs: 4px; --r-input: var(--r-lg); --r-card: var(--r-xl);
  --shadow-rail: none;
  --t: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Dark mode: the same brand on codexaba's navy (#17294D family) instead of white. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1426; --bg-sidebar: #0E1930; --surface: #0F1B33; --surface-2: #112039; --surface-3: #142441;
  --surface-hover: #1A2D50; --border: #1E3154; --border-strong: #2A4068; --row-divider: #172846;
  --text: #E8EEF7; --text-2: #C6D2E4; --text-muted: #A8B8D0; --text-dim: #8395B3;
  --accent: #2DD4BF; --accent-strong: #5EEAD4; --accent-ink: #FFFFFF;
  --accent-soft: rgba(45,212,191,.10); --accent-line: rgba(45,212,191,.28);
  --focus-ring: 0 0 0 4px rgba(45,212,191,.14);
  --glow-accent: 0 8px 26px -8px rgba(6,182,212,.55);
  --nav-on-bg: #16284A; --nav-on-text: #5EEAD4; --nav-on-shadow: inset 0 0 0 1px #2A4068;
  --seg-bg: #0F1B33; --seg-on: #1D3257; --seg-on-shadow: none;
  --btn-out-bg: transparent; --btn-out-border: #2A4068; --btn-out-hover: #1A2D50;
  --ok: #5EEAD4; --ok-dot: #2DD4BF;
  --warn: #FBBF24; --warn-text: #FCD34D; --warn-soft: rgba(251,191,36,.12);
  --danger: #F87171; --danger-text: #FCA5A5; --danger-soft: rgba(248,113,113,.10);
  --info: #60A5FA; --info-text: #93C5FD;
  --violet-text: #C4B5FD; --violet-soft: rgba(167,139,250,.12);
  --page-glow: radial-gradient(900px 400px at 85% -10%, #16305A 0%, rgba(11,20,38,0) 70%);
  --hover-row: #13233F; --hover-nav: #152748; --soft-border: #1F5A5A; --chip-dashed: #2A4068;
  --danger-dashed: #5B2A36; --danger-dashed-text: #8C6470; --dry-dashed: #6B5314; --bar-muted: #2A3F60; --slate: #52627E;
  --slate-2: #22365F; --desc: #A8B8D0; --toggle-off: #9FB0C8; --card-hover: #13233F; --pulse: rgba(45,212,191,.35);
  --warn-grad: #1F1D14; --warn-border: #3D3314; --danger-grad: #221322; --danger-border: #3A1D26;
  --av-1: #1E3A5F; --av-2: #3B2A55; --av-3: #1F4637; --av-4: #4A2E22; --av-5: #2D3F52; --av-6: #4A2440; --av-7: #1D4A52; --av-8: #4A3A18;
  --ok-bg: rgba(94,234,212,.10); --ok-surface: rgba(94,234,212,.06); --warn-surface: rgba(251,191,36,.06); --err-surface: rgba(248,113,113,.06);
  --info-bg: rgba(96,165,250,.10); --info-line: rgba(96,165,250,.3); --ok-line: rgba(94,234,212,.3); --warn-line: rgba(251,191,36,.3); --danger-line: rgba(248,113,113,.35);
  --shadow-pop: 0 18px 40px -18px rgba(0,0,0,.8);
  --modal-backdrop: rgba(0,0,0,.6);
  --tp-stripe: rgba(255,255,255,.22);
}

/* ── Base ── */
body.codex [hidden] { display: none !important; }
body.codex { margin: 0; background: var(--page-glow), var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--font-sans);
  font-size: 14px; -webkit-font-smoothing: antialiased; }
body.codex a { color: var(--accent-strong); }
body.codex :focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
body.codex .mono, body.codex .num, body.codex code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
body.codex h1, body.codex h2, body.codex h3 { color: var(--text); letter-spacing: var(--heading-tracking); }
body.codex .dim { color: var(--text-dim); }
body.codex .muted { color: var(--text-muted); }
body.codex .hint { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { body.codex * { transition: none !important; animation: none !important; } }

/* ── Shell ── */
.codex .app { display: flex; min-height: 100vh; }
.codex .sidebar { width: 232px; flex-shrink: 0; box-sizing: border-box; padding: 24px 16px; display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-sidebar); border-right: 1px solid var(--border); height: 100vh; position: sticky; top: 0; overflow-y: auto; z-index: 50; }
.codex .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 24px; text-decoration: none; color: var(--text); }
.codex .brand img { flex-shrink: 0; }
.codex .brand .word { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; white-space: nowrap; }
.codex .nav-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--r-md); text-decoration: none;
  font-size: 14px; color: var(--text-muted); transition: background-color .15s ease, color .15s ease; }
.codex .nav-item svg { flex-shrink: 0; }
.codex .nav-item:hover { background: var(--hover-nav); color: var(--text-2); }
.codex .nav-item[aria-current="page"] { color: var(--nav-on-text); background: var(--nav-on-bg); box-shadow: var(--nav-on-shadow); font-weight: 650; }
.codex .nav-item .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 1px 7px; }
.codex .subnav { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 21px; padding-left: 12px; border-left: 1px solid var(--border-strong); }
.codex .subnav a { height: 34px; display: flex; align-items: center; padding: 0 10px; border-radius: var(--r-sm); color: var(--text-muted); text-decoration: none; font-size: 13px; }
.codex .subnav a:hover { background: var(--hover-nav); color: var(--text-2); }
.codex .subnav a[aria-current="page"] { color: var(--nav-on-text); background: var(--nav-on-bg); box-shadow: var(--nav-on-shadow); font-weight: 600; }
.codex .usercard { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r-lg); background: var(--surface-3); border: 1px solid var(--border); }
.codex .usercard .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.codex .usercard .who b { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.codex .usercard .who span { font: 700 11px var(--font-sans); text-transform: uppercase; letter-spacing: .07em; font-size: 10px; color: var(--text-muted); }
.codex .usercard form { margin-left: auto; }
.codex .usercard .btn-icon { border: none; background: transparent; }
.codex main.main { flex: 1; min-width: 0; box-sizing: border-box; padding: 28px 36px; display: flex; flex-direction: column; gap: 22px; }
.codex .topbar { display: none; }

/* Collapse button (wide screens only; below 1024px the rail/drawer take over) */
.codex .sb-toggle { margin-top: auto; width: 100%; border: none; background: transparent; cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.codex .sb-toggle + .usercard { margin-top: 8px; }
.sb-collapsed .codex .sb-toggle svg { transform: scaleX(-1); }
@media (min-width: 1024px) { /* collapsed by the user: same look as the icon rail */
  .sb-collapsed .codex .sidebar { width: 64px; padding: 20px 10px; align-items: center; }
  .sb-collapsed .codex .brand { padding: 0 0 20px; }
  .sb-collapsed .codex .brand .word, .sb-collapsed .codex .nav-item .label, .sb-collapsed .codex .nav-item .count,
  .sb-collapsed .codex .subnav, .sb-collapsed .codex .usercard .who { display: none; }
  .sb-collapsed .codex .nav-item { width: 40px; padding: 0; justify-content: center; }
  .sb-collapsed .codex .usercard { padding: 6px; flex-direction: column; background: transparent; border: none; }
  .sb-collapsed .codex .usercard form { margin: 0; }
}
@media (max-width: 1023px) {
  .codex .sb-toggle { display: none; }
  .codex .sb-toggle + .usercard { margin-top: auto; }
}

@media (max-width: 1023px) { /* icon rail */
  .codex .sidebar { width: 64px; padding: 20px 10px; align-items: center; }
  .codex .brand { padding: 0 0 20px; }
  .codex .brand .word, .codex .nav-item .label, .codex .nav-item .count, .codex .subnav, .codex .usercard .who { display: none; }
  .codex .nav-item { width: 40px; padding: 0; justify-content: center; }
  .codex .usercard { padding: 6px; flex-direction: column; background: transparent; border: none; }
  .codex .usercard form { margin: 0; }
  .codex main.main { padding: 24px; }
}
@media (max-width: 719px) { /* off-canvas drawer */
  .codex .app { display: block; }
  .codex .topbar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; background: var(--bg-sidebar); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 40; }
  .codex .topbar .word { font-weight: 700; font-size: 15px; }
  .codex .sidebar { position: fixed; left: 0; top: 0; width: 260px; align-items: stretch; padding: 24px 16px; transform: translateX(-100%); transition: transform .15s ease; }
  .codex.drawer-open .sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); }
  .codex .brand .word, .codex .nav-item .label, .codex .nav-item .count, .codex .usercard .who { display: revert; }
  .codex .nav-item { width: auto; padding: 0 12px; justify-content: flex-start; }
  .codex .usercard { flex-direction: row; padding: 12px; background: var(--surface-3); border: 1px solid var(--border); }
  .codex main.main { padding: 20px 16px; }
}

/* ── Page header ── */
.codex .page-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.codex .page-header .titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.codex .page-header .actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.codex .eyebrow { font: 700 11px var(--font-sans); text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.codex .eyebrow a { color: var(--text-muted); text-decoration: none; }
.codex .eyebrow a:hover { color: var(--text-2); }
.codex .eyebrow .sep { margin: 0 6px; color: var(--text-dim); }
.codex h1.title { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: var(--heading-tracking); line-height: 1.15; }
.codex .subtitle { font-size: 14px; color: var(--text-muted); margin: 0; }
.codex h2.section { margin: 0; font-size: 16px; font-weight: 600; }
.codex .count-pill { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 3px 10px; }

/* ── Buttons ── */
.codex .btn-primary, .codex .btn-secondary { height: 44px; padding: 0 20px; border-radius: var(--r-pill); font: 650 14px var(--font-sans); display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; transition: filter .15s ease, background-color .15s ease; box-sizing: border-box; }
.codex .btn-primary { background: var(--grad); color: var(--accent-ink); border: none; box-shadow: var(--glow-accent); }
.codex .btn-primary:hover { filter: brightness(1.06); color: var(--accent-ink); }
.codex .btn-primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.codex .btn-secondary { background: var(--btn-out-bg); border: 1.5px solid var(--btn-out-border); color: var(--text); }
.codex .btn-secondary:hover { background: var(--btn-out-hover); color: var(--text); }
.codex .btn-sm.btn-primary, .codex .btn-sm.btn-secondary { height: 34px; padding: 0 14px; font-size: 13px; border-radius: var(--r-pill); }
.codex .btn-soft { height: 36px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--soft-border); background: var(--accent-soft); color: var(--accent-strong);
  font: 650 13px var(--font-sans); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; }
.codex .btn-soft:hover { filter: brightness(1.06); }
.codex .btn-icon { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; text-decoration: none; }
.codex .btn-icon:hover { color: var(--text); background: var(--surface-hover); }
.codex .btn-icon:disabled { opacity: .35; cursor: not-allowed; }
.codex .btn-danger-disabled { height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1px dashed var(--danger-dashed); background: transparent;
  color: var(--danger-dashed-text); font: 650 14px var(--font-sans); cursor: not-allowed; width: 100%; }
.codex .btn-danger { height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1.5px solid var(--danger); background: var(--danger-soft); color: var(--danger-text);
  font: 650 14px var(--font-sans); cursor: pointer; width: 100%; }

/* ── Busy buttons (2026-09-29) ──
   A submit/action button gets this class the moment its own <form> submit, HTMX request or fetch() starts
   (public/js/codex.js's window.CodexBusy; public/doc.js and the job page's bulk-action script call it directly)
   and loses it once that request ends, disabled the whole time — a slow launch/save/lock/reject/bulk action can't
   be fired twice by an impatient second click. The spinner reads `currentColor`, so it needs no token of its own:
   it always matches whatever `color` the button's own variant already uses (light and dark alike). A `.dl-link`
   download is a real navigation, never an "operation" — CodexBusy skips it on purpose. */
.is-busy { cursor: wait !important; pointer-events: none; opacity: .75; }
.is-busy::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 7px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: codex-busy-spin .7s linear infinite; }
@keyframes codex-busy-spin { to { transform: rotate(360deg); } }
/* A launch bar reloading on another agency (public/js/codex.js [data-reload-agency]): dimmed and inert meanwhile. */
form.is-loading { opacity: .6; pointer-events: none; cursor: wait; }

/* ── Surfaces ── */
.codex .card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 18px; box-shadow: none; }
.codex .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); overflow: hidden; }
.codex .panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.codex .panel-head .title { font-size: 16px; font-weight: 600; color: var(--text); }
.codex .panel-head .more { margin-left: auto; font-size: 13px; color: var(--accent-strong); text-decoration: none; }
.codex .panel-body { padding: 20px 22px; }
.codex .grid { display: grid; gap: 14px; }
.codex .kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.codex .kpi { display: flex; flex-direction: column; gap: 10px; }
.codex .kpi .label { font: 700 11px var(--font-sans); text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.codex .kpi .value { font-size: 31px; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1; }
.codex .kpi .foot { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.codex .kpi.warn { background: linear-gradient(180deg, var(--warn-grad), var(--surface-2)); border-color: var(--warn-border); }
.codex .kpi.warn .label { color: var(--warn-text); }
.codex .kpi.danger { background: linear-gradient(180deg, var(--danger-grad), var(--surface-2)); border-color: var(--danger-border); }
.codex .kpi.danger .label { color: var(--danger-text); }
.codex .marker { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.codex .bar { height: 6px; border-radius: var(--r-pill); background: var(--border-strong); overflow: hidden; display: flex; }
.codex .bar > i { display: block; height: 100%; }
.codex .spark { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.codex .spark > i { width: 6px; border-radius: 2px; background: var(--bar-muted); display: block; min-height: 2px; }
.codex .spark > i.max { background: var(--accent); }

/* ── Segmented / chips / filters ── */
.codex .segmented { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-lg); background: var(--seg-bg); border: 1px solid var(--border); }
.codex .segmented > a, .codex .segmented > button, .codex .segmented > label { height: 32px; padding: 0 12px; border-radius: var(--r-sm); font: 13px var(--font-sans);
  color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; background: none; border: none; cursor: pointer; white-space: nowrap; }
.codex .segmented > [aria-current="page"], .codex .segmented > [aria-selected="true"], .codex .segmented > label:has(input:checked) { background: var(--seg-on); color: var(--text); font-weight: 650; box-shadow: var(--seg-on-shadow); }
.codex .segmented .n { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.codex .segmented input { position: absolute; opacity: 0; pointer-events: none; }
/* A segmented control that may be wider than its field (the launch bar's target status): options wrap as whole units. */
.codex .segmented.seg-wrap { display: flex; flex-wrap: wrap; max-width: 100%; }
.codex .chip-filter { height: 40px; padding: 0 12px; border-radius: var(--r-md); border: 1px dashed var(--chip-dashed); color: var(--text-2); background: transparent;
  display: inline-flex; align-items: center; gap: 8px; font: 13px var(--font-sans); position: relative; }
.codex .chip-filter.set { border-style: solid; border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); }
.codex .chip-filter select, .codex .chip-filter input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.codex .chip-filter .clear { position: relative; z-index: 2; color: inherit; text-decoration: none; font-size: 15px; line-height: 1; }
.codex .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: none; background: none; padding: 0; box-shadow: none; }
.codex .toolbar .right { margin-left: auto; }

/* ── Inputs ── */
.codex .input, .codex input.input, .codex select.input, .codex textarea.input { box-sizing: border-box; height: 44px; border-radius: var(--r-lg); background: var(--surface-3);
  border: 1px solid var(--border); padding: 0 14px; font: 14px var(--font-sans); color: var(--text); width: 100%; transition: border-color .15s ease, box-shadow .15s ease; }
.codex textarea.input { height: auto; min-height: 88px; padding: 10px 14px; }
.codex .input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.codex .input.error { border-color: var(--danger); }
.codex .field { display: flex; flex-direction: column; gap: 6px; }
.codex .field > label, .codex .field-label { font: 13px var(--font-sans); color: var(--text-2); text-transform: none; letter-spacing: 0; }
.codex .field .help { font-size: 12px; color: var(--text-dim); }
.codex .field .err { font-size: 12px; color: var(--danger-text); }
.codex .req { color: var(--danger-text); }
.codex .search { position: relative; display: inline-flex; align-items: center; min-width: 260px; }
.codex .search svg { position: absolute; left: 13px; color: var(--text-dim); pointer-events: none; }
.codex .search .input { padding-left: 38px; padding-right: 44px; }
.codex .search kbd { position: absolute; right: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); border: 1px solid var(--border-strong); border-radius: 6px; padding: 1px 6px; }
.codex .prefix-input { display: flex; align-items: center; }
.codex .prefix-input > span { height: 44px; display: inline-flex; align-items: center; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-right: none; border-radius: var(--r-lg) 0 0 var(--r-lg); color: var(--text-muted); font-family: var(--font-mono); }
.codex .prefix-input > .input { border-radius: 0 var(--r-lg) var(--r-lg) 0; }

/* switch: real checkbox, visually hidden but focusable */
.codex .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.codex .switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.codex .switch .track { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--seg-on); transition: background-color .15s ease; }
.codex .switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-dim); transition: transform .15s ease, background-color .15s ease; }
.codex .switch input:checked + .track { background: var(--accent); }
.codex .switch input:checked + .track::after { transform: translateX(20px); background: var(--accent-ink); }
.codex .switch input:focus-visible + .track { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.codex .switch-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--row-divider); }
.codex .switch-row:first-child { border-top: none; }
.codex .switch-row .txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.codex .switch-row .txt b { font-weight: 500; font-size: 14px; }
.codex .switch-row .txt span { font-size: 12px; color: var(--text-muted); }

/* radio-card / toggle-chip / step */
.codex .radio-card { display: flex; gap: 12px; align-items: flex-start; padding: 15px; border-radius: 14px; background: var(--surface-3); border: 1px solid var(--border-strong); cursor: pointer; }
.codex .radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.codex .radio-card input { accent-color: var(--accent); margin-top: 3px; }
.codex .radio-card .t { font-size: 14px; font-weight: 600; color: var(--text); display: flex; gap: 8px; align-items: center; }
.codex .radio-card .d { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.codex .radio-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.codex .toggle-chip { height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); color: var(--toggle-off); display: inline-flex;
  align-items: center; gap: 6px; cursor: pointer; font-size: 13px; position: relative; }
.codex .toggle-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.codex .toggle-chip:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); }
.codex .toggle-chip:has(input:focus-visible) { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.codex .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.codex .step { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.codex .step .n { width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: var(--accent-ink); font: 700 12px var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center; }
.codex .step h2 { margin: 0; font-size: 16px; font-weight: 600; }

/* ── Badges & status ── */
.codex .tag { font: 650 11px var(--font-sans); border-radius: var(--r-pill); padding: 2px 9px; border: 1px solid var(--border-strong); color: var(--text-muted); white-space: nowrap; }
.codex .tag.live { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.codex .tag.dry { color: var(--warn); border: 1px dashed var(--dry-dashed); background: transparent; }
.codex .tag.noai { color: var(--info-text); border: 1px dashed var(--border-strong); }
.codex .tag.admin { color: var(--violet-text); background: var(--violet-soft); border-color: rgba(167,139,250,.3); }
.codex .tag.super_admin { color: var(--info-text); background: var(--info-bg); border-color: var(--info-line); }
.codex .tag.operator { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent-line); }
.codex .tag.you { color: var(--accent-strong); border-color: var(--accent-line); font-size: 10px; padding: 0 6px; }
.codex .tag.info { color: var(--info-text); border-color: var(--info-line); background: var(--info-bg); }
.codex .tag.warn { color: var(--warn-text); border-color: var(--warn-line); background: var(--warn-soft); }
.codex .tag.violet { color: var(--violet-text); border-color: rgba(167,139,250,.3); background: var(--violet-soft); }
.codex .tag.billing { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
.codex .estado { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.codex .estado.done { color: var(--ok); }
.codex .estado.failed { color: var(--danger-text); }
.codex .estado.running, .codex .estado.queued { color: var(--text-2); }
.codex .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: codex-pulse 1.2s ease-in-out infinite alternate; }
.codex .estado.queued .pulse { background: var(--text-dim); animation: none; }
@keyframes codex-pulse { from { opacity: 1; } to { opacity: .35; } }
.codex .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.codex .dot.ok { background: var(--ok-dot); box-shadow: 0 0 0 4px var(--accent-soft); }
.codex .dot.warn { background: var(--warn); box-shadow: 0 0 0 4px rgba(251,191,36,.16); }
.codex .dot.danger { background: var(--danger); box-shadow: 0 0 0 4px rgba(248,113,113,.16); }
.codex .dot.slate { background: var(--slate); box-shadow: 0 0 0 4px rgba(75,85,104,.2); }
.codex .pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface-2); font-size: 13px; color: var(--text-2); white-space: nowrap; }
.codex .avatar { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
  color: var(--text); flex-shrink: 0; letter-spacing: .02em; }
.codex .avatar.round { border-radius: 50%; }
.codex .avatar.lg { width: 38px; height: 38px; border-radius: var(--r-lg); font-size: 13px; }
.codex .avatar.xl { width: 48px; height: 48px; border-radius: var(--r-lg); font-size: 16px; }
.codex .glyph { width: 36px; height: 36px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--font-sans); flex-shrink: 0; }
.codex .glyph.info { color: var(--info-text); background: var(--info-bg); }
.codex .glyph.warn { color: var(--warn-text); background: var(--warn-soft); }
.codex .glyph.accent { color: var(--accent-strong); background: var(--accent-soft); }
.codex .glyph.violet { color: var(--violet-text); background: var(--violet-soft); }
.codex .glyph.billing { color: var(--ok); background: var(--ok-bg); }
.codex .glyph.slate { color: var(--text-2); background: var(--surface-hover); }
.codex .empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; text-align: center; }
.codex .empty .icon { width: 44px; height: 44px; border-radius: var(--r-lg); border: 1px dashed var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); }
.codex .empty b { font-size: 14px; font-weight: 500; }
.codex .empty span { font-size: 13px; color: var(--text-muted); }

/* ── Data tables (§4) ── */
.codex table.dtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.codex table.dtable.fixed { table-layout: fixed; }
.codex table.dtable.fixed td { overflow: hidden; text-overflow: ellipsis; }
.codex main.main > *, .codex [data-filter-root] > * { min-width: 0; }
.codex .dtable-wrap { overflow-x: auto; }
.codex table.dtable thead th { height: 44px; padding: 0 14px; text-align: left; font: 700 11px var(--font-sans); text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim); border-bottom: 1px solid var(--border); white-space: nowrap; }
.codex table.dtable thead th:first-child, .codex table.dtable td:first-child { padding-left: 22px; }
.codex table.dtable thead th:last-child, .codex table.dtable td:last-child { padding-right: 22px; }
.codex table.dtable td { height: 58px; padding: 0 14px; border-bottom: 1px solid var(--row-divider); color: var(--text-2); vertical-align: middle; }
.codex table.dtable tbody tr:last-child td { border-bottom: none; }
.codex table.dtable tbody tr { transition: background-color .15s ease; }
.codex table.dtable tbody tr:hover { background: var(--hover-row); }
.codex table.dtable tr[data-href] { cursor: pointer; }
.codex table.dtable td.num, .codex table.dtable th.num { text-align: right; }
.codex table.dtable td.num, .codex table.dtable .num:not(th) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.codex table.dtable .id a, .codex table.dtable .id { font-family: var(--font-mono); color: var(--text-muted); text-decoration: none; }
.codex table.dtable .name { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.codex table.dtable .two { display: flex; flex-direction: column; gap: 3px; }
.codex table.dtable .two .a { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.codex table.dtable .two .b { font-size: 11px; color: var(--text-dim); }
.codex table.dtable tr.row-alert { background: linear-gradient(90deg, rgba(248,113,113,.10), transparent 40%); box-shadow: inset 3px 0 0 var(--danger); }
.codex table.dtable tr.row-alert .docs-n { color: var(--danger-text); }
/* Section headings inside a settings table (note_review's long weight list, spec 2026-09-29 scoring-parity §4). */
.codex table.dtable tr.dtable-group { background: var(--surface-3); }
.codex table.dtable tr.dtable-group th { height: 32px; padding: 0 22px; text-align: left; font: 700 11px var(--font-sans); text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); border-bottom: 1px solid var(--row-divider); }
.codex table.dtable.tall td { height: 72px; }
.codex .who-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.codex .docs-cell { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.codex .docs-cell .bar { width: 70px; }
.codex .pager { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); font: 12px var(--font-mono); color: var(--text-muted); }
.codex .pager .right { margin-left: auto; display: flex; gap: 6px; }

/* ── Task progress (partials/task_progress.ejs): road-style bar + a small illustration per analysis ── */
.codex .task-progress { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.codex .task-progress-art { color: var(--accent-strong); }
.codex .task-progress-art svg { display: block; width: 180px; height: 56px; max-width: 100%; }
.codex .tp-road { fill: var(--border-strong); }
.codex .tp-dash { fill: var(--surface-hover); }
.codex .task-progress-track { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--bar-muted); overflow: hidden; }
.codex .task-progress-fill { height: 100%; width: 0; border-radius: var(--r-pill); background: var(--grad); transition: width .5s ease; }
.codex .task-progress.is-working .task-progress-fill { width: 100%;
  background-image: repeating-linear-gradient(45deg, var(--tp-stripe) 0 10px, transparent 10px 20px), var(--grad);
  background-size: 28px 28px, auto; animation: tp-stripes 1s linear infinite; }
.codex .task-progress-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.codex .task-progress-pct { font-weight: 650; color: var(--text); }
.codex .task-progress-phase { color: var(--text-muted); }
@keyframes tp-stripes { to { background-position: 28px 0, 0 0; } }
@keyframes tp-drive { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(128px); } }
.codex .task-progress.is-working .tp-car-mover { animation: tp-drive 2.2s ease-in-out infinite; }
@keyframes tp-spin { to { transform: rotate(360deg); } }
.codex .task-progress.is-working .tp-gear-spin { animation: tp-spin 3s linear infinite; }
@keyframes tp-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.codex .task-progress.is-working .tp-illust:not(.tp-car):not(.tp-gear) { animation: tp-breathe 1.8s ease-in-out infinite; }

/* ── Link cards (Config, Tools) ── */
.codex .cards-3 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.codex .link-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-xl); background: var(--surface-2); border: 1px solid var(--border);
  text-decoration: none; color: var(--text); transition: background-color .15s ease, border-color .15s ease; }
.codex .link-card:hover { border-color: var(--border-strong); background: var(--card-hover); }
.codex .link-card .glyph { width: 40px; height: 40px; }
.codex .link-card .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.codex .link-card .txt b { font-size: 14px; font-weight: 600; }
.codex .link-card .txt span { font-size: 12px; color: var(--text-muted); }
.codex .link-card .cnt { font: 22px var(--font-mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.codex .section-title { font: 700 11px var(--font-sans); text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin: 6px 0 12px; }
.codex .cards-3.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Tools: as many cards per row as fit (4 on wide screens), one on phones */
.codex .tools-grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
@media (max-width: 1180px) { .codex .cards-3.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .codex .cards-3.three { grid-template-columns: 1fr; } }
.codex .tool-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.codex .tool-card .top { display: flex; align-items: center; gap: 10px; }
.codex .tool-card .code { font: 11px var(--font-mono); color: var(--text-dim); }
.codex .tool-card .top .tag { margin-left: auto; }
.codex .tool-card h3 { margin: 0; font-size: 16px; font-weight: 700; }
.codex .tool-card p { margin: 0; font-size: 13px; color: var(--desc); line-height: 1.55; flex: 1; }
.codex .tool-card .foot { display: flex; align-items: center; gap: 10px; }
.codex .tool-card .foot .btn-soft { margin-left: auto; }

/* ── Toast ── */
.codex .toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: var(--shadow-pop); font-size: 13px; }
.codex .toast svg { color: var(--accent); }
/* Toast stack (public/js/codex.js codexToast / codexConfirm): bottom right, newest at the bottom; full width on phones. */
.codex .toast-region { position: fixed; right: 24px; bottom: 24px; z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.codex .toast-region:empty { display: none; }
.codex .toast-region .toast { position: static; pointer-events: auto; width: 100%; box-sizing: border-box; align-items: flex-start; color: var(--text);
  border-left: 4px solid var(--info); }
.codex .toast-region .toast-ok { border-left-color: var(--ok); }
.codex .toast-region .toast-warn { border-left-color: var(--warn); }
.codex .toast-region .toast-err { border-left-color: var(--danger); }
.codex .toast-region .toast-msg { flex: 1; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.45; }
.codex .toast-region .toast-x { flex: none; background: transparent; border: none; color: var(--text-muted); font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer; }
.codex .toast-region .toast-x:hover, .codex .toast-region .toast-x:focus-visible { color: var(--text); }
.codex .toast-region .toast-confirm { flex-direction: column; align-items: stretch; border-left-color: var(--accent); }
.codex .toast-region .toast-confirm.toast-danger { border-left-color: var(--danger); }
.codex .toast-region .toast-input { width: 100%; height: 38px; }
.codex .toast-region .toast-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.codex .toast-region .toast-ok-danger { background: var(--danger); color: var(--accent-ink); box-shadow: none; }
.codex .toast-region .toast-actions button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 720px) { .codex .toast-region { right: 16px; left: 16px; bottom: 16px; width: auto; } }

/* ── Old clinic.css components on the dark theme (pages without a mockup) ── */
body.codex .crumbs, body.codex .crumbs a { color: var(--text-muted); font: 700 11px var(--font-sans); text-transform: uppercase; letter-spacing: .07em; }
body.codex .crumbs .here { color: var(--text-2); }
body.codex .crumbs a { color: var(--accent); text-decoration: none; }
body.codex .crumbs a:hover, body.codex .crumbs a:focus-visible { text-decoration: underline; }
body.codex .page-head h3 { font-size: 30px; font-weight: 700; letter-spacing: var(--heading-tracking); margin: 0; }
body.codex .card-head { border-bottom: 1px solid var(--border); background: transparent; }
body.codex .card-head .title { color: var(--text); font-weight: 600; }
body.codex .tbl th { color: var(--text-dim); font: 700 11px var(--font-sans); text-transform: uppercase; letter-spacing: .07em; background: transparent; border-color: var(--border); }
body.codex .tbl td { border-color: var(--row-divider); color: var(--text-2); }
body.codex .tbl tbody tr:hover td { background: var(--hover-row); }

/* Sortable result tables (table[data-sortable], public/js/codex.js): a button inside each sortable <th>, with an
   arrow that reflects the th's aria-sort (none/ascending/descending). Text-only header cells (route links, etc.)
   opt out with data-nosort and get no button. */
body.codex .tbl th[aria-sort] { padding: 0; }
body.codex .sort-btn { display: flex; align-items: center; gap: 6px; width: 100%; height: 44px; padding: 0 14px; background: none; border: none;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
body.codex .sort-btn:hover, body.codex .sort-btn:focus-visible { color: var(--text-2); }
body.codex .sort-arrow { width: 9px; height: 9px; flex-shrink: 0; opacity: .4; }
body.codex .sort-arrow::before { content: "⇕"; font-size: 10px; line-height: 1; }
body.codex .tbl th[aria-sort="ascending"], body.codex .tbl th[aria-sort="descending"] { color: var(--accent-strong); }
body.codex .tbl th[aria-sort="ascending"] .sort-arrow, body.codex .tbl th[aria-sort="descending"] .sort-arrow { opacity: 1; color: var(--accent-strong); }
body.codex .tbl th[aria-sort="ascending"] .sort-arrow::before { content: "▲"; }
body.codex .tbl th[aria-sort="descending"] .sort-arrow::before { content: "▼"; }
body.codex .btn { background: var(--btn-out-bg); border: 1.5px solid var(--btn-out-border); color: var(--text); border-radius: var(--r-pill); font-weight: 650; }
body.codex .btn:hover { background: var(--btn-out-hover); color: var(--text); }
body.codex .btn.btn-primary { background: var(--grad); color: var(--accent-ink); border-color: transparent; box-shadow: var(--glow-accent); }
body.codex .btn.btn-primary:hover { filter: brightness(1.06); }
body.codex .btn.btn-outline { border-color: var(--accent-line); color: var(--accent-strong); }
body.codex .btn.btn-default { border-color: var(--border-strong); color: var(--text-2); }
body.codex .btn.btn-ok, body.codex .btn.btn-solid-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
body.codex .btn.btn-danger, body.codex .btn.btn-solid-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-text); }
body.codex .btn.btn-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
body.codex .badge { background: var(--surface-hover); color: var(--text-2); border: 1px solid var(--border-strong); }
body.codex .badge-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
body.codex .badge-warn { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-line); }
body.codex .badge-err, body.codex .badge-live { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger-line); }
body.codex .badge-accent { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-line); }
body.codex .badge-neutral { background: var(--surface-hover); color: var(--text-2); border-color: var(--border-strong); }
body.codex .alert { border-radius: var(--r-lg); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); }
body.codex .alert-err { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-text); }
body.codex .alert-warn { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn-text); }
body.codex .alert-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
body.codex .alert-info { background: var(--info-bg); border-color: var(--info-line); color: var(--info-text); }
body.codex .bucket { background: var(--surface-2); border-color: var(--border); border-left-color: var(--border-strong); }
body.codex .bucket .v { color: var(--text); }
body.codex .bucket .l { color: var(--text-muted); }
body.codex .bucket.b-ok { border-left-color: var(--ok-dot); } body.codex .bucket.b-ok .v { color: var(--ok); }
body.codex .bucket.b-warn { border-left-color: var(--warn); } body.codex .bucket.b-warn .v { color: var(--warn-text); }
body.codex .bucket.b-err { border-left-color: var(--danger); } body.codex .bucket.b-err .v { color: var(--danger-text); }
body.codex .bucket.b-accent { border-left-color: var(--accent); } body.codex .bucket.b-accent .v { color: var(--accent-strong); }
body.codex .bucket.on { background: var(--accent-soft); border-color: var(--accent); }
body.codex pre.json, body.codex .evidence { background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); border-radius: var(--r-md); }
body.codex .editor { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); }
body.codex mark.hl-behaviors { background: var(--info-bg); color: var(--info-text); }
body.codex mark.hl-interventions { background: var(--ok-bg); color: var(--ok); }
body.codex mark.hl-replacements { background: var(--warn-soft); color: var(--warn-text); }
body.codex mark.hl-forbidden { background: var(--danger-soft); color: var(--danger-text); }
body.codex .choice { background: var(--surface-3); border-color: var(--border-strong); color: var(--text-2); }
body.codex .choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
body.codex .formcard input[type=text], body.codex .formcard input[type=number], body.codex .formcard input[type=date], body.codex .formcard input[type=email],
body.codex .formcard input[type=password], body.codex .formcard input[type=url], body.codex .formcard input[type=month], body.codex .formcard select, body.codex .formcard textarea {
  background: var(--surface-3); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); }
body.codex .formcard input:focus, body.codex .formcard select:focus, body.codex .formcard textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
body.codex .rev-card, body.codex .rev-event-card, body.codex .rev-abc-cell, body.codex .issue, body.codex .wa-side, body.codex .wa-main, body.codex .wa-item { background: var(--surface-2); border-color: var(--border); color: var(--text-2); }
body.codex .kv dt { color: var(--text-muted); } body.codex .kv dd { color: var(--text-2); }
body.codex .agencytab { background: var(--surface-2); border-color: var(--border); color: var(--text-2); }
body.codex .agencytab.on { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); }

/* Fixed-count grids that collapse on smaller screens */
.codex .kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.codex .kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.codex .kpis.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.codex .dash-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.codex .tiles.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.codex .tiles.t4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .codex .kpis.k5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .codex .dash-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .codex .kpis.k3, .codex .kpis.k4, .codex .kpis.k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .codex .tiles.t3, .codex .tiles.t4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .codex .radio-cards { grid-template-columns: 1fr; }
  .codex .page-header { flex-direction: column; align-items: stretch; }
  .codex .page-header .actions { flex-wrap: wrap; }
  .codex main.main { padding: 20px 16px; }
}
.codex select.input, .codex .field select { min-width: 0; max-width: 100%; width: 100%; }
.codex .doc-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .codex .doc-grid { grid-template-columns: minmax(0,2fr) minmax(0,5fr) minmax(0,3fr); } }
/* A note without an AI review (no-AI run, blocked terms…) has nothing in the review column: hide it and give the
   note its width instead of leaving a blank strip. */
.codex .doc-grid:not(:has(.doc-col-review > .doc-sticky > *)) > .doc-col-review { display: none; }
@media (min-width: 1200px) { .codex .doc-grid:not(:has(.doc-col-review > .doc-sticky > *)) { grid-template-columns: minmax(0,7fr) minmax(0,3fr); } }

/* Top-right bar on every page: Run, language, light/dark mode. It sits in the page header's row; the first block
   of the page keeps clear of it. Below 720px it becomes a normal row above the page. */
.codex main.main { position: relative; }
.codex .util-bar { position: absolute; top: 28px; right: 36px; z-index: 5; display: flex; align-items: center; gap: 10px; }
/* Clear the top-right bar on the title row only: pages that wrap everything in [data-filter-root] pad its first child */
.codex main.main > .util-bar + :not([data-filter-root]), .codex main.main > .util-bar + [data-filter-root] > :first-child { padding-right: 250px; }
.codex .util-bar .btn-primary { height: 36px; padding: 0 16px; }
.codex .util-bar .btn-icon { width: 36px; height: 36px; }
.codex .lang-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-3); }
.codex .lang-switch a { text-align: center; padding: 5px 9px; border-radius: var(--r-sm); font: 700 11px var(--font-sans); letter-spacing: .04em; color: var(--text-muted); text-decoration: none; }
.codex .lang-switch a:hover { color: var(--text-2); }
.codex .lang-switch a[aria-current="true"] { background: var(--seg-on); color: var(--text); box-shadow: var(--seg-on-shadow); }
.codex .lang-switch.login { margin: 0 auto; }
.codex .lang-switch.login a { font: 500 12px var(--font-sans); padding: 4px 12px; }
.codex .theme-toggle .ico-moon { display: none; }
html[data-theme="dark"] .codex .theme-toggle .ico-moon { display: block; }
html[data-theme="dark"] .codex .theme-toggle .ico-sun { display: none; }
.codex .login-tools { display: flex; align-items: center; justify-content: center; gap: 10px; }
.codex .login-tools .lang-switch.login { margin: 0; }
@media (max-width: 1023px) { .codex .util-bar { top: 24px; right: 24px; } }
@media (max-width: 719px) {
  .codex .util-bar { position: static; justify-content: flex-end; }
  .codex main.main > .util-bar + :not([data-filter-root]), .codex main.main > .util-bar + [data-filter-root] > :first-child { padding-right: 0; }
}
.codex .linkbtn { background: none; border: none; padding: 0; font: inherit; color: var(--accent-strong); cursor: pointer; }
.codex .linkbtn.danger { color: var(--danger); }
.codex .text-err { color: var(--danger); }
.codex .linkbtn:disabled { color: var(--text-dim); cursor: not-allowed; }
/* Agencies list: icon before the name when something is missing (lib/agency_health.js); popover on hover or tap */
.codex .agency-name { display: inline-flex; align-items: center; gap: 8px; }
.codex .agency-flag { position: relative; width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid transparent; padding: 0; font-size: 12px; line-height: 1; cursor: help; }
.codex .agency-flag.err { color: var(--danger-text); background: var(--danger-soft); border-color: var(--danger-border); }
.codex .agency-flag.warn { color: var(--warn-text); background: var(--warn-soft); border-color: var(--warn-border); }
.codex .agency-flag.off { color: var(--text-dim); background: transparent; border-color: var(--border-strong); }
.codex .agency-flag .flag-tip { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 240px; max-width: 320px;
  padding: 10px 12px; border-radius: var(--r-md, 8px); border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,.35); text-align: left; font-size: 12px; line-height: 1.45; white-space: normal; cursor: default; }
.codex .agency-flag:hover .flag-tip, .codex .agency-flag:focus .flag-tip, .codex .agency-flag:focus-within .flag-tip { display: block; }
.codex .flag-tip ul, .codex .agency-issues { margin: 6px 0 0; padding-left: 18px; }
.codex .flag-tip li.err, .codex .agency-issues li.err { color: var(--danger-text); }
.codex .flag-tip li.warn, .codex .agency-issues li.warn { color: var(--warn-text); }
/* Full-width forms: fields side by side on wide screens (tool launch = 3 columns, config edit = 2), one column on phones */
.codex .form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
.codex .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.codex .form-grid > .span-2 { grid-column: span 2; }
.codex .form-grid > .span-full { grid-column: 1 / -1; }
.codex .form-grid > .field, .codex .form-grid > div { min-width: 0; }
@media (max-width: 1180px) { .codex .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .codex .form-grid, .codex .form-grid.two { grid-template-columns: 1fr; } .codex .form-grid > .span-2 { grid-column: auto; } }
/* Agency picker (partials/agency_picker.ejs): avatar + dropdown, what the chosen agency is missing below it */
.codex .agency-picker-row { display: flex; align-items: center; gap: 12px; }
.codex .agency-picker-row select { flex: 1; min-width: 0; }
.codex .agency-picker.lg select { height: 52px; }
.codex .agency-picker-issues { margin-top: 10px; font-size: 12.5px; }
.codex .agency-picker-issues[hidden] { display: none; }
/* Several agencies: a dropdown with search and checkboxes */
.codex .agency-multi { position: relative; }
.codex .agency-multi > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.codex .agency-multi > summary::-webkit-details-marker { display: none; }
.codex .agency-multi > summary::after { content: "▾"; color: var(--text-muted); margin-left: 8px; }
.codex .agency-multi[open] > summary::after { content: "▴"; }
.codex .agency-multi-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 10px; border-radius: var(--r-lg);
  border: 1px solid var(--border-strong); background: var(--surface-3); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.codex .agency-multi-list { max-height: 320px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.codex .agency-multi-list .checkline { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); }
.codex .agency-multi-list .checkline:hover { background: var(--surface-hover); }
.codex .agency-multi-list .checkline > span:first-of-type { flex: 1; }
.codex .client-multi-disabled { color: var(--text-muted); cursor: not-allowed; }
.codex .client-filter .agency-multi-list { max-height: 320px; overflow: auto; }
.codex .agency-multi-list .checkline[hidden] { display: none; }
.codex .agency-picker-issues > b, .codex .alert > b + .agency-issues { display: block; }
.codex .agency-picker-issues > b { margin-bottom: 2px; }
/* .card clips its content (clinic.css); let the agency dropdown and the ⚠ popovers overflow it */
.codex .card:has(.agency-multi), .codex .card:has(.agency-flag) { overflow: visible; }
.codex .agency-multi-list .checkline > .agency-flag { flex: 0 0 20px; width: 20px; }
.codex .agency-picker-issues:not([hidden]), .codex .alert:has(> .agency-issues) { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
/* Secret fields (config forms): show/hide button inside the input; "saved" / "not set" tag in the label */
.codex .secret-input { position: relative; }
.codex .secret-input .input { padding-right: 48px; }
.codex .secret-reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 32px; border: none; border-radius: var(--r-md);
  background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.codex .secret-reveal:hover { color: var(--text); background: var(--surface-hover); }
.codex .secret-reveal .slash { display: none; }
.codex .secret-reveal[aria-pressed="true"] { color: var(--accent-strong); }
.codex .secret-reveal[aria-pressed="true"] .slash { display: inline; }
.codex .tag.secret-state { margin-left: 6px; vertical-align: 1px; }
.codex .tag.secret-state.ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
/* Tool page (views/tools/launch.ejs, skill_launch.ejs): one compact launch bar that wraps, help in ⓘ tooltips,
   then the latest run (_tool_results.ejs). Colors from tokens only. */
.codex .launch-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 16px; padding: 16px 18px; overflow: visible; }
.codex .launch-bar .lb-field { flex: 1 1 170px; min-width: 150px; display: flex; flex-direction: column; gap: 6px; }
.codex .launch-bar .lb-field.agency { flex: 2 1 260px; }
.codex .launch-bar .lb-field.wide { flex: 2 1 280px; }
.codex .launch-bar .lb-field.date { flex: 0 1 170px; }
.codex .launch-bar .lb-field.narrow { flex: 0 1 140px; min-width: 120px; }
.codex .launch-bar .lb-actions { flex: 0 0 auto; min-width: 0; }
.codex .launch-bar .lb-full { flex: 1 1 100%; }
.codex .launch-bar .lb-label { display: flex; align-items: center; gap: 6px; min-height: 20px; font: 13px var(--font-sans); color: var(--text-2); }
.codex .launch-bar .lb-label > label, .codex .launch-bar .lb-label > .field-label { font: 13px var(--font-sans); color: var(--text-2); text-transform: none; letter-spacing: 0; }
/* Labels stay on one line so every box in the bar starts at the same height (a wrapped label pushed its box down);
   short fields (dates, numbers) grow to fit their label, longer labels in wider fields end in "…" (full text in ⓘ). */
.codex .launch-bar .lb-label { white-space: nowrap; min-width: 0; }
.codex .launch-bar .lb-label > label, .codex .launch-bar .lb-label > .field-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.codex .launch-bar .lb-field.date, .codex .launch-bar .lb-field.narrow { min-width: max-content; }
.codex .launch-bar .lb-check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.codex .launch-bar .lb-note { height: 44px; min-height: 44px; resize: vertical; }
.codex .launch-bar .lb-err { font-size: 12px; color: var(--danger-text); }
.codex .launch-bar .agency-picker-issues { margin-top: 6px; }
/* Tools → Revisión de notas (tools/note_review.ejs): the options fold and the launch buttons row. */
.codex .launch-bar .nr-options > summary { cursor: pointer; font: 13px var(--font-sans); color: var(--text-2); }
.codex .launch-bar .nr-options[open] > summary { margin-bottom: 8px; }
.codex .launch-bar .nr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.codex .tool-result #nr-tiles { margin-top: 4px; }
.codex .help-tip { position: relative; display: inline-flex; }
.codex .help-tip-btn { width: 20px; height: 20px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface-3);
  color: var(--text-muted); font-size: 12px; line-height: 1; cursor: help; display: inline-flex; align-items: center; justify-content: center; }
.codex .help-tip-btn:hover, .codex .help-tip-btn:focus-visible { color: var(--accent-strong); border-color: var(--accent-strong); }
.codex .help-tip-text { display: none; position: absolute; left: -8px; top: calc(100% + 6px); z-index: 40; width: max-content; max-width: min(320px, calc(100vw - 32px));
  padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--text);
  box-shadow: var(--shadow-pop); font-size: 12px; line-height: 1.45; white-space: normal; text-transform: none; letter-spacing: 0; }
/* Would pass the viewport's right edge (public/js/codex.js placeTip): open leftwards from the ⓘ instead */
.codex .help-tip.flip .help-tip-text { left: auto; right: -8px; }
.codex .help-tip:hover .help-tip-text, .codex .help-tip-btn:focus-visible + .help-tip-text, .codex .help-tip.open .help-tip-text { display: block; }
.codex .help-tip.dismissed .help-tip-text { display: none; }
/* ⚙ settings (settings_generic.ejs): a setting the shown level's mode doesn't read — greyed, still editable; the summary card */
.codex tr.setting-muted td { background: var(--surface-3); color: var(--text-muted); }
.codex tr.setting-muted td b { color: var(--text-muted); font-weight: 600; }
.codex .settings-summary { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-2); }
.codex .tool-result .panel-head .who-cell { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.codex .tool-result-switch { display: flex; align-items: center; gap: 8px; }
.codex .tool-result-switch select { height: 36px; min-width: 200px; width: auto; }
.codex .tool-result-body { padding: 16px 22px 6px; }
.codex .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Tool page title line (2026-09-28): title + ⓘ (description) + ⚙ Settings, one row that wraps. */
.codex .page-head.tool-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.codex .page-head.tool-title h3 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.codex .page-head.tool-title .tool-title-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.codex .tool-runs-panel .tool-runs-foot { padding: 8px 10px 2px; text-align: right; }
.codex .tool-runs-panel .tool-runs-foot .more { margin-left: 0; }
/* Latest-run compact header line (2026-09-28), replacing the big status box + facts card on the tool page only
   (tools/_task_status.ejs, compact mode); the task page keeps the fuller .facts card. */
.codex .task-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--text-2); }
.codex .task-line .sep { color: var(--text-dim); }
/* In the "Última corrida" header, the run line sits on the right of the agency (wraps below it on narrow screens). */
.codex .tool-result .panel-head .task-line { margin-left: auto; justify-content: flex-end; }
.codex .task-line .more { margin-left: auto; font-size: 13px; color: var(--accent-strong); text-decoration: none; }
/* Panel-head trailing group (2026-09-28): the persistent "Ver historial" link and the "Corridas anteriores"
   popover sit together at the end of the header, pushed right as one unit. */
.codex .panel-head-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.codex .panel-head-actions .more { margin-left: 0; }
/* "Corridas anteriores (N)" popover (tools/_tool_runs.ejs), in the results panel header. */
.codex .tool-runs-pop { position: relative; display: inline-flex; }
.codex .tool-runs-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; width: 460px; max-width: min(460px, calc(100vw - 32px));
  background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 10px; }
.codex .tool-runs-panel[hidden] { display: none; }
.codex .tool-runs-panel:focus { outline: none; }
.codex .tool-runs-panel .dtable td, .codex .tool-runs-panel .dtable th { padding: 0 10px; height: 40px; }
/* Page actions in the top-right bar (jobs/_top_actions.ejs): report menu + filtered-export modal. */
.codex .util-bar .util-action { height: 36px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.codex .pop-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; background: var(--surface-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 8px; }
.codex .pop-panel[hidden] { display: none; }
.codex .pop-panel:focus { outline: none; }
/* Document page score (views/documents/detail.ejs): the "why this score" breakdown opens on hover/focus and stays
   open on click (popover behaviour: public/js/codex.js [data-popover]); the card lets it overflow. */
.codex .card:has(.score-pop) { overflow: visible; }
.codex .score-pop .score-btn { display: inline-flex; align-items: flex-start; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.codex .score-pop .score-why-hint { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.codex .score-pop:not(.pop-dismissed):hover .pop-panel[hidden], .codex .score-pop:not(.pop-dismissed):focus-within .pop-panel[hidden] { display: block; }
/* Anchored to the score's left edge (the score sits at the left of the header: right-anchored it ran off-screen). */
.codex .score-panel { left: 0; right: auto; width: 380px; max-width: calc(100vw - 32px); padding: 14px 16px; text-align: left; }
/* A transparent bridge over the 8px gap so moving the pointer from the score to the panel keeps it open. */
.codex .score-pop .score-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.codex .score-panel .score-panel-title { font-weight: 700; margin-bottom: 10px; }
/* Score + CPT in the document top bar (2026-09-28): a compact score next to the name; the popover explains the note's
   deductions and the scoring rules. */
.codex .docbar-main { flex: 1; justify-content: center; }
.codex .docbar-main .score .n { font-size: 22px; }
.codex .docbar-main .score .max { font-size: 11px; }
.codex .score-panel { width: 460px; }
.codex .score-panel .score-rules .tbl td { padding: 5px 6px; font-size: 12.5px; vertical-align: top; }
/* Final review (2026-09-29): on phones the popover held the whole breakdown plus both rules tables, taller than the
   viewport, so today's "Cómo se calcula el score" rules were unreachable. Cap the height and let it scroll on any
   screen size; the phone media rule below also pins it inside the viewport instead of letting it grow past it. */
.codex .score-panel { max-height: min(80vh, 640px); overflow-y: auto; }
/* Document page header (views/documents/detail.ejs): line 1 = status, score, consistency, facts; line 2 = actions. */
.codex .doc-head-line { align-items: center; }
.codex .doc-head-score { display: inline-flex; align-items: center; gap: 8px; }
.codex .doc-head-score .score .n { font-size: 30px; line-height: 1; }
.codex .doc-head-score .score-now { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.codex .doc-head-score .score-now[hidden] { display: none; }
.codex .doc-head-consistency { font-weight: 600; }
.codex .doc-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-left: auto; font-size: 12.5px; color: var(--text-2); }
.codex .doc-facts .sep { color: var(--text-dim); }
.codex .doc-head-actions { margin-top: 12px; }
.codex .doc-head-actions .btn, .codex .doc-head-actions .btn-danger { width: auto; height: 34px; padding: 0 14px; font-size: 13px; }
@media (max-width: 719px) { .codex .score-panel { position: fixed; left: 16px; right: 16px; top: 72px; bottom: 16px; width: auto; overflow-y: auto; } }
.codex .menu-panel { width: 260px; }
.codex .menu-panel .menu-hint { padding: 4px 8px 8px; }
.codex .menu-panel .menu-item { display: block; padding: 8px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: 14px; }
.codex .menu-panel .menu-item:hover, .codex .menu-panel .menu-item:focus { background: var(--surface-hover); outline: none; }
.codex dialog.modal { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.codex dialog.modal::backdrop { background: var(--modal-backdrop, rgba(23,41,77,.45)); }
.codex dialog.modal .modal-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--surface); border-bottom: 1px solid var(--border); }
.codex dialog.modal .modal-head .title { font-weight: 700; }
.codex dialog.modal .modal-close { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; }
.codex dialog.modal .modal-body { padding: 18px; }
@media (max-width: 719px) {
  .codex .launch-bar .lb-field, .codex .launch-bar .lb-field.date, .codex .launch-bar .lb-field.narrow { flex: 1 1 100%; }
  .codex .launch-bar .lb-actions > .lb-label { display: none; }
  .codex .launch-bar .lb-actions .btn { width: 100%; }
  .codex .tool-result-body { padding: 12px 12px 4px; }
  .codex .tool-runs-panel { position: fixed; left: 16px; right: 16px; top: auto; width: auto; max-width: none; }
  .codex .util-bar .util-action-label { display: none; }
  .codex dialog.modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
}

/* Target charts (src/lib/charts.js): SVG styled by class with theme tokens, so light and dark both work. */
.codex svg.chart { width: 100%; height: auto; max-width: 560px; display: block; }
.codex svg.chart .ch-title { font: 600 12px var(--font-sans); fill: var(--text); }
.codex svg.chart .ch-tick { font: 10px var(--font-sans); fill: var(--text-dim); }
.codex svg.chart .ch-grid { stroke: var(--border); stroke-width: 1; }
.codex svg.chart .ch-line { fill: none; stroke: var(--accent-strong); stroke-width: 2; }
.codex svg.chart .ch-pt { fill: var(--accent-strong); }
.codex svg.chart .ch-pt.ch-base { fill: none; stroke: var(--warn); stroke-width: 2; }
.codex svg.chart .ch-sto { stroke: var(--text-dim); stroke-dasharray: 4 3; }
.codex svg.chart .ch-sto-label { font: 10px var(--font-sans); fill: var(--text-dim); }
.codex svg.chart .ch-empty { font: 12px var(--font-sans); fill: var(--text-dim); }
.codex .chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }

/* Buttons of one table row side by side (clients list: Portal + Add/Edit; a form among them stays inline). */
.codex .row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.codex .row-actions form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }