/* ═══════════════════════════════════════════════════════════════
   ReplayLens — stats.fm-inspired design system
   Dark by default; light theme via html[data-theme="light"]
   ═══════════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root, html[data-theme="dark"] {
  --bg: #0a0a0c;
  --bg-elev: #101014;
  --bg-card: #16161c;
  --bg-hover: #1e1e26;
  --bg-active: #26262f;
  --border: #23232d;
  --border-2: #3a3a46;
  --border-soft: #1b1b23;
  --text: #f5f5f7;
  --text-2: #a6a6b1;
  --text-3: #6d6d7a;
  --accent: #1ed760;
  --accent-strong: #17c454;
  --accent-soft: rgba(30, 215, 96, 0.12);
  --accent-glow: rgba(30, 215, 96, 0.16);
  --grad-a: #1ed760;
  --grad-b: #2dd4bf;
  --accent-rgb: 30, 215, 96;
  --grad-rgb: 45, 212, 191;
  --danger: #f87171;
  --success: #4ade80;
  --warning: #fbbf24;
  --info: #60a5fa;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.22);
  --sidebar-width: 252px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  /* iOS-like motion tokens (P10b rework 5 2026-08-15): one ease-out curve for
     everything, 140ms for state changes, 300ms for layout moves. */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --t-state: 140ms var(--ease-ios);
  --t-layout: 300ms var(--ease-ios);
  --transition: 140ms cubic-bezier(0.32, 0.72, 0, 1);
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #f4f4f7;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f0f0f4;
  --bg-active: #e8e8ee;
  --border: #e3e3ea;
  --border-2: #d8d8e0;
  --border-soft: #ececf1;
  --text: #17171c;
  --text-2: #5d5d69;
  --text-3: #9b9ba8;
  --accent: #17b34f;
  --accent-strong: #0f9d43;
  --accent-soft: rgba(23, 179, 79, 0.1);
  --accent-glow: rgba(23, 179, 79, 0.14);
  --grad-a: #17b34f;
  --grad-b: #0ea5a5;
  --accent-rgb: 23, 179, 79;
  --grad-rgb: 14, 165, 165;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
  --info: #2563eb;
  --shadow: 0 8px 24px rgba(23, 23, 28, 0.08);
  --shadow-sm: 0 2px 8px rgba(23, 23, 28, 0.05);
  color-scheme: light;
}

html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; }

::selection { background: var(--accent); color: #04120a; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ═══ Layout ═══ */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 40;
  flex-shrink: 0;
}

.sidebar-header { padding: 22px 20px 14px; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: -0.4px; color: var(--text); }
.brand-name em { font-style: normal; color: var(--accent); }

.sidebar-nav { padding: 8px 12px 20px; display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; overflow-y: auto; }
.nav-divider { height: 1px; background: var(--border-soft); margin: 10px 14px; flex-shrink: 0; }
.sidebar-foot { flex-shrink: 0; padding: 16px 20px 24px; border-top: 1px solid var(--border-soft); font-size: 11px; color: var(--text-3); }

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  color: var(--text-2); font-size: 14px; font-weight: 550;
  transition: background var(--transition), color var(--transition);
  position: relative;
}
.nav-item svg { flex-shrink: 0; opacity: 0.85; }
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); }
.nav-item.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: var(--accent);
}
.nav-icon { width: 20px; height: 20px; }

/* Topbar (mobile only) */
.topbar {
  display: none; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}
.hamburger {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px;
}
.hamburger:hover { background: var(--bg-hover); }
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 35; opacity: 0; transition: opacity 180ms var(--ease-ios); pointer-events: none;
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

.main-content {
  flex: 1; padding: 36px 40px 64px; min-width: 0;
  max-width: 1240px; margin: 0 auto; width: 100%;
}

/* ═══ Typography ═══ */
h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; margin-bottom: 6px; }
h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; margin: 0; }
h3 { font-size: 15px; font-weight: 650; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head .sub { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }

/* ═══ Hero ═══ */
.hero-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 34px 34px;
  display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
  margin-bottom: 26px;
}
.hero-card > * { position: relative; }
.hero-main { flex: 1; min-width: 260px; }
.hero-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent); margin-bottom: 8px; }
.hero-title { font-size: 40px; font-weight: 850; letter-spacing: -1px; line-height: 1.05; margin-bottom: 6px; }
.hero-sub { color: var(--text-2); font-size: 14px; }
.hero-stats { display: flex; gap: 26px; margin-top: 20px; flex-wrap: wrap; }
.hero-stat .num { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.2; }
.hero-stat .lbl { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.6px; margin-top: 1px; }
.hero-rings { display: flex; gap: 22px; align-items: center; padding: 6px 4px; }
.ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ring-wrap .lbl { font-size: 11px; color: var(--text-3); font-weight: 550; }
.ring-wrap .val { font-size: 11px; color: var(--text-2); font-weight: 600; }
.ring-wrap .cap { font-size: 11px; color: var(--text-3); }

/* ═══ Range pills (segmented) ═══ */
.range-filter { display: inline-flex; gap: 4px; background: var(--bg-card); border: 1px solid var(--border); padding: 4px; border-radius: var(--radius-sm); margin: 0 0 22px; flex-wrap: wrap; }
.range-btn {
  padding: 7px 15px; font-size: 12.5px; font-weight: 600;
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-2);
  cursor: pointer; transition: all var(--transition); font-family: inherit;
}
.range-btn:hover { color: var(--text); background: var(--bg-hover); }
.range-btn.active { background: var(--accent); color: #04120a; box-shadow: inset 0 0 0 1px rgba(4, 18, 10, 0.18); }

/* ═══ Cards ═══ */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 26px; }
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  transition: border-color var(--transition), transform var(--transition);
}
.card:hover { border-color: var(--text-3); transform: translateY(-1px); }
.card .icon-tile {
  width: 40px; height: 40px; border-radius: var(--radius-sm); margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: var(--bg-active);
}
.card .value { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; }
.card .label { font-size: 11px; color: var(--text-3); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600; }
.card .sub { font-size: 12.5px; color: var(--text-3); margin-top: 6px; }

/* ═══ Section headers ═══ */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 30px 0 14px; }
.section-head .view-all { font-size: 12.5px; font-weight: 600; color: var(--text-2); transition: color var(--transition); }
.section-head .view-all:hover { color: var(--accent); }

/* ═══ Ranked lists ═══ */
.list-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 26px; }
/* Overflow is visible so .tip tooltips are NOT clipped; row corners get the
   container radius instead (hover backgrounds stay inside the rounded card). */
.list-container .rank-row:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.list-container .rank-row:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.rank-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; border-bottom: 1px solid var(--border-soft);
  transition: background var(--transition);
  position: relative;
}
.rank-row:last-child { border-bottom: none; }
.rank-row:hover { background: var(--bg-hover); }
a.rank-row { color: inherit; }
.rank-num {
  width: 34px; text-align: center; flex-shrink: 0;
  font-size: 14px; font-weight: 800; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-sub { font-size: 12.5px; color: var(--text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-stat { text-align: right; flex-shrink: 0; }
.rank-stat .num { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-stat .unit { font-size: 11px; color: var(--text-3); margin-left: 3px; }
.rank-bar-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: transparent; }
.rank-bar { height: 100%; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); border-radius: 2px; opacity: 0.85; }

/* ═══ Artwork ═══ */
.artwork {
  border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.92); font-weight: 800; letter-spacing: -0.5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), var(--shadow-sm);
  user-select: none; overflow: hidden; position: relative;
}
.artwork.circle { border-radius: 50%; }
.artwork::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,0.18), transparent 55%);
  pointer-events: none;
}
.artwork .initials { position: relative; z-index: 1; }
.artwork.sm { width: 40px; height: 40px; font-size: 13px; border-radius: var(--radius-xs); }
.artwork.md { width: 52px; height: 52px; font-size: 16px; border-radius: var(--radius-sm); }
.artwork.lg { width: 84px; height: 84px; font-size: 24px; border-radius: 12px; }
.artwork.xl { width: 128px; height: 128px; font-size: 36px; border-radius: 16px; }
.artwork.circle.sm { border-radius: 50%; }
.artwork.circle.md { border-radius: 50%; }
.artwork.circle.lg { border-radius: 50%; }
.artwork.circle.xl { border-radius: 50%; }

/* ═══ Charts ═══ */
.chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 26px; }
.chart-card h2 { margin-bottom: 14px; }
/* Chart header row: title left + range pills right (used by detail-page chart cards) */
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.chart-head h2 { margin-bottom: 0; }
.chart-head .range-filter { margin: 0; padding: 3px; border-radius: var(--radius-sm); }
.area-chart { width: 100%; height: auto; display: block; }
.chart-wrap { position: relative; }
.area-chart path.line-glow { fill: none; stroke: var(--grad-a); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: 0.18; }
.area-chart path.line { fill: none; stroke: var(--grad-a); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.area-chart .grid-line { stroke: var(--border-soft); stroke-width: 1; }
.area-chart .axis-label { fill: var(--text-2); font-size: 12.5px; font-weight: 600; }
.area-chart .axis-label.max { fill: var(--accent); font-weight: 700; }
.area-chart .hit-zone { fill: transparent; cursor: crosshair; }
.area-chart .crosshair { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.75; display: none; }
.area-chart .active-halo { fill: var(--grad-a); opacity: 0.18; display: none; }
.area-chart .active-dot { fill: var(--grad-a); stroke: var(--bg-card); stroke-width: 2.5; display: none; }
.chart-wrap.hovering .crosshair,
.chart-wrap.hovering .active-halo,
.chart-wrap.hovering .active-dot { display: block; }
.chart-tip {
  position: absolute; top: -6px; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 6px 11px;
  font-size: 11px; font-weight: 600; color: var(--text-2);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); pointer-events: none;
  white-space: nowrap; z-index: 6;
  opacity: 0; visibility: hidden; transition: opacity 90ms ease;
}
.chart-wrap.hovering .chart-tip { opacity: 1; visibility: visible; }
.chart-tip .tip-val { color: var(--accent); font-weight: 700; }
.bar-chart { display: flex; align-items: end; gap: 3px; height: 130px; padding: 10px 0 4px; }
.bar { flex: 1; border-radius: 5px 5px 2px 2px; min-width: 2px; transition: opacity var(--transition), filter var(--transition); cursor: default; }
.bar:hover { opacity: 0.85; filter: brightness(1.15); }
.bar-default { background: linear-gradient(to top, var(--grad-a), var(--grad-b)); opacity: 0.55; }
.bar-active { background: linear-gradient(to top, var(--grad-a), var(--grad-b)); opacity: 1; }
.chart-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); padding-top: 6px; }

