app.css

@import "tailwindcss";

/* Tailwind v4 `dark:*` variant. Extended to also activate when the
   active skin is a dark-only skin (Lounge / Pulse) so the existing
   `dark:bg-X` / `dark:text-Y` utilities every component ships with
   light up automatically — no per-skin manual bg/text overrides
   needed. Studio + Editorial stay theme-mode-driven (light or dark
   theme decides). The `data-skin` attribute is on documentElement
   so `[data-skin="lounge"] *` covers every element in the document. */
@custom-variant dark (&:where(.dark, .dark *, :root[data-skin="lounge"] *, :root[data-skin="pulse"] *, :root[data-skin="fluid"] *));

/* ============================================================
   Layer scale (issue #390)
   ============================================================

   A `z-index` is only compared against siblings inside the same
   stacking context. `position: fixed` escapes layout flow but NOT a
   stacking context — any ancestor carrying `backdrop-filter`,
   `transform`, `opacity < 1`, `filter` or `will-change` creates one and
   clamps everything inside it to that ancestor's own z-index.

   WaveFlow hits this constantly because the chrome is glassy: the TopBar
   has `backdrop-blur-md`, and the Pulse / Liquid skins add
   `backdrop-filter` to the PlayerBar and other containers. So the rule
   is not "pick a bigger number" — it's "know which context you're in".

     z-10   in-panel sticky headers (NowPlayingPanel)
     z-20   content-level sticky group headers (HistoryView date header)
     z-30   TopBar — a stacking context; its dropdowns are clamped here,
            so it must outrank content chrome (z-20)
     z-50   PlayerBar (`footer`) — a stacking context under Pulse/Liquid
     z-100  overlays: context menus, dropdown popovers
     z-101  nested submenus

   Anything at z-100+ MUST be rendered through a portal into
   `document.body` (see `ContextMenu`, `AnimatedModalShell`), otherwise
   an ancestor's stacking context silently caps it and a lower-numbered
   sibling of that ancestor paints on top.

   Portalling is safe for skin styling: every skin rule is rooted at
   `:root[data-skin="…"] :where(…)`, and `body` is still a descendant of
   `:root`, so a portalled subtree keeps matching. */

/* Default accent palette = Tailwind's emerald, exposed as CSS
   variables so themes (see `src/lib/themes.ts`) can override every
   shade at runtime. Components keep using `bg-emerald-*` /
   `text-emerald-*` etc — those utilities resolve to these vars in
   `@theme inline` below, so a theme swap re-tints the entire app
   without touching a single component. */
:root {
  --accent-50: oklch(0.979 0.021 166.113);
  --accent-100: oklch(0.95 0.052 163.051);
  --accent-200: oklch(0.905 0.093 164.15);
  --accent-300: oklch(0.845 0.143 164.978);
  --accent-400: oklch(0.765 0.177 163.223);
  --accent-500: oklch(0.696 0.17 162.48);
  --accent-600: oklch(0.596 0.145 163.225);
  --accent-700: oklch(0.508 0.118 165.612);
  --accent-800: oklch(0.432 0.095 166.913);
  --accent-900: oklch(0.378 0.077 168.94);
  --accent-950: oklch(0.262 0.051 172.552);
  --ambient-bg: #ffffff;
}

@theme inline {
  --color-emerald-50: var(--accent-50);
  --color-emerald-100: var(--accent-100);
  --color-emerald-200: var(--accent-200);
  --color-emerald-300: var(--accent-300);
  --color-emerald-400: var(--accent-400);
  --color-emerald-500: var(--accent-500);
  --color-emerald-600: var(--accent-600);
  --color-emerald-700: var(--accent-700);
  --color-emerald-800: var(--accent-800);
  --color-emerald-900: var(--accent-900);
  --color-emerald-950: var(--accent-950);
  --color-zinc-300: var(--wf-zinc-300);
  --color-zinc-400: var(--wf-zinc-400);
  --color-zinc-500: var(--wf-zinc-500);
  --color-zinc-600: var(--wf-zinc-600);
}

