/* ==========================================================================
   EWS design system
   --------------------------------------------------------------------------
   One place for colour, type, spacing, elevation and the shared components.

   WHY THIS FILE EXISTS
   Before it, the six top-level templates each carried their own inline
   <style> block: 143 distinct hex literals, 12 competing brand blues, two
   parallel neutral ramps (gray-* and slate-*), ~30 type sizes, 31 radii and
   30 boxes-shadows of which only 2 were ever reused. `.card`, `.stat-card`,
   `.data-label` and `.data-value` existed in several templates with
   different values. Nothing was cacheable because it was all inline.

   THE DARK-MODE FIX (read this before editing)
   Dark mode used to be a hand-maintained allow-list of Tailwind utility
   names -- `html.dark .bg-white { background: #0f172a !important }` and
   ~40 more. Any element whose utility was not on the list kept its light
   value, which is why severity badges landed at 1.4:1-2.3:1 contrast and
   why "text is invisible in dark mode" kept coming back: every new badge
   was a new bug.

   Components here consume SEMANTIC TOKENS instead. Dark mode redefines the
   tokens once, in one block, and every component follows automatically. To
   keep that property:
       - style components with var(--ews-*), never a raw hex
       - never add `html.dark .some-tailwind-utility` overrides
       - if you need a new colour, add a token, don't inline it

   Load AFTER Tailwind so component classes win without !important.
   Requires `collectstatic` on deploy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS -- light theme (the default)
   Palette values are taken from what the product already used, so this is a
   consolidation rather than a rebrand.
   -------------------------------------------------------------------------- */
:root {
  /* Brand ---------------------------------------------------------------- */
  --ews-brand:            #4f6bff;   /* the login screen's accent, now global */
  --ews-brand-strong:     #3a52d8;
  --ews-brand-soft:       #eef1ff;
  --ews-brand-border:     #c7d0ff;
  --ews-brand-contrast:   #ffffff;   /* text on a brand-filled surface */

  /* Neutral ramp — one ramp, replacing the old split between the gray and
     slate scales.

     Careful writing prose here: a star followed by a slash closes a CSS comment,
     comments do not nest, and the first one wins. Naming those two scales with a
     wildcard and a separator on one line produced exactly that sequence, closing
     this comment early. Error recovery inside a declaration block then skips to
     the next semicolon — which was the one ending --ews-n-0 below. The token
     silently ceased to exist, every var(--ews-n-0) became invalid at
     computed-value time, and so --ews-surface computed to transparent, making
     light-mode cards and popovers see-through. Guard test:
     test_no_stray_css_comment_terminators. ---------------------------------- */
  --ews-n-0:              #ffffff;
  --ews-n-25:             #fbfcfe;
  --ews-n-50:             #f7f8fb;
  --ews-n-100:            #eef1f6;
  --ews-n-200:            #e2e6ee;
  --ews-n-300:            #cbd2df;
  --ews-n-400:            #94a0b4;   /* lightest neutral that still passes AA */
  --ews-n-500:            #6b7688;
  --ews-n-600:            #505a6b;
  --ews-n-700:            #3a4353;
  --ews-n-800:            #232a37;
  --ews-n-900:            #131824;

  /* Semantic surfaces ---------------------------------------------------- */
  --ews-bg:               var(--ews-n-50);   /* page */
  --ews-surface:          var(--ews-n-0);    /* cards, panels */
  --ews-surface-raised:   var(--ews-n-0);
  --ews-surface-sunken:   var(--ews-n-100);  /* table headers, wells */
  --ews-surface-hover:    var(--ews-n-50);

  /* Semantic text -------------------------------------------------------- */
  --ews-text:             var(--ews-n-900);
  --ews-text-secondary:   var(--ews-n-600);
  /* Was #9ca3af, used 126x at 2.54:1 — including the borrower's account
     number. Darkened to clear 4.5:1 on --ews-surface. */
  --ews-text-muted:       var(--ews-n-500);
  --ews-text-inverse:     var(--ews-n-0);

  /* Borders -------------------------------------------------------------- */
  --ews-border:           var(--ews-n-200);
  --ews-border-strong:    var(--ews-n-300);

  /* Severity ------------------------------------------------------------- *
   * Five bands, matching engine severity exactly:
   * CRITICAL / HIGH_RISK / MODERATE / MINOR / INFO.
   * The old UI rendered only three of them and used orange to mean
   * "Medium risk" on one screen and "HIGH_RISK" on another. One scale now.
   * Each band ships fg / bg / border so a chip is legible in both themes. */
  --ews-critical:         #dc2626;
  --ews-critical-fg:      #8f1414;
  --ews-critical-bg:      #fdeaea;
  --ews-critical-border:  #f6bcbc;

  --ews-high:             #ea580c;
  --ews-high-fg:          #8a3208;
  --ews-high-bg:          #fdf0e7;
  --ews-high-border:      #f8c9a8;

  --ews-moderate:         #d97706;
  --ews-moderate-fg:      #834a08;
  --ews-moderate-bg:      #fdf5e6;
  --ews-moderate-border:  #f4dca5;

  --ews-minor:            #64748b;
  --ews-minor-fg:         #3d4757;
  --ews-minor-bg:         #f1f3f7;
  --ews-minor-border:     #d3d9e3;

  --ews-info:             #2563eb;
  --ews-info-fg:          #16408f;
  --ews-info-bg:          #eaf1fd;
  --ews-info-border:      #b9cef8;

  --ews-positive:         #059669;
  --ews-positive-fg:      #045f43;
  --ews-positive-bg:      #e7f6f1;
  --ews-positive-border:  #a9dfcf;

  /* Type ---------------------------------------------------------------- *
   * A real scale, replacing ~30 ad-hoc sizes (405 of which were
   * `text-[Npx]` arbitrary utilities that only exist while the Tailwind
   * Play CDN is reachable). */
  --ews-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ews-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ews-fs-2xs:  0.6875rem;  /* 11px — chips, dense table meta */
  --ews-fs-xs:   0.75rem;    /* 12px — labels */
  --ews-fs-sm:   0.8125rem;  /* 13px — table body */
  --ews-fs-base: 0.875rem;   /* 14px — body default */
  --ews-fs-md:   1rem;       /* 16px */
  --ews-fs-lg:   1.125rem;   /* 18px — card titles */
  --ews-fs-xl:   1.375rem;   /* 22px — section headings */
  --ews-fs-2xl:  1.75rem;    /* 28px — KPI values */
  --ews-fs-3xl:  2.25rem;    /* 36px — the verdict hero */

  /* Spacing — a 4px scale, replacing 38 ad-hoc values ------------------- */
  --ews-sp-1: 0.25rem;
  --ews-sp-2: 0.5rem;
  --ews-sp-3: 0.75rem;
  --ews-sp-4: 1rem;
  --ews-sp-5: 1.25rem;
  --ews-sp-6: 1.5rem;
  --ews-sp-8: 2rem;
  --ews-sp-10: 2.5rem;

  /* Radius — 4 steps, replacing 31 ------------------------------------- */
  --ews-r-sm:   6px;
  --ews-r-md:   10px;
  --ews-r-lg:   14px;
  --ews-r-full: 9999px;

  /* Elevation — 3 steps, replacing 30 one-off shadows ------------------ */
  --ews-shadow-sm: 0 1px 2px rgba(19, 24, 36, .06), 0 1px 3px rgba(19, 24, 36, .04);
  --ews-shadow-md: 0 2px 6px rgba(19, 24, 36, .07), 0 8px 20px -8px rgba(19, 24, 36, .10);
  --ews-shadow-lg: 0 8px 28px -6px rgba(19, 24, 36, .14);

  --ews-focus-ring: 0 0 0 2px var(--ews-surface), 0 0 0 4px var(--ews-brand);
}

/* --------------------------------------------------------------------------
   2. TOKENS -- dark theme
   The ONLY place dark values are declared. Adding a component above needs no
   change here, provided it uses tokens.

   TWO SELECTORS, because the templates disagree about the convention:
     - result.html / workspace.html are light by default and add `html.dark`
     - home.html / login.html are DARK by default and opt out with `html.light`
   Both write the same localStorage key ('ews-theme'), so the user's choice is
   shared; only the class name and the default differ. Rather than rewrite
   either template's inline CSS (and risk a visual regression), pages using the
   inverted convention declare `class="ews-theme-dark-default"` on <html> and
   are matched here. Unifying on one convention is a follow-up.
   -------------------------------------------------------------------------- */
