/*
 * StudyKit colour scheme: the light / dark / auto toggle and the dark palette.
 *
 * How it works
 * ------------
 * A tiny inline script in <head> resolves the visitor's choice (auto, light or
 * dark) into a concrete value and writes it to <html data-sk-scheme> before the
 * first paint, so there is no flash of the wrong theme. This file only ever
 * keys off [data-sk-scheme="dark"], which keeps the cascade simple: one
 * attribute, one set of overrides.
 *
 * Why every selector is prefixed with html[data-sk-scheme="dark"]
 * ------------------------------------------------------------------
 * The custom properties below are declared on the components themselves, not on
 * :root. For example .sk-hero declares --skh-purple in hero.css, and the home
 * and services pages declare --sk-purple inside a <style> block in the post
 * content, which is rendered after this file. A plain .sk-hero override would
 * lose on source order to the page's own <style> block. Adding the attribute
 * selector raises specificity above both, so the dark values win no matter where
 * the file is loaded. That is deliberate: it makes load order irrelevant.
 *
 * The palette keeps the brand purple and pink, lightened so they stay legible on
 * a dark surface. Every text colour here clears 4.5:1 against the surface it
 * sits on, and the headings and links clear 7:1.
 */

/* The toggle. Sits in the header beside the search box, and falls back to a
   fixed position if the header slot is ever missing.

   The z-index is not cosmetic. Ajax Search Lite opens its options panel over
   the header, and without this the button disappears behind the search input
   the moment the field is focused. 99999 sits above the panel, which sits above
   the sticky header; `isolation: isolate` keeps the button's own stacking
   context from leaking into the page. */
.sk-scheme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #e5ddec;
  border-radius: 11px;
  background: #fff;
  color: #452b61;
  cursor: pointer;
  line-height: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  position: relative;
  z-index: 99999;
  isolation: isolate;
}

.sk-scheme-toggle:hover {
  background: #f6f1fa;
  border-color: #cdb9dd;
}

.sk-scheme-toggle:focus-visible {
  outline: 3px solid rgba(165, 120, 185, 0.55);
  outline-offset: 2px;
}

.sk-scheme-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One icon per state, swapped by the attribute the script writes. The sun is
   the default because it is the state a visitor in auto mode on a light system
   is currently seeing. */
.sk-scheme-toggle .sk-icon-sun,
.sk-scheme-toggle .sk-icon-moon,
.sk-scheme-toggle .sk-icon-auto {
  display: none;
}

html[data-sk-scheme-choice="light"] .sk-icon-moon,
html[data-sk-scheme-choice="dark"] .sk-icon-sun,
html[data-sk-scheme-choice="auto"] .sk-icon-auto {
  display: block;
}

/* The label is for assistive technology only; the icons carry the meaning. */
.sk-scheme-toggle .screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* The control lives in the header menu as its last item, so on a desktop it
   sits to the right of the final link rather than floating over the search
   field. Blocksy's own list items carry a hover background and generous
   horizontal padding, neither of which suits a fixed-size icon button, so this
   opts out of both and supplies just enough space to separate it from the
   link before it. */
#header .sk-scheme-item {
  display: flex;
  align-items: center;
  padding-left: 12px;
}

#header .sk-scheme-item:hover {
  background: none;
}

/* ==========================================================================
   The side-nav button on a phone
   ==========================================================================

   This repairs a theme defect, and it is the reason a visitor on a phone could
   not see the menu button at all.

   Blocksy renders the trigger with the hamburger icon and the "Menu" label both
   carrying its `ct-hidden-sm ct-hidden-md ct-hidden-lg` utility classes, and
   main.min.css defines `.ct-hidden-sm { display: none !important }`. So on any
   viewport below the large breakpoint the icon is hidden and the label is
   hidden, which leaves a button whose entire content box is 2px: the thing
   measured 12x12 including its padding. Nothing was drawn.

   The theme clearly intends the opposite, because it ships a full set of mobile
   rules for this exact element under `@media (max-width: 999.98px)` — including
   an animated hamburger that rotates into a cross when `aria-expanded` is true.
   All of that was being applied to a hidden element.

   The fix restores the icon and then gives the button a real tap target. The
   theme's own border and animation rules take over from there, so this only
   undoes the hiding and supplies the size; it does not restyle the button.
   Scoped to the same breakpoint the theme uses, so the desktop header, which
   shows the menu inline and hides the trigger entirely, is untouched. */
@media (max-width: 999.98px) {
  #header .ct-header-trigger .ct-icon.ct-hidden-sm,
  #header .ct-header-trigger .ct-icon.ct-hidden-md,
  #header .ct-header-trigger .ct-icon.ct-hidden-lg {
    display: block !important;
  }

  /* 44px is the smallest comfortable touch target; the bare button was 12px.
     min-width and min-height rather than width and height, so a theme rule that
     legitimately needs a larger button can still grow it. */
  #header .ct-header-trigger {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #header .ct-header-trigger .ct-icon[data-type] {
    width: 18px;
    height: 14px;
  }
}

/* ==========================================================================
   Search at the top of the phone drawer
   ==========================================================================

   Injected by assets/drawer-search.js. Sized and spaced to read as part of the
   menu rather than as a widget dropped on top of it, and it takes the surface
   and border tokens the rest of the drawer's own styles use, so both colour
   schemes are handled without a second set of values here.

   The field is only ever added to the phone drawer, which the theme shows below
   its own breakpoint, so these rules are scoped to the same range. */