/* Heatmap (calendar) — GitHub-style week columns */
.cal-wrap { padding-bottom: 4px; max-width: 100%; }
.cal { display: grid; grid-template-columns: 34px 1fr; gap: 4px; }
.cal-dow-labels { display: flex; flex-direction: column; gap: 2px; padding-top: 16px; }
.cal-dow { flex: 1 1 0; min-height: 13px; font-size: 11px; color: var(--text-3); display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; font-weight: 600; white-space: nowrap; }
.cal-body { width: 100%; min-width: 0; }
.cal-month-row { display: flex; justify-content: center; gap: 2px; height: 16px; margin-bottom: 2px; pointer-events: none; }
.cal-month { flex: 1 1 0; min-width: 0; font-size: 11px; color: var(--text-3); font-weight: 700; white-space: nowrap; overflow: visible; line-height: 16px; }
.cal-week-row { display: flex; justify-content: center; gap: 2px; align-items: flex-start; }
.cal-week-row + .cal-week-row { margin-top: 2px; }
.cal-day { flex: 1 1 0; min-width: 2px; max-width: 48px; aspect-ratio: 1 / 1; height: auto; border-radius: 4px; background: var(--bg-active); }
.cal-day.l1 { background: rgba(var(--grad-rgb), 0.25); }
.cal-day.l2 { background: rgba(var(--grad-rgb), 0.5); }
.cal-day.l3 { background: rgba(var(--grad-rgb), 0.75); }
.cal-day.l4 { background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); }
.cal-day:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-day-empty { background: transparent; box-shadow: none !important; }
.hm-legend { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 11px; color: var(--text-3); }
.hm-legend .cal-day { width: 11px; height: 11px; flex: 0 0 11px; max-width: 11px; }

/* Listening clock grid */
.hm-wrap { overflow-x: auto; }
.clock-grid { display: grid; grid-template-columns: 34px repeat(24, 1fr); gap: 2.5px; min-width: 640px; }
.clock-label { font-size: 11px; color: var(--text-2); display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-weight: 600; white-space: nowrap; }
.clock-hour { font-size: 11px; color: var(--text-3); text-align: center; }
.clock-cell { aspect-ratio: 1; border-radius: 3.5px; background: var(--bg-active); min-width: 8px; }
.clock-cell.l1 { background: rgba(var(--grad-rgb), 0.25); }
.clock-cell.l2 { background: rgba(var(--grad-rgb), 0.5); }
.clock-cell.l3 { background: rgba(var(--grad-rgb), 0.75); }
.clock-cell.l4 { background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); }
.clock-cell:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ═══ Weekday strip (integrated into Listening Clock card) ═══ */
.clock-weekdays {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.clock-weekday-row {
  display: flex; gap: 10px; align-items: stretch; height: 120px;
}
.clock-weekday-col {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%;
  cursor: default;
}
.clock-weekday-bar-wrap {
  flex: 1; width: 100%; min-height: 24px;
  display: flex; align-items: flex-end; justify-content: center;
}
.clock-weekday-bar {
  width: 20px; border-radius: 6px 6px 2px 2px; min-height: 2px;
  background: linear-gradient(180deg, var(--grad-a), var(--grad-b));
  transition: filter 120ms ease, transform 120ms ease;
}
.clock-weekday-col:hover .clock-weekday-bar { filter: brightness(1.2); }
.clock-weekday-val { font-size: 11px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.clock-weekday-lbl { font-size: 11px; color: var(--text-3); font-weight: 700; text-transform: uppercase; }

/* Provider split */
.ps-row { padding: 12px 2px; border-bottom: 1px solid var(--border-soft); }
.ps-row:last-child { border-bottom: none; }
.ps-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ps-name { font-size: 14px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.ps-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ps-nums { font-size: 12.5px; color: var(--text-3); }
.ps-nums strong { color: var(--text); font-weight: 700; }
.ps-track { height: 6px; border-radius: 4px; background: var(--bg-active); overflow: hidden; }
.ps-fill { height: 100%; border-radius: 4px; transition: width 300ms var(--ease-ios); }

/* ═══ Loading / empty / error ═══ */
.loading { display: flex; align-items: center; justify-content: center; padding: 44px; color: var(--text-3); font-size: 14px; }
.loading::after {
  content: ""; width: 18px; height: 18px; margin-left: 10px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.6s linear infinite;
}
.loading.plain::after { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.error {
  text-align: center; padding: 22px; margin: 10px 0 22px;
  color: var(--danger); background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.22); border-radius: var(--radius);
}
.error button { margin-top: 12px; padding: 8px 20px; background: var(--danger); color: #fff; border: none; border-radius: var(--radius-xs); cursor: pointer; font-size: 13px; font-weight: 600; }

/* ═══ Buttons ═══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all var(--transition); border: 1px solid transparent; font-family: inherit;
}
.btn-primary { background: var(--accent); color: #04120a; }
.btn-primary:hover { background: var(--accent-strong); transform: translateY(-1px); }
.btn-secondary { background: var(--bg-card); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--text-3); }
.btn-sm { padding: 6px 13px; font-size: 12.5px; border-radius: var(--radius-xs); }

/* ═══ Badges ═══ */
.badge { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.badge-info { background: var(--accent-soft); color: var(--accent); }
.badge-success { background: rgba(74, 222, 128, 0.14); color: var(--success); }
.badge-warning { background: rgba(251, 191, 36, 0.14); color: var(--warning); }
.badge-danger { background: rgba(248, 113, 113, 0.14); color: var(--danger); }

/* ═══ Search ═══ */
.search-bar { position: relative; margin-bottom: 22px; max-width: 560px; }
.search-bar input {
  padding: 12px 44px 12px 42px; font-size: 14px; height: 48px;
  background: var(--bg-card); border-color: var(--border);
  border-radius: var(--radius-sm);
}
.search-bar input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--bg-elev); }
.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 17px; height: 17px; pointer-events: none; }
.search-shortcut {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: var(--bg-active); border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 7px; font-size: 11px; color: var(--text-3); pointer-events: none;
}

/* ═══ Forms ═══ */
input, select, textarea {
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 14px; font-family: inherit;
  outline: none; transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--text-2); }
.form-group { margin-bottom: 20px; }
input[type="file"]::file-selector-button {
  background: var(--bg-active); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 6px 12px; cursor: pointer; margin-right: 10px; font-size: 12.5px;
}
input[type="file"]::file-selector-button:hover { background: var(--bg-hover); }

/* ═══ Tables ═══ */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
th { color: var(--text-3); font-weight: 650; text-transform: uppercase; letter-spacing: 0.6px; font-size: 11px; }
tr:hover td { background: var(--bg-hover); }

/* ═══ Detail pages ═══ */
.detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; }
.stat-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; text-align: center;
  transition: border-color var(--transition), transform var(--transition);
}
.stat-box:hover { border-color: var(--text-3); transform: translateY(-1px); }
.stat-box .num { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.stat-box .lbl { font-size: 11px; color: var(--text-3); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; }

/* ═══ Import wizard ═══ */
.import-steps { display: flex; gap: 0; margin-bottom: 26px; background: var(--bg-card); border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; }
.import-step {
  flex: 1; padding: 14px 18px; text-align: center; font-size: 14px; font-weight: 550;
  color: var(--text-3); border-right: 1px solid var(--border); position: relative;
}
.import-step:last-child { border-right: none; }
.import-step.active { color: var(--accent); background: var(--accent-soft); }
.import-step.completed { color: var(--success); }
.import-step .step-num {
  display: inline-block; width: 23px; height: 23px; line-height: 23px; border-radius: 50%;
  background: var(--bg-active); margin-right: 8px; font-size: 12px; text-align: center; font-weight: 700;
}
.import-step.active .step-num { background: var(--accent); color: #04120a; }
.import-step.completed .step-num { background: var(--success); color: #04120a; }

/* ═══ Settings ═══ */
.settings-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; }
.settings-section h3 { margin: 0 0 14px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border-soft); }
.settings-row:last-child { border-bottom: none; }
.settings-row .desc { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.settings-row .title { font-size: 14px; font-weight: 600; }

/* Sticky save bar — ONE button persists ALL options per-user */
.settings-savebar {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 18px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
}
.settings-savebar .desc { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.settings-savebar .title { font-size: 14px; font-weight: 600; }
.settings-savebar .btn { min-width: 150px; }

.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: var(--bg-active); border: 1px solid var(--border); border-radius: 24px; transition: var(--transition); }
.slider::before { content: ""; position: absolute; height: 17px; width: 17px; left: 3px; bottom: 2.5px; background: var(--text-2); border-radius: 50%; transition: var(--transition); }
.switch input:checked + .slider { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(19px); background: #fff; }

.alert-success {
  text-align: center; padding: 12px 18px; margin-bottom: 16px;
  color: var(--success); background: rgba(74, 222, 128, 0.09);
  border: 1px solid rgba(74, 222, 128, 0.22); border-radius: var(--radius); font-size: 13.5px;
}

/* ═══ About ═══ */
.about-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px 36px; text-align: center; max-width: 620px; margin: 40px auto; }
.about-section h2 { margin: 18px 0 8px; font-size: 24px; }
.about-section p { color: var(--text-2); font-size: 14px; line-height: 1.75; }
.tech-badge {
  display: inline-block; margin: 4px; padding: 5px 13px;
  background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--accent);
}

/* ═══ Misc ═══ */
.fade-in { animation: fadeIn 300ms var(--ease-ios); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: stretch; }
.two-col .chart-card { margin-bottom: 26px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* Milestone achievement ladder rows */
.ladder-row { margin-bottom: 16px; }
.ladder-row:last-child { margin-bottom: 0; }
.ladder-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.ladder-val { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.ladder-sub { font-size: 12.5px; color: var(--text-3); margin-top: 5px; }

/* Range pills + share button row — pills first, share button directly beside them */
.range-row { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.range-row .range-filter { margin: 0; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: transparent; text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.share-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Compare page */
.cmp-picker { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.cmp-picker .range-filter { margin: 0; }
.cmp-select { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 14px; font-weight: 600; min-width: 220px; flex: 1 1 240px; outline: none; }
.cmp-select:focus { border-color: var(--accent); }
.cmp-vs { font-size: 14px; font-weight: 700; color: var(--text-3); }
.vs-rows { display: flex; flex-direction: column; gap: 4px; }
.vs-row { display: grid; grid-template-columns: 1fr 140px 1fr; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.vs-row:last-child { border-bottom: none; }
.vs-val { font-size: 14px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vs-val.win { color: var(--accent); }
.vs-lbl { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.6px; }
.muted { color: var(--text-3); }
.secondary { color: var(--text-2); }
.mono { font-variant-numeric: tabular-nums; }
.drop-zone .drop-inner {
  display: block; position: relative;
  text-align: center; padding: 34px 20px;
  border: 1px dashed var(--border); border-radius: var(--radius);
  transition: all var(--transition);
}
.drop-zone:hover .drop-inner { border-color: var(--border-2); background: var(--bg-hover); }
.drop-zone.drag-over .drop-inner { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.01); }
.drop-zone:focus-within .drop-inner { border-color: var(--accent); }
/* The InputFile covers the whole dashed box (opacity 0, not display:none) so real
   drag-drop lands on it — Blazor's inputfile.js streams from the change event. */
.drop-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; padding: 0; border: 0; border-radius: var(--radius); z-index: 1;
}

/* ═══ Responsive ═══ */
@media (max-width: 1024px) {
  .main-content { padding: 28px 24px 56px; }
}

@media (max-width: 768px) {
  .topbar { display: flex; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    transform: translateX(-105%); transition: transform 300ms var(--ease-ios);
    box-shadow: var(--shadow);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.show { display: block; }
  .main-content { padding: 22px 16px 48px; }
  .hero-card { padding: 24px 22px; gap: 22px; }
  .hero-title { font-size: 30px; }
  .hero-stats { gap: 18px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .page-head { flex-direction: column; align-items: flex-start; }
  .clock-grid { grid-template-columns: 26px repeat(24, 1fr); }
  .artwork.xl { width: 92px; height: 92px; font-size: 26px; }
}

@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: 26px; }
  .rank-row { gap: 10px; padding: 10px 12px; }
  .rank-num { width: 26px; font-size: 13px; }
}

/* ═══ Real artwork (iTunes hotlink) + clickable tiles ═══ */
.artwork img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 2; border-radius: inherit;
}
.artwork.has-image .initials { visibility: hidden; }
.artwork-link { display: inline-flex; flex-shrink: 0; border-radius: inherit; }
.artwork-link:hover .artwork { transform: scale(1.04); }
.artwork-link .artwork { transition: transform 150ms ease; }

/* ═══ Artist/album hero side (completion ring) ═══ */
.hero-side { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-left: auto; padding-left: 18px; }
.completion-note { font-size: 12.5px; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.hero-link { color: var(--accent); text-decoration: none; }
.hero-link:hover { text-decoration: underline; }

/* ═══ Discography album cards ═══ */
.album-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px; margin-bottom: 26px;
}
.album-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
  color: var(--text); text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease;
}
.album-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.album-card .artwork { width: 100%; height: auto; aspect-ratio: 1/1; border-radius: var(--radius-sm); }
.album-card-name { font-weight: 700; font-size: 14px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.album-card-meta { font-size: 12px; color: var(--text-3); font-weight: 600; }
.album-card-bar { height: 4px; border-radius: 999px; background: var(--bg-active); overflow: hidden; }
.album-card-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); }

/* ═══ Tracklist rows ═══ */
.track-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-card);
  margin-bottom: 6px;
}
.track-row:hover { border-color: var(--border-2); }
.track-num { width: 26px; text-align: right; color: var(--text-3); font-weight: 700; font-size: 12.5px; flex-shrink: 0; }
.track-title { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-dur { color: var(--text-3); font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
.track-check { color: var(--accent); font-weight: 800; flex-shrink: 0; font-size: 12.5px; }
.track-unheard .track-title { color: var(--text-2); }

/* ═══ Badges ═══ */
.new-to-you {
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--border-2); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap; flex-shrink: 0;
}
.all-listened {
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap; flex-shrink: 0;
}
.section-sub { font-size: 12.5px; color: var(--text-3); font-weight: 600; margin-left: 10px; }

/* ═══ Weekday averages chart ═══ */
.weekday-chart {
  display: flex; flex-direction: row; gap: 8px;
  justify-content: space-between; align-items: stretch; height: 190px;
}
.weekday-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; height: 100%; }
.weekday-bar-wrap {
  flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center;
  min-height: 40px;
}
.weekday-bar {
  width: 22px; border-radius: 6px 6px 2px 2px; min-height: 2px;
  background: linear-gradient(180deg, var(--grad-a), var(--grad-b));
  transition: filter 120ms ease, transform 120ms ease;
}
.weekday-bar:hover { filter: brightness(1.2); }
.weekday-val { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.weekday-lbl { font-size: 11px; color: var(--text-3); font-weight: 700; text-transform: uppercase; }

/* ═══ Metadata loading bar (discography / tracklist fetch) ═══ */
.meta-load {
  display: flex; flex-direction: column; gap: 10px; padding: 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 24px;
}
.meta-bar {
  height: 6px; border-radius: 999px; overflow: hidden; position: relative;
  background: var(--bg-elev, #1e1e26);
}
.meta-bar::after {
  content: ""; position: absolute; inset: 0; width: 40%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--grad-a), var(--grad-b), transparent);
  animation: meta-shimmer 1.3s infinite linear;
}
.meta-load-label {
  font-size: 12.5px; font-weight: 600; color: var(--text-2); letter-spacing: 0.2px;
}
@keyframes meta-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(350%); }
}

