/* ========================================
   Catalog — Search & Discovery (Tube Glow)
   ======================================== */

.catalog {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  animation: page-enter 350ms ease-out both;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ----------------------------------------
   Search — terminal field
   ---------------------------------------- */

.catalog__search-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 26px 18px;
  padding: 14px 16px;
  background: var(--inset);
  border: 1px solid rgba(224, 162, 60, 0.22);
  border-radius: 8px;
  box-shadow: inset 0 0 26px -8px rgba(224, 162, 60, 0.25);
}

.catalog__search-prompt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--amber);
  text-shadow: var(--amber-glow);
  white-space: nowrap;
  flex-shrink: 0;
}

.catalog__search {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink-100);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 0;
  caret-color: var(--amber);
}

.catalog__search::placeholder {
  color: var(--ink-30);
  font-style: normal;
}

/* Idle "terminal waiting" cursor: shown only when the field is empty AND
   unfocused. As soon as the field is focused or has text, it hides and the
   input's real amber caret (caret-color above) tracks what's typed. */
.catalog__search-caret {
  width: 9px;
  height: 17px;
  flex-shrink: 0;
  background: var(--amber);
  box-shadow: 0 0 9px rgba(224, 162, 60, 0.7);
  animation: blink 1.1s step-end infinite;
}

.catalog__search-bar:has(.catalog__search:focus) .catalog__search-caret,
.catalog__search-bar:has(.catalog__search:not(:placeholder-shown)) .catalog__search-caret {
  display: none;
}

.catalog__search-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--ink-30);
  text-transform: uppercase;
  border-left: 1px solid rgba(224, 162, 60, 0.2);
  padding-left: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ----------------------------------------
   Filter bar — faceplate selectors
   ---------------------------------------- */

.catalog__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0 26px;
  padding: 18px 0;
}

.catalog__filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.catalog__filter-group--toggle {
  justify-content: flex-end;
}

.catalog__filter-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 2px;
  color: var(--ink-30);
  text-transform: uppercase;
}

/* Selector field wrapper: native select + decorative caret */
.catalog__filter-field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 118px;
  background: var(--field);
  border: 1px solid rgba(224, 162, 60, 0.18);
  border-radius: var(--radius-control);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
  transition: border-color var(--transition-fast);
}

.catalog__filter-field select {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color: var(--ink-50);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  padding: 9px 28px 9px 11px;
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
}

.catalog__filter-field select option {
  background: var(--panel);
  color: var(--ink-80);
}

.catalog__filter-caret {
  position: absolute;
  right: 11px;
  font-size: 9px;
  color: var(--ink-20);
  pointer-events: none;
}

/* Active (non-"all") selector: amber + glow + brighter border */
.catalog__filter-field--active {
  border-color: rgba(224, 162, 60, 0.4);
}

.catalog__filter-field--active select {
  color: var(--amber);
  text-shadow: 0 0 7px rgba(224, 162, 60, 0.4);
}

.catalog__filter-field:focus-within {
  border-color: rgba(224, 162, 60, 0.4);
}

/* Collabs-only toggle styled as a selector field */
.catalog__collab-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 118px;
  background: var(--field);
  border: 1px solid rgba(224, 162, 60, 0.18);
  border-radius: var(--radius-control);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
  padding: 9px 11px;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.catalog__collab-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.catalog__collab-box {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  border: 1px solid rgba(224, 162, 60, 0.25);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.catalog__collab-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--ink-50);
  text-transform: uppercase;
}

.catalog__collab-toggle--active {
  border-color: rgba(224, 162, 60, 0.4);
}

.catalog__collab-toggle--active .catalog__collab-box {
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 7px rgba(224, 162, 60, 0.5);
}

.catalog__collab-toggle--active .catalog__collab-text {
  color: var(--amber);
  text-shadow: 0 0 7px rgba(224, 162, 60, 0.4);
}

/* Sort group pushed to the right */
.catalog__sort {
  margin-left: auto;
}

.catalog__sort-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.catalog__sort .catalog__filter-field {
  min-width: 120px;
}

