/* v3.7.236: Consolidated header icon strip (theme, TTS, language, search).
   Hides the v3.7.233 floating theme toggle and the v3.7.231 TTS badge —
   their functionality is now triggered from the header icons instead. */

.wtpp-theme-toggle { display: none !important; }
.wtpp-tts-badge { display: none !important; }

.wtpp-header-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.wtpp-header-icon-wrap {
  position: relative;
}

/* v3.7.255: legacy .wtpp-header-icon-btn cosmetic CSS absorbed into design
   system. The 4 header icon buttons (theme/TTS/language/search) now style
   purely via .wtpp-btn--subtle --icon. Popover-open state handled by the
   design system's [aria-expanded="true"] rule added in this iteration. */

.wtpp-header-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--paper, var(--paper));
  /* v3.7.384: border color changed from var(--rule) to var(--ink-muted)
     for better visibility. The previous --rule color (light: #ede7dd,
     dark: #3a342a) was too close to the popover background in both
     themes — the border existed but disappeared into the cream/dark
     background. --ink-muted (light: var(--ink-muted), dark: #908878) provides
     a thin but visible frame. Width reduced from 1.5px to 1px to keep
     the look slim per Jason's example. */
  border: 1px solid var(--ink-muted, var(--ink-muted));
  border-radius: 4px;
  box-shadow: 0 4px 14px var(--ov-black-15);
  padding: 14px;
  /* v3.7.620: standard menu-window width = the Help menu's width (the base
     320px the Help popover renders at, since it has no width override). Every
     menu window now shares it. min(...) lets it shrink responsively on
     narrow screens so it never overflows the viewport. */
  width: min(320px, calc(100vw - 24px));
  max-width: 320px;
  min-width: 0;
  display: none;
  z-index: 9988;
  font-family: 'Inconsolata', 'Courier New', monospace;
  color: var(--ink, var(--ink));
}

.wtpp-header-popover.open { display: block; }

.wtpp-header-popover h3 {
  margin: 0 0 10px 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft, var(--ink-soft));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Inconsolata', 'Courier New', monospace;
}

/* Theme popover — three-button group */
.wtpp-popover-theme-buttons {
  display: flex;
  gap: 4px;
}
/* v3.7.258: .wtpp-popover-theme-btn cosmetic CSS absorbed into design system.
   Only layout-specific properties retained: flex:1 (evenly splits the
   AUTO/LIGHT/DARK row width) and text-transform:uppercase (caps display).
   The :hover/:focus outline rule was design noise and replaced by the
   design system's proper :focus-visible treatment. */
.wtpp-popover-theme-btn {
  flex: 1;
  text-transform: uppercase;
}

/* v3.7.374: Palette section inside the Display preferences popover.
   Sits below the Color Theme row with its own heading + button group.
   Uses .wtpp-tone-button class (shared with the accessibility page's
   in-page toggle, which is no longer rendered) so the styling cascades
   match if either rendering target re-emerges. */
.wtpp-popover-palette-heading {
  margin-top: 14px !important;
}
.wtpp-tone-toggle.in-popover {
  /* v3.7.379: explicit overrides for the v3.7.291 base
     .wtpp-tone-toggle rule which has position:fixed top:16px
     right:96px to float the toggle in the page corner.
     v3.7.386: gap reduced from 4px to 1px to match the tight
     row spacing of the Color Theme button group above. */
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* v3.7.386: palette buttons restyled to match the Color Theme button
   row style above. Per Jason: the previous filled-button look
   ("Neutral (Default)" with red filled background when active) was
   visually inconsistent with the Color Theme rows (subtle left-border
   accent + red text on active). Now both sections share the same
   list-row treatment for visual cohesion within the Display
   preferences popover. Selector mirrors .wtpp-popover-theme-buttons
   .wtpp-popover-theme-btn. The active modifier is .wtpp-tone-active
   (class set by buildThemePopover's wireToneButtons logic) rather
   than aria-pressed, but the visual treatment is identical. */
.wtpp-tone-toggle.in-popover .wtpp-tone-button {
  flex: none;
  width: 100%;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0 3px 3px 0;
  padding: 9px 12px;
  color: var(--ink, var(--ink));
  font-family: "Inconsolata", "Courier New", Consolas, monospace;
  font-size: 13px;
  transition: border-color .12s ease, background .12s ease,
              padding-left .12s ease, color .12s ease;
}
.wtpp-tone-toggle.in-popover .wtpp-tone-button:hover,
.wtpp-tone-toggle.in-popover .wtpp-tone-button:focus {
  border-left-color: var(--red, var(--red));
  background: var(--paper-shade, var(--ov-black-06));
  padding-left: 15px;
  outline: none;
}
.wtpp-tone-toggle.in-popover .wtpp-tone-button.wtpp-tone-active {
  border-left: 3px solid var(--red, var(--red));
  color: var(--red, var(--red));
  font-weight: 700;
  background: var(--paper-shade, var(--ov-black-06));
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--red) 9%, transparent),
              transparent);
}

