/* view: room ------------------------------------------------------------
 * Artboard 4a (the room), with 1a's row anatomy. Light: the room is the
 * listener's to walk; the stills inside it are the artists'. Tokens are
 * listen.css's; nothing here defines a colour of its own. At 900px and
 * wider the page is two columns, the song held in view beside its rows
 * (Claude Design "Desktop", 2026-10-17, artboard 1e) — the block at the end.
 */

.room-head {
  padding: 10px var(--gutter) 0;
}

.room-by {
  font-size: var(--t-meta);
  color: var(--fg-muted);
}

.room-by a {
  color: var(--fg);
  font-weight: 600;
}

/* The original artist's link: a tap tall without moving the line — an
   inline box's vertical padding grows the hit area, not the line. */
.room-by a {
  padding-block: 14px;
}

.room-title {
  margin-top: 4px;
  font-size: var(--t-title);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.room-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--fg-muted);
}

.room-queue-all {
  flex: none;
  border-color: var(--accent);
  color: var(--accent);
  font-size: var(--t-small);
  padding: 0 14px;
}

/* While nothing sounds the button plays: the room's one filled control. */
.room-play-all {
  background: var(--accent);
  color: var(--on-accent);
}

/* The arithmetic under the button, and the order: small, one line each,
   wrapping on a phone rather than cut. */
.room-queue-line,
.room-order {
  margin-top: 6px;
  font-size: var(--t-meta);
  line-height: 1.35;
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* The door to the universe, and the room as a YouTube playlist under the
   button: one link line each, the tap floor tall. */
.room-universe,
.room-youtube {
  margin-top: 2px;
  font: 600 var(--t-meta) / 1.35 var(--sans);
}

.room-universe a,
.room-youtube a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--accent);
}

.room-main {
  margin-top: 12px;
}

/* A row: number (the cover), still (a play), who, + Queue. Phone first:
   at 390 the name is the field that tells versions apart, so the number
   and the still give it the width (cold review 2026-10-09: names cut at
   about 12 characters, the → laid out past the screen). */
.room-row {
  display: grid;
  grid-template-columns: 28px 64px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: var(--row-min);
  padding: 10px var(--gutter);
  border-top: 1px solid var(--line);
}

.room-n {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 12px;
  /* muted, not faint: the number holds 4.5:1 on paper and on the heard
     rows' ground (faint was 2.4:1). It is a place, not a link — the name
     is the row's way to its cover (ledger 349). */
  color: var(--fg-muted);
}

@media (min-width: 561px) {
  .room-row {
    grid-template-columns: var(--tap) 92px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .room-n {
    font-size: 14px;
  }
}

.room-still {
  position: relative;
  width: 100%;
  /* a tap tall at the phone's narrower still: the picture crops a little
     at the sides rather than the press shrinking under 44 */
  min-height: var(--tap);
}

/* Heard rows: no chip on the still ("Play again" is in its label). */
.room-row-heard .room-row[data-playing="true"] .room-who {
  min-width: 0;
}

/* The name wraps; it is never cut. A name with no space in it breaks
   anywhere rather than push the row wider than the screen. */
.room-name {
  display: block;
  overflow-wrap: anywhere;
  font-size: var(--t-field);
  line-height: 1.15;
  color: var(--fg);
  /* the cover's link: a tap tall without moving the row — the hit area
     reaches over the meta and memory lines, which are not pressed */
  position: relative;
  padding-block: 12.5px;
  margin-block: -12.5px;
}

.room-arrow {
  color: var(--accent);
}

.room-version,
.room-meta,
.room-counts,
.room-memory {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

/* Views and likes, whole; the hover text is the QA score (2026-10-14). */
.room-counts {
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* What the title says this version is: piano · English. */
.room-version {
  color: var(--fg);
  font-weight: 600;
}

.room-meta {
  color: var(--fg-muted);
}

.room-memory {
  color: var(--accent);
  font-weight: 600;
}

/* Heard rows fold below the line: full colour, on the heard ground. */
.room-row-heard {
  background: var(--heard-bg);
}

/* The folds: a full-width head with its count and a chevron. */
.room-fold-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--tap);
  padding: 12px var(--gutter);
  border-top: 1px solid var(--line);
  font: 700 var(--t-small) / 1.3 var(--sans);
  color: var(--fg-muted);
  cursor: pointer;
  list-style: none;
}

/* The label and, under it, its one-line reason. */
.room-fold-words {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.room-fold-why {
  font-weight: 400;
  font-size: var(--t-meta);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.room-fold-head::-webkit-details-marker {
  display: none;
}

.room-fold-head::after {
  flex: none;
  margin-left: 12px;
  content: "⌄";
  color: var(--fg-muted);
}

.room-fold[open] > .room-fold-head::after {
  content: "⌃";
}

/* Saved, then heard, at the top of the room on the heard ground: the fold
   head's strip, arriving open. */
.room-part-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--tap);
  padding: 12px var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--heard-bg);
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}

