/* =========================================================
   THEME FIXES — loaded last, so these win over the component rules.
   =========================================================
   Measured against WCAG 2.2: text 4.5:1 (1.4.3), and 3:1 for the
   edges of anything you need to see to use it (1.4.11 Non-text
   Contrast: field boundaries, focus rings, meaningful icons).

   Before this file, on Day:
   - inputs (search, name, filters) were a fill 1.09:1 against the
     page, with no border: the field itself was nearly invisible;
   - cards were 1.10:1 against the page, so shelves read as loose
     images rather than cards;
   - the neon logo's glow is light pink, which disappears on cream.
   ========================================================= */

/* ---- Field edges: 3:1 in both themes ----
   Day #8f8174: 3.4:1 on the page, 3.1:1 against the field fill.
   Night #7d6f63: 3.9:1 on the page, 3.6:1 against the field fill. */
:root {
  --input-border: #7d6f63;
}

:root[data-theme="day"] {
  --input-border: #8f8174;
}

.search,
.prefs-input,
.playlist-edit-field input,
.playlist-edit-field textarea,
.library-view .library-search-input.expanded,
.song-picker-search,
.save-to-filter,
.ai-input-row,
.list-filter {
  border: 1px solid var(--input-border);
}

.search:focus-within,
.prefs-input:focus,
.playlist-edit-field input:focus,
.playlist-edit-field textarea:focus,
.library-view .library-search-input.expanded:focus,
.song-picker-search:focus-within,
.save-to-filter:focus,
.ai-input-row:focus-within,
.list-filter:focus-within {
  border-color: var(--pink);
}

/* ---- Day: cards separate from the page ----
   A light theme separates layers with a hairline and a soft warm
   shadow (the convention in light design systems, and what the
   reference layouts do), not with a lighter fill as Night does. */
:root[data-theme="day"] .hero,
:root[data-theme="day"] .queue-panel,
:root[data-theme="day"] .prefs-panel,
:root[data-theme="day"] .save-to-menu,
:root[data-theme="day"] .playlist-edit-modal,
:root[data-theme="day"] .sidebar {
  box-shadow:
    0 0 0 1px var(--border),
    var(--shadow-sm);
}

/* Outlined chips and secondary buttons: their labels identify them,
   but a 1.4:1 outline looked like no outline at all. */
:root[data-theme="day"] {
  --border-strong: rgba(60, 40, 25, 0.3);
}

/* ---- Preferences: the chosen option ----
   Pink text and the grey hint on a pink-tinted fill measured 4.3 to
   4.4:1. The choice is now an outline on the panel's own colour, so
   the pink label is 4.8:1 (Day) / 5.5:1 (Night), and hints use the
   muted grey (5.8:1+). */
.prefs-option:has(input:checked) {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--pink);
}

.prefs-option-hint {
  color: var(--text-muted);
}

/* =========================================================
   STATES: hover, focus, active (audited state by state, both themes)
   ========================================================= */

/* ---- Shelf rows ----
   Desktop: one row of whole cards that fills the width, no sideways
   scrolling (js/home-view.js's fitShelfRow sets --shelf-columns and
   hides what doesn't fit; "Show all" opens the rest). Nothing is
   clipped, so a hovered card's lift and shadow show in full.
   Touch: the swipeable row stays. A scrolling row clips vertically
   too (overflow-x: auto forces overflow-y to clip), so it gets room
   for the hover lift and shadow; the negative margin keeps the
   layout where it was. */
@media (min-width: 768px) {
  .home-shelf-row {
    display: grid;
    grid-template-columns: repeat(var(--shelf-columns, 6), minmax(0, 1fr));

    gap: 16px;
    padding: 0;

    overflow: visible;
  }

  .home-shelf-row .home-card {
    width: auto;
  }
}

@media (max-width: 767px) {
  .home-shelf-row {
    padding: 8px 8px 22px;
    margin: -6px -8px -12px;

    scroll-padding-inline: 8px;
  }
}

