/* view: home — home (3a) and arriving without a song (3d).
 * Built on listen.css's tokens and shared parts (.section-head, .label,
 * .round, .rail, .still, .meta, .serif); nothing here redefines a token. */

/* ---- the head: wordmark, ⌕ and ◇ ------------------------------------- */

.home-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px var(--gutter) 0;
}

.home-wordmark {
  font: 400 var(--t-head) / 1.1 var(--serif);
  letter-spacing: -0.02em;
}

.home-icons {
  display: flex;
  gap: 8px;
}

.home-icons .round {
  background: transparent;
  text-decoration: none;
  color: var(--fg);
}

.home-kept-icon {
  position: relative;
  gap: 2px;
  font-size: 14px;
}

.home-kept-count {
  font: 700 var(--t-label) / 1 var(--sans);
  color: var(--accent);
}

/* ---- the search field (home opens it from ⌕; the first visit shows it) */

.home-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px var(--gutter) 0;
  min-height: var(--row-min);
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
}

.home-field-glyph {
  color: var(--fg-muted);
  font-size: 16px;
}

.home-field-input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  border: 0;
  background: transparent;
  font-size: var(--t-field);
  color: var(--fg);
  outline: none;
}

.home-field-input::placeholder {
  color: var(--fg-muted);
}

.home-field:focus-within {
  border-color: var(--accent);
}

/* ---- sections ---------------------------------------------------------- */

.home-section .section-head h2 {
  margin: 0;
}

/* Cover tiles (new covers, picks): a tall still that plays, the song under
   it as the door to the room, the date the rail is sorted by. */
.home-covers {
  padding-bottom: 4px;
}

.home-cover {
  width: 150px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* The still and the name over it: the name is a link beside the play, never
   inside it (listen/noun.js), laid where it stood inside the button. */
.home-cover-still {
  position: relative;
  display: block;
  width: 100%;
}

.home-cover-play {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  overflow: hidden;
  text-align: left;
}

.home-cover-play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(16, 15, 12, 0) 50%,
    rgba(16, 15, 12, 0.8) 100%
  );
}

.home-cover-who {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  font-size: 16px;
  line-height: 1.1;
  color: var(--night-ink);
  overflow-wrap: anywhere;
  /* a press beside the name still reaches the play under it */
  pointer-events: none;
}

.home-cover-who a.noun {
  pointer-events: auto;
}

/* names wrap, never truncate (cold review 2026-10-09) */
.home-cover-song {
  display: block;
  min-height: var(--tap);
  padding-top: 4px;
  font-size: var(--t-meta);
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

.home-cover .meta {
  font-size: var(--t-label);
}

.home-pick-note {
  padding: 0 var(--gutter);
  font-size: 16px;
  line-height: 1.35;
}

.home-pick-by {
  padding: 4px var(--gutter) 10px;
}

/* People who sing a lot here: round tiles on a rail, three in view and the
   next at the edge. Twelve since Claude Design "Desktop" 1a′ (2026-10-19,
   order.js HOME_PEOPLE): a grid of twelve stood four faces deep on a phone,
   before the songs; the rail holds the same twelve in the same order. */
.home-people-grid.rail > .home-person {
  width: clamp(96px, 28vw, 150px);
}

.home-person-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--fg);
  text-align: center;
}

/* The name is the tile's link and covers the tile; the cover's song is a
   link of its own above it (listen/noun.js: never a link in a link). */
.home-person-card .home-person-name {
  color: inherit;
}

.home-person-card .home-person-name:hover {
  text-decoration: none;
}

.home-person-name::after {
  content: "";
  position: absolute;
  inset: 0;
}

.home-person-name:focus-visible {
  outline: none;
}

.home-person-name:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-thumb);
}

.home-person-pictured a.noun {
  position: relative;
  z-index: 1;
}

.home-person-pic {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--still-bg) center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(23, 21, 15, 0.08);
}

.home-person-name {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.home-person-pictured {
  display: block;
  max-width: 100%;
  font: italic 400 var(--t-label) / 1.2 var(--serif);
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

.home-person-songs {
  font: 600 var(--t-label) / 1.2 var(--sans);
  color: var(--accent);
}

/* Rooms: rows with the listener's memory on the right. */
.home-room-list {
  padding: 0 var(--gutter);
}

.home-room-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: var(--row-min);
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--fg);
}

