/* ============================================================
   SEARCH PAGE — results layout and components
   ============================================================ */

/* Warm baseline palette (era-1 feel) */
:root {
  --color-bg:               #f5e6c8;
  --color-bg-alt:           #e8d5a3;
  --color-text:             #2c1810;
  --color-accent:           #c0392b;
  --color-accent-secondary: #8b2015;
  --font-heading:           'Bebas Neue', sans-serif;
  --font-body:              'Courier Prime', serif;
  --border-radius:          0px;
}

/* ── Page layout ─────────────────────────────────────────── */

.search-page {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-2xl);
}

/* ── Refine search form (visible, top of page) ───────────── */

.search-refine {
  padding: var(--space-lg) 0 0;
}

.search-refine__label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.search-refine__row {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-accent);
}

.search-refine__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.search-refine__input::-webkit-search-cancel-button { display: none; }
.search-refine__input:focus { background: #fff; }

.search-refine__btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.search-refine__btn:hover { background: var(--color-accent-secondary); }

/* ── Filter toggle bar ───────────────────────────────────── */

.search-filter-bar {
  padding: var(--space-sm) 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.search-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-accent);
  background: none;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.search-filter-toggle:hover,
.search-filter-toggle[aria-expanded="true"] {
  background: var(--color-accent);
  color: #fff;
}

.search-filter-panel {
  margin-top: var(--space-xs);
  border: 1px solid var(--color-accent);
  border-top: none;
  background: var(--color-bg-alt);
  padding: var(--space-sm) var(--space-md);
}

.search-filter-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.search-filter-fieldset__legend {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
  padding: 0;
}

.search-filter-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-right: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}

.search-filter-option input[type="checkbox"] {
  accent-color: var(--color-accent);
  width: 1em;
  height: 1em;
  cursor: pointer;
}

.search-section--hidden { display: none; }

/* ── Summary bar ─────────────────────────────────────────── */

.search-summary {
  padding: var(--space-lg) 0 var(--space-md);
  border-bottom: 2px solid var(--color-accent);
  margin-bottom: var(--space-xl);
}

.search-summary__heading {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-text);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-xs);
}

.search-summary__counts {
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.search-summary--empty .search-summary__heading { color: var(--color-accent); }

/* ── Section headings ────────────────────────────────────── */

.search-section {
  margin-bottom: var(--space-2xl);
}

.search-section:empty { display: none; }

.search-section__heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
}

.search-section__heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.35;
  display: block;
}

.search-section__count {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Audio player (visible YouTube iframe on play) ───────── */
/*
 * The artwork frame shows a static thumbnail until the user hits play,
 * at which point a YouTube iframe takes over the same area at 16:9.
 * Per YouTube's terms, the video has to remain visible during playback.
 */

.srch-audio-player {
  margin-bottom: var(--space-lg);
}

.srch-audio-player__art-wrap {
  position: relative;
  border: 1px solid var(--color-accent);
  border-bottom: none;
  background: #1a1a1a;
}

.srch-audio-player__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 5;
  overflow: hidden;
  background: #1a1a1a;
  transition: aspect-ratio var(--transition-normal);
}

.srch-audio-player__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.75) saturate(0.6);
  transition: filter var(--transition-normal);
}

/* While playing, the iframe pane covers the figure entirely. */
.srch-audio-player__player {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}

.srch-audio-player__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Engage the iframe once a track is clicked. */
.srch-audio-player--playing .srch-audio-player__figure {
  aspect-ratio: 16 / 9;
}
.srch-audio-player--playing .srch-audio-player__player {
  opacity: 1;
  pointer-events: auto;
}
.srch-audio-player--playing .srch-audio-player__thumb {
  visibility: hidden;
}