/* ---- Song cards: the artwork is the card ----
   The pattern Spotify and Apple Music use for album and song tiles:
   no box, border, shadow or lift at rest; the artwork and title carry
   the tile. Hover adds a soft fill behind it and a play button on the
   artwork, so it's clear the tile plays. Earlier this was a boxed card
   with a hairline, a drop shadow and a 2px lift on hover: the light-
   theme "elevated card" pattern, which suits shop listings, not
   artwork grids, and made a wall of song tiles look heavy.
   Floating layers (menus, the queue, dialogs) keep their shadows:
   they really do sit above the page. */
.home-shelf-row .home-card {
  background: transparent;
  box-shadow: none;
}

.home-shelf-row .home-card:hover {
  background: var(--fill-hover);
  box-shadow: none;
  transform: none;
}

/* The tile's padding is only visible on hover, so pull the row out by
   it: at rest the artwork lines up with the shelf title above. */
@media (min-width: 768px) {
  .home-shelf-row {
    margin-inline: -10px;
  }
}

.home-card-cover {
  position: relative;
}

/* A faint inner edge, so a mostly white cover doesn't melt into the
   cream page (Apple Music does the same on its artwork). */
.home-card-cover::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);

  pointer-events: none;
}

.home-card-play {
  position: absolute;
  right: 8px;
  bottom: 8px;

  z-index: 1;

  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--pink-fill);
  color: #fff;

  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);

  opacity: 0;
  transform: translateY(6px);

  /* Leaving: 150 ms, speeding up. Arriving (below): 200 ms, slowing
     down. Exits need less attention than entrances (Material motion). */
  transition:
    opacity 150ms var(--ease-in),
    transform 150ms var(--ease-in);
}

.home-card-play svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.home-card:hover .home-card-play,
.home-card:has(.home-card-open:focus-visible) .home-card-play {
  opacity: 1;
  transform: none;

  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-out);
}

/* A song card is a group of two buttons (js/home-view.js): a full-size
   one that plays, and "More" for its menu. */
.home-card {
  position: relative;
}

.home-card-open {
  position: absolute;
  inset: 0;
  z-index: 1;

  padding: 0;

  border: none;
  border-radius: inherit;

  background: none;

  cursor: pointer;
}

.home-card-open:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

.home-card-more {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;

  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  padding: 0;

  border: none;
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.55);
  color: #fff;

  cursor: pointer;

  opacity: 0;

  transition: opacity 150ms var(--ease-in);
}

.home-card-more svg {
  width: 16px;
  height: 16px;
}

.home-card:hover .home-card-more,
.home-card:focus-within .home-card-more {
  opacity: 1;

  transition: opacity var(--dur-base) var(--ease-out);
}

/* Home's sections arrive with a short rise, a few at a time, instead
   of all popping in at once when the page renders or redraws (after
   "Don't recommend", say). Transform only: no layout shift. Reduced
   motion turns it off with every other animation. */
#homeShelves > * {
  animation: view-enter var(--dur-base) var(--ease-out) both;
}

#homeShelves > :nth-child(2) { animation-delay: 40ms; }
#homeShelves > :nth-child(3) { animation-delay: 80ms; }
#homeShelves > :nth-child(4) { animation-delay: 120ms; }
#homeShelves > :nth-child(n + 5) { animation-delay: 160ms; }

/* No hover on touch: "More" is always there (44 px to tap). */
@media (hover: none) {
  .home-card-more {
    width: 44px;
    height: 44px;

    top: 10px;
    right: 10px;

    opacity: 1;
  }
}

@media (hover: none) {
  .home-card-play {
    display: none;
  }
}

/* ---- Mood tiles, Continue listening, the AI bar ----
   Flat fills, no border and no shadow, the same quiet surface in both
   themes; hover is a fill change, never a lift. */
.mood-grid .home-card,
.continue-card {
  border-color: transparent;
  box-shadow: none;
}

.mood-grid .home-card:hover {
  background: var(--surface-alt);
  box-shadow: none;
  transform: none;
}


