/* view: cover */
/*
 * The cover (canvas 2a) and its ⋯ (4c). Dark: main.js sets
 * body[data-tone="dark"] on this route, so the tone tokens (--bg, --fg,
 * --fg-muted, --accent, --line-strong …) are already the night ones. Every
 * colour here is a listen.css token; the only literals are the still's
 * shade, which is the night colour at the canvas's alphas.
 *
 * Tap floor: every pressed thing is at least var(--tap) tall (the canvas
 * draws the chips at 32 and the flag pills at 40; the build lifts both).
 *
 * At ≥ 900px the page is two columns (Claude Design "Desktop", 1f): the
 * block at the end, which reuses the play's and the menu's literals.
 */

.cover {
  position: relative;
}

/* ---- the hero: a full-bleed still; the player is the drawer ---------- */

.cover-hero {
  position: relative;
  height: 400px;
  background: var(--still-bg) center / cover no-repeat;
  overflow: hidden;
}

.cover-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(16 15 12 / 30%) 0%,
    rgb(16 15 12 / 0%) 30%,
    rgb(16 15 12 / 55%) 65%,
    var(--night) 100%
  );
}

.cover-top {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.cover-top-end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.cover-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: rgb(16 15 12 / 50%);
  color: var(--night-ink);
  font: 600 var(--t-meta) / 1.2 var(--sans);
}

.cover-chip:hover {
  text-decoration: none;
}

.cover-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cover-explore-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px dashed var(--night-teal);
}

.cover-more {
  background: rgb(16 15 12 / 50%);
  border-color: var(--night-line);
  color: var(--night-ink);
  font-size: 18px;
}

.cover-play {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgb(242 239 230 / 92%);
  color: var(--night);
  font-size: 22px;
  line-height: 1;
}

.cover-foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 14px;
}

.cover-line {
  font-size: var(--t-meta);
  font-style: italic;
  color: var(--night-muted);
}

.cover-line a {
  color: var(--night-ink);
  font-style: normal;
  font-weight: 500;
  /* the doors to the room and the originator: a tap tall without moving
     the line (padding and margin cancel in the line box) */
  display: inline-block;
  position: relative;
  padding-block: 13px;
  margin-block: -13px;
}

/* The name's link paints over the line's reach above it. */
.cover-name a {
  position: relative;
}

.cover-name {
  margin-top: 4px;
  font-size: var(--t-name-xl);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--night-ink);
  text-wrap: balance;
}

.cover-name a {
  color: inherit;
}

/* Their avatar and "sung by": the wide screen's (the block at the end). */
.cover-avatar,
.cover-sung {
  display: none;
}

.cover-meta {
  margin-top: 6px;
  font-size: var(--t-small);
  color: var(--night-muted);
}

/* Views and likes, whole; the hover text is the QA score (2026-10-14). */
.cover-counts {
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ---- the two big verbs, then the two ways out to YouTube ------------- */

.cover-verbs,
.cover-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px var(--gutter) 0;
}

.cover-links {
  padding-top: 8px;
}

/*
 * The listener's own taste beside the Save (ledger 449): Save this person,
 * Not this song, Not them — quieter than the two big verbs, a pill each,
 * one row on a 390px phone (the pills' sides are 12px, not 16, so the door
 * under the ways out stays above the dock), wrapping only narrower; then
 * what a set-aside did, with its Undo.
 */
.cover-taste {
  padding: 8px var(--gutter) 0;
}

.cover-taste-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cover-taste-verb {
  flex: 1 1 auto;
  padding: 0 12px;
  border-color: var(--night-line);
  color: var(--night-ink);
}

.cover-taste-verb[aria-pressed="true"] {
  background: var(--night-ink);
  border-color: var(--night-ink);
  color: var(--night);
}

.cover-aside {
  margin-top: 4px;
  color: var(--night-muted, var(--fg-muted));
}

.cover-aside .aside-undo {
  color: var(--night-teal);
}

.cover-verb,
.cover-subscribe,
.cover-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  font: 700 var(--t-body) / 1.2 var(--sans);
  text-align: center;
}

.cover-verb {
  min-height: 48px;
  border: 1px solid var(--night-line);
  color: var(--night-ink);
}

.cover-verb[aria-pressed="true"] {
  background: var(--night-teal);
  border-color: var(--night-teal);
  color: var(--night);
}

.cover-subscribe,
.cover-open {
  min-height: var(--tap);
  padding: 0 10px;
  font-size: 13px;
}

.cover-subscribe:hover,
.cover-open:hover {
  text-decoration: none;
}

.cover-subscribe {
  background: var(--youtube-red);
  color: var(--on-red);
}

.cover-open {
  border: 1px solid var(--night-line);
  color: var(--night-ink);
}

/* With no channel to subscribe to, Open on YouTube takes the row. */
.cover-open:only-child {
  grid-column: 1 / -1;
}

.cover-said {
  padding: 8px var(--gutter) 0;
}

/* ---- the rails ------------------------------------------------------- */