@media (max-width: 999.98px) {
  /* The drawer panel is the theme's own near-black in both colour schemes. It is
     tinted a very dark purple here so the drawer belongs to the same family as
     the rest of the site. The lightness is barely moved, which is the point:
     every contrast relationship the panel already has survives, and only the hue
     changes.

     The !important is deliberate. The theme sets this with
     `[data-header*="type-1"] #offcanvas .ct-panel-inner`, which is (1,2,0), and
     that value is baked into a stylesheet this site does not control and that is
     replaced wholesale on every Blocksy update. There is no selector worth
     writing that beats (1,2,0) without hardcoding a header type the site may
     not still be using, so overriding it explicitly and saying so is better than
     a rule that silently does nothing. */
  #offcanvas .ct-panel-inner {
    background-color: #1b1526 !important;
  }

  .sk-drawer-search {
    margin: 0 0 14px;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(233, 219, 236, 0.16);
  }

  .sk-drawer-search .sk-drawer-search-field {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* These two selectors are written with the parent class on purpose, and it is
     not decoration. Blocksy styles form fields with
     `input:is([type="search"], ...)` and `[type="submit"]`, and :is() takes the
     specificity of its most specific argument, so those land on (0,1,1) and
     (0,1,0). A single class here is (0,1,0), which loses on the first and ties
     on the second, and the theme's stylesheet is enqueued after this one, so a
     tie goes to the theme as well. Nesting under the parent class makes these
     (0,2,0) and they win outright, without resorting to !important on a theme
     this site does not control. */
  .sk-drawer-search .sk-drawer-search-field .sk-drawer-search-input {
    width: 100%;
    /* 44px, matching the menu button, so the field is as easy to hit as the
       control that opened the drawer. */
    min-height: 44px;
    height: 44px;
    padding: 0 46px 0 14px;
    border: 1px solid rgba(201, 166, 220, 0.42);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #f6f2fa;
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
  }

  /* These colours are not derived from the page's palette on purpose. The drawer
     panel is a near-black surface in *both* colour schemes — the theme sets its
     own background and leaves the text colour alone, which is why the menu links
     inside it are explicitly white rather than inherited. A form, though,
     inherits from the body, so in the light scheme `color: inherit` hands this
     field dark blue-grey text to sit on near-black. Sampling the rendered panel
     is the only reliable way to catch that; it reads as a plausible-looking
     field that is very hard to read. */
  .sk-drawer-search .sk-drawer-search-field .sk-drawer-search-input::placeholder {
    color: #cfc3da;
    opacity: 1;
  }

  /* The colour is repeated here as well as on the base rule, and that is the fix
     for a bug worth remembering. The theme's own selector nests a :focus variant,
     so it reaches (0,2,1) and beats a rule nested only one level deep at (0,2,0).
     It sets the text colour from --theme-text-color, which is dark. The field
     therefore read correctly when it was empty and went almost invisible the
     moment somebody typed into it, which is the only state anyone cares about.
     Setting the colour on :focus as well means it holds whichever of the two the
     cascade settles on. */
  .sk-drawer-search .sk-drawer-search-field .sk-drawer-search-input:focus,
  .sk-drawer-search .sk-drawer-search-field .sk-drawer-search-input:focus-visible {
    color: #f6f2fa;
    outline: 2px solid #c9a6dc;
    outline-offset: 1px;
    border-color: #c9a6dc;
    background: rgba(201, 166, 220, 0.16);
  }

  .sk-drawer-search .sk-drawer-search-field .sk-drawer-search-button {
    position: absolute;
    right: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    background-color: transparent;
    color: #e9e0f2;
    box-shadow: none;
    cursor: pointer;
  }

  .sk-drawer-search .sk-drawer-search-field .sk-drawer-search-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  .sk-drawer-search .sk-drawer-search-field .sk-drawer-search-button:hover,
  .sk-drawer-search .sk-drawer-search-field .sk-drawer-search-button:focus-visible {
    background: rgba(255, 255, 255, 0.16);
  }
}

/* ==========================================================================
   The "Tools" dropdown in the desktop header
   ==========================================================================

   The theme's own submenu is a flat navy rectangle with a 2px bottom radius,
   which is the shape of a stock theme and not the shape of this site: every
   panel here is a rounded card, and the accent is a deep purple rather than the
   palette's default link blue. Only the panel and its item surfaces are touched,
   so the theme keeps control of the interaction, the collapse to an accordion at
   narrow widths, and the accessibility.

   Scoped to the header's desktop menu at wide screens, because the same markup
   becomes the drawer accordion below its own breakpoint and must not inherit
   these values. */
@media (min-width: 1000px) {
  #header nav[data-id="menu"] .sub-menu {
    padding: 8px;
    border: 1px solid rgba(233, 219, 236, 0.14);
    border-radius: 16px;
    background: linear-gradient(180deg, #4a3468 0%, #382a4c 100%);
    box-shadow: 0 18px 40px rgba(38, 25, 52, 0.32);
  }

  #header nav[data-id="menu"] .sub-menu .menu-item > a {
    border-radius: 10px;
    color: #f2ecf7;
    transition: background 0.15s ease, color 0.15s ease;
  }

  #header nav[data-id="menu"] .sub-menu .menu-item > a:hover,
  #header nav[data-id="menu"] .sub-menu .menu-item > a:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }

  #header nav[data-id="menu"] > ul > li > a {
    border-radius: 10px;
    transition: background 0.15s ease;
  }

  #header nav[data-id="menu"] > ul > li > a:hover {
    background: rgba(107, 67, 139, 0.1);
  }
}

/* Standalone placement, used only if the header slot cannot be found. */
body > .sk-scheme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  box-shadow: 0 6px 18px rgba(35, 20, 50, 0.22);
}

/* ==========================================================================
   Dark palette
   ========================================================================== */

/* The theme palette. This is the important part.
   Blocksy does expose a token system, in the stylesheet it generates into
   /wp-content/uploads/blocksy/css/global.css. Its :root declares eight palette
   colours and then aliases every semantic role to them, for example
   --theme-text-color: var(--theme-palette-color-3) and
   --theme-border-color: var(--theme-palette-color-5). Because custom property
   references are resolved where they are used, not where they are declared,
   re-declaring just the eight palette colours re-themes the entire theme: header
   row, footer, borders, links, headings, widgets and buttons all follow.

   The light values being replaced, as generated by the theme:
     1 #2872fa link/accent   2 #1559ed link hover   3 #3A4F66 text
     4 #192a3d headings      5 #e1e8ed border      6 #f2f5f7 soft
     7 #FAFBFC page         8 #ffffff surface

   The attribute selector is needed because the palette is declared on :root.
   html[data-sk-scheme="dark"] is more specific than :root, so the light values
   cannot win, whatever the load order. */
html[data-sk-scheme="dark"] {
  --theme-palette-color-1: #9d7ee0;
  --theme-palette-color-2: #b89fef;
  --theme-palette-color-3: #e6e2ee;
  --theme-palette-color-4: #e3cff7;
  --theme-palette-color-5: #3d3650;
  --theme-palette-color-6: #221d2e;
  --theme-palette-color-7: #14121a;
  --theme-palette-color-8: #1b1826;

  /* The theme paints buttons as the accent colour with white text. The accent
     is now a light lavender, so the text has to flip to dark to stay legible. */
  --theme-button-text-initial-color: #1a1626;
  --theme-button-text-hover-color: #1a1626;
  --theme-selection-text-color: #1a1626;
}

/* Tell the browser to render native controls, scrollbars and form widgets dark
   too, so form fields do not stay bright white inside a dark page. */
html[data-sk-scheme="dark"] {
  color-scheme: dark;
}

/* Back to top. The theme hardcodes white on a pink block. */
html[data-sk-scheme="dark"] .ct-back-to-top {
  --theme-icon-color: #2a1030;
  --theme-icon-hover-color: #2a1030;
  --top-button-background-color: #ffa8b8;
}