/* TTS popover */
/* v3.7.258: .wtpp-popover-tts-action cosmetic CSS absorbed into design
   system. Only text-transform:uppercase retained (caps display). The
   :hover blue treatment was dead code — design system's
   .wtpp-btn--primary:hover at higher cascade position sets bg to ink,
   defeating it. The :disabled rule is covered by .wtpp-btn:disabled. */
.wtpp-popover-tts-action {
  text-transform: uppercase;
}
.wtpp-popover-tts-note,
.wtpp-popover-lang-note {
  font-size: 11px;
  color: var(--ink-muted, var(--ink-muted));
  margin: 8px 0 0 0;
  line-height: 1.4;
}

/* v3.7.256: .lang-option dead-code block dropped — fully shadowed by
   the wtpp-i18n-styles block (added v3.7.237) which has identical
   specificity and wins cascade order. */

/* Search popover */
.wtpp-popover-search .header-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.wtpp-popover-search .header-search-input {
  flex: 1;
  padding: 8px 8px 8px 32px;
  border: 1.5px solid var(--rule, var(--rule));
  border-radius: 3px;
  background: var(--paper, var(--paper));
  color: var(--ink, var(--ink));
  font-family: 'Inconsolata', 'Courier New', monospace;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}
.wtpp-popover-search .header-search-input:focus {
  outline: 2px solid var(--blue, var(--blue));
  outline-offset: 1px;
  border-color: var(--red, var(--red));
}
.wtpp-popover-search .header-search-icon {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--ink-muted, var(--ink-muted));
  pointer-events: none;
}

/* v3.7.384: mobile icon strip layout — moved to
   wtpp-v313-header-icons-mobile-visible.css in v3.7.385 to consolidate
   with the long-standing rules there. wtpp-v313 is now the single
   source of truth for `.site-header-main > .wtpp-header-icons`
   positioning. */
@media (max-width: 540px) {
  /* v3.7.371: position:absolute right:0 anchoring — the popover anchors
     below its trigger icon. The wtpp-popover-reposition.js script shifts
     any popover that would extend past either viewport edge.
     v3.7.384: switched to left:0 because icons became left-aligned in v3.7.385.
     v3.7.387: REVERTED back to right:0. The left:0 anchoring made popovers
     for right-side icons (history, menu) extend past the viewport's right
     edge, which the reposition script handles less reliably than the
     right:0 + left-side-icon case it was originally designed for. With
     right:0, the popover extends LEFTWARD from the trigger icon's right
     edge — right-side icons keep the popover comfortably inside the
     viewport, and leftmost-icon overflow is handled by the script's
     translateX shift exactly as designed. (Jason's history popover
     clipping screenshot was the v3.7.384 left:0 anchoring problem.)
     v3.7.387: also bumped min-width from 0 to 220px so labels like
     "Warm (Easier on Eye Strain)" don't wrap to 4 cramped lines on a
     content-sized popover. max-width still caps at viewport so it can't
     exceed the screen. */
  .wtpp-header-popover {
    min-width: 220px;
    max-width: calc(100vw - 24px);
    right: 0;
    left: auto;
  }
  .wtpp-header-icon-btn {
    width: 32px;
    height: 32px;
  }
  .wtpp-header-icon-btn svg {
    width: 16px;
    height: 16px;
  }
}

.in-iframe .wtpp-header-icons { display: none !important; }
@media print { .wtpp-header-icons { display: none !important; } }

