/* =========================================================
   Blum Accessibility — Core widget styles
   ========================================================= */

:root {
  --blum-a11y-color:       #2563eb;
  --blum-a11y-color-hover: #1d4ed8;
  --blum-a11y-bg:          #ffffff;
  --blum-a11y-text:        #1e293b;
  --blum-a11y-border:      #e2e8f0;
  --blum-a11y-radius:      12px;
  --blum-a11y-shadow:      0 4px 24px rgba(0,0,0,.15);
  --blum-a11y-z:           999999;
  --blum-a11y-panel-w:     300px;

  /* High contrast — forced flat two-tone palettes (standalone + combined
     with dark mode). Kept as variables so both palettes stay structurally
     parallel and are easy to retheme without touching selectors. */
  --blum-a11y-hc-bg:         #ffffff;
  --blum-a11y-hc-text:       #000000;
  --blum-a11y-hc-link:       #0000ff;
  --blum-a11y-hc-btn-bg:     #000000;
  --blum-a11y-hc-btn-text:   #ffffff;
  --blum-a11y-hc-field-bg:   #ffffff;
  --blum-a11y-hc-field-bd:   #000000;

  --blum-a11y-hcd-bg:        #000000;
  --blum-a11y-hcd-text:      #ffffff;
  --blum-a11y-hcd-link:      #ffff00;
  --blum-a11y-hcd-btn-bg:    #ffffff;
  --blum-a11y-hcd-btn-text:  #000000;
  --blum-a11y-hcd-field-bg:  #000000;
  --blum-a11y-hcd-field-bd:  #ffffff;
}

/* ── Widget-level isolation reset ────────────────────── */
#blum-a11y-widget,
#blum-a11y-widget * {
  box-sizing: border-box !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Floating trigger button ─────────────────────────── */
#blum-a11y-widget .blum-a11y-trigger {
  position: fixed !important;
  z-index: var(--blum-a11y-z) !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
  background: var(--blum-a11y-color) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--blum-a11y-shadow) !important;
  transition: background .2s, transform .15s !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
}
#blum-a11y-widget .blum-a11y-trigger:hover,
#blum-a11y-widget .blum-a11y-trigger:focus-visible {
  background: var(--blum-a11y-color-hover) !important;
}
#blum-a11y-widget .blum-a11y-trigger:focus-visible {
  outline: 3px solid var(--blum-a11y-color) !important;
  outline-offset: 3px !important;
}

/* ── Position helpers ────────────────────────────────── */
#blum-a11y-widget.blum-a11y-widget--bottom-right .blum-a11y-trigger,
#blum-a11y-widget.blum-a11y-widget--bottom-right .blum-a11y-panel { bottom: 24px !important; right: 24px !important; left: auto !important; top: auto !important; }
#blum-a11y-widget.blum-a11y-widget--bottom-left  .blum-a11y-trigger,
#blum-a11y-widget.blum-a11y-widget--bottom-left  .blum-a11y-panel { bottom: 24px !important; left: 24px !important; right: auto !important; top: auto !important; }
#blum-a11y-widget.blum-a11y-widget--top-right    .blum-a11y-trigger,
#blum-a11y-widget.blum-a11y-widget--top-right    .blum-a11y-panel { top: 24px !important; right: 24px !important; left: auto !important; bottom: auto !important; }
#blum-a11y-widget.blum-a11y-widget--top-left     .blum-a11y-trigger,
#blum-a11y-widget.blum-a11y-widget--top-left     .blum-a11y-panel { top: 24px !important; left: 24px !important; right: auto !important; bottom: auto !important; }