/* ── Track versions list ─────────────────────────────── */
.version-list { display: flex; flex-direction: column; gap: 6px; }
.version-row { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: var(--radius-sm); transition: background .15s ease; }
.version-row:hover { background: var(--card-hover, rgba(128,128,128,.08)); }
.version-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.version-name { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.version-sub { font-size: 12.5px; color: var(--text-3); }

/* ═══ Premium hover system (2026-08-04) — fast, subtle, uniform ═══ */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.btn { transition: all 120ms ease, box-shadow 120ms ease; }
.btn:active { transform: translateY(0) scale(0.97); filter: brightness(0.94); }
.card {
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.card:hover {
  border-color: var(--border-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
details.card > summary { cursor: pointer; list-style: none; user-select: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h2 { display: inline; }
details.card > summary:hover { color: var(--text); }
details.card[open] > summary { margin-bottom: 4px; }

.rank-row {
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.rank-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--grad-a), var(--grad-b));
  opacity: 0; transform: scaleY(0.15);
  transition: opacity 100ms ease, transform 100ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rank-row:hover {
  background: linear-gradient(90deg, var(--accent-soft), transparent 72%);
}
.rank-row:hover::before { opacity: 1; transform: scaleY(1); }
.rank-row .artwork { transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.rank-row:hover .artwork { transform: scale(1.08); }
.rank-row .rank-name { transition: color 100ms ease; }
.rank-row:hover .rank-name { color: var(--accent); }
.rank-row .rank-num { transition: color 100ms ease; }
.rank-row:hover .rank-num { color: var(--accent); }
.artwork-link:hover .artwork { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), var(--shadow-sm); }

.cal-day { transition: box-shadow 100ms ease, filter 100ms ease; cursor: pointer; }
.cal-day:hover { box-shadow: 0 0 0 2px var(--accent); filter: brightness(1.35); }
.clock-cell { transition: box-shadow 100ms ease, filter 100ms ease; }
.clock-cell:hover { box-shadow: 0 0 0 2px var(--accent); filter: brightness(1.35); }

.track-row { transition: border-color 120ms ease, transform 120ms ease, background 120ms ease; }
.track-row:hover { box-shadow: inset 3px 0 0 0 var(--accent); }

/* ═══ Import wizard: real progress (2026-08-04) ═══ */
.import-progress {
  height: 6px; border-radius: 999px; overflow: hidden; position: relative;
  background: var(--bg-elev, #1e1e26); margin: 16px 0 4px;
}
.import-progress::after {
  content: ""; position: absolute; inset: 0; width: 40%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--grad-a), var(--grad-b), transparent);
  animation: meta-shimmer 1.2s infinite linear;
}
.import-counters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px; margin: 14px 0 4px;
}
.import-counter {
  background: var(--bg-elev, #1e1e26); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 10px; text-align: center;
}
.import-counter .num { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.import-counter .lbl { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; margin-top: 2px; }
.import-log { margin-top: 16px; }
.import-log summary { font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.import-log pre {
  margin: 10px 0 0; padding: 12px 14px; max-height: 260px; overflow: auto;
  background: var(--bg-elev, #101014); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 11px; line-height: 1.55;
  color: var(--text-2); font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  white-space: pre-wrap; word-break: break-word;
}
.last-import-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600;
  margin-bottom: 18px;
}
.last-import-chip .chip-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  flex-shrink: 0;
}

/* ═══ Qualification debug card (2026-08-04) ═══ */
.qual-debug-card { margin-bottom: 26px; }
.qual-debug-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qual-debug-row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border-soft);
}
.qual-debug-row:last-child { border-bottom: none; }
.qual-debug-code {
  width: 190px; flex-shrink: 0; font-size: 12.5px; font-weight: 600;
  color: var(--text-2); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qual-debug-bar-wrap {
  flex: 1; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--bg-elev, #1e1e26);
}
.qual-debug-bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  transition: width 300ms var(--ease-ios);
}
.qual-debug-num { width: 64px; text-align: right; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); flex-shrink: 0; }
@media (max-width: 560px) { .qual-debug-code { width: 120px; } }

/* ═══ Shared states (2026-08-04) — uniform loading/empty ═══ */
.sub { font-size: 12.5px; color: var(--text-3); margin-top: 6px; }
.empty-state { text-align: center; padding: 34px 20px; }
.empty-icon { font-size: 38px; margin-bottom: 10px; opacity: 0.9; }
.empty-title { font-size: 14px; font-weight: 700; color: var(--text); }
.empty-msg { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.6; max-width: 420px; margin-left: auto; margin-right: auto; }
.empty-icon svg { width: 38px; height: 38px; color: var(--text-3); stroke-width: 1.6; }
.track-listened .track-title { color: var(--accent); }

/* ═══ Import drop zone as label (stays mounted for Blazor file streaming) ═══ */
.drop-zone { display: block; cursor: pointer; }
.drop-zone-hidden { display: none !important; }

/* ═══ Heatmap legend numbers (2026-08-04) ═══ */
.hm-legend-num { font-size: 11px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hm-legend-note { font-size: 11px; color: var(--text-3); }

/* ═══ Shared custom tooltip (2026-08-04, JS-rendered 2026-08-15) — ALWAYS ABOVE EVERYTHING ═══
   Any element with class="tip" + data-tip="..." gets a body-level tooltip
   (position:fixed, z-index max) — immune to overflow:hidden and stacking
   contexts inside cards/widgets/grids. Rendered by ReplayLensTheme.tooltips. */
.tip { position: relative; }

#rl-tooltip {
  position: fixed; z-index: 2147483647;
  pointer-events: none;
  max-width: min(280px, calc(100vw - 32px));
  background: var(--surface-2, #171a1f);
  color: var(--text-1, #f2f3f5);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden;
  transform: translateY(4px) scale(0.96);
  transition: opacity var(--t-state), transform var(--t-state);
}
#rl-tooltip.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

/* Empty data-tip guard: nothing to show */
.tip[data-tip=""] { pointer-events: auto; }

/* ═══ Area chart dots (2026-08-04) ═══ */
.area-chart .dot { fill: var(--grad-a); opacity: 0.0; transition: opacity 120ms ease; }
.area-chart:hover .dot { opacity: 0.8; }
.area-chart .dot:hover { opacity: 1; }

/* ═══ Accent palettes (always dark, 2026-08-05) ═══ */
html[data-accent="blue"] {
  --accent: #3b82f6; --accent-strong: #2563eb;
  --accent-soft: rgba(59, 130, 246, 0.12); --accent-glow: rgba(59, 130, 246, 0.16);
  --grad-a: #60a5fa; --grad-b: #22d3ee;
  --accent-rgb: 59, 130, 246; --grad-rgb: 34, 211, 238;
}
html[data-accent="pink"] {
  --accent: #f06292; --accent-strong: #e0527f;
  --accent-soft: rgba(240, 98, 146, 0.12); --accent-glow: rgba(240, 98, 146, 0.16);
  --grad-a: #f78fb3; --grad-b: #ff8fb0;
  --accent-rgb: 240, 98, 146; --grad-rgb: 255, 143, 176;
}

/* ═══ History page filters (2026-08-05) ═══ */
.history-filters { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.day-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: filter 110ms ease;
}
.day-chip:hover { filter: brightness(1.2); }
.counting-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-2); cursor: pointer; user-select: none;
}

/* ═══ Custom native controls (P12 2026-08-15): no default browser chrome ═══
   Checkboxes, radios and range sliders get the app look: hairline border,
   accent fill when active, iOS press scale, focus-visible ring. .switch inputs
   (opacity-0 iOS toggles) are deliberately excluded. */
input[type="checkbox"]:not(.switch input),
input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex-shrink: 0; margin: 0; padding: 0;
  vertical-align: middle; cursor: pointer;
  background: var(--bg-elev);
  border: 1px solid var(--border-2); border-radius: 5px;
  display: inline-grid; place-content: center;
  transition: background var(--t-state), border-color var(--t-state), transform var(--t-state);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:not(.switch input):hover,
input[type="radio"]:hover { border-color: var(--accent); background: var(--bg-hover); }
input[type="checkbox"]:not(.switch input):checked {
  background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:not(.switch input):checked::before {
  content: ""; width: 10px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6 6.6 12 12.8 4.6' fill='none' stroke='%2304120a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="radio"]:checked::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #04120a;
}
input[type="checkbox"]:not(.switch input):active,
input[type="radio"]:active { transform: scale(0.9); }
input[type="checkbox"]:not(.switch input):focus-visible,
input[type="radio"]:focus-visible,
input[type="range"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px;
}
input[type="range"] {
  appearance: none; -webkit-appearance: none;
  height: 6px; border-radius: 999px; padding: 0;
  background: var(--bg-active); border: 1px solid var(--border);
  cursor: pointer; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg-card);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  transition: transform var(--t-state);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.2); }
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg-card);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
input[type="range"]::-moz-range-track { background: transparent; }

