/* ============================================================
   ZAK COLOURS — zak-colours.css
   Dark mode: the Zak ONE kit's dark palette (27-Oct-2026, docs/ZAK-ONE-UI.md).

   The page is Ink (#141414), cards #1e1c1a with a #3a3630 line and a deeper
   shadow, white headings, Warm Chalk body copy, Ash meta. The accent fill is
   Deep Orange with white words, as in light; orange words are #f0834f. Until
   27-Oct-2026 dusk was the 2027 World of Facades charcoal, with cream text and
   a coral kicker.

   html[data-bs-theme="dark"] retunes the ZAK tokens themselves (so every z-
   component follows), and the section at the bottom maps the --bs-* tokens for
   dark the way zak-bridge.css maps them for light: scoped
   :where(html[data-bs-theme="dark"]) .zak-theme, so a screen that opted out of
   the theme is untouched. zak-bridge.css stays light-only, exactly as
   ZakThemeTest pins it; this file is dark's bridge.

   Loaded after zak-bridge.css (see AssetVersion::ZAK_THEME — order matters
   for the shell rules below, which carry the same !important as the bridge's
   and must win on source order in dark mode).
   ============================================================ */

/* ------------------------------------------------------------
   1. DARK — the ZAK tokens, retuned
   Fills stay solid, text lifts until it reads on a dark card. --on-lift is
   what sits on a lifted fill: Ink, because a pale fill needs dark words.
   ------------------------------------------------------------ */
html[data-bs-theme="dark"] {
  --paper:  #141414;   /* Ink, the page */
  --paper2: #282622;   /* surface-2 */
  --card:   #1e1c1a;
  --card-edge: #3a3630;

  --ink:    #ffffff;   /* headings, 17.0:1 on a card */
  --body:   #f6f2ec;   /* Warm Chalk, 15.2:1 */
  --muted:  #a7a094;   /* Ash, 6.55:1 on a card */

  --brand:     #d9531f;
  --brand-ink: #f0834f;
  --brand-2:   #f0834f;

  --red:    #e0574a;
  --green:  #4bbe86;
  --amber:  #d59433;
  --gold:   #d59433;
  --blue:   #8db8ff;

  --red-text:   #ff8a80;   /* 7.44:1 on a card */
  --green-text: #6fd08c;
  --amber-text: #f2b544;
  --gold-text:  #f2b544;
  --blue-text:  #8db8ff;

  --red-soft:   #3d1c1a;
  --green-soft: #16301f;
  --amber-soft: #3a2c12;
  --blue-soft:  #1a2840;
  --gray-soft:  #2c2926;
  --gray-text:  #d2cbc0;

  --red-deep:   #e0574a;
  --kicker:     var(--muted);

  --line:   #3a3630;
  --line2:  #2c2926;

  --bar:    #141414;
  --on-bar: #ffffff;

  --on-lift: #141414;
  --on-red:  #141414;

  --shadow: 0 8px 26px rgba(0, 0, 0, .5);

  /* The accent in dark: the same Deep Orange fill with white on it (5.02:1);
     words in the lighter orange, a selected row on the dark orange well. */
  --accent:          #c1471a;
  --accent-strong:   #a63c15;
  --accent-text:     #f0834f;
  --accent-soft:     #3a2219;
  --on-accent:       #ffffff;
  --accent-rgb:      193, 71, 26;
  --accent-text-rgb: 240, 131, 79;
}

/* The z-root shell tokens zak-ui.css sets for light, retuned; and the browser
   told the surface is dark so its own controls and scrollbars follow. */
html[data-bs-theme="dark"] .z-root {
  color-scheme: dark;
  --bar2: #282622;
  --bar-line: #3a3630;
}

/* ------------------------------------------------------------
   4. DUSK'S BRIDGE
   What zak-bridge.css does for light, done for dark, so Sneat's navy and
   purple never show again. Same shape: the token map first, then the
   surfaces, the controls, the shell, and the widgets that read no tokens.
   Scoped :where(html[data-bs-theme="dark"]) .zak-theme throughout.
   ------------------------------------------------------------ */
