/* Shared by the React preview and standalone HTML export. */
.contrast-toolbar {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
}
.contrast-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: .5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: hsl(var(--background));
  color: hsl(var(--primary));
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.contrast-toggle:hover { background: hsl(var(--secondary)); }
.contrast-symbol {
  display: inline-block;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: #111;
  background: linear-gradient(90deg, #111 50%, #fff 50%);
}
.contrast-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.no-js .contrast-toolbar { display: none; }

/* Explicit colors, not an invert filter: photos and the logo stay original. */
html[data-contrast="high"] { color-scheme: dark; background: #0b0b0b; }
html[data-contrast="high"] body,
html[data-contrast="high"] body * {
  color: #fff !important;
  border-color: #ffeb3b !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html[data-contrast="high"] body {
  background: #0b0b0b !important;
}
html[data-contrast="high"] body * {
  background: transparent !important;
}
/* Opaque backgrounds only on actual surfaces, not every text wrapper. */
html[data-contrast="high"] body :where(header, footer, section, [class*="bg-"], .hero-card, .tile, .note, .location-card, .mobile-menu, .contrast-toolbar) {
  background: #0b0b0b !important;
}
html[data-contrast="high"] a,
html[data-contrast="high"] a * {
  color: #ffeb3b !important;
  text-decoration: underline !important;
  text-underline-offset: .2em;
}
html[data-contrast="high"] button {
  border: 1px solid #ffeb3b !important;
  background: #0b0b0b !important;
}
html[data-contrast="high"] button[aria-pressed="true"],
html[data-contrast="high"] button[aria-pressed="true"] *,
html[data-contrast="high"] button:hover,
html[data-contrast="high"] button:hover * {
  color: #0b0b0b !important;
  background-color: #ffeb3b !important;
}
html[data-contrast="high"] .contrast-symbol {
  border-color: currentColor !important;
  background-image: linear-gradient(90deg, #111 50%, #fff 50%) !important;
}
html[data-contrast="high"] img[src$="dagis-logo.jpg"] {
  mix-blend-mode: normal !important;
  background: #fff !important;
}
html[data-contrast="high"] .grain::before,
html[data-contrast="high"] .hero-leaf,
html[data-contrast="high"] svg[viewBox="0 0 200 200"] { display: none !important; }
html[data-contrast="high"] :where(.rise, .reveal) {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
html[data-contrast="high"] :focus-visible {
  outline: 3px solid #ffeb3b !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px #0b0b0b !important;
}
html[data-contrast="high"] ::selection { color: #0b0b0b !important; background: #ffeb3b !important; }
/* The browser's own forced-colors palette remains authoritative. */
@media (forced-colors: active) {
  .contrast-toggle, .contrast-symbol { forced-color-adjust: auto; }
}