/* Neutral icon buttons and neutral control modules only.
   The mobile navigation itself intentionally keeps the original gold styling. */
:root {
  --icon-gray-bg: #eeeeee;
  --icon-gray-bg-hover: #3a3a3a;
  --icon-gray-fg: #252525;
  --icon-gray-fg-hover: #ffffff;
  --icon-gray-border: #686868;
  --module-gray-bg: #eeeeee;
  --module-gray-border: #747474;
  --module-gray-text: #202020;
  --module-gray-muted: #555555;
  --module-gray-active: #444444;
  --module-gray-active-text: #ffffff;
}
html.night-mode,
body.night-mode {
  --icon-gray-bg: #2b2b2b;
  --icon-gray-bg-hover: #e0e0e0;
  --icon-gray-fg: #f2f2f2;
  --icon-gray-fg-hover: #171717;
  --icon-gray-border: #ababab;
  --module-gray-bg: #303030;
  --module-gray-border: #999999;
  --module-gray-text: #f4f4f4;
  --module-gray-muted: #d0d0d0;
  --module-gray-active: #dedede;
  --module-gray-active-text: #171717;
}

/* Floating icons: accessibility, hamburger and back-to-top. */
.utility-buttons .utility-icon-button,
.utility-buttons .utility-toggle,
.utility-buttons .back-to-top,
.hamburger,
.hamburger.utility-icon-button,
html.night-mode .utility-buttons .utility-icon-button,
html.night-mode .utility-buttons .utility-toggle,
html.night-mode .utility-buttons .back-to-top,
html.night-mode .hamburger,
html.night-mode .hamburger.utility-icon-button,
body.night-mode .utility-buttons .utility-icon-button,
body.night-mode .utility-buttons .utility-toggle,
body.night-mode .utility-buttons .back-to-top,
body.night-mode .hamburger,
body.night-mode .hamburger.utility-icon-button {
  border: 1px solid var(--icon-gray-border) !important;
  background: var(--icon-gray-bg) !important;
  color: var(--icon-gray-fg) !important;
  box-shadow: none !important;
}
.utility-buttons .utility-icon-button:hover,
.utility-buttons .utility-icon-button:focus-visible,
.utility-buttons .utility-toggle:hover,
.utility-buttons .utility-toggle:focus-visible,
.utility-buttons .back-to-top:hover,
.utility-buttons .back-to-top:focus-visible,
.hamburger:hover,
.hamburger:focus-visible,
.hamburger.utility-icon-button:hover,
.hamburger.utility-icon-button:focus-visible,
html.night-mode .utility-buttons .utility-icon-button:hover,
html.night-mode .utility-buttons .utility-icon-button:focus-visible,
html.night-mode .utility-buttons .utility-toggle:hover,
html.night-mode .utility-buttons .utility-toggle:focus-visible,
html.night-mode .utility-buttons .back-to-top:hover,
html.night-mode .utility-buttons .back-to-top:focus-visible,
html.night-mode .hamburger:hover,
html.night-mode .hamburger:focus-visible,
body.night-mode .utility-buttons .utility-icon-button:hover,
body.night-mode .utility-buttons .utility-icon-button:focus-visible,
body.night-mode .utility-buttons .utility-toggle:hover,
body.night-mode .utility-buttons .utility-toggle:focus-visible,
body.night-mode .utility-buttons .back-to-top:hover,
body.night-mode .utility-buttons .back-to-top:focus-visible,
body.night-mode .hamburger:hover,
body.night-mode .hamburger:focus-visible {
  border-color: var(--icon-gray-bg-hover) !important;
  background: var(--icon-gray-bg-hover) !important;
  color: var(--icon-gray-fg-hover) !important;
}

/* Force every icon part to inherit the gray foreground, including dark mode. */
.utility-buttons .utility-icon-button svg,
.utility-buttons .utility-toggle svg,
.utility-buttons .back-to-top svg,
.hamburger svg,
.hamburger.utility-icon-button svg,
html.night-mode .utility-buttons svg,
body.night-mode .utility-buttons svg,
html.night-mode .hamburger svg,
body.night-mode .hamburger svg {
  color: currentColor !important;
  stroke: currentColor !important;
}
.utility-buttons .utility-accessibility-icon circle,
html.night-mode .utility-buttons .utility-accessibility-icon circle,
body.night-mode .utility-buttons .utility-accessibility-icon circle,
.hamburger svg,
html.night-mode .hamburger svg,
body.night-mode .hamburger svg {
  fill: currentColor !important;
}
.utility-buttons .utility-accessibility-icon path,
.utility-buttons .back-to-top svg,
html.night-mode .utility-buttons .utility-accessibility-icon path,
body.night-mode .utility-buttons .utility-accessibility-icon path,
html.night-mode .utility-buttons .back-to-top svg,
body.night-mode .utility-buttons .back-to-top svg {
  fill: none !important;
  stroke: currentColor !important;
}
.hamburger span,
html.night-mode .hamburger span,
body.night-mode .hamburger span {
  background: currentColor !important;
}