/* The page background itself.
   The tool pages carry their own inline <style> with `body { background:
   var(--sk-bg) }`, where --sk-bg is a pale value declared in that page's own
   :root block. Those blocks are rendered after this file, so the theme's
   `body { background: var(--theme-palette-color-7) }` loses to them and the
   page stays light behind dark text. Re-declaring the background on the
   attribute selector outranks a bare `body`. */
html[data-sk-scheme="dark"] body {
  background: #14121a;
  color: #e6e2ee;
}

/* Headings. The theme's blog page title is pinned to pink in global.css. */
html[data-sk-scheme="dark"] h1,
html[data-sk-scheme="dark"] h2,
html[data-sk-scheme="dark"] h3,
html[data-sk-scheme="dark"] h4,
html[data-sk-scheme="dark"] h5,
html[data-sk-scheme="dark"] h6 {
  color: #e3cff7;
}

html[data-sk-scheme="dark"] [data-prefix="blog"] .entry-header .page-title {
  --theme-heading-color: #ffa8b8;
}

/* The theme's own site title and nav links are set through the palette, but the
   header row background is a bare var() with no alias worth trusting, so pin
   the surface here too. */
html[data-sk-scheme="dark"] [data-header*="type-1"] .ct-header [data-row*="middle"],
html[data-sk-scheme="dark"] [data-header*="type-1"] .ct-header [data-row*="bottom"] {
  background: #1b1826;
  border-color: #3d3650;
}

html[data-sk-scheme="dark"] .ct-footer {
  background: #1b1826;
  border-color: #3d3650;
}

html[data-sk-scheme="dark"] .ct-footer a {
  color: #d3a9ec;
}

html[data-sk-scheme="dark"] .ct-footer h3,
html[data-sk-scheme="dark"] .ct-footer h4 {
  color: #ffa8b8;
}

/* Body copy on the plain legal and contact pages, which use no custom classes. */
html[data-sk-scheme="dark"] .entry-content p,
html[data-sk-scheme="dark"] .entry-content li {
  color: #cfc7dd;
}

html[data-sk-scheme="dark"] hr,
html[data-sk-scheme="dark"] .entry-content hr {
  border-color: #3d3650;
  opacity: 1;
}

html[data-sk-scheme="dark"] code,
html[data-sk-scheme="dark"] pre {
  background: #221d2e;
  color: #e6e2ee;
}

/* Form controls, including the ones the tool pages render. */
html[data-sk-scheme="dark"] input,
html[data-sk-scheme="dark"] select,
html[data-sk-scheme="dark"] textarea {
  background: #221d2e;
  color: #e6e2ee;
  border-color: #3d3650;
}

html[data-sk-scheme="dark"] input::placeholder,
html[data-sk-scheme="dark"] textarea::placeholder {
  color: #8b83a0;
}

/* The offcanvas mobile menu is already dark in the light theme, so it only
   needs its links nudged to match the new page colour. */
html[data-sk-scheme="dark"] .ct-panel-inner a {
  color: #e6e2ee;
}

/* --------------------------------------------------------------------------
   Design tokens. Re-declared on the components that own them.
   -------------------------------------------------------------------------- */

/* Home and services page tokens, declared in each page's own <style> block. */
html[data-sk-scheme="dark"] .sk-home-page,
html[data-sk-scheme="dark"] .sk-services-page {
  --sk-ink: #e6e2ee;
  --sk-muted: #a79fba;
  --sk-purple: #cba4ec;
  --sk-purple-dark: #e3cff7;
  --sk-line: #38314a;
  --sk-soft: #221d2e;
}

