/* v3.7.292: Theme/tone restructure.
   - Fixes header overlay in auto+system-dark mode
   - Adds header overlay rules for neutral tone (light + dark + auto)
   - Hides any leftover floating tone toggle (safety net)
   - Styles the in-page accessibility tone toggle */

/* 1. Header overlay — auto mode + system dark.
   The original CSS overrode the cream gradient for
   html[data-theme="dark"] only; auto+system-dark was missed. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) .site-header-main::before {
    background: linear-gradient(180deg,
      var(--glass-surface) 0%,
      var(--glass-surface) 100%) !important;
  }
}

/* 2. Header overlay — neutral tone light.
   Cool light-gray gradient matches the neutral --paper. */
html[data-tone="neutral"] .site-header-main::before {
  background: linear-gradient(180deg,
    var(--glass-surface) 0%,
    var(--glass-surface) 100%) !important;
}

/* 3. Header overlay — neutral tone explicit dark. */
html[data-tone="neutral"][data-theme="dark"] .site-header-main::before {
  background: linear-gradient(180deg,
    var(--glass-surface) 0%,
    var(--glass-surface) 100%) !important;
}

/* 4. Header overlay — neutral tone auto + system dark. */
@media (prefers-color-scheme: dark) {
  html[data-tone="neutral"]:not([data-theme="light"]):not([data-theme="dark"]) .site-header-main::before {
    background: linear-gradient(180deg,
      var(--glass-surface) 0%,
      var(--glass-surface) 100%) !important;
  }
}

/* 5. Safety hide for any floating toggle that may slip through.
   The v3.7.292 patched build() doesn't create one, but if a
   page was missed in the patch, hide it. The .wtpp-tone-toggle
   class is reused by the in-page toggle below; this rule
   targets only the floating variant which has position:fixed
   inline via the original v3.7.291 styles. The .in-page
   modifier opts back IN to display.
   v3.7.376: also exclude .in-popover. The v3.7.374 palette
   relocation added a new .wtpp-tone-toggle.in-popover variant
   inside the Display preferences popover, and this safety rule
   was silently hiding those buttons (Jason reported the Palette
   section heading visible but no buttons under it). */
.wtpp-tone-toggle:not(.in-page):not(.in-popover) {
  display: none !important;
}

/* 6. In-page tone toggle — sits in-flow on accessibility.html. */
.wtpp-tone-toggle.in-page {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  display: inline-flex;
  margin: 8px 0 16px;
  background: var(--paper, var(--paper-98));
  border: 1.5px solid var(--red, var(--red));
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--mono, "Inconsolata", monospace);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 1px 2px var(--ov-black-06);
}
.wtpp-tone-toggle.in-page .wtpp-tone-button {
  padding: 8px 14px;
  line-height: 1.2;
}