/* tech.css
 * Phase 2, Theme 10 (technical / performance / resilience). The only visual
 * surface this theme needs is the battery-saver body class (feature 97), which
 * calms animation alongside the existing reduce-motion toggle (battery saver also
 * forces reduce-motion in JS, so this is belt-and-braces). Everything else in the
 * theme is logic/wiring with no styling of its own. Additive and reversible:
 * without the body class, the app looks exactly as today.
 */

/* When battery saver is on, shorten/neutralise non-essential animation to save
 * power, mirroring the reduce-motion treatment. We never hide content or change
 * layout, so nothing breaks; we only quieten motion. */
body.tech-battery-saver *,
body.tech-battery-saver *::before,
body.tech-battery-saver *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* A small, unobtrusive badge the battery-saver state can opt into if a screen
 * wants to show it. Hidden by default; present so packs/components can surface it
 * without adding new CSS. Child-first: large, high-contrast, never blocking. */
.tech-battery-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  font-size: 0.85rem;
  background: rgba(245, 166, 35, 0.16);
  color: var(--amber, #f5a623);
}