/* Shared controls layered over legacy page styles. */
.reminder-honeypot {
  display: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.theme-toggle {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  border: 1px solid #8caab7 !important;
  border-radius: 50% !important;
  background: #edf5f4 !important;
  color: #112d48 !important;
  font-size: 1rem !important;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(17, 45, 72, .12);
  cursor: pointer;
}

.theme-toggle:hover {
  background: #dbeceb !important;
  border-color: #5d8999 !important;
}

.theme-toggle:focus-visible {
  outline: 3px solid #f3bf67;
  outline-offset: 2px;
}

html[data-theme="dark"] .theme-toggle {
  background: #18384e !important;
  border-color: #5e91a6 !important;
  color: #f4fbff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .theme-toggle:hover {
  background: #22506a !important;
  border-color: #8dc1d4 !important;
}

/* `--ink` becomes off-white in dark mode, so the radio action needs its own surface. */
html[data-theme="dark"] .mode-radio .play-button:not(:disabled) {
  background: #287f81;
  border: 1px solid #55aaa8;
  color: #fff;
  opacity: 1;
}

html[data-theme="dark"] .mode-radio .play-button:not(:disabled):hover {
  background: #35a09b;
  border-color: #8ae9df;
}

html[data-theme="dark"] .mode-radio .play-button:disabled {
  background: #29465e;
  border: 1px solid #5b7890;
  color: #d4e2ea;
}

@media (max-width: 520px) {
  .theme-toggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
  }
}