:where(html[data-bs-theme="dark"]) .zak-theme {
  --bs-body-bg:        var(--paper);
  --bs-body-color:     var(--body);
  --bs-secondary-bg:   var(--paper2);
  --bs-tertiary-bg:    var(--card);
  --bs-border-color:   var(--line);
  --bs-border-radius:  var(--r);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-border-radius-xl: var(--r-lg);
  --bs-border-radius-pill: var(--r-pill);

  --bs-font-sans-serif: var(--font);
  --bs-body-font-family: var(--font);
  --bs-body-font-size: var(--size-md);
  --bs-body-line-height: var(--lh);

  --bs-primary:        var(--accent);
  --bs-danger:         var(--red);
  --bs-success:        var(--green);
  --bs-warning:        var(--amber);
  --bs-info:           var(--blue);

  --bs-danger-text-emphasis:  var(--red-text);
  --bs-success-text-emphasis: var(--green-text);
  --bs-warning-text-emphasis: var(--amber-text);
  --bs-info-text-emphasis:    var(--blue-text);
  --bs-primary-text-emphasis: var(--accent-text);
  --bs-secondary-text-emphasis: var(--zak-muted-text);

  --bs-secondary: var(--zak-muted-text);
  --bs-code-color: var(--accent-text);

  /* washes read the LIFTED values in dark: a wash of the deep fill vanishes */
  --bs-primary-rgb:   var(--accent-rgb);
  --bs-danger-rgb:   224, 87, 74;
  --bs-success-rgb:  75, 190, 134;
  --bs-warning-rgb:  213, 148, 51;
  --bs-info-rgb:     141, 184, 255;
  --bs-secondary-rgb: 167, 160, 148;
  --bs-body-color-rgb: 246, 242, 236;
  --bs-body-bg-rgb:  20, 20, 20;

  --bs-paper-bg: var(--paper);
  --bs-input-border-color: var(--line);

  --bs-primary-bg-subtle:   var(--accent-soft);
  --bs-secondary-bg-subtle: var(--line2);
  --bs-success-bg-subtle:   var(--green-soft);
  --bs-danger-bg-subtle:    var(--red-soft);
  --bs-warning-bg-subtle:   var(--amber-soft);
  --bs-info-bg-subtle:      var(--blue-soft);

  --bs-primary-border-subtle:   var(--brand);
  --bs-secondary-border-subtle: var(--line);
  --bs-success-border-subtle:   rgba(75, 190, 134, .4);
  --bs-danger-border-subtle:    rgba(224, 87, 74, .4);
  --bs-warning-border-subtle:   rgba(213, 148, 51, .4);
  --bs-info-border-subtle:      rgba(141, 184, 255, .4);

  --bs-primary-contrast:   var(--on-accent);
  --bs-success-contrast:   var(--on-lift);
  --bs-danger-contrast:    var(--on-lift);
  --bs-warning-contrast:   var(--on-lift);
  --bs-info-contrast:      var(--on-lift);
  --bs-secondary-contrast: var(--on-lift);

  --zak-muted-text: #a7a094;
  --zak-gold-text:  #f2b544;

  --bs-secondary-color: var(--zak-muted-text);
  --bs-heading-color:   var(--ink);
  --bs-link-color:      var(--accent-text);
  --bs-link-hover-color: var(--accent-strong);
  --bs-link-color-rgb:  var(--accent-text-rgb);
  --bs-custom-link-color: var(--accent-text);
  --bs-link-hover-color-rgb: 244, 160, 120;
  --bs-focus-ring-color: rgba(217, 83, 31, .5);

  /* the classic dashboard's Tailwind palette, as in light (zak-bridge.css, 1);
     ink-500 is its label grey in dark too, so it lifts to Ash, 6.55:1 on a card */
  --tw-color-white: var(--card);
  --tw-color-ink-50: #f6f2ec;  --tw-color-ink-100: #efeae3; --tw-color-ink-200: #e6e1db;
  --tw-color-ink-300: #d2cbc0; --tw-color-ink-400: #a7a094; --tw-color-ink-500: #a7a094;
  --tw-color-ink-600: #5e574e; --tw-color-ink-700: #3a3630; --tw-color-ink-800: #1e1c1a;
  --tw-color-ink-900: #141414;
  --tw-color-zwof-50: #3a2219;  --tw-color-zwof-100: #3a2219; --tw-color-zwof-200: #f4c9b6;
  --tw-color-zwof-300: #f0834f; --tw-color-zwof-400: #e06a36; --tw-color-zwof-500: #d9531f;
  --tw-color-zwof-600: #c1471a; --tw-color-zwof-700: #a63c15; --tw-color-zwof-800: #7a2c10;

  background-color: var(--paper);
  color: var(--body);
  font-family: var(--font);
}

/* surfaces */
:where(html[data-bs-theme="dark"]) .zak-theme .card,
:where(html[data-bs-theme="dark"]) .zak-theme .modal-content,
:where(html[data-bs-theme="dark"]) .zak-theme .dropdown-menu,
:where(html[data-bs-theme="dark"]) .zak-theme .offcanvas {
  background-color: var(--card);
  border: 1px solid var(--card-edge);
  box-shadow: var(--shadow);
}
:where(html[data-bs-theme="dark"]) .zak-theme .card { --bs-card-border-radius: var(--r-card); --bs-card-inner-border-radius: calc(var(--r-card) - 1px); --bs-card-border-color: var(--card-edge); }
:where(html[data-bs-theme="dark"]) .zak-theme .modal { --bs-modal-border-radius: var(--r-card); --bs-modal-inner-border-radius: calc(var(--r-card) - 1px); --bs-backdrop-bg: #000; --bs-backdrop-opacity: .6; }
:where(html[data-bs-theme="dark"]) .zak-theme .modal-content { box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
:where(html[data-bs-theme="dark"]) .zak-theme .dropdown-menu { --bs-dropdown-border-radius: var(--r); }
:where(html[data-bs-theme="dark"]) .zak-theme .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--line2);
}
:where(html[data-bs-theme="dark"]) .zak-theme .table { --bs-table-bg: transparent; --bs-table-color: var(--ink);
  /* Bootstrap's own is --bs-gray-200, a cool grey that reads purple at dusk. */
  --bs-table-border-color: var(--line); --bs-table-hover-bg: var(--paper2); }
:where(html[data-bs-theme="dark"]) .zak-theme .table > :not(caption) > * > * { border-bottom-color: var(--line); }
:where(html[data-bs-theme="dark"]) .zak-theme .table > thead th {
  color: var(--zak-muted-text);
  font-size: var(--size-th);
  font-weight: var(--w-strong);
  letter-spacing: var(--track-th);
  text-transform: uppercase;
  border-bottom-color: var(--line);
}

/* controls — fills lift, text on them goes dark */
/* No button casts a shadow, at dusk as in light (zak-bridge.css, 3): core declares
   --bs-btn-box-shadow on .btn itself, out of the token map's reach. */
