/* Hartman Audio Forensics - audio examples page.
   Loaded after css/styles.css; reuses its tokens and panel classes. */

/* ============ PAGE HEAD ============ */
.page-head { padding: 72px 0 56px; border-bottom: 1px solid var(--border-subtle); background-color: var(--surface-canvas); background-image: var(--texture-grid); background-size: var(--grid-size) var(--grid-size); }
.page-head h1 { font-size: clamp(32px, 4.5vw, 52px); font-weight: var(--weight-bold); color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.page-head h1 span { color: var(--text-muted); }
.provenance { margin-top: 40px; max-width: 720px; border: 1px solid var(--border-subtle); background: var(--surface-raised); padding: 20px 24px; }
.provenance-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-amber); margin: 0 0 8px; }
.provenance p { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); margin: 0; }

/* ============ EXHIBIT GROUPS ============ */
.exhibits { padding: 96px 0; background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle); }
.exhibit-group + .exhibit-group { margin-top: 96px; padding-top: 96px; border-top: 1px solid var(--border-subtle); }
.group-head { margin-bottom: 40px; }
.group-note { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); max-width: 68ch; margin: 12px 0 0; }

.exhibit { border: 1px solid var(--border-subtle); background: var(--surface-canvas); padding: 32px; }
.exhibit + .exhibit { margin-top: 24px; }
.exhibit-head { margin-bottom: 32px; }
.exhibit-num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); margin: 0 0 12px; }
.exhibit-title { font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--text-primary); letter-spacing: -0.01em; margin: 0 0 12px; }
.exhibit-desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); max-width: 68ch; margin: 0; text-wrap: pretty; }
.exhibit-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; font-family: var(--font-mono); font-size: var(--text-xs); }
.exhibit-meta > div { display: flex; gap: 8px; }
.exhibit-meta .k { color: var(--slate-400); }
.exhibit-meta .v { color: var(--accent-amber); }
.exhibit-meta:empty { display: none; }

/* ============ TRACKS ============ */
.tracks { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 1024px) { .tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.track-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.track-tag { font-family: var(--font-mono); font-size: 10px; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; padding: 3px 7px; border: 1px solid var(--border-default); color: var(--text-secondary); flex: none; }
.track-tag.is-processed { color: var(--accent-amber); border-color: color-mix(in srgb, var(--accent-amber) 40%, transparent); background: var(--accent-amber-soft); }
.track-title { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--text-primary); margin: 0; }

/* ============ DISPLAY ============ */
.ex-display { position: relative; height: 128px; background: var(--surface-inset); box-shadow: var(--shadow-inset); border-bottom: 1px solid var(--border-subtle); overflow: hidden; cursor: crosshair; touch-action: none; }
.ex-display:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ex-wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.ex-playhead { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: color-mix(in srgb, var(--accent-amber) 70%, transparent); box-shadow: var(--accent-amber-glow); opacity: 0; }
.ex-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); text-align: center; padding: 0 16px; }
.ex-spectrum { display: block; width: 100%; height: 40px; background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle); }

/* ============ TRANSPORT ============ */
.transport { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle); }
.ex-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; min-height: 44px; padding: 0 18px; background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-none); color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; }
.ex-btn:hover { color: var(--accent); border-color: var(--accent); }
.ex-btn.is-icon { min-width: 44px; padding: 0 12px; }
.ex-btn[disabled] { color: var(--text-disabled); border-color: var(--border-subtle); cursor: default; }
.ex-btn[disabled]:hover { color: var(--text-disabled); border-color: var(--border-subtle); }
.ex-btn[data-playing="true"] { background: var(--accent); border-color: var(--accent); color: var(--slate-950); }
.ex-time { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-time .sep { color: var(--text-muted); }

.ex-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-readouts .is-live { color: var(--accent); }

@media (max-width: 767px) {
  .exhibit { padding: 24px 20px; }
  .ex-display { height: 104px; }
  .transport { flex-wrap: wrap; }
  .ex-time { margin-left: 0; width: 100%; order: 3; }
}

@media (prefers-reduced-motion: no-preference) {
  .ex-btn { transition: var(--transition-base); }
  .ex-playhead { transition: opacity var(--dur-base) var(--ease-out); }
}