.room-part-label {
  margin: 0;
  font: 700 var(--t-small) / 1.3 var(--sans);
}

.room-part-head::-webkit-details-marker {
  display: none;
}

.room-part-head::after {
  flex: none;
  margin-left: 12px;
  content: "⌄";
  color: var(--fg-muted);
}

.room-part[open] > .room-part-head::after {
  content: "⌃";
}

/* A thin room hands the listener YouTube. */
.room-thin {
  margin: 18px var(--gutter) 0;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  font-size: 13px;
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* The way out to YouTube: a tap tall. */
.room-thin a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
}

/* ---- the wide screen (≥ 900px) ---------------------------------------
   Two columns: the song at the left, 400px, held in view while its rows
   scroll at the right (the hold is --hold-top, set by render from
   hold.js). The header keeps the phone's order; the rows gain a 128px
   still and a 22px name. The page keeps its tone at every width (a paper
   tone for the song alone, as the canvas draws it, would be the whole
   site's call, not this sheet's). */
@media (min-width: 900px) {
  .room {
    --gutter: 0px;
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 80px;
    align-items: start;
    padding: 36px 40px 60px;
  }

  .room-head {
    position: sticky;
    top: var(--hold-top, 24px);
    padding: 0;
  }

  .room-by {
    font-size: 15px;
    color: var(--body-ink);
  }

  /* At most 64px, as large as the longest word allows (room.js
     TITLE_WIDE): a word is never broken inside; kana and Han break between
     characters by the strict rules. */
  .room-title {
    margin-top: 10px;
    font-size: var(--title-wide, 64px);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.03em;
  }

  .room-title.is-whole {
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .room-title.is-cjk {
    line-break: strict;
    overflow-wrap: normal;
  }

  /* The count, and the room's button under it, the column's one verb. */
  .room-count {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 18px;
    font-size: 13.5px;
  }

  .room-queue-all {
    width: 100%;
    max-width: 320px;
    min-height: 48px;
    font-size: 14px;
  }

  .room-queue-line,
  .room-order {
    margin-top: 10px;
    font-size: var(--t-small);
  }

  .room-universe,
  .room-youtube {
    margin-top: 6px;
    font-size: 13px;
  }

  /* The rows' column keeps a small inset, so a heard row's ground and a
     strip's head do not run flush against their words. */
  .room-work {
    --gutter: 12px;
  }

  .room-main {
    margin-top: 0;
  }

  /* The number's column narrows to the numeral (the canvas's 32px); its
     link to the cover stays a tap tall. */
  .room-row {
    grid-template-columns: 32px 128px minmax(0, 1fr) auto;
    column-gap: 18px;
    min-height: 92px;
  }

  .room-n {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
  }

  .room-name {
    font-size: 22px;
    line-height: 1.1;
  }

  .room-version,
  .room-meta,
  .room-counts,
  .room-memory {
    font-size: var(--t-small);
  }

  .room-thin {
    margin-top: 24px;
  }
}

/* After the covers, never among them: the medleys and mashups this song is
   a part of (ledger 390). A plain heading on the page's own ground, then
   rows like the covers' with no number; under each name, the video's own
   line — its title, where the song stands in it, and "from 2:02", a link to
   the video at that second. */
.room-also {
  margin-top: 18px;
}

.room-also-label {
  margin: 0;
  padding: 12px var(--gutter) 6px;
  border-top: 1px solid var(--line);
  font: 700 var(--t-small) / 1.3 var(--sans);
  color: var(--fg-muted);
}

.room-also-line {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

.room-also-line > * + *::before {
  content: " · ";
  color: var(--fg-muted);
}

.room-also-title {
  color: var(--fg);
}

/* "3 of 5" and "from 2:02" never break inside */
.room-also-place,
.room-also-from {
  white-space: nowrap;
}

.room-also-from {
  color: var(--accent);
  /* a tap tall without moving the line */
  padding-block: 12px;
}