/* ============================================================================
   Nighthawk v2 — Titan-light skin (R1, 2026-07-25, Akshay-approved mockup).
   Loads AFTER styles.css: overrides the dark console theme's tokens + the
   handful of components that hardcode dark colors, and adds the v2 shell
   (rail / topbar / HUD), Dashboard and Mission-sentence components.
   v1 renderers keep their markup — this layer only re-dresses them.
   ========================================================================== */
/* ---------------------------------------------------------------------------
   TITAN DESIGN SYSTEM — exact tokens from TitanSidekick_Extended_UI_Wireframes
   v1.0 (2026-06-29). The v2 skin had been eyeballed from a mockup and every
   value was a near-miss (red C8102E vs EE2E24, ink 16212B vs 1F2933, line
   E2E7EA vs E2E8F0, Segoe/Georgia vs Calibri/Cambria). These are the deck's.

   ⚠️ THE ONE DELIBERATE DEVIATION. Measured against the deck's OWN bar (slide 2:
   text ≥ 4.5:1), three brand colours fail as TEXT on a light background:
        brand red #EE2E24 → 4.16:1     gold #C9962E → 2.66:1     blue #538DD5 → 3.42:1
   In the deck they are fills, dots and focus outlines — never body text. So the
   brand hex is kept for those roles, and a darker sibling of the SAME hue is
   used wherever the colour becomes text or a button fill. Matching the hex
   exactly on text would break the deck's own accessibility rule.
   --------------------------------------------------------------------------- */
:root {
  --on-accent: #FFFFFF;        /* text ON the primary fill — flips in dark */
  --red: #EE2E24;              /* brand · fills, dots, rules — UI only (4.16:1) */
  --red-ink: #B81D15;          /* same hue, legible as text (6.51:1) */
  --red-glow: rgba(238, 46, 36, .18);
  --navy: #213840;
  --slate: #3A5260;
  --grey: #55636E;             /* muted TEXT — 6.18:1 white / 5.86:1 on bg0 */
  --grey-soft: #64748B;        /* the deck's muted, for dividers + non-text */
  --bg0: #F4F6F8;
  --bg1: #FFFFFF;
  --bg-soft: #F7F9FB;
  --ink: #1F2933;
  --ink-dim: #55636E;          /* was #66737F = 4.48:1 on the grey bg — FAILED */
  --panel: #FFFFFF;
  --panel-strong: #FFFFFF;
  --line: #E2E8F0;
  --line-strong: #CBD2D9;
  --ok: #177A48;
  --warn: #C9962E;             /* gold · dots + fills only (2.66:1 — never text) */
  --warn-ink: #8A6410;         /* gold as text (5.37:1) — was #B57A08 at 3.65 FAIL */
  --font: Calibri, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --serif: Cambria, Georgia, 'Times New Roman', serif;
  --mono: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;
  --accent: #538DD5;           /* focus outline · the deck's "blue = focusable" */
  --accent-ink: #2E64A8;       /* same blue as text or a button fill (5.99:1) */
  --rail: #101820;
  --rail-ink: #93A1AD;
  --rail-line: #1E2A34;
  --good-bg: #E7F4EC;
  --warn-bg: #FCF3DF;
  --crit: #B03028;
  --crit-bg: #FDECEA;
  --navy-bg: #E9EEF5;
  --radius: 4px;
}

body { background: var(--bg0); color: var(--ink); font-size: 14px; }
body::before { display: none; }               /* kill the dark grid overlay */

