/* Theme is a deck-level setting (light/dark/auto, old-specs §17), not
   purely OS-driven — dark: variants are keyed off a `.dark` class on
   <html> (set explicitly for "dark", removed for "light", and toggled
   by a prefers-color-scheme listener for "auto") rather than
   Tailwind's default prefers-color-scheme media query. The CDN build
   of Tailwind is configured via `window.tailwind.config` in index.html
   (darkMode: 'selector') to key off that same .dark class, so this
   file only carries the plumbing Tailwind's utility classes can't
   express: the font, the shake animation, and the no-spinner number
   inputs. No @import "tailwindcss" here — the CDN <script> tag in
   index.html replaces that entirely. */

/* Self-hosted font: the only weight actually shipped as a file in
   assets/fonts/ is Nunito Regular (400) -- nunito-v16-latin-regular.
   woff2. Earlier revisions of this file referenced Newsreader at
   several weights via npm's @fontsource packages, but no such font
   files exist on disk and there's no bundler here to resolve that
   import anyway, so this declares the one real asset instead. */
@font-face {
  font-family: "Nunito";
  src: url("./assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html, body, #app {
  height: 100%;
}

/* Alpine's CDN build doesn't inject this rule itself (unlike its
   x-cloak documentation examples, which assume a bundler-injected
   stylesheet) -- x-cloak on the root #app prevents an unstyled flash
   of every template before Alpine finishes initializing. */
[x-cloak] {
  display: none !important;
}

body {
  margin: 0;
  font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Every button gets a quick press-feedback on click, applied
   globally so no individual button needs its own utility classes and
   nothing gets missed. Purely a perceptual cue that the click
   registered — not a flourish, just closing the "did that work?" gap. */
button {
  transition: transform 0.1s ease, opacity 0.1s ease;
}
button:active:not(:disabled) {
  transform: scale(0.96);
  opacity: 0.8;
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

.shake {
  animation: shake 0.4s;
}

/* Session minutes/card count (§17) are typed directly, never nudged
   one at a time -- the native up/down spinner buttons just add
   clutter for a value nobody increments by clicking 25 times. */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-spinner {
  -moz-appearance: textfield;
}