:where(html[data-bs-theme="dark"]) .zak-theme .btn { --bs-btn-box-shadow: none; --bs-btn-focus-box-shadow: none; --bs-btn-border-radius: var(--r-btn); --bs-btn-font-weight: var(--w-strong); }
:where(html[data-bs-theme="dark"]) .zak-theme .btn-sm { --bs-btn-border-radius: var(--r-sm); }
:where(html[data-bs-theme="dark"]) .zak-theme .btn-lg { --bs-btn-border-radius: var(--r-btn); }
/* Two sizes: btn-xs draws as btn-sm. A size is not a colour, but each sheet is held
   to its own theme's scope, so the light bridge says the same. */
:where(html[data-bs-theme="dark"]) .zak-theme .btn-xs {
  --bs-btn-padding-y: .317rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .8125rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}
/* A button is a box, never a pill. */
:where(html[data-bs-theme="dark"]) .zak-theme .btn.rounded-pill { border-radius: var(--bs-btn-border-radius) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .btn-primary {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--on-accent);
  --bs-btn-hover-bg: var(--accent-strong); --bs-btn-hover-border-color: var(--accent-strong); --bs-btn-hover-color: var(--on-accent);
}
/* Destructive is one look (zak-bridge.css, 3): light red words in a light red line,
   filled light red with Ink words on it under the pointer (8.1:1). */
:where(html[data-bs-theme="dark"]) .zak-theme .btn-danger,
:where(html[data-bs-theme="dark"]) .zak-theme .btn-outline-danger,
:where(html[data-bs-theme="dark"]) .zak-theme .btn-label-danger {
  --bs-btn-bg: transparent; --bs-btn-color: var(--red-text); --bs-btn-border-color: var(--red-text);
  --bs-btn-hover-bg: var(--red-text); --bs-btn-hover-color: var(--on-lift); --bs-btn-hover-border-color: var(--red-text);
  --bs-btn-active-bg: var(--red-text); --bs-btn-active-color: var(--on-lift); --bs-btn-active-border-color: var(--red-text);
  --bs-btn-disabled-bg: transparent; --bs-btn-disabled-color: var(--red-text); --bs-btn-disabled-border-color: var(--red-text);
  --bs-btn-group-border-color: var(--red-text);
}
:where(html[data-bs-theme="dark"]) .zak-theme .btn-success {
  --bs-btn-bg: var(--green-text); --bs-btn-border-color: var(--green-text); --bs-btn-color: var(--on-lift);
  --bs-btn-hover-bg: #8fdca6; --bs-btn-hover-border-color: #8fdca6; --bs-btn-hover-color: var(--on-lift);
}
:where(html[data-bs-theme="dark"]) .zak-theme .btn-warning {
  --bs-btn-bg: var(--amber-text); --bs-btn-border-color: var(--amber-text); --bs-btn-color: var(--on-lift);
  --bs-btn-hover-bg: #f5c76c; --bs-btn-hover-border-color: #f5c76c; --bs-btn-hover-color: var(--on-lift);
}
:where(html[data-bs-theme="dark"]) .zak-theme .btn-secondary {
  --bs-btn-bg: var(--zak-muted-text); --bs-btn-border-color: var(--zak-muted-text); --bs-btn-color: var(--on-lift);
  --bs-btn-hover-bg: #d2cbc0; --bs-btn-hover-border-color: #d2cbc0; --bs-btn-hover-color: var(--on-lift);
}
:where(html[data-bs-theme="dark"]) .zak-theme .btn-info {
  --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue); --bs-btn-color: var(--on-lift);
  --bs-btn-hover-bg: #a9caff; --bs-btn-hover-border-color: #a9caff; --bs-btn-hover-color: var(--on-lift);
}
/* Secondary is one look, the kit's secondary button (zak-bridge.css, 3): transparent,
   Ash words in a 1px line, white words and an Ash edge under the pointer; selected is
   the accent fill, Deep Orange with white on it. */
:where(html[data-bs-theme="dark"]) .zak-theme .btn-outline-secondary,
:where(html[data-bs-theme="dark"]) .zak-theme .btn-label-secondary,
:where(html[data-bs-theme="dark"]) .zak-theme .btn-label-primary {
  --bs-btn-bg: transparent; --bs-btn-color: var(--zak-muted-text); --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--zak-muted-text);
  --bs-btn-active-bg: var(--accent); --bs-btn-active-color: var(--on-accent); --bs-btn-active-border-color: var(--accent);
  --bs-btn-disabled-bg: transparent; --bs-btn-disabled-color: var(--zak-muted-text); --bs-btn-disabled-border-color: var(--line);
  --bs-btn-group-border-color: var(--line);
}
/* A Line box keeps both side edges in a btn-group or an input-group, and they follow its
   state (zak-bridge.css, 3, says why). */
