/* view: search — search and the miss (3b). Tokens from listen.css. */

.search-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px var(--gutter) 0;
}

.search-head .round {
  color: var(--fg);
  text-decoration: none;
}

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

.search-section .label {
  display: block;
  margin-bottom: 8px;
}

.search-note {
  margin-bottom: 8px;
  font-size: var(--t-small);
  color: var(--body-ink);
}

/* A row: the still, the words, the memory. */
.search-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);
}

a.search-row:hover {
  text-decoration: none;
}

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

.search-still.round-still {
  border-radius: 50%;
}

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

.search-hit,
.search-name {
  font-size: var(--t-row);
  line-height: 1.15;
  color: var(--fg);
  overflow-wrap: anywhere;
}

/* The room's link covers the whole row; the named people sit above it. */
.search-hit::after {
  content: "";
  position: absolute;
  inset: 0;
}

.search-hit:focus-visible {
  outline: none;
}

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

/* A name list wraps rather than truncating: an ellipsis on a list of names
   reads as the head of a ranking. Each name reaches a tap tall. */
.search-by {
  position: relative;
  z-index: 1;
  font-size: var(--t-meta);
  color: var(--fg-muted);
}

.search-by a {
  display: inline-block;
  padding: 13px 0;
  margin: -13px 0;
  font-weight: 600;
}

.search-by-one a {
  display: block;
}

.search-memory {
  font-size: var(--t-label);
  color: var(--accent);
  white-space: nowrap;
}

.search-arrow {
  font-size: var(--t-field);
}

/* the miss */

.miss-box {
  margin: 24px var(--gutter) 0;
  padding: 14px 16px;
  border-radius: var(--r-card);
  border: 1px dashed var(--line-strong);
  font-size: 13px;
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* "Tell us the song": a real button, a full tap (Opus, cold review
   2026-10-09: it "does not look tappable"). */
.miss-ask {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin: 6px 0;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--accent);
  font: 600 14px / 1.2 var(--sans);
  vertical-align: middle;
}

.miss-ask:disabled {
  opacity: 1;
  border-color: var(--line);
  color: var(--fg-muted);
}

.miss-box .said:not(:empty) {
  margin-top: 8px;
}

.miss-out {
  padding: var(--section) var(--gutter) 0;
}

/* ---- the field (listen/field.js): home, the first visit, search, the miss
   and the top line draw the one form. Its × and its matches live here. */

.field {
  position: relative;
}

.field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* The ×: inside the field, a full tap, shown only while there is text. */
.field-clear {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin-right: -12px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg-muted);
  font-size: 20px;
  line-height: 1;
}

.field-clear[hidden] {
  display: none;
}

.field-clear:hover,
.field-clear:focus-visible {
  color: var(--fg);
}

/* The matches: under the field, over the page, every row a link. The
   card clips its rows, so a lit row stays inside the rounded corners. It
   is opaque: the dark tone's --surface is a tint over the page, so it is
   laid on the page's own --bg, or the page shows through the words
   (Terran, 2026-10-20, the top line's search over the universe). */
.field-matches {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 4px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: linear-gradient(var(--surface), var(--surface)), var(--bg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.field-matches[hidden] {
  display: none;
}

.field-match-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.field-match {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: var(--row-min);
  padding: 6px 16px;
  color: var(--fg);
  text-decoration: none;
}

.field-match:hover,
.field-match:focus-visible {
  background: var(--bg);
  text-decoration: none;
  outline: none;
}

.field-match-text {
  font-size: var(--t-row);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* The search and miss heads: ‹ home, then the field, filling the row. */
.search-head .home-field {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* ---- a wide screen (≥ 900px; Claude Design "Desktop" 1c and 1d,
   2026-10-17). Search: the field 56px tall and at most 760 wide, then the
   two sections side by side, 80 apart, the songs in the wider column (1.4fr
   to 1fr) whichever leads; a song row grows to a 112px 16:9 still and a
   22px title, a person to a 48px face. The miss: the ask on the left (400px),
   its first words the page's 44px title and Search YouTube under it; on the
   right the did-you-mean, then the songs of people heard, three across. */

@media (min-width: 900px) {
  .search {
    --gutter: 0px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: 80px;
    align-items: start;
    padding: 0 40px 50px;
  }

  .search[data-lead="people"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }

  .search-head {
    grid-column: 1 / -1;
    padding-top: 20px;
  }

  .search-head .home-field {
    flex: 0 1 760px;
    min-height: 56px;
    padding: 0 22px;
  }

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

  .search-head .home-field-input {
    font-size: 22px;
  }

  .search-section {
    padding-top: 36px;
  }

  .search-row {
    grid-template-columns: 112px minmax(0, 1fr) auto;
    column-gap: 16px;
    min-height: 84px;
  }

  .search-still:not(.round-still) {
    aspect-ratio: 16 / 9;
    border-radius: 6px;
  }

  .search-hit {
    font-size: 22px;
    line-height: 1.1;
  }

  .search-text .meta {
    font-size: var(--t-small);
    color: var(--body-ink);
  }

  .search-memory {
    font-size: var(--t-meta);
    font-weight: 600;
  }

  .search-person {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    column-gap: 14px;
    min-height: 64px;
  }

  .search-name {
    font-size: 18px;
  }

  /* The miss: the head across, the ask and the way out on the left, the
     right column beside both. The last row takes whatever height the right
     column needs past the ask, so the ask and the way out stay together. */
  .search.miss {
    grid-template-columns: 400px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
  }

  .miss-box {
    grid-area: 2 / 1;
    margin: 0;
    padding: 50px 0 0;
    border: 0;
    border-radius: 0;
    font-size: 15px;
    color: var(--body-ink);
  }

  .miss-lead {
    display: block;
    margin-bottom: 18px;
    font: 300 44px / 1.02 var(--serif);
    letter-spacing: -0.03em;
    color: var(--fg);
  }

  .miss-ask {
    min-height: 48px;
    margin: 0 4px 0 0;
    padding: 0 22px;
    border-color: var(--fg);
    background: var(--fg);
    color: var(--bg);
    font-weight: 700;
  }

  .miss-ask:disabled {
    border-color: var(--line);
    background: var(--surface);
    color: var(--fg-muted);
  }

  .miss-out {
    grid-area: 3 / 1;
    align-self: start;
    padding: 4px 0 0;
  }

  /* Search YouTube as the canvas draws it: a link, still a tap tall. */
  .miss-out .pill {
    padding: 0;
    border-color: transparent;
    background: none;
    color: var(--accent);
    font: 600 13px / 1.2 var(--sans);
  }

  .miss-more {
    grid-area: 2 / 2 / span 2;
    padding-top: 50px;
  }

  .miss-more > :first-child {
    padding-top: 0;
  }

  .miss-near .label {
    margin-bottom: 14px;
  }

  /* Three across in the 640px the column has at 1200; two where it is
     narrower, so a card never drops under 160px. */
  .miss-near .search-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
  }

  .miss-near .search-row {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 8px;
    min-height: 0;
    padding: 0;
    border-top: 0;
  }

  .miss-near .search-still {
    border-radius: var(--r-thumb);
  }

  .miss-near .search-hit {
    font-size: 18px;
  }
}