/* The battery indicator (js/battery.js, BT3 and BT3b). A signal, like a traffic light: the same colours in every look and in
   light and dark, the number always beside the colour (never colour alone). The pill's two colours are tokens so Meridian's
   tray and the lock screen can take them too; the number sits on the dark end of the blend and keeps 4.5:1 (tests/battery.test.mjs). */
:root {
  --battery-ok: #2db36a;
  --battery-low: #e8a317;
  --battery-critical: #e5484d;
  --battery-fast-a: #2e6fd8;       /* blue end, under the badge */
  --battery-fast-b: #0b8564;       /* green-teal end, under the number: darkened from the first pick (#3fd9a0) so white text reads at 4.5:1 */
  --battery-ring-normal: #ffffff;
  --battery-ring-slow: #e8a317;
}

#battery-ind {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 44px; min-height: 44px; padding: 0 6px; margin: 0; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
}
#battery-ind[hidden] { display: none; }
#battery-ind:hover, #battery-ind:focus-visible { color: var(--text); }
#battery-ind[data-bar="ok"] { --bat-c: var(--battery-ok); }
#battery-ind[data-bar="low"] { --bat-c: var(--battery-low); }
#battery-ind[data-bar="critical"] { --bat-c: var(--battery-critical); }

.bat-plain, .bat-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; }
.bat-plain { padding: 3px 6px; }
.bat-bar { width: 28px; height: 14px; display: block; }
.bat-bolt { width: 15px; height: 10px; display: block; color: var(--text); }
.bat-n { font-weight: 600; font-size: calc(13px * var(--ts, 1)); line-height: 1; }

/* the ring while charging normally (white) or slowly (amber); a fast charge has the pill instead */
#battery-ind[data-ring="normal"] .bat-plain { box-shadow: 0 0 0 2px var(--battery-ring-normal), 0 0 0 3px rgba(0, 0, 0, .35); }
#battery-ind[data-ring="slow"] .bat-plain { box-shadow: 0 0 0 2px var(--battery-ring-slow); }

/* BT3b: the pill from blue to green-teal, a white round badge with three blue bolts at the left, the number in white at the right */
.bat-pill {
  height: 28px; gap: 6px; padding: 0 12px 0 3px; color: #fff;
  background: linear-gradient(90deg, var(--battery-fast-a), var(--battery-fast-b));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.bat-pill .bat-n { color: #fff; font-weight: 700; }
.bat-badge { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: inline-grid; place-items: center; flex: none; }
.bat-bolts { width: 17px; height: 11px; display: block; color: var(--battery-fast-a); }
.bat-pill:not(:has(.bat-n)) { padding-right: 3px; }

/* plugged in: the bar lights up in its colour for two seconds */
@keyframes bat-glow { 0% { filter: drop-shadow(0 0 0 transparent); } 25% { filter: drop-shadow(0 0 6px var(--bat-c, #2db36a)) brightness(1.3); } 100% { filter: drop-shadow(0 0 0 transparent); } }
#battery-ind.bat-plug .bat-fill { animation: bat-glow 2s ease-out 1; }
html[data-motion="reduce"] #battery-ind.bat-plug .bat-fill { animation: none; }
@media (prefers-reduced-motion: reduce) { #battery-ind.bat-plug .bat-fill { animation: none; } }

@media (forced-colors: active) { .bat-pill { forced-color-adjust: none; } }

/* a phone's own status bar already shows the level: in the dock (3 things at rest, progressive-disclosure.md) the indicator
   speaks up only when it matters - low, very low, or the fast-charge / full pill - and the search bar gives it room then */
@media (max-width: 760px) {
  #battery-ind[data-bar="ok"][data-style="bar"] { display: none; }
  #dock:has(#battery-ind:not([hidden]):not([data-bar="ok"][data-style="bar"])) .search-wrap { min-width: 120px; }
}