:where(html[data-bs-theme="dark"]) .zak-theme :is(.btn-outline-secondary, .btn-label-secondary, .btn-label-primary):hover { --bs-btn-group-border-color: var(--zak-muted-text); }
:where(html[data-bs-theme="dark"]) .zak-theme :is(.btn-outline-secondary, .btn-label-secondary, .btn-label-primary):is(.active, :active),
:where(html[data-bs-theme="dark"]) .zak-theme .btn-check:checked + :is(.btn-outline-secondary, .btn-label-secondary, .btn-label-primary) { --bs-btn-group-border-color: var(--accent); }
:where(html[data-bs-theme="dark"]) .zak-theme :is(.btn-group, .input-group) > :is(.btn-outline-secondary, .btn-label-secondary, .btn-label-primary) { border-inline-color: var(--bs-btn-group-border-color) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .btn-label-success { --bs-btn-bg: var(--green-soft); --bs-btn-color: var(--green-text); --bs-btn-border-color: transparent; }
:where(html[data-bs-theme="dark"]) .zak-theme .btn-label-warning { --bs-btn-bg: var(--amber-soft); --bs-btn-color: var(--amber-text); --bs-btn-border-color: transparent; }
:where(html[data-bs-theme="dark"]) .zak-theme .btn-label-info    { --bs-btn-bg: var(--blue-soft);  --bs-btn-color: var(--blue-text);  --bs-btn-border-color: transparent; }

/* The active pill. Bootstrap declares --bs-nav-pills-link-active-color: var(--bs-white)
   on .nav-pills itself, so the contrast token in the map above never reaches it. The
   fill is --bs-primary, so the text is the token that pairs with it, --on-accent. */
:where(html[data-bs-theme="dark"]) .zak-theme .nav-pills { --bs-nav-pills-link-active-color: var(--bs-primary-contrast); }

:where(html[data-bs-theme="dark"]) .zak-theme .form-control,
:where(html[data-bs-theme="dark"]) .zak-theme .form-select {
  background-color: var(--card);
  border-color: var(--line);
  color: var(--ink);
  border-radius: var(--r-input);
}
:where(html[data-bs-theme="dark"]) .zak-theme .form-control:focus,
:where(html[data-bs-theme="dark"]) .zak-theme .form-select:focus {
  border-color: var(--brand);
  box-shadow: none;
}

/* soft labels, as the kit's status pills in dark: each tone's soft well with its own
   lifted words (red 6.7, amber 7.4, green 7.5, blue 7.3, grey 9.0, brand 5.7:1). */
:where(html[data-bs-theme="dark"]) .zak-theme .bg-label-primary   { background-color: var(--accent-soft) !important; color: var(--accent-text) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .bg-label-success   { background-color: var(--green-soft) !important;  color: var(--green-text) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .bg-label-danger    { background-color: var(--red-soft) !important;    color: var(--red-text) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .bg-label-warning   { background-color: var(--amber-soft) !important;  color: var(--amber-text) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .bg-label-info      { background-color: var(--blue-soft) !important;   color: var(--blue-text) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .bg-label-secondary,
:where(html[data-bs-theme="dark"]) .zak-theme .bg-label-dark      { background-color: var(--gray-soft) !important;   color: var(--gray-text) !important; }

:where(html[data-bs-theme="dark"]) .zak-theme .progress { background-color: var(--line2); --bs-progress-bar-bg: var(--brand); --bs-progress-border-radius: var(--r-pill); }

/* solid badges: lifted fill, dark text — the light bridge's rule, inverted */
:where(html[data-bs-theme="dark"]) :where(.zak-theme) .badge { color: var(--on-lift); }
:where(html[data-bs-theme="dark"]) .zak-theme .badge.bg-success   { background-color: var(--green-text) !important; color: var(--on-lift) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .badge.bg-danger    { background-color: var(--red-text)   !important; color: var(--on-lift) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .badge.bg-warning   { background-color: var(--amber-text) !important; color: var(--on-lift) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .badge.bg-primary   { background-color: var(--accent)     !important; color: var(--on-accent) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .badge.bg-dark      { background-color: var(--ink)        !important; color: var(--on-lift) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .badge.bg-secondary { background-color: var(--zak-muted-text) !important; color: var(--on-lift) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .badge.bg-info      { background-color: var(--blue)       !important; color: var(--on-lift) !important; }

/* core's .text-bg-* hardcodes #fff !important over RGBA(var(--bs-*-rgb)), and dusk's
   -rgb triplets are the LIFTED pastels — white on those measures ~2:1. Same inversion
   as the solid badges: lifted fill, dark text, said with the same weight. */
:where(html[data-bs-theme="dark"]) .zak-theme .text-bg-success   { background-color: var(--green-text) !important; color: var(--on-lift) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .text-bg-danger    { background-color: var(--red-text)   !important; color: var(--on-lift) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .text-bg-warning   { background-color: var(--amber-text) !important; color: var(--on-lift) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .text-bg-secondary { background-color: var(--zak-muted-text) !important; color: var(--on-lift) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .text-bg-info      { background-color: var(--blue) !important; color: var(--on-lift) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .text-bg-dark      { background-color: var(--paper2) !important; color: var(--ink) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .text-bg-primary   { background-color: var(--accent) !important; color: var(--on-accent) !important; }

/* Dusk on paper prints as light ink on white otherwise: browsers skip backgrounds,
   so the dark surfaces vanish and the near-white text stays. Print the light palette. */
@media print {
  html[data-bs-theme="dark"] {
    --paper: #ffffff; --paper2: #ffffff; --card: #ffffff;
    --ink: #141414; --body: #3a3630; --muted: #736c62;
    --line: #e6e1db; --line2: #efeae3;
    --red-text: #b42318; --green-text: #1b7a3d; --amber-text: #8a5300; --gold-text: #8a5300; --blue-text: #1f5fb8;
    --accent: #c1471a; --accent-strong: #a63c15; --accent-text: #c1471a;
    --accent-soft: #fcf1ed; --on-accent: #ffffff; --on-lift: #ffffff;
  }
  :where(html[data-bs-theme="dark"]) .zak-theme {
    background-color: #ffffff;
    color: #3a3630;
    --bs-body-color: #3a3630;
    --zak-muted-text: #736c62;
  }
}

/* the white leak's dark twin: shells transparent, alerts quiet */
:where(html[data-bs-theme="dark"]) .zak-theme .content-wrapper,
:where(html[data-bs-theme="dark"]) .zak-theme .container-xxl,
:where(html[data-bs-theme="dark"]) .zak-theme .layout-page,
:where(html[data-bs-theme="dark"]) .zak-theme .alert { background-color: transparent; }
:where(html[data-bs-theme="dark"]) .zak-theme .alert { border: 1px solid var(--line); }
:where(html[data-bs-theme="dark"]) .zak-theme .alert { border-radius: var(--r-tile); }
:where(html[data-bs-theme="dark"]) .zak-theme .alert-warning { color: var(--amber-text); border-color: rgba(213, 148, 51, .4); background-color: var(--amber-soft); }
:where(html[data-bs-theme="dark"]) .zak-theme .alert-danger  { color: var(--red-text);   border-color: rgba(224, 87, 74, .4); background-color: var(--red-soft); }
:where(html[data-bs-theme="dark"]) .zak-theme .alert-success { color: var(--green-text); border-color: rgba(75, 190, 134, .4); background-color: var(--green-soft); }
:where(html[data-bs-theme="dark"]) .zak-theme .alert-info    { color: var(--blue-text);  border-color: rgba(141, 184, 255, .35); background-color: var(--blue-soft); }
:where(html[data-bs-theme="dark"]) .zak-theme .alert-primary,
:where(html[data-bs-theme="dark"]) .zak-theme .alert-secondary { color: var(--ink); border-color: var(--line); }
:where(html[data-bs-theme="dark"]) .zak-theme .chat-empty,
:where(html[data-bs-theme="dark"]) .zak-theme .chat-empty * { color: var(--zak-muted-text); }

/* the shell: the top bar and the sidebar are Ink, as in light (zak-bridge.css,
   4b), and on the Ink page a 1px line separates each from the page (the kit). The
   active row is Deep Orange with white words in both themes. */
:where(html[data-bs-theme="dark"]) .zak-theme .layout-navbar.bg-navbar-theme {
  background-color: var(--bar) !important;
  border-color: var(--line);
  box-shadow: 0 1px 0 var(--line);
}
:where(html[data-bs-theme="dark"]) .zak-theme .layout-menu,
:where(html[data-bs-theme="dark"]) .zak-theme .menu-vertical,
:where(html[data-bs-theme="dark"]) .zak-theme .bg-menu-theme {
  /* An active sub-item is drawn in --bs-heading-color: charcoal, on charcoal. */
  --bs-heading-color: var(--on-bar);
  background-color: var(--bar) !important;
  border-color: var(--line);
  box-shadow: inset -1px 0 0 var(--line);
  color: var(--on-bar);
  --bs-menu-color:        var(--on-bar);
  --bs-menu-hover-color:  var(--on-bar);
  --bs-menu-hover-bg:     rgba(255, 255, 255, .08);
  --bs-menu-active-color: var(--on-accent);
  --bs-menu-active-bg:    var(--accent);
  --bs-menu-sub-active-color: var(--on-bar);
  --bs-menu-sub-active-bg: rgba(255, 255, 255, .1);
  --bs-menu-bg:           var(--bar);
  --bs-menu-divider-color: rgba(255, 255, 255, .12);
}
:where(html[data-bs-theme="dark"]) .zak-theme .layout-navbar.navbar-detached { box-shadow: var(--shadow); }
:where(html[data-bs-theme="dark"]) .zak-theme {
  --bs-menu-color:        var(--ink);
  --bs-menu-hover-color:  var(--ink);
  --bs-menu-hover-bg:     var(--line2);
  --bs-menu-active-color: var(--accent-text);
  --bs-menu-sub-active-color: var(--accent-text);
  /* An open submenu's parent row. Core declares this on <html> as var(--bs-primary), and
     a custom property resolves where it is declared, so it kept the customizer's #696cff:
     the pale text above on purple, 2.6-3.0:1. */
  --bs-menu-sub-active-bg: var(--accent-soft);
  --bs-menu-active-bg:    var(--accent-soft);
  --bs-menu-bg:           var(--card);
}
:where(html[data-bs-theme="dark"]) .zak-theme .menu-header,
:where(html[data-bs-theme="dark"]) .zak-theme .menu-header-text { color: var(--zak-muted-text); }
:where(html[data-bs-theme="dark"]) .zak-theme .layout-menu .menu-header,
:where(html[data-bs-theme="dark"]) .zak-theme .layout-menu .menu-header-text { color: var(--muted); font-weight: var(--w-label); letter-spacing: var(--track); }
:where(html[data-bs-theme="dark"]) .zak-theme .menu-icon { color: currentColor; }

/* widgets, the same roll-call as the light bridge */
:where(html[data-bs-theme="dark"]) .zak-theme .dataTables_wrapper .dataTables_length select,
:where(html[data-bs-theme="dark"]) .zak-theme .dataTables_wrapper .dataTables_filter input,
:where(html[data-bs-theme="dark"]) .zak-theme div.dt-container .dt-input,
:where(html[data-bs-theme="dark"]) .zak-theme div.dt-container .dt-search input {
  background-color: var(--paper2);
  border-color: var(--line);
  color: var(--ink);
}
:where(html[data-bs-theme="dark"]) .zak-theme .dataTables_wrapper .dataTables_info,
:where(html[data-bs-theme="dark"]) .zak-theme .dataTables_wrapper .dataTables_length,
:where(html[data-bs-theme="dark"]) .zak-theme .dataTables_wrapper .dataTables_filter,
:where(html[data-bs-theme="dark"]) .zak-theme div.dt-container .dt-info { color: var(--zak-muted-text); }
:where(html[data-bs-theme="dark"]) .zak-theme table.dataTable { border-color: var(--line2); }
:where(html[data-bs-theme="dark"]) .zak-theme table.dataTable > thead > tr > th {
  border-bottom-color: var(--line);
  color: var(--zak-muted-text);
}
:where(html[data-bs-theme="dark"]) .zak-theme table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--paper2);
  box-shadow: inset 0 0 0 9999px var(--paper2);
}
:where(html[data-bs-theme="dark"]) .zak-theme table.dataTable > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px var(--line2);
}
:where(html[data-bs-theme="dark"]) .zak-theme .pagination .page-link { color: var(--ink); background-color: transparent; border-color: var(--line); }
:where(html[data-bs-theme="dark"]) .zak-theme .pagination .page-item.active .page-link {
  background-color: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
:where(html[data-bs-theme="dark"]) .zak-theme .pagination .page-item.disabled .page-link { color: var(--zak-muted-text); }
:where(html[data-bs-theme="dark"]) .zak-theme .pagination .page-link:hover { background-color: var(--line2); color: var(--ink); }
:where(html[data-bs-theme="dark"]) .zak-theme table.dtr-column > tbody > tr > td.control:before,
:where(html[data-bs-theme="dark"]) .zak-theme table.dtr-inline.collapsed > tbody > tr > td:first-child:before {
  background-color: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
:where(html[data-bs-theme="dark"]) .zak-theme table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--line2); }
:where(html[data-bs-theme="dark"]) .zak-theme .dtr-title { color: var(--zak-muted-text); }

:where(html[data-bs-theme="dark"]) .zak-theme .bootstrap-select > .dropdown-toggle {
  background-color: var(--paper2); border-color: var(--line); color: var(--ink);
}
:where(html[data-bs-theme="dark"]) .zak-theme .bootstrap-select .dropdown-menu { background-color: var(--card); border-color: var(--line); }
:where(html[data-bs-theme="dark"]) .zak-theme .bootstrap-select .dropdown-item.active,
:where(html[data-bs-theme="dark"]) .zak-theme .bootstrap-select .dropdown-item:active { background-color: var(--accent); color: var(--on-accent); }

:where(html[data-bs-theme="dark"]) .zak-theme .swal2-popup {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-title { color: var(--ink); }
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-html-container { color: var(--zak-muted-text); }
/* The icons, the loader and the error marks: one block, word for word the same in both bridges, each
   state from its --bs-* text token so the colours follow the theme. Anchored on the container and the
   popup, because Sneat's sweetalert2.scss colours the icons from .swal2-container .swal2-popup and
   beats anything lighter: until 2026-10-19 the rules here lost to it, and the error cross, which
   nothing set, kept the library's salmon #f27474. Info and question are neutral, as on delegate pages. */
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-success { border-color: var(--bs-success-text-emphasis); color: var(--bs-success-text-emphasis); }
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--bs-success-text-emphasis); }
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--bs-success-text-emphasis); }
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-error { border-color: var(--bs-danger-text-emphasis); color: var(--bs-danger-text-emphasis); }
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--bs-danger-text-emphasis); }
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-warning { border-color: var(--bs-warning-text-emphasis); color: var(--bs-warning-text-emphasis); }
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-info,
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-question { border-color: var(--bs-secondary-color); color: var(--bs-secondary-color); }
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-container .swal2-loader { border-color: var(--bs-body-color) transparent var(--bs-body-color) transparent; }
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-container .swal2-timer-progress-bar { background: var(--bs-border-color); }
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-container .swal2-popup .swal2-validation-message { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-container .swal2-popup .swal2-validation-message::before { background-color: var(--bs-danger-text-emphasis); color: var(--bs-paper-bg); }
:where(html[data-bs-theme="dark"]) .zak-theme .swal2-container :is(.swal2-input, .swal2-file, .swal2-textarea).swal2-inputerror { border-color: var(--bs-danger-text-emphasis) !important; box-shadow: none !important; }

:where(html[data-bs-theme="dark"]) .zak-theme .select2-container--default .select2-selection--single,
:where(html[data-bs-theme="dark"]) .zak-theme .select2-container--default .select2-selection--multiple {
  background-color: var(--paper2);
  border-color: var(--line);
  color: var(--ink);
}
:where(html[data-bs-theme="dark"]) .zak-theme .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); }
:where(html[data-bs-theme="dark"]) .zak-theme .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--zak-muted-text); }
:where(html[data-bs-theme="dark"]) .zak-theme .select2-dropdown {
  background-color: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
:where(html[data-bs-theme="dark"]) .zak-theme .select2-container--default .select2-results__option { color: var(--ink); }
:where(html[data-bs-theme="dark"]) .zak-theme .select2-container--default .select2-results__option--highlighted[aria-selected],
:where(html[data-bs-theme="dark"]) .zak-theme .select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: var(--accent);
  color: var(--on-accent);
}
:where(html[data-bs-theme="dark"]) .zak-theme .select2-container--default .select2-results__option[aria-selected='true'],
:where(html[data-bs-theme="dark"]) .zak-theme .select2-container--default .select2-results__option[data-selected='true'] {
  background-color: var(--line2);
  color: var(--ink);
}
:where(html[data-bs-theme="dark"]) .zak-theme .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--paper2);
  border-color: var(--line);
  color: var(--ink);
}
:where(html[data-bs-theme="dark"]) .zak-theme .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--line2);
  border-color: var(--line);
  color: var(--ink);
}

:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-calendar {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--ink);
}
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-calendar.arrowTop:before,
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--card); }
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-months .flatpickr-month,
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-current-month,
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-weekday { color: var(--ink); fill: var(--ink); }
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-weekday { color: var(--zak-muted-text); }
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-day { color: var(--ink); }
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-day.prevMonthDay,
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-day.nextMonthDay { color: var(--zak-muted-text); opacity: 1; }
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-day.flatpickr-disabled { color: var(--zak-muted-text); opacity: .6; }
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-day:hover { background: var(--line2); border-color: var(--line2); }
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-day.today {
  border-color: var(--brand);
  color: var(--ink);
}
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-day.today:hover { background: var(--accent-soft); }
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-day.selected,
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-day.selected:hover,
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-day.startRange,
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-day.endRange {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
:where(html[data-bs-theme="dark"]) .zak-theme .flatpickr-day.inRange { background: var(--line2); border-color: var(--line2); box-shadow: none; }

:where(html[data-bs-theme="dark"]) .zak-theme .ui-timepicker-wrapper {
  background: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
:where(html[data-bs-theme="dark"]) .zak-theme .ui-timepicker-list li { color: var(--ink); }
:where(html[data-bs-theme="dark"]) .zak-theme .ui-timepicker-list li.ui-timepicker-selected,
:where(html[data-bs-theme="dark"]) .zak-theme .ui-timepicker-list li:hover { background: var(--accent); color: var(--on-accent); }

:where(html[data-bs-theme="dark"]) .zak-theme .pcr-app {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--ink);
}
:where(html[data-bs-theme="dark"]) .zak-theme .pcr-app .pcr-interaction .pcr-result {
  background: var(--paper2);
  border: 1px solid var(--line);
  color: var(--ink);
}
:where(html[data-bs-theme="dark"]) .zak-theme .pcr-app .pcr-interaction .pcr-save { background: var(--accent); color: var(--on-accent); }

:where(html[data-bs-theme="dark"]) .zak-theme .dt-buttons .btn,
:where(html[data-bs-theme="dark"]) .zak-theme .dt-buttons .dt-button {
  background-color: var(--card);
  border-color: var(--line);
  color: var(--ink);
}
:where(html[data-bs-theme="dark"]) .zak-theme .dt-buttons .btn:hover,
:where(html[data-bs-theme="dark"]) .zak-theme .dt-buttons .dt-button:hover { background-color: var(--line2); border-color: var(--line); color: var(--ink); }
:where(html[data-bs-theme="dark"]) .zak-theme .dt-button-collection {
  background-color: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
:where(html[data-bs-theme="dark"]) .zak-theme .dt-button-collection .dt-button { background-color: transparent; border-color: transparent; }
:where(html[data-bs-theme="dark"]) .zak-theme .dt-button-collection .dt-button.active,
:where(html[data-bs-theme="dark"]) .zak-theme .dt-button-collection .dt-button:hover { background-color: var(--accent); color: var(--on-accent); }

:where(html[data-bs-theme="dark"]) .zak-theme .tt-menu {
  background-color: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--r);
}
:where(html[data-bs-theme="dark"]) .zak-theme .tt-suggestion { color: var(--ink); }
:where(html[data-bs-theme="dark"]) .zak-theme .tt-suggestion:hover,
:where(html[data-bs-theme="dark"]) .zak-theme .tt-suggestion.tt-cursor { background-color: var(--accent); color: var(--on-accent); }
:where(html[data-bs-theme="dark"]) .zak-theme .tt-suggestion .tt-highlight,
:where(html[data-bs-theme="dark"]) .zak-theme .tt-menu .tt-highlight { color: inherit; font-weight: 700; }
:where(html[data-bs-theme="dark"]) .zak-theme .tt-hint { color: var(--zak-muted-text); }

:where(html[data-bs-theme="dark"]) .zak-theme .ql-toolbar.ql-snow,
:where(html[data-bs-theme="dark"]) .zak-theme .ql-container.ql-snow { border-color: var(--line); }
:where(html[data-bs-theme="dark"]) .zak-theme .ql-toolbar.ql-snow { background-color: var(--paper2); }
:where(html[data-bs-theme="dark"]) .zak-theme .ql-container.ql-snow { background-color: var(--card); }
:where(html[data-bs-theme="dark"]) .zak-theme .ql-editor { color: var(--ink); }
:where(html[data-bs-theme="dark"]) .zak-theme .ql-editor.ql-blank::before { color: var(--zak-muted-text); font-style: normal; }
:where(html[data-bs-theme="dark"]) .zak-theme .ql-snow .ql-stroke { stroke: var(--ink); }
:where(html[data-bs-theme="dark"]) .zak-theme .ql-snow .ql-fill,
:where(html[data-bs-theme="dark"]) .zak-theme .ql-snow .ql-stroke.ql-fill { fill: var(--ink); }
:where(html[data-bs-theme="dark"]) .zak-theme .ql-snow .ql-picker { color: var(--ink); }
:where(html[data-bs-theme="dark"]) .zak-theme .ql-snow .ql-picker-options {
  background-color: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
:where(html[data-bs-theme="dark"]) .zak-theme .ql-snow.ql-toolbar button:hover .ql-stroke,
:where(html[data-bs-theme="dark"]) .zak-theme .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent-strong); }
:where(html[data-bs-theme="dark"]) .zak-theme .ql-snow.ql-toolbar button:hover .ql-fill,
:where(html[data-bs-theme="dark"]) .zak-theme .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--accent-strong); }

