/* ══════════════════════════════════════════════════════════════════════════
   DIGITALSKY — dark theme
   ══════════════════════════════════════════════════════════════════════════

   Loaded on every page, inert until <html class="ds-dark"> is set. That class
   is stamped pre-paint by js/boot-flags.js from localStorage 'ds-theme', and
   toggled live by the DS.theme module in js/dom.js — the same pattern the
   "Reduce animations" preference already uses. Like that preference this is a
   MANUAL opt-in and deliberately does NOT follow the OS colour-scheme setting;
   see the note in js/dom.js.

   ── Why this file is additive rather than a token refactor ──
   The light theme is a hand-tuned palette spread across seven stylesheets and
   twenty-three per-page <style> blocks, with roughly nine hundred literal
   colour values in it. Rewriting those into tokens would touch every one of
   those sites and put the LIVE light theme at risk for a feature that is
   opt-in. Everything here is additive instead: nothing below can affect a page
   that has no `.ds-dark` on <html>, so the worst case for a mistake in this
   file is a dark-mode bug, never a light-mode regression.

   ── Cascade notes (read before adding rules) ──
   · Rules here are UNLAYERED on purpose. Unlayered normal declarations beat
     every layered one regardless of specificity, so a plain `html.ds-dark .x`
     wins over `@layer components { .x }` without !important.
   · The exception is the handful of LAYERED `!important` rules in nav.css and
     dashboards.css. For important declarations the layer order is reversed and
     unlayered loses to every layer — so those overrides live in the small
     `@layer reset` block at the foot of this file, `reset` being the first
     layer declared in system.css and therefore the winner for !important.
   · Per-page <style> blocks are unlayered and come after this file's <link>,
     so they win at equal specificity; the `html.ds-dark` prefix is what puts
     these rules ahead of them.

   ── The palette ──
   The light site is a bright brand purple with white cards on it. Dark mode is
   the same sky after dusk: a deep indigo field, cards lifted out of it as
   slightly lighter indigo rather than as grey, and the brand purple kept for
   the things it already owns (filled buttons, accents, the deep bands) — just
   brightened, since a 53% purple that reads as strong on white disappears on a
   dark field. Hue stays in the 277–285 band throughout, so nothing here is
   "neutral grey": the whole page keeps the blue-violet cast the brand has in
   daylight.
   ══════════════════════════════════════════════════════════════════════════ */

html.ds-dark {
  /* ── Fields and surfaces ─────────────────────────────────────────────── */
  --ds-d-bg:        oklch(16% 0.025 285);   /* page field */
  --ds-d-band:      oklch(20% 0.028 285);   /* the light band's dark counterpart */
  --ds-d-surface:   oklch(23.5% 0.03 285);  /* cards, nav, panels */
  --ds-d-surface-2: oklch(28% 0.032 285);   /* hover / inset / chips */
  --ds-d-sunken:    oklch(19% 0.026 285);   /* inputs, table headers, code-ish */

  /* ── Text ────────────────────────────────────────────────────────────── */
  --ds-d-fg:        oklch(95% 0.008 285);
  --ds-d-muted:     oklch(73% 0.018 285);
  --ds-d-faint:     oklch(60% 0.018 285);

  /* ── Lines ───────────────────────────────────────────────────────────── */
  --ds-d-border:        oklch(100% 0 0 / 0.11);
  --ds-d-border-strong: oklch(100% 0 0 / 0.18);

  /* ── Brand ───────────────────────────────────────────────────────────── */
  /* Two purples, same as the light theme's split: one for TEXT/lines on a dark
     surface (must be light to clear AA), one for FILLED objects that carry
     white text on top (must be dark enough to do that). */
  --ds-d-accent:            oklch(80% 0.105 280);
  --ds-d-accent-solid:      oklch(57% 0.16 277);
  --ds-d-accent-solid-hover: oklch(64% 0.16 277);
  --ds-d-accent-tint:       oklch(70% 0.14 278 / 0.16);
  --ds-d-accent-tint-2:     oklch(70% 0.14 278 / 0.26);

  /* ── Semantic ────────────────────────────────────────────────────────── */
  --ds-d-danger:  oklch(68% 0.18 25);
  --ds-d-success: oklch(78% 0.13 165);

  /* ── Depth ───────────────────────────────────────────────────────────── */
  /* Shadows barely register on a dark field — a dark card on a darker page is
     separated by its BORDER, not by a drop shadow. These stay shallow and are
     mostly there to keep floating layers (menus, modals, the mobile sheet)
     from sitting flat on the page. */
  --elevation-1: 0 1px 2px oklch(0% 0 0 / 0.30);
  --elevation-2: 0 4px 14px oklch(0% 0 0 / 0.38);
  --elevation-3: 0 10px 30px oklch(0% 0 0 / 0.46);

  /* Overscroll backdrops — read by js/dom.js, which paints the rubber-band
     area light near the top of the page and footer-dark near the bottom. */
  --top-bg: oklch(16% 0.025 285);
  --bottom-bg: oklch(11.5% 0.018 285);

  /* Rounded rating star (system.css). The light theme's empty star is #d6d6de,
     which on a dark card is BRIGHTER than the filled one — the scale reads
     backwards. Filled goes lighter, empty goes to a dark slate. */
  --star-on: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202%2014.53%208.52%2021.51%208.91%2016.09%2013.33%2017.88%2020.09%2012%2016.3%206.12%2020.09%207.91%2013.33%202.49%208.91%209.47%208.52Z'%20fill='%235B5EC8'%20stroke='%235B5EC8'%20stroke-width='3.4'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M12%202%2014.53%208.52%2021.51%208.91%2016.09%2013.33%2017.88%2020.09%2012%2016.3%206.12%2020.09%207.91%2013.33%202.49%208.91%209.47%208.52Z'%20fill='%23A3A5F5'%20stroke='%23A3A5F5'%20stroke-width='2.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --star-off: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202%2014.53%208.52%2021.51%208.91%2016.09%2013.33%2017.88%2020.09%2012%2016.3%206.12%2020.09%207.91%2013.33%202.49%208.91%209.47%208.52Z'%20fill='%233B3A4E'%20stroke='%233B3A4E'%20stroke-width='2.4'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3C/svg%3E");

  /* Native widget colours: checkboxes, scrollbars, the OS-painted <select>
     dropdown list. Without this the browser paints light-theme chrome into a
     dark page — white scrollbars down the side of every long page. */
  color-scheme: dark;
}

/* Colour-scheme changes are a full repaint; easing the two page-level fills
   makes the switch read as a dimmer rather than a hard cut. Deliberately only
   on <body> and the root — transitioning every element on the page is what
   makes theme toggles feel gluey, and html.ds-reduce-motion collapses this
   along with everything else. */
html.ds-dark body,
html:not(.ds-dark) body { transition: background-color .28s ease, color .28s ease; }

/* ══════════════════════════════════════════════════════════════════════════
   css/system.css — page field, bands, chrome
   ══════════════════════════════════════════════════════════════════════════ */

html.ds-dark body {
  background: var(--ds-d-bg);
  color: var(--ds-d-fg);
}

/* Root token set — the one tuned for "sitting on the brand purple". Its dark
   counterpart is "sitting on the night field": text is still near-white, but
   the accent can no longer be plain white (it would tie with body copy), so it
   becomes the light brand purple. */
html.ds-dark {
  --bg:      oklch(16% 0.025 285);
  --surface: oklch(23.5% 0.03 285);
  --fg:      oklch(95% 0.008 285);
  --muted:   oklch(73% 0.018 285);
  --border:  oklch(100% 0 0 / 0.11);
  --accent:  oklch(80% 0.105 280);
  --accent-hover: oklch(64% 0.16 277);
  --accent-light: oklch(70% 0.14 278 / 0.16);
  --accent-solid: oklch(57% 0.16 277);
  --accent-solid-hover: oklch(64% 0.16 277);
}

/* The white-surface token re-scope (system.css @layer base). In daylight these
   elements flip from "white text on purple" to "dark text on white"; here they
   flip from "text on the night field" to "text on a lifted card" — same idea,
   much smaller jump, because a dark card and a dark page are close in value.
   The border does the separating instead. */
html.ds-dark .card,
html.ds-dark .auth-card,
html.ds-dark .search-card,
html.ds-dark .compare-agency-card,
html.ds-dark .review-card,
html.ds-dark .agency-card,
html.ds-dark .step,
html.ds-dark .nav-links.open,
html.ds-dark .profile-sidebar .card,
html.ds-dark .brief-sidebar .card,
html.ds-dark .rs-card,
html.ds-dark .dash-tabs,
html.ds-dark input,
html.ds-dark select,
html.ds-dark textarea,
html.ds-dark .hero-search {
  --fg:      oklch(95% 0.008 285);
  --muted:   oklch(73% 0.018 285);
  --border:  oklch(100% 0 0 / 0.11);
  --accent:  oklch(80% 0.105 280);
  --accent-light: oklch(70% 0.14 278 / 0.16);
  color: var(--fg);
}

/* ── Bands ─────────────────────────────────────────────────────────────────
   The site's rhythm is an alternation of deep brand bands and light bands. It
   survives here at lower amplitude: the "light" band becomes a step ABOVE the
   page field, the deep band stays a purple gradient, and the deepest band
   (.section-band) stays the darkest thing on the page. Same order, same job. */
html.ds-dark body.page-light { background: var(--ds-d-band); }
html.ds-dark .band-light,
html.ds-dark body.page-light > main,
html.ds-dark .section-light {
  color: var(--ds-d-fg);
  --fg:     oklch(95% 0.008 285);
  --muted:  oklch(73% 0.018 285);
  --accent: oklch(80% 0.105 280);
  --border: oklch(100% 0 0 / 0.11);
}
html.ds-dark .section-light { background: var(--ds-d-band); }

