/*!
 * Hangar mini-apps — shared theme-toggle styling.
 * Theme-agnostic: every color/position is a CSS custom property with a neutral default,
 * so the same file reads on paper-light and neon-dark apps. Defaults CASCADE through the app's own tokens (--surface/--muted/--accent/--accent-ink) so the widget auto-adapts per mode without per-app overrides; an app may still override any
 * --theme-switch-* var in its own stylesheet (per data-theme, to match its accent).
 */
.theme-switch {
  display: inline-flex;
  border: 1px solid var(--theme-switch-border, var(--line, rgba(0, 0, 0, 0.14)));
  border-radius: var(--theme-switch-radius, 9px);
  overflow: hidden;
  background: var(--theme-switch-bg, var(--surface, var(--panel, rgba(0, 0, 0, 0.05))));
  font-size: var(--theme-switch-size, 14px);
  font-family: var(--theme-switch-font, inherit);
  line-height: 1;
  backdrop-filter: var(--theme-switch-blur, none);
}
.theme-switch__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--theme-switch-fg, var(--muted, var(--ink-soft, var(--ink, #555))));
  padding: 5px 8px;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition: background .15s, color .15s;
}
.theme-switch__btn:hover { color: var(--theme-switch-active-fg, var(--accent-ink, var(--on-accent, #000))); }
.theme-switch__btn.is-active {
  background: var(--theme-switch-active-bg, transparent);
  color: var(--theme-switch-active-fg, var(--ink, #111));
  box-shadow: inset 0 0 0 2px var(--accent, var(--theme-switch-active-bg, #111));
}
.theme-switch__btn:focus-visible {
  outline: 2px solid var(--theme-switch-active-bg, var(--accent, #111));
  outline-offset: -2px;
}
/* Floating variant: top-LEFT so it never collides with the i18n switcher (top-right). */
.theme-switch--floating {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  z-index: 2147482990; /* just under the support FAB (2147483000) */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
@media (prefers-reduced-motion: reduce) { .theme-switch__btn { transition: none; } }

/* Global keyboard-focus baseline (design-review). Zero-specificity :where() so ANY
   app's own :focus/:focus-visible rule always wins; this only fills the gap for apps
   that define no visible focus style. Uses the app's accent token if present, else the
   element's text color — always visible. Keyboard-only (does not show on mouse click). */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--accent, var(--primary, var(--gold, var(--brand, var(--ring, currentColor)))));
  outline-offset: 2px;
  border-radius: 3px;
}

/* Global reduced-motion baseline (design-review). Only applies when the user's OS
   requests reduced motion — default rendering is byte-identical, so blast radius on
   normal users is zero. Canvas games (rAF) are unaffected; only CSS transitions/
   animations/smooth-scroll are neutralized, which is the intended a11y behavior. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}