/* ── Panel (floating mode) ───────────────────────────── */
#blum-a11y-widget.blum-a11y-widget--floating .blum-a11y-panel {
  position: fixed !important;
  z-index: var(--blum-a11y-z) !important;
  width: var(--blum-a11y-panel-w) !important;
  max-height: 80vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--blum-a11y-bg) !important;
  border: 1px solid var(--blum-a11y-border) !important;
  border-radius: var(--blum-a11y-radius) !important;
  box-shadow: var(--blum-a11y-shadow) !important;
  transform: translateY(8px) scale(.97) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .2s, transform .2s !important;
  margin-bottom: 64px !important;
}
#blum-a11y-widget.blum-a11y-widget--floating .blum-a11y-panel.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* ── Panel (slide-in mode) ───────────────────────────── */
#blum-a11y-widget.blum-a11y-widget--panel .blum-a11y-panel {
  position: fixed !important;
  z-index: var(--blum-a11y-z) !important;
  top: 0 !important;
  width: var(--blum-a11y-panel-w) !important;
  height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--blum-a11y-bg) !important;
  border: 1px solid var(--blum-a11y-border) !important;
  box-shadow: var(--blum-a11y-shadow) !important;
  transform: translateX(100%) !important;
  transition: transform .25s ease !important;
}
#blum-a11y-widget.blum-a11y-widget--panel.blum-a11y-widget--bottom-right .blum-a11y-panel,
#blum-a11y-widget.blum-a11y-widget--panel.blum-a11y-widget--top-right    .blum-a11y-panel { right: 0 !important; }
#blum-a11y-widget.blum-a11y-widget--panel.blum-a11y-widget--bottom-left  .blum-a11y-panel,
#blum-a11y-widget.blum-a11y-widget--panel.blum-a11y-widget--top-left     .blum-a11y-panel { left: 0 !important; transform: translateX(-100%) !important; }
#blum-a11y-widget.blum-a11y-widget--panel .blum-a11y-panel.is-open { transform: translateX(0) !important; }

/* ── Panel internals ─────────────────────────────────── */
#blum-a11y-widget .blum-a11y-panel__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px 12px !important;
  border-bottom: 1px solid var(--blum-a11y-border) !important;
  background: transparent !important;
  margin: 0 !important;
}
#blum-a11y-widget .blum-a11y-panel__title {
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--blum-a11y-text) !important;
  line-height: 1.4 !important;
}
#blum-a11y-widget .blum-a11y-panel__close {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--blum-a11y-text) !important;
  line-height: 1 !important;
  padding: 4px !important;
  border-radius: 4px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#blum-a11y-widget .blum-a11y-panel__close:hover {
  background: var(--blum-a11y-border) !important;
}
#blum-a11y-widget .blum-a11y-panel__body {
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: transparent !important;
  margin: 0 !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
#blum-a11y-widget .blum-a11y-panel__footer {
  padding: 12px 16px !important;
  border-top: 1px solid var(--blum-a11y-border) !important;
  background: transparent !important;
  margin: 0 !important;
}

/* ── Controls ────────────────────────────────────────── */
#blum-a11y-widget .blum-a11y-control__btn {
  position: relative !important;
  width: 100% !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: 1px solid var(--blum-a11y-border) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: var(--blum-a11y-text) !important;
  font-size: .9rem !important;
  font-weight: 400 !important;
  transition: background .15s, border-color .15s !important;
  text-align: left !important;
  text-decoration: none !important;
  overflow: visible !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
}
#blum-a11y-widget .blum-a11y-control__btn:hover {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
}
#blum-a11y-widget .blum-a11y-control__btn[aria-pressed="true"] {
  background: var(--blum-a11y-color) !important;
  background-color: var(--blum-a11y-color) !important;
  border-color: var(--blum-a11y-color) !important;
  color: #fff !important;
}
#blum-a11y-widget .blum-a11y-control__btn:focus-visible {
  outline: 3px solid var(--blum-a11y-color) !important;
  outline-offset: 2px !important;
}
#blum-a11y-widget .blum-a11y-control__icon {
  font-style: normal !important;
  width: 22px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Tooltip on hover ────────────────────────────────── */