.cover-rail .label {
  color: var(--night-muted);
}

.cover-rail .section-head a {
  color: var(--night-teal);
}

.cover-rail .rail {
  padding-bottom: 4px;
  /* snap to the gutter, not the edge: without it the snap scrolls the
     first card flush against the screen's edge on arrival */
  scroll-padding-inline: var(--gutter);
}

.cover-card {
  width: 112px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cover-card-still {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-tile);
  background: var(--still-bg) center / cover no-repeat;
}

.cover-card-name {
  margin-top: 2px;
  font-size: var(--t-body);
  /* the card's door to the other cover: a tap tall, one line */
  display: block;
  min-height: var(--tap);
  line-height: var(--tap);
  color: var(--night-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cover-card-sub {
  font-size: 11.5px;
  color: var(--night-muted);
}

.cover-card-memory {
  font-size: 11.5px;
  color: var(--night-teal);
}

/* ---- the ⋯ menu: a light card in the dark page (4c) ------------------ */

.cover-menu {
  /* light tokens inside: the card is the listener's, on the artist's page */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --line: var(--rule);
  --line-strong: var(--rule-strong);
  --accent: var(--teal);
  --on-accent: var(--paper-alt);
  --surface: var(--card);

  position: absolute;
  z-index: 5;
  top: calc(14px + var(--tap) + 10px);
  right: var(--gutter);
  width: min(360px, calc(100% - 2 * var(--gutter)));
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  border-radius: var(--r-card);
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 20px 40px -20px rgb(0 0 0 / 60%);
}

.cover-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--tap);
  padding: 0 16px;
  font: 600 13.5px / 1.25 var(--sans);
  color: var(--fg);
  text-align: left;
}

.cover-menu-glyph {
  color: var(--fg-muted);
}

.cover-menu-picks {
  display: flex;
  gap: 8px;
  padding: 0 16px 8px;
}

.cover-menu-picks .pill {
  min-height: var(--tap);
  font-size: var(--t-meta);
}

.cover-menu-field {
  min-height: var(--tap);
  min-width: 0;
  flex: 1;
  margin: 0 16px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--fg);
  font-size: 16px; /* 16px stops a phone zooming into the field */
}

.cover-menu-suggest {
  display: flex;
  gap: 8px;
  padding: 0 16px 8px;
}

.cover-menu-suggest .cover-menu-field {
  margin: 0;
}

.cover-menu-rule {
  margin: 6px 16px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
}

/* "Report a mix-up": each claim is a sentence, so one per row (ledger 449) */
.cover-menu-flags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 8px;
}

.cover-menu-flag {
  min-height: var(--tap);
  padding: 6px 14px;
  text-align: left;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink);
  font: 600 var(--t-small) / 1.2 var(--sans);
  color: var(--ink);
}

.cover-menu-flag[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper-alt);
}

.cover-menu-undo {
  padding: 0 16px 6px;
  font-size: var(--t-meta);
  color: var(--fg-muted);
}

.cover-menu-undo-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 4px;
  color: var(--teal);
  font-weight: 700;
}

.cover-menu-said {
  padding: 4px 16px 8px;
}

/* ---- the door to the universe: one chip under the ways out ------------ */

.cover-door-row {
  padding: 8px var(--gutter) 0;
}

.cover-door {
  max-width: 100%;
  background: var(--night-card);
}

.cover-door-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky-heard);
}

/* ---- a link that is not a recording ---------------------------------- */

