/* ──────────────────────────────────────────────────────────
   dashboard.css — The Cave dashboard (redesign 2026-05-12)
   Spec: wiki/spec/cave_dashboard_redesign.md
   Technique ref: Unveil Projects diagonal stack.
   Palette: dark Sound Cave (rule: feedback_soundcave_palette).
   ────────────────────────────────────────────────────────── */

#tab-cave .cave-welcome {
  margin-bottom: var(--space-5);
}
#tab-cave .cave-welcome h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--color-text);
  text-transform: uppercase;
}
#tab-cave .cave-welcome p {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
  margin-top: var(--space-2);
  text-transform: uppercase;
}

/* ─── Hero zone — 3-column rails layout (spec: cave_drilldown_graphics +
   Doug 2026-06-10: no overlap, tidier, bigger). Side panels live in left/right
   rails; the cinematic artist stage sits in the centre column. Overlap between
   the stack and the panels is impossible by construction. ─── */
.cave-hero {
  display: grid;
  grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) minmax(230px, 290px);
  gap: var(--space-7);
  align-items: stretch;
  width: 100%;
  min-height: 800px;
  margin-bottom: var(--space-6);
  user-select: none;
}

/* Side rails — three evenly-spaced panels, vertically centred in the rail */
.cave-rail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  min-width: 0;
}

/* ─── Centre stage — the cinematic zone (textured bg + the stack) ─── */
.cave-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 2px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,69,0,0.04) 0%, transparent 55%),
    var(--color-bg-warm);
  cursor: grab;
}
.cave-stage:active { cursor: grabbing; }

/* CRT-ish scanlines for cohesion with splash/entrance language */
.cave-stage::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 2px,
    rgba(255,255,255,var(--scan-opacity)) 3px,
    transparent 4px
  );
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 5;
}

/* Soft vignette */
.cave-stage::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,var(--vignette-strength)) 100%);
  pointer-events: none;
  z-index: 6;
}

/* ─── Stack stage ─── */
.stack-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  z-index: 2;
}

.stack-card {
  --offset: 0;
  --abs: 0;
  --dir: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    0 6px 16px rgba(0,0,0,0.4);
  overflow: hidden;
  transform-origin: center center;
  transform:
    translate3d(
      calc(var(--offset) * 70px),
      calc(var(--offset) * -56px),
      0
    )
    scale(calc(1 - var(--abs) * 0.07));
  opacity: calc(1 - var(--abs) * 0.13);
  z-index: calc(100 - var(--abs));
  transition:
    transform var(--motion-mid) var(--ease-cinematic),
    opacity var(--motion-mid) var(--ease-cinematic),
    box-shadow var(--motion-fast) var(--ease-soft),
    border-color var(--motion-fast) var(--ease-soft);
  cursor: pointer;
  will-change: transform, opacity;
}

.stack-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.05) brightness(0.85);
  transition: filter var(--motion-mid) var(--ease-cinematic);
  display: block;
}

/* Card fallback if no avatar */
.stack-card .stack-card-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 64px;
  color: var(--color-faint);
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}

/* Caption sliver bottom of card */
.stack-card .stack-card-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(232,232,232,0.55);
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%);
  opacity: 0;
  transition: opacity var(--motion-mid) var(--ease-cinematic);
}

/* The focused (front) card */
.stack-card[data-focus="true"] {
  z-index: 200;
  transform:
    translate3d(0, -8px, 0)
    scale(1.06);
  box-shadow:
    0 50px 90px rgba(0,0,0,0.65),
    0 12px 30px rgba(255,69,0,0.08);
  border-color: rgba(255,69,0,0.25);
}
.stack-card[data-focus="true"] img {
  filter: grayscale(0) contrast(1.05) brightness(1);
}
.stack-card[data-focus="true"] .stack-card-caption {
  opacity: 1;
}

/* Hover lift (non-focus cards) */
.stack-card:hover:not([data-focus="true"]) {
  transform:
    translate3d(
      calc(var(--offset) * 70px),
      calc(var(--offset) * -56px - 14px),
      0
    )
    scale(calc(1 - var(--abs) * 0.07 + 0.04));
  border-color: rgba(255,69,0,0.2);
  z-index: calc(180 - var(--abs));
}
.stack-card:hover img {
  filter: grayscale(0.1) contrast(1.05) brightness(1);
}
.stack-card:hover .stack-card-caption {
  opacity: 1;
}

/* Hide cards too far from focus */
.stack-card[data-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}

/* ─── Focus meta (artist name + stats below stack) ─── */
.stack-meta {
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
  pointer-events: none;
  min-width: 280px;
}
.stack-meta-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 6px;
}
.stack-meta-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}
.stack-meta-sub .accent {
  color: var(--color-accent);
}

/* Empty state */
.stack-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  text-align: center;
  padding: var(--space-6);
}
.stack-empty h3 {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.stack-empty p {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted);
  max-width: 360px;
  line-height: 1.6;
}

/* ─── Glass panels — now seated in the side rails (no longer absolute) ───
   Panels are interactive: hover is a CSS-only ring + lift (no dropdown — Doug
   2026-06-10); click opens the detail modal (see .stat-modal in style.css). */