#blum-a11y-widget .blum-a11y-control__btn[data-description]:hover::after {
  content: attr(data-description);
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #1e293b !important;
  background-color: #1e293b !important;
  color: #f8fafc !important;
  font-size: .75rem !important;
  line-height: 1.4 !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  white-space: normal !important;
  width: 220px !important;
  text-align: center !important;
  pointer-events: none !important;
  z-index: 10 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
  border: none !important;
}
#blum-a11y-widget .blum-a11y-control__btn[data-description]:hover::before {
  content: '' !important;
  position: absolute !important;
  bottom: calc(100% + 2px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 6px solid transparent !important;
  border-top-color: #1e293b !important;
  pointer-events: none !important;
  z-index: 10 !important;
  background: none !important;
}

/* ── Stepper (text-size / reading-guide) ─────────────── */
#blum-a11y-widget .blum-a11y-control--stepper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  border: 1px solid var(--blum-a11y-border) !important;
  border-radius: 8px !important;
  background: transparent !important;
}
#blum-a11y-widget .blum-a11y-control--stepper .blum-a11y-control__label {
  font-size: .9rem !important;
  color: var(--blum-a11y-text) !important;
  font-weight: 400 !important;
}
#blum-a11y-widget .blum-a11y-stepper {
  display: flex !important;
  gap: 4px !important;
}
#blum-a11y-widget .blum-a11y-stepper__btn {
  padding: 6px 10px !important;
  margin: 0 !important;
  border: 1px solid var(--blum-a11y-border) !important;
  border-radius: 6px !important;
  background: none !important;
  background-color: transparent !important;
  cursor: pointer !important;
  font-size: .85rem !important;
  font-weight: 400 !important;
  color: var(--blum-a11y-text) !important;
  transition: background .15s !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
#blum-a11y-widget .blum-a11y-stepper__btn:hover {
  background: var(--blum-a11y-color) !important;
  background-color: var(--blum-a11y-color) !important;
  color: #fff !important;
  border-color: var(--blum-a11y-color) !important;
}

/* ── Stepper active state ─────────────────────────────── */
#blum-a11y-widget .blum-a11y-control--stepper.is-active {
  background: var(--blum-a11y-color) !important;
  background-color: var(--blum-a11y-color) !important;
  border-color: var(--blum-a11y-color) !important;
  color: #fff !important;
}
#blum-a11y-widget .blum-a11y-control--stepper.is-active .blum-a11y-control__label,
#blum-a11y-widget .blum-a11y-control--stepper.is-active .blum-a11y-control__toggle-label {
  color: #fff !important;
}
#blum-a11y-widget .blum-a11y-control--stepper.is-active .blum-a11y-stepper__btn {
  border-color: rgba(255,255,255,.4) !important;
  color: #fff !important;
  background: none !important;
  background-color: transparent !important;
}
#blum-a11y-widget .blum-a11y-control--stepper.is-active .blum-a11y-stepper__btn:hover {
  background: rgba(255,255,255,.2) !important;
  background-color: rgba(255,255,255,.2) !important;
}

/* ── Tabs ────────────────────────────────────────────── */
#blum-a11y-widget .blum-a11y-tabs {
  display: flex !important;
  border-bottom: 1px solid var(--blum-a11y-border) !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 16px !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
}
#blum-a11y-widget .blum-a11y-tab {
  padding: 10px 16px !important;
  margin: 0 0 -1px !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  cursor: pointer !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  color: var(--blum-a11y-text) !important;
  opacity: .6 !important;
  transition: opacity .15s, border-color .15s !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
}
#blum-a11y-widget .blum-a11y-tab:hover { opacity: .85 !important; }
#blum-a11y-widget .blum-a11y-tab.is-active,
#blum-a11y-widget .blum-a11y-tab[aria-selected="true"] {
  opacity: 1 !important;
  border-bottom-color: var(--blum-a11y-color) !important;
  color: var(--blum-a11y-color) !important;
}
#blum-a11y-widget .blum-a11y-tab:focus-visible {
  outline: 3px solid var(--blum-a11y-color) !important;
  outline-offset: -2px !important;
}

/* ── Profile tab panels ──────────────────────────────── */
#blum-a11y-widget [role="tabpanel"]:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#blum-a11y-widget [role="tabpanel"][hidden] { display: none !important; }