/* ═══ Settings accent picker (2026-08-05) ═══ */
.accent-pills { display: flex; gap: 8px; }
.accent-pill {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); padding: 0; cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.accent-pill:hover { transform: scale(1.12); }
.accent-pill.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ═══ Settings qualification result (2026-08-05) ═══ */
.qual-result { font-size: 13px; font-weight: 600; color: var(--success); }
.qual-result.qual-error { color: var(--danger); }
.apple-diag { width: 100%; font-size: 13px; padding: 12px 14px; border-radius: var(--radius-sm, 10px); border: 1px solid var(--border); background: var(--bg-card); }
.apple-diag .diag-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.apple-diag .diag-badge { font-weight: 700; font-size: 12px; letter-spacing: .4px; padding: 3px 10px; border-radius: 999px; }
.apple-diag.diag-ok .diag-badge { background: rgba(74, 222, 128, .14); color: var(--success); }
.apple-diag.diag-bad .diag-badge { background: rgba(248, 113, 113, .14); color: var(--danger); }
.apple-diag .diag-overall { font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; color: var(--text-2); }
.apple-diag .diag-line { font-size: 12.5px; color: var(--text-2); padding: 2px 0; }
.apple-diag .diag-cause { margin-top: 8px; font-weight: 600; color: var(--text); }
.apple-diag .diag-hint { margin-top: 2px; font-size: 12.5px; color: var(--text-3); }

/* P4 — live Apple library & activity (Settings → Apple Music Connect). */
.settings-details { border-top: 1px solid var(--border-soft); padding-top: 10px; margin-top: 2px; }
.settings-details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); padding: 4px 0; }
.settings-details summary:hover { color: var(--text); }
.apple-lib-list { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 6px; max-height: 260px; overflow-y: auto; }
.apple-lib-item { font-size: 12.5px; color: var(--text-2); display: block; padding: 2px 0; }
.apple-lib-kind { display: inline-block; min-width: 96px; font-size: 11px; letter-spacing: .3px; text-transform: uppercase; color: var(--text-3); }
.apple-lib-name { color: var(--text); font-weight: 500; }
.apple-lib-ts { color: var(--text-3); font-size: 12px; }
.apple-honest-note { margin-top: 6px; color: var(--text-3); font-style: italic; }

/* ═══ Album edition groups + version rows (2026-08-06) ═══ */
.pct-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  color: #04120a; background: var(--accent); border-radius: 999px;
  padding: 3px 10px; white-space: nowrap; flex-shrink: 0;
}
.track-clickable { cursor: pointer; }
.track-clickable:hover { border-color: var(--border-2); box-shadow: inset 3px 0 0 0 var(--accent); }
.track-chevron { color: var(--text-3); transition: transform 150ms ease; flex-shrink: 0; }
.track-chevron.open { transform: rotate(180deg); }
.track-variant-count {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--border-2); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap; flex-shrink: 0;
}
.track-variant-list {
  display: flex; flex-direction: column; gap: 4px;
  margin: -2px 0 8px 26px; padding-left: 10px;
  border-left: 2px solid var(--border-2);
  animation: fadeInList 160ms ease;
}
.track-variant { margin-bottom: 0; background: var(--bg-card-2, var(--bg-card)); }
.track-variant .track-title { font-weight: 500; }
.track-title-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.track-variant-album {
  font-size: 11px; color: var(--text-3); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes fadeInList { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.track-variant-list { animation: fadeInList var(--t-state); }

/* ═══ Account pages (login / register) ═══ */
.auth-shell {
  min-height: calc(100vh - 140px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px;
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 34px 30px 28px;
  box-shadow: var(--shadow);
}
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-brand h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 4px; }
.auth-form .form-group { margin-bottom: 16px; }
.auth-form input { height: 46px; font-size: 14px; }

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ Milestones ═══ */
.milestone-icon { font-size: 18px; text-align: center; }
.milestone-bar { height: 6px; border-radius: 999px; background: var(--bg-active); overflow: hidden; }
.milestone-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); transition: width 300ms var(--ease-ios); }
.milestone-meta { font-size: 11px; color: var(--text-3); }
.milestone-state { font-size: 11px; font-weight: 700; color: var(--text-2); }

/* ═══ Sidebar sign-out ═══ */
.sign-out-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: border-color 120ms ease, color 120ms ease; flex-shrink: 0;
}
.sign-out-btn:hover { border-color: var(--danger); color: var(--danger); }

/* ═══ P5 visual-consistency additions (2026-08-15) ═══
   Radius ladder: --radius 16 (cards/containers) · --radius-sm 10 (rows/inputs/buttons) · --radius-xs 8 (pills/chips/sm artwork)
   Type scale: 22 title / 14 body / 12.5 sub / 11 caption (display numerals + h1/h2/hero exempt) */