input, select, textarea {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 3px; padding: 7px 10px; font-size: 13px;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(83,141,213,.28); }
input::placeholder, textarea::placeholder { color: #A5AEB6; }
select option { background: var(--surface); color: var(--ink); }
label { color: var(--grey); }

/* ---------- re-dressed atoms (v1 markup, v2 skin) ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: none; }
.card .card { box-shadow: none; }
/* the deck sets its § section labels in brand red — restored, at the legible tint */
.seclabel { color: var(--red-ink); }
.muted { color: var(--grey); }
.btn { border-radius: 3px; font-weight: 600; }
/* white on the deck blue #538DD5 is only 3.42:1 — the primary CTA uses the darker sibling (5.99:1). */
.btn-red { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent); }
.btn-red:hover { background: #24548C; }
.btn-slate { background: var(--rail); border-color: var(--rail); color: #fff; }
.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-ghost { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: #B9C2C9; }
.chip { border-radius: 3px; border: 1px solid var(--line); background: var(--surface-2); color: var(--grey); }
.chip.ok { background: var(--good-bg); color: var(--ok); border-color: #CBE5D5; }
.chip.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: #EDD9A8; }
.chip.navy { background: var(--navy-bg); color: var(--navy); border-color: #C9D4E8; }
.chip.red { background: var(--crit-bg); color: var(--crit); border-color: #EEC7C3; }
.chip.mono { font-family: var(--mono); }
table.t thead th, .t thead th { background: var(--rail); color: #CFD8DF; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.t td { border-bottom: 1px solid var(--line); }
.t tr:hover td { background: var(--surface-2); }
.tr-tabs button { background: var(--surface); border: 1px solid var(--line); color: var(--grey); border-radius: 3px; }
.tr-tabs button.active { background: var(--rail); border-color: var(--rail); color: #fff; }
.callout { background: var(--info-bg); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; }
.toast { background: var(--rail); color: #fff; border-radius: 4px; }
.settings-panel .card { background: var(--surface); }
.appfoot { color: #9AA6AE; font-size: 10px; letter-spacing: .12em; text-align: center; padding: 12px 0 18px; }
.appfoot .mid { margin: 0 14px; }
h2 { font-size: 19px; } h3 { font-size: 15px; }
.pipe-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; }
.pipe-head h2 { margin: 0; }

/* ---------- v2 shell ---------- */
.shell2 { display: flex; min-height: 100vh; }
.rail2 { width: 210px; flex: none; background: var(--rail); color: var(--rail-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 5; }
.rail2-brand { display: flex; align-items: center; gap: 8px; padding: 16px 16px 14px; border-bottom: 1px solid var(--rail-line); }
.rail2-brand .hawk { font-size: 16px; }
.rail2-brand b { color: #fff; letter-spacing: .14em; font-size: 13px; font-weight: 600; }
.rail2-nav { padding: 12px 0 8px; overflow: auto; flex: 1; }
.rail2-nav h6 { margin: 14px 16px 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .22em; color: #5D6B77; }
.rail2-nav a { display: flex; align-items: center; gap: 8px; padding: 8px 16px; color: var(--rail-ink); text-decoration: none; font-size: 13px; border-left: 3px solid transparent; cursor: pointer; }
.rail2-nav a:hover { color: #fff; background: #16222C; }
.rail2-nav a.on { color: #fff; background: #182633; border-left-color: #EE2E24; }
.rail2-foot { padding: 12px 16px; border-top: 1px solid var(--rail-line); font-size: 10.5px; color: #5D6B77; }
.main2 { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar2 { height: 46px; background: var(--rail); color: #C7D1D9; display: flex; align-items: center; gap: 12px; padding: 0 18px; font-size: 12px; }
.topbar2 .tag2 { color: #8FA3AB; font-style: italic; font-family: var(--serif); }
.topbar2 .uchip { color: #C7D1D9; font-size: 12px; }
.topbar2 .btn-ghost { background: transparent; border-color: #2A3945; color: #C7D1D9; }
.topbar2 .btn-ghost:hover { border-color: #46586A; color: #fff; }
.toplogo2 { height: 22px; background: var(--surface); padding: 3px 8px; border-radius: 3px; }
.hud2 { display: flex; align-items: center; gap: 18px; background: var(--surface); border-bottom: 1px solid var(--line); padding: 7px 22px; font-size: 11.5px; color: var(--grey); flex-wrap: wrap; }
.hud2 b { color: var(--ink); font-weight: 650; }
.hud2 .sp { flex: 1; }
/* Status by SHAPE + colour, never colour alone (deck slide 28 rule 1 / WCAG
   1.4.1). The HUD used to say "● Claude" in green or red — identical to anyone
   who cannot separate the two hues. Now the glyph itself differs, exactly as the
   deck's own connections console does: ● healthy · ▲ degraded · ○ not connected.
   A visually-hidden word carries the same state to a screen reader. */
.dot2 { display: inline-block; margin-right: 5px; font-size: 11px; line-height: 1; font-style: normal; }
.dot2.g { color: #157A47; } .dot2.g::before { content: "\25CF"; }   /* ● filled  */
.dot2.a { color: var(--warn-ink); } .dot2.a::before { content: "\25B2"; } /* ▲ triangle */
.dot2.r { color: var(--crit); } .dot2.r::before { content: "\25CB"; }     /* ○ hollow  */
.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; }
#main { flex: 1; padding: 18px 22px 30px; max-width: 1220px; width: 100%; }
#settings-panel, #pw-panel { padding: 14px 22px 0; }

/* ---------- login (v2 light) ---------- */
#login-view { min-height: 100vh; background: var(--bg0); }
.lg2-wrap { display: flex; min-height: 100vh; align-items: stretch; }
.lg2-brand { flex: 1.2; background: var(--rail); color: #C7D1D9; padding: 60px 56px; display: flex; flex-direction: column; justify-content: center; }
.lg2-logo { height: 30px; background: var(--surface); padding: 5px 10px; border-radius: 3px; align-self: flex-start; }
.lg2-brand h1 { color: #fff; font-size: 30px; margin: 22px 0 4px; }
.lg2-tag { font-family: var(--serif); font-style: italic; color: #8FA3AB; margin: 0 0 14px; }
.lg2-lead { max-width: 52ch; font-size: 14px; line-height: 1.6; }
.lg2-points div { margin: 10px 0; font-size: 13px; }
.lg2-points b { color: #fff; }
.login-form-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 28px; width: 360px; box-shadow: 0 8px 30px rgba(16,24,32,.08); }
.login-card h2 { margin: 0 0 4px; }
.login-card .sub { color: var(--grey); font-size: 12.5px; margin-bottom: 16px; }
@media (max-width: 860px) { .lg2-brand { display: none; } }

/* ---------- dashboard ---------- */
.kpis2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi2 .l { font-size: 11px; color: var(--grey); letter-spacing: .05em; }
.kpi2 .v { font-family: var(--serif); font-size: 24px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi2 .d { font-size: 11.5px; margin-top: 3px; color: var(--grey); }
.kpi2 .d b.up { color: var(--ok); } .kpi2 .d b.dn { color: var(--crit); }
.brief2g { display: grid; grid-template-columns: 1.7fr 1fr; gap: 12px; }
.funnel2 { display: flex; gap: 3px; margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; flex-wrap: wrap; }
.funnel2 span { background: var(--navy-bg); color: var(--navy); font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 2px; white-space: nowrap; }
.funnel2 span.hot { background: var(--good-bg); color: var(--ok); }
.mtiles2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mtile2 .big { font-family: var(--serif); font-size: 24px; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.mtile2 .big small { font-size: 13px; color: var(--grey); font-family: var(--font); }
.bar2 { height: 7px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.bar2 i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.bar2.g i { background: var(--ok); }
.pill2 { display: inline-block; border-radius: 3px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.pill2.ok { background: var(--good-bg); color: var(--ok); }
.pill2.warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill2.crit { background: var(--crit-bg); color: var(--crit); }
.pill2.mut { background: var(--surface-2); color: var(--grey); }
.pill2.navy { background: var(--navy-bg); color: var(--navy); }
.pill2.red { background: var(--crit-bg); color: var(--crit); }
.owner2 { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 3px; padding: 2px 8px; font-size: 11.5px; }
.owner2 .av { width: 18px; height: 18px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; }

/* ---------- mission sentence cards ---------- */
.mission2 { margin-bottom: 12px; }
.sentence2 { font-size: 15px; line-height: 2.15; font-family: var(--serif); }
.tok2 { display: inline-block; border: 1px solid #C9D4E8; background: var(--info-bg); color: var(--navy); border-radius: 3px; padding: 0 9px; font-family: var(--font); font-size: 13px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.tok2:hover { border-color: var(--accent); box-shadow: 0 0 0 2px #DCE6F8; }
.tok2::after { content: " ▾"; font-size: 9px; color: var(--grey); }
.tok2.open { background: var(--navy); color: #fff; }
.med2 { border: 1px solid #C9D4E8; background: var(--surface-2); border-radius: 4px; padding: 12px 14px; margin-top: 10px; }
.med2 h6 { margin: 0 0 8px; font-size: 10px; letter-spacing: .14em; color: var(--grey); }
.med2 .hint { font-size: 11px; color: var(--grey); margin-top: 8px; }
.st2 { display: inline-block; border: 1px solid var(--line); background: var(--surface); color: var(--grey); border-radius: 12px; padding: 3px 11px; font-size: 12px; font-weight: 600; cursor: pointer; margin: 0 5px 6px 0; user-select: none; }
.st2.p1 { background: var(--navy); border-color: var(--navy); color: #fff; }
.st2.p2 { background: var(--navy-bg); border-color: #B9C9E2; color: var(--navy); }
.st2 .b { font-size: 9px; opacity: .75; margin-left: 4px; }
.orderline2 { font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 7px 10px; margin-top: 6px; }
.stepper2 { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; vertical-align: middle; }
.stepper2 b { padding: 4px 14px; font-family: var(--serif); font-size: 15px; background: var(--surface); font-variant-numeric: tabular-nums; }
.stepper2 button { border: none; background: var(--surface-2); width: 26px; cursor: pointer; font-size: 14px; color: var(--grey); }
.qa2 { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.qa2 p { margin: 4px 0; font-size: 12.5px; }
.qa2 b.q { color: var(--grey); font-weight: 650; font-size: 11px; letter-spacing: .06em; }
.switch2 { position: relative; width: 34px; height: 19px; background: #CFD6DB; border-radius: 10px; cursor: pointer; flex: none; display: inline-block; vertical-align: middle; }
.switch2.on { background: var(--ok); }
.switch2 i { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface); transition: left .15s; }
.switch2.on i { left: 17px; }
.seg2 { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.seg2 button { border: none; background: var(--surface); padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--grey); }
.seg2 button.on { background: var(--rail); color: #fff; }
.row2 { display: flex; align-items: center; gap: 10px; }
.sp2 { flex: 1; }
.schedtbl td { padding: 9px 10px; }

/* ---------- READABILITY PASS (Akshay 07-25: "nothing is readable") ----------
   The old dark theme hardcodes rgba(13,27,33)/rgba(33,56,64)/rgba(58,87,98)
   panel backgrounds and mono-uppercase micro-labels. On the light ground they
   render as muddy grey boxes with illegible labels. Every such component gets
   a light surface and normal-case Segoe labels here. */
.check-row { background: var(--surface-2); border-radius: 4px; }
.check-row input { accent-color: var(--accent); }
.rates-header .rcell { background: var(--surface-2); border-radius: 4px; }
.rates-header .rcell label {
  font-family: var(--font); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--grey); line-height: 1.35;
}
/* the 🎛 LIVE strip: flex turned its words into scattered columns — flow as text */
.callout { display: block; font-size: 13px; line-height: 1.6; }
.callout .tag { display: inline-block; margin-right: 8px; vertical-align: 1px; }
.settings-panel > .card, .topbar { backdrop-filter: none; }
.appfoot { background: transparent; }
.kcol { background: #F4F6F7; }
.gate { background: var(--surface-2); }
.step-item .dot { background: var(--surface-2); color: var(--ink); }
.slide, .script, .docjob, .bantcell, .fr-item, .eco-cell, .scorehelp .shbody { background: var(--surface-2); color: var(--ink); }
.rv-detail td, .bx-detail > td { background: var(--surface-2); }
.strengthbar, .progressbar, .tk-share-track, .tk-stage-bar { background: var(--surface-3); border-color: var(--line); }
.tk-day { background: var(--surface-2); }
.tr-fathom { background: var(--surface-2); }
.usagebox, .synclog { background: var(--surface-2); color: var(--ink); }
.status-banner { background: var(--warn-bg); color: var(--warn); }
/* micro-label legibility floor: nothing under 10.5px, mono only for § accents */
.step-item .c, .gate .glabel, .slide .sn { font-size: 10.5px; color: var(--grey); }
.seclabel { font-size: 11px; letter-spacing: .1em; }
label { font-size: 12px; text-transform: none; letter-spacing: .01em; }

@media (max-width: 1000px) { .kpis2, .mtiles2 { grid-template-columns: 1fr 1fr; } .brief2g { grid-template-columns: 1fr; } }
@media (max-width: 780px) { .rail2 { display: none; } }


/* ---------------------------------------------------------------------------
   WCAG 2.2 AA — the deck's stated bar (slide 2) and its cross-cutting rules
   (slide 28). Added 2026-07-27 alongside the Titan token alignment.
   --------------------------------------------------------------------------- */

/* "Visible focus" (slide 2). Only inputs carried a focus style — buttons, links
   and the rail were invisible to a keyboard. :focus-visible leaves mouse clicks
   unchanged. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #538DD5;
  outline-offset: 2px;
}
.rail2-nav a:focus-visible { outline-offset: -2px; }

/* "Target size >= 24 x 24 px" (slide 2 · slide 28 rule 2). Checkboxes shipped at
   13-17px — below the floor for a finger or an unsteady hand. 18 + 3 + 3 = 24. */
input[type='checkbox'], input[type='radio'] {
  width: 18px; height: 18px; margin: 3px;
  accent-color: var(--accent-ink); cursor: pointer;
}
.check-row input { width: 18px; height: 18px; }
.btn-sm, .st2, .seg2 button, .tr-tabs button { min-height: 26px; }

/* "No clipped or truncated text" (slide 28 rule 5) — long company and mission
   names wrap rather than being cut off mid-word. */
.t td, .mtile2 b, .kpi2 .d { overflow-wrap: anywhere; }


/* ===========================================================================
   LIGHT / DARK THEMES (2026-07-27)
   The tokens above are the LIGHT theme (the Titan deck's values). Everything
   draws its surfaces from --surface / --surface-2 / --surface-3 and its text
   from --ink / --grey, so a theme is just a different set of those.
   `html[data-theme]` wins over the media query, so an explicit choice always
   beats the operating system's preference.
   =========================================================================== */
:root {
  --surface: #FFFFFF;      /* cards, panels, inputs           */
  --surface-2: #F2F5F7;    /* subtle fills, hovers, steppers  */
  --surface-3: #E8ECEF;    /* pressed / heavier fills         */
  --info-bg: #F0F4FC;
  --shadow: 0 1px 2px rgba(16, 24, 32, .06);
  color-scheme: light;
}

/* --- DARK ------------------------------------------------------------------
   Same brand DNA as the deck (red EE2E24 · navy 213840 · slate 3A5260) on the
   console's dark ground. Every text tint is lifted until the pair clears WCAG
   AA on ITS OWN background — the light theme's inks are unreadable here
   (--grey #55636E would be 1.6:1 on the dark surface). */
html[data-theme='dark'] {
  --on-accent: #0E1519;    /* dark text ON the light-blue fill (9.17:1) */
  --bg0: #0E1519;
  --bg1: #142028;
  --bg-soft: #16232B;
  --surface: #16232B;
  --surface-2: #1C2A33;
  --surface-3: #24343E;
  --ink: #E8EEF1;
  --ink-dim: #A9B8C0;
  --grey: #A9B8C0;
  --grey-soft: #8FA3AB;
  --line: #26343D;
  --line-strong: #5C7484;   /* form-control borders — 3.27:1 on the dark surface */
  --panel: #16232B;
  --panel-strong: #1C2A33;
  --info-bg: #17283A;
  --ok: #4FC98B;
  --good-bg: #123326;
  --warn: #C9962E;
  --warn-ink: #E7B65C;
  --crit: #F1786D;
  --crit-bg: #3A1D1B;
  --navy-bg: #1B2A3A;
  --red-ink: #FF7C72;
  --accent: #7FB1E8;
  --accent-ink: #8CBBEE;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* Follow the operating system until the user picks a side. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --on-accent: #0E1519;
    --bg0: #0E1519; --bg1: #142028; --bg-soft: #16232B;
    --surface: #16232B; --surface-2: #1C2A33; --surface-3: #24343E;
    --ink: #E8EEF1; --ink-dim: #A9B8C0; --grey: #A9B8C0; --grey-soft: #8FA3AB;
    --line: #26343D; --line-strong: #5C7484;
    --panel: #16232B; --panel-strong: #1C2A33; --info-bg: #17283A;
    --ok: #4FC98B; --good-bg: #123326; --warn-ink: #E7B65C;
    --crit: #F1786D; --crit-bg: #3A1D1B; --navy-bg: #1B2A3A;
    --red-ink: #FF7C72; --accent: #7FB1E8; --accent-ink: #8CBBEE;
    --shadow: 0 1px 2px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
  html:not([data-theme]) body { -webkit-font-smoothing: antialiased; letter-spacing: .008em; }
  html:not([data-theme]) b, html:not([data-theme]) strong { font-weight: 600; }
}

/* --- type, tuned per theme -------------------------------------------------
   Light text on a dark ground optically blooms and reads heavier than the same
   weight on white. On dark: antialiased smoothing, a touch more letter spacing,
   and bold one step lighter. Same Calibri — tuned, not swapped. */
html[data-theme='dark'] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .008em;
}
html[data-theme='dark'] b,
html[data-theme='dark'] strong,
html[data-theme='dark'] .hud2 b,
html[data-theme='dark'] .kpi2 .v { font-weight: 600; }
html[data-theme='dark'] .card { box-shadow: var(--shadow); }
html[data-theme='dark'] .topbar2 .btn-ghost { border-color: #354753; }
html[data-theme='dark'] .toplogo2 { background: #E8EEF1; }

/* --- the toggle ------------------------------------------------------------ */
.theme-tog {
  background: transparent; border: 1px solid #2A3945; color: #C7D1D9;
  border-radius: 3px; padding: 3px 9px; font-size: 13px; line-height: 1.4;
  cursor: pointer; min-height: 26px; min-width: 26px;
}
.theme-tog:hover { border-color: #46586A; color: #fff; }

/* The primary button is stated explicitly per theme rather than left to a var.
   Observed in testing: a `background:` shorthand holding var(--accent-ink) did
   not re-resolve when data-theme flipped live, so the button kept the other
   theme's fill. An explicit selector cannot drift. Dark text on the light-blue
   fill = 9.17:1 (white on it would be 2.01:1). */
html[data-theme='dark'] .btn-red {
  background: #8CBBEE; border-color: #8CBBEE; color: #0E1519;
}
html[data-theme='dark'] .btn-red:hover { background: #A6CCF3; border-color: #A6CCF3; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .btn-red { background: #8CBBEE; border-color: #8CBBEE; color: #0E1519; }
  html:not([data-theme]) .btn-red:hover { background: #A6CCF3; border-color: #A6CCF3; }
}

/* ---------------------------------------------------------------------------
   2026-07-27 (Akshay, from a dark-mode screenshot of Lead Review):
   "these two circled fonts not looking good at all — increase the column size
    so that rejected, NetSuite, odoo can come in one line."
   Two separate faults.
   --------------------------------------------------------------------------- */

/* 1. THE INVISIBLE CHIP. .chip.navy (the NetSuite path) draws --navy on
      --navy-bg. In dark that is #213840 on #1B2A3A = 1.18:1 — a ghost box with
      unreadable text, which is what the first circle is. The dark audit covered
      the ok / warn / red chips and missed this one because --navy is a
      STRUCTURAL token being used as text. Now it has its own ink. */
:root { --navy-ink: #274060; }
html[data-theme='dark'] { --navy-ink: #9CC0E4; }          /* 7.70:1 on the dark chip */
@media (prefers-color-scheme: dark) { html:not([data-theme]) { --navy-ink: #9CC0E4; } }
.chip.navy { color: var(--navy-ink); }
html[data-theme='dark'] .chip.navy { border-color: #2E4459; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .chip.navy { border-color: #2E4459; } }

/* 2. CHIPS MUST NEVER WRAP. "Rejected" was breaking into "Rejecte / d" and
      "reject" into "reje / ct" because a chip is an inline-flex box the table
      was free to squeeze. Holding the label on one line makes the column take
      the width it actually needs — the table is auto-layout, so this IS the
      column-widening fix. */
.chip { white-space: nowrap; }
/* Deliberately NOT nowrap on every cell: company names like "Karnataka Plastoo
   Industries Private Limited" must still wrap, or the table grows a horizontal
   scrollbar. Holding the CHIP on one line is enough — an auto-layout table then
   gives that column the width the chip needs, which is the widening asked for. */
.t th { white-space: nowrap; }

/* 3. THE CREAM CHIP ON A DARK TABLE. "On Hold" kept the LIGHT --warn-bg
      (#FCF3DF) in dark mode — gold text on cream at 1.69:1, and visually a
      bright cream box in a dark table. The dark block set --good-bg and
      --crit-bg but missed --warn-bg. The chip BORDERS were hardcoded light
      creams too, so they are stated per theme here as well. */
html[data-theme='dark'] {
  --warn-bg: #3A2E14;                                     /* 7.11:1 with --warn-ink */
}
@media (prefers-color-scheme: dark) { html:not([data-theme]) { --warn-bg: #3A2E14; } }
html[data-theme='dark'] .chip.ok   { border-color: #1F5138; }
html[data-theme='dark'] .chip.warn { border-color: #5A4720; }
html[data-theme='dark'] .chip.red  { border-color: #63302C; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .chip.ok   { border-color: #1F5138; }
  html:not([data-theme]) .chip.warn { border-color: #5A4720; }
  html:not([data-theme]) .chip.red  { border-color: #63302C; }
}