/* ── Profile buttons ─────────────────────────────────── */
#blum-a11y-widget .blum-a11y-profile-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: 1px solid var(--blum-a11y-border) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  color: var(--blum-a11y-text) !important;
  text-align: left !important;
  transition: background .15s, border-color .15s !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
}
#blum-a11y-widget .blum-a11y-profile-btn:hover {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border-color: var(--blum-a11y-color) !important;
}
#blum-a11y-widget .blum-a11y-profile-btn[aria-pressed="true"] {
  background: var(--blum-a11y-color) !important;
  background-color: var(--blum-a11y-color) !important;
  border-color: var(--blum-a11y-color) !important;
  color: #fff !important;
}
#blum-a11y-widget .blum-a11y-profile-btn:focus-visible {
  outline: 3px solid var(--blum-a11y-color) !important;
  outline-offset: 2px !important;
}
#blum-a11y-widget .blum-a11y-profile-btn__icon {
  width: 36px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--blum-a11y-color) !important;
}
#blum-a11y-widget .blum-a11y-profile-btn__icon svg { width: 22px !important; height: 22px !important; }
#blum-a11y-widget .blum-a11y-profile-btn[aria-pressed="true"] .blum-a11y-profile-btn__icon { color: #fff !important; }
#blum-a11y-widget .blum-a11y-profile-btn__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
#blum-a11y-widget .blum-a11y-profile-btn__name {
  display: block !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
#blum-a11y-widget .blum-a11y-profile-btn__desc {
  display: block !important;
  font-size: .75rem !important;
  opacity: .75 !important;
  line-height: 1.3 !important;
}
#blum-a11y-widget .blum-a11y-profile-btn[aria-pressed="true"] .blum-a11y-profile-btn__desc {
  opacity: .9 !important;
}

/* ── Color Filters control ───────────────────────────── */
#blum-a11y-widget .blum-a11y-control--color-filters {
  border: 1px solid var(--blum-a11y-border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  background: transparent !important;
  margin: 0 !important;
}
#blum-a11y-widget .blum-a11y-cf-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}
#blum-a11y-widget .blum-a11y-cf-label {
  font-size: .9rem !important;
  color: var(--blum-a11y-text) !important;
  font-weight: 400 !important;
}
#blum-a11y-widget .blum-a11y-cf-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
#blum-a11y-widget .blum-a11y-cf-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 6px !important;
  margin: 0 !important;
  border: 1px solid var(--blum-a11y-border) !important;
  border-radius: 6px !important;
  background: none !important;
  background-color: transparent !important;
  cursor: pointer !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  color: var(--blum-a11y-text) !important;
  transition: background .15s, border-color .15s !important;
  text-align: center !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
#blum-a11y-widget .blum-a11y-cf-btn small {
  font-size: .68rem !important;
  opacity: .65 !important;
  margin-top: 1px !important;
}
#blum-a11y-widget .blum-a11y-cf-btn:hover {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border-color: var(--blum-a11y-color) !important;
}
#blum-a11y-widget .blum-a11y-cf-btn[aria-pressed="true"] {
  background: var(--blum-a11y-color) !important;
  background-color: var(--blum-a11y-color) !important;
  border-color: var(--blum-a11y-color) !important;
  color: #fff !important;
}
#blum-a11y-widget .blum-a11y-cf-btn[aria-pressed="true"] small { opacity: .8 !important; }
#blum-a11y-widget .blum-a11y-cf-btn:focus-visible {
  outline: 3px solid var(--blum-a11y-color) !important;
  outline-offset: 2px !important;
}

/* ── Reading guide toggle-label (clickable label) ────── */
#blum-a11y-widget .blum-a11y-control__toggle-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-size: .9rem !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 !important;
  text-align: left !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}

