/* v3.7.233: Dark mode + three-state theme toggle. */
:root {
  /* v3.7.454: confirmed dark-mode picks */
  --flag-red: #b22234;
  --flag-blue: #3c3b6e;
  --surface-card: #ffffff;
  /* v3.7.451: fixed white for white-on-color text, light borders, flag stripe (intentionally mode-invariant) */
  --pure-white: #ffffff;
  /* v3.7.449: tokenized previously un-tokenized solid colors (CSS debt 2/4) */
  --tone-69: #b8b0a0;
  --ink-17: #322a23;
  --paper-89: #e8e3d4;
  --paper-83: #d8d4cc;
  --paper-99: #fdfcfa;
  --ink-11: #1f1b16;
  --navy-30: #3f4c6b;
  --navy-66: #9fa8c2;
  --danger-26: #7a2738;
  --danger-67: #ff8888;
  --paper-98: #fafafa;
  --ink-15: #2a251f;
  --tone-76: #c8c0b0;
  --ink-15x: #2a2620;
  --navy-56: #8a89b8;
  --tone-54: #8e8a85;
  --ink-11x: #1e1b17;
  --ink-29: #524a3d;
  --paper-84: #ddd5c5;
  --tone-45: #7b7264;
  --paper-89x: #e8e2d0;
  --tone-51: #8a8273;
  --tone-68: #b5ac97;
  --warn-95: #fff4c4;
  /* v3.7.448: overlay/shadow/glass scale (was hardcoded rgba across 24 files) */
  --glass-surface: rgba(245, 241, 234, 0.78);
  --ov-black-06: rgba(0, 0, 0, 0.06);
  --ov-black-10: rgba(0, 0, 0, 0.1);
  --ov-black-15: rgba(0, 0, 0, 0.15);
  --ov-black-25: rgba(0, 0, 0, 0.25);
  --ov-black-50: rgba(0, 0, 0, 0.5);
  --ov-black-75: rgba(0, 0, 0, 0.75);
  --ov-black-88: rgba(0, 0, 0, 0.88);
  --ov-coral-18: rgba(255, 99, 99, 0.18);
  --ov-coral-40: rgba(255, 99, 99, 0.4);
  --ov-green-92: rgba(46, 139, 87, 0.92);
  --ov-navy-92: rgba(60, 59, 110, 0.92);
  --ov-red-04: rgba(178, 34, 52, 0.04);
  --ov-red-12: rgba(178, 34, 52, 0.12);
  --ov-red-30: rgba(178, 34, 52, 0.3);
  --ov-red-65: rgba(178, 34, 52, 0.65);
  --ov-red-92: rgba(178, 34, 52, 0.92);
  --ov-white-10: rgba(255, 255, 255, 0.1);
  --ov-white-18: rgba(255, 255, 255, 0.18);
  --ov-white-35: rgba(255, 255, 255, 0.35);
  --ov-white-50: rgba(255, 255, 255, 0.5);
  --ov-white-92: rgba(255, 255, 255, 0.92);
  --paper: #f5f1ea;
  --paper-shade: #ede7dd;
  --paper-deep: #e2dccf;
  --ink: #1a1814;
  --ink-soft: #4a4640;
  --ink-muted: #6b6760;
  --rule: #ede7dd;
  --red: #B22234;
  --accent: #B22234;
  --blue: #3C3B6E;
  --navy: #252447;
  --code-bg: #fef9e7;
  /* v3.7.419: search-input background tokens (extracted from inline
     hardcoded values; cleared 24 IMPORTANT-HARDCODED-COLOR findings) */
  --search-input-bg: rgba(255, 255, 255, 0.92);
  --search-input-bg-focus: #ffffff;
  /* v3.7.421: --red-bg-text is the text color when background is --red-bg
     (always var(--red-bg), a theme-stable dark red). White text guarantees
     8.20:1 contrast in both light and dark modes. Same value in both
     theme blocks because --red-bg itself is theme-stable. */
  --red-bg-text: #ffffff;
}
html[data-theme="dark"] {
  --surface-hover: rgba(255, 255, 255, 0.08);
  --flag-red: #b22234;
  --flag-blue: #3c3b6e;
  --surface-card: #2f2b25;
  --pure-white: #ffffff;
  /* v3.7.449: dark overrides for newly tokenized colors (flagged for confirmation) */
  --tone-69: #b8b0a0;
  --ink-17: #322a23;
  --paper-89: #e8e3d4;
  --paper-83: #d8d4cc;
  --paper-99: #fdfcfa;
  --ink-11: #cfc9bb;
  --navy-30: #3f4c6b;
  --navy-66: #9fa8c2;
  --danger-26: #7a2738;
  --danger-67: #ff8888;
  --paper-98: #2f2b25;
  --ink-15: #cfc9bb;
  --tone-76: #c8c0b0;
  --ink-15x: #cfc9bb;
  --navy-56: #8a89b8;
  --tone-54: #8e8a85;
  --ink-11x: #cfc9bb;
  --ink-29: #cfc9bb;
  --paper-84: #ddd5c5;
  --tone-45: #7b7264;
  --paper-89x: #e8e2d0;
  --tone-51: #8a8273;
  --tone-68: #b5ac97;
  --warn-95: #fff4c4;
  /* v3.7.448: overlay/shadow/accent-veil tokens are intentionally mode-invariant
     (declared explicitly to satisfy WARM-TONE-DARK-TOKEN-GAP; shadows/white-highlights/
     accent veils read correctly on dark surfaces. Black tints used as borders/hover-bg
     are candidates to flip to white in dark — deferred to the dark-mode visual pass.) */
  --ov-black-06: rgba(0, 0, 0, 0.06);
  --ov-black-10: rgba(0, 0, 0, 0.1);
  --ov-black-15: rgba(0, 0, 0, 0.15);
  --ov-black-25: rgba(0, 0, 0, 0.25);
  --ov-black-50: rgba(0, 0, 0, 0.5);
  --ov-black-75: rgba(0, 0, 0, 0.75);
  --ov-black-88: rgba(0, 0, 0, 0.88);
  --ov-coral-18: rgba(255, 99, 99, 0.18);
  --ov-coral-40: rgba(255, 99, 99, 0.4);
  --ov-green-92: rgba(46, 139, 87, 0.92);
  --ov-navy-92: rgba(60, 59, 110, 0.92);
  --ov-red-04: rgba(178, 34, 52, 0.04);
  --ov-red-12: rgba(178, 34, 52, 0.12);
  --ov-red-30: rgba(178, 34, 52, 0.3);
  --ov-red-65: rgba(178, 34, 52, 0.65);
  --ov-red-92: rgba(178, 34, 52, 0.92);
  --ov-white-10: rgba(255, 255, 255, 0.1);
  --ov-white-18: rgba(255, 255, 255, 0.18);
  --ov-white-35: rgba(255, 255, 255, 0.35);
  --ov-white-50: rgba(255, 255, 255, 0.5);
  --ov-white-92: rgba(255, 255, 255, 0.92);
    --glass-surface: rgba(20, 18, 14, 0.78);
  --paper: #1a1814;
  --paper-shade: #25221d;
  --paper-deep: #2f2b25;
  --ink: #e8e3d4;
  --ink-soft: #b8b0a0;
  --ink-muted: #908878;
  --rule: #3a342a;
  --border: rgba(255, 255, 255, 0.12);
  --red: #e06b77;
  --accent: #e06b77;
  --blue: #8a89b8;
  --navy: #5a5980;
  --code-bg: #2a2620;
  /* v3.7.418: dark-mode overrides for the 5 WARM-TONE-DARK-TOKEN-GAP
     findings from v3.7.416's audit. Closes the token-gap by giving each
     affected token an explicit dark-mode value. The savings-green tokens
     (--green, --green-soft) get brighter/darker variants tuned for dark
     surfaces rather than the previous theme-neutral approach \u2014 makes
     the design intent explicit. */
  --accent-faint: #3a2520;
  --ink-faint: #706a5a;
  --rule-soft: #2a2520;
  --green: #5fb872;
  --green-soft: #1f3220;
  /* v3.7.419: search-input dark-mode background \u2014 subtle bright overlay
     on warm-dark surface; focus state slightly brighter */
  --search-input-bg: rgba(255, 255, 255, 0.06);
  --search-input-bg-focus: rgba(255, 255, 255, 0.12);
    /* v3.7.421: --red-bg-text — same value as light (theme-stable
     since --red-bg is theme-stable) */
  --red-bg-text: #ffffff;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
  --surface-hover: rgba(255, 255, 255, 0.08);
  --flag-red: #b22234;
  --flag-blue: #3c3b6e;
  --surface-card: #2f2b25;
    --glass-surface: rgba(20, 18, 14, 0.78);
    --paper: #1a1814;
    --paper-shade: #25221d;
    --paper-deep: #2f2b25;
    --ink: #e8e3d4;
    --ink-soft: #b8b0a0;
    --ink-muted: #908878;
    --rule: #3a342a;
    --border: rgba(255, 255, 255, 0.12);
    --red: #e06b77;
    --accent: #e06b77;
    --blue: #8a89b8;
    --navy: #5a5980;
    --code-bg: #2a2620;
    /* v3.7.418: same gap-closing overrides as the explicit dark block above */
    --accent-faint: #3a2520;
    --ink-faint: #706a5a;
    --rule-soft: #2a2520;
    --green: #5fb872;
    --green-soft: #1f3220;
    /* v3.7.419: search-input dark tokens \u2014 same as explicit dark block */
    --search-input-bg: rgba(255, 255, 255, 0.06);
    --search-input-bg-focus: rgba(255, 255, 255, 0.12);
        /* v3.7.421: --red-bg-text — same as explicit dark block */
    --red-bg-text: #ffffff;
    color-scheme: dark;
  }
}
html.wtpp-theme-ready body,
html.wtpp-theme-ready .doc-body,
html.wtpp-theme-ready .landing-section,
html.wtpp-theme-ready .landing-hero {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .doc-body,
html[data-theme="dark"] .content,
html[data-theme="dark"] main,
html[data-theme="dark"] article {
  background: var(--paper);
  color: var(--ink);
}
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--ink); }
html[data-theme="dark"] a { color: var(--red); }
html[data-theme="dark"] a:visited { color: var(--blue); }
html[data-theme="dark"] .site-header { background: var(--paper); }
html[data-theme="dark"] .site-footer { background: var(--paper); border-top-color: var(--rule); }
/* v3.7.338: .header-title in the inlined per-page CSS hardcodes
   color: #000 because the blackletter title was designed for the cream
   header overlay. In dark mode the overlay becomes dark (per the
   v3.7.238 fix in wtpp-v238-fixes.css) so hardcoded black text becomes
   invisible. Only the <em> inside the title had a dark-mode override
   ("The" rendered correctly; "We" and "People" went black on dark).
   This rule adds the parent override so the entire title renders in
   --ink (light cream in dark mode) consistent with the em treatment. */