/* Milestones: loading + stat cards */
.skeleton-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.skeleton-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--bg-active), transparent);
  animation: meta-shimmer 1.3s infinite linear;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-bottom: 26px;
}
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  transition: border-color 120ms ease, transform 120ms ease;
}
.stat-card:hover { border-color: var(--border-2); transform: translateY(-1px); }
.stat-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600; }
.stat-value { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat-unit { font-size: 14px; font-weight: 600; color: var(--text-3); margin-left: 4px; }
.stat-sub { font-size: 12.5px; color: var(--text-3); margin-top: 6px; }

/* Milestones: list header */
.list-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-soft);
}
.list-title { font-size: 14px; font-weight: 700; color: var(--text); }
.list-count { font-size: 12.5px; color: var(--text-3); font-weight: 600; }

/* Milestones: ladder rows */
.milestone-icon { flex: 0 0 38px; display: flex; justify-content: center; color: var(--text-3); }
.milestone-icon.reached { color: var(--accent); }
.milestone-icon svg { width: 20px; height: 20px; }
.milestone-body { flex: 1; min-width: 0; }
.milestone-body .track-title { margin: 0; }
.milestone-body .milestone-bar { margin-top: 6px; }
.milestone-body .milestone-meta { margin-top: 4px; }
.milestone-state { flex-shrink: 0; }

/* ProgressRing */
.progress-ring { flex-shrink: 0; display: block; }
.progress-ring .ring-track { stroke: var(--bg-active); }
.progress-ring .ring-accent { stroke-linecap: round; transition: stroke-dashoffset 500ms ease; }

/* Ghost button (Milestones refresh) */
.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); border-color: var(--text-3); }
.btn-ghost:disabled { opacity: 0.55; cursor: default; transform: none; }

/* Import wizard */
.tab-switch { display: flex; gap: 12px; margin-bottom: 24px; }
.import-guide { color: var(--text-2); margin-bottom: 16px; line-height: 1.7; }
.import-guide p { margin: 14px 0 0; }
.import-guide p:first-child { margin-top: 0; }
.import-guide ol { margin: 8px 0 0 20px; font-size: 14px; }
.import-guide ul { margin: 8px 0 0 20px; font-size: 14px; }
.import-guide li { margin-bottom: 5px; }
.import-guide code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px; color: var(--accent);
  background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}