:where(html[data-bs-theme="dark"]) .zak-theme .notyf__toast { border-radius: var(--r); box-shadow: var(--shadow); }
:where(html[data-bs-theme="dark"]) .zak-theme .notyf__toast--success .notyf__ribbon,
:where(html[data-bs-theme="dark"]) .zak-theme .notyf__toast--success { background-color: var(--green-text); color: var(--on-lift); }
:where(html[data-bs-theme="dark"]) .zak-theme .notyf__toast--error .notyf__ribbon,
:where(html[data-bs-theme="dark"]) .zak-theme .notyf__toast--error { background-color: var(--red-text); color: var(--on-lift); }

:where(html[data-bs-theme="dark"]) .zak-theme .sk-wave .sk-rect,
:where(html[data-bs-theme="dark"]) .zak-theme .sk-rect { background-color: var(--accent); }
:where(html[data-bs-theme="dark"]) .zak-theme .blockUI.blockOverlay { background-color: #000 !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .blockUI.blockMsg { color: var(--ink); }

/* The menu's collapse button: a --bs-primary disc; its chevron takes the text that
   pairs with the fill, as in light. */
:where(html[data-bs-theme="dark"]) .zak-theme .menu .app-brand .layout-menu-toggle i { color: var(--bs-primary-contrast); }

/* Bootstrap's .bg-white at dusk: a white block on graphite, and the .text-dark its markup
   pairs it with (Email templates' count badges, Short URL's link cards) is dark on dark
   once the block is the card. Light maps .bg-white in zak-bridge.css; this is its twin. */
:where(html[data-bs-theme="dark"]) .zak-theme .bg-white { background-color: var(--card) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .bg-white.text-dark,
:where(html[data-bs-theme="dark"]) .zak-theme .bg-white .text-dark { color: var(--ink) !important; }

/* Tailwind's palette at dark is mapped with the tokens above (1). */

/* ------------------------------------------------------------
   TYPE, AT THE KIT'S WEIGHTS (docs/ZAK-ONE-UI.md, 3)
   The same block as zak-bridge.css's for light: type is not a colour, but
   each sheet is held to its own theme's scope.
   ------------------------------------------------------------ */
:where(html[data-bs-theme="dark"]) .zak-theme :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-weight: var(--w-head);
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--bs-heading-color);
}
:where(html[data-bs-theme="dark"]) .zak-theme :is(body, button, input, select, textarea, .btn, .form-control, .form-select, .dropdown-menu, .tooltip, .popover, .menu, .layout-navbar) { font-family: var(--font); }
:where(html[data-bs-theme="dark"]) .zak-theme :is(em, i:not([class]), cite, .fst-italic) { font-style: normal !important; font-weight: var(--w-strong); }
:where(html[data-bs-theme="dark"]) .zak-theme :is(.font-monospace) { font-family: var(--font-mono); }