/* The panel shell and section headings retain their original page/gold styling.
   Only settings/modules receive neutral gray surfaces. */
#utility-panel .a11y-setting,
#utility-panel .a11y-option {
  border-color: var(--module-gray-border) !important;
  background: var(--module-gray-bg) !important;
  color: var(--module-gray-text) !important;
}
#utility-panel .a11y-setting__label {
  color: var(--module-gray-text) !important;
}
#utility-panel .a11y-setting__hint {
  color: var(--module-gray-muted) !important;
}
#utility-panel .a11y-stepper__controls output {
  border-color: var(--module-gray-border) !important;
  background: var(--module-gray-bg) !important;
  color: var(--module-gray-text) !important;
}
#utility-panel .a11y-stepper__controls button {
  border-color: var(--module-gray-active) !important;
  background: var(--module-gray-active) !important;
  color: var(--module-gray-active-text) !important;
}
#utility-panel .a11y-stepper__controls button:hover,
#utility-panel .a11y-stepper__controls button:focus-visible {
  border-color: var(--module-gray-border) !important;
  background: var(--module-gray-bg) !important;
  color: var(--module-gray-text) !important;
}
#utility-panel .a11y-switch {
  border-color: var(--module-gray-border) !important;
  background: var(--module-gray-bg) !important;
}
#utility-panel .a11y-switch::after {
  background: var(--module-gray-text) !important;
}
#utility-panel .a11y-option[aria-checked="true"] {
  border-color: var(--module-gray-border) !important;
  background: var(--module-gray-bg) !important;
  color: var(--module-gray-text) !important;
  box-shadow: inset .3rem 0 0 var(--module-gray-active) !important;
}
#utility-panel .a11y-option[aria-checked="true"] .a11y-switch {
  background: var(--module-gray-active) !important;
}
#utility-panel .a11y-option[aria-checked="true"] .a11y-switch::after {
  background: var(--module-gray-active-text) !important;
}

/* Reset and Done: explicit normal and hover states in both color modes. */
#utility-panel .a11y-reset-button {
  border: 1px solid var(--module-gray-border) !important;
  background: transparent !important;
  color: var(--module-gray-text) !important;
}
#utility-panel .a11y-reset-button:hover,
#utility-panel .a11y-reset-button:focus-visible {
  border-color: var(--module-gray-active) !important;
  background: var(--module-gray-bg) !important;
  color: var(--module-gray-text) !important;
}
#utility-panel .a11y-apply-button {
  border: 1px solid var(--module-gray-active) !important;
  background: var(--module-gray-active) !important;
  color: var(--module-gray-active-text) !important;
}
#utility-panel .a11y-apply-button:hover,
#utility-panel .a11y-apply-button:focus-visible {
  border-color: var(--module-gray-border) !important;
  background: var(--module-gray-bg) !important;
  color: var(--module-gray-text) !important;
}

/* Preserve the original gold mobile navigation and its hover effects.
   Only the floating hamburger icon above is gray. */
:where(.utility-buttons, #utility-panel) :focus-visible,
.hamburger:focus-visible {
  outline-color: var(--icon-gray-fg) !important;
}
html.night-mode :where(.utility-buttons, #utility-panel) :focus-visible,
body.night-mode :where(.utility-buttons, #utility-panel) :focus-visible,
html.night-mode .hamburger:focus-visible,
body.night-mode .hamburger:focus-visible {
  outline-color: var(--icon-gray-fg) !important;
}

@media (forced-colors: active) {
  .utility-buttons .utility-icon-button,
  .utility-buttons .utility-toggle,
  .utility-buttons .back-to-top,
  .hamburger,
  #utility-panel .a11y-setting,
  #utility-panel .a11y-option {
    forced-color-adjust: auto !important;
  }
}