/* ── Reset button ────────────────────────────────────── */
#blum-a11y-widget .blum-a11y-btn--ghost {
  width: 100% !important;
  padding: 8px !important;
  margin: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: 1px solid var(--blum-a11y-border) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: .85rem !important;
  font-weight: 400 !important;
  color: var(--blum-a11y-text) !important;
  transition: background .15s !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  display: block !important;
  text-align: center !important;
  box-shadow: none !important;
}
#blum-a11y-widget .blum-a11y-btn--ghost:hover {
  background: #fef2f2 !important;
  background-color: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

/* ═══════════════════════════════════════════════════════
   Dark mode & High contrast — filter on #blum-a11y-filter-wrapper.

   The filter is applied to the wrapper div (which contains
   all non-fixed body children) rather than to <html> or <body>.
   Applying filter to <html> would make <html> a new CSS containing
   block for position:fixed elements — their bottom/right offsets
   would then be measured from the page-content height instead of
   the viewport, pushing them off-screen on long pages.
   The wrapper div only contains scrollable content (fixed elements
   were excluded when core.js built it), so fixed elements and our
   widget (moved to <html> root) are completely unaffected.

   The sticky-inside-filter Chrome bug was fixed in Chrome 96 (2021).
   Current Chrome is 130+; Safari and Firefox never had this bug.
   ═══════════════════════════════════════════════════════ */

/* ── Widget shadow when page bg is dark ──────────────── */
html.blum-a11y-dark-active #blum-a11y-widget .blum-a11y-trigger {
  box-shadow: 0 4px 20px rgba(0,0,0,.8) !important;
}
html.blum-a11y-dark-active #blum-a11y-widget .blum-a11y-panel {
  box-shadow: 0 8px 40px rgba(0,0,0,.8) !important;
}

/* ── Dark mode & high contrast: shared scope ─────────────
   Both are toggled as a class on <body> itself, not on
   #blum-a11y-filter-wrapper. The wrapper exists so position:fixed
   elements (WP admin bar, our widget, and any of the SITE'S OWN fixed
   UI — e.g. a fixed side nav) are excluded from text-size/dyslexia
   zoom scaling. But neither mode uses a CSS `filter` anymore (the
   reason fixed elements once had to dodge a new filter-containing-
   block), so there's no reason to also exclude them from these color
   rules — scoping to <body> reaches any of the site's own fixed UI
   too, while the :not(#wpadminbar...)/:not(#blum-a11y-widget...)
   exclusions on every rule below still protect the admin bar and the
   widget itself specifically. */

/* ── Dark mode (adaptive, computed colors — no filter) ───
   Only elements whose ORIGINAL background was light get flipped:
   JS (blumA11YApplyDarkMode) walks the DOM once at toggle-time and
   tags those elements .blum-a11y--dm-light-bg. Sections that were
   already dark, purely decorative no-text elements, and anything
   sitting behind a CSS background-image (.blum-a11y--dm-preserve), are
   left completely alone — this is what keeps dark mode "adaptive"
   rather than flat. */
body.blum-a11y--dark-mode:not(.blum-a11y--high-contrast) {
  background-color: #121212 !important;
}
body.blum-a11y--dark-mode:not(.blum-a11y--high-contrast) .blum-a11y--dm-light-bg {
  background-color: transparent !important;
  color: #f1f1f1 !important;
  box-shadow: none !important;
}
body.blum-a11y--dark-mode:not(.blum-a11y--high-contrast) .blum-a11y--dm-light-bg a {
  color: #8ab4f8 !important;
}
body.blum-a11y--dark-mode:not(.blum-a11y--high-contrast) .blum-a11y--dm-light-bg input,
body.blum-a11y--dark-mode:not(.blum-a11y--high-contrast) .blum-a11y--dm-light-bg textarea,
body.blum-a11y--dark-mode:not(.blum-a11y--high-contrast) .blum-a11y--dm-light-bg select {
  background-color: #1e1e1e !important;
  color: #f1f1f1 !important;
  border-color: #555 !important;
}
/* An element that was ALREADY dark with its own distinct fill (e.g. a
   black ticker/marquee pill) would otherwise blend invisibly into the
   new dark page canvas — give it a subtle border so it still reads as
   a discrete shape, same rationale as high contrast's chip borders. */