/* The focus ring: 2.5px Burnt Orange, 2px off the edge (4.57:1 on the page). */
:where(html[data-bs-theme="dark"]) .zak-theme :focus-visible { outline: var(--focus-ring); outline-offset: 2px; box-shadow: none; }
:where(html[data-bs-theme="dark"]) .zak-theme :is(h1, .h1, h2, .h2) { letter-spacing: -.02em; }
:where(html[data-bs-theme="dark"]) .zak-theme :is(.btn, .badge, .nav-link.active, .page-link, b, strong) { font-weight: var(--w-strong); }
:where(html[data-bs-theme="dark"]) .zak-theme .card-title { font-weight: var(--w-head); }

/* The active row's marker at the sidebar's edge is Burnt Orange, as in light. */
:where(html[data-bs-theme="dark"]) .zak-theme .layout-menu .menu-inner > .menu-item.active::before { background-color: var(--brand) !important; }
/* Not drawn at all, as in light (zak-bridge.css): the Deep Orange row says which page this is. */
:where(html[data-bs-theme="dark"]) .zak-theme .layout-menu .menu-inner > .menu-item.active::before { display: none !important; }

/* Bootstrap's text and surface utilities (dusk). They paint from the -rgb triplets with
   !important, out of the token map's reach, and the triplets are the FILL colours: Signal Red
   as small text measures 3.67:1 on cream, gold about 2:1. So the words take the text tokens, as
   .bg-label-* already do, and the cool-grey surfaces (.bg-light, navy at dusk) take paper2.
   Found across a dozen screens on 2026-10-19; mapped once here rather than screen by screen. */