.import-format { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.import-facts { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
.import-fact {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 10px;
}
.import-fact svg { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; }
.spinner {
  display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-right: 8px;
  border-radius: 50%; border: 2px solid var(--border-2); border-top-color: var(--accent);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.import-done-title { display: flex; align-items: center; gap: 9px; }
.import-done-title svg { width: 21px; height: 21px; color: var(--success); flex-shrink: 0; }
.import-status {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-2); margin-top: 4px;
}
.drop-icon { width: 44px; height: 44px; display: block; margin: 0 auto 8px; color: var(--text-2); }
.drop-copy { color: var(--text-2); font-size: 14px; display: block; }
.drop-browse { color: var(--accent); cursor: pointer; text-decoration: underline; }
.drop-hint { color: var(--text-3); font-size: 12.5px; margin-top: 8px; display: block; }
.file-row { padding: 6px 0; color: var(--text-2); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.file-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-3); }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-status { margin: 16px 0 4px; display: flex; justify-content: space-between; font-size: 14px; color: var(--text-2); }
.import-counters + .btn { margin-top: 16px; }
.import-note { color: var(--text-2); margin: 12px 0; }
.card .btn + .btn { margin-left: 8px; }

/* History rows (Dashboard + Search) */
.rank-time { font-size: 11px; font-weight: 600; }
.rank-time.wide { width: 110px; text-align: left; }
.rank-kind { font-size: 11px; font-weight: 800; width: 46px; text-align: center; color: var(--text-3); }
.rank-stat.truncate { max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-stat .album-txt { font-size: 12.5px; color: var(--text-3); }
.rank-dur { margin-left: 12px; font-size: 12.5px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-sub { margin-bottom: 20px; }
.list-foot-note { margin-top: 12px; text-align: center; }
.section-head.after-list { margin-top: 28px; }
.search-bar.compact { margin-bottom: 8px; }

/* Hero stat ellipsis (Review top artist/track) */
.hero-stat .num.ellipsis { font-size: 14px; line-height: 1.3; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chart-card sub spacing */
.chart-card > .sub { margin-bottom: 12px; }
.chart-head .sub { margin: 0; }

/* Dashboard */
.card .meta-bar { margin: 8px 0 10px; }
.qual-debug-body { margin-top: 14px; }
.qual-debug-summary .badge { margin-left: 8px; }
.list-container.flush { margin-bottom: 0; }

/* About page */
.about-logo { width: 64px; height: 64px; border-radius: var(--radius); margin: 0 auto; }
.about-badges { margin-top: 24px; }
.about-meta { margin-top: 28px; text-align: left; max-width: 400px; margin-left: auto; margin-right: auto; }
.about-meta-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.about-meta-row:last-child { border-bottom: none; }
.about-note { margin-top: 28px; color: var(--text-3); font-size: 12.5px; }

/* Settings */
.settings-select { width: auto; min-width: 120px; }
.settings-input {
  width: 220px; max-width: 100%;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
}
.settings-input::placeholder { color: var(--text-3); }
.settings-input:focus { outline: none; border-color: var(--accent); }
.settings-row .secondary { font-size: 12.5px; }

/* Clock legend cells */
.hm-legend .clock-cell { width: 11px; height: 11px; flex: 0 0 11px; max-width: 11px; }

/* Sidebar foot user row (NavMenu) */
.sidebar-foot-user { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sidebar-foot-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Empty data-tip guard */
.tip[data-tip=""]::after, .tip[data-tip=""]::before { display: none; }
.file-list { margin: 12px 0; list-style: none; }
.file-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-elev);
  margin-bottom: 8px;
}
.file-row .file-icon { width: 15px; height: 15px; color: var(--text-3); flex-shrink: 0; }
.file-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-counters.compact { margin: 12px 0; }
.import-actions { display: flex; gap: 8px; margin-top: 16px; }
.day-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.day-chip svg:last-child { width: 11px; height: 11px; }

/* ── Dashboard widget grid — gridstack 4-unit grid (P10b 2026-08-15) ──
   Container = gridstack: 4 columns × 96px rows, 12px margins. Widgets are
   .grid-stack-item shells (gs-x/y/w/h = units); inner cards size to their
   content (no internal scrollbars — user rule), clipped by the cell. */
.page-head-actions { display: flex; align-items: center; gap: 8px; }

.widget-grid.grid-stack { margin-bottom: 26px; min-height: 108px; }
.grid-stack-item { min-width: 0; }

/* New widgets fade+rise in on creation (element creation only — @key identity
   keeps existing shells untouched on re-render; NO fill-mode so gridstack's
   inline drag transforms are never overridden). */
@keyframes widget-in { from { opacity: 0; transform: scale(.98) translateY(6px); } to { opacity: 1; transform: none; } }
.grid-stack-item { animation: widget-in 300ms var(--ease-ios); }

/* Cell content: flex column so inner cards stretch to the cell; gridstack's
   own rule sets overflow-y:auto — override it. NOTE: gridstack.min.css ships
   the SAME selector (.grid-stack > .grid-stack-item > .grid-stack-item-content)
   AND is linked AFTER app.css, so a same-specificity rule LOSES the tie —
   the .widget-grid prefix wins (rework 5: without it, computed overflow-y was
   'auto' and 6px of content overflow could render a scrollbar). Corner ladder
   (P10b rework 2): 16px for full-width widgets, 10px mid, 8px small — follows
   live gs-w/h attributes so presets + freeform resizes re-round instantly. */
.widget-grid.grid-stack > .grid-stack-item > .grid-stack-item-content {
  display: flex; flex-direction: column;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.grid-stack.gs-4 > .grid-stack-item[gs-w="1"] > .grid-stack-item-content { border-radius: var(--radius-xs); }
.grid-stack.gs-4 > .grid-stack-item[gs-w="2"] > .grid-stack-item-content,
.grid-stack.gs-4 > .grid-stack-item[gs-w="3"] > .grid-stack-item-content { border-radius: var(--radius-sm); }
.grid-stack.gs-4 > .grid-stack-item[gs-w="4"] > .grid-stack-item-content { border-radius: var(--radius); }

/* Inner cards FILL the cell (P10b rework 3 content contract): flex:1 +
   min-height:0 means the card background always covers the cell and its body
   re-flows to the remaining space — no internal scrolling, no stretching or
   scaling of text/artwork; charts + heatmaps scale via SVG viewBox / cell
   geometry only. Per-widget min sizes (gs-min-* attrs) keep content visible. */
.grid-stack-item-content > .chart-card,
.grid-stack-item-content > .hero-card,
.grid-stack-item-content > .qual-debug-card {
  flex: 1 1 auto; height: auto; min-height: 0; margin-bottom: 0;
  display: flex; flex-direction: column;
}
.grid-stack-item-content > .chart-card { container-type: size; padding: 12px 16px; } /* cqh units feed the heatmap cap below */
.grid-stack-item-content > .chart-card h2 { margin-bottom: 10px; }
.grid-stack-item-content > .section-head { flex: 0 0 auto; margin: 8px 0 4px; }
.grid-stack-item-content > .section-head + .list-container,
.grid-stack-item-content > .list-container { flex: 1 1 auto; height: auto; margin-bottom: 0; min-height: 0; }
.grid-stack-item-content .list-container .rank-row { padding: 8px 10px; }

/* Charts re-flow to the cell: the wrap flexes and the SVG (viewBox) fills it. */
.grid-stack-item-content .chart-wrap { flex: 1 1 auto; min-height: 24px; }
.grid-stack-item-content .area-chart { height: 100%; aspect-ratio: auto !important; }

/* Hero keeps its look inside a 2-tall cell: compact padding, rings in a row,
   wraps below the main block at narrow widths instead of overflowing. */
.grid-stack-item-content > .hero-card { padding: 14px 18px; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; }
.grid-stack-item-content .hero-rings { flex-direction: row; gap: 14px; }
.grid-stack-item-content .hero-rings .progress-ring { width: 48px; height: 48px; }
.grid-stack-item-content .ring-wrap { gap: 3px; }

/* Calendar heatmap: day cells cap to the cell height (container-query units)
   so ALL weeks stay visible at any allowed size — the heatmap compresses,
   nothing clips, nothing scrolls. */
.grid-stack-item-content .cal-wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding-bottom: 2px; }
.grid-stack-item-content .cal { flex: 1 1 auto; min-height: 0; }
.grid-stack-item-content .cal-dow-labels { padding-top: 14px; }
.grid-stack-item-content .cal-dow { min-height: 0; }
.grid-stack-item-content .cal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.grid-stack-item-content .cal-week-row { flex: 0 0 auto; min-height: 0; }
.grid-stack-item-content .cal-day { height: 28px; max-height: min(28px, calc((100cqh - 125px) / 7)); }
.grid-stack-item-content .cal-body { justify-content: flex-start; }

/* Weekday bars fill the cell height (flex), labels stay natural. */
.grid-stack-item-content .clock-weekdays { margin-top: 10px; padding-top: 10px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.grid-stack-item-content .clock-weekday-row { height: auto; flex: 1 1 auto; min-height: 40px; }

/* Provider split rows — compact so both rows fit a 2×2 cell. */
.grid-stack-item-content .ps-row { padding: 9px 2px; }
.grid-stack-item-content .ps-head { margin-bottom: 4px; }

/* Milestones widget list (reuses .milestone-* tokens from the Milestones page) */
.milestone-widget-list { display: flex; flex-direction: column; }
.milestone-widget-item { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.milestone-widget-item:last-child { border-bottom: none; padding-bottom: 2px; }
.milestone-widget-item .milestone-icon { flex: 0 0 30px; }
.milestone-widget-item .milestone-icon svg { width: 18px; height: 18px; }
.grid-stack-item-content .milestone-widget-list { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.grid-stack-item-content .milestone-widget-item { padding: 7px 2px; }
.grid-stack-item-content .milestone-widget-item .milestone-icon { flex: 0 0 28px; }
.grid-stack-item-content .milestone-widget-item .milestone-icon svg { width: 16px; height: 16px; }

/* Customize-mode toolbar = the drag handle (iOS-style: grab the header bar) */
.widget-tools { display: flex; align-items: center; gap: 6px; padding: 7px 10px; margin-bottom: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); cursor: grab; user-select: none; touch-action: none; transition: background 120ms ease, border-color 120ms ease; }
.widget-tools:hover { background: var(--bg-hover); border-color: var(--border-2); }
.widget-tools:active { cursor: grabbing; background: var(--bg-active); }
.widget-tools-label { font-size: 11.5px; font-weight: 700; color: var(--text-3); letter-spacing: .05em; text-transform: uppercase; }
.widget-tools-spacer { flex: 1; }
.w-preset { font-size: 11px; font-weight: 800; letter-spacing: .02em; }

/* iOS-style lift while dragging — subtle scale + shadow, no glow */
.grid-stack-item .grid-stack-item-content { transition: transform 140ms ease, box-shadow 140ms ease; }
.grid-stack-item.ui-draggable-dragging .grid-stack-item-content {
  transform: scale(1.02);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

/* Drop placeholder — accent-tinted dashed cell (rounded, token colors) */
.grid-stack-placeholder > .placeholder-content {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Freeform resize grip (bottom-right corner) — theme-aware diagonal lines.
   Visible whenever customize mode is on (resize must be DISCOVERABLE),
   brighter on hover / while resizing. Selectors are scoped under .widget-grid
   to outrank gridstack.min.css (loaded AFTER app.css — its 20px rotated grip
   would otherwise win the same-specificity rules). */
.widget-grid .grid-stack-item > .ui-resizable-se {
  right: 5px; bottom: 5px; width: 18px; height: 18px;
  transform: none; background-image: none;
  opacity: 0; transition: opacity 120ms ease;
}
.widget-grid .grid-stack-item > .ui-resizable-se::after {
  content: ""; position: absolute; inset: 3px;
  background: repeating-linear-gradient(135deg, var(--text-3) 0 1.5px, transparent 1.5px 6.5px);
  border-radius: 2px; pointer-events: none;
  transition: background 120ms ease;
}
.widget-grid.gs-customizing .grid-stack-item > .ui-resizable-se { opacity: 0.55; }
/* gridstack 11.5.1 adds .ui-resizable-autohide by default (autoHide: true) and
   its CSS sets the handle to display:none — the grip would be invisible even
   in customize mode. Force it visible while customizing (user rule: the resize
   grip must be discoverable); it still hides while an actual drag is in flight
   (gridstack's own .ui-draggable-dragging rule, display:none !important). */
.widget-grid.gs-customizing .grid-stack-item.ui-resizable-autohide > .ui-resizable-se { display: block; }
.widget-grid .grid-stack-item:hover > .ui-resizable-se,
.widget-grid .grid-stack-item.ui-resizable-resizing > .ui-resizable-se { opacity: 0.9; }
.widget-grid .grid-stack-item.ui-resizable-resizing > .ui-resizable-se::after {
  background: repeating-linear-gradient(135deg, var(--accent) 0 1.5px, transparent 1.5px 6.5px);
}

.w-btn { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 7px; color: var(--text-2); cursor: pointer; transition: color 120ms ease, background 120ms ease, border-color 120ms ease, transform 120ms ease; }
.w-btn svg { width: 14px; height: 14px; }
.w-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); border-color: var(--text-3); }
.w-btn:active:not(:disabled) { background: var(--bg-active); transform: scale(0.92); }
.w-btn:disabled { opacity: .35; cursor: default; }
.w-btn-remove:hover:not(:disabled) { color: #ff5c5c; border-color: #ff5c5c; background: color-mix(in srgb, #ff5c5c 10%, transparent); }
.w-btn-remove:active:not(:disabled) { background: color-mix(in srgb, #ff5c5c 22%, transparent); }

/* ═══ Add-widget dropdown — the hidden-widgets tray, now a styled dropdown at
   the TOP of customize mode (user rule). Lists every catalog widget NOT on the
   dashboard; clicking one appends it to the grid. Open state = pure DOM class
   (.open) driven by ReplayLensUI (theme.js) — CSP-safe, no eval. ═══ */
.widget-addbar { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; }
.widget-addbar-hint { font-size: 12.5px; color: var(--text-3); }
.widget-dropdown { position: relative; }
.widget-add-btn { display: inline-flex; align-items: center; gap: 7px; }
.widget-add-btn svg { width: 14px; height: 14px; }
.widget-add-chevron { transition: transform 140ms ease; }
.widget-dropdown.open .widget-add-chevron { transform: rotate(180deg); }
.widget-add-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #04120a; font-size: 11px; font-weight: 800; }
.widget-dropdown-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 120;
  min-width: 330px; max-width: 440px; max-height: 340px; overflow-y: auto;
  padding: 6px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--bg-elev); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition: opacity var(--t-state), transform var(--t-state), visibility 0s linear 140ms;
}
.widget-dropdown.open .widget-dropdown-panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-state), transform var(--t-state);
}
/* Tray items rise in with a tiny stagger when the dropdown opens (class
   re-toggle restarts the animation; backwards fill covers the delay). */
.widget-dropdown.open .widget-dropdown-item { animation: widget-item-in 240ms var(--ease-ios) backwards; }
.widget-dropdown.open .widget-dropdown-item:nth-child(1) { animation-delay: 14ms; }
.widget-dropdown.open .widget-dropdown-item:nth-child(2) { animation-delay: 28ms; }
.widget-dropdown.open .widget-dropdown-item:nth-child(3) { animation-delay: 42ms; }
.widget-dropdown.open .widget-dropdown-item:nth-child(4) { animation-delay: 56ms; }
.widget-dropdown.open .widget-dropdown-item:nth-child(5) { animation-delay: 70ms; }
.widget-dropdown.open .widget-dropdown-item:nth-child(6) { animation-delay: 84ms; }
.widget-dropdown.open .widget-dropdown-item:nth-child(7) { animation-delay: 98ms; }
.widget-dropdown.open .widget-dropdown-item:nth-child(8) { animation-delay: 112ms; }
.widget-dropdown.open .widget-dropdown-item:nth-child(n+9) { animation-delay: 126ms; }
@keyframes widget-item-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.widget-dropdown-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: none; border-radius: var(--radius-xs);
  background: transparent; color: var(--text); text-align: left; cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.widget-dropdown-item:hover { background: var(--bg-hover); }
.widget-dropdown-item:active { background: var(--bg-active); transform: scale(0.99); }
.widget-dropdown-item:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -1px; }
.widget-dropdown-icon {
  flex: 0 0 30px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--accent);
}
.widget-dropdown-icon svg { width: 15px; height: 15px; }
.widget-dropdown-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.widget-dropdown-name { font-size: 13.5px; font-weight: 700; }
.widget-dropdown-desc { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-dropdown-add {
  flex: 0 0 22px; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--text-3); background: var(--bg-card);
  border: 1px solid var(--border);
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.widget-dropdown-add svg { width: 12px; height: 12px; }
.widget-dropdown-item:hover .widget-dropdown-add { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); transform: scale(1.08); }
.widget-dropdown-empty { padding: 14px 12px; font-size: 12.5px; color: var(--text-3); }

/* ═══ Styled dropdowns/selects app-wide (P10b rework 3) — every native
   <select> loses the browser chrome (appearance:none) and gets the app's
   look: token background, custom chevron, hover/press/focus feedback.
   color-scheme: dark keeps the native option panel dark-themed. ═══ */
select.settings-select,
select.cmp-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b909a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  padding-right: 34px;
  color-scheme: dark;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}
select.settings-select:hover,
select.cmp-select:hover { border-color: var(--border-2); background-color: var(--bg-hover); }
select.settings-select:active,
select.cmp-select:active { transform: scale(0.98); }
select.settings-select:focus-visible,
select.cmp-select:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; border-color: var(--accent); }
select.settings-select option,
select.cmp-select option { background: var(--bg-elev); color: var(--text); }

