/* ============================================================================
   RUDQP dark mode
   ----------------------------------------------------------------------------
   Apple-inspired: a true black canvas, elevated near-black cards, one step of
   hairline, and type that stays bright enough to read at every size. The page
   layout, spacing and structure are untouched; only colour is redefined here.

   Everything below is scoped to html[data-theme="dark"], so light mode cannot
   be affected by this file. The attribute selector also outranks the site's
   `html .selector` theme rules and page-level inline styles without needing
   !important.

   Loaded last, after core.css and any page stylesheet.
   ========================================================================== */

html[data-theme="dark"]{
  color-scheme: dark;

  /* ---- canvas and type ---- */
  --cream:#000000;        /* page background */
  --paper:#1C1C1E;        /* cards, panels, raised surfaces */
  --ink:#F5F5F7;          /* primary text */
  --muted:#A1A1A6;        /* secondary text, 8.9:1 on black, 7.1:1 on cards */
  --ink-rgb:245,245,247;

  /* ---- lines ---- */
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.26);

  /* ---- accent: inverted, so a filled button is light on dark ---- */
  --accent:#F5F5F7;
  --accent-soft:#FFFFFF;
  --on-accent:#0A0A0A;
  --accent-rgb:245,245,247;

  /* ---- the six pastel tints become elevation steps ---- */
  --blush:#1C1C1E; --peach:#1C1C1E; --butter:#1C1C1E;
  --sage:#1C1C1E;  --sky:#1C1C1E;   --lavender:#1C1C1E;
  --g-bg:#111113;

  /* ---- sections that were already dark stay distinguishable ---- */
  --k-bg:#141416; --k-paper:#232325; --k-ink:#F5F5F7; --k-muted:#A1A1A6;

  /* ---- chrome ---- */
  --nav-bg:rgba(0,0,0,.72);
  --nav-pill:rgba(28,28,30,.86);
  --foot-bg:#0A0A0A;
  --foot-hi:#F5F5F7;
}


/* ==========================================================================
   GENERATED LAYER (scripts/gen-dark.py, from the site's own stylesheets)
   ========================================================================== */
