/* repo-yard search — amber-phosphor CRT theme
   Brand: matches music-hub (Repo Yard) amber CRT terminal aesthetic. */
:root {
  --bg: #090907;
  --panel: #141310;
  --panel-2: #1a1712;
  --border: #2a2518;
  --border-hi: #3a3220;
  --text: #e8e0c8;
  --dim: #8a8270;
  --accent: #ffb000;
  --amber-dim: #a85a12;
  --ok: #7fbf6a;
  --warn: #f0a000;
  --err: #e05252;
  --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  color: var(--text);
  font: 15px/1.55 var(--mono);
  background:
    repeating-linear-gradient(0deg, rgba(255,176,0,0.025) 0 1px, transparent 1px 3px),
    var(--bg);
}

/* ── chrome band ─────────────────────────────────────────────── */
.chrome {
  height: 8px;
  background: linear-gradient(180deg, #3a3120, #241d12 55%, #171209);
  border-bottom: 1px solid var(--amber-dim);
  box-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* ── layout ──────────────────────────────────────────────────── */
.wrap { max-width: 980px; margin: 0 auto; padding: 2.2rem 1rem 5rem; }

.masthead { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .2rem; }
.masthead h1 {
  margin: 0; font-size: 1.35rem; letter-spacing: .08em; color: var(--accent);
  text-shadow: 0 0 8px rgba(255,176,0,.45);
}
.eyebrow { color: var(--dim); font-size: .78rem; margin: 0 0 1.6rem; letter-spacing: .04em; }

/* ── type tabs (Discography | Playlists | Albums | Tracks) ──── */
.tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tab {
  font: inherit; font-size: .85rem; letter-spacing: .05em;
  padding: .45rem .9rem; cursor: pointer;
  color: var(--dim); background: var(--panel);
  border: 1px solid var(--border); border-radius: 4px;
  transition: color .12s, border-color .12s, box-shadow .12s;
}
.tab:hover { color: var(--text); border-color: var(--border-hi); }
.tab.active {
  color: var(--accent); border-color: var(--amber-dim);
  text-shadow: 0 0 6px rgba(255,176,0,.5);
  box-shadow: inset 0 0 8px rgba(255,176,0,.08);
}

/* ── search box ──────────────────────────────────────────────── */
.searchbar { position: relative; margin-bottom: .8rem; }
.searchbar input[type=search] {
  width: 100%; padding: .75rem .95rem; font: inherit;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; outline: none;
}
.searchbar input[type=search]:focus { border-color: var(--accent); box-shadow: 0 0 10px rgba(255,176,0,.12); }
.caret { display: inline-block; width: .6em; height: 1em; vertical-align: text-bottom;
  background: var(--accent); margin-left: 2px;
  animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .7s linear infinite; vertical-align: -2px; margin-right: .4rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* ── provider status badges ──────────────────────────────────── */
.statuses { display: flex; gap: .45rem; flex-wrap: wrap; margin: .5rem 0 .9rem; font-size: .72rem; }
.status {
  padding: .18rem .55rem; border-radius: 10px;
  border: 1px solid var(--border); color: var(--dim);
}
.status.ok { color: var(--ok); border-color: #2c4a2c; }
.status.auth_expired, .status.provider_error { color: var(--warn); border-color: #4a3a14; }
.status.unavailable { color: var(--err); border-color: #4a2020; }
.status .reason { opacity: .8; }

/* ── results ─────────────────────────────────────────────────── */
#results { margin-top: .4rem; }
.count { color: var(--dim); font-size: .82rem; margin: .2rem 0 .9rem; }

/* artist / discography cards — heaviest weight */
.card.artist {
  display: flex; gap: 1rem; align-items: center;
  padding: .9rem 1rem; margin-bottom: .6rem;
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--amber-dim);
  border-radius: 4px;
}
.card.artist img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--panel-2); }
.card.artist .title { font-size: 1.15rem; color: var(--accent); text-shadow: 0 0 6px rgba(255,176,0,.3); }
.card.artist .sub { color: var(--dim); font-size: .85rem; margin-top: .2rem; }

/* album cards — medium weight */
.card.album {
  display: flex; gap: .8rem; align-items: center;
  padding: .7rem .9rem; margin-bottom: .5rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 4px;
}
.card.album img { width: 56px; height: 56px; border-radius: 3px; object-fit: cover; background: var(--panel-2); }
.card.album .title { font-weight: 600; }
.card.album .sub { color: var(--dim); font-size: .82rem; }

/* playlist cards — medium weight */
.card.playlist { display: flex; gap: .8rem; align-items: center;
  padding: .7rem .9rem; margin-bottom: .5rem;
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--warn);
  border-radius: 4px; }
.card.playlist img { width: 56px; height: 56px; border-radius: 3px; object-fit: cover; background: var(--panel-2); }
.card.playlist .title { font-weight: 600; }
.card.playlist .sub { color: var(--dim); font-size: .82rem; }

/* track rows — lightest weight */
.card.track {
  display: flex; gap: .75rem; align-items: center;
  padding: .45rem .6rem; border-bottom: 1px solid var(--border);
}
.card.track img { width: 40px; height: 40px; border-radius: 2px; object-fit: cover; background: var(--panel-2); }
.card.track .title { font-size: .95rem; }
.card.track .sub { color: var(--dim); font-size: .78rem; }
.card.track .dur { margin-left: auto; color: var(--dim); font-size: .75rem; white-space: nowrap; }

.meta { min-width: 0; }
.tags { font-size: .7rem; color: var(--amber-dim); margin-top: .15rem; letter-spacing: .03em; }
.provider-tag { color: var(--amber-dim); }
.also { font-size: .72rem; color: var(--dim); margin-top: .15rem; }

/* ── empty states ─────────────────────────────────────────────── */
.hint, .empty { color: var(--dim); font-size: .92rem; padding: 1.2rem 0; }
.hint { text-align: center; margin-top: 2.5rem; }

/* scrollbar (webkit) — stays in theme */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 5px; }