/* ---- Quiet controls on hover ----
   The sort button went pink while every other secondary control goes
   grey; it now uses --fill-hover like the rest. */
.library-sort-btn:hover {
  background: var(--fill-hover);
  color: var(--text);
}

/* ---- Sliders: focus on the knob, not a box ----
   The generic input focus outline drew a rectangle around the whole
   volume slider. Keyboard focus now rings the knob instead. */
input[type="range"]:focus-visible {
  outline: none;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 5px var(--pink);
}

input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 5px var(--pink);
}

/* "Show all": a clear text link (bold, underline on hover), the way
   Spotify marks the way into a full shelf. */
.home-shelf-see-all {
  font-weight: 700;
}

.home-shelf-see-all:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Eight moods: always balanced rows on desktop (4 + 4, or one row of
   8 when there's room), never 6 + 2 with two orphans. */
@media (min-width: 768px) {
  .mood-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1800px) {
  .mood-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/* =========================================================
   HOME: quick tiles + Picked for you (js/home-view.js)
   =========================================================
   Between Spotify and Apple Music: Spotify's quick-play grid at the
   top (your things, one click from playing), then one row of large
   artwork cards with Apple-style editorial labels. Section spacing is
   36px: a little more air than Spotify, less than Apple. */
.home-shelves {
  gap: 36px;
}

/* ---- Quick tiles ---- */
.home-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 10px;
}

@media (max-width: 1100px) {
  .home-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-quick-tile {
  position: relative;

  height: 60px;

  display: flex;
  align-items: center;

  gap: 12px;
  padding-right: 52px;

  border-radius: var(--radius-md);
  overflow: hidden;

  background: var(--surface);
  color: var(--text);

  cursor: pointer;

  transition: background var(--dur-fast) var(--ease-out);
}

.home-quick-tile:hover {
  background: var(--surface-alt);
}

/* The whole tile is its "open" button (js/home-view.js); the play
   button sits above it. */
.home-tile-open {
  position: absolute;
  inset: 0;

  z-index: 0;

  border: none;
  border-radius: inherit;

  background: transparent;

  cursor: pointer;
}

.home-tile-open:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
}

.home-quick-cover,
.home-quick-title,
.home-hero-art,
.home-hero-text {
  pointer-events: none;
}

.home-quick-cover {
  width: 60px;
  height: 60px;

  flex-shrink: 0;
}

/* An artist tile: a round photo, inset, the way apps mark an artist. */
.home-quick-tile.is-artist .home-quick-cover {
  padding: 6px;
}

.home-quick-tile.is-artist .home-quick-cover img {
  border-radius: 50%;
}

.home-quick-cover img,
.drawn-cover {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  object-fit: cover;

  color: #fff;

  font-weight: 800;
}

.drawn-cover svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

/* Titles wrap to a second line before they're cut: a name cut to
   "Punja..." can't be told apart from any other. */
.home-quick-title {
  min-width: 0;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  font-size: var(--fs-body-lg);
  font-weight: 700;
  line-height: 1.2;
}

/* Touch screens have no hover, so the play button only shows on the
   tile that's playing: don't hold its space on the rest. Narrow
   windows can't spare it either; there it appears over the title on
   hover. */
@media (hover: none), (max-width: 600px) {
  .home-quick-tile:not(.is-current) {
    padding-right: 12px;
  }
}

/* One play button for tiles and hero cards: appears on hover/focus. */
.home-tile-play {
  position: absolute;

  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border: none;
  border-radius: 50%;

  background: var(--pink-fill);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);

  opacity: 0;
  transform: translateY(4px);

  cursor: pointer;

  /* Leaves in 150 ms speeding up; arrives (on hover, below) in
     200 ms slowing down. */
  transition:
    opacity 150ms var(--ease-in),
    transform 150ms var(--ease-in),
    background var(--dur-fast) var(--ease-out);
}

.home-tile-play svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.home-tile-play:hover {
  background: var(--pink-fill-hover);
}