/* Close button — only visible while a track is playing. */
.srch-audio-player__close {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.srch-audio-player__close:hover,
.srch-audio-player__close:focus-visible {
  background: var(--color-accent);
  outline: none;
}

.srch-audio-player--playing .srch-audio-player__close { display: inline-flex; }

/* ── Track list ──────────────────────────────────────────── */

.search-track-list {
  list-style: none;
  border: 1px solid var(--color-accent);
  margin-bottom: 0;
}

/* When no pagination nav follows, restore the bottom gap. */
.search-track-list:last-child { margin-bottom: var(--space-lg); }

.search-track-list li {
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.search-track-list li:first-child { border-top: none; }

.search-track {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: none;
  cursor: pointer;
  background: none;
  flex: 1;
  min-width: 0;
  text-align: left;
  font-family: var(--font-body);
  color: var(--color-text);
  transition: background var(--transition-fast);
}

.search-track:hover { background: var(--color-bg-alt); }

.search-track--playing {
  background: var(--color-accent);
  color: #fff;
}

.search-track--playing:hover { background: var(--color-accent-secondary, #8b2015); }

/* When a track is playing, also tint the copy-link button next to it
   so the whole row reads as highlighted. */
.search-track-list li:has(.search-track--playing) {
  background: var(--color-accent);
}
.search-track-list li:has(.search-track--playing) .track-copy-link {
  color: #fff;
  opacity: 0.8;
}
.search-track-list li:has(.search-track--playing) .track-copy-link:hover {
  background: var(--color-accent-secondary, #8b2015);
  opacity: 1;
}
.search-track-list li:has(.search-track--playing) .track-copy-link.track-copy-link--copied {
  background: #fff;
  color: var(--color-accent);
  opacity: 1;
}

.search-track:disabled { opacity: 0.4; cursor: default; }

.search-track__num {
  font-size: var(--text-sm);
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

.search-track--playing .search-track__num { opacity: 0.8; }

.search-track__info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.search-track__title {
  font-size: var(--text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-track__meta {
  font-size: var(--text-sm);
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-track--playing .search-track__meta { opacity: 0.85; }

.search-track__duration {
  font-size: var(--text-sm);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.search-track--playing .search-track__duration { opacity: 0.8; }

/* ── Track list pagination ───────────────────────────────── */

.srch-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-accent);
  border-top: none;
  background: var(--color-bg-alt);
  margin-bottom: var(--space-lg);
}

.srch-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-xs);
  border: 1px solid transparent;
  background: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.srch-pagination__btn:hover:not(:disabled) {
  background: var(--color-bg);
  border-color: var(--color-accent);
}

.srch-pagination__btn--active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.srch-pagination__btn--active:hover {
  background: var(--color-accent-secondary);
  border-color: var(--color-accent-secondary);
}

.srch-pagination__btn--prev,
.srch-pagination__btn--next {
  font-size: 1.1rem;
  color: var(--color-accent);
}

.srch-pagination__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ── Highlight marks ─────────────────────────────────────── */

mark {
  background: rgba(192, 57, 43, 0.15);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.search-track--playing mark { background: rgba(255,255,255,0.25); }

/* ── Story cards ─────────────────────────────────────────── */

.search-stories-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  list-style: none;
}

.search-story-card {
  border-left: 4px solid var(--story-accent, var(--color-accent));
  background: var(--color-bg-alt);
  padding: var(--space-md) var(--space-lg);
}

.search-story-card__era {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--story-accent, var(--color-accent));
  margin-bottom: var(--space-xs);
}

.search-story-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
  letter-spacing: 0.03em;
}

.search-story-card__author {
  font-size: var(--text-sm);
  font-style: italic;
  opacity: 0.7;
  margin-bottom: var(--space-sm);
}

.search-story-card__excerpt {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-story-card__full-body {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

/* Rich-text bodies keep the markup authored in content.json, so the block
   elements inside them need their own spacing — the global reset zeroes it. */
.search-story-card__full-body p,
.search-other-detail__body p {
  margin-bottom: var(--space-sm);
}

.search-story-card__full-body p:last-child,
.search-other-detail__body p:last-child {
  margin-bottom: 0;
}

.search-story-card__full-body ul,
.search-story-card__full-body ol,
.search-other-detail__body ul,
.search-other-detail__body ol {
  margin: 0 0 var(--space-sm) var(--space-md);
  padding-left: var(--space-md);
}

.search-story-card__full-body li,
.search-other-detail__body li {
  margin-bottom: var(--space-xs);
}

.search-story-card__full-body h3,
.search-story-card__full-body h4,
.search-other-detail__body h3,
.search-other-detail__body h4 {
  font-size: var(--text-lg);
  margin: var(--space-sm) 0 var(--space-xs);
}

.search-story-card__expand {
  display: inline-block;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--story-accent, var(--color-accent));
  padding: 0;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid currentColor;
  transition: opacity var(--transition-fast);
}

.search-story-card__expand:hover { opacity: 0.7; }

.search-story-card__link {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--story-accent, var(--color-accent));
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--transition-fast);
}

.search-story-card__link:hover { opacity: 0.7; }

/* ── Other results ───────────────────────────────────────── */

.search-other-group { margin-bottom: var(--space-lg); }

.search-other-group__label {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-accent);
}

.search-other-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.search-other-item {
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.search-other-item__toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: center;
  width: 100%;
  padding: var(--space-sm) 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: background var(--transition-fast);
}

.search-other-item__toggle:hover { background: var(--color-bg-alt); }

.search-other-item__title { color: var(--color-text); }

.search-other-item__right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.search-other-item__detail {
  font-size: var(--text-sm);
  opacity: 0.55;
  white-space: nowrap;
}

.search-other-item__chevron {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  color: var(--color-accent);
  opacity: 0.7;
  transition: transform var(--transition-fast);
  /* Down-pointing triangle via border trick */
  display: inline-block;
  border-left: 0.35em solid transparent;
  border-right: 0.35em solid transparent;
  border-top: 0.45em solid currentColor;
}

.search-other-item--open .search-other-item__chevron {
  transform: rotate(180deg);
}

/* ── Expanded detail panel ───────────────────────────────── */

.search-other-detail {
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-accent);
  margin-bottom: var(--space-xs);
}

.search-other-detail__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-sm);
  font-size: var(--text-sm);
}

