/* Tailwind (via CDN, see index.html) handles almost everything here.
   This file only carries what Tailwind's utility classes can't reach:
   states toggled by app.js via a single classList.toggle() on an
   already-rendered element, and the browser-native chrome (selection,
   scrollbar, focus ring, color/audio inputs) that ships with defaults
   belonging to no design system.

   The Tailwind CDN runtime compiles tailwind.config's theme.extend.colors
   into utility classes only — it doesn't expose them as CSS custom
   properties, so this file (which Tailwind's compiler never sees) has no
   way to reference that token system directly. These custom properties
   are this file's own mirror of the DESIGN.md/tailwind.config values it
   needs; keep them in sync if either source changes. */
:root {
  --color-primary: #0075de;      /* DESIGN.md colors.primary */
  --color-ink: #0d0d0c;          /* DESIGN.md colors.ink */
  --color-ink-faint: #a39e98;    /* DESIGN.md colors.ink-faint */
  --color-canvas-soft: #f6f5f4;  /* DESIGN.md colors.canvas-soft */
  --color-scrollbar-thumb: #d8d6d3; /* DESIGN.md colors.scrollbar-thumb */
  --color-accent-orange: #dd5b00;   /* DESIGN.md colors.accent-orange */
  --color-accent-sky: #62aef0;      /* DESIGN.md colors.accent-sky */
}

::selection {
  background: rgba(0, 117, 222, 0.16); /* --color-primary at 16% */
  color: var(--color-ink);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

html {
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-canvas-soft);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-canvas-soft);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border-radius: 999px;
  border: 3px solid var(--color-canvas-soft);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-ink-faint);
}

input,
textarea {
  caret-color: var(--color-primary);
}

/* Native color swatch: strip the browser chrome down to a plain fill so
   it reads as our rounded token, not an OS-themed control. */
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 5px;
}
input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 5px;
}

/* --- JS-toggled states (classList.toggle on a static element; Tailwind's
   MutationObserver never sees these because the base class list on the
   element doesn't change, only this one flag) --- */

#speedButtons button.speed-btn.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 0.2px 1px rgba(0, 0, 0, 0.02), 0 0.8px 3px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.loop-btn.active {
  background-color: var(--color-accent-orange);
  border-color: var(--color-accent-orange);
  color: #ffffff;
}

#beatPulse.pulse-active {
  background-color: var(--color-accent-sky);
  transform: scale(1.18);
}

/* Empty marks list: a quiet document-style placeholder instead of a
   blank gap, with no JS change needed since the <ul> is genuinely empty. */
#marksList:empty::before {
  content: "No marks yet — mark a moment or start a section above.";
  display: block;
  padding: 8px 4px;
  font-size: 14px;
  color: var(--color-ink-faint);
}

/* Reduced motion: the beat pulse is the app's core practice feedback,
   firing on every beat for as long as the track plays — an automatic,
   repeating motion, not a one-off response to a click, so it's the one
   place in the app prefers-reduced-motion actually needs an alternative
   rather than just a shorter transition. Swap the growing/shrinking
   transform for a static color-and-ring flash: the same accent-sky
   "on-beat" signal and the same on/off timing, with no motion. */
@media (prefers-reduced-motion: reduce) {
  #beatPulse {
    transition: none;
  }

  #beatPulse.pulse-active {
    transform: none;
    box-shadow: 0 0 0 6px rgba(98, 174, 240, 0.35);
  }
}