.catalog__sort-dir {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--field);
  border: 1px solid rgba(224, 162, 60, 0.18);
  border-radius: var(--radius-control);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.catalog__sort-dir:hover,
.catalog__sort-dir:focus {
  border-color: rgba(224, 162, 60, 0.4);
  text-shadow: var(--amber-glow);
  outline: none;
}

/* ----------------------------------------
   Toolbar: count + active chips
   ---------------------------------------- */

.catalog__toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 26px 12px;
}

.catalog__count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--ink-70);
  text-transform: uppercase;
}

.catalog__toolbar-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--ink-20);
  text-transform: uppercase;
}

/* "Trace <song> through time" — offered when the query names a composition;
   right-aligned in the toolbar, jumps out of the frame to the dossier. */
.catalog__songbook-cue {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 5px 11px;
  background: rgba(224, 162, 60, 0.06);
  border: 1px solid rgba(224, 162, 60, 0.3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--amber);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.catalog__songbook-cue:hover {
  background: rgba(224, 162, 60, 0.14);
  text-decoration: none;
}

.catalog__songbook-cue-arrow {
  color: var(--amber);
}

.catalog__songbook-cue em {
  font-style: normal;
  color: var(--ink-100);
}

.catalog__active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.catalog__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  background: rgba(224, 162, 60, 0.08);
  border: 1px solid rgba(224, 162, 60, 0.3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--amber);
  text-transform: lowercase;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.catalog__chip:hover {
  background: rgba(224, 162, 60, 0.16);
  text-decoration: none;
}

.catalog__chip-x {
  color: var(--amber-faint);
  line-height: 1;
}

/* ----------------------------------------
   Column header + rows
   ---------------------------------------- */

.catalog__col-header {
  display: grid;
  grid-template-columns: 34px 56px 126px 1fr 74px 30px 34px;
  align-items: center;
  gap: 14px;
  padding: 8px 26px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 1.5px;
  color: var(--ink-20);
  text-transform: uppercase;
}

.catalog__col-header-cell--right {
  text-align: right;
}

.catalog__results {
  /* grid rows live here */
}

.catalog__row {
  display: grid;
  grid-template-columns: 34px 56px 126px 1fr 74px 30px 34px;
  align-items: center;
  gap: 14px;
  padding: 13px 26px;
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--transition-fast);
}

.catalog__row:hover {
  background: rgba(224, 162, 60, 0.04);
}

.catalog__row--playing {
  background: rgba(224, 162, 60, 0.06);
}

.catalog__row--playing .catalog__row-play {
  border-color: var(--amber);
  box-shadow: 0 0 14px -3px rgba(224, 162, 60, 0.8);
}

/* Quality VU meter (col 1) */

.catalog__quality-dot {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 15px;
}

.catalog__vu-seg {
  width: 5px;
  height: 100%;
  background: var(--seg-off);
}

.catalog__vu-seg--off {
  background: var(--seg-off);
}

.catalog__vu-seg--excellent {
  background: var(--q-excellent);
  box-shadow: 0 0 6px -1px var(--q-excellent);
}

.catalog__vu-seg--good {
  background: var(--q-good);
  box-shadow: 0 0 6px -1px var(--q-good);
}

.catalog__vu-seg--fair {
  background: var(--q-fair);
  box-shadow: 0 0 6px -1px var(--q-fair);
}

.catalog__vu-seg--poor {
  background: var(--q-poor);
  box-shadow: 0 0 6px -1px var(--q-poor);
}

.catalog__vu-seg--unknown {
  background: var(--q-unknown);
}

/* Source badge (col 2) */

.catalog__row-type {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--ink-70);
  border: 1px solid rgba(224, 162, 60, 0.25);
  border-radius: 3px;
  padding: 3px 4px;
  text-align: center;
  text-transform: uppercase;
}

/* Date (col 3) */

.catalog__row-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.3px;
  color: var(--ink-50);
}

/* Recording (col 4) */