body.blum-a11y--dark-mode:not(.blum-a11y--high-contrast) .blum-a11y--dm-dark-chip {
  border: 1px solid #555 !important;
}

/* ── High contrast (flat forced two-tone theme — no filter) ──
   Unlike dark mode, high contrast deliberately overrides EVERY
   element to one guaranteed-legible palette (the same principle OS
   "Forced Colors" modes use), accepting that the site's own card
   colors/branding are replaced while the mode is active. The blanket
   rule's own :not() list — not source order — is what protects the
   carve-outs below from being overwritten, since both are !important.
   :hover/:focus/:active are listed explicitly alongside the resting
   state on every carve-out so the theme's own hover colors can't leak
   back in on interaction. */
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) {
  background-color: var(--blum-a11y-hc-bg) !important;
  background-image: none !important;
}
/* IMPORTANT: every selector below must stay on ONE line per compound
   group. Whitespace between :not() clauses is a DESCENDANT COMBINATOR
   in CSS, not a line-continuation — breaking a compound selector across
   lines silently turns "every element except X" into "some element
   nested 3 levels inside an element inside an element", which only
   matches deeply-nested text and misses shallow elements (badges, a
   ticker bar, nav dots near the top of the DOM). Learned this the hard
   way — keep each compound selector unbroken even though it's long. */
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) :not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *):not(img):not(video):not(iframe):not(canvas):not(svg):not(picture):not(source):not(a):not(button):not(input):not(select):not(textarea):not(label) {
  background-color: var(--blum-a11y-hc-bg) !important;
  background-image: none !important;
  color: var(--blum-a11y-hc-text) !important;
  border-color: var(--blum-a11y-hc-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* The blanket rule above is a descendant selector and never reaches
   ::before/::after generated content (CSS doesn't implicitly include
   pseudo-elements in `*`) — decorative glyphs/overlays authored with
   their own `color`/`background` (quote marks, bullets, icon-via-content,
   image/gradient overlays applied via ::before) need their own rule, or
   they keep painting over the real element's now-flattened colors. */
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) :not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *)::before,
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) :not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *)::after {
  color: var(--blum-a11y-hc-text) !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--blum-a11y-hc-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) a:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *),
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) a:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *):hover,
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) a:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *):focus,
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) a:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *):active {
  background-color: var(--blum-a11y-hc-bg) !important;
  background-image: none !important;
  color: var(--blum-a11y-hc-link) !important;
  border-color: var(--blum-a11y-hc-link) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) button:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *),
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) input[type="submit"]:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *),
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) input[type="button"]:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *),
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) input[type="reset"]:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *),
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) [role="button"]:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *) {
  background-color: var(--blum-a11y-hc-btn-bg) !important;
  background-image: none !important;
  color: var(--blum-a11y-hc-btn-text) !important;
  border: 2px solid var(--blum-a11y-hc-btn-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) input:not([type="submit"]):not([type="button"]):not([type="reset"]):not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *),
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) textarea:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *),
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) select:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *) {
  background-color: var(--blum-a11y-hc-field-bg) !important;
  background-image: none !important;
  color: var(--blum-a11y-hc-text) !important;
  border: 2px solid var(--blum-a11y-hc-field-bd) !important;
  box-shadow: none !important;
}
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) label:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *) {
  background-color: var(--blum-a11y-hc-bg) !important;
  background-image: none !important;
  color: var(--blum-a11y-hc-text) !important;
  border-color: var(--blum-a11y-hc-text) !important;
}
/* "Chip" elements (badges/pills/ticker bars) whose ORIGINAL background
   was a deliberate solid fill (tagged by blumA11YMarkFilledChips in
   high-contrast.js) get a border once the blanket rule above strips
   that fill — otherwise they'd disappear into the flattened canvas.
   This mirrors the CSS Forced Colors spec itself, which mandates an
   auto-border on form controls that would otherwise have none, for
   exactly this reason. border-radius is untouched, so a pill stays a
   pill shape, just outlined instead of filled. */
