/* No page geometry, image filters, or light-mode page colours are changed. */
html[data-hapi-display-theme="dark"]:not([data-hapi-display-measuring]) {
  color-scheme: dark;
  background-color: #111923;
}
html[data-hapi-display-theme="dark"]:not([data-hapi-display-measuring]) body {
  background-color: #111923 !important;
  color: #edf3fa;
}
html[data-hapi-display-theme="dark"]:not([data-hapi-display-measuring]) body :is(#hapi-dark-bg, [data-hdm-bg]) {
  background-color: var(--hdm-bg) !important;
}
html[data-hapi-display-theme="dark"]:not([data-hapi-display-measuring]) body :is(#hapi-dark-color, [data-hdm-color]) {
  color: var(--hdm-color) !important;
}
html[data-hapi-display-theme="dark"]:not([data-hapi-display-measuring]) body :is(#hapi-dark-border, [data-hdm-border]) {
  border-color: #3d4b5e !important;
}
html[data-hapi-display-theme="dark"]:not([data-hapi-display-measuring]) body :is(#hapi-dark-gradient, [data-hdm-gradient]) {
  background-image: var(--hdm-gradient) !important;
}
#hapi-display-settings {
  grid-column: 1 / -1;
  --hdm-panel: #fff;
  --hdm-ink: #223248;
  --hdm-muted: #566579;
  --hdm-line: #ccd7e3;
  --hdm-selected: #eaf6ef;
  --hdm-accent: #17673c;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: var(--hdm-ink);
}
html[data-hapi-display-theme="dark"] #hapi-display-settings {
  --hdm-panel: #182330;
  --hdm-ink: #f0f4fa;
  --hdm-muted: #b7c4d4;
  --hdm-line: #4a5d73;
  --hdm-selected: #193d30;
  --hdm-accent: #96dfb4;
}
#hapi-display-settings * { box-sizing: border-box; }
#hapi-display-settings .hdm-open,
#hapi-display-settings .hdm-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 8px 12px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--hdm-line);
  border-radius: 22px;
  background: var(--hdm-panel);
  color: var(--hdm-ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-transform: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#hapi-display-settings .hdm-open {
  position: static;
  width: 100%;
  min-height: 44px;
  border-radius: 11px;
  box-shadow: none;
  font-size: 13px;
}
#hapi-display-settings[hidden] { display: none !important; }
#hapi-display-settings .hdm-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
#hapi-display-settings dialog {
  position: fixed;
  inset: auto 0 0;
  width: calc(100% - 16px);
  max-width: 440px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  margin: auto auto max(8px, env(safe-area-inset-bottom, 0px));
  padding: 17px 16px 19px;
  border: 1px solid var(--hdm-line);
  border-radius: 20px;
  color: var(--hdm-ink);
  background: var(--hdm-panel);
  box-shadow: 0 14px 60px #0005;
  font: inherit;
}
#hapi-display-settings dialog:not([open]) { display: none !important; }
#hapi-display-settings dialog::backdrop { background: #08132280; }
#hapi-display-settings .hdm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
#hapi-display-settings .hdm-title { margin: 0; padding: 0; color: var(--hdm-ink); font-size: 17px; font-weight: 750; line-height: 1.4; background: none; border: 0; }
#hapi-display-settings .hdm-close { padding: 8px; border-radius: 50%; }
#hapi-display-settings fieldset { display: block; min-width: 0; margin: 0; padding: 0; border: 0; }
#hapi-display-settings legend { display: block; margin: 0 0 9px; padding: 0; color: var(--hdm-muted); font: inherit; font-size: 12px; }
#hapi-display-settings .hdm-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
#hapi-display-settings .hdm-option { position: relative; display: grid; justify-items: center; gap: 5px; min-height: 98px; padding: 12px 4px 9px; border: 1px solid var(--hdm-line); border-radius: 12px; color: var(--hdm-ink); background: var(--hdm-panel); cursor: pointer; font-size: 13px; line-height: 1.35; }
#hapi-display-settings .hdm-option:has(input:checked) { border: 2px solid var(--hdm-accent); padding: 11px 3px 8px; background: var(--hdm-selected); }
#hapi-display-settings .hdm-option input { appearance: auto !important; display: block !important; position: static !important; width: 15px !important; height: 15px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; accent-color: var(--hdm-accent); opacity: 1 !important; clip: auto !important; }
#hapi-display-settings .hdm-option .hdm-icon { width: 23px; height: 23px; }
#hapi-display-settings .hdm-note { margin: 12px 0 0; padding: 0; color: var(--hdm-muted); font-size: 12px; line-height: 1.65; }
#hapi-display-settings .hdm-status { min-height: 1.4em; margin: 8px 0 0; color: var(--hdm-accent); font-size: 12px; }
#hapi-display-settings :focus-visible { outline: 3px solid #3094e3; outline-offset: 3px; }
@media (min-width: 768px) { #hapi-display-settings { display: none !important; } }

/* Keep settings text legible against page-level paragraph overrides. */
html[data-hapi-display-theme] #hapi-display-settings#hapi-display-settings#hapi-display-settings .hdm-note,
html[data-hapi-display-theme] #hapi-display-settings#hapi-display-settings#hapi-display-settings legend { color: var(--hdm-muted) !important; }
html[data-hapi-display-theme] #hapi-display-settings#hapi-display-settings#hapi-display-settings .hdm-status { color: var(--hdm-accent) !important; }