:where(html[data-bs-theme="dark"]) .zak-theme .text-danger  { color: var(--red-text) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .text-warning { color: var(--amber-text) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .text-info    { color: var(--blue-text) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .text-primary { color: var(--accent-text) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .text-success { color: var(--green-text) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .text-dark:not([class*="bg-"]) { color: var(--ink) !important; }
:where(html[data-bs-theme="dark"]) .zak-theme .bg-light,
:where(html[data-bs-theme="dark"]) .zak-theme .bg-light-subtle { background-color: var(--paper2) !important; }
/* .btn-outline-info: info's lifted blue words, filled blue with Ink words under the pointer. */
:where(html[data-bs-theme="dark"]) .zak-theme .btn-outline-info {
  --bs-btn-color: var(--blue-text); --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: var(--blue); --bs-btn-hover-color: var(--on-lift); --bs-btn-hover-border-color: var(--blue);
  --bs-btn-active-bg: var(--blue); --bs-btn-active-color: var(--on-lift); --bs-btn-active-border-color: var(--blue);
}


/* A ticked box in dark: the fill is the accent and the tick is the text that pairs with it,
   white since 27-Oct-2026 (it was charcoal on dusk's cream accent). Same for a radio's dot. */
:where(html[data-bs-theme="dark"]) .zak-theme .form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='17' viewBox='0 0 15 14' fill='none'%3E%3Cpath d='M3.41667 7L6.33333 9.91667L12.1667 4.08333' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:where(html[data-bs-theme="dark"]) .zak-theme .form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='1.6' fill='%23ffffff'/%3e%3c/svg%3e");
}