/* Tool hero tokens, from hero.css. */
html[data-sk-scheme="dark"] .sk-hero {
  --skh-purple: #cba4ec;
  --skh-purple-dark: #e3cff7;
  --skh-line: #3d3650;
  --skh-muted: #b3aac6;
  background: linear-gradient(135deg, #221c2f 0%, #2b2140 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

/* Related tools tokens, from related-tools.css. */
html[data-sk-scheme="dark"] .sk-related {
  --skr-line: #38314a;
  --skr-purple: #cba4ec;
  --skr-purple-dark: #e3cff7;
  --skr-muted: #b3aac6;
}

html[data-sk-scheme="dark"] .sk-related-link {
  background: linear-gradient(135deg, #221c2f 0%, #2b2140 100%);
  border-color: #3d3650;
}

html[data-sk-scheme="dark"] .sk-related-link:hover,
html[data-sk-scheme="dark"] .sk-related-link:focus-visible {
  border-color: #7d639b;
}

/* QR tool tokens, from qr-tools.css. The three status colours are lightened
   because the originals are dark-on-light and would disappear here. */
html[data-sk-scheme="dark"] .sk-qr {
  --qr-ink: #e6e2ee;
  --qr-muted: #a79fba;
  --qr-purple: #cba4ec;
  --qr-purple-dark: #e3cff7;
  --qr-line: #3d3650;
  --qr-soft: #221d2e;
  --qr-error: #ff9b9b;
  --qr-warn: #e8b964;
  --qr-ok: #7fd6a2;
}

/* --------------------------------------------------------------------------
   Components that hardcode a light colour instead of using a token.
   -------------------------------------------------------------------------- */

/* Home hero panel, proof chips and the start card are all translucent white
   over a pale gradient, so they need a dark translucent equivalent. */
html[data-sk-scheme="dark"] .sk-home-hero,
html[data-sk-scheme="dark"] .sk-services-hero {
  background: linear-gradient(135deg, #221c2f 0%, #2b2140 100%);
  border-color: #3d3650;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

html[data-sk-scheme="dark"] .sk-home-proof span,
html[data-sk-scheme="dark"] .sk-services-proof span {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(203, 164, 236, 0.22);
  color: #cdc4de;
}

html[data-sk-scheme="dark"] .sk-home-start,
html[data-sk-scheme="dark"] .sk-services-aside {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(203, 164, 236, 0.2);
}

html[data-sk-scheme="dark"] .sk-home-lead,
html[data-sk-scheme="dark"] .sk-services-hero-copy {
  color: #cdc4de;
}

html[data-sk-scheme="dark"] .sk-home-start p,
html[data-sk-scheme="dark"] .sk-services-aside p,
html[data-sk-scheme="dark"] .sk-services-aside-list li {
  color: #b3aac6;
}

html[data-sk-scheme="dark"] .sk-home-card,
html[data-sk-scheme="dark"] .sk-services-card,
html[data-sk-scheme="dark"] .sk-flow-card {
  background: #1f1b2b;
  border-color: #38314a;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

html[data-sk-scheme="dark"] .sk-home-card:hover,
html[data-sk-scheme="dark"] .sk-services-card:hover {
  border-color: #7d639b;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.45);
}

html[data-sk-scheme="dark"] .sk-home-card p,
html[data-sk-scheme="dark"] .sk-services-card p,
html[data-sk-scheme="dark"] .sk-home-flow p,
html[data-sk-scheme="dark"] .sk-services-path p {
  color: #b3aac6;
}

html[data-sk-scheme="dark"] .sk-home-flow article {
  background: #1f1b2b;
  border-color: #38314a;
}

html[data-sk-scheme="dark"] .sk-home-note,
html[data-sk-scheme="dark"] .sk-services-note {
  background: #1f1b2b;
  border-color: #3d3650;
}

html[data-sk-scheme="dark"] .sk-home-note p,
html[data-sk-scheme="dark"] .sk-services-note p {
  color: #cdc4de;
}

html[data-sk-scheme="dark"] .sk-home-button.secondary,
html[data-sk-scheme="dark"] .sk-services-button.secondary {
  background: #2a2438;
  border-color: #4a4160;
  color: #e3cff7 !important;
}

html[data-sk-scheme="dark"] .sk-home-button.secondary:hover,
html[data-sk-scheme="dark"] .sk-services-button.secondary:hover {
  background: #342c46;
}

/* The primary buttons are the reverse case. In the light theme --sk-purple is a
   dark purple, so the hardcoded #fff text sits on it comfortably. Inverting the
   palette for dark mode makes the accent light, and white text on a light
   accent is only about 2:1, so the text has to flip to dark. This mirrors what
   --theme-button-text-initial-color does for the theme's own buttons. */
html[data-sk-scheme="dark"] .sk-home-button:not(.secondary),
html[data-sk-scheme="dark"] .sk-services-button:not(.secondary),
html[data-sk-scheme="dark"] .sk-qr-actions button,
html[data-sk-scheme="dark"] .sk-qr-control-actions button,
html[data-sk-scheme="dark"] .sk-qr-scanner-actions button,
html[data-sk-scheme="dark"] .sk-qr-reveal,
html[data-sk-scheme="dark"] .sk-qr-result-action {
  color: #2f1c40 !important;
}

/* The closing call to action is already a dark purple panel with white text, so
   it needs almost nothing. Only the button inside it inverts: white on purple
   would be a bright block in a dark page. */
html[data-sk-scheme="dark"] .sk-home-cta {
  background: #2f2145;
  border: 1px solid #453661;
}

html[data-sk-scheme="dark"] .sk-home-cta .sk-home-button {
  background: #f3ecf8;
  color: #2f1c40 !important;
}

html[data-sk-scheme="dark"] .sk-home-cta .sk-home-button:hover {
  background: #ffffff;
}

/* The directory listing, from tool-directory.css, which uses literal colours
   throughout and so has no tokens to re-declare. */
html[data-sk-scheme="dark"] .sk-services-grouphead {
  color: #e3cff7;
}

html[data-sk-scheme="dark"] .sk-services-grouphead::after {
  background: #38314a;
}

html[data-sk-scheme="dark"] .sk-services-groupcount {
  background: #241f33;
  border-color: rgba(203, 164, 236, 0.24);
  color: #cba4ec;
}

html[data-sk-scheme="dark"] .sk-group-archive-header {
  background: linear-gradient(135deg, #221c2f 0%, #2b2140 100%);
  border-color: #3d3650;
}

html[data-sk-scheme="dark"] .sk-group-archive-header h1,
html[data-sk-scheme="dark"] .sk-group-archive-name {
  color: #e3cff7;
}

html[data-sk-scheme="dark"] .sk-group-archive-header p {
  color: #cdc4de;
}

html[data-sk-scheme="dark"] .sk-group-archive-link {
  background: #1f1b2b;
  border-color: #38314a;
}

html[data-sk-scheme="dark"] .sk-group-archive-link:hover {
  border-color: #7d639b;
}

html[data-sk-scheme="dark"] .sk-group-archive-blurb,
html[data-sk-scheme="dark"] .sk-group-empty {
  color: #a79fba;
}

html[data-sk-scheme="dark"] .sk-group-archive-action {
  color: #cba4ec;
}

/* The toggle itself has to survive the page going dark. */
html[data-sk-scheme="dark"] .sk-scheme-toggle {
  background: #241f33;
  border-color: #453661;
  color: #e3cff7;
}

html[data-sk-scheme="dark"] .sk-scheme-toggle:hover {
  background: #2f2743;
  border-color: #7d639b;
}

html[data-sk-scheme="dark"] body > .sk-scheme-toggle {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   The compact values bar and copyright footer.
   This block is baked into the post content of the tool pages and appears on
   every public URL, so it is the single highest-leverage group of overrides
   here: four selectors cover all thirty-one pages. The colours are pastel
   chips on a near-white bar in the light theme, which become deep tinted chips
   on a dark bar, keeping the same pink, blue, purple and teal identity.
   -------------------------------------------------------------------------- */
html[data-sk-scheme="dark"] .studykit-values-footer-container {
  background-color: #1b1826;
  border-top-color: #3d3650;
}

html[data-sk-scheme="dark"] .studykit-copyright-bar {
  border-top-color: #3d3650;
}

html[data-sk-scheme="dark"] .feature-bar-title {
  color: #e6e2ee;
}

html[data-sk-scheme="dark"] .feature-bar-text p {
  color: #a79fba;
}

html[data-sk-scheme="dark"] .feature-bar-icon-wrapper {
  background: #262133;
}

html[data-sk-scheme="dark"] .icon-free {
  background-color: #3a2431;
  color: #ffa8b8;
}

html[data-sk-scheme="dark"] .icon-reg {
  background-color: #1e2b3f;
  color: #90cdf0;
}

html[data-sk-scheme="dark"] .icon-priv {
  background-color: #2a2340;
  color: #c4a6f5;
}

html[data-sk-scheme="dark"] .icon-mob {
  background-color: #1c3335;
  color: #7fd6c4;
}

html[data-sk-scheme="dark"] .feature-share-box {
  background-color: #33222c;
  border-color: #553645;
}

html[data-sk-scheme="dark"] .feature-share-title {
  color: #ffb3c1;
}

html[data-sk-scheme="dark"] .feature-share-box p {
  color: #c9b3c0;
}

/* The heart is an emoji, so it is painted by the font rather than by `color`.
   Setting the colour anyway keeps it from being reported as body text sitting
   on a dark chip, and gives it a matching tint when the font has no glyph. */
html[data-sk-scheme="dark"] .share-heart {
  color: #ff9db0;
}

html[data-sk-scheme="dark"] .studykit-copyright-bar p {
  color: #b3a8bd;
}

html[data-sk-scheme="dark"] .footer-divider {
  color: #6d6480;
}

html[data-sk-scheme="dark"] .footer-privacy-link {
  color: #c2b2d0;
}

html[data-sk-scheme="dark"] .footer-privacy-link:hover {
  color: #ffb3c1;
}

/* --------------------------------------------------------------------------
   Tool page chrome that is not tokenised.
   Each tool page declares its palette in its own inline block, so these need
   explicit values. The document and screenshot surfaces are deliberately left
   alone: a PDF page and a captured frame are images of something light, and
   recolouring them would misrepresent the output.
   -------------------------------------------------------------------------- */
html[data-sk-scheme="dark"] .sk-qr-preview,
html[data-sk-scheme="dark"] .sk-qr-file,
html[data-sk-scheme="dark"] .sk-shot-preview,
html[data-sk-scheme="dark"] .sk-shot-empty {
  background: #221d2e;
  border-color: #3d3650;
}

html[data-sk-scheme="dark"] .sk-qr-placeholder,
html[data-sk-scheme="dark"] .sk-qr-status.is-hint,
html[data-sk-scheme="dark"] .sk-qr-notice,
html[data-sk-scheme="dark"] .sk-shot-instructions,
html[data-sk-scheme="dark"] .sk-word-status {
  color: #cfc7dd;
}

html[data-sk-scheme="dark"] .sk-qr-notice {
  background: #2c2418;
  border-color: #4d3d21;
}

/* The camera button keeps a filled purple background from the page's own CSS,
   so the text has to be dark to match the accent treatment elsewhere. */
html[data-sk-scheme="dark"] .sk-qr-scanner-actions button,
html[data-sk-scheme="dark"] .sk-qr-control-actions button {
  background: #9d7ee0;
  border-color: #9d7ee0;
  color: #1a1626;
}

html[data-sk-scheme="dark"] .sk-shot-button.secondary,
html[data-sk-scheme="dark"] .sk-word-button.secondary {
  background: #2a2438;
  border-color: #4a4160;
  color: #e3cff7;
}

html[data-sk-scheme="dark"] .sk-shot-guide article,
html[data-sk-scheme="dark"] .sk-word-guide article,
html[data-sk-scheme="dark"] .sk-image-guide article {
  background: #1f1b2b;
  border-color: #3d3650;
}

html[data-sk-scheme="dark"] .sk-shot-note,
html[data-sk-scheme="dark"] .sk-word-note,
html[data-sk-scheme="dark"] .sk-image-note,
html[data-sk-scheme="dark"] .sk-rewrite-note {
  background: #241d2e;
  border-color: #3d3650;
  color: #cfc7dd;
}

html[data-sk-scheme="dark"] .sk-shot-upload,
html[data-sk-scheme="dark"] .sk-word-upload,
html[data-sk-scheme="dark"] .sk-image-upload {
  background: #221d2e;
  border-color: #453661;
}

html[data-sk-scheme="dark"] .sk-word-file,
html[data-sk-scheme="dark"] .sk-image-details,
html[data-sk-scheme="dark"] .sk-rewrite-controls,
html[data-sk-scheme="dark"] .sk-rewrite-output,
html[data-sk-scheme="dark"] .sk-image-status,
html[data-sk-scheme="dark"] textarea,
html[data-sk-scheme="dark"] .converter-card,
html[data-sk-scheme="dark"] .gpa-card,
html[data-sk-scheme="dark"] .calc-section,
html[data-sk-scheme="dark"] .pct-card,
html[data-sk-scheme="dark"] .summary-dashboard,
html[data-sk-scheme="dark"] .sk-image-preview {
  background: #1f1b2b;
  border-color: #3d3650;
  color: #e6e2ee;
}

/* The metric and badge chips, which keep a soft tint in the light theme. */
html[data-sk-scheme="dark"] .metric-card {
  background: #1f1b2b;
  border-color: #3d3650;
}

html[data-sk-scheme="dark"] .metric-num {
  color: #e3cff7;
}

html[data-sk-scheme="dark"] .metric-label,
html[data-sk-scheme="dark"] .counter-stats,
html[data-sk-scheme="dark"] .humanizer-stats,
html[data-sk-scheme="dark"] .fixer-stats,
html[data-sk-scheme="dark"] .density-stats {
  color: #a79fba;
}

html[data-sk-scheme="dark"] .counter-metrics-grid .card-time .metric-num {
  color: #c4a6f5;
}

html[data-sk-scheme="dark"] .counter-metrics-grid .card-time .metric-label {
  color: #b3aac6;
}

/* Status badges: keep the green, amber and red meanings, lightened for dark. */
html[data-sk-scheme="dark"] .badge-normal {
  background: #16302a;
  color: #8fe0bd;
}

html[data-sk-scheme="dark"] .badge-warning {
  background: #332a14;
  color: #f0c777;
}

html[data-sk-scheme="dark"] .badge-stuffed {
  background: #351c1f;
  color: #f2a2a8;
}

html[data-sk-scheme="dark"] .sk-image-status.is-ready,
html[data-sk-scheme="dark"] .sk-rewrite-status.is-ready {
  background: #16302a;
  color: #8fe0bd;
}

html[data-sk-scheme="dark"] .sk-image-status.is-error,
html[data-sk-scheme="dark"] .sk-shot-status[data-state="error"],
html[data-sk-scheme="dark"] .sk-word-status[data-state="error"],
html[data-sk-scheme="dark"] .sk-rewrite-status.is-warning {
  background: #351c1f;
  color: #f2a2a8;
}

html[data-sk-scheme="dark"] .sk-rewrite-status.is-warning {
  color: #f0c777;
}

html[data-sk-scheme="dark"] .sk-image-disclaimer,
html[data-sk-scheme="dark"] .sk-image-empty,
html[data-sk-scheme="dark"] .sk-rewrite-placeholder,
html[data-sk-scheme="dark"] .sk-image-details dt,
html[data-sk-scheme="dark"] .sk-image-details dd,
html[data-sk-scheme="dark"] .sk-image-upload strong,
html[data-sk-scheme="dark"] .sk-image-empty strong,
html[data-sk-scheme="dark"] .sk-image-guide h2,
html[data-sk-scheme="dark"] .sk-image-guide h3 {
  color: #cfc7dd;
}

html[data-sk-scheme="dark"] .sk-image-actions button {
  background: #9d7ee0;
  border-color: #9d7ee0;
  color: #1a1626;
}

html[data-sk-scheme="dark"] .sk-image-actions .sk-image-download {
  background: #241d2e;
  border-color: #4a4160;
  color: #e3cff7;
}

/* The older Tailwind-flavoured tools: a pink primary and a rose clear button. */
html[data-sk-scheme="dark"] .btn-primary,
html[data-sk-scheme="dark"] .btn-util.btn-primary {
  background: #c2185b;
  border-color: #c2185b;
  color: #fff;
}

html[data-sk-scheme="dark"] .btn-secondary,
html[data-sk-scheme="dark"] .btn-util,
html[data-sk-scheme="dark"] .btn-add {
  background: #2a2438;
  border-color: #4a4160;
  color: #e3cff7;
}

html[data-sk-scheme="dark"] .btn-clear,
html[data-sk-scheme="dark"] .counter-actions-row button,
html[data-sk-scheme="dark"] .fixer-actions-row .btn-clear,
html[data-sk-scheme="dark"] .humanizer-actions-row .btn-clear {
  background: #3a1c22;
  border-color: #6b2b36;
  color: #ffb0ba;
}

html[data-sk-scheme="dark"] .btn-clear:hover,
html[data-sk-scheme="dark"] .counter-actions-row button:hover,
html[data-sk-scheme="dark"] .fixer-actions-row .btn-clear:hover,
html[data-sk-scheme="dark"] .humanizer-actions-row .btn-clear:hover {
  background: #4d2229;
  color: #fff;
}

html[data-sk-scheme="dark"] .btn-copy,
html[data-sk-scheme="dark"] .fixer-actions-row .btn-copy,
html[data-sk-scheme="dark"] .humanizer-actions-row .btn-copy {
  background: #2a2340;
  border-color: #453661;
  color: #c4a6f5;
}

html[data-sk-scheme="dark"] .btn-delete {
  color: #b3aac6;
}

html[data-sk-scheme="dark"] .btn-delete:hover {
  background: #351c1f;
  color: #f2a2a8;
}

html[data-sk-scheme="dark"] .content-header h1,
html[data-sk-scheme="dark"] .content-section h2,
html[data-sk-scheme="dark"] .content-section h3,
html[data-sk-scheme="dark"] .counter-educational-content,
html[data-sk-scheme="dark"] .humanizer-educational-content,
html[data-sk-scheme="dark"] .density-educational-content,
html[data-sk-scheme="dark"] .tool-explainer-section h2,
html[data-sk-scheme="dark"] .tool-explainer-section h3,
html[data-sk-scheme="dark"] .density-educational-content h2,
html[data-sk-scheme="dark"] .density-educational-content h3,
html[data-sk-scheme="dark"] .counter-educational-content h2,
html[data-sk-scheme="dark"] .counter-educational-content h3 {
  color: #e3cff7;
}

html[data-sk-scheme="dark"] .content-section p,
html[data-sk-scheme="dark"] .content-section li,
html[data-sk-scheme="dark"] .counter-educational-content p,
html[data-sk-scheme="dark"] .counter-educational-content li,
html[data-sk-scheme="dark"] .humanizer-educational-content p,
html[data-sk-scheme="dark"] .humanizer-educational-content li,
html[data-sk-scheme="dark"] .density-educational-content p,
html[data-sk-scheme="dark"] .density-educational-content li,
html[data-sk-scheme="dark"] .tool-explainer-section p,
html[data-sk-scheme="dark"] .tool-explainer-section li,
html[data-sk-scheme="dark"] .meta-read-time,
html[data-sk-scheme="dark"] .radio-group label,
html[data-sk-scheme="dark"] .option-label,
html[data-sk-scheme="dark"] .post-views-label,
html[data-sk-scheme="dark"] .sk-related-blurb,
html[data-sk-scheme="dark"] .sk-services-path-label {
  color: #a79fba;
}

html[data-sk-scheme="dark"] .counter-educational-content a,
html[data-sk-scheme="dark"] .humanizer-educational-content a,
html[data-sk-scheme="dark"] .density-educational-content a,
html[data-sk-scheme="dark"] .tool-explainer-section a {
  color: #cba4ec;
}

html[data-sk-scheme="dark"] .tool-explainer-section,
html[data-sk-scheme="dark"] .density-report-section,
html[data-sk-scheme="dark"] .table-wrapper,
html[data-sk-scheme="dark"] .humanizer-options-row {
  background: #1f1b2b;
  border-color: #3d3650;
}

html[data-sk-scheme="dark"] .density-table th,
html[data-sk-scheme="dark"] .density-table td,
html[data-sk-scheme="dark"] .content-table th {
  background: #262133;
  border-color: #3d3650;
  color: #cfc7dd;
}

html[data-sk-scheme="dark"] .density-report-section h3 {
  color: #e3cff7;
}

html[data-sk-scheme="dark"] .counter-textarea,
html[data-sk-scheme="dark"] .counter-textarea::placeholder,
html[data-sk-scheme="dark"] #counterInput,
html[data-sk-scheme="dark"] #densityInput,
html[data-sk-scheme="dark"] #fixerInput,
html[data-sk-scheme="dark"] #humanizerInput,
html[data-sk-scheme="dark"] .sk-rewrite-page textarea,
html[data-sk-scheme="dark"] .sk-rewrite-control select,
html[data-sk-scheme="dark"] input,
html[data-sk-scheme="dark"] select,
html[data-sk-scheme="dark"] textarea,
html[data-sk-scheme="dark"] .pct-input {
  background: #221d2e;
  border-color: #3d3650;
  color: #e6e2ee;
}

html[data-sk-scheme="dark"] .sk-rewrite-page button,
html[data-sk-scheme="dark"] .density-actions-row button,
html[data-sk-scheme="dark"] .humanizer-actions-row button,
html[data-sk-scheme="dark"] .fixer-actions-row button {
  background: #9d7ee0;
  border-color: #9d7ee0;
  color: #1a1626;
}

html[data-sk-scheme="dark"] .sk-rewrite-page button.secondary,
html[data-sk-scheme="dark"] .clear-btn {
  background: #2a2438;
  border-color: #4a4160;
  color: #e3cff7;
}

html[data-sk-scheme="dark"] .sk-rewrite-panel,
html[data-sk-scheme="dark"] .counter-tool-box,
html[data-sk-scheme="dark"] .humanizer-tool-box,
html[data-sk-scheme="dark"] .fixer-tool-box,
html[data-sk-scheme="dark"] .density-tool-box {
  background: #1f1b2b;
  border-color: #3d3650;
}

html[data-sk-scheme="dark"] .sk-rewrite-guide article {
  background: #1f1b2b;
  border-color: #3d3650;
}

html[data-sk-scheme="dark"] .sk-rewrite-guide p {
  color: #a79fba;
}

html[data-sk-scheme="dark"] .sk-rewrite-guide-number {
  background: #2a2340;
  color: #c4a6f5;
}

html[data-sk-scheme="dark"] .sk-image-canvas-wrap canvas {
  /* A canvas is the working surface for redaction. It stays light so the
     original image reads the way it did before dark mode was added. */
  background: #fff;
}

/* --------------------------------------------------------------------------
   The long tail.
   Each group below was found by auditing all 31 public URLs in both schemes
   and reading back the computed colours, so these are measured rather than
   guessed. Where a page's own CSS pins a colour with !important, the override
   has to carry !important too, or the page wins on importance before
   specificity is even considered.
   -------------------------------------------------------------------------- */

/* Ajax Search Lite renders its options panel as a white card. It is hidden
   until the search field is focused, then it appears over the header.
   The !important is deliberate: the plugin styles this with
   `#ajaxsearchlite1 .probox`, and an ID selector cannot be outranked by adding
   classes or attributes. !important is the only way to win from outside. */
html[data-sk-scheme="dark"] .probox,
html[data-sk-scheme="dark"] .prosettings {
  background: #1f1b2b !important;
  border-color: #3d3650;
  color: #cfc7dd;
}

/* The text inside the search field.
   --------------------------------------------------------------------------
   The field was unreadable in night mode on a desktop: black text on the dark
   panel, a contrast ratio of 1.25 against the 4.5 that readable text needs, so
   it looked as though the search bar had vanished.

   Ajax Search Lite is the reason, and not in a way that is obvious from the
   page. It stores the search box's text colour as a plugin setting and prints
   it into its own stylesheet, pinned twice over:

       #ajaxsearchlite1 .probox .proinput input { color: #000 !important; }

   That is correct for the light theme, where the field is a white pill and
   black is the readable choice. It is the one rule in the header that cannot
   adapt, and it is why the panel around it turned dark while the words inside
   did not.

   Two things are needed to win against it, and both are required. The
   !important is needed because a normal declaration loses to an important one
   regardless of how specific it is. The ID is needed because once both sides
   are important, specificity decides, and a single ID outranks any number of
   classes. The selector below repeats the plugin's own ID and class chain and
   adds the attribute and the input's class, so it is strictly more specific
   than the rule it replaces.

   Changing the plugin setting itself was not an option: one stored colour
   cannot be right for a white pill in daylight and a dark panel at night, and
   the setting is shared by both. The override has to live here. */
html[data-sk-scheme="dark"] #ajaxsearchlite1 .probox .proinput input.orig,
html[data-sk-scheme="dark"] #ajaxsearchlite1 .probox .proinput input.autocomplete,
html[data-sk-scheme="dark"] div.asl_w .probox .proinput input.orig,
html[data-sk-scheme="dark"] div.asl_w .probox .proinput input.autocomplete {
  color: #e6e2ee !important;
  -webkit-text-fill-color: #e6e2ee !important;
  background: transparent;
}

/* The placeholder is what a visitor reads before they type anything, so it has
   to be legible on its own. The default is a mid grey chosen to sit on white,
   which is too dark to read on the night panel. */
html[data-sk-scheme="dark"] #ajaxsearchlite1 .probox .proinput input::placeholder,
html[data-sk-scheme="dark"] #ajaxsearchlite1 .probox .proinput input::-webkit-input-placeholder,
html[data-sk-scheme="dark"] #ajaxsearchlite1 .probox .proinput input::-moz-placeholder,
html[data-sk-scheme="dark"] div.asl_w .probox .proinput input::placeholder,
html[data-sk-scheme="dark"] div.asl_w .probox .proinput input::-webkit-input-placeholder,
html[data-sk-scheme="dark"] div.asl_w .probox .proinput input::-moz-placeholder {
  color: #a79fc0 !important;
  -webkit-text-fill-color: #a79fc0 !important;
  opacity: 1 !important;
}

/* Without this the caret stays black and blinks against a dark background,
   which reads as a broken field even once the text is legible. */
html[data-sk-scheme="dark"] #ajaxsearchlite1 .probox .proinput input,
html[data-sk-scheme="dark"] div.asl_w .probox .proinput input {
  caret-color: #e6e2ee !important;
}

/* The plain About, Contact and legal pages. */
html[data-sk-scheme="dark"] .studykit-contact-box,
html[data-sk-scheme="dark"] .studykit-prose a,
html[data-sk-scheme="dark"] .studykit-page a {
  color: #cba4ec;
}

html[data-sk-scheme="dark"] .studykit-contact-box {
  background: #1f1b2b;
  border-color: #3d3650;
}

html[data-sk-scheme="dark"] .studykit-prose p,
html[data-sk-scheme="dark"] .studykit-prose li,
html[data-sk-scheme="dark"] .studykit-page p,
html[data-sk-scheme="dark"] .studykit-page li,
html[data-sk-scheme="dark"] .studykit-contact-box p,
html[data-sk-scheme="dark"] .studykit-contact-box li,
html[data-sk-scheme="dark"] .studykit-contact-box strong {
  color: #cfc7dd;
}

/* The SEO widget in the theme footer carries its own muted text colour. */
html[data-sk-scheme="dark"] .studykit-seo-block p,
html[data-sk-scheme="dark"] .studykit-seo-block li,
html[data-sk-scheme="dark"] .ct-widget p,
html[data-sk-scheme="dark"] .ct-widget li {
  color: #cfc7dd;
}

html[data-sk-scheme="dark"] .ct-widget a {
  color: #d3a9ec;
}

/* The stat tiles on the services page are white cards in the light theme. */
html[data-sk-scheme="dark"] .sk-services-stat {
  background: #1f1b2b;
  border-color: #3d3650;
  color: #e6e2ee;
}

/* The PDF and screenshot workspaces. */
html[data-sk-scheme="dark"] .sk-word-panel,
html[data-sk-scheme="dark"] .sk-shot-panel,
html[data-sk-scheme="dark"] .sk-qr-output {
  background: #1f1b2b;
  border-color: #3d3650;
}

/* The two tool buttons whose pages pin #452b61 with !important. */
html[data-sk-scheme="dark"] .sk-word-button.secondary,
html[data-sk-scheme="dark"] .sk-shot-button.secondary,
html[data-sk-scheme="dark"] .sk-word-upload,
html[data-sk-scheme="dark"] .sk-shot-upload,
html[data-sk-scheme="dark"] .sk-qr-file {
  color: #e3cff7 !important;
}

html[data-sk-scheme="dark"] .sk-word-upload small,
html[data-sk-scheme="dark"] .sk-word-upload span,
html[data-sk-scheme="dark"] .sk-shot-upload small,
html[data-sk-scheme="dark"] .sk-shot-upload span,
html[data-sk-scheme="dark"] .sk-qr-file small,
html[data-sk-scheme="dark"] .sk-qr-file span {
  color: #a79fba !important;
}

/* The QR scanner's problem banner and reveal button. */
html[data-sk-scheme="dark"] .sk-qr-problems {
  background: #351c1f;
  color: #f2a2a8;
}

html[data-sk-scheme="dark"] .sk-qr-reveal {
  background: #241f33;
  border-color: #453661;
  color: #e3cff7;
}

/* Related tool cards. */
html[data-sk-scheme="dark"] .sk-related article {
  background: #1f1b2b;
  border-color: #3d3650;
}

/* The older Tailwind-flavoured tools pin these greys on their own controls. */
html[data-sk-scheme="dark"] .text-metrics,
html[data-sk-scheme="dark"] .text-metrics span,
html[data-sk-scheme="dark"] .text-metrics div,
html[data-sk-scheme="dark"] .btn-action,
html[data-sk-scheme="dark"] .studykit-wordcounter-container,
html[data-sk-scheme="dark"] .counter-textarea,
html[data-sk-scheme="dark"] .clear-btn {
  color: #cfc7dd !important;
}

html[data-sk-scheme="dark"] .btn-action {
  background: #2a2438;
  border-color: #4a4160;
  color: #e3cff7 !important;
}

/* Inputs inside the QR tools, where the page rule is more specific than a bare
   `input` selector. */
html[data-sk-scheme="dark"] .sk-qr input,
html[data-sk-scheme="dark"] .sk-qr select,
html[data-sk-scheme="dark"] .sk-qr textarea,
html[data-sk-scheme="dark"] .sk-word-page input,
html[data-sk-scheme="dark"] .sk-shot-page input,
html[data-sk-scheme="dark"] .sk-image-page input,
html[data-sk-scheme="dark"] .converter-card input,
html[data-sk-scheme="dark"] .converter-card textarea,
html[data-sk-scheme="dark"] .gpa-card input,
html[data-sk-scheme="dark"] .gpa-card select,
html[data-sk-scheme="dark"] .calc-section input,
html[data-sk-scheme="dark"] .calc-section select {
  background: #221d2e;
  border-color: #3d3650;
  color: #e6e2ee;
}

/* The step cards on the services page. */
html[data-sk-scheme="dark"] .sk-services-path article {
  background: #1f1b2b;
  border-color: #3d3650;
}

/* The password reveal toggle is an outline control, not a filled accent
   button, so it needs light text. It also needs !important because the generic
   accent-button rule above deliberately forces dark text on light fills, and
   this control is the one place the two would otherwise disagree. */
html[data-sk-scheme="dark"] .sk-qr-reveal {
  background: #241f33;
  border-color: #453661;
  color: #e3cff7 !important;
}

/* The selected-file name and the in-page footer links on the two tools that
   declare their own palette. */
html[data-sk-scheme="dark"] #sk-word-file-name,
html[data-sk-scheme="dark"] #sk-shot-file-name {
  color: #e3cff7;
}

html[data-sk-scheme="dark"] .sk-word-footer a,
html[data-sk-scheme="dark"] .sk-shot-footer a,
html[data-sk-scheme="dark"] .sk-rewrite-footer a,
html[data-sk-scheme="dark"] .sk-image-footer a {
  color: #cba4ec;
}

/* The document preview stays white on purpose. A converted page and a captured
   frame are images of something light, and its empty state is therefore drawn
   with dark text so it reads on that white surface. */
html[data-sk-scheme="dark"] .sk-word-preview,
html[data-sk-scheme="dark"] .sk-word-frame,
html[data-sk-scheme="dark"] .sk-shot-preview canvas {
  background: #fff;
}

html[data-sk-scheme="dark"] .sk-word-empty,
html[data-sk-scheme="dark"] .sk-word-preview p,
html[data-sk-scheme="dark"] .sk-shot-empty {
  color: #5c5468;
}

/* ==========================================================================
   Respect a stated preference over the stored choice
   ==========================================================================
   Only meaningful when the visitor has not pinned a choice, which is why the
   script writes data-sk-scheme-choice="auto" in that case. The overrides above
   already apply through the attribute, so this block only needs to stop the
   page flashing light while the script decides. */

html[data-sk-scheme="dark"] {
  background: #14121a;
}

@media (prefers-reduced-motion: reduce) {
  .sk-scheme-toggle {
    transition: none;
  }
}

/* ==========================================================================
   Contrast fixes in the light theme
   ==========================================================================
   These are not dark mode work. They are pre-existing WCAG AA failures that the
   audit turned up while checking dark mode, and they sit in the very same
   selectors the dark overrides above target, so they are fixed here rather than
   left behind. Every value keeps its original hue and is only darkened enough
   to clear 4.5:1, so nothing changes visually beyond becoming readable.

   Measured before:  2.68  copyright text on the values bar
                     3.63  the "Love StudyKit?" heading on pink
                     4.43  the "Free to use" heading on the values bar
                     2.16  a pink subheading on white
                     2.92  a purple metric value on lavender
                     4.09  a metric label
                     3.34  the rose Clear button on its tint
                     3.53  white on the pink primary button
                     4.06  a theme link on a tinted panel
   */

/* The theme's link and button accent. #2872fa is 4.06:1 on the tinted panels
   used across the site and only 3.9:1 under white button text, so both the link
   and the button case fail. #1f66e0 is the same hue, one step darker, and
   clears 4.5:1 in both. This is the only change here that affects the whole
   theme, so it is worth a look before shipping. */
:root {
  --theme-palette-color-1: #1f66e0;
}

/* The values bar. The title was being overridden by the muted colour on the
   paragraph rule beneath it, which is why it measured 4.43 rather than the
   near-black it declares. */
html:not([data-sk-scheme="dark"]) .studykit-features-row .feature-bar-title {
  color: #1a202c;
}

html:not([data-sk-scheme="dark"]) .feature-bar-text p {
  color: #63566a;
}

html:not([data-sk-scheme="dark"]) .studykit-copyright-bar p {
  color: #6b5e72;
}

html:not([data-sk-scheme="dark"]) .footer-privacy-link {
  color: #6b5e72;
}

html:not([data-sk-scheme="dark"]) .feature-share-title {
  color: #a83b5c;
}

html:not([data-sk-scheme="dark"]) .feature-share-box p {
  color: #6b5560;
}

html:not([data-sk-scheme="dark"]) .metric-label {
  color: #6b5e72;
}

html:not([data-sk-scheme="dark"]) .metric-num {
  color: #6d3fb0;
}

html:not([data-sk-scheme="dark"]) .counter-metrics-grid .card-time .metric-num {
  color: #6d3fb0;
}

html:not([data-sk-scheme="dark"]) .studykit-seo-block h3 {
  color: #b93f66;
}

html:not([data-sk-scheme="dark"]) .btn-util.btn-primary,
html:not([data-sk-scheme="dark"]) .btn-primary {
  background: #c2185b;
  border-color: #c2185b;
}

html:not([data-sk-scheme="dark"]) .btn-clear,
html:not([data-sk-scheme="dark"]) .counter-actions-row button {
  color: #be123c;
}

html:not([data-sk-scheme="dark"]) .btn-clear:hover,
html:not([data-sk-scheme="dark"]) .counter-actions-row button:hover {
  color: #ffffff;
}