/* v3.7.346 (Option B): audio controls inside the header popover. */
.wtpp-popover-tts-progress {
  font-family: "Inconsolata", "Courier New", Consolas, monospace;
  font-size: 12px;
  color: var(--ink-soft, var(--ink-soft));
  margin: 6px 0 10px;
}
.wtpp-popover-tts-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.wtpp-popover-tts-ctrl { flex: 0 0 auto; }
.wtpp-popover-tts-play { min-width: 44px; }
.wtpp-popover-tts-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  /* v3.7.388: removed the extra padding-right (was 6px in v3.7.376,
     bumped to 14px in v3.7.384). The popover container already provides
     14px padding on all sides, so the dropdowns already had 14px
     breathing room from the popover border. The extra 14px on this row
     was double-padding that ate dropdown width unnecessarily, making
     the Voice/Speed selects appear undersized per Jason's "dropdowns
     don't resize appropriately" feedback. With this removed the
     selects use the full popover content width. */
}
.wtpp-popover-tts-label {
  font-family: "Inconsolata", "Courier New", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted, var(--ink-muted));
  min-width: 46px;
}
.wtpp-popover-tts-select {
  /* v3.7.388: width:100% added as a defensive explicit width so the
     select fills its flex row whether or not flex:1 1 auto resolves
     cleanly across browsers. Combined with min-width:0 + max-width:100%
     this also lets the select shrink below its intrinsic content width
     when the popover is narrow on mobile. */
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-size: 12px;
  padding: 5px 6px;
  background: var(--paper);
  color: var(--ink, var(--ink));
  border: 1px solid var(--rule, var(--paper-83));
  border-radius: 3px;
  font-family: "Inconsolata", "Courier New", Consolas, monospace;
  box-sizing: border-box;
}

/* v3.7.346: the header popover is now the single audio surface, so the
 * legacy floating badge and bottom bar are hidden. The engine still
 * references their internal elements (harmless) but they are not shown. */
.wtpp-tts-badge { display: none !important; }
.wtpp-tts-bar { display: none !important; }

/* v3.7.347: the audio control row now holds 7 buttons (page/paragraph/
 * sentence skip on each side of play). Tighten spacing and widen the
 * popover so they fit on one centered row. */
.wtpp-popover-tts { min-width: 304px; }
.wtpp-popover-tts-controls {
  gap: 4px;
  justify-content: center;
  flex-wrap: nowrap;
}
.wtpp-popover-tts-ctrl {
  min-width: 30px;
  padding-left: 5px;
  padding-right: 5px;
}
.wtpp-popover-tts-play { min-width: 40px; }

/* v3.7.349: Accent-Left popover treatment (Mockup C) — HEADER ACCENT.
 * A short red rule beneath every popover's title, applied uniformly to
 * all icon-menu popovers through their shared <h3>. */
.wtpp-header-popover h3 { margin-bottom: 9px; }
.wtpp-header-popover h3::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-top: 6px;
  background: var(--red, var(--red));
  border-radius: 2px;
}

/* v3.7.351: Accent-Left popover treatment (Mockup C) — Color Theme options,
 * matching the site menu. Converts the horizontal AUTO/LIGHT/DARK button
 * group to a vertical list of accent-left rows; the active theme
 * (aria-pressed="true") shows the red rail + red label + tint. */
.wtpp-popover-theme-buttons {
  flex-direction: column;
  gap: 1px;
}
.wtpp-popover-theme-buttons .wtpp-popover-theme-btn {
  flex: none;
  width: 100%;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0 3px 3px 0;
  padding: 9px 12px;
  color: var(--ink, var(--ink));
  font-family: "Inconsolata", "Courier New", Consolas, monospace;
  font-size: 13px;
  transition: border-color .12s ease, background .12s ease,
              padding-left .12s ease, color .12s ease;
}
.wtpp-popover-theme-buttons .wtpp-popover-theme-btn:hover,
.wtpp-popover-theme-buttons .wtpp-popover-theme-btn:focus {
  border-left-color: var(--red, var(--red));
  background: var(--paper-shade, var(--ov-black-06));
  padding-left: 15px;
  outline: none;
}
.wtpp-popover-theme-buttons .wtpp-popover-theme-btn[aria-pressed="true"] {
  border-left: 3px solid var(--red, var(--red));
  color: var(--red, var(--red));
  font-weight: 700;
  background: var(--paper-shade, var(--ov-black-06));
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--red) 9%, transparent), transparent);
}