.cave-hero-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--space-6) var(--space-6);
  background: rgba(10,10,10,0.62);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 2px;
  min-width: 0;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease-soft),
    background var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-soft);
}
.cave-rail-right .cave-hero-panel { text-align: right; }
.cave-hero-panel:hover {
  border-color: rgba(255,69,0,0.3);
  background: rgba(10,10,10,0.8);
  transform: translateY(-2px);
}
/* click-ability cue on drill-down widgets (spec: cave_drilldown_graphics.md) */
.cave-hero-panel.drillable::after {
  content: '↗ details';
  position: absolute;
  bottom: 6px; right: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-soft);
  pointer-events: none;
}
.cave-hero-panel.drillable:hover::after { opacity: 1; }

/* New Drops keeps its track list left-aligned even in the right rail */
#caveTracksPanel { text-align: left; }

.panel-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

.panel-value {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.02em;
  line-height: 1;
}

.panel-trend {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  margin-top: 10px;
  color: var(--color-muted);
}
.panel-trend.up { color: var(--color-accent); }
.panel-trend.down { color: var(--color-faint); }
.panel-coverage { color: var(--color-muted); font-weight: normal; }

/* Genre rows inside the Genre Mix panel (left rail) */
.panel-genre-list {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.panel-genre-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text);
}
.panel-genre-bar {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.panel-genre-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform-origin: left center;
}
.panel-genre-pct {
  color: var(--color-muted);
  min-width: 28px;
  text-align: right;
}

/* Drops list inside the New Drops panel (right rail) */
.panel-drops-list {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.panel-drop-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.panel-drop-row:last-child { border-bottom: none; padding-bottom: 0; }
.panel-drop-title {
  color: var(--color-text);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-drop-artist {
  color: var(--color-muted);
  font-size: 11px;
}
.panel-drop-row a {
  color: var(--color-accent);
  text-decoration: none;
}

/* Empty panel state */
.panel-empty {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-faint);
  letter-spacing: var(--tracking-mono);
}

/* ─── Chart strip ─── */
.cave-chart-strip {
  position: relative;          /* tooltip anchor */
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-bg-warm);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 2px;
}
.cave-chart-strip .strip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.cave-chart-strip .strip-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}
.cave-chart-strip .strip-legend {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
/* Legend chips double as metric switches (buttons) + the disabled "soon" tag. */
.cave-chart-strip .strip-chip {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-faint);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-soft),
              background var(--motion-fast) var(--ease-soft);
}
.cave-chart-strip .strip-chip i {
  width: 10px; height: 2px;
  background: var(--chip, currentColor);
  opacity: 0.45;
  transition: opacity var(--motion-fast) var(--ease-soft);
}
.cave-chart-strip .strip-chip:hover { color: var(--color-muted); }
.cave-chart-strip .strip-chip:hover i { opacity: 0.8; }
.cave-chart-strip .strip-chip.is-active {
  color: var(--color-text);
  background: rgba(255,255,255,0.04);
}
.cave-chart-strip .strip-chip.is-active i { opacity: 1; height: 3px; }
/* Disabled "Pl. Adds · soon" — not clickable */
.cave-chart-strip .strip-chip.is-soon { cursor: default; color: var(--color-faint); }
.cave-chart-strip .strip-chip.is-soon i { opacity: 0.25; }
.cave-chart-strip .strip-chip.is-soon em {
  font-style: normal;
  font-size: 8px;
  margin-left: 4px;
  padding: 1px 4px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  color: var(--color-faint);
}

.cave-chart-strip .strip-canvas { min-height: 240px; }

/* Point-hover tooltip */
.cave-chart-strip .chart-tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  pointer-events: none;
  background: rgba(10,10,10,0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 5px 8px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
}
.cave-chart-strip .chart-tip[hidden] { display: none; }
.cave-chart-strip .chart-tip .tip-v {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text);
}
.cave-chart-strip .chart-tip .tip-d {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-mono);
  color: var(--color-muted);
}

/* Hide chart strip when no data */
.cave-chart-strip[data-empty="true"] { display: none; }

/* Scroll hint */
.scroll-hint {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-faint);
  z-index: 10;
  pointer-events: none;
  opacity: 0.7;
}

/* Responsive — narrower rails, then collapse to a single column */
@media (max-width: 1200px) {
  .cave-hero {
    grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(200px, 250px);
    gap: var(--space-5);
    min-height: 720px;
  }
  .panel-value { font-size: 32px; }
}
@media (max-width: 920px) {
  /* Stage on top, rails become two side-by-side rows of panels beneath it */
  .cave-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .cave-stage { order: -1; min-height: 520px; }
  .cave-rail { flex-direction: row; flex-wrap: wrap; }
  .cave-rail .cave-hero-panel { flex: 1 1 240px; }
  .cave-rail-right .cave-hero-panel,
  #caveTracksPanel { text-align: left; }
}
@media (max-width: 560px) {
  .cave-stage { min-height: 420px; }
  .stack-card { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
  .cave-rail { flex-direction: column; }
}