/**
 * The theme control and the layer for what the site's theme owns
 * (docs/SPEC-dark-theme.md §5.3 and §5.6). Loaded only on a themed page, after
 * gw-tokens.css, and so only ever with the option on.
 *
 * ── The control sits on a header that is near-black in BOTH themes ─────────
 *
 * The Imagely header is `#111` and stays dark when the page does (it gains a hairline
 * under it, from --gwd-header-line, and nothing else). So the control's own colours
 * are the same in both themes and are written once, marked `theme: fixed`, rather
 * than borrowed from tokens that swap: a token that swaps would put pale text on a
 * pale button the moment the page went light.
 */

/* ── What the Imagely theme owns, on a themed page ────────────────────────
 *
 * The card, the page behind it and the body text are the theme's, in a stylesheet
 * and ~100 KB of inline customizer CSS this repository cannot read (spec §5.6). They
 * are given the tokens, and the tokens do the work: in the light theme `--gwd-surface`
 * is #ffffff and `--gwd-body` is #444444, which is what the theme paints, so these
 * rules change nothing on a light page; in the dark theme they are the dark values.
 * No selector here knows which theme it is in, so no rule can be right in one and wrong
 * in the other. `html body.gw-themed` outranks the theme's own `#wrap` and `body`.
 */
html body.gw-themed { color: var(--gwd-body); }
html body.gw-themed #wrap { background-color: var(--gwd-surface); }
/* The copyright bar, white in the theme (measured on a live page; `#copyright` text is the body colour). */
html body.gw-themed #footer-bottom { background-color: var(--gwd-surface); }
/* The theme's `h1, h2, h3, h4, h5, h6 { color: #333 }`. One notch above it (an `html` and no class), so a
   heading a plugin sheet colours by class, even a pale one on a dark fill, keeps its own rule.
   `--gwd-head` is #333 in light, so the light theme's headings are not touched. */
html :where(body.gw-themed) h1,
html :where(body.gw-themed) h2,
html :where(body.gw-themed) h3,
html :where(body.gw-themed) h4,
html :where(body.gw-themed) h5,
html :where(body.gw-themed) h6 { color: var(--gwd-head); }

/* ── The site's Additional CSS, which this repository does not hold ────────
 *
 * The WordPress Customizer's "Additional CSS" (`<style id="wp-custom-css">`, 19 KB, printed
 * after every stylesheet in the head) carries the whole pre-plugin hook-reference stylesheet:
 * `.gw-entry a { color: #0645ad !important }`, headings at #111, the zebra rows at #f3efe8,
 * the confidence badges and so on, most of it `!important` and at the same specificity as the
 * plugin's own rules, so it wins. Found by the dry run (tools/dry-run-theme.mjs): on a dark
 * page the plugin's migrated sheets were right and the page was still light, because the
 * block that decides was never theirs. It cannot be edited from here and the owner should not
 * have to. Each rule below restates one of its COLOURS from the tokens, `!important` exactly
 * where the original is, and ONE notch more specific than the original: `html :where(body.gw-themed)`
 * is the original's selector plus a single type selector. That is deliberate and measured. A
 * rule written as `html body.gw-themed .gw-entry ...` (two notches and a class) beat the
 * original, and also beat every plugin rule that had already overridden the original on
 * purpose (the section numbers the dossier makes transparent, the table links it colours),
 * painting them back to the old look. One notch beats the Additional CSS block and loses to
 * whatever already beats it, so a page draws as it does today, in the other colours.
 * The block can be deleted from Additional CSS later with nothing lost.
 *
 * In the light theme these tokens sit within a few levels of the literals they replace
 * (`--gwd-body` #444 for #3d3c38, `--gwd-light` for the three creams), which is why the rules
 * are not scoped to dark: one copy, no selector knows the theme, none can drift from its twin.
 * Two colours were too far from any shared token and have their own: `--gwd-tag-bg` holds the
 * original #a9a9a9 in light, and `--gwd-link-hover` is a deeper blue than the original #2e86c1,
 * which was 3.97:1 on white and failed the suite that now watches the tokens.
 */
html :where(body.gw-themed) .gw-entry { color: var(--gwd-ink); }
/* Links. `.gw-entry a` is #0645ad !important for every anchor, and a plugin rule only beats it by
   being !important and more specific. These are the anchors that take it today (measured on the
   live pages with tools/probe-theme-links.mjs): the unclassed ones, the evidence
   layout's two, and the directory pages' (a model's call to action, a tyer's card, the glossary's
   tiles). A classed link a plugin colours on purpose keeps its own rule. */