/* ═══ Apple glass mode (P11 2026-08-15) — pure CSS switch via html[data-glass] ═══
   html[data-glass="on"] = glassmorphism on ACTIVE/HOVER/PRESS interactive states
   only: translucent surface + backdrop blur + the existing 1px hairline stays
   (plus a subtle inset top highlight — a hairline, not a glow). Cards/tiles are
   NEVER blurred. Absent attribute (glass off) = the flat solid look; nothing in
   this block applies. The attribute is server-rendered per user (App.razor) and
   flipped live by ReplayLensTheme.setGlass (theme.js). */
html[data-glass="on"] {
  --glass-blur: 16px;
  --glass-sat: 1.5;
}
html[data-glass="on"] .nav-item { transition: background var(--transition), color var(--transition), backdrop-filter var(--transition); }
html[data-glass="on"] .rank-row { transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease, backdrop-filter 120ms ease; }

/* Active sidebar item — frosted accent pill */
html[data-glass="on"] .nav-item.active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Sidebar item hover */
html[data-glass="on"] .nav-item:hover:not(.active) {
  background: color-mix(in srgb, var(--bg-hover) 55%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}

/* Active range pill — frosted accent segmented control */
html[data-glass="on"] .range-btn.active {
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 0 0 1px rgba(4, 18, 10, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
html[data-glass="on"] .range-btn:hover:not(.active) {
  background: color-mix(in srgb, var(--bg-hover) 55%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}

/* Buttons — hover + press states */
html[data-glass="on"] .btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-strong) 85%, transparent); }
html[data-glass="on"] .btn-secondary:hover:not(:disabled),
html[data-glass="on"] .btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--bg-hover) 55%, transparent); }
html[data-glass="on"] .btn:hover:not(:disabled),
html[data-glass="on"] .btn:active:not(:disabled) {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}
html[data-glass="on"] .btn:active:not(:disabled) { background: color-mix(in srgb, var(--bg-active) 55%, transparent); }

/* Rank rows — hover glass over the accent wash */
html[data-glass="on"] .rank-row:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}

/* Track rows (tracklists / versions) */
html[data-glass="on"] .track-row:hover,
html[data-glass="on"] .version-row:hover {
  background: color-mix(in srgb, var(--bg-hover) 55%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}

/* Chips, pills, ghost controls */
html[data-glass="on"] .day-chip:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}
html[data-glass="on"] .accent-pill:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}
html[data-glass="on"] .w-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bg-hover) 55%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}
html[data-glass="on"] .sign-out-btn:hover {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}
html[data-glass="on"] .share-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}

/* Import step indicator (active state) */
html[data-glass="on"] .import-step.active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}

/* Micro cells (.cal-day / .clock-cell hovers) intentionally keep their ring-only
   hover — backdrop blur at 2-11px is imperceptible and flickers. Cards/tiles
   (.card, .stat-box, .album-card, .stat-card) stay flat per the P5 Apple-restraint
   look: glass applies to active/hover/press INTERACTIVE states only. */

/* ═══ Gridstack 4-column widths ═══
   gridstack.min.css only ships .gs-12/.gs-1 rules; a custom 4-unit grid
   needs its own width rules (100% * w/4). */
.grid-stack.gs-4 > .grid-stack-item[gs-w="1"] { width: 25%; }
.grid-stack.gs-4 > .grid-stack-item[gs-w="2"] { width: 50%; }
.grid-stack.gs-4 > .grid-stack-item[gs-w="3"] { width: 75%; }
.grid-stack.gs-4 > .grid-stack-item[gs-w="4"] { width: 100%; }
.grid-stack.gs-4 > .grid-stack-item[gs-x="0"] { left: 0%; }
.grid-stack.gs-4 > .grid-stack-item[gs-x="1"] { left: 25%; }
.grid-stack.gs-4 > .grid-stack-item[gs-x="2"] { left: 50%; }
.grid-stack.gs-4 > .grid-stack-item[gs-x="3"] { left: 75%; }

/* ═══ P10b rework 2 — grid overlay, snap affordance, universal feedback ═══
   (2026-08-15). Two state classes on the grid container (set by
   gridstack-dashboard.js): .gs-customizing (customize mode active) and
   .gs-dragging (a drag/resize is in flight). Both show a subtle hairline
   blueprint grid — column lines every 25% (1 unit), row lines every 96px
   (1 row unit; gridstack positions rows at y*96, margins live inside the
   shells, so the hairlines sit centered in the 24px gutters). */

.widget-grid.gs-customizing,
.widget-grid.gs-dragging {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--text-3) 10%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--text-3) 10%, transparent) 1px, transparent 1px);
  background-size: 25% 96px;
  background-position: 0 0;
  background-repeat: repeat;
  border-radius: var(--radius-sm);
}

/* Customize mode: faint ring around every cell so the draggable area reads */
.widget-grid.gs-customizing .grid-stack-item-content {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-2) 45%, transparent);
}

/* While dragging: accent ring on the lifted item (outline follows the radius) */
.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: -2px;
}

/* ═══ Universal press feedback (P10b rework 2) ═══
   iOS-like: every interactive element gets a distinct :active layered on its
   :hover — scale(0.97)-class press + slight dim. :focus-visible rings are
   already global (see Premium hover system). */

.nav-item:active:not(.active) { background: var(--bg-active); transform: scale(0.97); }
.range-btn:active:not(.active) { background: var(--bg-active); transform: scale(0.96); }
.accent-pill:active { transform: scale(0.94); filter: brightness(0.92); }
.day-chip:active { filter: brightness(0.85); transform: scale(0.96); }
.share-btn:active { background: var(--accent-soft); transform: scale(0.97); }
.sign-out-btn:active { background: color-mix(in srgb, var(--danger) 12%, transparent); transform: scale(0.97); }
.rank-row:active { background: var(--bg-active); }
.track-row:active,
.version-row:active { background: var(--bg-active); }
.album-card:active { transform: translateY(0) scale(0.98); border-color: var(--accent); }
.stat-box:active { transform: translateY(0) scale(0.98); }
.card:active { transform: translateY(0) scale(0.98); }
details.card > summary:active { color: var(--accent); }
.hamburger:active { transform: scale(0.94); background: var(--bg-active); }
.slider:active::before { transform: scale(0.85); }
.error button:hover { filter: brightness(1.12); }
.error button:active { transform: scale(0.97); filter: brightness(0.95); }
input[type="file"]::file-selector-button:active { background: var(--bg-active); transform: scale(0.97); }
.cmp-select:hover { border-color: var(--border-2); }
tr:active td { background: var(--bg-active); }
a:active { opacity: 0.8; }
.view-all:active { color: var(--accent-strong); }
.hero-link:active { opacity: 0.7; }

/* ═══ Glass-press fix (P10b rework 2) ═══
   The glass :hover background outlives the click while the pointer stays on
   the element, so a press that looks identical to hover reads as "stuck".
   Fix: every glass press gets an unmistakable state — DARKER translucent
   surface than hover + scale(0.97) + reduced blur — and hover releases
   crisply (fast 120ms transitions on both background and backdrop-filter).
   Overrides the earlier glass block (same specificity, later in file). */

html[data-glass="on"] .btn:active:not(:disabled) {
  background: color-mix(in srgb, var(--bg-active) 78%, transparent);
  transform: translateY(0) scale(0.97);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
}
html[data-glass="on"] .btn-primary:active:not(:disabled) { background: color-mix(in srgb, var(--accent-strong) 72%, transparent); }
html[data-glass="on"] .nav-item:active:not(.active) {
  background: color-mix(in srgb, var(--bg-active) 70%, transparent);
  transform: scale(0.97);
}
html[data-glass="on"] .range-btn:active:not(.active) {
  background: color-mix(in srgb, var(--bg-active) 70%, transparent);
  transform: scale(0.96);
}
html[data-glass="on"] .rank-row:active { background: color-mix(in srgb, var(--bg-active) 65%, transparent); }
html[data-glass="on"] .track-row:active,
html[data-glass="on"] .version-row:active { background: color-mix(in srgb, var(--bg-active) 60%, transparent); }
html[data-glass="on"] .day-chip:active { background: color-mix(in srgb, var(--accent) 26%, transparent); transform: scale(0.96); }
html[data-glass="on"] .accent-pill:active { transform: scale(0.94); filter: brightness(0.9); }
html[data-glass="on"] .w-btn:active:not(:disabled) { background: color-mix(in srgb, var(--bg-active) 70%, transparent); transform: scale(0.92); }
html[data-glass="on"] .sign-out-btn:active { background: color-mix(in srgb, var(--danger) 26%, transparent); transform: scale(0.97); }
html[data-glass="on"] .share-btn:active { background: color-mix(in srgb, var(--accent) 20%, transparent); transform: scale(0.97); }

/* Hover-out must be quick so nothing reads as stuck after release */
html[data-glass="on"] .btn { transition: all 120ms ease, box-shadow 120ms ease, backdrop-filter 120ms ease; }
html[data-glass="on"] .nav-item { transition: background 120ms ease, color 120ms ease, transform 120ms ease, backdrop-filter 120ms ease; }
html[data-glass="on"] .range-btn { transition: background 120ms ease, color 120ms ease, transform 120ms ease, backdrop-filter 120ms ease; }
html[data-glass="on"] .w-btn { transition: color 120ms ease, background 120ms ease, border-color 120ms ease, transform 120ms ease, backdrop-filter 120ms ease; }

/* ═══ Widget content adapts to size (2026-08-15) — NEVER clips, squeezes or falls off ═══
   The card is a container query scope: at small widths the content shows FEWER
   items (top 3 instead of top 5), compacts typography and hides non-essential
   parts (rings, legend, stats). Nothing is ever cut off. */