/* Title cell wrapper: the recording link (flex-grows, truncates) plus the small
   "trace this song" journey glyph pinned to its right. Occupies the same grid
   column the link used to, so the 7-column row layout is unchanged. */
.catalog__row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.catalog__row-link {
  display: block;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  text-decoration: none;
}

.catalog__row-link:hover {
  text-decoration: none;
}

.catalog__row-journey {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  color: var(--amber-faint);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.catalog__row-journey:hover,
.catalog__row-journey:focus-visible {
  color: var(--amber);
  text-decoration: none;
}

.catalog__row-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--ink-100);
}

.catalog__row-link:hover .catalog__row-title {
  color: var(--amber);
}

.catalog__row-location {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.5px;
  color: var(--ink-40);
  text-transform: uppercase;
  margin-top: 2px;
}

.catalog__row-notes {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-style: italic;
  color: var(--ink-30);
  margin-top: 4px;
  line-height: 1.4;
}

/* Length (col 5) */

.catalog__row-duration {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--ink-70);
  text-align: right;
}

/* Favorite (col 6) */

.catalog__row-fav {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Play (col 7) */

.catalog__row-play-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalog__row-play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: none;
  border: 1px solid rgba(224, 162, 60, 0.5);
  box-shadow: 0 0 12px -4px rgba(224, 162, 60, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast);
}

.catalog__row-play:hover {
  border-color: var(--amber);
  box-shadow: 0 0 14px -3px rgba(224, 162, 60, 0.8);
}

.catalog__row-play-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent var(--amber);
  margin-left: 2px;
}

.catalog__row-play-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------
   Pagination
   ---------------------------------------- */

.catalog__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px;
  background: var(--panel-2);
  border-top: 1px solid rgba(224, 162, 60, 0.08);
}

.catalog__page-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--ink-70);
  background: transparent;
  border: 1px solid rgba(224, 162, 60, 0.2);
  border-radius: 5px;
  padding: 6px 11px;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.catalog__page-link:hover {
  border-color: rgba(224, 162, 60, 0.4);
  color: var(--amber);
}

.catalog__page-link--current {
  color: var(--frame-bg);
  background: var(--amber);
  border-color: var(--amber);
}

.catalog__page-gap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--ink-20);
  padding: 6px 4px;
}

/* ----------------------------------------
   Empty state
   ---------------------------------------- */

.catalog__empty {
  text-align: center;
  padding: 4rem 2rem;
}

.catalog__empty p {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-40);
  font-size: 1.1rem;
}

.catalog__empty p + p {
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.catalog__empty-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-top: 1.25rem;
}

.catalog__empty-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 0.5rem;
}

/* Suggestion chip: a two-action pill — the title jumps to the dossier, the ⌕
   re-searches the recordings for that title. */
.catalog__empty-chip {
  display: inline-flex;
  align-items: stretch;
  background: rgba(224, 162, 60, 0.08);
  border: 1px solid rgba(224, 162, 60, 0.3);
  border-radius: var(--radius-pill);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
}

.catalog__empty-chip-title {
  padding: 6px 11px;
  color: var(--amber);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.catalog__empty-chip-title:hover {
  background: rgba(224, 162, 60, 0.16);
  text-decoration: none;
}

.catalog__empty-chip-search {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border-left: 1px solid rgba(224, 162, 60, 0.3);
  color: var(--amber-faint);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.catalog__empty-chip-search:hover {
  background: rgba(224, 162, 60, 0.16);
  color: var(--amber);
  text-decoration: none;
}

.catalog__empty-cta {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid var(--amber-faint);
  padding-bottom: 2px;
  transition: all var(--transition-fast);
}

.catalog__empty-cta:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--amber);
  text-decoration: none;
}

/* ----------------------------------------
   Busy state — Turbo sets [busy] on the frame while a request is in flight.
   The 150ms transition delay means fast responses never visibly dim (no flash).
   ---------------------------------------- */

#catalog-results[busy] {
  opacity: 0.55;
  transition: opacity 120ms ease 150ms;
}