/* The title is the row's link to the room and covers the row; the
   originator is a link of its own above it (listen/noun.js). */
a.home-room {
  color: inherit;
}

a.home-room:hover {
  text-decoration: none;
}

a.home-room::after {
  content: "";
  position: absolute;
  inset: 0;
}

a.home-room:focus-visible {
  outline: none;
}

a.home-room:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-thumb);
}

.home-room-text .meta a.noun {
  position: relative;
  z-index: 1;
}

.home-room-thumb {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--r-thumb);
  background: var(--still-bg) center / cover no-repeat;
}

.home-room-text {
  min-width: 0;
}

.home-room-title {
  display: block;
  font-size: var(--t-row);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.home-room-text .meta {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.home-room-memory {
  font: 600 var(--t-label) / 1.2 var(--sans);
  color: var(--accent);
  white-space: nowrap;
}

/* Kept: four square stills that play (a kept person is a round link). */
.home-kept-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 var(--gutter);
}

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

.home-kept-person {
  border-radius: 50%;
}

/* The lead (Claude Design "Desktop" 1a, 2026-10-19): Where you've been —
   the universe's own drawing of this listener's light, square, as one link
   (views/constellation.js TILE is the aspect ratio), its line over the foot
   of the drawing — then the start cards and Where next. */
.home-sky-tile {
  position: relative;
  display: block;
  margin: 0 var(--gutter);
  border-radius: var(--r-thumb);
  overflow: hidden;
  background: var(--sky-field);
}

.home-sky-caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  font-size: var(--t-small);
  color: var(--night-ink);
  opacity: 0.8;
}

.home-lead-side {
  display: flex;
  flex-direction: column;
}

/* Where next: the still (it plays), the person over the song, + Queue. */
.home-next .section-head {
  flex-wrap: wrap;
  column-gap: 12px;
}

.home-next-list {
  padding: 0 var(--gutter);
}

.home-next-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 64px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.home-next-still {
  position: relative;
  width: 96px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-thumb);
  background: var(--still-bg) center / cover no-repeat;
}

.home-next-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

.home-next-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.home-next-who {
  font-size: var(--t-row);
  line-height: 1.15;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.home-next-song {
  overflow-wrap: anywhere;
}

.home-next-queue {
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--t-meta);
  white-space: nowrap;
}

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

.home-sky-stage {
  position: relative;
  aspect-ratio: 400 / 400;
}

/* ---- arriving without a song (3d) ------------------------------------- */

.arrive {
  --gutter: 22px;
}

.arrive-head {
  padding: 36px var(--gutter) 0;
}

.arrive-wordmark {
  font: 400 30px / 1.1 var(--serif);
  letter-spacing: -0.02em;
}

.arrive-sentence {
  margin-top: 10px;
  font-size: var(--t-head);
  line-height: 1.25;
  text-wrap: pretty;
}

.arrive-field {
  margin-top: 20px;
}

/* The start cards: the still with ▶, then a solid strip under it — the song
   first, the person second — never text over the thumbnail's own text. One
   card spans the column; two or three ride a rail. */
.arrive-starts {
  padding: 0 var(--gutter);
}

.arrive-starts.rail {
  padding: 4px var(--gutter);
}

.arrive-starts.rail > .arrive-card {
  width: min(78vw, 320px);
}

.arrive-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  background: var(--night);
  color: var(--night-ink);
}

/* The still is the card's play and covers the whole card, so a press on the
   strip plays too; the names on the strip are links above it
   (listen/noun.js: never a link in a button). The ▶ centres by flex, so the
   cover is the card's, not the still's. */
.arrive-hero-still {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--still-bg) center / cover no-repeat;
}

.arrive-hero-still::after {
  content: "";
  position: absolute;
  inset: 0;
}

.arrive-hero-still:focus-visible {
  outline: none;
}

.arrive-hero-still:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.arrive-hero-text a.noun {
  position: relative;
  z-index: 1;
}

.arrive-hero-mark {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(242, 239, 230, 0.92);
  color: var(--night);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.arrive-hero-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: var(--row-min);
  padding: 12px 16px 14px;
}