.grid-stack-item-content { container-type: inline-size; }
.grid-stack-item-content .list-container { container-type: size; flex: 1 1 auto; }
.grid-stack-item-content .cal-wrap { container-type: size; }

/* FIXED-PRESET model — content FILLS the size (user: "take the preset and fill
   the data into there"). Row budget by CARD HEIGHT (h=2 → 3 rows, h=3 → 4 rows,
   h=4 → 6 rows, h=5+ → 8 rows); rows beyond the budget are not part of the
   card (display:none) — nothing clips, nothing scrolls, nothing stretches. */
@container (max-height: 240px) {
  .grid-stack-item-content .rank-row:nth-child(n+4) { display: none; }
}
@container (max-height: 340px) {
  .grid-stack-item-content .rank-row:nth-child(n+5) { display: none; }
}
@container (max-height: 430px) {
  .grid-stack-item-content .rank-row:nth-child(n+7) { display: none; }
}
@container (min-height: 431px) {
  .grid-stack-item-content .rank-row:nth-child(n+9) { display: none; }
}

/* Width tiers: compact rows/typography as the card narrows (rows shrink so the
   height budget fits more). Widget rows use .artwork.md (52px) — shrink it. */
@container (max-width: 1150px) {
  .grid-stack-item-content .rank-row { padding-block: 5px; }
  .grid-stack-item-content .rank-row .artwork.md { width: 32px; height: 32px; font-size: 11px; }
  .grid-stack-item-content .rank-name { font-size: 13px; }
  .grid-stack-item-content .rank-sub { font-size: 11px; }
}
@container (max-width: 620px) {
  .grid-stack-item-content .rank-row { padding-block: 4px; }
  .grid-stack-item-content .rank-name { font-size: 12.5px; }
  .grid-stack-item-content .rank-sub { font-size: 10.5px; }
  .grid-stack-item-content .rank-time, .grid-stack-item-content .rank-stat { font-size: 11px; }
  .grid-stack-item-content .artwork.md { width: 30px; height: 30px; font-size: 10px; }
  .grid-stack-item-content .section-head { margin: 8px 0 4px; }
  .grid-stack-item-content .section-head h2 { font-size: 15px; }
}
@container (max-width: 340px) {
  .grid-stack-item-content .rank-time, .grid-stack-item-content .rank-stat { display: none; }
  .grid-stack-item-content .artwork.md { width: 28px; height: 28px; font-size: 10px; }
}

/* Hero: compact when narrow (tiles 2×2, rings + sub hidden — fits 2×2) */
@container (max-width: 620px) {
  .grid-stack-item-content .hero-card { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; }
  .grid-stack-item-content .hero-eyebrow, .grid-stack-item-content .hero-sub { display: none; }
  .grid-stack-item-content .hero-title { font-size: 20px; line-height: 1.15; }
  .grid-stack-item-content .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; width: 100%; }
  .grid-stack-item-content .hero-stat { padding: 1px 0; }
  .grid-stack-item-content .hero-stat-num { font-size: 16px; }
  .grid-stack-item-content .hero-stat-label { font-size: 10px; }
  .grid-stack-item-content .hero-rings { display: none; }
}
@container (max-width: 340px) {
  .grid-stack-item-content .hero-title { font-size: 18px; }
}

/* Calendar / heatmap: drop the legend when narrow so all weeks fit */
@container (max-width: 480px) {
  .grid-stack-item-content .cal-legend,
  .grid-stack-item-content .hm-legend-note { display: none; }
}

/* Weekday widget: the chart-head (title + 6 range pills) wraps to two rows at
   2-unit widths and steals the whole cell — compact the header + bar column
   so the bars always fit their card (no clipping at S/M/L, rework 5). */
@container (max-width: 700px) {
  .grid-stack-item-content .chart-head { margin-bottom: 6px; }
  .grid-stack-item-content .chart-head .range-filter { margin: 0; padding: 3px; gap: 3px; }
  .grid-stack-item-content .chart-head .range-btn { padding: 4px 9px; font-size: 11.5px; }
  .grid-stack-item-content .clock-weekday-col { gap: 3px; }
  .grid-stack-item-content .clock-weekday-bar-wrap { min-height: 14px; }
  .grid-stack-item-content .clock-weekday-val,
  .grid-stack-item-content .clock-weekday-lbl { font-size: 10.5px; }
}

/* Resize grip: fully inside the card, above content, always discoverable */
.grid-stack-item > .ui-resizable-se {
  right: 5px; bottom: 5px; width: 14px; height: 14px; z-index: 5; opacity: 0.65;
}
.grid-stack-item:hover > .ui-resizable-se,
.gs-customizing .grid-stack-item > .ui-resizable-se { opacity: 1; }

/* ═══ P10b rework 5 — Apple-feel sweep (2026-08-15) ═══
   (a) GLASS — ZERO solid fills in glass mode: every interactive surface is
       either frosted (backdrop-filter + translucent bg) or a translucent tint
       with a hairline border, AT REST as well as on hover/press. Dual
       -webkit-/standard backdrop-filter = the fallback chain (@supports
       guard at the bottom for engines with neither). The glass-press rules
       above (darker + scaled :active, fast hover-out) still win for the
       states they cover; these add the missing REST surfaces + remaining
       interactive elements (active pills, checked switches, toolbars,
       floating panels). */

/* Primary buttons — frosted green tint + hairline + top highlight at rest */
html[data-glass="on"] .btn-primary {
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
html[data-glass="on"] .btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-strong) 82%, transparent);
}

/* Secondary / ghost buttons — translucent tint at rest (never a solid fill) */
html[data-glass="on"] .btn-secondary {
  background: color-mix(in srgb, var(--bg-card) 55%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html[data-glass="on"] .btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--bg-hover) 55%, transparent); }
html[data-glass="on"] .btn-ghost { background: color-mix(in srgb, var(--bg-card) 38%, transparent); }
html[data-glass="on"] .btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--bg-hover) 55%, transparent); }

/* Add-widget button — hairline + tint so it reads as a control, not a ghost */
html[data-glass="on"] .widget-add-btn {
  border-color: color-mix(in srgb, var(--border-2) 75%, transparent);
  background: color-mix(in srgb, var(--bg-card) 42%, transparent);
}
html[data-glass="on"] .widget-add-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--bg-hover) 55%, transparent); }

/* Switches — translucent track (checked = translucent accent, knob stays solid white) */
html[data-glass="on"] .switch .slider { background: color-mix(in srgb, var(--bg-active) 62%, transparent); }
html[data-glass="on"] .switch input:checked + .slider {
  background: color-mix(in srgb, var(--accent) 80%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Error/retry button — translucent danger tint */
html[data-glass="on"] .error button { background: color-mix(in srgb, var(--danger) 82%, transparent); }
html[data-glass="on"] .error button:hover { background: color-mix(in srgb, var(--danger) 74%, transparent); }

/* Widget toolbar (drag handle) — translucent at rest, frosted on hover/press */
html[data-glass="on"] .widget-tools { background: color-mix(in srgb, var(--bg-card) 52%, transparent); }
html[data-glass="on"] .widget-tools:hover { background: color-mix(in srgb, var(--bg-hover) 55%, transparent); }
html[data-glass="on"] .widget-tools:active { background: color-mix(in srgb, var(--bg-active) 70%, transparent); }

/* Floating chrome — frosted panels (the classic glass surfaces) */
html[data-glass="on"] .widget-dropdown-panel {
  background: color-mix(in srgb, var(--bg-elev) 70%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
}
html[data-glass="on"] .settings-savebar {
  background: color-mix(in srgb, var(--bg-card) 72%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
}
html[data-glass="on"] .widget-dropdown-icon { background: color-mix(in srgb, var(--bg-card) 60%, transparent); }
html[data-glass="on"] .widget-dropdown-add { background: color-mix(in srgb, var(--bg-card) 60%, transparent); }

/* (b) FEEDBACK — press states for the remaining interactive elements:
       active segmented pills / active nav items press too, clickable track
       rows dim, counting-toggle + switch track press, dropdown items. */

/* Active pills/items must still PRESS (scale) without losing their accent */
.range-btn.active:active { transform: scale(0.96); }
.nav-item.active:active { transform: scale(0.97); }
html[data-glass="on"] .range-btn.active:active { background: color-mix(in srgb, var(--accent) 72%, transparent); transform: scale(0.96); }
html[data-glass="on"] .nav-item.active:active { background: color-mix(in srgb, var(--accent) 24%, transparent); transform: scale(0.97); }

.track-clickable:active { background: var(--bg-active); }
html[data-glass="on"] .track-clickable:active { background: color-mix(in srgb, var(--bg-active) 65%, transparent); }

.counting-toggle:active { transform: scale(0.97); }
.counting-toggle input:active { transform: scale(0.88); }
.slider:active { filter: brightness(0.9); }
html[data-glass="on"] .slider:active { filter: brightness(0.86); }

/* P12: glass overrides for the custom checkbox + import drop zone */
html[data-glass="on"] input[type="checkbox"]:not(.switch input):checked {
  background: color-mix(in srgb, var(--accent) 82%, transparent);
}
html[data-glass="on"] .drop-zone.drag-over .drop-inner {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
}

/* (c) ANIMATIONS — the whole app already runs on --transition (140ms iOS
       ease-out); the few hardcoded durations above were aligned to the same
       curve. Widgets fade+scale in on add (widget-in, 300ms), dropdown panels
       open/close with opacity+translate (140ms), tray items stagger in
       (widget-item-in). No glow, no bounce anywhere. */

/* (a) @supports fallback — engines WITHOUT backdrop-filter get a solid
       (opaque) panel bg instead of a see-through one (readability first). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-glass="on"] .widget-dropdown-panel { background: var(--bg-elev); }
  html[data-glass="on"] .settings-savebar { background: var(--bg-card); }
  html[data-glass="on"] .btn-primary { background: var(--accent); box-shadow: none; }
  html[data-glass="on"] .switch input:checked + .slider { background: var(--accent); }
}