.search-other-detail__meta dt {
  font-family: var(--font-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}

.search-other-detail__meta dd {
  margin: 0;
  color: var(--color-text);
}

.search-other-detail__body {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.search-other-detail__quote {
  font-style: italic;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  border-left: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
}

.search-other-detail__url {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
  word-break: break-all;
}

.search-other-detail__link {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  margin-top: var(--space-xs);
  transition: opacity var(--transition-fast);
}

.search-other-detail__link:hover { opacity: 0.7; }

/* ── No-results state ────────────────────────────────────── */

.search-no-results {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--color-text);
}

.search-no-results__glyph {
  font-size: 3rem;
  opacity: 0.2;
  margin-bottom: var(--space-md);
}

.search-no-results__text {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-sm);
}

.search-no-results__hint {
  font-size: var(--text-sm);
  opacity: 0.6;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (min-width: 600px) {
  .search-stories-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .search-page { padding: var(--space-md) var(--space-md) var(--space-xl); }
  .search-track { grid-template-columns: 1.5rem 1fr auto; padding: var(--space-sm); }
  .search-refine__btn span { display: none; } /* icon only on small screens */
}

@media (prefers-reduced-motion: reduce) {
  .search-track,
  .search-story-card__link,
  .search-refine__btn { transition: none; }
}

/* ── Browse (search empty state) ──────────────────────────

   Shown when search has no query. Deliberately an index and not a catalogue:
   names and counts only, nothing playable, every entry leading back out to a
   search result or to the timeline. A browsable, playable list of the songs
   would turn a history of a group into a music library. */

.browse {
  max-width: 46rem;
  margin: var(--space-xl) auto 0;
  padding: 0 var(--space-md);
}

.browse__lead {
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text, #222) 15%, transparent);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}

.browse__section { margin-bottom: var(--space-xl); }

.browse__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.browse__note {
  margin: var(--space-xs) 0 var(--space-sm);
  font-size: 0.82rem;
  opacity: 0.7;
}

.browse__note--gaps { margin-top: var(--space-md); }
.browse__note a { color: var(--color-accent); }

.browse__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
}

.browse__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.3em 0.7em;
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: 999px;
  color: inherit;
  font-size: 0.84rem;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.browse__item:hover,
.browse__item:focus-visible {
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-color: var(--color-accent);
}

.browse__item-count {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  opacity: 0.6;
}

.browse__more-btn {
  margin-top: var(--space-sm);
  padding: 0.3em 0;
  background: none;
  border: 0;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
}

.browse__more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-sm);
}

.browse__aside-link {
  display: inline-block;
  margin-top: var(--space-sm);
  color: var(--color-accent);
  font-size: 0.8rem;
}

/* Years: a bar per year, tall in proportion to what sits in it. The shape is
   the point — 1973 and 1974 carry about a fifth of the archive each. */
.browse__years {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 78px;
  margin-top: var(--space-sm);
}

.browse__year {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.browse__year-bar {
  width: 100%;
  height: calc(var(--share, 0.1) * 100%);
  background-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  transition: background-color var(--transition-fast);
}

.browse__year:hover .browse__year-bar,
.browse__year:focus-visible .browse__year-bar {
  background-color: var(--color-accent);
}

.browse__year-label {
  margin-top: 0.3em;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  opacity: 0.65;
}

@media (max-width: 480px) {
  .browse__years { height: 60px; }
  .browse__year-label { font-size: 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .browse__item,
  .browse__year-bar { transition: none; }
}