body.blum-a11y--high-contrast:not(.blum-a11y--dark-mode) .blum-a11y--hc-chip {
  border: 2px solid var(--blum-a11y-hc-text) !important;
}

/* ── Both active ─────────────────────────────────────────
   High contrast wins outright: dark mode's adaptive per-element
   logic is irrelevant once high contrast is also on — this is just
   the dark-palette variant of the same flat forced theme above.
   Structural mirror of the standalone block above, swapped to the
   dark palette variables — see that block's comments for rationale,
   including the one-line-per-selector rule. */
body.blum-a11y--dark-mode.blum-a11y--high-contrast {
  background-color: var(--blum-a11y-hcd-bg) !important;
  background-image: none !important;
}
body.blum-a11y--dark-mode.blum-a11y--high-contrast :not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *):not(img):not(video):not(iframe):not(canvas):not(svg):not(picture):not(source):not(a):not(button):not(input):not(select):not(textarea):not(label) {
  background-color: var(--blum-a11y-hcd-bg) !important;
  background-image: none !important;
  color: var(--blum-a11y-hcd-text) !important;
  border-color: var(--blum-a11y-hcd-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.blum-a11y--dark-mode.blum-a11y--high-contrast :not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *)::before,
body.blum-a11y--dark-mode.blum-a11y--high-contrast :not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *)::after {
  color: var(--blum-a11y-hcd-text) !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--blum-a11y-hcd-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.blum-a11y--dark-mode.blum-a11y--high-contrast a:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *),
body.blum-a11y--dark-mode.blum-a11y--high-contrast a:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *):hover,
body.blum-a11y--dark-mode.blum-a11y--high-contrast a:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *):focus,
body.blum-a11y--dark-mode.blum-a11y--high-contrast a:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *):active {
  background-color: var(--blum-a11y-hcd-bg) !important;
  background-image: none !important;
  color: var(--blum-a11y-hcd-link) !important;
  border-color: var(--blum-a11y-hcd-link) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.blum-a11y--dark-mode.blum-a11y--high-contrast button:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *),
body.blum-a11y--dark-mode.blum-a11y--high-contrast input[type="submit"]:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *),
body.blum-a11y--dark-mode.blum-a11y--high-contrast input[type="button"]:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *),
body.blum-a11y--dark-mode.blum-a11y--high-contrast input[type="reset"]:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *),
body.blum-a11y--dark-mode.blum-a11y--high-contrast [role="button"]:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *) {
  background-color: var(--blum-a11y-hcd-btn-bg) !important;
  background-image: none !important;
  color: var(--blum-a11y-hcd-btn-text) !important;
  border: 2px solid var(--blum-a11y-hcd-btn-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.blum-a11y--dark-mode.blum-a11y--high-contrast input:not([type="submit"]):not([type="button"]):not([type="reset"]):not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *),
body.blum-a11y--dark-mode.blum-a11y--high-contrast textarea:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *),
body.blum-a11y--dark-mode.blum-a11y--high-contrast select:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *) {
  background-color: var(--blum-a11y-hcd-field-bg) !important;
  background-image: none !important;
  color: var(--blum-a11y-hcd-text) !important;
  border: 2px solid var(--blum-a11y-hcd-field-bd) !important;
  box-shadow: none !important;
}
body.blum-a11y--dark-mode.blum-a11y--high-contrast label:not(#wpadminbar):not(#wpadminbar *):not(#blum-a11y-widget):not(#blum-a11y-widget *) {
  background-color: var(--blum-a11y-hcd-bg) !important;
  background-image: none !important;
  color: var(--blum-a11y-hcd-text) !important;
  border-color: var(--blum-a11y-hcd-text) !important;
}
body.blum-a11y--dark-mode.blum-a11y--high-contrast .blum-a11y--hc-chip {
  border: 2px solid var(--blum-a11y-hcd-text) !important;
}