.home-tile-play:active {
  transform: scale(0.94);
}

.home-quick-tile .home-tile-play {
  z-index: 1;

  top: 10px;
  right: 10px;

  width: 36px;
  height: 36px;
}

.home-quick-tile:hover .home-tile-play,
.home-quick-tile:focus-within .home-tile-play,
.home-hero-card:hover .home-tile-play,
.home-hero-card:focus-within .home-tile-play {
  opacity: 1;
  transform: none;

  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

/* ---- Picked for you: one row of large cards ----
   Extra cards that don't fit the width are clipped as whole cards
   (later grid rows have 0 height), never cut in half. */
.home-hero-row {
  display: grid;
  /* auto-fit, not auto-fill: the cards stretch to fill the row instead
     of leaving empty columns on wide screens (at 2560px, 4 cards took
     40% of the width). */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-template-rows: auto;
  grid-auto-rows: 0;

  column-gap: 16px;

  overflow: hidden;
}

.home-hero-card {
  position: relative;

  /* Height follows the window, width fills the column: tall, poster-
     like cards on laptops, wider ones on very wide screens, never so
     tall they push the rest of Home off screen. The artwork covers. */
  height: clamp(260px, 24vw, 440px);

  border-radius: var(--radius-lg);
  overflow: hidden;

  background: var(--surface-alt);

  cursor: pointer;
}

.home-hero-card .home-tile-open {
  z-index: 1;
}

.home-hero-art,
.home-hero-art img,
.home-hero-drawn {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.home-hero-art img {
  transition: transform 600ms var(--ease-out);
}

.home-hero-card:hover .home-hero-art img {
  transform: scale(1.03);
}

/* Drawn covers (moods): the name set large, the way Apple Music's
   own playlists carry their title as the artwork. */
.home-hero-drawn {
  display: grid;
  place-items: center;

  padding: 20px;
}

.home-hero-drawn-title {
  color: #fff;

  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

/* Bottom label over a dark fade, white text in both themes (it sits
   on artwork, not on the page). The fade stays dark behind all three
   lines and only clears above them: on white artwork that keeps the
   kicker at 6:1 (it was 1.7:1 with a straight fade; WCAG 1.4.3). */
.home-hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
  padding: 64px 16px 16px;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.7) 62%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
}

.home-hero-kicker {
  color: rgba(255, 255, 255, 0.78);

  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.home-hero-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.25;
}

.home-hero-sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  color: rgba(255, 255, 255, 0.78);

  font-size: var(--fs-body-sm);
}

/* Drawn cards already say their name in the middle. */
.home-hero-card.is-drawn .home-hero-title {
  display: none;
}

.home-hero-card .home-tile-play {
  right: 14px;
  bottom: 14px;

  z-index: 2;
}

.home-hero-card .home-hero-text {
  padding-right: 64px;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-art img,
  .home-tile-play {
    transition: none;
  }
}

/* The tile or card whose list is playing: pink title, and its
   pause button stays visible (js/home-view.js, refreshHomePlayState). */
.home-quick-tile.is-current .home-quick-title {
  color: var(--pink);
}

.home-quick-tile.is-current .home-tile-play,
.home-hero-card.is-current .home-tile-play {
  opacity: 1;
  transform: none;
}

/* Home, when the music service can't be reached (js/home-view.js). */
.home-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;
  padding: 14px 16px;

  border-radius: var(--radius-md);

  background: var(--surface-alt);
}

.home-notice-text {
  display: flex;
  flex-direction: column;

  gap: 2px;

  color: var(--text-muted);

  font-size: var(--fs-body-sm);
}

.home-notice-text strong {
  color: var(--text);

  font-size: var(--fs-body);
}

.home-notice-retry {
  flex-shrink: 0;

  padding: 8px 16px;

  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);

  background: transparent;
  color: var(--text);

  font: inherit;
  font-size: var(--fs-body-sm);
  font-weight: 700;

  cursor: pointer;
}

.home-notice-retry:hover {
  background: var(--fill-hover);
}