/* Additive theme layer: the reference's light palette remains untouched. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex: 0 0 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.theme-toggle:hover { background: var(--cream); border-color: var(--mute); }
.theme-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 50%; }
.theme-toggle svg { width: 18px; height: 18px; display: block; }

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141416;
  --cream: #1e1e22;
  --cream2: #303036;
  --grey: #81818b;
  --line: #37373e;
  --ink: #f4f1ec;
  --ink2: #d3d0cb;
  --mute: #aaa7a4;
  --red: #f08078;
  --redt: #3e2426;
  --redd: #ffaaa2;
  --ok: #82d5a0;
  --surface: #222226;
  --deep: #0c0c0e;
}

/* Navigation and the two-layer logo retain the red mark. */
html[data-theme="dark"] header.top { background: #141416d9; }
html[data-theme="dark"].mo header.top.sc { background: #141416f0; }
html[data-theme="dark"] .brand .chrome {
  filter: grayscale(1) invert(1);
  clip-path: inset(0 10% 0 0);
}
html[data-theme="dark"] .brand .redm {
  display: block;
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 90%);
  filter: brightness(1.4);
}
html[data-theme="dark"] .intro img { filter: invert(1) hue-rotate(180deg); }

/* Every fixed-white component in the reference, including generated demos. */
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .epill,
html[data-theme="dark"] .btn-g,
html[data-theme="dark"] .links,
html[data-theme="dark"] .kbtn,
html[data-theme="dark"] .burger,
html[data-theme="dark"] .msheet .sub a,
html[data-theme="dark"] .palbox,
html[data-theme="dark"] .palbox input,
html[data-theme="dark"] .card.w,
html[data-theme="dark"] .stage,
html[data-theme="dark"] .phone .scr,
html[data-theme="dark"] .lrow,
html[data-theme="dark"] .bw,
html[data-theme="dark"] .bw .bar,
html[data-theme="dark"] .wmeta .go,
html[data-theme="dark"] .chp,
html[data-theme="dark"] .wcard.dash,
html[data-theme="dark"] .calc,
html[data-theme="dark"] .yours,
html[data-theme="dark"] .dlv,
html[data-theme="dark"] .mrow,
html[data-theme="dark"] .pick button,
html[data-theme="dark"] .fsteps li.on,
html[data-theme="dark"] .fvis,
html[data-theme="dark"] .rec2,
html[data-theme="dark"] .qs .dot,
html[data-theme="dark"] .qs .bx,
html[data-theme="dark"] .pcard,
html[data-theme="dark"] .agree span,
html[data-theme="dark"] .photo,
html[data-theme="dark"] .photo .badge,
html[data-theme="dark"] .story,
html[data-theme="dark"] .form,
html[data-theme="dark"] .cks span,
html[data-theme="dark"] .okst,
html[data-theme="dark"] .info .ic,
html[data-theme="dark"] .filt button,
html[data-theme="dark"] .flag,
html[data-theme="dark"] .tour-t,
html[data-theme="dark"] .float,
html[data-theme="dark"] .marq,
html[data-theme="dark"] .pin.live .psteps li.on,
html[data-theme="dark"] .pst,
html[data-theme="dark"] .lc,
html[data-theme="dark"] .hc-m .go,
html[data-theme="dark"] .djump a,
html[data-theme="dark"] .vd,
html[data-theme="dark"] .vd-note,
html[data-theme="dark"] .lcard,
html[data-theme="dark"] .ld-card,
html[data-theme="dark"] .tb-head,
html[data-theme="dark"] .tb-chips button,
html[data-theme="dark"] .tb-form,
html[data-theme="dark"] .tb-bk,
html[data-theme="dark"] .ld-form,
html[data-theme="dark"] .drv div,
html[data-theme="dark"] .qhow { background-color: var(--surface); }

/* Light primary controls need dark labels after --ink changes. */
html[data-theme="dark"] .btn-k,
html[data-theme="dark"] .links a.on,
html[data-theme="dark"] .bub.o,
html[data-theme="dark"] .wcard:hover .go,
html[data-theme="dark"] .faq details[open] summary i,
html[data-theme="dark"] .sig .av,
html[data-theme="dark"] .pick button[aria-pressed=true],
html[data-theme="dark"] .cks input:checked+span,
html[data-theme="dark"] .nextp .go,
html[data-theme="dark"] .filt button[aria-pressed=true],
html[data-theme="dark"] .tour-t button[aria-selected=true],
html[data-theme="dark"] .own,
html[data-theme="dark"] .sms,
html[data-theme="dark"] .hcard:hover .go,
html[data-theme="dark"] .vb.me p,
html[data-theme="dark"] .tb-av,
html[data-theme="dark"] .guar .gi { background: var(--ink); color: var(--paper); }
html[data-theme="dark"] .btn-k:hover { background: #d9d5ce; color: #141416; }
html[data-theme="dark"] .btn-w,
html[data-theme="dark"] .hc-x .btn-k,
html[data-theme="dark"] .mbar a {
  background: #f4f1ec;
  color: #141416;
}
html[data-theme="dark"] .btn-g:hover,
html[data-theme="dark"] .kbtn:hover,
html[data-theme="dark"] .pick button:hover { border-color: var(--mute); }
html[data-theme="dark"] .tour-t button[aria-selected=true] span { color: #9b2827; }
html[data-theme="dark"] .vb.live p { background: #d3d0cb; color: #141416; }

/* Deliberately dark editorial panels keep their original light lettering. */
html[data-theme="dark"] .band,
html[data-theme="dark"] .pcard.feat,
html[data-theme="dark"] .hc-cta,
html[data-theme="dark"] .osms,
html[data-theme="dark"] .cmd,
html[data-theme="dark"] .mbar {
  background: var(--deep);
  color: #f4f1ec;
  border-color: var(--line);
}
html[data-theme="dark"] .skip { background: #f4f1ec; color: #141416; }
html[data-theme="dark"] .os-b { background: #26262b; }
html[data-theme="dark"] .band .fine,
html[data-theme="dark"] .hc-x .mono,
html[data-theme="dark"] .hc-cta .hc-n,
html[data-theme="dark"] .os-f { color: #aaa7a4; }
html[data-theme="dark"] .pcard.feat .mut,
html[data-theme="dark"] .pcard.feat li { color: #c5c1bc; }

/* Status colours remain distinct without pale islands or low-contrast labels. */
html[data-theme="dark"] .bub.bk,
html[data-theme="dark"] .mrow .d.g,
html[data-theme="dark"] .st.b,
html[data-theme="dark"] .fi1.g,
html[data-theme="dark"] .lc.bk .lc-st {
  background: #193a2a;
  color: var(--ok);
}
html[data-theme="dark"] .qs.won .dot,
html[data-theme="dark"] .tb-dial { background: #226d42; color: #fff; }
html[data-theme="dark"] .ph,
html[data-theme="dark"] .note,
html[data-theme="dark"] .phbanner,
html[data-theme="dark"] .guar {
  background: #342d1b;
  color: #efcf79;
  border-color: #84703b;
}
html[data-theme="dark"] .guar p { color: #d8cba9; }
html[data-theme="dark"] .tmsg.me p,
html[data-theme="dark"] .tb-form button,
html[data-theme="dark"] .pcard .tagp {
  background: #a92e2c;
  color: #fff;
}
html[data-theme="dark"] .lrow.cur { border-color: #8e514d; }
html[data-theme="dark"] .dlv div::before { border-color: #754542; }
html[data-theme="dark"] .lc.bk { border-color: #42885b; }
html[data-theme="dark"] .wcard.dash,
html[data-theme="dark"] .phbox,
html[data-theme="dark"] .photo,
html[data-theme="dark"] .story { border-color: #535159; }

/* Form focus, native controls, and browser autofill remain legible. */
html[data-theme="dark"] .fi input:focus,
html[data-theme="dark"] .fi textarea:focus,
html[data-theme="dark"] .vd-in:focus,
html[data-theme="dark"] .ld input:focus,
html[data-theme="dark"] .ld select:focus,
html[data-theme="dark"] .ld textarea:focus {
  background-color: #29292e;
  box-shadow: 0 0 0 4px #f080781c;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #939199; opacity: 1; }
html[data-theme="dark"] input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--cream) inset;
  caret-color: var(--ink);
}
html[data-theme="dark"] .ri input[type=range]::-webkit-slider-thumb { background: var(--surface); }
html[data-theme="dark"] .ri input[type=range]::-moz-range-thumb { background: var(--surface); }

/* Dot textures and decorative details retain the reference's restrained contrast. */
html[data-theme="dark"] .dots { background-image: radial-gradient(#404047 1px, transparent 1.25px); }
html[data-theme="dark"] .phero::before,
html[data-theme="dark"] .hero::before,
html[data-theme="dark"] .nf::before {
  background-image: radial-gradient(#404047 1px, transparent 1.25px);
}
html[data-theme="dark"] .bw .bar i { background: #55545c; }
html[data-theme="dark"] .tb.done .ln i { background: #65616a; }
html[data-theme="dark"] .fwm span { color: #603a39; }
html[data-theme="dark"] .pal { background: #0009; }
html[data-theme="dark"].mo .cring { border-color: #f4f1ec55; }
html[data-theme="dark"] .phone,
html[data-theme="dark"] .tb-ph { box-shadow: 0 0 0 1px #424248, 0 40px 80px -30px #0009; }

/* These exact inline declarations are part of the unchanged reference markup. */
html[data-theme="dark"] [style*="background:#fff"] { background-color: var(--surface) !important; }
html[data-theme="dark"] [style*="background:var(--ink);color:#fff"] {
  background-color: var(--deep) !important;
  color: #f4f1ec;
}

/* Space for the added control without changing the reference's mobile layout. */
@media (min-width: 1061px) and (max-width: 1180px) {
  .nav { gap: 12px; }
  .links a { padding-inline: 11px; }
  .nr { gap: 8px; }
}
@media (max-width: 640px) {
  .nav { gap: 12px; }
  .nr { gap: 8px; }
}
@media (max-width: 340px) {
  header.top .wrap { padding-inline: 14px; }
  .nav { gap: 8px; }
  .nr { gap: 6px; }
}

/* Prevent a long public-site URL from widening the case-study grid at 320px. */
.cfs > * { min-width: 0; }
.cfs .tlink { overflow-wrap: anywhere; }

body.overlay-open { overflow: hidden; }

/* Keep visually hidden chip controls inside their own clickable label. */
.cks label { position: relative; }
.cks input { width: 1px; height: 1px; padding: 0; margin: 0; inset: 0 auto auto 0; }
.audit-handoff { margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.audit-handoff label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.audit-handoff input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--red); }
.audit-handoff details { margin-top: 12px; font-size: 13px; overflow-wrap: anywhere; }
.audit-handoff summary { cursor: pointer; }
.audit-handoff p { margin-top: 8px; }