html[data-theme="dark"] .header-title { color: var(--ink) !important; }
html[data-theme="dark"] .header-title em { color: var(--ink) !important; }
/* v3.7.343: dark-mode header secondary text (tagline, eyebrow, meta
   block) read as too dark/dim against the flag background. The title
   was fixed in v3.7.338/342; these elements use the dimmer tokens
   (--ink-soft / --navy / --ink-muted) which lack contrast over the busy
   flag image in dark mode. Brighten them to clearly-light values while
   keeping a subtle hierarchy: tagline and meta numbers at full --ink,
   eyebrow and meta labels at the lighter --ink-soft. Covers explicit
   dark mode; the auto+system-dark equivalents are in the @media block. */
html[data-theme="dark"] .header-tagline { color: var(--ink) !important; }
html[data-theme="dark"] .header-tagline-eyebrow { color: var(--ink-soft) !important; }
html[data-theme="dark"] .header-meta-item { color: var(--ink-soft) !important; }
html[data-theme="dark"] .header-meta-item em { color: var(--ink-soft) !important; }
html[data-theme="dark"] .header-meta-item strong { color: var(--ink) !important; }
html[data-theme="dark"] code, html[data-theme="dark"] pre { background: var(--code-bg); color: var(--ink); }
html[data-theme="dark"] hr { border-color: var(--rule); }
html[data-theme="dark"] blockquote { border-left-color: var(--red); }
html[data-theme="dark"] table { border-color: var(--rule); }
html[data-theme="dark"] th, html[data-theme="dark"] td { border-color: var(--rule); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) body,
  html:not([data-theme="light"]):not([data-theme="dark"]) .doc-body,
  html:not([data-theme="light"]):not([data-theme="dark"]) .content,
  html:not([data-theme="light"]):not([data-theme="dark"]) main,
  html:not([data-theme="light"]):not([data-theme="dark"]) article {
    background: var(--paper);
    color: var(--ink);
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) h1,
  html:not([data-theme="light"]):not([data-theme="dark"]) h2,
  html:not([data-theme="light"]):not([data-theme="dark"]) h3,
  html:not([data-theme="light"]):not([data-theme="dark"]) h4 { color: var(--ink); }
  html:not([data-theme="light"]):not([data-theme="dark"]) .site-header,
  html:not([data-theme="light"]):not([data-theme="dark"]) .site-footer { background: var(--paper); }
  /* v3.7.338: same .header-title dark-mode override applied to auto+system-dark mode */
  html:not([data-theme="light"]):not([data-theme="dark"]) .header-title,
  html:not([data-theme="light"]):not([data-theme="dark"]) .header-title em { color: var(--ink); }
  /* v3.7.343: auto+system-dark equivalents of the header secondary-text brightening */
  html:not([data-theme="light"]):not([data-theme="dark"]) .header-tagline { color: var(--ink) !important; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .header-tagline-eyebrow { color: var(--ink-soft) !important; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .header-meta-item { color: var(--ink-soft) !important; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .header-meta-item em { color: var(--ink-soft) !important; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .header-meta-item strong { color: var(--ink) !important; }
}
.wtpp-theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9988;
  display: flex;
  background: var(--paper);
  border: 1.5px solid var(--red);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 6px var(--ov-black-10);
  font-family: 'Inconsolata', 'Courier New', monospace;
}
.wtpp-theme-btn {
  background: transparent;
  border: none;
  padding: 6px 9px;
  cursor: pointer;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  min-width: 30px;
  min-height: 30px;
}
.wtpp-theme-btn + .wtpp-theme-btn { border-left: 1px solid var(--rule); }
.wtpp-theme-btn svg { width: 14px; height: 14px; display: block; }
.wtpp-theme-btn:hover { background: var(--rule); color: var(--ink); }
.wtpp-theme-btn:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.wtpp-theme-btn[aria-pressed="true"] {
  /* v3.7.397: routed through theme-stable var(--red-bg) for
     consistent white-text-on-red contrast across themes. */
  background: var(--red-bg, var(--red-bg));
  color: var(--pure-white);
}
html[data-theme="dark"] .wtpp-theme-btn[aria-pressed="true"] { color: var(--pure-white); }
@media (max-width: 480px) {
  .wtpp-theme-toggle { top: 8px; right: 8px; }
  .wtpp-theme-btn { min-width: 28px; min-height: 28px; padding: 5px 7px; }
}
.in-iframe .wtpp-theme-toggle { display: none !important; }
@media print {
  .wtpp-theme-toggle { display: none !important; }
  html[data-theme="dark"] {
    --glass-surface: rgba(245, 241, 234, 0.78) !important;
    --paper: #fff !important;
    --ink: #000 !important;
    --ink-soft: #333 !important;
    --ink-muted: #555 !important;
  }
}

/* v3.7.359 (Batch 1, accessibility): honor a user's reduced-motion request
 * site-wide. Neutralizes the menu/icon transitions, the bookmark-icon flash,
 * and smooth scrolling. !important is the standard pattern here so this wins
 * regardless of stylesheet load order. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* v3.7.370: prevent horizontal page overflow on mobile. The v3.7.368
   screenshot showed hero title text cut off on the right edge ("Universal
   healthca" instead of "Universal healthcare,") — the page was extending
   past the visible viewport by ~80px. The root cause is not yet pinpointed
   (probably the hero's clamped large font + some container without a hard
   width cap on mobile), but the defensive fix is sound: clip horizontal
   overflow on the body so nothing extends past the viewport edge. Vertical
   scroll behavior is unaffected. position:fixed children (notably the
   header icon-strip popover) work correctly because they anchor to the
   viewport, not to the body-with-clipping. */
@media (max-width: 720px) {
  body { overflow-x: hidden; }
}


/* v3.7.371: at narrow viewport widths (≤720px), the absolute-positioned
   icon strip at top:10/right:10-16 overlaps the "We The People" title in
   the brand row because both sit at the same y-coordinate range. Push the
   brand row's content down with extra padding-top so the title starts
   BELOW the icon strip. The strip's vertical footprint is ~52px (top:10 +
   icon height 32 + a few px padding), so padding-top:56 leaves a tiny
   buffer. Jason's resized-desktop screenshots showed the icon strip
   visibly overlapping the title's right portion. */
@media (max-width: 720px) {
  .header-brand-row { padding-top: 56px !important; }
}


/* v3.7.372: root-cause fix for horizontal page overflow on mobile.
   The body is `display: flex; flex-direction: column` (set in index.html
   inline styles). In flex layout, items default to `min-width: auto` on
   the cross axis, which means a flex item CANNOT shrink below its
   min-content width. Any descendant with content wider than the viewport
   — a long URL, a wide image, certain long unbreakable strings, or even
   a hero title at a large font size with words that the browser is
   reluctant to break — forces the entire flex item (and thus the body)
   wider than the viewport.

   Setting `min-width: 0` on body's direct children removes this floor,
   letting flex items shrink to their container. Combined with normal
   text wrapping behavior in the descendants, the result is that long
   content wraps within the viewport instead of overflowing it.

   This is the underlying cause of the symptoms in the v3.7.368 mobile
   screenshot Jason posted: hero title text cut off at the right edge
   ("Universal healthca" / "care fo" / "per year ba"), and popover labels
   cut off the same way ("Tax Cale" / "Wage Ca" / "Documen"). Both
   symptoms came from .site-header-main and main extending past the
   viewport because their flex-item min-width: auto wouldn't let them
   shrink. With min-width: 0, both fit within the viewport and their
   contents wrap properly.

   The v3.7.370 `body { overflow-x: hidden }` defensive backstop is kept
   in place — it now has nothing to clip when the root cause is fixed,
   but it remains as protection against any future content that might
   slip through. */
body > * { min-width: 0; }

/* v3.7.372: as a belt-and-suspenders measure, also let the hero title
   break very long words gracefully if a future content edit puts an
   unbreakable string in there. Doesn't affect normal English wrapping. */
.landing-hero-title {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* v3.7.382 — DOC-INFO PANEL DARK MODE (iframe-loaded doc-mirror pages)
 *
 * The .doc-info card at the top of every auto-generated doc-mirror page
 * had a hardcoded `background: #f9f5ef` in build_web_html.py (since
 * v3.7.125). In light mode it rendered as cream-on-cream — fine. In
 * dark mode the title and body text auto-flipped to light via var(--ink)
 * but the background stayed cream, producing invisible content. Jason
 * saw a washed-out DOCUMENT INFORMATION card inside the homepage modal.
 *
 * v3.7.382 updated build_web_html.py to use `var(--paper-shade, #f9f5ef)`
 * so future regenerations are correct. But the generator is in safety
 * mode (v3.7.272+) requiring --really-regenerate to rebuild the 128
 * pages, which would wipe in-place patches. Instead, this rule overrides
 * the inline value at runtime via specificity:
 *   html[data-theme="dark"] .doc-info  →  (0,2,1)
 *   inline .doc-info                    →  (0,1,0)
 * (0,2,1) > (0,1,0) so no !important needed. */
html[data-theme="dark"] .doc-info {
  background: var(--paper-shade);
  border-color: var(--rule);
}