html.dark,
html.ews-theme-dark-default:not(.light) {
  --ews-brand:            #8b9eff;   /* lifted for contrast on dark surfaces */
  --ews-brand-strong:     #a5b4fc;
  --ews-brand-soft:       #1b2140;
  --ews-brand-border:     #37407a;
  --ews-brand-contrast:   #0b0f1a;

  --ews-n-0:              #0f172a;   /* card surface */
  --ews-n-25:             #111a2e;
  --ews-n-50:             #0b1220;
  --ews-n-100:            #17203a;
  --ews-n-200:            #232e4c;
  --ews-n-300:            #33405f;
  --ews-n-400:            #7c8aa5;
  --ews-n-500:            #9aa7bf;
  --ews-n-600:            #b6c1d4;
  --ews-n-700:            #d2dae7;
  --ews-n-800:            #e6ebf3;
  --ews-n-900:            #f4f7fb;

  --ews-bg:               #020617;
  --ews-surface:          var(--ews-n-0);
  --ews-surface-raised:   #141d33;
  --ews-surface-sunken:   #0b1424;
  --ews-surface-hover:    #17203a;

  --ews-text:             var(--ews-n-900);
  --ews-text-secondary:   var(--ews-n-600);
  --ews-text-muted:       var(--ews-n-500);
  --ews-text-inverse:     #0b0f1a;

  --ews-border:           #26314c;
  --ews-border-strong:    #35426180;

  /* Severity, re-tuned for dark. Foreground is the light tint and the fill
     is a deep wash, which is what the old allow-list never did — it
     repainted text but left the pale light-mode background in place. */
  --ews-critical:         #f87171;
  --ews-critical-fg:      #ffc9c9;
  --ews-critical-bg:      #3d1417;
  --ews-critical-border:  #6d2226;

  --ews-high:             #fb923c;
  --ews-high-fg:          #ffd7b3;
  --ews-high-bg:          #3d2110;
  --ews-high-border:      #6d3c17;

  --ews-moderate:         #fbbf24;
  --ews-moderate-fg:      #ffe4a8;
  --ews-moderate-bg:      #3a2c0c;
  --ews-moderate-border:  #6a4f14;

  --ews-minor:            #94a3b8;
  --ews-minor-fg:         #cfd8e5;
  --ews-minor-bg:         #1d2637;
  --ews-minor-border:     #33405f;

  --ews-info:             #60a5fa;
  --ews-info-fg:          #c3ddff;
  --ews-info-bg:          #12233f;
  --ews-info-border:      #234371;

  --ews-positive:         #34d399;
  --ews-positive-fg:      #b6f0dc;
  --ews-positive-bg:      #0d3227;
  --ews-positive-border:  #1a5a45;

  --ews-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --ews-shadow-md: 0 4px 14px -4px rgba(0, 0, 0, .6);
  --ews-shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, .7);
}

/* --------------------------------------------------------------------------
   3. FOCUS
   result.html previously defined no :focus rule at all, and actively removed
   the outline on accordion headers. Keyboard users had no idea where they
   were. :focus-visible keeps mouse clicks clean.
   -------------------------------------------------------------------------- */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ews-focus-ring);
  border-radius: var(--ews-r-sm);
}

.ews-skip-link {
  position: absolute;
  left: var(--ews-sp-4);
  top: -3rem;
  z-index: 100;
  padding: var(--ews-sp-2) var(--ews-sp-4);
  background: var(--ews-surface);
  color: var(--ews-text);
  border: 1px solid var(--ews-border-strong);
  border-radius: var(--ews-r-sm);
  font: 600 var(--ews-fs-base) / 1 var(--ews-font);
  transition: top .15s ease;
}
.ews-skip-link:focus { top: var(--ews-sp-4); }

/* Screen-reader-only, for accessible names on icon-only controls.
   Deliberately NOT display:none — this keeps the element focusable and in the
   accessibility tree, which is exactly what the hidden file input needs. */
.ews-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;
}

/* A drop zone whose real control is a visually-clipped <input type="file">.
   Because the input keeps focus, the zone has to render the focus ring on its
   behalf — otherwise a keyboard user is focused on something invisible. */
.ews-filezone:focus-within {
  box-shadow: var(--ews-focus-ring);
  border-color: var(--ews-brand) !important;
}

/* --------------------------------------------------------------------------
   4. SEVERITY CHIP
   One component for all five bands. Carries a text label, so severity is
   never conveyed by colour alone (WCAG 1.4.1).
   -------------------------------------------------------------------------- */
.ews-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ews-sp-2);
  padding: 0.1875rem var(--ews-sp-2);
  border-radius: var(--ews-r-full);
  font: 600 var(--ews-fs-2xs) / 1.4 var(--ews-font);
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ews-chip::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--ews-r-full);
  background: currentColor;
  flex: none;
}
.ews-chip--critical { color: var(--ews-critical-fg); background: var(--ews-critical-bg); border-color: var(--ews-critical-border); }
.ews-chip--high     { color: var(--ews-high-fg);     background: var(--ews-high-bg);     border-color: var(--ews-high-border); }
.ews-chip--moderate { color: var(--ews-moderate-fg); background: var(--ews-moderate-bg); border-color: var(--ews-moderate-border); }
.ews-chip--minor    { color: var(--ews-minor-fg);    background: var(--ews-minor-bg);    border-color: var(--ews-minor-border); }
.ews-chip--info     { color: var(--ews-info-fg);     background: var(--ews-info-bg);     border-color: var(--ews-info-border); }
.ews-chip--positive { color: var(--ews-positive-fg); background: var(--ews-positive-bg); border-color: var(--ews-positive-border); }

/* --------------------------------------------------------------------------
   4b. SEVERITY TILES
   The sidebar's alert-count summary. Five bands, matching the engine, on a
   scale that reads at a glance: a zero count is de-emphasised so a non-zero
   CRITICAL is the thing your eye lands on.
   -------------------------------------------------------------------------- */
.ews-severity-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ews-severity-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.0625rem;
  padding: 0.3125rem 0.125rem;
  border-radius: var(--ews-r-sm);
  border: 1px solid transparent;
  text-align: center;
}
.ews-severity-tile__count {
  font: 800 var(--ews-fs-sm) / 1 var(--ews-font);
  font-variant-numeric: tabular-nums;
}
.ews-severity-tile__label {
  font: 700 0.5625rem / 1.1 var(--ews-font);
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .88;
}
.ews-severity-tile--critical { color: var(--ews-critical-fg); background: var(--ews-critical-bg); border-color: var(--ews-critical-border); }
.ews-severity-tile--high     { color: var(--ews-high-fg);     background: var(--ews-high-bg);     border-color: var(--ews-high-border); }
.ews-severity-tile--moderate { color: var(--ews-moderate-fg); background: var(--ews-moderate-bg); border-color: var(--ews-moderate-border); }
.ews-severity-tile--minor    { color: var(--ews-minor-fg);    background: var(--ews-minor-bg);    border-color: var(--ews-minor-border); }
.ews-severity-tile--info     { color: var(--ews-info-fg);     background: var(--ews-info-bg);     border-color: var(--ews-info-border); }

/* --------------------------------------------------------------------------
   5. SURFACES
   -------------------------------------------------------------------------- */
.ews-card {
  background: var(--ews-surface);
  border: 1px solid var(--ews-border);
  border-radius: var(--ews-r-lg);
  box-shadow: var(--ews-shadow-sm);
  color: var(--ews-text);
}
.ews-card--flush { box-shadow: none; }
.ews-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ews-sp-3);
  padding: var(--ews-sp-4) var(--ews-sp-5);
  border-bottom: 1px solid var(--ews-border);
}
.ews-card__title {
  margin: 0;
  font: 600 var(--ews-fs-lg) / 1.3 var(--ews-font);
  color: var(--ews-text);
}
.ews-card__body { padding: var(--ews-sp-5); }

/* Severity-accented card, for a fired trigger. */
.ews-card--accent { border-left: 3px solid var(--ews-border-strong); }
.ews-card--accent-critical { border-left-color: var(--ews-critical); }
.ews-card--accent-high     { border-left-color: var(--ews-high); }
.ews-card--accent-moderate { border-left-color: var(--ews-moderate); }
.ews-card--accent-minor    { border-left-color: var(--ews-minor); }
.ews-card--accent-info     { border-left-color: var(--ews-info); }