/* v3.7.387 — ISSUE 2: search input fills its popover container.
   The .header-search-input has its own width rule for its in-nav appearance.
   When the JS detaches it from .page-nav and re-attaches it inside
   .wtpp-popover-search, the popover container is narrow and the input
   keeps its original width — rendering as a tiny ~80px box per Jason's
   screenshot. Force full-width inside the popover so the input expands
   to fill the available space. */
.wtpp-popover-search .header-search-wrap {
  width: 100%;
  box-sizing: border-box;
}
.wtpp-popover-search .header-search-input {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* ============================================================
   v3.7.551 / v3.7.552: Menu position preference — LEFT (opt-in).
   Applies ONLY when the user selects "Left" (sets
   html[data-menu-position="left"]). The default "right" layout
   sets no attribute and is therefore completely untouched at
   every width — zero risk to the current header.

   v3.7.552: the icon-strip ORDER reversal applies at ALL widths
   (rule below, outside the media query) so the Site menu / icon
   menu reflects the setting at reduced/mobile widths too. At
   reduced widths the strip stays exactly where the screenshot
   shows it (left-aligned) and the brand row stays stacked as-is;
   only the icon order flips for Left (Site menu to the outer-left).

   The strip-position move, popover anchoring and brand-row mirror
   stay DESKTOP-only (>=721px): on mobile the strip attaches to
   .site-header-main and the brand row stacks in a column, so those
   parts are left as the screenshot. Built without browser
   rendering — needs visual testing.
   ============================================================ */
/* Icon order reflects the setting at ALL widths (desktop + reduced).
   row-reverse flips the children in place: the Site menu (last DOM
   child) becomes the outer icon on the menu side, the strip box
   itself stays put. Right (default) sets no attribute, unchanged. */
html[data-menu-position="left"] .wtpp-header-icons {
  flex-direction: row-reverse;
}

@media (min-width: 721px) {
  /* Desktop: also move the strip to the left edge. */
  html[data-menu-position="left"] .page-nav {
    justify-content: flex-start !important;
  }
  html[data-menu-position="left"] .wtpp-header-icons {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  /* Popovers anchor from the left edge now that the icons are left. */
  html[data-menu-position="left"] .wtpp-header-popover {
    right: auto;
    left: 0;
  }
  /* Title row mirrors: title -> right, meta -> left (space-between
     keeps them apart); tagline + brand text right-aligned. */
  html[data-menu-position="left"] .header-title-row {
    flex-direction: row-reverse;
  }
  html[data-menu-position="left"] .header-brand-row,
  html[data-menu-position="left"] .header-tagline {
    text-align: right;
  }
}

/* v3.7.610: make header popovers (Display preferences, etc.) scroll on short screens, like the help panel. */
/* v3.7.618: common maximum height for every menu window. The prior cap
   (100vh - 130px) let a long menu — e.g. Display settings — run nearly the
   full viewport height. min(...) keeps a single shared ceiling so any menu
   that exceeds it scrolls internally instead of growing tall. */
/* v3.7.620: standard menu-window max-height = the Site Menu's current height.
   The Site Menu (16 links) is the tallest menu and currently renders capped at
   520px, scrolling internally; every menu window now shares that ceiling.
   min(...) keeps it within the viewport on short screens, and overflow-y:auto
   adds a scrollbar only when a menu's content exceeds the cap. */
/* v3.7.621: standard menu-window max-height now fits the full Site Menu.
   The Site Menu (16 links + heading) is ~560-580px tall; the prior 520px cap
   clipped its last item(s) behind a scrollbar. The ceiling is raised to 640px
   so every Site Menu option is visible with no scrollbar, and it remains the
   tallest menu — so it sets the standard. min(...) keeps the window within the
   viewport on short screens (where it reacts by capping and scrolling), and
   overflow-y:auto adds a scrollbar only when content actually exceeds the cap. */
.wtpp-header-popover{max-height:min(580px, calc(100vh - 100px));overflow-y:auto;overflow-x:hidden;}
/* v3.7.629: the Site menu window's height (~565px: its sixteen links plus the
   heading and padding) is the MAXIMUM a main-menu window expands to. Menus size
   to their own content, so a short menu stays short (no forced empty space);
   once a window's content would exceed this cap, the border freezes and
   overflow-y:auto adds a scrollbar. The 580px cap sits just above the Site
   menu's own height so the Site menu itself always shows in full without a
   scrollbar, and still shrinks to the viewport on short screens. */