/* seeker.css — public seeker-record view styles, scoped under #view-seeker (P3 SPA
   migration). Base reset / :root tokens / fonts / scanlines / scrollbar come from the
   shell; only seeker-view-specific component rules live here. The view uses the shell's
   shared top-bar / footer chrome, so no .wrapper/.top-bar/.nav-strip rules are needed. */

#view-seeker .terminal-box { border: 1px solid var(--green-dim); padding: 24px; margin: 16px 0; background: var(--green-faint); position: relative; animation: fadeIn 0.35s ease; }
#view-seeker .terminal-box::before { content: attr(data-label); position: absolute; top: -10px; left: 16px; background: var(--bg); padding: 0 8px; font-size: 13px; color: var(--green-dim); letter-spacing: 2px; }
#view-seeker .terminal-box h2 { font-family: 'VT323', monospace; font-size: 28px; margin-bottom: 14px; color: var(--green); }

#view-seeker .profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 16px 0; align-items: stretch; }
#view-seeker .profile-stat { border: 1px solid color-mix(in srgb, var(--green) 18%, transparent); padding: 14px; background: color-mix(in srgb, var(--green) 3%, transparent); }
#view-seeker .profile-stat-key { font-size: 11px; color: var(--green-dim); letter-spacing: 3px; margin-bottom: 6px; }
#view-seeker .profile-stat-val { font-family: 'VT323', monospace; font-size: 24px; color: var(--green); letter-spacing: 1px; word-break: break-word; }

#view-seeker .btn { background: transparent; border: 1px solid var(--green); color: var(--green); font-family: 'Share Tech Mono', monospace; font-size: 15px; padding: 10px 24px; cursor: pointer; letter-spacing: 2px; text-transform: uppercase; transition: all 0.15s; white-space: nowrap; }
#view-seeker .btn:hover { background: var(--green); color: var(--bg); box-shadow: 0 0 20px color-mix(in srgb, var(--green) 40%, transparent); }

#view-seeker .discovery-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--green) 8%, transparent); font-size: 13px; }
#view-seeker .discovery-row:last-child { border-bottom: none; }

/* ── Read-only melody (mirror profile styles, but no editing) ── */
#view-seeker .melody-stat { position: relative; display: flex; flex-direction: column; gap: 6px; }
#view-seeker .melody-grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 9px; gap: 2px; user-select: none; margin-top: 2px; }
#view-seeker .melody-cell { background: color-mix(in srgb, var(--green) 4%, transparent); border: 1px solid color-mix(in srgb, var(--green) 8%, transparent); }
#view-seeker .melody-cell.on { background: color-mix(in srgb, var(--green) 55%, transparent); border-color: color-mix(in srgb, var(--green) 70%, transparent); box-shadow: 0 0 4px color-mix(in srgb, var(--green) 40%, transparent); }
#view-seeker .melody-cell.on.playing-now { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 8px rgba(255,176,0,0.85); }
#view-seeker .melody-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--green-dim); letter-spacing: 2px; margin-top: 4px; }
#view-seeker .melody-play { background: transparent; border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); color: var(--green-dim); font-family: inherit; font-size: 14px; padding: 3px 10px; cursor: pointer; letter-spacing: 2px; transition: all 0.1s; }
#view-seeker .melody-play:hover { border-color: var(--green); color: var(--green); }
#view-seeker .melody-play.playing { color: var(--amber); border-color: var(--amber); }

@media (max-width: 600px) {
  #view-seeker .profile-grid { grid-template-columns: 1fr 1fr; }
}