/* --------------------------------------------------------------------------
   5b. KEY FINDINGS
   The 'why' block that sits directly under the verdict on the Overview tab.
   Dense on purpose: an analyst should be able to read the whole justification
   for a decision without scrolling, so rows are compact and severity leads.
   -------------------------------------------------------------------------- */
.ews-findings { margin-bottom: var(--ews-sp-6); }
.ews-findings__subtitle {
  display: block;
  margin-top: 0.125rem;
  font: 400 var(--ews-fs-xs) / 1.4 var(--ews-font);
  color: var(--ews-text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.ews-findings__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ews-findings__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto 10rem auto;
  align-items: center;
  gap: var(--ews-sp-3);
  padding: var(--ews-sp-3) var(--ews-sp-5);
  border-bottom: 1px solid var(--ews-border);
}
.ews-findings__row:last-child { border-bottom: 0; }
.ews-findings__row:hover { background: var(--ews-surface-hover); }
.ews-findings__sev { justify-self: start; }
.ews-findings__name {
  font: 600 var(--ews-fs-base) / 1.35 var(--ews-font);
  color: var(--ews-text);
  min-width: 0;
}
.ews-findings__meta {
  font-size: var(--ews-fs-sm);
  color: var(--ews-text-secondary);
  text-align: right;
  white-space: nowrap;
}
.ews-findings__cat {
  font: 500 var(--ews-fs-xs) / 1.3 var(--ews-font);
  color: var(--ews-text-muted);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ews-findings__go { justify-self: end; white-space: nowrap; }
.ews-findings__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ews-sp-3);
  padding: var(--ews-sp-4) var(--ews-sp-5);
  border-top: 1px solid var(--ews-border);
  background: var(--ews-surface-sunken);
}
/* The compliance action is the intended next step, so it sits last and to the
   right — the place the eye lands after reading the findings. */
.ews-findings__action { margin-left: auto; }
@media (max-width: 60rem) {
  .ews-findings__action { margin-left: 0; }
}

/* Collapse to two lines per finding on narrow screens rather than letting the
   grid squeeze the trigger name to nothing. */
@media (max-width: 60rem) {
  .ews-findings__row {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--ews-sp-2);
  }
  .ews-findings__name { grid-column: 2; }
  .ews-findings__meta { grid-column: 1 / -1; text-align: left; }
  .ews-findings__cat  { grid-column: 1 / -1; text-align: left; }
  .ews-findings__go   { grid-column: 1 / -1; justify-self: start; }
}

/* --------------------------------------------------------------------------
   6. KPI / STAT
   `.data-value` used to be painted with `-webkit-background-clip: text` +
   `-webkit-text-fill-color: transparent`, which silently overrode any colour
   utility applied to it and printed blank on paper. Solid colour here; the
   gradient is opt-in via .ews-kpi__value--gradient and degrades to a plain
   colour anywhere the clip isn't supported or when printing.
   -------------------------------------------------------------------------- */
.ews-kpi__label {
  font: 500 var(--ews-fs-xs) / 1.4 var(--ews-font);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ews-text-muted);
}
.ews-kpi__value {
  font: 700 var(--ews-fs-2xl) / 1.15 var(--ews-font);
  color: var(--ews-text);
  font-variant-numeric: tabular-nums;
}
.ews-kpi__value--gradient {
  background: linear-gradient(135deg, var(--ews-brand), var(--ews-brand-strong));
  color: var(--ews-brand-strong);       /* fallback that survives clip failure */
  -webkit-background-clip: text;
  background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ews-kpi__value--gradient { -webkit-text-fill-color: transparent; }
}

/* Account numbers, amounts, IFSC — tabular and monospaced everywhere. */
.ews-mono {
  font-family: var(--ews-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   7. TABS
   Real tablist semantics. Selection is signalled by weight + an underline +
   aria-selected, not by colour alone.
   -------------------------------------------------------------------------- */
.ews-tab {
  display: flex;
  align-items: center;
  gap: var(--ews-sp-3);
  width: 100%;
  padding: var(--ews-sp-3) var(--ews-sp-4);
  border: 1px solid transparent;
  border-radius: var(--ews-r-md);
  background: transparent;
  color: var(--ews-text-secondary);
  font: 500 var(--ews-fs-base) / 1.2 var(--ews-font);
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.ews-tab:hover { background: var(--ews-surface-hover); color: var(--ews-text); }
.ews-tab[aria-selected="true"] {
  background: var(--ews-brand-soft);
  border-color: var(--ews-brand-border);
  color: var(--ews-brand-strong);
  font-weight: 650;
}
.ews-tab__count {
  margin-left: auto;
  font: 600 var(--ews-fs-2xs) / 1 var(--ews-font);
  padding: 0.125rem var(--ews-sp-2);
  border-radius: var(--ews-r-full);
  background: var(--ews-surface-sunken);
  color: var(--ews-text-secondary);
}
.ews-tab[aria-selected="true"] .ews-tab__count {
  background: var(--ews-brand);
  color: var(--ews-brand-contrast);
}

/* --------------------------------------------------------------------------
   8. TABLES
   -------------------------------------------------------------------------- */
.ews-table { width: 100%; border-collapse: collapse; font: 400 var(--ews-fs-sm) / 1.5 var(--ews-font); }
.ews-table caption { text-align: left; padding: 0 0 var(--ews-sp-3); color: var(--ews-text-secondary); font-size: var(--ews-fs-xs); }
.ews-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--ews-surface-sunken);
  color: var(--ews-text-secondary);
  font: 600 var(--ews-fs-xs) / 1.4 var(--ews-font);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: left;
  padding: var(--ews-sp-3) var(--ews-sp-4);
  border-bottom: 1px solid var(--ews-border);
  white-space: nowrap;
}
.ews-table td {
  padding: var(--ews-sp-3) var(--ews-sp-4);
  border-bottom: 1px solid var(--ews-border);
  color: var(--ews-text);
  vertical-align: top;
}
.ews-table tbody tr:hover td { background: var(--ews-surface-hover); }
.ews-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--ews-font-mono); }
.ews-table--zebra tbody tr:nth-child(even) td { background: var(--ews-surface-sunken); }

/* --------------------------------------------------------------------------
   9. DIALOG
   The RFA/SCN modals were plain divs. Pair these classes with
   role="dialog" aria-modal="true" and the focus-trap helper in ews-ui.js.
   -------------------------------------------------------------------------- */
.ews-dialog__backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: var(--ews-sp-4);
  background: rgba(9, 12, 22, .55);
  backdrop-filter: blur(2px);
}
.ews-dialog {
  width: min(40rem, 100%);
  max-height: min(85vh, 48rem);
  overflow: auto;
  background: var(--ews-surface);
  color: var(--ews-text);
  border: 1px solid var(--ews-border-strong);
  border-radius: var(--ews-r-lg);
  box-shadow: var(--ews-shadow-lg);
}
.ews-dialog__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--ews-sp-4);
  padding: var(--ews-sp-5);
  border-bottom: 1px solid var(--ews-border);
}
.ews-dialog__title { margin: 0; font: 650 var(--ews-fs-xl) / 1.25 var(--ews-font); }
.ews-dialog__body { padding: var(--ews-sp-5); }
.ews-dialog__footer {
  display: flex; justify-content: flex-end; gap: var(--ews-sp-3);
  padding: var(--ews-sp-4) var(--ews-sp-5);
  border-top: 1px solid var(--ews-border);
  background: var(--ews-surface-sunken);
}

/* --------------------------------------------------------------------------
   10. BUTTONS + FORMS
   Minimum 2.25rem tall so touch targets clear 24px (WCAG 2.5.8).
   -------------------------------------------------------------------------- */
.ews-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ews-sp-2);
  min-height: 2.25rem;
  padding: 0 var(--ews-sp-4);
  border-radius: var(--ews-r-sm);
  border: 1px solid transparent;
  font: 600 var(--ews-fs-base) / 1 var(--ews-font);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.ews-btn[disabled] { opacity: .55; cursor: not-allowed; }