/* ============================================================
   High-contrast mode (issue #596)
   ============================================================

   Our secondary text is grey on grey by design, and for someone with
   low vision that design is the problem. This lifts contrast across the
   whole interface at once.

   ## Why only four shades

   The issue assumed colour already lived in WaveFlow's theme tokens.
   It does not — only the accent does. The greys are raw Tailwind
   utilities, ~1 900 of them, so the lever is Tailwind's own
   `--color-zinc-*` scale, re-pointed above at variables we own.

   But a shade is not a role. Measured across `src/`:

     zinc-300   138 text ·  23 border ·   8 bg
     zinc-400   603 text ·  10 placeholder ·  2 bg
     zinc-500   347 text ·   8 placeholder ·  3 bg
     zinc-600    85 text ·  19 border ·   4 bg
     zinc-700   180 border · 137 text · 128 bg     <- not remapped
     zinc-800   361 bg · 146 text · 130 border     <- not remapped
     zinc-900   210 text ·  69 bg                  <- not remapped

   300-600 are secondary *text* almost exclusively, which is exactly
   what the issue is about. 700-900 carry three roles at once, and one
   value cannot make a border more visible and a background deeper at
   the same time — remapping them would trade the legibility win for a
   set of surfaces that no longer separate. So they keep their values,
   and the handful of borders riding on 300-600 move in the helpful
   direction anyway (lighter on dark, darker on light).

   ## Why the shades move in opposite directions

   The same shade is secondary text on a dark ground and a border on a
   light one, so "more contrast" means lighter in dark mode and darker
   in light mode. Dark-mode detection has to cover the dark-only skins
   too: `applyTheme` puts `.dark` on the root for dark *themes*, but
   Lounge and Pulse are dark by skin and never set it — the `dark:`
   custom variant at the top of this file already draws that
   distinction, and so must this, or the mode inverts on two of the
   five skins. */
:root {
  --wf-zinc-300: oklch(87.1% 0.006 286.286);
  --wf-zinc-400: oklch(70.5% 0.015 286.067);
  --wf-zinc-500: oklch(55.2% 0.016 285.938);
  --wf-zinc-600: oklch(44.2% 0.017 285.786);
}

/* Light ground: push secondary text toward black. Targets are ~7:1
   against white — the AAA floor for body text — where the default
   palette sits near 4.5:1. 300 is left alone here: on a light ground it
   is a border and a divider, not text. */
:root[data-contrast="high"] {
  --wf-zinc-400: oklch(38% 0.008 286.067);
  --wf-zinc-500: oklch(31% 0.008 285.938);
  --wf-zinc-600: oklch(26% 0.008 285.786);
}

/* Dark ground: push secondary text toward white. */
:root[data-contrast="high"]:where(
    .dark,
    [data-skin="lounge"],
    [data-skin="pulse"],
    [data-skin="fluid"]
  ) {
  --wf-zinc-300: oklch(95% 0.004 286.286);
  --wf-zinc-400: oklch(89% 0.006 286.067);
  --wf-zinc-500: oklch(82% 0.008 285.938);
  --wf-zinc-600: oklch(74% 0.01 285.786);
}

/* Blur off. `backdrop-filter` behind text is the single biggest
   legibility cost in the current design and it buys nothing to someone
   who needs the contrast.

   Removing it is not enough on its own: the surfaces carrying a blur
   are also translucent, and an unblurred translucent header shows the
   content scrolling underneath the text rather than a soft wash of it —
   worse than where we started. So the text-bearing chrome is forced
   opaque in the same breath (rules further down, next to the skin
   overrides).

   The blur removal below is universal and meant to be: someone asking
   for high contrast is not asking for it on some surfaces. It is the
   *opacity* forcing that is selective -- purely decorative
   translucency over a hero gradient (Wrapped, the artist header) keeps
   it, since white text on a dark gradient is already well past the
   contrast floor and making it opaque would buy nothing.

   (`--skin-backdrop` is deliberately not touched here: `applySkin`
   writes it onto `documentElement.style`, which no stylesheet rule can
   outrank, and no CSS reads the token today anyway.) */