html :where(body.gw-themed) .gw-entry a:where(:not([class]), .gw-ev-eid, .gw-ev-term, .mf-model-cta, .ty-card, .gw-glossary-tile, .gw-glossary-strip-all, .gw-term-media, .hc-ce-legend-item, .hc-ce-cta-link) { color: var(--gwd-link) !important; }
html :where(body.gw-themed) .gw-entry a:where(:not([class]), .gw-ev-eid, .gw-ev-term, .mf-model-cta, .ty-card, .gw-glossary-tile, .gw-glossary-strip-all, .gw-term-media, .hc-ce-legend-item, .hc-ce-cta-link):hover { color: var(--gwd-link-hover) !important; }
/* The page header and the tables' header row are a near-black bar in both themes. */
html :where(body.gw-themed) .gw-page-header,
html :where(body.gw-themed) .gw-entry .gw-table th,
html :where(body.gw-themed) .gw-entry .gw-meas-table th,
html :where(body.gw-themed) .gw-entry .gw-equiv-table th { background: var(--gwd-bar-bg) !important; }
html :where(body.gw-themed) .gw-entry .gw-hook-type-tag { background: var(--gwd-bar-bg); }
/* Section numbers are a grey tag with dark writing; on dark, a deep tag with pale writing. */
html :where(body.gw-themed) .gw-entry .gw-section .gw-section-number { background: var(--gwd-tag-bg) !important; color: var(--gwd-ink) !important; }
html :where(body.gw-themed) .gw-entry .gw-section h2,
html :where(body.gw-themed) .gw-entry .gw-section .gw-section-title,
html :where(body.gw-themed) .gw-entry .gw-confidence-key h2 { color: var(--gwd-ink) !important; }
html :where(body.gw-themed) .gw-entry .gw-section h3 { color: var(--gwd-brown-fg) !important; border-bottom-color: var(--gwd-line-soft) !important; }
html :where(body.gw-themed) .gw-entry .gw-spec-line { background-color: var(--gwd-light); color: var(--gwd-body); }
html :where(body.gw-themed) .gw-entry .gw-table td,
html :where(body.gw-themed) .gw-entry .gw-meas-table td,
html :where(body.gw-themed) .gw-entry .gw-equiv-table td,
html :where(body.gw-themed) .gw-entry .gw-confidence-key td { border-bottom-color: var(--gwd-line-soft) !important; }
html :where(body.gw-themed) .gw-entry .gw-table tr:nth-child(even) td,
html :where(body.gw-themed) .gw-entry .gw-meas-table tr:nth-child(even) td,
html :where(body.gw-themed) .gw-entry .gw-equiv-table tr:nth-child(even) td,
html :where(body.gw-themed) .gw-entry .gw-related-current td { background-color: var(--gwd-light) !important; }
html :where(body.gw-themed) .gw-entry .gw-table tr:last-child td,
html :where(body.gw-themed) .gw-entry .gw-meas-table tr:last-child td,
html :where(body.gw-themed) .gw-entry .gw-equiv-table tr:last-child td { border-bottom-color: var(--gwd-line) !important; }
html :where(body.gw-themed) .gw-entry .gw-table td:first-child,
html :where(body.gw-themed) .gw-entry .gw-rating-text,
html :where(body.gw-themed) .gw-entry .gw-meas-context strong { color: var(--gwd-body); }
html :where(body.gw-themed) .gw-entry .gw-callout { background-color: var(--gwd-light); border-color: var(--gwd-line); border-top-color: var(--gwd-coral); }
html :where(body.gw-themed) .gw-entry .gw-rating-card { background-color: var(--gwd-light); border-color: var(--gwd-line); }
html :where(body.gw-themed) .gw-entry .gw-callout .gw-callout-label,
html :where(body.gw-themed) .gw-entry .gw-related-current td em { color: var(--gwd-brown-fg); }
html :where(body.gw-themed) .gw-entry .gw-quote { background-color: var(--gwd-light) !important; border-left-color: var(--gwd-line-strong) !important; color: var(--gwd-body); }
html :where(body.gw-themed) .cn-P { background-color: var(--gwd-ok-bg); color: var(--gwd-ok-fg); }
html :where(body.gw-themed) .cn-V { background-color: var(--gwd-info-bg); color: var(--gwd-info-fg); }
html :where(body.gw-themed) .cn-I { background-color: var(--gwd-warn-bg); color: var(--gwd-warn-fg); }
html :where(body.gw-themed) .cn-E { background-color: var(--gwd-bad-bg); color: var(--gwd-bad-fg); }
html :where(body.gw-themed) .cn-S { background-color: var(--gwd-wash); color: var(--gwd-text2); }
html :where(body.gw-themed) .gw-entry .gw-confidence-key { background-color: var(--gwd-light); border-top-color: var(--gwd-line); color: var(--gwd-body); }
html :where(body.gw-themed) .gw-entry .gw-confidence-key .gw-key-note { border-top-color: var(--gwd-line-soft); color: var(--gwd-text2); }
html :where(body.gw-themed) .gw-entry .gw-img-placeholder,
html :where(body.gw-themed) .gw-entry .gw-gallery-item { background-color: var(--gwd-light); border-color: var(--gwd-line); }
html :where(body.gw-themed) .gw-entry .gw-gallery-item figcaption { border-top-color: var(--gwd-line-soft); }
html :where(body.gw-themed) .gw-entry .gw-img-placeholder,
html :where(body.gw-themed) .gw-entry .gw-gallery-item figcaption,
html :where(body.gw-themed) .gw-entry .gw-source-citation,
html :where(body.gw-themed) .gw-entry .gw-meas-context,
html :where(body.gw-themed) .gw-entry .gw-meas-notes { color: var(--gwd-text2); }
html :where(body.gw-themed) .gw-entry .gw-legacy-content { border-top-color: var(--gwd-line); }