/* `:not(.has-banner)` is load-bearing, not tidiness. A partner who has uploaded
   a cover image gets it painted as the band's own background-image
   (`.page-band.has-banner`, screens/profile.html) — and `background:` here is
   the SHORTHAND, so without the exclusion this resets background-image to none
   and the photo vanishes in dark mode. Same for the ::before scrim below: that
   band replaces .band-deep's radial highlight with a top/bottom darkening
   tuned for a photo we know nothing about, and it has to keep it. */
html.ds-dark .band-deep:not(.has-banner),
html.ds-dark .section-glow {
  background: linear-gradient(180deg, oklch(29% 0.075 278), oklch(23% 0.065 280));
  border-bottom-color: oklch(100% 0 0 / 0.08);
}
/* The "lit from above" wash on a deep band. At the light theme's 0.11 white it
   turns the top of a dark band into a milky haze; dialled back so it still
   reads as a light source without lifting the whole band. */
html.ds-dark .band-deep:not(.has-banner)::before,
html.ds-dark .section-glow::before {
  background: radial-gradient(ellipse 900px 460px at 50% 0%,
              oklch(100% 0 0 / 0.055), transparent 70%);
}
html.ds-dark .section-glow .section-header p { color: oklch(88% 0.012 285); }

html.ds-dark .section-band {
  background: linear-gradient(180deg, oklch(22% 0.06 279), oklch(17.5% 0.05 281));
  border-block-color: oklch(100% 0 0 / 0.07);
}

html.ds-dark .section-alt {
  background: oklch(100% 0 0 / 0.03);
  border-block-color: oklch(100% 0 0 / 0.06);
}

/* Language-switch veil (a full-screen wash during the string swap) — the
   daylight gradient is a bright lavender flash on a dark page. */
html.ds-dark #ds-lang-veil {
  background: linear-gradient(135deg, oklch(30% 0.08 285), oklch(22% 0.065 280));
}

/* Focus ring — the light theme's 53.6% purple is nearly invisible against a
   dark field, which would make keyboard navigation unusable. */
html.ds-dark :focus-visible { outline-color: oklch(82% 0.12 280); }

/* Page-load spinner */
html.ds-dark body.ds-pending::after {
  border-color: oklch(100% 0 0 / 0.14);
  border-top-color: var(--ds-d-accent);
}

/* Search autocomplete dropdown (js/search-suggest.js) */
html.ds-dark .ds-suggest {
  background: var(--ds-d-surface);
  border-color: var(--ds-d-border);
  box-shadow: 0 12px 32px oklch(0% 0 0 / 0.5), 0 2px 8px oklch(0% 0 0 / 0.3);
}
html.ds-dark .ds-suggest-item { color: var(--ds-d-fg); }
html.ds-dark .ds-suggest-item svg { color: var(--ds-d-faint); }
html.ds-dark .ds-suggest-item.active,
html.ds-dark .ds-suggest-item:hover { background: var(--ds-d-accent-tint); }
html.ds-dark .ds-suggest-item.active svg,
html.ds-dark .ds-suggest-item:hover svg { color: var(--ds-d-accent); }

/* Small avatar lift — a purple glow under a dark tile reads as a smudge. */
html.ds-dark .agency-avatar,
html.ds-dark .saved-card-avatar,
html.ds-dark .conversation-avatar,
html.ds-dark .thread-header-avatar {
  box-shadow: 0 2px 8px oklch(0% 0 0 / 0.35);
}

/* ── Mobile burger sheet ───────────────────────────────────────────────────
   Everything below mirrors the unlayered max-width:768px block in system.css.
   Those rules carry !important (they have to beat per-page <style>), so these
   need it too — same origin, same layer, so specificity + !important decides
   and `html.ds-dark` supplies the extra weight. */