:root[data-contrast="high"] *,
:root[data-contrast="high"] *::before,
:root[data-contrast="high"] *::after {
  /* Prefixed first, standard last — the order Tailwind's own
     `backdrop-blur-*` utility uses. Written the other way round, the
     minifier folds the two into one declaration and emits only the
     prefixed form, so an engine that honours the standard property
     alone would keep its blur and this rule would silently do nothing
     on exactly the surfaces it exists for. Verified in the built CSS. */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* On Linux, Lounge and Liquid use opaque surfaces instead of large
   WebKitGTK backdrop layers. Keep the user-selected contrast setting
   independent from this rendering safeguard. */
:root[data-webkitgtk-safe]:is([data-skin="lounge"], [data-skin="liquid"]) *,
:root[data-webkitgtk-safe]:is([data-skin="lounge"], [data-skin="liquid"])
  *::before,
:root[data-webkitgtk-safe]:is([data-skin="lounge"], [data-skin="liquid"])
  *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* WebKitGTK briefly tears down and recreates the composited opacity layer
   used by the album grid's add button. It flashes twice on entry and lingers
   on the previous cover on exit (#817), so switch it without a transition. */
:root[data-webkitgtk-safe]
  [data-artwork-hit-target]
  ~ [data-add-to-playlist-trigger] {
  transition: none;
}

/* Round the painted children without clipping sticky headers or menus. */
[data-track-table] > .sticky {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

[data-track-table] > [data-track-body] {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

[data-track-body] > [data-track-last] {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

/* Skin surface rules must not paint the resize handle's hit area. The
   visible line remains on ::after, including hover and keyboard focus. */
:root[data-skin] [data-track-header] > [role="separator"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

:root[data-skin="lounge"] {
  --track-row-hover: rgb(255 45 121 / 0.12);
}

:root[data-layout="fluid"] {
  --track-row-hover: var(--fe-tone-1);
}

/* Pulse sits on the fluid layout: same specificity as the rule above,
   so it has to come after it to win. */
:root[data-skin="pulse"] {
  --track-row-hover: color-mix(in srgb, var(--fe-accent) 8%, transparent);
}

/* Override substring-based surface rules only for unselected, idle rows. */
:root:is(
    [data-skin="pulse"],
    [data-skin="liquid"],
    [data-skin="lounge"],
    [data-skin="fluid"]
  )
  [data-track-table]
  [data-track-row]:not([class*="bg-blue-500"]):not(
    [class*="bg-emerald-50"]
  ):hover {
  background-color: var(--track-row-hover) !important;
}

:root:is(
    [data-skin="pulse"],
    [data-skin="liquid"],
    [data-skin="lounge"],
    [data-skin="fluid"]
  )
  [data-playlist-card]
  [data-playlist-caption] {
  padding: 0 0.875rem 0.875rem;
}

/* Keyboard focus becomes unmistakable — a real outline on every
   surface, not a subtle ring. `outline` rather than `box-shadow` so it
   survives an `overflow: hidden` ancestor, and offset so it never sits
   on the control's own edge. */
:root[data-contrast="high"] :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* A lyrics colour the user picked (#751) was picked for looks, not for
   legibility: a dark blue sung line on the dark immersive view would
   fail the very floor this mode exists to hold. Both surfaces that take
   the colour are dark, so the sung line goes back to their white.
   `!important` because the colour arrives as an inline style. */
:root[data-contrast="high"] .wf-lyrics-highlight {
  color: #fff !important;
}

/* Controls that rely on subtlety get redrawn. The switch reads as
   "filled versus not filled", which is a colour-only distinction: here
   it gains an edge in both states and a mark in the on state, so the
   state survives without colour vision. Keyed on the ARIA role, which
   the shared `ToggleSwitch` and every inline copy already carry, rather
   than on a class only one of them has. */
:root[data-contrast="high"] [role="switch"] {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

:root[data-contrast="high"] [role="switch"][aria-checked="true"]::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 50%;
  width: 0.3rem;
  height: 0.6rem;
  translate: 0 -60%;
  rotate: 45deg;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

:root[data-contrast="high"] input[type="checkbox"],
:root[data-contrast="high"] input[type="radio"] {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

@theme {
  --color-surface-dark: #121212;
  --color-surface-dark-elevated: #181818;
  /* Light-mode surface family. Defaults to flat white + a barely-perceivable
     gray for elevated panels (player bar, audio quality footer). Themed
     light presets override `--color-surface-light` to match their ambient
     tint so sidebar / right panels carry the theme personality — without
     this, every light theme would leave a stark white sidebar against a
     pale-tinted body (Sunset Light / Lavender Light / etc were all broken
     this way until the tokens went theme-aware). */
  --color-surface-light: #ffffff;
  --color-surface-light-elevated: #fafafa;
}

/* Skin tokens — fall-back defaults match the Studio (current
   baseline) skin so components that opt into a skin utility behave
   identically until the user picks a non-default skin. The actual
   per-skin values are written to `documentElement.style` by
   `applySkin()` (see `src/lib/skins.ts`); these `:root`
   declarations are the safety net for the first paint before the
   SkinProvider's effect runs, and for components rendered before
   localStorage has been consulted. */
:root {
  --skin-density-nav: 1;
  --skin-density-topbar: 1;
  --skin-density-list: 1;
  --skin-density-card: 1;

  --skin-radius-card: 0.75rem;
  --skin-radius-button: 0.75rem;
  --skin-radius-input: 0.5rem;
  --skin-radius-pill: 9999px;

  --skin-shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --skin-shadow-elevated: 0 4px 12px -2px rgb(0 0 0 / 0.08);
  --skin-backdrop: none;
  --skin-divider: rgb(228 228 231); /* zinc-200 */
  --skin-grain: none;

  --skin-font-display:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --skin-font-body:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --skin-heading-weight: 600;
  --skin-display-tracking: -0.011em;

  --skin-motion-duration: 0.25s;
  --skin-motion-spring-stiffness: 320;
  --skin-motion-spring-damping: 28;
  --skin-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Skin-token utilities. Components opt in by using these instead
   of the baseline equivalents; skins re-tint by overriding the
   underlying CSS variable. Keeping the utility surface small on
   purpose — every utility added here is a contract every skin
   must honour. */
@utility rounded-card {
  border-radius: var(--skin-radius-card);
}
@utility rounded-button {
  border-radius: var(--skin-radius-button);
}
@utility rounded-input {
  border-radius: var(--skin-radius-input);
}
@utility rounded-pill {
  border-radius: var(--skin-radius-pill);
}
@utility shadow-card {
  box-shadow: var(--skin-shadow-card);
}
@utility shadow-elevated {
  box-shadow: var(--skin-shadow-elevated);
}
@utility border-divider {
  border-color: var(--skin-divider);
}
@utility font-display {
  font-family: var(--skin-font-display);
  font-weight: var(--skin-heading-weight);
  letter-spacing: var(--skin-display-tracking);
}
@utility font-body {
  font-family: var(--skin-font-body);
}

/* Skin overrides live in dedicated files keyed off semantic
   landmarks (`aside`, `header`, `footer`, `main`) + ARIA roles
   instead of substring-matching Tailwind class names. Splitting
   them keeps each skin's intent self-contained and avoids the
   specificity / substring-collision dance that made earlier
   iterations fragile. */
@import "./styles/skins/editorial.css";
@import "./styles/skins/lounge.css";
@import "./styles/skins/fluid.css";
/* Liquid and Pulse paint their material over the fluid layout, so they
   come after it. */
@import "./styles/skins/liquid.css";
@import "./styles/skins/pulse.css";

/* The desktop lyrics window (#582) is transparent at the OS level, and
   the document has to be too, or it paints an opaque box over the
   desktop. `index.html` stamps `data-skin` in every window, and the
   skins above paint `body` from it (`:root[data-skin="lounge"] body`),
   so this has to outrank them. `main.tsx` adds the class before the
   first render, so there is no opaque first frame either. */
html.desktop-lyrics-window,
html.desktop-lyrics-window body,
html.desktop-lyrics-window #root {
  background: transparent !important;
  overflow: hidden;
}

/* The mini-player window (#697). Its own surfaces hide their scrollbars,
   but the DOCUMENT had none of that, and the up-next overlay's entry
   animation starts at `translateY(8px)`: an element already pinned to the
   bottom edge, pushed 8 px past it, is 8 px of scrollable overflow on the
   page itself -- long enough to paint a bar down the right edge of a
   280 px window, and nothing to do with the lyrics list that was blamed
   for it. Nothing in this widget is meant to scroll the page, so say so
   once here rather than chase each animation that leans over an edge. */
html.mini-player-window,
html.mini-player-window body,
html.mini-player-window #root {
  overflow: hidden;
}

/* Theme ambient background. AppLayout's outer wrapper uses
   `bg-app-ambient` (defined as a utility below) so themes can paint
   their signature tint without touching any JSX. */
@utility bg-app-ambient {
  background-color: var(--ambient-bg);
}

@utility animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The fade carries an 8px rise, which is movement, so it belongs to the
   same family as the four blocks further down. Disabled here rather
   than by tagging call sites with `motion-safe:`: the utility has ~30
   of them across the app -- overlays, panels, the mini-player -- and a
   per-site variant would cover whichever ones someone remembered.
   `animation: none` lands the element on the `to` state, so the content
   appears in place instead of not appearing at all. */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in {
    animation: none;
  }
}

/* Progressive karaoke word fill (issue #491) — a continuous sweep
   across the word being sung, instead of a step at the word boundary.

   Two stacked copies of the same text: `__base` is the unsung state and
   carries the accessible text, `__fill` is the sung state clipped to
   `--kw-fill` (0-100 %, written every frame by `useKaraokeWordFill`
   straight on the element — no React re-render per frame).

   The clip reveals left-to-right. Right-to-left lyrics therefore fill
   from the wrong edge; the word-level highlight has the same limitation
   today, so it's not a regression — worth its own issue rather than a
   half-measure here. */
.karaoke-word {
  position: relative;
  display: inline-block;
}

.karaoke-word__fill {
  position: absolute;
  inset: 0;
  /* Collapsed until the hook sets the variable, so a word with no usable
     duration (or reduced motion) simply shows the base layer. */
  clip-path: inset(0 calc(100% - var(--kw-fill, 0%)) 0 0);
  /* No transition: the variable already moves once per frame, and
     easing on top of that reads as lag. */
  pointer-events: none;
}

/* Held note (`HeldNoteText`): each letter lifts and swells as the fill
   reaches it, holds while the note does, and settles with the others as
   it ends; how far, and how bright the glow, is what `--held` (0-1, how
   long the note is held) earns. The glow is on the base layer, which is
   not clipped: on the fill layer it would be cut at the fill's edge. The
   fill's clip only gets room above and below, for the lift. */
.karaoke-word__fill--held {
  clip-path: inset(-0.6em calc(100% - var(--kw-fill, 0%)) -0.6em 0);
}

.wf-held-letter {
  display: inline-block;
  transform-origin: 50% 85%;
  animation-name: wf-held-swell;
  animation-timing-function: ease-in-out;
  /* Before its turn a letter is at rest, and it comes back to rest. */
  animation-fill-mode: both;
}

.wf-held-letter--glow {
  animation-name: wf-held-glow;
}

@keyframes wf-held-swell {
  0%,
  100% {
    transform: none;
  }
  25% {
    transform: translateY(calc(-0.04em - 0.06em * var(--held, 0.5)))
      scale(calc(1.06 + 0.1 * var(--held, 0.5)));
  }
  70% {
    transform: translateY(calc(-0.03em - 0.05em * var(--held, 0.5)))
      scale(calc(1.05 + 0.08 * var(--held, 0.5)));
  }
}

/* The base layer sits at half opacity under the fill, hence the doubled
   halo: it is what shows around the sung letters. */
@keyframes wf-held-glow {
  0%,
  100% {
    transform: none;
    text-shadow: 0 0 0 transparent;
  }
  25% {
    transform: translateY(calc(-0.04em - 0.06em * var(--held, 0.5)))
      scale(calc(1.06 + 0.1 * var(--held, 0.5)));
    text-shadow:
      0 0 calc(0.15em + 0.2em * var(--held, 0.5)) currentColor,
      0 0 calc(0.4em + 0.6em * var(--held, 0.5)) currentColor,
      0 0 calc(0.4em + 0.6em * var(--held, 0.5)) currentColor;
  }
  70% {
    transform: translateY(calc(-0.03em - 0.05em * var(--held, 0.5)))
      scale(calc(1.05 + 0.08 * var(--held, 0.5)));
    text-shadow:
      0 0 calc(0.12em + 0.15em * var(--held, 0.5)) currentColor,
      0 0 calc(0.3em + 0.45em * var(--held, 0.5)) currentColor,
      0 0 calc(0.3em + 0.45em * var(--held, 0.5)) currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-held-letter {
    animation: none;
  }
}

/* Instrumental interlude: three dots in `currentColor`, sized from the
   font so the same markup fits the immersive column and the mini-player.
   The fill is inline (`InterludeDots`); the breathing is here. */
.wf-interlude {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  animation: wf-interlude-breathe 2.4s ease-in-out infinite;
}
.wf-interlude__dot {
  width: 0.45em;
  height: 0.45em;
  border-radius: 9999px;
  background: currentColor;
  transition: opacity 250ms ease;
}
@keyframes wf-interlude-breathe {
  0%,
  100% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wf-interlude {
    animation: none;
  }
}

/* Artist hero backdrop cross-fade (issue #482) — opacity only, so a
   fanart swapping in over the blurred-photo fallback dissolves instead
   of popping. Skipped entirely under `prefers-reduced-motion`. */
@keyframes artistHeroFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@utility animate-breathing {
  animation: breathing 4.5s ease-in-out infinite;
}

/* Marquee — gently scrolls an overflowing single-line label end-to-end
   and back so long titles stay fully readable. `--marquee-shift` (the
   negative overflow width) + `animation-duration` are set inline by
   `MarqueeText`, which only mounts the animated branch when the text
   actually overflows. The pauses at 0/100 % (start) and 45–55 % (end)
   let the user read each extremity. */
@utility animate-marquee {
  animation: marquee 12s ease-in-out infinite;
}

@keyframes marquee {
  0%,
  12% {
    transform: translateX(0);
  }
  45%,
  55% {
    transform: translateX(var(--marquee-shift, 0px));
  }
  88%,
  100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-marquee {
    animation: none;
  }
}

/* WaveFlow Wrapped — story-style slide animations. The segment fill
   width drives the per-slide progress indicator at the top of the
   overlay; duration is overridden inline so the bar matches whatever
   SLIDE_MS the React component picks. */
.wrapped-segment {
  animation-name: wrappedSegmentFill;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  width: 0%;
}

@keyframes wrappedSegmentFill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.wrapped-fade-up {
  animation: wrappedFadeUp 0.5s ease-out;
}

.wrapped-fade-in {
  animation: wrappedFadeIn 0.6s ease-out;
}

@keyframes wrappedFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wrappedFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wrapped-fade-up,
  .wrapped-fade-in {
    animation: none;
  }
}

@keyframes breathing {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-breathing {
    animation: none;
  }
}

@keyframes playingBar {
  0%,
  100% {
    transform: scaleY(0.35);
  }
  50% {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .playing-indicator-bar {
    animation: none !important;
    transform: scaleY(0.6);
  }
}

/* Tailwind's `animate-spin` is a plain utility with no reduced-motion
   variant, and it has ~55 call sites -- the same reason as the
   `animate-fade-in` block above for one rule here rather than a
   `motion-safe:` on each of them.

   A stopped spinner still has to say "busy", so the convention at the
   call sites is to SWAP the idle icon for `Loader2` while working, never
   to spin the idle icon itself: a stopped `Loader2` still reads as
   loading, a stopped `RefreshCcw` reads as a plain button. */
@media (prefers-reduced-motion: reduce) {
  .animate-spin {
    animation: none;
  }
}

@utility scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

/* Themed scrollbars — thin, subtle, adaptive to light/dark mode */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(24, 24, 27, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease-out;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(24, 24, 27, 0.35);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark-mode scrollbar tone — light thumb on dark surface.
   Matches the same set of "dark-effective" roots as the
   extended `@custom-variant dark` declaration at the top of
   the file: explicit `.dark` class OR a dark-only skin
   (`data-skin="lounge"` / `data-skin="pulse"`) on the
   documentElement. Without the skin selectors, picking Lounge
   on top of a LIGHT theme left the scrollbar in light-mode
   tone (dark thumb on a dark glass body) = invisible. */
.dark ::-webkit-scrollbar-thumb,
:root[data-skin="lounge"] ::-webkit-scrollbar-thumb,
:root[data-skin="pulse"] ::-webkit-scrollbar-thumb,
:root[data-skin="fluid"] ::-webkit-scrollbar-thumb {
  background-color: rgba(244, 244, 245, 0.12);
}

.dark ::-webkit-scrollbar-thumb:hover,
:root[data-skin="lounge"] ::-webkit-scrollbar-thumb:hover,
:root[data-skin="pulse"] ::-webkit-scrollbar-thumb:hover,
:root[data-skin="fluid"] ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(244, 244, 245, 0.25);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(24, 24, 27, 0.18) transparent;
}

.dark *,
:root[data-skin="lounge"] *,
:root[data-skin="pulse"] *,
:root[data-skin="fluid"] * {
  scrollbar-color: rgba(244, 244, 245, 0.12) transparent;
}

/* View Transitions — custom radial reveal on theme toggle */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2;
}

/* Truncated headings must not lose their descenders.
 *
 * `truncate` is only ever applied to clip a long title HORIZONTALLY and
 * add the ellipsis — but it expands to `overflow: hidden`, which clips
 * BOTH axes. The vertical clipping is collateral damage: Tailwind pairs
 * `text-4xl` with a line-height of just 1.11x the font size, while most
 * fonts need ~1.2x for their full ascent + descent, so the tails of
 * g / j / p / q / y get shaved by a pixel or two.
 *
 * CSS offers no way to say "clip x, leave y alone" — the moment one axis
 * is `hidden`, the other can no longer be `visible`. `overflow-clip-margin`
 * is the way out: it widens the clip region WITHOUT reserving space, so
 * the descender is allowed to paint outside the box and no layout shifts.
 * Padding would work too, but it compensates for a symptom by pushing
 * everything below the heading down.
 *
 * Progressive enhancement: an engine without `overflow-clip-margin` (older
 * WebKitGTK) simply falls back to a plain clip — i.e. exactly today's
 * behaviour, never worse. `text-overflow: ellipsis` keeps working, since it
 * applies to any `overflow` other than `visible`.
 *
 * `:where()` keeps specificity at 0 so a component can still override.
 * Scoped to headings on purpose: the clipping is only perceptible at large
 * sizes, and blanket-applying it to every `.truncate` would touch hundreds
 * of small labels for no visible gain. Non-heading titles that are big
 * enough to show it (a `text-xl` card title, say) should opt in with the
 * same two declarations. */
:where(h1, h2, h3).truncate {
  overflow: clip;
  overflow-clip-margin: 0.125rem;
}

/* Global focus-visible fallback for keyboard users.
 *
 * Many components rely on Tailwind's `focus-visible:ring-*` per-button,
 * but plenty of icon buttons forgot it. `:where()` keeps specificity at
 * zero so any inline `focus-visible:ring-*` (or `focus:outline-none`)
 * still wins — this is a baseline, not an override. The colour reads
 * from the active theme's accent so the indicator harmonises with the
 * rest of the focus / hover states (was hardcoded `#10b981` which left
 * non-emerald presets with a mismatched green ring). */
:where(
  button,
  a,
  [role="button"],
  [role="link"],
  [role="menuitem"],
  [role="tab"],
  [role="option"],
  [tabindex]
):focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* No ring on what the mouse focused (#866), whatever key comes next.
 *
 * The browser paints `:focus-visible` on a clicked element as soon as any
 * key is pressed, so a desktop shortcut (Super+Q under Hyprland), a digit
 * or an F-key left a ring on the last row clicked until the next click.
 * `lib/inputModality.ts` marks an element focused by a pointer; keyboard
 * focus (Tab, arrows) is unmarked and keeps its ring. Unlayered, so it
 * also takes off Tailwind's `focus-visible:ring-*`, which lives in a
 * layer. High contrast keeps every ring (its own rule is more specific). */
[data-pointer-focus]:focus-visible {
  outline: none;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
}

/* Glassy chrome, opted in by the surfaces that carry a translucent
   background *behind text* (issue #596).
 *
 * High-contrast mode turns every `backdrop-filter` off. On a surface
 * that is also translucent that is a downgrade rather than a fix: the
 * blur was what turned the content scrolling underneath into a soft
 * wash, and without it the text sits directly over moving artwork and
 * rows. These surfaces therefore go fully opaque in the same breath.
 *
 * A marker class rather than a structural selector (`header.sticky`,
 * `div > div:first-child`) because the contract is "this surface is
 * legible only thanks to its blur", which is a property of the surface
 * and not of where it happens to sit in the tree. Decorative
 * translucency over a hero gradient does not take the class: white text
 * on a dark gradient is already past the contrast floor, and forcing it
 * opaque would flatten the hero for no legibility gain. */
:root[data-contrast="high"],
:root[data-webkitgtk-safe]:is([data-skin="lounge"], [data-skin="liquid"]) {
  --wf-contrast-surface: var(--color-surface-light);
}

:root[data-contrast="high"]:where(
    .dark,
    [data-skin="lounge"],
    [data-skin="pulse"],
    [data-skin="fluid"]
  ),
:root[data-webkitgtk-safe][data-skin="liquid"].dark {
  --wf-contrast-surface: var(--color-surface-dark);
}

/* Same specificity as the Linux light fallback above; keep Lounge's
   burgundy surfaces instead of painting white chrome on a dark skin. */
:root[data-webkitgtk-safe][data-skin="lounge"] {
  --wf-contrast-surface: rgb(12 6 11);
}

:root[data-contrast="high"] .wf-glass,
:root[data-webkitgtk-safe]:is([data-skin="lounge"], [data-skin="liquid"])
  .wf-glass {
  background-color: var(--wf-contrast-surface);
}

/* The mini-player window paints itself with a gradient sampled from the
   current cover, which is the one surface in the app whose contrast is
   decided by the user's music rather than by us: a bright album puts
   white text on a bright ground. In high contrast it becomes a flat
   dark panel.

   `!important` and `background-image` both: the gradient is an inline
   style, which no ordinary rule can outrank, and it is written with the
   `background` shorthand -- so a background-color alone would sit
   behind an image that is still there. Dark rather than
   `--wf-contrast-surface`, because everything in that window is
   `text-white`; the light value of that token would be the same defect
   with the colours swapped. */
:root[data-contrast="high"] .wf-mini-player-surface {
  background-image: none !important;
  background-color: var(--color-surface-dark) !important;
}

/* Same bargain for the blurred cover behind the mini-player's lyrics
   (#697): it is there for colour, and colour taken from the user's music
   is exactly what high contrast refuses. It is an `<img>`, not a
   background image, so the rule above cannot reach it. */
:root[data-contrast="high"] .wf-mini-lyrics-wash {
  display: none;
}