html[data-theme="dark"]{--blush:#1C1C1E;--peach:#1C1C1E;--butter:#1C1C1E;--sage:#1C1C1E;--sky:#1C1C1E;--lavender:#1C1C1E;--cream:#000000;--paper:#1C1C1E;--ink:#F5F5F7;--muted:#A1A1A6;--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.26);--accent:#F5F5F7;--accent-soft:#FFFFFF}
html[data-theme="dark"] ::selection{color:var(--on-accent)}
html[data-theme="dark"] .pill--dark{color:var(--on-accent)}
html[data-theme="dark"] .pill--ghost:hover{color:var(--ink)}
html[data-theme="dark"] .pill--accent{color:var(--on-accent)}
html[data-theme="dark"] .switch{background:var(--k-bg)}
html[data-theme="dark"] .switch a{color:var(--ink)}
html[data-theme="dark"] .lfoot{color:var(--ink)}
html[data-theme="dark"] .lfoot__low{color:var(--muted)}
html[data-theme="dark"] .ltile__ov{color:var(--ink)}
html[data-theme="dark"] .llb{background:var(--k-bg)}
html[data-theme="dark"] .llb__img{background:var(--k-bg)}
html[data-theme="dark"] .llb__btn{color:var(--on-accent)}
html[data-theme="dark"] .lfoot__soc .lbl{color:var(--muted)}
html[data-theme="dark"] .lfoot__soc a{color:var(--ink)}
html[data-theme="dark"] .foot{color:var(--ink)}
html[data-theme="dark"] .foot__avail{color:var(--ink)}
html[data-theme="dark"] .foot__clock{color:var(--muted)}
html[data-theme="dark"] .foot__brand h3{color:var(--ink)}
html[data-theme="dark"] .foot__cta{color:var(--on-accent)}
html[data-theme="dark"] .foot .fcol h4{color:var(--muted)}
html[data-theme="dark"] .foot .fcol a{color:var(--ink)}
html[data-theme="dark"] .foot .fcol p{color:var(--muted)}
html[data-theme="dark"] .foot__low{color:var(--muted)}
html[data-theme="dark"] .art__body{color:var(--ink)}
html[data-theme="dark"] .wcap .wk{color:var(--ink)}
html[data-theme="dark"] .wcap h3{color:var(--ink)}
html[data-theme="dark"] .wcap .wgo{color:var(--ink)}
html[data-theme="dark"] .bksteps .bkn{color:var(--ink)}
html[data-theme="dark"] .lnav__cta .pill--accent{color:var(--on-accent)}
html[data-theme="dark"] .loadmore:hover{color:var(--ink)}
html[data-theme="dark"] .foot__grid>.fcol:nth-child(3) a:hover{color:var(--ink)}
html[data-theme="dark"] .spkg__flag{color:var(--on-accent)}
html[data-theme="dark"] .sysd-dash{color:var(--ink)}
html[data-theme="dark"] .sysd-live{color:var(--muted)}
html[data-theme="dark"] .sysd-kpi .l{color:var(--muted)}
html[data-theme="dark"]{--cream:#000000;--paper:#1C1C1E;--ink:#F5F5F7;--muted:#A1A1A6;--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.26);--ink-rgb:245,245,247;--accent:#F5F5F7;--accent-soft:#FFFFFF;--on-accent:#0A0A0A;--accent-rgb:245,245,247;--blush:#1C1C1E;--peach:#1C1C1E;--butter:#1C1C1E;--sage:#1C1C1E;--sky:#1C1C1E;--lavender:#1C1C1E;--g-bg:#111113;--k-bg:#141416;--k-paper:#232325;--k-ink:#F5F5F7;--k-muted:#A1A1A6;--nav-bg:rgba(0,0,0,.72);--nav-pill:rgba(28,28,30,.86);--foot-hi:#F5F5F7}
html[data-theme="dark"] .pill--accent{color:var(--on-accent)}
html[data-theme="dark"] .lnav__cta .pill--accent{color:var(--on-accent)}
html[data-theme="dark"] .foot__cta{color:var(--on-accent)}
html[data-theme="dark"] .hbtn--mag{color:var(--on-accent)}
html[data-theme="dark"] .cbtn{color:var(--on-accent)}
html[data-theme="dark"] .cbtn *{color:var(--on-accent)}
html[data-theme="dark"] .foot{--k-bg:#141416;--k-paper:#232325;--k-ink:#F5F5F7;--k-muted:#A1A1A6;--line:rgba(255,255,255,.14)}
html[data-theme="dark"] .lfoot{--k-bg:#141416;--k-paper:#232325;--k-ink:#F5F5F7;--k-muted:#A1A1A6;--line:rgba(255,255,255,.14)}
html[data-theme="dark"] .foot .fcol a:hover{color:var(--muted)}
html[data-theme="dark"] .sysd-kpi .v em{color:var(--muted)}
html[data-theme="dark"] main>section:nth-of-type(9){--cream:#000000;--paper:#1C1C1E;--ink:#F5F5F7;--muted:#A1A1A6;--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.26);--ink-rgb:245,245,247;--blush:#1C1C1E;--peach:#1C1C1E;--butter:#1C1C1E;--sage:#1C1C1E;--sky:#1C1C1E;--lavender:#1C1C1E}
html[data-theme="dark"] .foot{--cream:#000000;--paper:#1C1C1E;--ink:#F5F5F7;--muted:#A1A1A6;--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.26);--ink-rgb:245,245,247;--blush:#1C1C1E;--peach:#1C1C1E;--butter:#1C1C1E;--sage:#1C1C1E;--sky:#1C1C1E;--lavender:#1C1C1E}
html[data-theme="dark"] .lfoot{--cream:#000000;--paper:#1C1C1E;--ink:#F5F5F7;--muted:#A1A1A6;--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.26);--ink-rgb:245,245,247;--blush:#1C1C1E;--peach:#1C1C1E;--butter:#1C1C1E;--sage:#1C1C1E;--sky:#1C1C1E;--lavender:#1C1C1E}
html[data-theme="dark"] .sysd-dash{--cream:#000000;--paper:#1C1C1E;--ink:#F5F5F7;--muted:#A1A1A6;--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.26);--ink-rgb:245,245,247;--blush:#1C1C1E;--peach:#1C1C1E;--butter:#1C1C1E;--sage:#1C1C1E;--sky:#1C1C1E;--lavender:#1C1C1E}
html[data-theme="dark"] main>section:nth-of-type(3){--cream:#000000;--paper:#1C1C1E}
html[data-theme="dark"] main>section:nth-of-type(5){--cream:#000000;--paper:#1C1C1E}
html[data-theme="dark"] main>section:nth-of-type(7){--cream:#000000;--paper:#1C1C1E}
html[data-theme="dark"] main>section:nth-of-type(10){--cream:#000000;--paper:#1C1C1E}
html[data-theme="dark"] .main>section.panel{--cream:#000000;--paper:#1C1C1E;--ink:#F5F5F7;--muted:#A1A1A6;--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.26);--ink-rgb:245,245,247}
html[data-theme="dark"] .dearn__hero{color:var(--ink)}
html[data-theme="dark"] .sitem.on{color:var(--ink)}
html[data-theme="dark"] .snav .sitem.on:hover{color:var(--ink)}
html[data-theme="dark"] .bktab.on{color:var(--ink)}
html[data-theme="dark"] .bkbtn.sync{color:var(--ink)}
html[data-theme="dark"] .bfx-del.armed{color:var(--ink)}
html[data-theme="dark"] .lnav__cta .pill--accent:hover{color:var(--on-accent)}
html[data-theme="dark"] .cp__btn.pill--dark{color:var(--on-accent)}
html[data-theme="dark"] .cp__btn.pill--dark:hover{color:var(--on-accent)}
html[data-theme="dark"] .cbtn:hover{color:var(--on-accent)}
html[data-theme="dark"] .eyebrow{color:var(--ink)}
html[data-theme="dark"] .cp__eyebrow{color:var(--ink)}
html[data-theme="dark"] .lead{color:var(--ink)}
html[data-theme="dark"] .cp__sub{color:var(--ink)}
html[data-theme="dark"] .wstars{color:var(--muted)}
html[data-theme="dark"] .wcard__mk{color:var(--ink)}
html[data-theme="dark"] .cp__err{color:var(--muted)}
html[data-theme="dark"] .foot{background:var(--paper)}
html[data-theme="dark"] .lfoot{background:var(--paper)}
html[data-theme="dark"] .ddp{background:var(--paper)}
html[data-theme="dark"] .ddp__list a{color:var(--ink)}
html[data-theme="dark"] .ddp__list a img{background:var(--paper)}
html[data-theme="dark"] .ddp__list a span{color:var(--ink)}
html[data-theme="dark"] .ddp__list a:hover{background:var(--paper)}
html[data-theme="dark"] .ddp__list a:focus-visible{background:var(--paper)}
html[data-theme="dark"] .ddp__list a.pv{background:var(--paper)}
html[data-theme="dark"] .ddp__list .ddp__all{color:var(--ink)}
html[data-theme="dark"] .ddp__pv{background:var(--paper)}
html[data-theme="dark"] .ddp__pvl{color:var(--ink)}
html[data-theme="dark"] .lmenu__row{color:var(--ink)}
html[data-theme="dark"] .lmenu__row span{color:var(--ink)}
html[data-theme="dark"] .lmenu__row i{color:var(--ink)}
html[data-theme="dark"] .lmenu__sub a{color:var(--ink)}
html[data-theme="dark"] .lmenu__tiles a{background:var(--paper)}
html[data-theme="dark"] .lmenu__tiles b{color:var(--ink)}
html[data-theme="dark"] .lmenu__tiles .lmenu__all{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .lmenu__small a{color:var(--ink)}
html[data-theme="dark"] .lnav__toggle[aria-expanded="true"]{background:var(--k-bg);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .foot .fcol a{color:var(--ink)}
html[data-theme="dark"] .foot .fcol h4{color:var(--ink)}
html[data-theme="dark"] .foot__cta{background:var(--k-bg);color:var(--on-accent)}
html[data-theme="dark"] .ah-close{background:var(--paper)}
html[data-theme="dark"] .cpmode{background:var(--paper)}
html[data-theme="dark"] .cpmode__b{color:var(--ink)}
html[data-theme="dark"] .cpmode__b.on{color:var(--ink)}
html[data-theme="dark"] .cpmode__ind{background:var(--paper)}
html[data-theme="dark"] .askf__opt{color:var(--ink)}
html[data-theme="dark"] .askf__alt a{color:var(--ink)}
html[data-theme="dark"] .ah-close__lead{color:var(--ink)}
html[data-theme="dark"] .ah-close__lead a{color:var(--ink)}
html[data-theme="dark"] .sysd-chips span{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .sysd-chips span:first-child{color:var(--ink)}
html[data-theme="dark"] .ah__ct .pill--fill:hover{color:var(--ink)}
html[data-theme="dark"] .pk{background:var(--paper)}
html[data-theme="dark"] .pk__tag{color:var(--ink)}
html[data-theme="dark"] .pk__for{color:var(--ink)}
html[data-theme="dark"] .pk__price small{color:var(--ink)}
html[data-theme="dark"] .pk__per{color:var(--ink)}
html[data-theme="dark"] .pk ul{color:var(--ink)}
html[data-theme="dark"] .pk--hot .pk__cta .pill{color:var(--on-accent)}
html[data-theme="dark"] .pk--custom{background:var(--paper)}
html[data-theme="dark"] .pk__tag--soft{background:var(--k-bg)}
html[data-theme="dark"] .pk__price--txt{color:var(--ink)}
html[data-theme="dark"] .pk__mail{color:var(--ink)}
html[data-theme="dark"] .pk__mail:hover{color:var(--ink)}
html[data-theme="dark"] .procD__mid{background:var(--paper)}
html[data-theme="dark"] .procD__mid h2{color:var(--ink)}
html[data-theme="dark"] .procD__cnt{color:var(--ink)}
html[data-theme="dark"] .procD__no{color:var(--ink)}
html[data-theme="dark"] .procD__step h3{color:var(--ink)}
html[data-theme="dark"] .procD__chev{color:var(--ink)}
html[data-theme="dark"] .procD__body p{color:var(--ink)}
html[data-theme="dark"] .procD__step.on .procD__no{background:var(--k-bg);color:var(--ink)}
html[data-theme="dark"] .sysd-chips--btn a{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .sysd-chips--btn a:hover{border-color:var(--line)}
html[data-theme="dark"] .sysd-chips--btn a:first-child{color:var(--on-accent)}
html[data-theme="dark"] .foot__wmark{color:var(--ink)}
html[data-theme="dark"] .foot__tag{color:var(--ink)}
html[data-theme="dark"] .fgrp h3{color:var(--ink)}
html[data-theme="dark"] .fgrp h4{color:var(--ink)}
html[data-theme="dark"] .fgrp--contact h3{color:var(--ink)}
html[data-theme="dark"] .fgrp--contact h4{color:var(--ink)}
html[data-theme="dark"] .fgrp__l a{color:var(--ink)}
html[data-theme="dark"] .fgrp__l span{color:var(--ink)}
html[data-theme="dark"] .fgrp__l a:hover{color:var(--muted)}
html[data-theme="dark"] .foot--v2 .foot__low{color:var(--ink)}
html[data-theme="dark"] .foot--v2 .foot__legal a{color:var(--ink)}
html[data-theme="dark"] .dsub{color:var(--ink)}
html[data-theme="dark"] .ah__card{background:var(--paper)}
html[data-theme="dark"] .cp__steps li.on{color:var(--ink)}
html[data-theme="dark"] .cp__steps li.on::before{color:var(--on-accent)}
html[data-theme="dark"] .cp__in:focus{background:var(--paper)}
html[data-theme="dark"] .avcal__nav{background:var(--paper)}
html[data-theme="dark"] .avd{background:var(--paper)}
html[data-theme="dark"] .avd.open{border-color:var(--line);background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .avd.open:hover{background:var(--paper)}
html[data-theme="dark"] .avd.taken{background:var(--paper);color:var(--muted)}
html[data-theme="dark"] .avd.past{color:var(--ink)}
html[data-theme="dark"] .avd.sel{color:var(--on-accent)}
html[data-theme="dark"] .k--open{background:var(--paper)}
html[data-theme="dark"] .k--taken{background:var(--paper)}
html[data-theme="dark"] .cp__cat-tag{color:var(--on-accent)}
html[data-theme="dark"] .cp__step:hover{background:var(--paper)}
html[data-theme="dark"] .cp__addon:has(input:checked){background:var(--paper)}
html[data-theme="dark"] .cp__addon .ck{background:var(--paper)}
html[data-theme="dark"] .cp__total{color:var(--ink)}
html[data-theme="dark"] .cp__total .tv{color:var(--ink)}
html[data-theme="dark"] .cp__modebtn.on{color:var(--ink)}
html[data-theme="dark"] .cp__scard .pill-pop{color:var(--on-accent)}
html[data-theme="dark"] .gcap .k{color:var(--ink)}
html[data-theme="dark"] .gcap h3{color:var(--ink)}
html[data-theme="dark"] .gcap .go{color:var(--ink)}
html[data-theme="dark"] .g4 .gtile{background:var(--paper)}
html[data-theme="dark"] .g6 .gnum{color:var(--ink)}
html[data-theme="dark"] .cchip.on{color:var(--ink)}
html[data-theme="dark"]{--line:rgba(255,255,255,.14);--accent:#F5F5F7;--muted:#A1A1A6}
html[data-theme="dark"] .btn-primary{color:var(--on-accent)}
html[data-theme="dark"] .btn-ghost:hover{color:var(--on-accent)}
html[data-theme="dark"] .btn-light{color:var(--ink)}
html[data-theme="dark"] .btn-light:hover{background:var(--paper)}
html[data-theme="dark"] .nav-dropdown{background:var(--k-bg)}
html[data-theme="dark"] .mobile-menu{background:var(--k-bg)}
html[data-theme="dark"] .hero-figure .float-badge{background:var(--k-bg)}
html[data-theme="dark"] .filter button.is-active{color:var(--on-accent)}
html[data-theme="dark"] .tile__ov:empty::after{color:var(--ink)}
html[data-theme="dark"] .notfound{color:var(--on-accent)}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--k-bg)}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--k-bg)}
html[data-theme="dark"] .tier__badge{color:var(--on-accent)}
html[data-theme="dark"] .showreel{background:var(--k-bg)}
html[data-theme="dark"] .fullbleed__inner h2{color:var(--ink)}
html[data-theme="dark"] .lb{background:var(--k-bg)}
html[data-theme="dark"] .lb__img{background:var(--k-bg)}
html[data-theme="dark"] .lb__btn{color:var(--on-accent)}
html[data-theme="dark"] .msg.ok{color:var(--muted)}
html[data-theme="dark"] .msg.bad{color:var(--muted)}
html[data-theme="dark"] .sbadge{color:var(--ink)}
html[data-theme="dark"] .sitem.on .sbadge{color:var(--ink)}
html[data-theme="dark"] .anote.warn{background:var(--paper);border-color:var(--line)}
html[data-theme="dark"] body.adm{--cream:#000000;--paper:#1C1C1E;--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.26);--muted:#A1A1A6}
html[data-theme="dark"] .side{background:var(--paper)}
html[data-theme="dark"] .sitem{color:var(--ink)}
html[data-theme="dark"] .sitem:hover{background:var(--paper)}
html[data-theme="dark"] .sitem.on{background:var(--k-bg);color:var(--ink)}
html[data-theme="dark"] .snav .sitem.on:hover{background:var(--k-bg);color:var(--ink)}
html[data-theme="dark"] .card{background:var(--paper)}
html[data-theme="dark"] .dstat{background:var(--paper)}
html[data-theme="dark"] .dearn__t{background:var(--paper)}
html[data-theme="dark"] .dcard{background:var(--paper)}
html[data-theme="dark"] .achart{background:var(--paper)}
html[data-theme="dark"] .lcard{background:var(--paper)}
html[data-theme="dark"] .bkcard{background:var(--paper)}
html[data-theme="dark"] .row{background:var(--paper)}
html[data-theme="dark"] .aempty{background:var(--paper)}
html[data-theme="dark"] .mailbox{background:var(--paper)}
html[data-theme="dark"] .bfx-card{background:var(--paper)}
html[data-theme="dark"] .dearn__hero{background:var(--k-bg);color:var(--ink)}
html[data-theme="dark"] .dstat .d.up{color:var(--muted)}
html[data-theme="dark"] .pill.sm{background:var(--k-bg);color:var(--ink)}
html[data-theme="dark"] .bkbtn.sync{background:var(--k-bg);color:var(--ink)}
html[data-theme="dark"] .bktab.on{background:var(--k-bg);color:var(--ink)}
html[data-theme="dark"] .cp__btn{background:var(--k-bg);color:var(--on-accent)}
html[data-theme="dark"] .lcard b svg{color:var(--ink)}
html[data-theme="dark"] .mtop .live{background:var(--paper)}
html[data-theme="dark"] .mailstate.good{color:var(--muted)}
html[data-theme="dark"] .snav .sitem{background:var(--paper)}
html[data-theme="dark"] .snav .sitem.on{background:var(--k-bg)}
html[data-theme="dark"] pre{background:var(--k-bg);color:var(--ink)}
html[data-theme="dark"] .keep{color:var(--ink)}
html[data-theme="dark"] .improve{color:var(--ink)}
html[data-theme="dark"] .mgz__face{background:var(--paper)}
html[data-theme="dark"] .pf{background:var(--paper)}
html[data-theme="dark"] .pf__box{color:var(--ink)}
html[data-theme="dark"] .sitem.on{color:var(--ink)}
html[data-theme="dark"] .sbadge{color:var(--on-accent)}
html[data-theme="dark"] .sitem.on .sbadge{background:var(--paper)}
html[data-theme="dark"] .mailbox{background:var(--paper)}
html[data-theme="dark"] .mailstate.good{color:var(--ink)}
html[data-theme="dark"] .mailgrid input{background:var(--paper)}
html[data-theme="dark"] .bfx-card{background:var(--paper)}
html[data-theme="dark"] .bfx-new{color:var(--on-accent)}
html[data-theme="dark"] .bfx-idea{color:var(--ink)}
html[data-theme="dark"] .bfx-del{background:var(--paper)}
html[data-theme="dark"] .bfx-del.armed{color:var(--ink)}
html[data-theme="dark"] .msg.ok{color:var(--muted)}
html[data-theme="dark"] .pxsec{background:var(--paper)}
html[data-theme="dark"] .reqcard .rmsg.ok{color:var(--muted)}
html[data-theme="dark"] .bkgal-line .bk-galurl:focus{background:var(--paper)}
html[data-theme="dark"] .bk-galmsg.ok{color:var(--muted)}
html[data-theme="dark"] .bktab.on{color:var(--ink)}
html[data-theme="dark"] .bktab.on .bkcount{color:var(--ink)}
html[data-theme="dark"] .bkbadge.s-open{background:var(--paper);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .bkbadge.s-progress{background:var(--paper);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .bkbadge.s-declined{background:var(--paper);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .bkbadge.s-delivered{background:var(--paper);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .bkbtn{color:var(--ink)}
html[data-theme="dark"] .bkform input:focus{background:var(--paper)}
html[data-theme="dark"] .bkform textarea:focus{background:var(--paper)}
html[data-theme="dark"] .dstat .d.up{color:var(--muted)}
html[data-theme="dark"] .dearn__hero{color:var(--ink)}
html[data-theme="dark"] .lg--pending{background:var(--paper)}
html[data-theme="dark"] .calev{color:var(--on-accent)}
html[data-theme="dark"] .calev.pending{background:var(--paper)}
html[data-theme="dark"] .calfree{color:var(--muted)}
html[data-theme="dark"] .calday.off{border-color:var(--line)}
html[data-theme="dark"] .calday.off .dnum{color:var(--muted)}
html[data-theme="dark"] .caloff{color:var(--muted)}
html[data-theme="dark"] .caldot.pending{background:var(--paper)}
html[data-theme="dark"] .snav .sitem.on{color:var(--ink)}
html[data-theme="dark"] .snav .sitem.on:hover{color:var(--ink)}
html[data-theme="dark"] .pgbar select{background:var(--paper)}
html[data-theme="dark"] .pgbar input{background:var(--paper)}
html[data-theme="dark"] .pgcount{color:var(--muted)}
html[data-theme="dark"] .pgsec{color:var(--muted)}
html[data-theme="dark"] .pgthumb{background:var(--paper)}
html[data-theme="dark"] .pgrow .pgk{color:var(--muted)}
html[data-theme="dark"] .pgrow textarea{background:var(--paper)}
html[data-theme="dark"] .pgrow .pgsrc{background:var(--paper)}
html[data-theme="dark"] .pgrow .pgorig{color:var(--muted)}
html[data-theme="dark"] .pgact button{background:var(--paper)}
html[data-theme="dark"] .pgact button:hover{background:var(--k-bg);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .ctstat.good .n{color:var(--muted)}
html[data-theme="dark"] .ctstat.warn .n{color:var(--muted)}
html[data-theme="dark"] .ctbar input[type=search]{background:var(--paper)}
html[data-theme="dark"] .ctfil button.on{color:var(--ink)}
html[data-theme="dark"] .ctbtn.danger:hover{border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .ctbulk{background:var(--paper)}
html[data-theme="dark"] .ctpill.ok{background:var(--paper);color:var(--muted)}
html[data-theme="dark"] .ctpill.expiring{background:var(--paper);color:var(--muted)}
html[data-theme="dark"] .ctpill.expired{background:var(--paper)}
html[data-theme="dark"] .ctpill.unsubscribed{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .ctbtn{background:var(--paper)}
html[data-theme="dark"] .pgtrend.up{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .pgtrend.down{background:var(--paper);color:var(--muted)}
html[data-theme="dark"] .pgtrend.flat{background:var(--paper)}
html[data-theme="dark"] .ov__month{background:var(--paper)}
html[data-theme="dark"] .kpi{color:var(--ink)}
html[data-theme="dark"] .ovc{background:var(--paper)}
html[data-theme="dark"] .ovc__delta{color:var(--ink)}
html[data-theme="dark"] .ovc__delta.down{color:var(--ink)}
html[data-theme="dark"] .st--open{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .st--go{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .st--done{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .st--no{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .ovp img{background:var(--paper)}
html[data-theme="dark"] .ovp .stg{color:var(--ink)}
html[data-theme="dark"] .ovp .bar{background:var(--g-bg)}
html[data-theme="dark"] .ovnext .dt{background:var(--k-bg);color:var(--ink)}
html[data-theme="dark"] .ovnext .pay b{color:var(--ink)}
html[data-theme="dark"] .ovnext .go{color:var(--ink)}
html[data-theme="dark"] .qa{color:var(--ink)}
html[data-theme="dark"] .ovtodo li i{color:var(--ink)}
html[data-theme="dark"] .ovtodo li button{color:var(--ink)}
html[data-theme="dark"] .ovstat .bar{background:var(--g-bg)}
html[data-theme="dark"] .ovcta__ic{background:var(--paper);color:var(--muted)}
html[data-theme="dark"] .ovcta__btn{color:var(--on-accent)}
html[data-theme="dark"] .ovcta__btn:hover{background:var(--k-paper)}
html[data-theme="dark"] .crm-add{background:var(--paper)}
html[data-theme="dark"] .crm-tpl{background:var(--paper)}
html[data-theme="dark"] .crm-msg.ok{color:var(--ink)}
html[data-theme="dark"] .crm-msg.err{color:var(--ink)}
html[data-theme="dark"] .crm-meta .due{color:var(--ink)}
html[data-theme="dark"] .crm-stage{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .crm-stage.lead{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .crm-stage.contacted{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .crm-stage.replied{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .crm-stage.in-progress{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .crm-stage.booked{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .crm-stage.done{background:var(--g-bg);color:var(--ink)}
html[data-theme="dark"] .crm-stage.lost{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .crm-acts select{background:var(--paper)}
html[data-theme="dark"] .crm-acts input[type=date]{background:var(--paper)}
html[data-theme="dark"] .enq-status{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .enq-status.new{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .enq-status.in-progress{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .enq-status.won{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .enq-status.done{background:var(--g-bg);color:var(--ink)}
html[data-theme="dark"] .enq-status.lost{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .enq-trash-count{color:var(--ink)}
html[data-theme="dark"] .enq-card .enq-contact.on{border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .feat__media .badge{background:var(--paper)}
html[data-theme="dark"] .feat__go .arr{color:var(--ink)}
html[data-theme="dark"] .prow:hover .prow__go{color:var(--ink)}
html[data-theme="dark"] .brc{background:var(--paper)}
html[data-theme="dark"] .brc__b p{color:var(--ink)}
html[data-theme="dark"] .brc__go{color:var(--ink)}
html[data-theme="dark"] .brx{background:var(--paper)}
html[data-theme="dark"] .brx span{color:var(--ink)}
html[data-theme="dark"] .brsteps>div{background:var(--paper)}
html[data-theme="dark"] .brsteps .k{color:var(--ink)}
html[data-theme="dark"] .brsteps p{color:var(--ink)}
html[data-theme="dark"] .collab__para{color:var(--ink)}
html[data-theme="dark"] .reel{background:var(--k-bg)}
html[data-theme="dark"] .reel__ig{color:var(--ink)}
html[data-theme="dark"] .reel__play{background:var(--paper)}
html[data-theme="dark"] .reel__cta{color:var(--on-accent)}
html[data-theme="dark"] .fg-card{background:var(--g-bg)}
html[data-theme="dark"] .fg-kit li{color:var(--ink)}
html[data-theme="dark"] .fg-gal .ph2{background:var(--g-bg)}
html[data-theme="dark"] .fglb__x{background:var(--paper)}
html[data-theme="dark"] .fglb__n{color:var(--ink)}
html[data-theme="dark"] .igt{background:var(--g-bg)}
html[data-theme="dark"] .cw-pitch p{color:var(--ink)}
html[data-theme="dark"] .ck-dm input{background:var(--paper)}
html[data-theme="dark"] .ck-dm select{background:var(--paper)}
html[data-theme="dark"] .ck-dm textarea{background:var(--paper)}
html[data-theme="dark"] .rmodal__box{background:var(--paper)}
html[data-theme="dark"] .rmodal__x{background:var(--k-bg);color:var(--ink)}
html[data-theme="dark"] .f1__fr b{color:var(--ink)}
html[data-theme="dark"] .f3{background:var(--k-bg)}
html[data-theme="dark"] .f3__c span{color:var(--ink)}
html[data-theme="dark"] .f3__ft{color:var(--muted)}
html[data-theme="dark"] .f7__ov{color:var(--ink)}
html[data-theme="dark"] .f8{background:var(--k-bg)}
html[data-theme="dark"] .f8__type{color:var(--ink)}
html[data-theme="dark"] .pola{background:var(--paper)}
html[data-theme="dark"] .flink .a{color:var(--on-accent)}
html[data-theme="dark"] .close__in{color:var(--ink)}
html[data-theme="dark"] .close h2{color:var(--ink)}
html[data-theme="dark"] .cbtn{color:var(--on-accent)}
html[data-theme="dark"] .cghost{color:var(--ink)}
html[data-theme="dark"] .cghost:hover{background:var(--paper)}
html[data-theme="dark"] .wgtile{color:var(--ink)}
html[data-theme="dark"] .hbtn--mag{color:var(--on-accent)}
html[data-theme="dark"] .igsec .screen{--paper:#1C1C1E;--ink:#F5F5F7;--muted:#A1A1A6;--line:rgba(255,255,255,.14)}
html[data-theme="dark"] .igsec .island{background:var(--k-bg)}
html[data-theme="dark"] .igsec .island::after{background:var(--k-bg)}
html[data-theme="dark"] .igsec .ig-bio i{color:var(--muted)}
html[data-theme="dark"] .igsec .ig-btns a{color:var(--ink)}
html[data-theme="dark"] .chip.on{color:var(--ink)}
html[data-theme="dark"] .chip.on:hover{color:var(--ink)}
html[data-theme="dark"] .chip.on:focus-visible{color:var(--ink)}
html[data-theme="dark"] .bqsteps li.on i{color:var(--ink)}
html[data-theme="dark"] .bqsteps li.done i{color:var(--ink)}
html[data-theme="dark"] .bqcard.on::after{color:var(--on-accent)}
html[data-theme="dark"] .bqbtn:hover{background:var(--paper)}
html[data-theme="dark"] .bqsum{color:var(--ink)}
html[data-theme="dark"] .bqsum h3{color:var(--ink)}
html[data-theme="dark"] .bqlines li{color:var(--ink)}
html[data-theme="dark"] .bqtot .val{color:var(--ink)}
html[data-theme="dark"] .bqsum .pill--accent{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .bqsum .pill--accent:hover{color:var(--on-accent)}
html[data-theme="dark"] .mag-film{background:var(--k-bg)}
html[data-theme="dark"] .mag-film video{background:var(--k-bg)}
html[data-theme="dark"] .mag-loop{background:var(--k-bg)}
html[data-theme="dark"] .mag-loop video{background:var(--k-bg)}
html[data-theme="dark"]{--cream:#000000;--paper:#1C1C1E;--ink:#F5F5F7;--muted:#A1A1A6;--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.26);--accent:#F5F5F7;--accent-soft:#FFFFFF;--blush:#1C1C1E;--sky:#1C1C1E;--sage:#1C1C1E;--peach:#1C1C1E}
html[data-theme="dark"] .tab[aria-selected="true"]{color:var(--ink)}
html[data-theme="dark"] .b-dash{color:var(--ink)}
html[data-theme="dark"] .b-live{color:var(--muted)}
html[data-theme="dark"] .b-kpi .l{color:var(--muted)}
html[data-theme="dark"] .d-band{color:var(--ink)}
html[data-theme="dark"] .d-band .display{color:var(--ink)}
html[data-theme="dark"] .d-hd p{color:var(--muted)}
html[data-theme="dark"] .d-grid b{color:var(--ink)}
html[data-theme="dark"] .d-grid span{color:var(--muted)}
html[data-theme="dark"] .d-band .pill--ghost{color:var(--ink)}
html[data-theme="dark"] .d-band .pill--ghost:hover{background:var(--paper);border-color:var(--line)}


/* ==========================================================================
   HAND-TUNED LAYER (wins over the generated rules above)
   ========================================================================== */
/* Base surfaces. The site paints body and html from tokens already, but these
 * two are stated outright so there is never a white flash behind a short page. */
html[data-theme="dark"],
html[data-theme="dark"] body{background:var(--cream);color:var(--ink)}
html[data-theme="dark"] ::selection{background:#F5F5F7;color:#0A0A0A}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:#0A0A0A}

/* ---- navigation and menus -------------------------------------------------- */
html[data-theme="dark"] .lnav{background:var(--nav-bg)}
html[data-theme="dark"] .lnav__in{background:var(--nav-pill)}
html[data-theme="dark"] .lnav__menu a{color:var(--ink)}
html[data-theme="dark"] .lnav__menu a:hover{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .lnav__pill{background:rgba(255,255,255,.10)}
html[data-theme="dark"] .ddp{background:var(--paper);border-color:var(--line)}
html[data-theme="dark"] .ddp__list a{color:var(--ink)}
html[data-theme="dark"] .ddp__list a:hover,
html[data-theme="dark"] .ddp__list a:focus-visible,
html[data-theme="dark"] .ddp__list a.pv{background:#2C2C2E}
html[data-theme="dark"] .ddp__list a span{color:var(--muted)}
html[data-theme="dark"] .ddp__list .ddp__all{color:var(--ink)}
html[data-theme="dark"] .ddp__pvl{color:var(--ink)}
html[data-theme="dark"] .ddp__pvl small{color:var(--muted)}
html[data-theme="dark"] .lmenu{background:var(--cream);border-color:var(--line)}
html[data-theme="dark"] .lmenu__hd{border-color:var(--line)}
html[data-theme="dark"] .lmenu__row,
html[data-theme="dark"] .lmenu__sub a{color:var(--ink)}
html[data-theme="dark"] .lmenu__row span{color:var(--muted)}
html[data-theme="dark"] .lmenu__tiles .lmenu__all{background:#2C2C2E;color:var(--ink)}
html[data-theme="dark"] .lmenu__small a{color:var(--muted)}
html[data-theme="dark"] .lnav__toggle{color:var(--ink);border-color:var(--line-2)}

/* ---- footer ---------------------------------------------------------------- */
html[data-theme="dark"] .foot,
html[data-theme="dark"] .lfoot{background:var(--foot-bg)}
html[data-theme="dark"] .foot__wmark,
html[data-theme="dark"] .foot .fcol a,
html[data-theme="dark"] .fgrp__l a,
html[data-theme="dark"] .fgrp__l span,
html[data-theme="dark"] .fgrp h3,
html[data-theme="dark"] .fgrp h4,
html[data-theme="dark"] .fgrp--contact h3,
html[data-theme="dark"] .fgrp--contact h4{color:var(--ink)}
html[data-theme="dark"] .foot .fcol h4,
html[data-theme="dark"] .foot .fcol p,
html[data-theme="dark"] .foot__low,
html[data-theme="dark"] .foot__clock,
html[data-theme="dark"] .lfoot__low,
html[data-theme="dark"] .lfoot__soc .lbl{color:var(--muted)}
html[data-theme="dark"] .foot__clock b{color:var(--ink)}
/* The pill background behind each Follow link is a phone-only treatment
 * (see the max-width:720px block in core.css/home.css), so keep the dark
 * swap in that same breakpoint instead of applying it at every width. */
@media(max-width:720px){
  html[data-theme="dark"] .fgrp__l--soc a{background:#2C2C2E}
}

/* ---- cards, sections and panels ------------------------------------------- */
html[data-theme="dark"] .ah-close,
html[data-theme="dark"] .procD__mid,
html[data-theme="dark"] .pk,
html[data-theme="dark"] .sysd-chips span,
html[data-theme="dark"] .sysd-chips--btn a,
html[data-theme="dark"] .g4 .gtile{background:var(--paper)}
html[data-theme="dark"] .pk--custom{background:#111113}
html[data-theme="dark"] .pk ul,
html[data-theme="dark"] .pk__price--txt,
html[data-theme="dark"] .pk__mail:hover,
html[data-theme="dark"] .procD__mid h2,
html[data-theme="dark"] .procD__no,
html[data-theme="dark"] .procD__step h3,
html[data-theme="dark"] .sysd-chips span,
html[data-theme="dark"] .sysd-chips--btn a,
html[data-theme="dark"] .ah-close__lead a,
html[data-theme="dark"] .askf__alt a{color:var(--ink)}

/* ---- the booking flow and forms ------------------------------------------- */
html[data-theme="dark"] .cp__card,
html[data-theme="dark"] .cp__in,
html[data-theme="dark"] .avcal__nav,
html[data-theme="dark"] .avd,
html[data-theme="dark"] .cp__step:hover,
html[data-theme="dark"] .cp__addon:has(input:checked),
html[data-theme="dark"] .cp__addon .ck{background:var(--paper)}
html[data-theme="dark"] .cp__in{color:var(--ink);border-color:var(--line-2)}
html[data-theme="dark"] .cp__in:focus{background:#2C2C2E;border-color:var(--ink)}
html[data-theme="dark"] .cp__in::placeholder{color:#8A8A8F}
html[data-theme="dark"] .cpmode{background:#111113}
html[data-theme="dark"] .cpmode__ind{background:#2C2C2E}
html[data-theme="dark"] .cpmode__b{color:var(--muted)}
html[data-theme="dark"] .cpmode__b.on{color:var(--ink)}
html[data-theme="dark"] .cp__muted,
html[data-theme="dark"] .cp__lbl{color:var(--muted)}
html[data-theme="dark"] .avd.past{color:#5A5A5F}
html[data-theme="dark"] .avd.taken{color:#6E6E73}
/* select and date inputs draw their own widgets: hand them the dark scheme */
html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea{color-scheme:dark}

/* ---- pills and buttons ---------------------------------------------------- */
html[data-theme="dark"] .pill--dark{background:var(--ink);color:#0A0A0A;border-color:var(--ink)}
html[data-theme="dark"] .pill--dark:hover{background:#FFFFFF}
html[data-theme="dark"] .pill--ghost{color:var(--ink);border-color:var(--line-2)}
html[data-theme="dark"] .pill--ghost:hover{background:var(--ink);color:#0A0A0A}

/* ---- images and media ----------------------------------------------------- */
/* Photographs are the product, so they are never dimmed. Only flat UI
 * illustrations that assume a white page get a gentle knock-down. */

/* Brand partner marks (Hugo Boss, Coolberg, Fotorgear and so on) are dark
 * logos drawn for a white page. On this black theme grayscale alone still
 * leaves them near-black on near-black, so invert after the grayscale to
 * turn them light on this background, same trick the graphite palette
 * already uses via the --logo-fix hook read by .brands-track img. */
html[data-theme="dark"] .brands-track img,
html[data-theme="dark"] .brands-row img{filter:grayscale(1) invert(1) brightness(1.15)}
html[data-theme="dark"] .brands-track img:hover,
html[data-theme="dark"] .brands-row img:hover{filter:invert(1);opacity:1}

/* ---- keep already-dark sections from merging into the page ---------------- */
html[data-theme="dark"] .igsec,
html[data-theme="dark"] .sec--dark,
html[data-theme="dark"] .close{background:var(--k-bg)}
html[data-theme="dark"] .igsec .lead,
html[data-theme="dark"] .igsec .eyebrow,
html[data-theme="dark"] .close .lead{color:var(--k-muted)}

/* ---- the theme toggle itself --------------------------------------------- */
html[data-theme="dark"] .thtog{color:var(--ink);border-color:var(--line-2)}

/* ---- panels that are inverted in light mode ------------------------------
 * .sysd-dash, .bqsum and the footer paint themselves with var(--ink) and put
 * pale text on top. Flipping the token would make them pale panels with pale
 * text, so in dark mode they become raised near-black cards instead, which is
 * also how Apple treats a panel on a black page. */
html[data-theme="dark"] .sysd-dash,
html[data-theme="dark"] .bqsum{background:var(--k-paper);color:var(--ink)}
html[data-theme="dark"] .sysd-dash b,
html[data-theme="dark"] .sysd-dash .v,
html[data-theme="dark"] .bqsum h3,
html[data-theme="dark"] .bqsum .val{color:var(--ink)}
html[data-theme="dark"] .bqsum .sub,
html[data-theme="dark"] .bqsum .lbl,
html[data-theme="dark"] .bqsum .fine,
html[data-theme="dark"] .bqsum .bqempty,
html[data-theme="dark"] .sysd-kpi .l{color:var(--muted)}
html[data-theme="dark"] .bqsum .pill--accent{background:var(--ink);color:var(--on-accent)}

/* Controls filled with the rainbow gradient keep their white type: the
 * gradient does not change between themes. */
html[data-theme="dark"] .pk__tag,
html[data-theme="dark"] .sysd-chips span:first-child,
html[data-theme="dark"] .sysd-chips--btn a:first-child{color:#FFFFFF}

/* ---- the sticky notes on About -------------------------------------------
 * The pastel notes are part of the page's character, so they keep their
 * colour and take near-black type instead, which reads at 12:1. */
html[data-theme="dark"] .pf__st li,
html[data-theme="dark"] .pf__st li b,
html[data-theme="dark"] .pf__st li span{color:#1D1D1F}

/* A link colour bright enough to clear 4.5:1 on a near-black card. */
html[data-theme="dark"] a[href^="http"] i,
html[data-theme="dark"] .lnk{color:#6FA8FF}

/* A selected chip or step is filled with the ink colour, so its label needs
 * the on-accent colour once ink becomes the light token. */
html[data-theme="dark"] .chip.on,
html[data-theme="dark"] .chip.on:hover,
html[data-theme="dark"] .chip.on:focus-visible,
html[data-theme="dark"] .cp__steps li.on{background:var(--ink);color:var(--on-accent);border-color:transparent}

/* ---- admin panel ---------------------------------------------------------
 * A selected segmented button is filled with the ink colour, so its label
 * takes the on-accent colour once ink becomes the light token. */
html[data-theme="dark"] .adm .ctfil button.on,
html[data-theme="dark"] .adm .seg button.on,
html[data-theme="dark"] body.adm button.on{background:var(--ink);border-color:var(--ink);color:var(--on-accent)}
html[data-theme="dark"] .adm .sitem.on,
html[data-theme="dark"] html .snav .sitem.on:hover{background:var(--ink);color:var(--on-accent)}

/* The outreach button is filled with violet in both themes, so its label
 * stays white rather than following the on-accent token. */
html[data-theme="dark"] .ovcta__btn{color:#FFFFFF}

/* ---- light-filled controls in dark mode ----------------------------------
 * In dark mode --ink and --accent both become near-white, so anything that
 * paints itself with one of those tokens turns into a white pill. A few of
 * these were still handing their label var(--ink) or a hard-coded #fff, which
 * is white type on a white fill and therefore invisible. Every filled control
 * below now takes var(--on-accent) for its label, the same near-black the
 * primary pill already uses. */

/* The estimated-total bar on the booking form. */
html[data-theme="dark"] .cp__total,
html[data-theme="dark"] .cp__total .tl,
html[data-theme="dark"] .cp__total .tv{color:var(--on-accent)}

/* The Photography / Social media / Monthly pass segmented control. */
html[data-theme="dark"] .cp__modebtn.on{background:var(--ink);color:var(--on-accent)}

/* The chosen day in the availability calendar. The generic .avd rule repaints
 * every cell with the card colour, which also stripped the selected day's
 * fill, so the fill is restored here along with a readable label. */
html[data-theme="dark"] .avd.sel,
html[data-theme="dark"] .avd.open.sel,
html[data-theme="dark"] .avd.sel:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* The tick inside a selected add-on checkbox was drawn in white on the white
 * accent fill. */
html[data-theme="dark"] .cp__addon:has(input:checked) .ck::after{border-left-color:var(--on-accent);border-bottom-color:var(--on-accent)}

/* Selected chips on the contact form. */
html[data-theme="dark"] .cchip.on{background:var(--ink);color:var(--on-accent);border-color:var(--ink)}

/* Numbered step bullets on the booking explainer. */
html[data-theme="dark"] .bksteps .bkn,
html[data-theme="dark"] .bksteps li:last-child .bkn{color:var(--on-accent)}

/* Filled tags, flags and filter buttons elsewhere on the site. */
html[data-theme="dark"] .cp__cat-tag,
html[data-theme="dark"] .cp__scard .pill-pop,
html[data-theme="dark"] .spkg__flag,
html[data-theme="dark"] .filter button.is-active,
html[data-theme="dark"] .notfound{color:var(--on-accent)}