@media (max-width: 768px) {
  html.ds-dark .nav::before {
    background: oklch(19% 0.028 285 / 0.92);
    border-bottom-color: oklch(100% 0 0 / 0.08);
  }
  html.ds-dark .sm-backdrop { background: oklch(8% 0.02 285 / 0.55); }
  /* The two panes that lead the sheet in. In daylight they are a pale lavender
     followed by the brand purple; at dark-mode value they keep the same
     light-then-dark sequence, so the stagger still reads. */
  html.ds-dark .sm-prelayer:nth-child(1) { background: oklch(44% 0.10 285); }
  html.ds-dark .sm-prelayer:nth-child(2) { background: oklch(30% 0.075 278); }
  html.ds-dark .nav-links {
    background: var(--ds-d-surface);
    box-shadow: -18px 0 60px oklch(0% 0 0 / 0.55), -4px 0 16px oklch(0% 0 0 / 0.3);
  }
  html.ds-dark .nav-links::before {
    background: linear-gradient(90deg, oklch(72% 0.14 278 / 0.8) 0%, transparent 100%);
  }
  html.ds-dark .nav-links .nav-search {
    border-color: oklch(100% 0 0 / 0.10) !important;
    background: var(--ds-d-sunken) !important;
  }
  html.ds-dark .nav-links a:not(.btn):not(.btn-signout-burger),
  html.ds-dark .nav-links > button:not(.nav-lang-btn):not(.nav-mobile-toggle),
  html.ds-dark .nav-links .nav-inbox-link,
  html.ds-dark .nav-links .nav-dash-row > * {
    color: var(--ds-d-fg) !important;
  }
  html.ds-dark .nav-links a:not(.btn):not(.btn-signout-burger):hover,
  html.ds-dark .nav-links > button:not(.nav-lang-btn):not(.nav-mobile-toggle):hover,
  html.ds-dark .nav-links .nav-inbox-link:hover,
  html.ds-dark .nav-links .nav-dash-row > *:hover {
    background: var(--ds-d-accent-tint) !important;
    color: var(--ds-d-accent) !important;
  }
  /* The sheet's one filled CTA. In daylight it is the brand's near-black ink
     (#292846) — on a dark sheet that is a hole, so it becomes the brand purple,
     which is what carries a filled action everywhere else in dark mode. */
  html.ds-dark .nav-links .btn.btn-primary {
    background: var(--ds-d-accent-solid) !important;
    color: #fff !important;
  }
  html.ds-dark .nav-links .btn.btn-primary:hover {
    background: var(--ds-d-accent-solid-hover) !important;
  }
  html.ds-dark .nav-links .btn-signout-burger {
    color: var(--ds-d-danger) !important;
    background: oklch(60% 0.15 25 / 0.10) !important;
    border-color: oklch(60% 0.15 25 / 0.28) !important;
  }
  html.ds-dark .nav-links .btn-signout-burger:hover {
    background: var(--ds-d-danger) !important;
    color: oklch(15% 0.02 25) !important;
    border-color: var(--ds-d-danger) !important;
  }
  html.ds-dark .nav-links .nav-lang-btn {
    color: var(--ds-d-muted) !important;
    border-top-color: oklch(100% 0 0 / 0.08) !important;
  }
  html.ds-dark .nav-links .nav-lang-btn:hover {
    background: var(--ds-d-accent-tint) !important;
    color: var(--ds-d-accent) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   css/nav.css — the desktop bar
   ══════════════════════════════════════════════════════════════════════════ */

html.ds-dark .nav {
  background: oklch(19% 0.028 285 / 0.88);
  border-bottom-color: oklch(100% 0 0 / 0.08);
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.3);
}
html.ds-dark .nav-logo,
html.ds-dark .logo-text { color: var(--ds-d-fg); }
html.ds-dark .logo-dk { color: var(--ds-d-faint); }
html.ds-dark .nav-inbox-link { color: var(--ds-d-muted); }
html.ds-dark .nav-inbox-link:hover { color: var(--ds-d-accent); }
html.ds-dark .nav-links a:not(.btn),
html.ds-dark .nav-dash-row a:not(.btn-signout-burger):not(.btn),
html.ds-dark .nav-links > button,
html.ds-dark .nav-links a:not(.btn):visited,
html.ds-dark .nav-dash-row a:not(.btn-signout-burger):not(.btn):visited { color: var(--ds-d-muted); }
html.ds-dark .nav-links a:not(.btn):hover,
html.ds-dark .nav-links a:not(.btn):active,
html.ds-dark .nav-dash-row a:not(.btn-signout-burger):not(.btn):hover,
html.ds-dark .nav-dash-row a:not(.btn-signout-burger):not(.btn):active { color: var(--ds-d-accent); }
html.ds-dark .nav-links a:not(.btn)::after,
html.ds-dark .nav-dash-row a:not(.btn-signout-burger):not(.btn)::after { background: var(--ds-d-accent); }

html.ds-dark .nav-lang-btn { color: var(--ds-d-faint); }
html.ds-dark .nav-lang-btn:hover {
  color: var(--ds-d-accent);
  background: var(--ds-d-accent-tint);
}
html.ds-dark .nav-lang-btn .lang-divider { color: oklch(45% 0.015 285); }
html.ds-dark .nav-lang-btn:not(.active) #langEn,
html.ds-dark .nav-lang-btn.active #langDa { color: var(--ds-d-fg); }

html.ds-dark .nav-search:hover { background: oklch(100% 0 0 / 0.06); }
html.ds-dark .nav-search:focus-within { background: oklch(100% 0 0 / 0.09); }
html.ds-dark .nav-search svg { color: var(--ds-d-faint); }
html.ds-dark .nav-search:hover svg { color: var(--ds-d-muted); }
html.ds-dark .nav-search input { color: var(--ds-d-fg); }
html.ds-dark .nav-search input::placeholder { color: oklch(55% 0.015 285); }
html.ds-dark .nav-separator,
html.ds-dark .nav-search-divider { background: oklch(100% 0 0 / 0.12); }
html.ds-dark .nav-mobile-toggle { color: var(--ds-d-fg); }
html.ds-dark .nav-mobile-toggle:hover,
html.ds-dark .nav-mobile-toggle.open {
  background: var(--ds-d-accent-tint);
  color: var(--ds-d-accent);
}
@media (min-width: 769px) {
  html.ds-dark .nav-search:hover { background: oklch(100% 0 0 / 0.06); }
  html.ds-dark .nav-search:hover svg { color: var(--ds-d-accent); }
  html.ds-dark .nav-search.expanded,
  html.ds-dark .nav-search.expanded:hover {
    background: var(--ds-d-sunken);
    box-shadow: 0 0 0 1.5px oklch(70% 0.14 278 / 0.35), 0 4px 16px oklch(0% 0 0 / 0.35);
  }
  html.ds-dark .nav-search.expanded svg { color: var(--ds-d-accent); }
  /* The signed-in "My account" pill, near-black ink in daylight. */
  html.ds-dark .nav-dash-row > a:first-child {
    background: var(--ds-d-accent-solid);
    border-color: var(--ds-d-accent-solid);
    color: #fff;
  }
  html.ds-dark .nav-dash-row > a:first-child:hover {
    background: var(--ds-d-accent-solid-hover);
    border-color: var(--ds-d-accent-solid-hover);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   css/components.css — buttons, cards, inputs, cookie banner
   ══════════════════════════════════════════════════════════════════════════ */

/* .btn-primary / .btn-white are WHITE-filled in daylight, because they sit on
   the brand purple and white is the strongest thing available there. On the
   night field white is now the loudest object on the page, so the filled
   button becomes the brand purple with white text — the same object it already
   is on the site's light bands (.section-light .btn-white). */
html.ds-dark .btn-primary,
html.ds-dark a.btn-primary:visited,
html.ds-dark .btn-white,
html.ds-dark a.btn-white:visited {
  background: var(--ds-d-accent-solid);
  color: #fff;
  border-color: var(--ds-d-accent-solid);
}
html.ds-dark .btn-primary:hover,
html.ds-dark a.btn-primary:visited:hover,
html.ds-dark .btn-white:hover,
html.ds-dark a.btn-white:visited:hover,
html.ds-dark .btn-outline:hover,
html.ds-dark a.btn-outline:visited:hover {
  background: var(--ds-d-accent-solid-hover);
  color: #fff;
  border-color: var(--ds-d-accent-solid-hover);
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.4);
}
html.ds-dark .btn-ghost:hover { background: oklch(100% 0 0 / 0.08); }

html.ds-dark .card { background: var(--ds-d-surface); border-color: var(--ds-d-border); }
html.ds-dark .card:hover { border-color: oklch(70% 0.14 278 / 0.35); }

html.ds-dark .input {
  background: var(--ds-d-sunken);
  border-color: var(--ds-d-border);
  color: var(--ds-d-fg);
}
html.ds-dark .input:focus {
  border-color: var(--ds-d-accent);
  box-shadow: 0 0 0 3px oklch(70% 0.14 278 / 0.22);
}
html.ds-dark .input::placeholder { color: oklch(55% 0.015 285); }

html.ds-dark .cookie-banner {
  background: oklch(20% 0.028 285 / 0.92);
  border-top-color: oklch(100% 0 0 / 0.10);
  box-shadow: 0 -4px 20px oklch(0% 0 0 / 0.45);
}
html.ds-dark .cookie-banner p { color: var(--ds-d-muted); }
html.ds-dark .cookie-banner p a { color: var(--ds-d-accent); }
html.ds-dark .cookie-banner-actions .btn-primary {
  background: var(--ds-d-accent-solid);
  border-color: var(--ds-d-accent-solid);
  color: #fff;
}
html.ds-dark .cookie-banner-actions .btn-primary:hover {
  background: var(--ds-d-accent-solid-hover);
  border-color: var(--ds-d-accent-solid-hover);
}
html.ds-dark .cookie-banner-actions .btn-outline {
  color: var(--ds-d-muted);
  border-color: var(--ds-d-border-strong);
}
html.ds-dark .cookie-banner-actions .btn-outline:hover {
  background: oklch(100% 0 0 / 0.07);
  color: var(--ds-d-fg);
  border-color: var(--ds-d-fg);
}

/* ══════════════════════════════════════════════════════════════════════════
   css/dashboards.css
   ══════════════════════════════════════════════════════════════════════════ */

html.ds-dark .dash-tabs {
  background: var(--ds-d-surface);
  border-color: var(--ds-d-border);
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.3);
}
html.ds-dark .dash-tab-item { color: var(--ds-d-muted); }
html.ds-dark .dash-tab-item:hover {
  background: var(--ds-d-accent-tint);
  color: var(--ds-d-accent);
}
html.ds-dark .dash-tab-item.active {
  background: var(--ds-d-accent-solid);
  color: #fff;
  box-shadow: none;
}
html.ds-dark .dash-stat-card {
  border-color: var(--ds-d-border);
  box-shadow: 0 2px 8px oklch(0% 0 0 / 0.3);
}
html.ds-dark .dash-stat-card::before {
  background: linear-gradient(90deg, var(--ds-d-accent-solid), oklch(72% 0.12 285));
}
html.ds-dark .dash-stat-value { color: var(--ds-d-fg); }
html.ds-dark .dash-stat-label { color: var(--ds-d-muted); }
html.ds-dark .dash-action-sep { background: oklch(100% 0 0 / 0.18); }
html.ds-dark .empty-state { color: var(--ds-d-fg); }
html.ds-dark .empty-state svg { color: var(--ds-d-faint); }
html.ds-dark .empty-state p { color: var(--ds-d-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   css/footer.css
   ══════════════════════════════════════════════════════════════════════════ */

/* The footer is already near-black in daylight, but it is a WARM black
   (#0F0B0A, hue 60). Against a cool indigo page that reads brown, so it moves
   into the page's own hue and simply becomes the darkest band on it. */
html.ds-dark .footer {
  background: oklch(11.5% 0.018 285);
  color: var(--ds-d-muted);
}
html.ds-dark .footer-top .logo-text { color: var(--ds-d-fg); }
html.ds-dark .footer-top .logo-dk,
html.ds-dark .footer-top p { color: oklch(62% 0.015 285); }
html.ds-dark .footer-group .footer-label { color: oklch(52% 0.015 285); }
html.ds-dark .footer-group a,
html.ds-dark .footer-cookies { color: oklch(70% 0.015 285); }
html.ds-dark .footer-group a:hover,
html.ds-dark .footer-cookies:hover,
html.ds-dark .footer-cookies:focus-visible { color: var(--ds-d-fg); }
html.ds-dark .footer-bottom {
  border-top-color: oklch(100% 0 0 / 0.08);
  color: oklch(48% 0.015 285);
}
html.ds-dark .footer-social a {
  background: oklch(100% 0 0 / 0.06);
  color: oklch(70% 0.015 285);
}
html.ds-dark .footer-social a:hover {
  background: oklch(100% 0 0 / 0.12);
  color: var(--ds-d-fg);
}
html.ds-dark .footer-motion-toggle,
html.ds-dark .footer-theme-toggle { color: oklch(70% 0.015 285); }
html.ds-dark .footer-motion-toggle:hover,
html.ds-dark .footer-theme-toggle:hover { color: var(--ds-d-fg); }
html.ds-dark .footer-motion-toggle.active .fmt-switch,
html.ds-dark .footer-theme-toggle.active .fmt-switch { background: var(--ds-d-accent-solid); }
html.ds-dark .footer-motion-toggle:focus-visible,
html.ds-dark .footer-theme-toggle:focus-visible { outline-color: var(--ds-d-accent); }

/* ══════════════════════════════════════════════════════════════════════════
   css/hero.css — home page
   ══════════════════════════════════════════════════════════════════════════ */

/* The cloud wallpaper is a daytime sky. Rather than ship a second video, the
   existing one is graded down to dusk: darker, slightly desaturated, and
   pushed toward the page's own violet by the tint layer on .hero-scrim below.
   Applied to the still as well so the placeholder and the video still match
   frame-for-frame (the whole reason the still exists — see hero.css). */
html.ds-dark .hero { background: oklch(27% 0.07 278); }
html.ds-dark .hero-video,
html.ds-dark .hero-video-still { filter: brightness(0.58) saturate(0.81) contrast(1.04); }
html.ds-dark .hero-scrim {
  background:
    linear-gradient(90deg,
      oklch(16% 0.05 285 / 0.21) 0%,
      oklch(16% 0.05 285 / 0.30) 50%,
      oklch(16% 0.05 285 / 0.21) 100%),
    linear-gradient(180deg,
      oklch(16% 0.05 285 / 0.27) 0%,
      oklch(16% 0.05 285 / 0.04) 55%);
}
@media (max-width: 640px) {
  html.ds-dark .hero { background: oklch(27% 0.07 278); }
  html.ds-dark .hero-scrim {
    background: linear-gradient(180deg,
      oklch(16% 0.05 285 / 0.46) 0%,
      oklch(16% 0.05 285 / 0.36) 45%,
      oklch(16% 0.05 285 / 0.21) 72%,
      oklch(16% 0.05 285 / 0.09) 100%);
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  html.ds-dark .hero { background: oklch(27% 0.07 278); }
}
/* The hero's bottom edge fades into whatever follows it — the body field. */
html.ds-dark .hero::after {
  background: linear-gradient(to bottom,
    transparent 0%,
    oklch(16% 0.025 285 / 0.55) 55%,
    oklch(16% 0.025 285) 100%);
}
html.ds-dark .hero:has(.hero-video)::after { background: oklch(100% 0 0 / 0.14); }

html.ds-dark .hero-content .hero-title-prefix { color: var(--ds-d-fg); }
html.ds-dark .hero-rotate-word { color: oklch(84% 0.10 280); }
html.ds-dark .hero-search {
  background: var(--ds-d-surface);
  border-color: var(--ds-d-border-strong);
  box-shadow: 0 2px 8px oklch(0% 0 0 / 0.3);
}
html.ds-dark .hero-search:focus-within {
  border-color: var(--ds-d-accent);
  box-shadow: 0 0 0 4px oklch(70% 0.14 278 / 0.25), 0 2px 8px oklch(0% 0 0 / 0.3);
}
html.ds-dark .hero-search input::placeholder,
html.ds-dark .search-header-bar input::placeholder { color: oklch(55% 0.015 285); }
html.ds-dark .hero-search button,
html.ds-dark .search-header-bar button {
  background: var(--ds-d-accent-solid);
  color: #fff;
}
html.ds-dark .hero-search button:hover,
html.ds-dark .hero-search button:active,
html.ds-dark .search-header-bar button:hover,
html.ds-dark .search-header-bar button:active {
  background: var(--ds-d-accent-solid-hover);
  color: #fff;
}
/* "Browse partners" — a light lavender fill with dark text in daylight. It is
   the one light object the hero is allowed, and it still works here: on a dusk
   sky a pale pill is exactly the right amount of contrast for a secondary CTA. */
html.ds-dark .hero-browse-cta,
html.ds-dark .hero-browse-cta:visited {
  background: oklch(84% 0.09 280);
  border-color: oklch(84% 0.09 280);
  color: oklch(18% 0.04 285);
  box-shadow: 0 2px 10px oklch(0% 0 0 / 0.35);
}
html.ds-dark .hero-browse-cta:hover {
  background: oklch(92% 0.05 280);
  border-color: oklch(92% 0.05 280);
}
html.ds-dark .hero-marquee {
  background: oklch(12% 0.03 285 / 0.5);
  border-top-color: oklch(100% 0 0 / 0.10);
}
html.ds-dark .hero-marquee-item { color: oklch(90% 0.01 285); }
html.ds-dark .hero-marquee-item svg { color: var(--ds-d-success); }
html.ds-dark .back-to-top {
  background: oklch(20% 0.03 285 / 0.72);
  border-color: oklch(100% 0 0 / 0.16);
  color: var(--ds-d-fg);
}

/* How it works */
html.ds-dark .steps-grid::before {
  background: linear-gradient(90deg,
    oklch(70% 0.14 278 / 0.12), oklch(70% 0.14 278 / 0.35), oklch(70% 0.14 278 / 0.12));
}
html.ds-dark .step { background: var(--ds-d-surface); border-color: var(--ds-d-border); }
html.ds-dark .step p { color: var(--ds-d-muted); }
/* The step numbers pulse through hardcoded purples in three keyframe sets. The
   animation wins over any static background, so the badge is re-tinted with a
   filter instead — brightening the same brand hue rather than replacing it. */
html.ds-dark .step-number { filter: brightness(1.12) saturate(1.05); }

/* Categories */
html.ds-dark .category-card:hover {
  border-color: oklch(70% 0.14 278 / 0.4);
  background: var(--ds-d-surface-2);
}
html.ds-dark .category-card p { color: var(--ds-d-muted); }
html.ds-dark .category-icon {
  background: linear-gradient(135deg, oklch(58% 0.13 288), oklch(50% 0.15 277));
}

/* Featured partners */
html.ds-dark .agency-card:hover { border-color: oklch(70% 0.14 278 / 0.35); }
html.ds-dark .agency-avatar {
  background: linear-gradient(135deg, oklch(70% 0.14 278 / 0.14), oklch(70% 0.14 278 / 0.24));
  color: var(--ds-d-accent);
}
html.ds-dark .agency-listings-badge { border-color: var(--ds-d-surface); }
html.ds-dark .agency-location { color: var(--ds-d-muted); }
html.ds-dark .agency-description { color: var(--ds-d-muted); }
html.ds-dark .agency-tags .tag,
html.ds-dark .sidebar-tags .tag,
html.ds-dark .experience-tags .tag,
html.ds-dark .svc-tags .tag,
html.ds-dark .profile-hero-tags .tag,
html.ds-dark .search-card-tags .tag,
html.ds-dark .saved-card-tags .tag {
  background: var(--ds-d-accent-tint);
  color: var(--ds-d-accent);
  border-color: oklch(70% 0.14 278 / 0.22);
}
html.ds-dark .agency-footer { border-top-color: var(--ds-d-border); }
html.ds-dark .agency-rating { color: var(--ds-d-fg); }
html.ds-dark .cta-list-btn { color: #fff; }

/* Promises band — four opaque white cards on the deepest band. White on a dark
   band is a glare panel, so they become lifted surfaces like every other card,
   and the accent card keeps its mint tint at dark-mode strength. */
html.ds-dark .stat {
  background: var(--ds-d-surface);
  border: 1px solid var(--ds-d-border);
  box-shadow: 0 10px 30px oklch(0% 0 0 / 0.35);
}
html.ds-dark .stat-number { color: oklch(80% 0.12 280); }
html.ds-dark .stat-label { color: var(--ds-d-muted); }
html.ds-dark .stat-feature {
  background: oklch(28% 0.05 175);
  border-color: oklch(70% 0.12 175 / 0.35);
  box-shadow: 0 10px 30px oklch(0% 0 0 / 0.35), 0 0 0 1px oklch(70% 0.12 175 / 0.25);
}
html.ds-dark .stat-feature .stat-number { color: oklch(84% 0.14 172); }
html.ds-dark .stat-feature .stat-label { color: oklch(80% 0.06 172); }

/* Closing ask */
html.ds-dark .cta-tag {
  background: oklch(100% 0 0 / 0.07);
  border-color: oklch(100% 0 0 / 0.14);
  color: oklch(88% 0.01 285);
}
html.ds-dark .cta-tag:hover {
  background: oklch(100% 0 0 / 0.13);
  border-color: oklch(100% 0 0 / 0.24);
  color: var(--ds-d-fg);
}
html.ds-dark .cta-panel {
  background: var(--ds-d-surface);
  border: 1px solid var(--ds-d-border);
  box-shadow: 0 24px 70px oklch(0% 0 0 / 0.5);
  --fg: oklch(95% 0.008 285);
  --muted: oklch(73% 0.018 285);
  --accent: oklch(80% 0.105 280);
}
html.ds-dark .cta-sub { color: var(--ds-d-muted); }
html.ds-dark .btn-cta-secondary,
html.ds-dark a.btn-cta-secondary:visited {
  color: var(--ds-d-accent);
  border-color: oklch(70% 0.14 278 / 0.4);
}
html.ds-dark .btn-cta-secondary:hover {
  background: var(--ds-d-accent-tint);
  border-color: oklch(70% 0.14 278 / 0.65);
  color: oklch(88% 0.09 280);
}

/* ══════════════════════════════════════════════════════════════════════════
   JS-injected UI — toast (js/dom.js), report modal (js/report.js),
   conversation panel (js/inbox.js). These ship their CSS as strings inside
   their modules; overriding here keeps the theme in one file rather than
   threading a second palette through three <style> injections.
   ══════════════════════════════════════════════════════════════════════════ */

html.ds-dark .ds-toast {
  background: oklch(30% 0.035 285);
  border: 1px solid var(--ds-d-border);
}
html.ds-dark .ds-toast.ds-toast-error { background: oklch(38% 0.14 25); }

html.ds-dark .report-modal {
  background: var(--ds-d-surface);
  box-shadow: 0 24px 64px oklch(0% 0 0 / 0.6);
}
html.ds-dark .report-head h3,
html.ds-dark .report-done h3 { color: var(--ds-d-fg); }
html.ds-dark .report-head p,
html.ds-dark .report-done p { color: var(--ds-d-muted); }
html.ds-dark .report-close { color: var(--ds-d-faint); }
html.ds-dark .report-close:hover { background: oklch(100% 0 0 / 0.08); color: var(--ds-d-fg); }
html.ds-dark .report-legend { color: var(--ds-d-faint); }
html.ds-dark .report-reason {
  border-color: var(--ds-d-border);
  color: var(--ds-d-fg);
}
html.ds-dark .report-reason:hover,
html.ds-dark .report-reason.sel { border-color: var(--ds-d-accent); }
html.ds-dark .report-reason.sel { background: var(--ds-d-accent-tint); }
html.ds-dark .report-reason input { accent-color: var(--ds-d-accent-solid); }
html.ds-dark .report-details {
  background: var(--ds-d-sunken);
  border-color: var(--ds-d-border);
  color: var(--ds-d-fg);
}
html.ds-dark .report-details:focus { border-color: var(--ds-d-accent); }
html.ds-dark .report-btn-cancel {
  border-color: var(--ds-d-border-strong);
  color: var(--ds-d-muted);
}
html.ds-dark .report-btn-cancel:hover { background: oklch(100% 0 0 / 0.07); }

html.ds-dark .thread-panel {
  background: var(--ds-d-surface);
  box-shadow: -12px 0 48px oklch(0% 0 0 / 0.55);
}
html.ds-dark .thread-header { border-bottom-color: var(--ds-d-border); }
html.ds-dark .thread-header-name { color: var(--ds-d-fg); }
html.ds-dark .thread-header-sub { color: var(--ds-d-muted); }
html.ds-dark .thread-icon-btn { color: var(--ds-d-muted); }
html.ds-dark .thread-icon-btn:hover { background: oklch(100% 0 0 / 0.08); color: var(--ds-d-fg); }
html.ds-dark .thread-icon-danger:hover { background: oklch(60% 0.16 25 / 0.16); color: var(--ds-d-danger); }
html.ds-dark .thread-archive-btn {
  border-color: var(--ds-d-border-strong);
  color: var(--ds-d-accent);
}
html.ds-dark .thread-archive-btn:hover { background: var(--ds-d-accent-tint); }
html.ds-dark .thread-brief {
  background: var(--ds-d-sunken);
  border-bottom-color: var(--ds-d-border);
}
html.ds-dark .thread-brief-toggle,
html.ds-dark .thread-brief-toggle .chev,
html.ds-dark .thread-brief-close { color: var(--ds-d-accent); }
html.ds-dark .thread-brief-title { color: var(--ds-d-fg); }
html.ds-dark .thread-brief-meta,
html.ds-dark .thread-brief-closed-note { color: var(--ds-d-faint); }
html.ds-dark .thread-brief-desc { color: var(--ds-d-muted); }
html.ds-dark .thread-brief-close { border-color: oklch(70% 0.14 278 / 0.3); }
html.ds-dark .thread-brief-close:hover { background: var(--ds-d-accent-tint); }
html.ds-dark .thread-messages,
html.ds-dark .thread-typing { background: var(--ds-d-bg); }
html.ds-dark .thread-empty,
html.ds-dark .thread-typing-text { color: var(--ds-d-faint); }
html.ds-dark .thread-date,
html.ds-dark .thread-system {
  background: oklch(100% 0 0 / 0.07);
  color: var(--ds-d-faint);
}
html.ds-dark .mine .msg-bubble { background: var(--ds-d-accent-solid); color: #fff; }
html.ds-dark .theirs .msg-bubble {
  background: var(--ds-d-surface-2);
  color: var(--ds-d-fg);
  border-color: var(--ds-d-border);
}
html.ds-dark .msg-time { color: var(--ds-d-faint); }
html.ds-dark .thread-typing-bubble {
  background: var(--ds-d-surface-2);
  border-color: var(--ds-d-border);
}
html.ds-dark .thread-typing-dots span { background: var(--ds-d-faint); }
html.ds-dark .thread-composer {
  background: var(--ds-d-surface);
  border-top-color: var(--ds-d-border);
}
html.ds-dark .thread-composer textarea {
  background: var(--ds-d-sunken);
  border-color: var(--ds-d-border);
  color: var(--ds-d-fg);
}
html.ds-dark .thread-composer textarea:focus { border-color: var(--ds-d-accent); }

/* ══════════════════════════════════════════════════════════════════════════
   Per-page <style> blocks
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Marketing pages (about, how-it-works, terms, privacy, both FAQs) ──────
   All six share one shape: a purple hero band, then a single white content
   panel with `border: 1px solid #e5e5e5` and #111 / #6b6b6b text inside it. */
html.ds-dark .about-mission-inner,
html.ds-dark .about-stat-card,
html.ds-dark .about-value-card,
html.ds-dark .hiw-body-inner,
html.ds-dark .hiw-switch,
html.ds-dark .terms-body-inner,
html.ds-dark .privacy-body-inner,
html.ds-dark .faq-body-inner,
html.ds-dark .contact-card {
  background: var(--ds-d-surface);
  border-color: var(--ds-d-border);
}
html.ds-dark .about-mission h2,
html.ds-dark .about-value-card h3,
html.ds-dark .hiw-step-content h3,
html.ds-dark .hiw-section-title,
html.ds-dark .hiw-tip strong,
html.ds-dark .terms-body-inner h2,
html.ds-dark .privacy-body-inner h2,
html.ds-dark .privacy-body-inner h3,
html.ds-dark .faq-question,
html.ds-dark .faq-section-title,
html.ds-dark .contact-card h1,
html.ds-dark .contact-success h2 { color: var(--ds-d-fg); }
html.ds-dark .about-mission p,
html.ds-dark .about-stat-label,
html.ds-dark .about-values > .container > p,
html.ds-dark .about-value-card p,
html.ds-dark .hiw-switch button,
html.ds-dark .hiw-step-content p,
html.ds-dark .hiw-cta p,
html.ds-dark .hiw-tip p,
html.ds-dark .terms-body-inner p,
html.ds-dark .terms-body-inner li,
html.ds-dark .privacy-body-inner p,
html.ds-dark .privacy-body-inner li,
html.ds-dark .faq-answer p,
html.ds-dark .contact-card > p,
html.ds-dark .contact-success p { color: var(--ds-d-muted); }
html.ds-dark .hiw-step,
html.ds-dark .hiw-section-title,
html.ds-dark .hiw-cta,
html.ds-dark .faq-item,
html.ds-dark .faq-section-title { border-color: var(--ds-d-border); }
html.ds-dark .about-mission-visual,
html.ds-dark .about-value-icon,
html.ds-dark .contact-card-icon,
html.ds-dark .contact-success-icon { background: var(--ds-d-accent-tint); }
html.ds-dark .hiw-switch button:hover:not([aria-selected="true"]) { background: var(--ds-d-accent-tint); }
/* The selected tab. Its own rule is `.hiw-switch button[aria-selected="true"]`,
   which the muted-colour rule above outranks by one element — restate it. */
html.ds-dark .hiw-switch button[aria-selected="true"] {
  background: var(--ds-d-accent-solid);
  color: #fff;
}
html.ds-dark .about-cta .btn {
  background: var(--ds-d-accent-solid);
  border-color: var(--ds-d-accent-solid);
  color: #fff;
}

/* Contact form */
html.ds-dark .form-group label { color: var(--ds-d-muted); }
html.ds-dark .form-group input,
html.ds-dark .form-group select,
html.ds-dark .form-group textarea {
  background: var(--ds-d-sunken);
  border-color: var(--ds-d-border);
  color: var(--ds-d-fg);
}
html.ds-dark .form-group input:focus,
html.ds-dark .form-group select:focus,
html.ds-dark .form-group textarea:focus {
  background: var(--ds-d-sunken);
  box-shadow: 0 0 0 3px oklch(70% 0.14 278 / 0.22);
}

/* ── Role select / become a partner ───────────────────────────────────────── */
html.ds-dark .rs-card { background: var(--ds-d-surface); }
html.ds-dark .rs-card-header { background: var(--ds-d-sunken); border-bottom-color: var(--ds-d-border); }
html.ds-dark .rs-card-header h2 { color: var(--ds-d-fg); }
html.ds-dark .rs-opt { background: var(--ds-d-sunken); border-color: var(--ds-d-border); }
html.ds-dark .rs-opt.active {
  background: var(--ds-d-accent-tint);
  box-shadow: 0 0 0 3px oklch(70% 0.14 278 / 0.25);
}
html.ds-dark .rs-opt small,
html.ds-dark .rs-section-label,
html.ds-dark .rs-hint,
html.ds-dark .rs-back { color: var(--ds-d-muted); }
html.ds-dark .rs-field input,
html.ds-dark .rs-field select,
html.ds-dark .rs-field textarea {
  background: var(--ds-d-sunken);
  border-color: var(--ds-d-border);
  color: var(--ds-d-fg);
}
html.ds-dark .rs-note {
  background: var(--ds-d-accent-tint);
  border-color: oklch(70% 0.14 278 / 0.3);
}
html.ds-dark .rs-error,
html.ds-dark .auth-error {
  background: oklch(60% 0.15 25 / 0.14);
  color: oklch(80% 0.12 25);
}
html.ds-dark .rs-topbar .nav-lang-btn,
html.ds-dark .rs-signout,
html.ds-dark .auth-back,
html.ds-dark .profile-back { border-color: oklch(100% 0 0 / 0.18); }

/* Chips (shared by role-select, become-partner, login, add-service, settings) */
html.ds-dark .tag-chips .chip,
html.ds-dark .tag-input-box .chip {
  background: var(--ds-d-surface-2);
  border-color: var(--ds-d-border);
  color: var(--ds-d-fg);
}
html.ds-dark .tag-chips .chip.active {
  background: var(--ds-d-accent-solid);
  border-color: var(--ds-d-accent-solid);
  color: #fff;
}

/* ── Login / register ─────────────────────────────────────────────────────── */
html.ds-dark .auth-card {
  background: var(--ds-d-surface);
  border-color: var(--ds-d-border);
}
html.ds-dark .auth-social-btn {
  background: var(--ds-d-surface-2);
  border-color: var(--ds-d-border);
  color: var(--ds-d-fg);
}
html.ds-dark .auth-social-btn:hover { background: oklch(33% 0.032 285); }
html.ds-dark .auth-divider { color: var(--ds-d-faint); }
html.ds-dark .auth-tab,
html.ds-dark .role-option { color: var(--ds-d-muted); }
html.ds-dark .auth-tab:hover:not(.active),
html.ds-dark .role-option:hover:not(.active) {
  background: oklch(100% 0 0 / 0.06);
  color: var(--ds-d-accent);
}
html.ds-dark .auth-tab.active,
html.ds-dark .role-option.active {
  background: linear-gradient(135deg, oklch(58% 0.155 277), oklch(53% 0.14 288));
  color: #fff;
  box-shadow: none;
}
html.ds-dark .role-toggle { background: oklch(100% 0 0 / 0.05); }
html.ds-dark .auth-form .input {
  background: var(--ds-d-sunken);
  color: var(--ds-d-fg);
}
html.ds-dark .auth-form .input:focus { background: var(--ds-d-sunken); }
html.ds-dark .auth-form .input::placeholder { color: oklch(55% 0.015 285); }

/* ── Browse partners (search) ─────────────────────────────────────────────── */
html.ds-dark .search-header-bar {
  background: var(--ds-d-surface);
  border-color: var(--ds-d-border-strong);
}
html.ds-dark .search-header-bar:focus-within { border-color: var(--ds-d-accent); }
html.ds-dark .filter-chip {
  background: var(--ds-d-accent-tint);
  color: var(--ds-d-accent);
  border-color: oklch(70% 0.14 278 / 0.3);
}
html.ds-dark .filter-chip:hover {
  background: var(--ds-d-accent-tint-2);
  border-color: oklch(70% 0.14 278 / 0.45);
}
html.ds-dark .filter-chip .chip-close { background: oklch(70% 0.14 278 / 0.25); }
html.ds-dark .filter-chip:hover .chip-close { background: oklch(70% 0.14 278 / 0.4); }
html.ds-dark .filter-card,
html.ds-dark .filters-toggle,
html.ds-dark .pagination,
html.ds-dark .sort-select select,
html.ds-dark .cat-quick-filter {
  background: var(--ds-d-surface);
  border-color: var(--ds-d-border);
  color: var(--ds-d-fg);
}
html.ds-dark .sort-select select { background-color: var(--ds-d-surface); }
html.ds-dark .sort-select select option {
  background: var(--ds-d-surface);
  color: var(--ds-d-fg);
}
html.ds-dark .filter-section-header h4,
html.ds-dark .cat-group-heading { color: var(--ds-d-faint); }
html.ds-dark .filter-section-header .collapse-icon,
html.ds-dark .cat-group-icon,
html.ds-dark .filter-check .count { color: oklch(52% 0.015 285); }
html.ds-dark .cat-group { border-top-color: var(--ds-d-border); }
html.ds-dark .filter-check { color: var(--ds-d-fg); }
html.ds-dark .filter-check:hover,
html.ds-dark .cat-group-heading:hover { background: var(--ds-d-accent-tint); }
html.ds-dark .filter-check input[type="checkbox"] { accent-color: var(--ds-d-accent-solid); }
html.ds-dark .search-card { background: var(--ds-d-surface); border-color: var(--ds-d-border); }
html.ds-dark .search-card:hover {
  background: var(--ds-d-surface);
  border-color: oklch(70% 0.14 278 / 0.35);
}
html.ds-dark .search-card-name { color: var(--ds-d-fg); }
html.ds-dark .search-card-location,
html.ds-dark .search-card-desc { color: var(--ds-d-muted); }
html.ds-dark .search-card-rating .rating-num { color: var(--ds-d-fg); }
html.ds-dark .search-card-rating .rating-count,
html.ds-dark .search-card-rating .rating-none,
html.ds-dark .search-card-tags .tag-more { color: var(--ds-d-faint); }
html.ds-dark .search-card-listings-badge { border-color: var(--ds-d-surface); }
html.ds-dark .search-card-actions .btn-outline,
html.ds-dark .search-card-actions a.btn-outline:visited,
html.ds-dark .saved-card-actions .btn-outline,
html.ds-dark .saved-card-actions a.btn-outline:visited {
  color: var(--ds-d-accent);
  border-color: oklch(70% 0.14 278 / 0.35);
}
html.ds-dark .search-card-actions .btn-outline:hover,
html.ds-dark .saved-card-actions .btn-outline:hover {
  background: var(--ds-d-accent-tint);
  border-color: oklch(70% 0.14 278 / 0.55);
}
html.ds-dark .pagination a:hover {
  background: var(--ds-d-accent-tint);
  border-color: oklch(70% 0.14 278 / 0.25);
}
html.ds-dark .pagination a.active {
  background: var(--ds-d-accent-solid);
  border-color: var(--ds-d-accent-solid);
  color: #fff;
  box-shadow: none;
}
html.ds-dark .search-empty-icon { border-color: oklch(70% 0.14 278 / 0.28); }
html.ds-dark .search-empty-actions .btn-empty-ghost {
  color: var(--ds-d-muted);
  border-color: var(--ds-d-border-strong);
}
html.ds-dark .search-empty-actions .btn-empty-ghost:hover {
  background: oklch(100% 0 0 / 0.07);
  color: var(--ds-d-fg);
  border-color: var(--ds-d-fg);
}

/* ── Partner profile ──────────────────────────────────────────────────────── */
html.ds-dark .page-band.has-banner { background-color: oklch(28% 0.075 278); }
/* A partner's cover photo is the one thing on the page dark mode can't restyle
   — it stays as bright as it was shot, so on a dark page it glares next to the
   sunken surfaces around it. Deepening the scrim (the light-mode values live in
   screens/profile.html) tones the photo down without touching the image itself;
   the middle stop stays the lightest so the picture is still the thing you see.
   Needs the html.ds-dark prefix to outrank the page's own unlayered rule, which
   comes later in the document. */
html.ds-dark .page-band.has-banner::before {
  background: linear-gradient(180deg,
    oklch(0% 0 0 / 0.46) 0%,
    oklch(0% 0 0 / 0.30) 45%,
    oklch(0% 0 0 / 0.44) 100%);
}
html.ds-dark .profile-hero,
html.ds-dark .profile-section,
html.ds-dark .portfolio-card {
  background: var(--ds-d-surface);
  border-color: var(--ds-d-border);
}
html.ds-dark .profile-share {
  background: var(--ds-d-surface-2);
  border-color: var(--ds-d-border);
  color: var(--ds-d-fg);
}
html.ds-dark .profile-share:hover,
html.ds-dark .profile-share:focus-visible {
  background: var(--ds-d-accent-tint);
  border-color: oklch(70% 0.14 278 / 0.45);
}
html.ds-dark .profile-hero-body h1,
html.ds-dark .profile-section h3,
html.ds-dark .skills-table td:first-child,
html.ds-dark .experience-table td:first-child,
html.ds-dark .skills-legend-public .legend-row strong,
html.ds-dark .svc-name,
html.ds-dark .step-t,
html.ds-dark .profile-hero-rating strong,
html.ds-dark .reviews-avg-num,
html.ds-dark .rate-title,
html.ds-dark .review-author { color: var(--ds-d-fg); }
html.ds-dark .profile-hero-location,
html.ds-dark .profile-section h3 .badge,
html.ds-dark .skills-table th,
html.ds-dark .experience-table th,
html.ds-dark .skills-legend-public .legend-title,
html.ds-dark .profile-sidebar .card h4,
html.ds-dark .svc-empty,
html.ds-dark .profile-hero-rating .rating-count,
html.ds-dark .reviews-count,
html.ds-dark .reviews-empty,
html.ds-dark .review-date { color: var(--ds-d-faint); }
html.ds-dark .skills-table td,
html.ds-dark .experience-table td,
html.ds-dark .portfolio-desc,
html.ds-dark .svc-desc,
html.ds-dark .reassure li,
html.ds-dark .self-note,
html.ds-dark .rate-comment,
html.ds-dark .profile-hero-rating { color: var(--ds-d-muted); }
html.ds-dark .skills-table th,
html.ds-dark .experience-table th,
html.ds-dark .skills-legend-public,
html.ds-dark .rate-box { background: var(--ds-d-sunken); }
html.ds-dark .profile-hero-avatar,
html.ds-dark .profile-listings-badge { box-shadow: none; }
html.ds-dark .profile-listings-badge { border-color: var(--ds-d-surface); }
html.ds-dark .profile-hero-social a { background: var(--ds-d-accent-tint); color: var(--ds-d-accent); }
html.ds-dark .profile-hero-social a:hover { background: var(--ds-d-accent-solid); color: #fff; }
html.ds-dark .svc-card { border-color: var(--ds-d-border); background: var(--ds-d-sunken); }
html.ds-dark .svc-card:hover { border-color: oklch(70% 0.14 278 / 0.35); }
html.ds-dark .svc-inquire { border-color: oklch(70% 0.14 278 / 0.4); color: var(--ds-d-accent); }
html.ds-dark .step-n { background: var(--ds-d-accent-tint); color: var(--ds-d-accent); }
html.ds-dark .contact-card .btn-save,
html.ds-dark .contact-card .btn-save:hover {
  background: var(--ds-d-surface-2);
  border-color: var(--ds-d-border);
  color: var(--ds-d-fg);
}
html.ds-dark .rate-remove {
  background: var(--ds-d-surface-2);
  border-color: var(--ds-d-border);
  color: var(--ds-d-muted);
}
html.ds-dark .rate-remove:hover { background: oklch(60% 0.16 25 / 0.16); color: var(--ds-d-danger); }

/* ── Settings ─────────────────────────────────────────────────────────────── */
html.ds-dark .settings-card-header { background: var(--ds-d-sunken); border-bottom-color: var(--ds-d-border); }
html.ds-dark .settings-card-header h2,
html.ds-dark .settings-toggle-info .title,
html.ds-dark .skills-legend-item strong { color: var(--ds-d-fg); }
html.ds-dark .settings-field label,
html.ds-dark .settings-toggle-info .desc,
html.ds-dark .portfolio-empty,
html.ds-dark .skills-subheading,
html.ds-dark .experience-current-row { color: var(--ds-d-muted); }
html.ds-dark .settings-field input,
html.ds-dark .settings-field textarea,
html.ds-dark .settings-field select,
html.ds-dark .skill-row .skill-name,
html.ds-dark .tag-input-box,
html.ds-dark .pf-move {
  background: var(--ds-d-sunken);
  border-color: var(--ds-d-border);
  color: var(--ds-d-fg);
}
html.ds-dark .portfolio-item,
html.ds-dark .skill-row,
html.ds-dark .experience-item {
  background: var(--ds-d-sunken);
  border-color: var(--ds-d-border);
}
/* Empty level dots only — `.level-star.filled` is a two-class selector this
   would otherwise outrank, blanking the filled half of the scale. */
html.ds-dark .level-star:not(.filled) { color: oklch(38% 0.015 285); }
html.ds-dark .level-star.filled { color: oklch(78% 0.12 280); }
html.ds-dark .skills-legend,
html.ds-dark .settings-toggle { border-color: var(--ds-d-border); }
/* Off state only. `.toggle-switch.active` (the page's own brand fill) is a
   two-class selector, so an unscoped `html.ds-dark .toggle-switch` outranks it
   and every switch on the page reads as off. */
html.ds-dark .toggle-switch:not(.active) { background: oklch(35% 0.02 285); }
html.ds-dark .toggle-switch.active { background: var(--ds-d-accent-solid); }
html.ds-dark .toggle-switch::after { background: var(--ds-d-fg); }
html.ds-dark .settings-danger { border-color: oklch(60% 0.15 25 / 0.3); }
html.ds-dark .settings-danger .settings-card-header {
  background: oklch(60% 0.15 25 / 0.12);
  border-bottom-color: oklch(60% 0.15 25 / 0.22);
}
html.ds-dark .btn-danger { background: var(--ds-d-danger); border-color: var(--ds-d-danger); color: oklch(15% 0.02 25); }
html.ds-dark .success-toast {
  background: oklch(70% 0.14 160 / 0.16);
  color: oklch(84% 0.13 162);
}
/* The no-banner state only. `.has-photo` is the class js sets alongside the
   inline background-image, and it deliberately clears the gradient — restating
   one here at higher specificity would put the purple back underneath a
   transparent PNG. */
html.ds-dark .banner-preview:not(.has-photo) {
  background-color: oklch(28% 0.075 278);
  background-image: linear-gradient(180deg, oklch(30% 0.075 278), oklch(23% 0.065 280));
}
html.ds-dark .banner-preview.has-photo { background-color: var(--ds-d-sunken); }

/* ── Inbox ────────────────────────────────────────────────────────────────── */
html.ds-dark .inbox-search {
  background: var(--ds-d-surface);
  border-color: var(--ds-d-border-strong);
}
html.ds-dark .inbox-search input { color: var(--ds-d-fg); }
html.ds-dark .inbox-search input::placeholder,
html.ds-dark .inbox-search svg { color: var(--ds-d-faint); }
html.ds-dark .conversation-card.is-unread {
  background: linear-gradient(var(--ds-d-accent-tint), var(--ds-d-accent-tint)), var(--ds-d-surface);
}
html.ds-dark .conversation-name { color: var(--ds-d-fg); }
html.ds-dark .conversation-sub,
html.ds-dark .conversation-time,
html.ds-dark .conversation-preview,
html.ds-dark .conversation-status { color: var(--ds-d-muted); }
html.ds-dark .conversation-flag {
  background: oklch(100% 0 0 / 0.08);
  color: var(--ds-d-muted);
}
html.ds-dark .inbox-stat {
  background: oklch(100% 0 0 / 0.06);
  border-color: oklch(100% 0 0 / 0.12);
  color: oklch(85% 0.012 285);
}
html.ds-dark .inbox-stat svg { color: var(--ds-d-muted); }
html.ds-dark .inbox-stat strong { color: var(--ds-d-fg); }

/* ── Briefs (client + partner boards, the brief form, add-service) ────────── */
html.ds-dark .briefs-stat-value,
html.ds-dark .brief-card-title,
html.ds-dark .brief-next-card li strong,
html.ds-dark .success-state h2,
html.ds-dark .preview-service .ps-name,
html.ds-dark .preview-service .ps-price { color: var(--ds-d-fg); }
html.ds-dark .briefs-stat-label,
html.ds-dark .brief-card-meta,
html.ds-dark .brief-card .form-group .hint,
html.ds-dark .brief-next-card li span,
html.ds-dark .brief-tips-card h3,
html.ds-dark .brief-next-card h3,
html.ds-dark .tips-card h3,
html.ds-dark .success-state p,
html.ds-dark .success-block p,
html.ds-dark .preview-service .ps-meta,
html.ds-dark .preview-service .ps-desc,
html.ds-dark .bb-desc { color: var(--ds-d-muted); }
html.ds-dark .brief-tips-card li,
html.ds-dark .brief-next-card li,
html.ds-dark .tips-card li { color: var(--ds-d-fg); }
html.ds-dark .brief-card input,
html.ds-dark .brief-card select,
html.ds-dark .brief-card textarea,
html.ds-dark .briefs-search,
html.ds-dark .briefs-select {
  background: var(--ds-d-sunken);
  border-color: var(--ds-d-border);
  color: var(--ds-d-fg);
}
html.ds-dark .brief-card input:focus,
html.ds-dark .brief-card select:focus,
html.ds-dark .brief-card textarea:focus { background: var(--ds-d-sunken); }
html.ds-dark .brief-tips-card,
html.ds-dark .brief-next-card,
html.ds-dark .tips-card,
html.ds-dark .preview-card {
  border-color: var(--ds-d-border);
  color: var(--ds-d-fg);
}
html.ds-dark .preview-service {
  background: var(--ds-d-sunken);
  border-color: var(--ds-d-border);
}
html.ds-dark .preview-service .ps-desc { border-top-color: var(--ds-d-border); }
html.ds-dark .preview-service .ps-tags span {
  background: var(--ds-d-surface-2);
  color: var(--ds-d-fg);
}
html.ds-dark .success-block { background: oklch(70% 0.14 160 / 0.10); }
html.ds-dark .success-block .check-icon,
html.ds-dark .success-state .icon { background: oklch(70% 0.14 160 / 0.16); }
html.ds-dark .brief-status-open { background: var(--ds-d-accent-tint); color: var(--ds-d-accent); }
html.ds-dark .brief-status-review { background: oklch(70% 0.12 220 / 0.16); color: oklch(82% 0.10 220); }
html.ds-dark .brief-status-inprogress { background: oklch(70% 0.14 160 / 0.16); color: oklch(82% 0.12 162); }
html.ds-dark .brief-status-closed { background: oklch(100% 0 0 / 0.08); color: var(--ds-d-muted); }
html.ds-dark .brief-card-actions .btn-soft {
  background: var(--ds-d-surface-2);
  border-color: oklch(70% 0.14 278 / 0.35);
  color: var(--ds-d-accent);
}
html.ds-dark .brief-card-actions .btn-soft:hover {
  background: var(--ds-d-accent-tint);
  border-color: oklch(70% 0.14 278 / 0.55);
}
html.ds-dark .brief-card-actions .btn-delete {
  background: var(--ds-d-surface-2);
  border-color: oklch(60% 0.15 25 / 0.35);
  color: var(--ds-d-danger);
}
html.ds-dark .brief-card-actions .btn-delete:hover { background: oklch(60% 0.15 25 / 0.14); }
html.ds-dark .brief-board-card { background: var(--ds-d-surface); border-color: var(--ds-d-border); }
html.ds-dark .brief-board-card:hover {
  border-color: oklch(70% 0.14 278 / 0.45);
  box-shadow: 0 12px 34px oklch(0% 0 0 / 0.4);
}
html.ds-dark .bb-fact-ic { background: var(--ds-d-accent-tint); color: var(--ds-d-accent); }
html.ds-dark .bb-fact-label { color: var(--ds-d-faint); }
/* Both brief boards give the empty state its own white card. */
html.ds-dark .empty-state {
  background: var(--ds-d-surface);
  border-color: var(--ds-d-border);
}
html.ds-dark .empty-state h3 { color: var(--ds-d-fg); }
/* …but the dashboard/inbox empty states are bare, sitting straight on the
   page. Re-clear the fill there so the rule above stays scoped to the boards. */
html.ds-dark .dash-main > .empty-state,
html.ds-dark .inbox-main .empty-state,
html.ds-dark .listings-main > .empty-state { background: none; border: 0; }

/* ── Saved partners ───────────────────────────────────────────────────────── */
html.ds-dark .saved-card { background: var(--ds-d-surface); border-color: var(--ds-d-border); }
html.ds-dark .saved-card:hover { border-color: oklch(70% 0.14 278 / 0.4); }
html.ds-dark .saved-card-name { color: var(--ds-d-fg); }
html.ds-dark .saved-card-category { color: var(--ds-d-muted); }
html.ds-dark .saved-card-rating .rating-num { color: var(--ds-d-fg); }
html.ds-dark .saved-card-rating .rating-count,
html.ds-dark .saved-card-tags .tag-more { color: var(--ds-d-faint); }
html.ds-dark .saved-card-listings-badge { border-color: var(--ds-d-surface); }
html.ds-dark .saved-remove {
  background: var(--ds-d-accent-tint);
  border-color: oklch(70% 0.14 278 / 0.3);
  color: var(--ds-d-accent);
}
html.ds-dark .saved-remove:hover { background: oklch(60% 0.18 25 / 0.16); color: var(--ds-d-danger); }

/* ── Partner analytics ────────────────────────────────────────────────────── */
html.ds-dark .analytics-period { background: var(--ds-d-surface); border-color: var(--ds-d-border); }
html.ds-dark .analytics-period button { color: var(--ds-d-muted); }
html.ds-dark .analytics-period button:hover:not(.active) { background: var(--ds-d-accent-tint); }
html.ds-dark .analytics-period button.active { background: var(--ds-d-accent-solid); color: #fff; }
html.ds-dark .analytics-stat-value,
html.ds-dark .analytics-table td { color: var(--ds-d-fg); }
html.ds-dark .analytics-stat-label,
html.ds-dark .analytics-table .muted,
html.ds-dark .analytics-table-wrap::after,
html.ds-dark .chart-bar-label,
html.ds-dark .chart-empty { color: var(--ds-d-muted); }
html.ds-dark .analytics-stat-change.pos { color: oklch(80% 0.13 160); }
html.ds-dark .analytics-stat-change.neg { color: oklch(75% 0.14 25); }
html.ds-dark .analytics-table th { color: var(--ds-d-muted); background: var(--ds-d-sunken); }
html.ds-dark .analytics-table tr:hover td { background: oklch(100% 0 0 / 0.04); }
html.ds-dark .analytics-table .conversion-pill {
  background: oklch(70% 0.14 160 / 0.16);
  color: oklch(82% 0.12 162);
}
html.ds-dark .chart-tip { background: oklch(34% 0.035 285); color: var(--ds-d-fg); }
html.ds-dark .chart-tip::after { background: oklch(34% 0.035 285); }

/* ── Partner listings ─────────────────────────────────────────────────────── */
html.ds-dark .listings-stat-value,
html.ds-dark .listing-info h3,
html.ds-dark .listings-empty h3 { color: var(--ds-d-fg); }
html.ds-dark .listings-stat-label,
html.ds-dark .listing-meta,
html.ds-dark .listing-desc,
html.ds-dark .listing-tags .pill,
html.ds-dark .listing-toggle,
html.ds-dark .listings-empty p { color: var(--ds-d-muted); }
html.ds-dark .listing-tag { background: var(--ds-d-accent-tint); color: var(--ds-d-accent); }
html.ds-dark .listing-tag.paused { background: oklch(70% 0.08 80 / 0.16); color: oklch(82% 0.09 80); }
html.ds-dark .listing-action-btn {
  background: var(--ds-d-surface-2);
  border-color: var(--ds-d-border);
  color: var(--ds-d-muted);
}
html.ds-dark .listing-toggle .track { background: oklch(35% 0.02 285); }
html.ds-dark .listing-toggle input:checked + .track { background: var(--ds-d-accent-solid); }
html.ds-dark .listing-toggle .track::after { background: var(--ds-d-fg); }

/* ── Client dashboard ─────────────────────────────────────────────────────── */
html.ds-dark .quick-action-card h3 { color: var(--ds-d-fg); }
html.ds-dark .quick-action-card p { color: var(--ds-d-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   Long tail
   ──────────────────────────────────────────────────────────────────────────
   Everything below came out of two sweeps rather than from reading the pages:
   a static one over every colour declaration in the per-page <style> blocks,
   and a contrast audit run in the browser against the rendered pages (walk the
   DOM, composite each element's real background, flag any text under ~3.2:1).
   They are grouped by what they are, not by which page they came from, because
   the same three problems repeat: brand purple used as a LINK colour (too dark
   to read on a dark card), a hardcoded near-black used as a heading, and a
   near-white used as a panel fill.
   ══════════════════════════════════════════════════════════════════════════ */

/* Brand purple used as text. #5962C0 clears AA comfortably on white and lands
   at ~3:1 on a dark card — legible, but under the bar for body-sized text and
   noticeably muddier than every other link on the page. All of these move to
   the light accent. */
html.ds-dark .about-stat-value,
html.ds-dark .dash-section-header a,
html.ds-dark .conversation-brief,
html.ds-dark .profile-hero-website a,
html.ds-dark .svc-price,
html.ds-dark .portfolio-host,
html.ds-dark .bb-eyebrow,
html.ds-dark .settings-field .hint a,
html.ds-dark .auth-switch a { color: var(--ds-d-accent) !important; }
html.ds-dark .bb-eyebrow::before { background: var(--ds-d-accent); }

/* Hardcoded near-black headings. */
html.ds-dark .portfolio-name,
html.ds-dark .bb-title,
html.ds-dark .bb-fact-value { color: var(--ds-d-fg); }

/* Hardcoded greys used as secondary copy. */
html.ds-dark .profile-section p,
html.ds-dark .preview-card h3,
html.ds-dark .profile-hero-desc,
html.ds-dark .review-comment,
html.ds-dark .svc-meta,
html.ds-dark .step-d,
html.ds-dark .reviews-hint,
html.ds-dark .rs-loading,
html.ds-dark .preview-placeholder,
html.ds-dark .profile-badge.is-idle,
html.ds-dark .profile-report-link { color: var(--ds-d-muted); }
html.ds-dark .conversation-chevron,
html.ds-dark .pf-grip,
html.ds-dark .faq-last-updated,
html.ds-dark .privacy-last-updated,
html.ds-dark .terms-last-updated { color: var(--ds-d-faint); }
html.ds-dark .pf-grip:hover { color: var(--ds-d-muted); }

/* Near-white fills and hairlines. */
/* background-COLOR, not the shorthand: both of these are placeholders behind
   real artwork — .portfolio-shot is an <img>'s backdrop while it loads, and
   .portfolio-thumb takes the uploaded image as an inline background-image with
   its `background-size: cover` coming from the page's own rule. The shorthand
   would reset that size back to auto and paint the thumbnail at its natural
   pixel size. Same trap as the profile banner further up. */
html.ds-dark .portfolio-shot,
html.ds-dark .portfolio-thumb { background-color: var(--ds-d-sunken); }
html.ds-dark .portfolio-thumb.has-photo { background-color: var(--ds-d-surface-2); }
html.ds-dark .skills-table-wrap,
html.ds-dark .experience-table-wrap { border-color: var(--ds-d-border); }
html.ds-dark .bb-divider { background: linear-gradient(90deg, oklch(100% 0 0 / 0.14) 60%, transparent); }
/* The skills editor's empty level dot — same inversion problem as the empty
   rating star (see --star-off above), and the same `.filled` caveat as
   `.level-star`. */
html.ds-dark .skill-star:not(.filled) { color: oklch(38% 0.015 285); }
html.ds-dark .skill-star.filled { color: oklch(78% 0.12 280); }

/* Error / warning text, all tuned for white backgrounds. */
html.ds-dark .contact-error,
html.ds-dark .rate-msg.err,
html.ds-dark .avatar-remove-btn { color: var(--ds-d-danger); }
html.ds-dark .brief-autodelete { color: oklch(80% 0.11 75); }

/* ── Inline style attributes ───────────────────────────────────────────────
   A dozen or so elements carry their colour in a `style=""` attribute rather
   than a rule — a handful of one-off notes and hints in the markup, plus the
   active-page link js/pages/inbox.js marks up on the inbox. An inline style
   outranks every stylesheet, so `!important` is the only lever, and matching on
   the attribute's TEXT is what lets one rule cover every element that carries
   the same value instead of naming each one. Each pattern below is the exact
   string as written in the markup — if one of those declarations is ever
   reformatted (a space after the colon, a different hex), this stops matching
   it, which is the tradeoff for not having to enumerate the elements. */
html.ds-dark [style*="color:#6b6b6b"],
html.ds-dark [style*="color:#555"],
html.ds-dark [style*="color:#8a8a9e"] { color: var(--ds-d-muted) !important; }
html.ds-dark [style*="color:#111"] { color: var(--ds-d-fg) !important; }
html.ds-dark [style*="color:#2563eb"],
html.ds-dark [style*="color:#3b3d8f"],
html.ds-dark [style*="color: rgb(84, 86, 226)"] { color: var(--ds-d-accent) !important; }
html.ds-dark [style*="background:#fafafa"] {
  background: var(--ds-d-sunken) !important;
  border-color: var(--ds-d-border) !important;
}

/* become-partner.html paints the brand purple straight onto html + body. */
html.ds-dark,
html.ds-dark body { background-color: var(--ds-d-bg); }

/* ══════════════════════════════════════════════════════════════════════════
   Layered !important overrides
   ──────────────────────────────────────────────────────────────────────────
   For important declarations the cascade layer order is REVERSED and unlayered
   loses to every layer, so an unlayered `!important` cannot beat one declared
   inside @layer nav / @layer dashboards. `reset` is the first layer declared in
   system.css, which makes it the winner for important declarations — the only
   reason these three rules live in a layer at all.
   ══════════════════════════════════════════════════════════════════════════ */
@layer reset {
  /* nav.css: the bar's Login / Register CTA, near-black ink in daylight. */
  html.ds-dark .nav-links a.btn.btn-primary:visited,
  html.ds-dark .nav-links .btn.btn-primary,
  html.ds-dark .nav-links .btn.btn-outline,
  html.ds-dark .nav-dash-row .btn.btn-primary {
    background: oklch(57% 0.16 277) !important;
    color: #fff !important;
    border-color: oklch(57% 0.16 277) !important;
  }
  html.ds-dark .nav-links a.btn.btn-primary:visited:hover,
  html.ds-dark .nav-links .btn.btn-primary:hover,
  html.ds-dark .nav-links .btn.btn-outline:hover,
  html.ds-dark .nav-links .btn.btn-primary:active,
  html.ds-dark .nav-links .btn.btn-outline:active,
  html.ds-dark .nav-dash-row .btn.btn-primary:hover {
    background: oklch(64% 0.16 277) !important;
    color: #fff !important;
    border-color: oklch(64% 0.16 277) !important;
  }

  /* dashboards.css: sign-out, which sits on the deep header band. */
  html.ds-dark .btn-signout {
    border-color: oklch(100% 0 0 / 0.2) !important;
    background: oklch(100% 0 0 / 0.05) !important;
    color: oklch(85% 0.012 285) !important;
  }
  html.ds-dark .btn-signout:hover {
    background: oklch(68% 0.18 25) !important;
    color: oklch(15% 0.02 25) !important;
    border-color: oklch(68% 0.18 25) !important;
  }
}