.ews-btn--primary { background: var(--ews-brand); color: var(--ews-brand-contrast); }
.ews-btn--primary:hover:not([disabled]) { background: var(--ews-brand-strong); }
.ews-btn--secondary { background: var(--ews-surface); color: var(--ews-text); border-color: var(--ews-border-strong); }
.ews-btn--secondary:hover:not([disabled]) { background: var(--ews-surface-hover); }
.ews-btn--danger { background: var(--ews-critical); color: #fff; }
.ews-btn--ghost { background: transparent; color: var(--ews-text-secondary); }
.ews-btn--ghost:hover:not([disabled]) { background: var(--ews-surface-hover); color: var(--ews-text); }

.ews-field { display: grid; gap: var(--ews-sp-2); }
.ews-label { font: 600 var(--ews-fs-xs) / 1.4 var(--ews-font); color: var(--ews-text-secondary); }
.ews-input, .ews-textarea, .ews-select {
  width: 100%;
  min-height: 2.25rem;
  padding: var(--ews-sp-2) var(--ews-sp-3);
  background: var(--ews-surface);
  color: var(--ews-text);
  border: 1px solid var(--ews-border-strong);
  border-radius: var(--ews-r-sm);
  font: 400 var(--ews-fs-base) / 1.5 var(--ews-font);
}
.ews-input::placeholder, .ews-textarea::placeholder { color: var(--ews-text-muted); }
.ews-hint { font-size: var(--ews-fs-xs); color: var(--ews-text-muted); }
.ews-error { font-size: var(--ews-fs-xs); color: var(--ews-critical-fg); font-weight: 600; }

/* --------------------------------------------------------------------------
   11. MOTION
   Honour the OS setting. The product also used to fake a 650-1200ms delay on
   every tab switch; that has been removed at the source.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   12. PRINT
   There was no @media print anywhere, yet analysts print the result screen
   into credit files and the PDF export renders through the browser.
   -------------------------------------------------------------------------- */
@media print {
  :root {
    --ews-bg: #fff; --ews-surface: #fff; --ews-surface-sunken: #f3f4f6;
    --ews-text: #000; --ews-text-secondary: #333; --ews-text-muted: #555;
    --ews-border: #bbb; --ews-border-strong: #888;
    --ews-shadow-sm: none; --ews-shadow-md: none; --ews-shadow-lg: none;
  }
  .ews-no-print, .ews-dialog__backdrop, .ews-skip-link { display: none !important; }
  .ews-card { break-inside: avoid; box-shadow: none; border: 1px solid #bbb; }
  .ews-kpi__value--gradient { -webkit-text-fill-color: currentColor !important; color: #000 !important; }
  .ews-table th { position: static; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; color: #555; }
}

/* --------------------------------------------------------------------------
   13. TAILWIND UTILITY BRIDGE (dark theme only)

   Replaces the hand-maintained allow-list that used to live inline in each
   template. That list patched 50 TEXT colours across 18 colour families but
   only 4 badge BACKGROUNDS -- so a badge like `bg-blue-50 text-blue-700` got
   its text repainted light while its background stayed light. Light on light,
   ~1.4:1. Roughly 106 badge instances were affected, and because coverage was
   per-utility-name, every newly-added badge was a fresh instance of the bug.

   This bridges bg / text / border together, per family, from the SAME semantic
   tokens, so the pair can never drift apart. It exists only because the markup
   still uses raw Tailwind colour utilities; as templates migrate to .ews-chip
   and friends, rules here can be deleted. No hex values -- tokens only.
   -------------------------------------------------------------------------- */
/* critical: red, rose */
html.dark .bg-red-50,
html.dark .bg-red-100,
html.dark .bg-red-200,
html.dark .bg-rose-50,
html.dark .bg-rose-100,
html.dark .bg-rose-200,
html.ews-theme-dark-default:not(.light) .bg-red-50,
html.ews-theme-dark-default:not(.light) .bg-red-100,
html.ews-theme-dark-default:not(.light) .bg-red-200,
html.ews-theme-dark-default:not(.light) .bg-rose-50,
html.ews-theme-dark-default:not(.light) .bg-rose-100,
html.ews-theme-dark-default:not(.light) .bg-rose-200 {
  background-color: var(--ews-critical-bg) !important;
}
html.dark .text-red-500,
html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800,
html.dark .text-red-900,
html.dark .text-rose-500,
html.dark .text-rose-600,
html.dark .text-rose-700,
html.dark .text-rose-800,
html.dark .text-rose-900,
html.ews-theme-dark-default:not(.light) .text-red-500,
html.ews-theme-dark-default:not(.light) .text-red-600,
html.ews-theme-dark-default:not(.light) .text-red-700,
html.ews-theme-dark-default:not(.light) .text-red-800,
html.ews-theme-dark-default:not(.light) .text-red-900,
html.ews-theme-dark-default:not(.light) .text-rose-500,
html.ews-theme-dark-default:not(.light) .text-rose-600,
html.ews-theme-dark-default:not(.light) .text-rose-700,
html.ews-theme-dark-default:not(.light) .text-rose-800,
html.ews-theme-dark-default:not(.light) .text-rose-900 {
  color: var(--ews-critical-fg) !important;
}
html.dark .border-red-100,
html.dark .border-red-200,
html.dark .border-red-300,
html.dark .border-rose-100,
html.dark .border-rose-200,
html.dark .border-rose-300,
html.ews-theme-dark-default:not(.light) .border-red-100,
html.ews-theme-dark-default:not(.light) .border-red-200,
html.ews-theme-dark-default:not(.light) .border-red-300,
html.ews-theme-dark-default:not(.light) .border-rose-100,
html.ews-theme-dark-default:not(.light) .border-rose-200,
html.ews-theme-dark-default:not(.light) .border-rose-300 {
  border-color: var(--ews-critical-border) !important;
}

/* high: orange */
html.dark .bg-orange-50,
html.dark .bg-orange-100,
html.dark .bg-orange-200,
html.ews-theme-dark-default:not(.light) .bg-orange-50,
html.ews-theme-dark-default:not(.light) .bg-orange-100,
html.ews-theme-dark-default:not(.light) .bg-orange-200 {
  background-color: var(--ews-high-bg) !important;
}
html.dark .text-orange-500,
html.dark .text-orange-600,
html.dark .text-orange-700,
html.dark .text-orange-800,
html.dark .text-orange-900,
html.ews-theme-dark-default:not(.light) .text-orange-500,
html.ews-theme-dark-default:not(.light) .text-orange-600,
html.ews-theme-dark-default:not(.light) .text-orange-700,
html.ews-theme-dark-default:not(.light) .text-orange-800,
html.ews-theme-dark-default:not(.light) .text-orange-900 {
  color: var(--ews-high-fg) !important;
}
html.dark .border-orange-100,
html.dark .border-orange-200,
html.dark .border-orange-300,
html.ews-theme-dark-default:not(.light) .border-orange-100,
html.ews-theme-dark-default:not(.light) .border-orange-200,
html.ews-theme-dark-default:not(.light) .border-orange-300 {
  border-color: var(--ews-high-border) !important;
}

/* moderate: amber, yellow */
html.dark .bg-amber-50,
html.dark .bg-amber-100,
html.dark .bg-amber-200,
html.dark .bg-yellow-50,
html.dark .bg-yellow-100,
html.dark .bg-yellow-200,
html.ews-theme-dark-default:not(.light) .bg-amber-50,
html.ews-theme-dark-default:not(.light) .bg-amber-100,
html.ews-theme-dark-default:not(.light) .bg-amber-200,
html.ews-theme-dark-default:not(.light) .bg-yellow-50,
html.ews-theme-dark-default:not(.light) .bg-yellow-100,
html.ews-theme-dark-default:not(.light) .bg-yellow-200 {
  background-color: var(--ews-moderate-bg) !important;
}
html.dark .text-amber-500,
html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900,
html.dark .text-yellow-500,
html.dark .text-yellow-600,
html.dark .text-yellow-700,
html.dark .text-yellow-800,
html.dark .text-yellow-900,
html.ews-theme-dark-default:not(.light) .text-amber-500,
html.ews-theme-dark-default:not(.light) .text-amber-600,
html.ews-theme-dark-default:not(.light) .text-amber-700,
html.ews-theme-dark-default:not(.light) .text-amber-800,
html.ews-theme-dark-default:not(.light) .text-amber-900,
html.ews-theme-dark-default:not(.light) .text-yellow-500,
html.ews-theme-dark-default:not(.light) .text-yellow-600,
html.ews-theme-dark-default:not(.light) .text-yellow-700,
html.ews-theme-dark-default:not(.light) .text-yellow-800,
html.ews-theme-dark-default:not(.light) .text-yellow-900 {
  color: var(--ews-moderate-fg) !important;
}
html.dark .border-amber-100,
html.dark .border-amber-200,
html.dark .border-amber-300,
html.dark .border-yellow-100,
html.dark .border-yellow-200,
html.dark .border-yellow-300,
html.ews-theme-dark-default:not(.light) .border-amber-100,
html.ews-theme-dark-default:not(.light) .border-amber-200,
html.ews-theme-dark-default:not(.light) .border-amber-300,
html.ews-theme-dark-default:not(.light) .border-yellow-100,
html.ews-theme-dark-default:not(.light) .border-yellow-200,
html.ews-theme-dark-default:not(.light) .border-yellow-300 {
  border-color: var(--ews-moderate-border) !important;
}

/* info: blue, sky, indigo, violet, purple, cyan, fuchsia */
html.dark .bg-blue-50,
html.dark .bg-blue-100,
html.dark .bg-blue-200,
html.dark .bg-sky-50,
html.dark .bg-sky-100,
html.dark .bg-sky-200,
html.dark .bg-indigo-50,
html.dark .bg-indigo-100,
html.dark .bg-indigo-200,
html.dark .bg-violet-50,
html.dark .bg-violet-100,
html.dark .bg-violet-200,
html.dark .bg-purple-50,
html.dark .bg-purple-100,
html.dark .bg-purple-200,
html.dark .bg-cyan-50,
html.dark .bg-cyan-100,
html.dark .bg-cyan-200,
html.dark .bg-fuchsia-50,
html.dark .bg-fuchsia-100,
html.dark .bg-fuchsia-200,
html.ews-theme-dark-default:not(.light) .bg-blue-50,
html.ews-theme-dark-default:not(.light) .bg-blue-100,
html.ews-theme-dark-default:not(.light) .bg-blue-200,
html.ews-theme-dark-default:not(.light) .bg-sky-50,
html.ews-theme-dark-default:not(.light) .bg-sky-100,
html.ews-theme-dark-default:not(.light) .bg-sky-200,
html.ews-theme-dark-default:not(.light) .bg-indigo-50,
html.ews-theme-dark-default:not(.light) .bg-indigo-100,
html.ews-theme-dark-default:not(.light) .bg-indigo-200,
html.ews-theme-dark-default:not(.light) .bg-violet-50,
html.ews-theme-dark-default:not(.light) .bg-violet-100,
html.ews-theme-dark-default:not(.light) .bg-violet-200,
html.ews-theme-dark-default:not(.light) .bg-purple-50,
html.ews-theme-dark-default:not(.light) .bg-purple-100,
html.ews-theme-dark-default:not(.light) .bg-purple-200,
html.ews-theme-dark-default:not(.light) .bg-cyan-50,
html.ews-theme-dark-default:not(.light) .bg-cyan-100,
html.ews-theme-dark-default:not(.light) .bg-cyan-200,
html.ews-theme-dark-default:not(.light) .bg-fuchsia-50,
html.ews-theme-dark-default:not(.light) .bg-fuchsia-100,
html.ews-theme-dark-default:not(.light) .bg-fuchsia-200 {
  background-color: var(--ews-info-bg) !important;
}
html.dark .text-blue-500,
html.dark .text-blue-600,
html.dark .text-blue-700,
html.dark .text-blue-800,
html.dark .text-blue-900,
html.dark .text-sky-500,
html.dark .text-sky-600,
html.dark .text-sky-700,
html.dark .text-sky-800,
html.dark .text-sky-900,
html.dark .text-indigo-500,
html.dark .text-indigo-600,
html.dark .text-indigo-700,
html.dark .text-indigo-800,
html.dark .text-indigo-900,
html.dark .text-violet-500,
html.dark .text-violet-600,
html.dark .text-violet-700,
html.dark .text-violet-800,
html.dark .text-violet-900,
html.dark .text-purple-500,
html.dark .text-purple-600,
html.dark .text-purple-700,
html.dark .text-purple-800,
html.dark .text-purple-900,
html.dark .text-cyan-500,
html.dark .text-cyan-600,
html.dark .text-cyan-700,
html.dark .text-cyan-800,
html.dark .text-cyan-900,
html.dark .text-fuchsia-500,
html.dark .text-fuchsia-600,
html.dark .text-fuchsia-700,
html.dark .text-fuchsia-800,
html.dark .text-fuchsia-900,
html.ews-theme-dark-default:not(.light) .text-blue-500,
html.ews-theme-dark-default:not(.light) .text-blue-600,
html.ews-theme-dark-default:not(.light) .text-blue-700,
html.ews-theme-dark-default:not(.light) .text-blue-800,
html.ews-theme-dark-default:not(.light) .text-blue-900,
html.ews-theme-dark-default:not(.light) .text-sky-500,
html.ews-theme-dark-default:not(.light) .text-sky-600,
html.ews-theme-dark-default:not(.light) .text-sky-700,
html.ews-theme-dark-default:not(.light) .text-sky-800,
html.ews-theme-dark-default:not(.light) .text-sky-900,
html.ews-theme-dark-default:not(.light) .text-indigo-500,
html.ews-theme-dark-default:not(.light) .text-indigo-600,
html.ews-theme-dark-default:not(.light) .text-indigo-700,
html.ews-theme-dark-default:not(.light) .text-indigo-800,
html.ews-theme-dark-default:not(.light) .text-indigo-900,
html.ews-theme-dark-default:not(.light) .text-violet-500,
html.ews-theme-dark-default:not(.light) .text-violet-600,
html.ews-theme-dark-default:not(.light) .text-violet-700,
html.ews-theme-dark-default:not(.light) .text-violet-800,
html.ews-theme-dark-default:not(.light) .text-violet-900,
html.ews-theme-dark-default:not(.light) .text-purple-500,
html.ews-theme-dark-default:not(.light) .text-purple-600,
html.ews-theme-dark-default:not(.light) .text-purple-700,
html.ews-theme-dark-default:not(.light) .text-purple-800,
html.ews-theme-dark-default:not(.light) .text-purple-900,
html.ews-theme-dark-default:not(.light) .text-cyan-500,
html.ews-theme-dark-default:not(.light) .text-cyan-600,
html.ews-theme-dark-default:not(.light) .text-cyan-700,
html.ews-theme-dark-default:not(.light) .text-cyan-800,
html.ews-theme-dark-default:not(.light) .text-cyan-900,
html.ews-theme-dark-default:not(.light) .text-fuchsia-500,
html.ews-theme-dark-default:not(.light) .text-fuchsia-600,
html.ews-theme-dark-default:not(.light) .text-fuchsia-700,
html.ews-theme-dark-default:not(.light) .text-fuchsia-800,
html.ews-theme-dark-default:not(.light) .text-fuchsia-900 {
  color: var(--ews-info-fg) !important;
}
html.dark .border-blue-100,
html.dark .border-blue-200,
html.dark .border-blue-300,
html.dark .border-sky-100,
html.dark .border-sky-200,
html.dark .border-sky-300,
html.dark .border-indigo-100,
html.dark .border-indigo-200,
html.dark .border-indigo-300,
html.dark .border-violet-100,
html.dark .border-violet-200,
html.dark .border-violet-300,
html.dark .border-purple-100,
html.dark .border-purple-200,
html.dark .border-purple-300,
html.dark .border-cyan-100,
html.dark .border-cyan-200,
html.dark .border-cyan-300,
html.dark .border-fuchsia-100,
html.dark .border-fuchsia-200,
html.dark .border-fuchsia-300,
html.ews-theme-dark-default:not(.light) .border-blue-100,
html.ews-theme-dark-default:not(.light) .border-blue-200,
html.ews-theme-dark-default:not(.light) .border-blue-300,
html.ews-theme-dark-default:not(.light) .border-sky-100,
html.ews-theme-dark-default:not(.light) .border-sky-200,
html.ews-theme-dark-default:not(.light) .border-sky-300,
html.ews-theme-dark-default:not(.light) .border-indigo-100,
html.ews-theme-dark-default:not(.light) .border-indigo-200,
html.ews-theme-dark-default:not(.light) .border-indigo-300,
html.ews-theme-dark-default:not(.light) .border-violet-100,
html.ews-theme-dark-default:not(.light) .border-violet-200,
html.ews-theme-dark-default:not(.light) .border-violet-300,
html.ews-theme-dark-default:not(.light) .border-purple-100,
html.ews-theme-dark-default:not(.light) .border-purple-200,
html.ews-theme-dark-default:not(.light) .border-purple-300,
html.ews-theme-dark-default:not(.light) .border-cyan-100,
html.ews-theme-dark-default:not(.light) .border-cyan-200,
html.ews-theme-dark-default:not(.light) .border-cyan-300,
html.ews-theme-dark-default:not(.light) .border-fuchsia-100,
html.ews-theme-dark-default:not(.light) .border-fuchsia-200,
html.ews-theme-dark-default:not(.light) .border-fuchsia-300 {
  border-color: var(--ews-info-border) !important;
}

/* positive: emerald, green, lime, teal */
html.dark .bg-emerald-50,
html.dark .bg-emerald-100,
html.dark .bg-emerald-200,
html.dark .bg-green-50,
html.dark .bg-green-100,
html.dark .bg-green-200,
html.dark .bg-lime-50,
html.dark .bg-lime-100,
html.dark .bg-lime-200,
html.dark .bg-teal-50,
html.dark .bg-teal-100,
html.dark .bg-teal-200,
html.ews-theme-dark-default:not(.light) .bg-emerald-50,
html.ews-theme-dark-default:not(.light) .bg-emerald-100,
html.ews-theme-dark-default:not(.light) .bg-emerald-200,
html.ews-theme-dark-default:not(.light) .bg-green-50,
html.ews-theme-dark-default:not(.light) .bg-green-100,
html.ews-theme-dark-default:not(.light) .bg-green-200,
html.ews-theme-dark-default:not(.light) .bg-lime-50,
html.ews-theme-dark-default:not(.light) .bg-lime-100,
html.ews-theme-dark-default:not(.light) .bg-lime-200,
html.ews-theme-dark-default:not(.light) .bg-teal-50,
html.ews-theme-dark-default:not(.light) .bg-teal-100,
html.ews-theme-dark-default:not(.light) .bg-teal-200 {
  background-color: var(--ews-positive-bg) !important;
}
html.dark .text-emerald-500,
html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .text-emerald-800,
html.dark .text-emerald-900,
html.dark .text-green-500,
html.dark .text-green-600,
html.dark .text-green-700,
html.dark .text-green-800,
html.dark .text-green-900,
html.dark .text-lime-500,
html.dark .text-lime-600,
html.dark .text-lime-700,
html.dark .text-lime-800,
html.dark .text-lime-900,
html.dark .text-teal-500,
html.dark .text-teal-600,
html.dark .text-teal-700,
html.dark .text-teal-800,
html.dark .text-teal-900,
html.ews-theme-dark-default:not(.light) .text-emerald-500,
html.ews-theme-dark-default:not(.light) .text-emerald-600,
html.ews-theme-dark-default:not(.light) .text-emerald-700,
html.ews-theme-dark-default:not(.light) .text-emerald-800,
html.ews-theme-dark-default:not(.light) .text-emerald-900,
html.ews-theme-dark-default:not(.light) .text-green-500,
html.ews-theme-dark-default:not(.light) .text-green-600,
html.ews-theme-dark-default:not(.light) .text-green-700,
html.ews-theme-dark-default:not(.light) .text-green-800,
html.ews-theme-dark-default:not(.light) .text-green-900,
html.ews-theme-dark-default:not(.light) .text-lime-500,
html.ews-theme-dark-default:not(.light) .text-lime-600,
html.ews-theme-dark-default:not(.light) .text-lime-700,
html.ews-theme-dark-default:not(.light) .text-lime-800,
html.ews-theme-dark-default:not(.light) .text-lime-900,
html.ews-theme-dark-default:not(.light) .text-teal-500,
html.ews-theme-dark-default:not(.light) .text-teal-600,
html.ews-theme-dark-default:not(.light) .text-teal-700,
html.ews-theme-dark-default:not(.light) .text-teal-800,
html.ews-theme-dark-default:not(.light) .text-teal-900 {
  color: var(--ews-positive-fg) !important;
}
html.dark .border-emerald-100,
html.dark .border-emerald-200,
html.dark .border-emerald-300,
html.dark .border-green-100,
html.dark .border-green-200,
html.dark .border-green-300,
html.dark .border-lime-100,
html.dark .border-lime-200,
html.dark .border-lime-300,
html.dark .border-teal-100,
html.dark .border-teal-200,
html.dark .border-teal-300,
html.ews-theme-dark-default:not(.light) .border-emerald-100,
html.ews-theme-dark-default:not(.light) .border-emerald-200,
html.ews-theme-dark-default:not(.light) .border-emerald-300,
html.ews-theme-dark-default:not(.light) .border-green-100,
html.ews-theme-dark-default:not(.light) .border-green-200,
html.ews-theme-dark-default:not(.light) .border-green-300,
html.ews-theme-dark-default:not(.light) .border-lime-100,
html.ews-theme-dark-default:not(.light) .border-lime-200,
html.ews-theme-dark-default:not(.light) .border-lime-300,
html.ews-theme-dark-default:not(.light) .border-teal-100,
html.ews-theme-dark-default:not(.light) .border-teal-200,
html.ews-theme-dark-default:not(.light) .border-teal-300 {
  border-color: var(--ews-positive-border) !important;
}

/* minor: gray, slate, zinc, neutral, stone */
html.dark .text-gray-400,
html.dark .text-gray-500,
html.dark .text-slate-400,
html.dark .text-slate-500,
html.dark .text-zinc-400,
html.dark .text-zinc-500,
html.dark .text-neutral-400,
html.dark .text-neutral-500,
html.dark .text-stone-400,
html.dark .text-stone-500,
html.ews-theme-dark-default:not(.light) .text-gray-400,
html.ews-theme-dark-default:not(.light) .text-gray-500,
html.ews-theme-dark-default:not(.light) .text-slate-400,
html.ews-theme-dark-default:not(.light) .text-slate-500,
html.ews-theme-dark-default:not(.light) .text-zinc-400,
html.ews-theme-dark-default:not(.light) .text-zinc-500,
html.ews-theme-dark-default:not(.light) .text-neutral-400,
html.ews-theme-dark-default:not(.light) .text-neutral-500,
html.ews-theme-dark-default:not(.light) .text-stone-400,
html.ews-theme-dark-default:not(.light) .text-stone-500 {
  color: var(--ews-text-muted) !important;
}
html.dark .text-gray-600,
html.dark .text-gray-700,
html.dark .text-slate-600,
html.dark .text-slate-700,
html.dark .text-zinc-600,
html.dark .text-zinc-700,
html.dark .text-neutral-600,
html.dark .text-neutral-700,
html.dark .text-stone-600,
html.dark .text-stone-700,
html.ews-theme-dark-default:not(.light) .text-gray-600,
html.ews-theme-dark-default:not(.light) .text-gray-700,
html.ews-theme-dark-default:not(.light) .text-slate-600,
html.ews-theme-dark-default:not(.light) .text-slate-700,
html.ews-theme-dark-default:not(.light) .text-zinc-600,
html.ews-theme-dark-default:not(.light) .text-zinc-700,
html.ews-theme-dark-default:not(.light) .text-neutral-600,
html.ews-theme-dark-default:not(.light) .text-neutral-700,
html.ews-theme-dark-default:not(.light) .text-stone-600,
html.ews-theme-dark-default:not(.light) .text-stone-700 {
  color: var(--ews-text-secondary) !important;
}
html.dark .text-gray-800,
html.dark .text-gray-900,
html.dark .text-slate-800,
html.dark .text-slate-900,
html.dark .text-zinc-800,
html.dark .text-zinc-900,
html.dark .text-neutral-800,
html.dark .text-neutral-900,
html.dark .text-stone-800,
html.dark .text-stone-900,
html.ews-theme-dark-default:not(.light) .text-gray-800,
html.ews-theme-dark-default:not(.light) .text-gray-900,
html.ews-theme-dark-default:not(.light) .text-slate-800,
html.ews-theme-dark-default:not(.light) .text-slate-900,
html.ews-theme-dark-default:not(.light) .text-zinc-800,
html.ews-theme-dark-default:not(.light) .text-zinc-900,
html.ews-theme-dark-default:not(.light) .text-neutral-800,
html.ews-theme-dark-default:not(.light) .text-neutral-900,
html.ews-theme-dark-default:not(.light) .text-stone-800,
html.ews-theme-dark-default:not(.light) .text-stone-900 {
  color: var(--ews-text) !important;
}
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-zinc-100,
html.dark .border-zinc-200,
html.dark .border-zinc-300,
html.dark .border-neutral-100,
html.dark .border-neutral-200,
html.dark .border-neutral-300,
html.dark .border-stone-100,
html.dark .border-stone-200,
html.dark .border-stone-300,
html.ews-theme-dark-default:not(.light) .border-gray-100,
html.ews-theme-dark-default:not(.light) .border-gray-200,
html.ews-theme-dark-default:not(.light) .border-gray-300,
html.ews-theme-dark-default:not(.light) .border-slate-100,
html.ews-theme-dark-default:not(.light) .border-slate-200,
html.ews-theme-dark-default:not(.light) .border-slate-300,
html.ews-theme-dark-default:not(.light) .border-zinc-100,
html.ews-theme-dark-default:not(.light) .border-zinc-200,
html.ews-theme-dark-default:not(.light) .border-zinc-300,
html.ews-theme-dark-default:not(.light) .border-neutral-100,
html.ews-theme-dark-default:not(.light) .border-neutral-200,
html.ews-theme-dark-default:not(.light) .border-neutral-300,
html.ews-theme-dark-default:not(.light) .border-stone-100,
html.ews-theme-dark-default:not(.light) .border-stone-200,
html.ews-theme-dark-default:not(.light) .border-stone-300 {
  border-color: var(--ews-border) !important;
}


/* --------------------------------------------------------------------------
   14. LEGACY COMPONENT BRIDGE (dark theme only)

   The templates define their own `.card`, `.stat-card`, `.section-title`,
   `.data-label`, `.nav-item`, `.tab-btn-inactive` and `.theme-toggle`, plus raw
   table/input elements. Their dark variants used to be ~20 more hand-written
   rules of hardcoded hex inline in each template.

   Restated here from tokens. Structural neutrals are distinguished on purpose --
   page vs card vs well -- which a blanket "all neutral backgrounds become one
   colour" rule could not do. Same intent as section 13: as templates adopt
   .ews-card / .ews-table / .ews-tab, rules here can be deleted.
   -------------------------------------------------------------------------- */

html.dark body,
html.dark main,
html.ews-theme-dark-default:not(.light) body,
html.ews-theme-dark-default:not(.light) main {
  background-color: var(--ews-bg) !important;
  color: var(--ews-text) !important;
}

/* Structural surfaces. bg-gray-100 is the page in result.html; bg-white and
   bg-gray-50/slate-50 are cards; slate-100 is a hover/well tone. */
html.dark .bg-gray-100,
html.dark .bg-slate-950,
html.ews-theme-dark-default:not(.light) .bg-gray-100 {
  background-color: var(--ews-bg) !important;
}
html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-slate-50,
html.ews-theme-dark-default:not(.light) .bg-white,
html.ews-theme-dark-default:not(.light) .bg-gray-50,
html.ews-theme-dark-default:not(.light) .bg-slate-50 {
  background-color: var(--ews-surface) !important;
}
html.dark .bg-gray-200,
html.dark .bg-slate-100,
html.dark .bg-slate-200,
html.ews-theme-dark-default:not(.light) .bg-slate-100 {
  background-color: var(--ews-surface-hover) !important;
}

html.dark .text-black { color: var(--ews-text) !important; }

/* Neutral text-300 is a decorative light grey in the light theme; on a dark
   surface it needs lifting to stay legible. (text-pink-600/700 were also in the
   old allow-list but appear nowhere in the markup, so they are not restated.) */
html.dark .text-gray-300,
html.dark .text-slate-300,
html.ews-theme-dark-default:not(.light) .text-gray-300,
html.ews-theme-dark-default:not(.light) .text-slate-300 {
  color: var(--ews-text-secondary) !important;
}

/* Borders and dividers */
html.dark .border-b,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-slate-100,
html.dark .border-slate-200 { border-color: var(--ews-border) !important; }
html.dark .divide-gray-200 > *,
html.dark .divide-gray-100 > *,
html.dark .divide-slate-200 > * { border-color: var(--ews-border) !important; }

/* Cards. The gradient is kept because the light theme has one, but it is now
   built from surface tokens rather than two hardcoded slates. */
html.dark .card {
  background: linear-gradient(to bottom right, var(--ews-surface), var(--ews-surface-raised)) !important;
  border-color: var(--ews-border) !important;
  box-shadow: var(--ews-shadow-lg) !important;
}
html.dark .card:hover { box-shadow: var(--ews-shadow-lg) !important; }
html.dark .stat-card {
  background: linear-gradient(135deg, var(--ews-surface-raised) 0%, var(--ews-surface) 100%) !important;
  border-color: var(--ews-border) !important;
}
html.dark .stat-card:hover { border-color: var(--ews-brand-border) !important; }

html.dark .section-title {
  color: var(--ews-text) !important;
  border-bottom-color: var(--ews-border) !important;
}
html.dark .data-label { color: var(--ews-text-muted) !important; }
html.dark .metric-desc { color: var(--ews-text-muted) !important; }

/* Nav + tabs */
html.dark .nav-item { color: var(--ews-text-secondary) !important; }
html.dark .nav-item:hover {
  background: var(--ews-brand-soft) !important;
  color: var(--ews-brand) !important;
}
html.dark .tab-btn-inactive {
  background: var(--ews-surface-raised) !important;
  color: var(--ews-text-secondary) !important;
  border-color: var(--ews-border) !important;
}
html.dark .tab-btn-inactive:hover {
  color: var(--ews-brand) !important;
  border-color: var(--ews-brand-border) !important;
}

/* Raw tables — the templates use bare <table> markup in several places. */
html.dark table thead tr,
html.dark thead th {
  background: var(--ews-surface-sunken) !important;
  color: var(--ews-text-secondary) !important;
  border-color: var(--ews-border) !important;
}
html.dark tbody tr { border-color: var(--ews-border) !important; }
html.dark tbody tr:hover { background: var(--ews-surface-hover) !important; }
html.dark td { color: var(--ews-text) !important; border-color: var(--ews-border) !important; }

/* Form controls */
html.dark input,
html.dark select,
html.dark textarea,
html.ews-theme-dark-default:not(.light) input,
html.ews-theme-dark-default:not(.light) select,
html.ews-theme-dark-default:not(.light) textarea {
  background: var(--ews-surface-raised) !important;
  color: var(--ews-text) !important;
  border-color: var(--ews-border-strong) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--ews-text-muted) !important; }

/* Theme toggle */
html.dark .theme-toggle {
  background: var(--ews-surface-raised) !important;
  color: var(--ews-text-secondary) !important;
  border-color: var(--ews-border) !important;
}
html.dark .theme-toggle:hover {
  background: var(--ews-surface-hover) !important;
  color: var(--ews-brand) !important;
}

/* Scrollbars */
html.dark ::-webkit-scrollbar-track { background: var(--ews-surface); }
html.dark ::-webkit-scrollbar-thumb { background: var(--ews-border-strong); }
html.dark ::-webkit-scrollbar-thumb:hover { background: var(--ews-text-muted); }

/* --------------------------------------------------------------------------
   15. CHART TOKENS

   The charts previously carried twelve hand-picked colour arrays, one per
   chart, so the same hue meant different things on different charts and
   severity red (#ef4444) doubled as "series 3" in a RISK product. They also
   hardcoded light-theme label colours, which is why the legend measured
   1.73:1 in dark mode.

   One fixed categorical order now serves every chart. Slots are assigned in
   order and never cycled; colour follows the entity, not its rank, so
   filtering a series out cannot repaint the survivors.

   VALIDATED, not eyeballed — scripts/validate_palette.js against the real EWS
   card surfaces:
     light (#ffffff): lightness PASS · chroma PASS · CVD worst adjacent ΔE 9.1
                      · normal-vision worst 19.6 · contrast WARN on 3 slots
     dark  (#0f172a): lightness PASS · chroma PASS · CVD worst adjacent ΔE 8.4
                      · normal-vision worst 19.3 · contrast PASS (all >= 3:1)

   The light-mode WARN triggers the relief rule: those charts ship a legend
   plus a table view, so identity never rests on colour alone.

   Past 8 series, fold the tail into "Other" or facet — never generate a 9th
   hue, it will not survive CVD.

   Severity tokens are NOT here on purpose. Status colour means good/bad and is
   reserved; it must never be reused for series identity.
   -------------------------------------------------------------------------- */
:root {
  --ews-viz-1: #2a78d6;   /* blue    */
  --ews-viz-2: #eb6834;   /* orange  */
  --ews-viz-3: #1baf7a;   /* aqua    */
  --ews-viz-4: #eda100;   /* yellow  */
  --ews-viz-5: #e87ba4;   /* magenta */
  --ews-viz-6: #008300;   /* green   */
  --ews-viz-7: #4a3aa7;   /* violet  */
  --ews-viz-8: #e34948;   /* red     */

  /* Sequential — one hue, light to dark. Never a rainbow. */
  --ews-viz-seq-1: #cde2fb;
  --ews-viz-seq-2: #9ec5f4;
  --ews-viz-seq-3: #6da7ec;
  --ews-viz-seq-4: #3987e5;
  --ews-viz-seq-5: #256abf;
  --ews-viz-seq-6: #184f95;
  --ews-viz-seq-7: #0d366b;

  /* Diverging — warm/cool poles, neutral (not hued) midpoint. */
  --ews-viz-div-neg: #2a78d6;
  --ews-viz-div-mid: #f0efec;
  --ews-viz-div-pos: #e34948;

  /* Chrome: recessive by design. Solid hairlines — dashed grid reads as
     "threshold" or "projection" when it is just a grid. */
  --ews-viz-grid:    var(--ews-border);
  --ews-viz-axis:    var(--ews-text-muted);
  --ews-viz-label:   var(--ews-text-secondary);
  --ews-viz-surface: var(--ews-surface);
}

html.dark,
html.ews-theme-dark-default:not(.light) {
  /* Same eight hues, re-stepped for the dark surface — a selected dark palette,
     not an automatic flip of the light one. */
  --ews-viz-1: #3987e5;
  --ews-viz-2: #d95926;
  --ews-viz-3: #199e70;
  --ews-viz-4: #c98500;
  --ews-viz-5: #d55181;
  --ews-viz-6: #008300;
  --ews-viz-7: #9085e9;
  --ews-viz-8: #e66767;

  --ews-viz-seq-1: #0d366b;
  --ews-viz-seq-2: #184f95;
  --ews-viz-seq-3: #256abf;
  --ews-viz-seq-4: #3987e5;
  --ews-viz-seq-5: #6da7ec;
  --ews-viz-seq-6: #9ec5f4;
  --ews-viz-seq-7: #cde2fb;

  --ews-viz-div-neg: #3987e5;
  --ews-viz-div-mid: #383835;
  --ews-viz-div-pos: #e66767;
}

/* ── Figure: a chart is a titled figure with an optional table view ──────── */
.ews-figure { display: grid; gap: var(--ews-sp-3); }
.ews-figure__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--ews-sp-3); flex-wrap: wrap;
}
.ews-figure__title { margin: 0; font: 600 var(--ews-fs-base) / 1.3 var(--ews-font); color: var(--ews-text); }
.ews-figure__note { margin: 0; font: 400 var(--ews-fs-xs) / 1.45 var(--ews-font); color: var(--ews-text-muted); }
.ews-figure__plot { min-height: 12rem; }

/* The table view is the relief for the light-mode contrast WARN and the text
   alternative for the chart's SVG, which screen readers cannot read. */
.ews-figure__toggle {
  font: 600 var(--ews-fs-2xs) / 1 var(--ews-font);
  color: var(--ews-text-secondary);
  background: none; border: 1px solid var(--ews-border-strong);
  border-radius: var(--ews-r-sm); padding: 0.25rem var(--ews-sp-2); cursor: pointer;
}
.ews-figure__toggle:hover { background: var(--ews-surface-hover); color: var(--ews-text); }
.ews-figure__table { overflow-x: auto; }
.ews-figure__table table { width: 100%; border-collapse: collapse; font: 400 var(--ews-fs-sm)/1.5 var(--ews-font); }
.ews-figure__table th, .ews-figure__table td {
  text-align: left; padding: var(--ews-sp-2) var(--ews-sp-3);
  border-bottom: 1px solid var(--ews-border); color: var(--ews-text);
}
.ews-figure__table th { color: var(--ews-text-secondary); font-weight: 600; font-size: var(--ews-fs-xs); text-transform: uppercase; letter-spacing: .05em; }
.ews-figure__table td.num { text-align: right; font-family: var(--ews-font-mono); font-variant-numeric: tabular-nums; }

/* Legend — always present for 2+ series, so identity is never colour-alone. */
.ews-viz-legend { display: flex; flex-wrap: wrap; gap: var(--ews-sp-2) var(--ews-sp-4); margin: 0; padding: 0; list-style: none; }
.ews-viz-legend li { display: inline-flex; align-items: center; gap: var(--ews-sp-2); font: 500 var(--ews-fs-xs)/1.4 var(--ews-font); color: var(--ews-text-secondary); }
.ews-viz-legend .swatch { width: .625rem; height: .625rem; border-radius: 2px; flex: none; }

/* --------------------------------------------------------------------------
   15. BRANDED SECTION LOADER

   A Timble Glance mark with an orbiting ring, shown briefly when the analyst
   switches module.

   IMPORTANT — this is a FLOURISH, not a gate. The panels are all already in the
   DOM, so there is genuinely nothing to wait for. An earlier version of this
   screen faked `650 + random(550)` ms of latency on every tab switch and hid
   the content behind a blur while it slept; that is not what this is. The new
   panel is rendered and interactive underneath from frame one, and the overlay
   fades off on its own — it never blocks input and never delays content.

   Tune or kill it with one value: --ews-flash-ms. Set it to 0 and the whole
   effect disappears. It is skipped entirely under prefers-reduced-motion.
   -------------------------------------------------------------------------- */

:root { --ews-flash-ms: 420ms; }

.ews-flash {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  /* Deliberately translucent: the analyst can see the new panel resolving
     behind the mark, which is what makes it read as a reveal rather than a
     wait. */
  background: color-mix(in srgb, var(--ews-bg) 72%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  /* Never intercept a click, even mid-animation. */
  pointer-events: none;
  opacity: 0;
}
/* Fallback for browsers without color-mix(). */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .ews-flash { background: var(--ews-surface-sunken); opacity: .72; }
}

.ews-flash.is-on {
  animation: ews-flash-out var(--ews-flash-ms) cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes ews-flash-out {
  0%   { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

.ews-flash__badge {
  position: relative;
  width: 4.25rem;
  height: 4.25rem;
  display: grid;
  place-items: center;
}

/* The orbiting ring. A conic gradient masked to an annulus, so it is one
   element and one animation rather than a spritesheet. */
.ews-flash__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
              transparent 0deg,
              transparent 210deg,
              var(--ews-brand) 320deg,
              transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: ews-spin 900ms linear infinite;
}
@keyframes ews-spin { to { transform: rotate(1turn); } }

/* A second, slower ring going the other way gives the mark depth without
   another asset. */
.ews-flash__ring--alt {
  inset: .45rem;
  background: conic-gradient(from 180deg,
              transparent 0deg,
              transparent 250deg,
              var(--ews-brand-strong) 340deg,
              transparent 360deg);
  animation-duration: 1400ms;
  animation-direction: reverse;
  opacity: .7;
}

/* Same black-logo problem as the landing page: the mark is effectively solid
   black, and this overlay is dark, so it needs a light disc behind it to be
   visible at all. */
.ews-flash__mark {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  padding: .3rem;
  border-radius: 50%;
  background: #f5f7fc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  animation: ews-flash-pulse 900ms ease-in-out infinite;
}
@keyframes ews-flash-pulse {
  0%, 100% { transform: scale(1);    opacity: .92; }
  50%      { transform: scale(1.09); opacity: 1; }
}

.ews-flash__label {
  position: absolute;
  top: calc(100% + .6rem);
  white-space: nowrap;
  font: 700 var(--ews-fs-2xs) / 1 var(--ews-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ews-text-muted);
}

/* The panel itself slides in from the left — same direction as everything
   else in the product. Cheap: transform + opacity only, both compositor-only
   properties, so this does not cause layout. */
.ews-panel-enter {
  animation: ews-panel-in 260ms cubic-bezier(.32, .72, 0, 1) both;
}
@keyframes ews-panel-in {
  from { opacity: 0; transform: translate3d(-10px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* No flash, no slide, no spin. The section simply changes. */
  .ews-flash, .ews-flash.is-on { display: none !important; animation: none !important; }
  .ews-panel-enter { animation: none !important; }
  .ews-flash__ring, .ews-flash__mark { animation: none !important; }
}

@media print { .ews-flash { display: none !important; } }