/* ── The control ──────────────────────────────────────────────────────────── */
html body .gw-theme-control { display: inline-flex; align-items: center; margin: 0; padding: 0; vertical-align: middle; white-space: nowrap; }
html body .gw-theme-control[hidden] { display: none; }
html body .gw-theme-control button {
  display: inline-flex; gap: 6px; align-items: center; min-height: 30px; margin: 0 0 0 -1px; padding: 0 10px; border-radius: 0;
  color: #cfd6d2; /* theme: fixed */
  background: transparent; border: 1px solid #5e7066; /* theme: fixed */
  cursor: pointer; font: 600 11px/1 var(--gwd-sans); letter-spacing: 0.04em; text-transform: uppercase; box-shadow: none;
}
html body .gw-theme-control button:first-child { margin-left: 0; border-radius: 4px 0 0 4px; }
html body .gw-theme-control button:last-child { border-radius: 0 4px 4px 0; }
html body .gw-theme-control button:hover { color: #ffffff; background: #1d2522; } /* theme: fixed */
html body .gw-theme-control button[aria-pressed="true"] {
  position: relative; z-index: 1; color: #ffffff; background: #3a4a43; border-color: #8a9d93; /* theme: fixed */
}
html body .gw-theme-control button:focus-visible { outline: 3px solid var(--gwd-orange); outline-offset: 2px; z-index: 2; }
html body .gw-theme-control svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* In the navigation: the last item, kept out of the theme's link styling. */
html body li.gw-theme-item { display: inline-flex; align-items: center; margin-left: 14px; }
html body li.gw-theme-item::before,
html body li.gw-theme-item::after { display: none; }
/* The desktop menu already fills its row (measured on the live header: about 30px spare), and a
   control that wraps under it makes the header taller on every page. So there the buttons are their
   icons, named by `title` and by the label that stays in the page for a screen reader. The phone's
   drawer and the fixed fallback have the room and show the words. */
html body #site-navigation-wrap li.gw-theme-item .gw-theme-control button span {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
html body #site-navigation-wrap li.gw-theme-item .gw-theme-control button { padding: 0 9px; }

/* The phone's drawer (`#mobile-dropdown`, the theme's second print of the menu) is WHITE, not the near-black
   bar the desktop menu sits on: found by the phone dry run, where the control's pale-on-dark colours were
   1.5:1 on it and its links (the theme's `a { color: #888 }`, 3.5:1) were no better. So here the drawer is
   the card, its links the muted ink, and the control is drawn from the tokens instead of the fixed
   near-black-bar colours; the light theme's drawer stays white. Only on a themed page. */
html body.gw-themed #mobile-dropdown { background-color: var(--gwd-surface); }
html body.gw-themed #mobile-dropdown ul li > a { color: var(--gwd-muted); }
html body.gw-themed #mobile-dropdown li.gw-theme-item { display: flex; margin: 8px 0 0; padding: 0 20px 12px; }
html body.gw-themed #mobile-dropdown .gw-theme-control button { color: var(--gwd-text2); background: transparent; border-color: var(--gwd-btn-line); }
html body.gw-themed #mobile-dropdown .gw-theme-control button:hover { color: var(--gwd-ink); background: var(--gwd-light); }
html body.gw-themed #mobile-dropdown .gw-theme-control button[aria-pressed="true"] { color: var(--gwd-btn-fg); background: var(--gwd-btn-bg); border-color: var(--gwd-btn-bg); }

/* The fallback, for a theme that does not take a menu item: small, fixed, out of the way. */
html body .gw-theme-fixed {
  position: fixed; right: 14px; bottom: 14px; z-index: 99990; padding: 6px; border-radius: 8px;
  background: #070a09; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); /* theme: fixed */
}

/* The words a screen reader hears when the theme changes; never seen. */
html body .gw-theme-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Larger targets on a touch screen (WCAG 2.2 target size). */
@media (pointer: coarse) {
  html body .gw-theme-control button { min-height: 44px; }
}

/* Never printed. */
@media print {
  html body .gw-theme-control,
  html body .gw-theme-fixed,
  html body li.gw-theme-item { display: none !important; }
}