/* ======================================================================
   VaultorNet — theme layer  (light / dark) + the language & theme switches

   Loaded after ds.css, app.css and v20.css so everything here wins.

   v23.5: dark mode carries the SAME palette as light mode — the
   VaultorNet green, the green/amber/red status scale, the blue and violet
   accents, and the twelve module hues — but paints every coloured surface
   FLAT. Where light mode uses a two-stop gradient, dark mode uses one
   solid colour. The hues are unchanged; only their lightness moves,
   because a value chosen to sit on white cannot sit on near-black.

   Light mode is untouched. Every rule below that changes appearance is
   scoped to [data-theme="dark"].

   The app's own stylesheets are almost entirely tokenised, so most of the
   work is done by redefining custom properties. The "surgical" section
   covers the rules that bake a literal colour in, which no token override
   can reach, and section 4b covers the gradients.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1. Shared additions — used by both themes
   ---------------------------------------------------------------------- */
:root {
  /* The card/paper colour. Light mode keeps the white the app already had;
     dark mode re-points it, which is what lets the surgical fixes below be
     a one-line change rather than a rewrite. */
  --vn-card: #ffffff;
  --vn-raised: #ffffff;
  --vn-ink-soft: color-mix(in srgb, var(--color-text) 66%, transparent);
  --vn-glass: color-mix(in srgb, #ffffff 55%, transparent);
  --vn-glass-edge: color-mix(in srgb, #ffffff 60%, transparent);
  --vn-shine: #ffffff;
  /* Solid accent for fills that carry white text, kept separate from the
     accent used for links so dark mode can move the two independently. */
  --vn-accent-solid: var(--color-accent-700);
  --vn-scrim: rgba(20, 26, 23, .46);
  color-scheme: light;
}

/* ----------------------------------------------------------------------
   2. Dark theme tokens — FULL COLOUR, FLAT (v23.5)
   ----------------------------------------------------------------------
   Dark mode carries the same palette as light mode: the VaultorNet green,
   the green/amber/red status scale, the blue and violet accents, and the
   twelve module hues. What it does NOT carry is a single gradient — every
   surface that light mode paints as a two-stop blend is painted here as
   one flat colour (see section 5).

   The hues are the same hues; only their lightness moves, because a value
   picked to sit on white cannot sit on near-black. Pale fills (-100/-200)
   become deep tints, and the dark text steps (-700/-800) become the bright
   end of the ramp, since that is how each step is actually used.

   Measured pairings:
     text  #ffffff on bg #0d1210 ............ 19.2:1
     text  #ffffff on surface #151c19 ....... 16.6:1
     muted #9fada6 on surface ...............  7.4:1
     white on solid accent #26794a ..........  5.4:1
     accent text #5fd08d on raised ..........  8.3:1
     white on every flat tile (section 5) ...  5.0:1 or better
     every status pill (fg on its own bg) ...  8.0:1 or better
   ---------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0d1210;
  --color-surface: #151c19;
  --color-text: #ffffff;
  --color-divider: rgba(214, 236, 224, .15);

  --vn-card: #151c19;
  --vn-raised: #1b231f;
  --vn-ink-soft: #9fada6;
  --vn-scrim: rgba(4, 7, 6, .68);

  /* Accent — hue 146, the VaultorNet green. -100/-200/-300 are pale fills
     in light mode so they become deep tints; -600 stays a solid button
     fill; -700/-800 are used overwhelmingly as `color:` so they become the
     bright end. */
  --color-accent: #26794a;
  --color-accent-2: #26794a;
  --color-accent-50:  #101d16;
  --color-accent-100: #12251a;
  --color-accent-200: #163020;
  --color-accent-300: #1d4530;
  --color-accent-400: #2c7147;
  --color-accent-500: #34a262;
  --color-accent-600: #26794a;
  --color-accent-700: #5fd08d;
  --color-accent-800: #86dfa8;
  --color-accent-900: #b6eec9;

  --color-accent-2-50:  #101d16;
  --color-accent-2-100: #12251a;
  --color-accent-2-200: #163020;
  --color-accent-2-300: #1d4530;
  --color-accent-2-400: #2c7147;
  --color-accent-2-500: #34a262;
  --color-accent-2-600: #26794a;
  --color-accent-2-700: #5fd08d;
  --color-accent-2-800: #86dfa8;
  --color-accent-2-900: #b6eec9;

  /* Neutrals invert: 100–300 are pale backgrounds in light mode,
     600–900 are body and heading text. */
  --color-neutral-50:  #111815;
  --color-neutral-100: #151c19;
  --color-neutral-200: #1e2621;
  --color-neutral-300: #2a342e;
  --color-neutral-400: #47544c;
  --color-neutral-500: #6b7a72;
  --color-neutral-600: #94a39a;
  --color-neutral-700: #b5c2ba;
  --color-neutral-800: #d2dcd6;
  --color-neutral-900: #eef3f0;

  /* The second and third hues — blue for information, amber for
     attention, violet for AI. Same hues as light mode, re-levelled. */
  --color-info-100: #14243a;  --color-info-500: #4d90e0;  --color-info-700: #9cc4f5;
  --color-warn2-100:#33240f;  --color-warn2-500:#e08a1e;  --color-warn2-700:#f5c877;
  --color-ai-100:   #211c3d;  --color-ai-500:   #8d74f0;  --color-ai-700:   #c3b4fb;
  --bg-success: #13301f;

  /* Status. Each pill keeps its hue: a deep tinted bed and a light ink. */
  --st-good-bg: #13301f;  --st-good-fg: #7fe0a6;
  --st-warn-bg: #33240f;  --st-warn-fg: #f5c877;
  --st-bad-bg:  #351717;  --st-bad-fg:  #f2a0a0;
  --st-info-bg: #14243a;  --st-info-fg: #9cc4f5;
  --st-sign-bg: #2e2710;  --st-sign-fg: #ead79a;
  --st-ai-bg:   #211c3d;  --st-ai-fg:   #c3b4fb;

  --st-good: #34a262;
  --st-warn: #e0a63a;
  --st-bad:  #e0685a;
  --st-info: #4d90e0;
  --st-sign: #d9b84a;
  --st-off:  #47544c;

  --pf-good:        #34a262;
  --pf-good-bg: #13301f;  --pf-good-fg: #7fe0a6;
  --pf-warn-bg: #33240f;  --pf-warn-fg: #f5c877;  --pf-warn-border: #a8792c;
  --pf-bad-bg:  #351717;  --pf-bad-fg:  #f2a0a0;  --pf-bad-border: #8c3a3a;

  /* Charts — the green/amber/red readiness scale, re-levelled so each
     segment separates against a dark ground. */
  --cp-track:  rgba(255, 255, 255, .10);
  --cp-good:   #34a262;
  --cp-warn:   #e0a63a;
  --cp-bad:    #e0685a;
  --cp-mini-1: #e0c04a;
  --cp-mini-2: #e0a63a;
  --cp-mini-3: #4d90e0;

  /* Glass / sheen — the light theme builds these out of white at 25–60%,
     which on a dark ground reads as fog. Dropped to a whisper. */
  --vn-glass: rgba(255, 255, 255, .05);
  --vn-glass-edge: rgba(255, 255, 255, .10);
  --vn-shine: rgba(255, 255, 255, .12);

  --vn-accent-solid: #1d6b3c;

  /* Elevation on a dark ground comes from a hairline plus ambient depth,
     not from a soft grey blur that simply disappears. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .52);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .62);
}

/* Keep the page background honest even where a rule painted it directly. */
[data-theme="dark"] body { background: var(--color-bg); color: var(--color-text); }

/* ----------------------------------------------------------------------
   3. Module hues
   ----------------------------------------------------------------------
   shared/modules.php publishes --mod / --mod-tint / --mod-edge / --mod-ink
   as an INLINE style on <body>, on .pf-head and on each nav link, computed
   for a light ground: the tint sits at L=0.955 and the ink at L=0.38. On a
   dark ground that is a white block with near-black text on it.

   Inline styles outrank a stylesheet, so these need !important — but the
   hue is preserved, because both values are derived from --mod itself,
   which is still exactly the colour the module chose. Sections stay
   colour-coded in dark mode; only the lightness moves.
   ---------------------------------------------------------------------- */
[data-theme="dark"] body,
[data-theme="dark"] .pf-head,
[data-theme="dark"] .pf-navlink,
[data-theme="dark"] .pf-navdrop > summary {
  --mod-tint: color-mix(in srgb, var(--mod) 16%, #0d1210) !important;
  --mod-edge: color-mix(in srgb, var(--mod) 32%, #0d1210) !important;
  --mod-ink:  color-mix(in srgb, var(--mod) 55%, #ffffff) !important;
  --nav-mod-tint: color-mix(in srgb, var(--nav-mod, var(--mod)) 20%, #0d1210) !important;
  --nav-mod-ink:  color-mix(in srgb, var(--nav-mod, var(--mod)) 52%, #ffffff) !important;
}

/* ----------------------------------------------------------------------
   4. Surgical fixes — rules that hard-code a light surface
   ----------------------------------------------------------------------
   A hard-coded #fff used as *text on a coloured fill* is correct in both
   themes and is deliberately left alone. Only the ones used as a surface
   are re-pointed here.
   ---------------------------------------------------------------------- */
[data-theme="dark"] .pf-airec-detail,
[data-theme="dark"] .pf-related-risk,
[data-theme="dark"] .pf-tour-modal,
[data-theme="dark"] .pf-card,
[data-theme="dark"] .card,
[data-theme="dark"] .pf-drawer,
[data-theme="dark"] .pf-navdrop-panel,
[data-theme="dark"] .pf-chatbot-panel,
[data-theme="dark"] .pf-target-popover,
[data-theme="dark"] #pf-global-search-results {
  background: var(--vn-card);
  color: var(--color-text);
  border-color: var(--color-divider);
}

[data-theme="dark"] .pf-airec-detail { border-color: var(--color-accent-300); }
[data-theme="dark"] .pf-airec-skel-line { background: #1d2a23; }

/* Inputs, selects and textareas: the browser default is a white field. */
[data-theme="dark"] .input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--vn-raised);
  color: var(--color-text);
  border-color: var(--color-divider);
}
[data-theme="dark"] .input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #7d8c84; }
[data-theme="dark"] .input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--color-accent-500);
  outline-color: var(--color-accent-500);
}
/* The native date/time picker glyph is a dark icon on a dark field. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.75); }

/* Tables: zebra and hover rows were tuned for a white sheet. */
[data-theme="dark"] .table th { background: #121917; color: var(--color-neutral-700); }
[data-theme="dark"] .table tbody tr:hover { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .pf-listrow:hover,
[data-theme="dark"] .pf-actrow:hover { background: rgba(255, 255, 255, .04); }

/* Fills that carry white text must stay dark in dark mode, even though the
   -700 step they referenced is now the bright end of the ramp. */
[data-theme="dark"] .pf-login-brand,
[data-theme="dark"] .pf-chooser-half { background: var(--vn-accent-solid); color: #fff; }
[data-theme="dark"] .pf-tour-btn-primary:hover,
[data-theme="dark"] .pf-cm-next:hover { background: var(--vn-accent-solid); border-color: var(--vn-accent-solid); }
[data-theme="dark"] .qn-step.is-now .qn-step-n { background: var(--color-accent-500); color: #071009; }
[data-theme="dark"] .pf-airec-typing::after { background: var(--color-accent-500); }

/* Buttons. --color-accent is a fill in ~50 rules and text in two, so the
   token is levelled for the fills and the two text cases are restated.
   .btn-primary sets `color:var(--color-bg)`, which is light type on green
   in light mode and near-black type on green here — an inversion rather
   than a translation, so the white is put back. */
[data-theme="dark"] .btn-primary { color: #fff; }
[data-theme="dark"] .btn-ghost { color: var(--color-accent-700); }
[data-theme="dark"] .pf-section-sidebar-link.is-active,
[data-theme="dark"] .pf-chatbot-fab,
[data-theme="dark"] .pf-chatbot-msg-user { color: #fff; }
[data-theme="dark"] a:hover { color: var(--color-accent-700); }
[data-theme="dark"] .pf-navrow.is-active { background: var(--color-accent-100); color: var(--color-accent-700); }

/* The frosted-glass surfaces (tour card, navtrack, tiles) were literally
   white at 25–60%; on a dark ground they went milky. */
[data-theme="dark"] .pf-navtrack {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--color-divider);
}
[data-theme="dark"] .pf-navlink { color: var(--vn-ink-soft); }
[data-theme="dark"] .pf-navlink.is-active {
  background: var(--vn-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* Scrims sit over content, so they get deeper rather than lighter. */
[data-theme="dark"] .pf-drawer-backdrop,
[data-theme="dark"] .pf-tour-backdrop { background: var(--vn-scrim); }

/* Code, pre and quoted blocks. */
[data-theme="dark"] pre,
[data-theme="dark"] code,
[data-theme="dark"] .pf-mono { background: #111815; color: #cfe0d6; border-color: var(--color-divider); }

/* Anything still riding on a raw white or near-white literal. */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="#eef6ff"],
[data-theme="dark"] [style*="#f5f5f5"],
[data-theme="dark"] [style*="#f0f0f0"],
[data-theme="dark"] [style*="#f3f2ec"] {
  background: var(--vn-card) !important;
}

/* Images and logos that were drawn for a light sheet. */
[data-theme="dark"] .pf-logo-mark,
[data-theme="dark"] img.pf-invert-on-dark { filter: brightness(.92) contrast(1.04); }

/* Selection and scrollbars — small, but they give the theme away. */
[data-theme="dark"] ::selection { background: var(--color-accent-600); color: #fff; }
[data-theme="dark"] * { scrollbar-color: #33403a var(--color-bg); }
[data-theme="dark"] ::-webkit-scrollbar { width: 11px; height: 11px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #2b3832; border-radius: 999px; border: 3px solid var(--color-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3b4a43; }

/* ----------------------------------------------------------------------
   4b. Flat colour — no gradients in dark mode
   ----------------------------------------------------------------------
   Light mode paints its coloured surfaces as two-stop blends. Dark mode
   paints the same surfaces as ONE flat colour, keeping the hue each one
   already meant.

   The flat value is the gradient's deeper stop, not its lighter one or an
   average: on a near-black ground the light stop is what makes a tile glow,
   and the deep stop is also the end that keeps white type legible. Every
   value below clears 5:1 against #fff.

   Left alone deliberately: the shimmer used for skeleton loading, the
   conic-gradient progress rings, the mask-image composites and the radial
   dot inside a checked radio. Those are not decoration — they are how the
   component is drawn, and flattening them would erase the element.
   ---------------------------------------------------------------------- */
[data-theme="dark"] .pf-tile-compliance,
[data-theme="dark"] .pf-stat-chip.g-good { background: #1f6b40; }
[data-theme="dark"] .pf-tile-risk,
[data-theme="dark"] .pf-stat-chip.g-bad  { background: #b83527; }
[data-theme="dark"] .pf-tile-vendor,
[data-theme="dark"] .pf-stat-chip.g-info { background: #0a5fd6; }
[data-theme="dark"] .pf-tile-training,
[data-theme="dark"] .pf-stat-chip.g-ai   { background: #6a45e0; }
[data-theme="dark"] .pf-tile-phishing,
[data-theme="dark"] .pf-stat-chip.g-warn { background: #a85f06; }
[data-theme="dark"] .pf-tile-ai          { background: #0c7268; }

[data-theme="dark"] .pf-tile-compliance,
[data-theme="dark"] .pf-tile-risk,
[data-theme="dark"] .pf-tile-vendor,
[data-theme="dark"] .pf-tile-training,
[data-theme="dark"] .pf-tile-phishing,
[data-theme="dark"] .pf-tile-ai,
[data-theme="dark"] .pf-stat-chip { color: #fff; }

/* The diagonal sheen swept across cards is a white gradient overlay, and
   the ambient glow behind page headers is a radial one. Both are the most
   obvious gradients on a dark ground and the least load-bearing, so both
   go. .pf-sheen and .pf-ambient-glow are decorative overlay elements in
   their own right, so hiding them removes nothing but the effect. */
[data-theme="dark"] .pf-sheen,
[data-theme="dark"] .pf-ambient-glow { display: none; }
[data-theme="dark"] .pf-tourcard::before { background: none; }

/* The two bar fills that really are gradients (a 300→base blend) become
   the base colour. .pf-bar and .pf-gen-bar are deliberately NOT listed:
   they are already flat, and .pf-bar takes its colour from a per-instance
   --fill, so overriding it here would repaint every status bar green. */
[data-theme="dark"] .pf-export-fill,
[data-theme="dark"] .pf-tourcard-fill { background: var(--color-accent-500); }

/* The page header band was a module-tinted vertical fade. Flat tint plus
   the existing --mod-edge hairline carries it without the blend. */
[data-theme="dark"] .pf-head { background: var(--mod-tint); }

/* The tour card layered three white gradients over a translucent fill —
   on a dark ground that is fog with a seam through it. One flat raised
   surface instead, keeping the blur that makes it read as a panel. */
[data-theme="dark"] .pf-tourcard {
  background: var(--vn-raised);
  border-color: var(--color-divider);
  color: var(--color-text);
}
/* ----------------------------------------------------------------------
   5. The switches
   ----------------------------------------------------------------------
   Rendered by vn_switches() in shared/i18n.php. They are plain <a> links,
   so they work with the keyboard, with JavaScript off, and under the
   strict CSP (which forbids inline script).
   ---------------------------------------------------------------------- */
.vn-switches { display: inline-flex; align-items: center; gap: 6px; }

.vn-switch {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 9px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.vn-switch:hover {
  background: color-mix(in srgb, var(--color-text) 9%, transparent);
  border-color: color-mix(in srgb, var(--color-text) 26%, transparent);
  text-decoration: none;
}
.vn-switch:active { transform: scale(.96); }
.vn-switch:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}

.vn-switch-icon { display: inline-flex; align-items: center; opacity: .85; }
.vn-switch-text { letter-spacing: .02em; }

/* The language control is a two-segment track, so the current language is
   legible at a glance rather than only implied by what the button offers. */
.vn-switch-lang { padding: 0 4px; gap: 2px; }
.vn-switch-seg {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: var(--vn-ink-soft);
  transition: background .16s ease, color .16s ease;
}
.vn-switch-seg.is-on {
  background: var(--color-accent);
  color: #fff;
}
[data-theme="dark"] .vn-switch-seg.is-on { background: var(--color-accent-500); color: #071009; }

/* Hindi sets longer ascenders/descenders than Latin at the same size. */
html[lang="hi"] .vn-switch-seg { font-size: 12px; }

/* Floating variant, injected on the pages that have no top bar of their
   own — sign-in, password reset, and the public training / phishing /
   vendor-questionnaire pages. */
.vn-switches-floating {
  position: fixed;
  top: 14px; right: 14px;
  z-index: 9000;
  padding: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
}
@media (max-width: 640px) {
  .vn-switches-floating { top: 8px; right: 8px; }
  .vn-switches-floating .vn-switch-text { display: none; }
  .vn-switches-floating .vn-switch-theme { padding: 0 8px; }
}

/* In the top bar the switches sit in a row of 36px round icon buttons, so
   they take the same height from --pf-topbar-h and drop the pill fill to
   avoid competing with the bell and the message icons beside them. */
.pf-topbar-switches .vn-switch { height: var(--pf-topbar-h, 36px); background: transparent; }
.pf-topbar-switches .vn-switch-text { display: none; }
@media (min-width: 1100px) {
  .pf-topbar-switches .vn-switch-theme .vn-switch-text { display: inline; }
}

/* ----------------------------------------------------------------------
   6. Hindi typography
   ----------------------------------------------------------------------
   Devanagari needs a little more line-height than the Latin measure the
   type scale was set for, or conjuncts and matras start to collide.
   ---------------------------------------------------------------------- */
html[lang="hi"] body {
  font-family: "Noto Sans Devanagari", "Nirmala UI", "Mangal", var(--font-body);
  line-height: 1.72;
}
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3,
html[lang="hi"] h4,
html[lang="hi"] h5,
html[lang="hi"] h6 {
  font-family: "Noto Sans Devanagari", "Nirmala UI", "Mangal", var(--font-heading);
  line-height: 1.34;
  letter-spacing: 0;
}
html[lang="hi"] .u-caps,
html[lang="hi"] h6 { letter-spacing: .01em; }
/* Devanagari has no case, so upper-casing it does nothing but break
   ligatures in some fonts. */
html[lang="hi"] .u-caps,
html[lang="hi"] .pf-login-kicker,
html[lang="hi"] .pf-target-popover-kicker { text-transform: none; }
html[lang="hi"] .btn,
html[lang="hi"] .pf-pill,
html[lang="hi"] .tag { line-height: 1.45; }

/* ----------------------------------------------------------------------
   7. Motion
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vn-switch { transition: none; }
  .vn-switch:active { transform: none; }
}

/* ----------------------------------------------------------------------
   v23.6 — the three-column answering screen, the technology picker and
   the policy intake list.

   These all use --color-bg as a raised surface, which in the dark theme
   is the page itself, so each one would read as a hole rather than a
   card. Re-pointed at --vn-card the way every other panel above is.
   ---------------------------------------------------------------------- */
[data-theme="dark"] .fm-side-card,
[data-theme="dark"] .pk-head,
[data-theme="dark"] .pk-tile-b,
[data-theme="dark"] .pk-uploads {
  background: var(--vn-card);
  border-color: var(--color-divider);
}
[data-theme="dark"] .pk-uploads-h,

[data-theme="dark"] .fm-ev-list li,
[data-theme="dark"] .pk-tile-ic:not(.has-logo),
[data-theme="dark"] .pk-group-n {
  background: color-mix(in srgb, var(--vn-card) 82%, #ffffff 4%);
  border-color: var(--color-divider);
}
[data-theme="dark"] .pk-box { background: var(--vn-card); }
[data-theme="dark"] .qn-intake,
[data-theme="dark"] .qn-autonote,
[data-theme="dark"] .pk-upl.is-done {
  background: color-mix(in srgb, var(--color-accent-700) 20%, var(--vn-card));
  border-color: var(--color-accent-500);
}
/* The sticky action bar sits over content, so it needs a real surface
   rather than a translucent tint of a light one. */
[data-theme="dark"] .pk-bar {
  background: color-mix(in srgb, var(--vn-card) 92%, transparent);
  border-color: var(--color-divider);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, .45);
}

/* v23.7 — the control register's work-list treatment. */
[data-theme="dark"] .cr-note,
[data-theme="dark"] .cr-iso {
  background: var(--vn-card);
  border-color: var(--color-divider);
}
[data-theme="dark"] .cr-iso summary:hover {
  background: color-mix(in srgb, var(--vn-card) 82%, #ffffff 4%);
}
[data-theme="dark"] .cr-steps {
  background: color-mix(in srgb, var(--color-accent-700) 20%, var(--vn-card));
  border-color: var(--color-accent-500);
}

/* No colour overrides for the accent-toned labels in any of these blocks.
   The dark palette above already INVERTS the ramp — --color-accent-800 is
   #86dfa8 here and --color-accent-300 is #1d4530 — so a rule written
   against accent-800 in app.css comes out light on dark by itself. An
   override pointing at accent-300 darkens text that was already right,
   which is how it was got wrong the first time. The same goes for
   --pf-good-fg, which is remapped to a light green above. */

/* v23.8 — the rule between the examples and the auditor tips inside the AI
   insight card. The light-theme value is a hard-coded tint of the card. */
[data-theme="dark"] .fm-ai-tips { border-top-color: color-mix(in srgb, var(--color-text) 22%, transparent); }