.cover-bad {
  padding: 48px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.cover-bad .cover-name {
  font-size: var(--t-head);
  line-height: 1.25;
}

.cover-bad .cover-chip {
  background: var(--night-card);
}

/* ---- the wide screen (≥ 900px) ----------------------------------------- */

/*
 * Claude Design "Desktop", 1f (2026-10-17): "the still is 800px with the
 * person beside it, so song, person and verbs are one glance." The hero
 * steps aside (display: contents) and its parts join the page's grid: the
 * still on the left is the play; the song, the person, the verbs and the
 * ways out stack at 360 beside it; the rails run under both. The right
 * column's rows are each their own height, and the last row beside the
 * still (1fr) takes whatever the still is taller by. A link that is not a
 * cover keeps its own page.
 */
@media (min-width: 900px) {
  .cover:not(.cover-bad) {
    --gutter: 0px;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: repeat(7, auto) 1fr auto auto;
    grid-template-areas:
      "top top"
      "still foot"
      "still verbs"
      "still taste"
      "still links"
      "still door"
      "still said"
      "still ."
      "same same"
      "mine mine";
    column-gap: 60px;
    align-items: start;
    padding: 8px 40px 60px;
  }

  /* The ground: the still itself, blurred and faint, fading into the
     night — "the still's own colour, blurred, is the only ground; no
     invented tint." The page starts under the top line, not at the
     window's top as drawn, so the mask is a glow behind the still and the
     song that is gone before every edge: no seam where the page begins,
     and the blur never spills past it. */
  .cover:not(.cover-bad)::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 640px;
    background: var(--still) center / cover no-repeat;
    filter: blur(60px);
    opacity: 0.25;
    mask-image: radial-gradient(
      closest-side at 50% 40%,
      rgb(0 0 0 / 70%) 30%,
      transparent
    );
    pointer-events: none;
  }

  .cover-hero {
    display: contents;
  }

  .cover-shade {
    display: none;
  }

  .cover-top {
    grid-area: top;
    position: static;
    padding-bottom: 20px;
  }

  .cover-top .cover-chip {
    padding: 0;
    background: none;
    color: var(--night-teal);
  }

  .cover-chip-text {
    overflow: visible;
    white-space: normal;
  }

  .cover-menu {
    top: calc(8px + var(--tap) + 8px);
    right: 40px;
  }

  /* The still is the play: the whole picture is pressed, the ▶ on it. */
  .cover-play {
    grid-area: still;
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    background:
      radial-gradient(
          circle closest-side,
          rgb(242 239 230 / 92%) 97%,
          transparent
        )
        center / 72px 72px no-repeat,
      var(--still-bg) var(--still) center / cover no-repeat;
    box-shadow: 0 40px 80px -30px rgb(0 0 0 / 80%);
    font-size: 24px;
  }

  /* Beside it the song leads, its title lifted out of the line; then the
     person, second: their avatar, "sung by" their name, the facts. */
  .cover-foot {
    grid-area: foot;
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding-top: 6px;
  }

  .cover-line {
    grid-column: 1 / -1;
    margin-bottom: 18px;
    font-size: var(--t-body);
  }

  .cover-line .cover-line-song {
    display: block;
    width: fit-content;
    margin-block: 8px 10px;
    padding-block: 0;
    font: 300 44px / 1 var(--serif);
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .cover-avatar {
    display: block;
    grid-row: span 3;
    width: 44px;
    height: 44px;
    margin-right: 12px;
    border-radius: 8px;
    background: var(--still-bg) center / cover no-repeat;
  }

  .cover-sung {
    display: inline;
  }

  .cover-name,
  .cover-meta,
  .cover-counts {
    grid-column: 2;
  }

  /* With no song to lead (a cover we do not hold), the name is the title. */
  .cover-name {
    margin-top: 0;
    font: 300 44px / 1 var(--serif);
    letter-spacing: -0.03em;
  }

  .cover-foot:has(.cover-line-song) .cover-name {
    font: 400 var(--t-head) / 1.15 var(--serif);
    letter-spacing: -0.01em;
  }

  /* the name's door a tap tall without moving the line */
  .cover-name a {
    padding-block: 10px;
  }

  .cover-meta {
    margin-top: 4px;
  }

  /* Queue leads, filled; Save is the accent's outline (as drawn). */
  .cover-verbs {
    grid-area: verbs;
    margin-top: 22px;
  }

  .cover-verb[data-k="queue"]:not([aria-pressed="true"]) {
    background: var(--night-ink);
    border-color: var(--night-ink);
    color: var(--night);
  }

  .cover-verb[data-k="keep"]:not([aria-pressed="true"]) {
    border-color: var(--night-teal);
  }

  .cover-taste {
    grid-area: taste;
  }

  .cover-links {
    grid-area: links;
  }

  .cover-door-row {
    grid-area: door;
    padding-top: 14px;
  }

  .cover-said {
    grid-area: said;
  }

  /* The rails, wide: one row each, as drawn — the other people who sing
     it as faces six across, their other songs as stills five across;
     "all N →" is the door to the rest. */
  .cover-rail-same {
    grid-area: same;
  }

  .cover-rail-mine {
    grid-area: mine;
  }

  .cover-rail .section-head {
    margin-bottom: 14px;
    padding: 56px 0 8px;
    border-bottom: 1px solid var(--night-rule);
  }

  .cover-rail-mine .section-head {
    padding-top: 44px;
  }

  .cover-rail .label {
    font: 400 var(--t-head) / 1.2 var(--serif);
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--night-ink);
  }

  /* Every card the phone's rail holds, in one row: each an equal share
     (six across with six, eight with eight). The same covers at every
     width; "all N →" leads to the rest. */
  .cover-rail .rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 16px;
    overflow: visible;
    padding: 4px 0;
  }

  .cover-card {
    width: auto;
  }

  /* Both rails are covers, so both are stills, rectangles at every width
     (engineering's call, 2026-10-18: the canvas cut the same-song stills
     round because its data held no faces; a person is round only as a
     face, a cover is its still). */
  .cover-rail-same .cover-card-still,
  .cover-rail-mine .cover-card-still {
    aspect-ratio: 16 / 9;
    border-radius: var(--r-thumb);
  }

  /* names wrap, never cut: a tap tall at least */
  .cover-card-name {
    padding-top: 4px;
    font-size: 16px;
    line-height: 1.15;
    white-space: normal;
    overflow: visible;
  }

  .cover-bad {
    padding: 48px 40px;
  }
}