.arrive-hero-song {
  font-size: var(--t-hero);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.arrive-hero-origin {
  color: var(--night-muted);
}

.arrive-hero-who {
  font-size: var(--t-meta);
  line-height: 1.3;
  color: var(--night-muted);
  overflow-wrap: anywhere;
}

.arrive-totals {
  padding: var(--section) var(--gutter) 0;
}

/* The deploy stamp (home.js footOf): the page's last line, `.meta`'s small
   muted type at the gutter. #view's own foot padding keeps it clear of the
   mini drawer. */
.home-foot {
  margin: 0;
  padding: var(--section) var(--gutter) 0;
}

@media (min-width: 561px) {
  .home-cover {
    width: 180px;
  }

  .arrive-starts:not(.rail) > .arrive-card {
    max-width: 560px;
  }
}

/* ---- a wide screen (≥ 900px) ------------------------------------------
   Claude Design "Desktop" turn 1, 1a and 1b (2026-10-17): "the first screen
   is two things: your sky and three picks. Rails go five across, people
   three across, rooms become a column. Same sections, same order rules";
   arrive is "laid out, not redrawn". The page is a wrap of rows on the
   person page's grid (a 400px column, 80 apart), in the page's own order at
   every width, so the keyboard reads what the eye reads (engineering's call,
   2026-10-18: the canvas leads with the sky; a stranger has none, and moving
   it by CSS order sent Tab there after the songs): the picks and the new
   covers each a full row, people beside the songs, then your sky beside what
   you saved — the two things that are yours. The page's layout is scoped
   to .home (home and the first visit); its parts (the heads, the covers,
   the people, the start card) are also Places' starters on a first visit,
   and look the same there. */

@media (min-width: 900px) {
  .home {
    --gutter: 0px;
    --section: 44px;
    --lead: 400px;
    --apart: 80px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: var(--apart);
    padding: 0 40px;
  }

  .home > * {
    flex: 0 1 100%;
    min-width: 0;
  }

  .home > .home-people {
    flex: 1 1 calc(100% - var(--lead) - var(--apart));
  }

  /* The lead: the 400px tile, and beside it the start cards (three across)
     over Where next, the column as tall as the tile. */
  .home-lead {
    display: grid;
    grid-template-columns: var(--lead) minmax(0, 1fr);
    column-gap: var(--apart);
    align-items: start;
  }

  .home-lead .home-sky-tile {
    margin: 0;
  }

  /* Beside the people; a row of its own, full width, when they are absent. */
  .home > .home-rooms {
    flex: 1 0 var(--lead);
  }

  /* Home's field opens under the ⌕, at the right; the margin, not a
     max-width, keeps it a row of its own in the wrap. */
  .home-head + .home-field {
    margin-left: calc(100% - 600px);
  }

  /* Section heads: 22px Newsreader on a rule ("Type on desktop"), each a
     tap tall whether or not it carries a link, so heads side by side share
     their rule. The first visit's "Or start here" stays the small label the
     canvas draws. */
  :is(.home, .places) .home-section:not(.arrive-start) > .section-head,
  .home-lead .arrive-start > .section-head {
    align-items: center;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }

  :is(.home, .places) .home-section:not(.arrive-start) > .section-head .label,
  .home-lead .arrive-start > .section-head .label {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    font: 400 var(--t-head) / 1.2 var(--serif);
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--fg);
  }

  /* Cover tiles: a grid, not a rail; 16:9 stills, the song under each as
     a title. 1a′ (2026-10-19): the new covers five across, a pick's three
     across the full width — a lone pick a third wide at the left, never a
     card centred alone. Each tile is the row's height and its date sits at
     its foot, so the row holds one height while a title wraps to its whole
     length (1a′ clamps titles to two lines; rule 10 keeps every title
     whole: wide.md §3). */
  :is(.home, .places) .home-covers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    overflow: visible;
    padding: 0;
  }

  :is(.home, .places) .home-new .home-covers {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  :is(.home, .places) .home-pick .home-covers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :is(.home, .places) .home-cover {
    width: auto;
  }

  :is(.home, .places) .home-cover-play {
    aspect-ratio: 16 / 9;
    border-radius: var(--r-thumb);
  }

  :is(.home, .places) .home-cover-who {
    left: 8px;
    right: 8px;
    bottom: 8px;
    font-size: 15px;
    line-height: 1.05;
  }

  :is(.home, .places) .home-cover-song {
    font: 400 16px / 1.15 var(--serif);
    color: var(--fg);
  }

  :is(.home, .places) .home-cover .meta {
    margin-top: auto;
    font-size: var(--t-small);
  }

  /* People: a grid, not a rail; the face at 48px beside the name and the
     count, three across beside the songs at 1280 (four rows of the twelve,
     as tall as the four songs; fewer across in a narrower window). On
     Places they are a row of their own: four across, three even rows. */
  :is(.home, .places) .home-people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px 24px;
    overflow: visible;
    padding: 0;
  }

  .places .home-people-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :is(.home, .places) .home-people-grid > .home-person {
    width: auto;
  }

  :is(.home, .places) .home-person-card {
    align-items: flex-start;
    justify-content: center;
    min-height: 56px;
    padding-left: 60px;
    text-align: left;
  }

  :is(.home, .places) .home-person-pic {
    position: absolute;
    left: 0;
    top: 50%;
    width: 48px;
    transform: translateY(-50%);
  }

  :is(.home, .places) .home-person-name {
    margin-top: 0;
    font-size: var(--t-row);
  }

  /* Songs: the head's rule is the list's first line. */
  :is(.home, .places) .home-room-list > li:first-child > .home-room-row {
    border-top: 0;
  }

  /* Saved: the cover tiles' columns, square. */
  :is(.home, .places) .home-kept-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
  }

  :is(.home, .places) .home-sky-tile {
    border-radius: var(--r-card);
  }

  /* The first visit: the sentence centred as the page's largest type, the
     field 60px tall and 600 wide under it, the start cards three across (a
     lone card, only when the export offers one way in, stays a third wide,
     centred under the field with its label). */
  .home .arrive-head {
    padding-top: 16px;
    text-align: center;
  }

  .home .arrive-wordmark {
    font-size: var(--t-head);
    text-align: left;
  }

  .home .arrive-sentence {
    max-width: 760px;
    margin: 64px auto 0;
    font-size: 48px;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .home .arrive-field {
    max-width: 600px;
    min-height: 60px;
    margin: 28px auto 0;
    padding: 0 24px;
    gap: 12px;
  }

  .home .arrive-field .home-field-glyph {
    font-size: 20px;
  }

  .home .arrive-field .home-field-input {
    font-size: var(--t-head);
  }

  :is(.home, .places) .arrive-starts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    overflow: visible;
    padding: 0;
  }

  :is(.home, .places) .arrive-starts > .arrive-card {
    width: auto;
    max-width: none;
  }

  :is(.home, .places) .arrive-starts[data-n="1"] {
    grid-template-columns: minmax(0, calc((100% - 40px) / 3));
    justify-content: center;
  }

  :is(.home, .places) .arrive-start:has(> [data-n="1"]) > .section-head {
    justify-content: center;
  }

  :is(.home, .places) .arrive-hero {
    border-radius: var(--r-card);
  }

  :is(.home, .places) .arrive-hero-mark {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }

  :is(.home, .places) .arrive-hero-text {
    padding: 14px 16px 16px;
  }

  :is(.home, .places) .arrive-hero-song {
    font-size: 20px;
  }

  :is(.home, .places) .arrive-hero-origin {
    font-size: 14px;
  }

  :is(.home, .places) .arrive-hero-who {
    font-size: 13px;
  }

  .home .arrive-totals {
    text-align: center;
  }
}

/* The one bar at ≥ 900px (main.js WIDE_SEARCH_VIEWS, listen.css .top-wide):
   the top line draws the mark here too, and home's search; home's and the
   first visit's wordmark stays the page's h1, read but not drawn, and home's
   ⌕ and ◇ give way to the top line's search and Places. */
@media (min-width: 900px) {
  .home-wordmark,
  .arrive-wordmark {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .home-icons,
  #home-search {
    display: none;
  }

  .home-head {
    padding-top: 0;
  }
}