.tracking-page {
  --track-gold: var(--gold);
  --track-blue: #38bdf8;
  --track-teal: #2dd4bf;
  --track-gold-soft: color-mix(in srgb, var(--gold) 16%, transparent);
  --track-blue-soft: color-mix(in srgb, #0ea5e9 12%, transparent);
  --track-zinc: var(--bg-2);
  width: 100%;
  padding: 0 0 48px;
}

body.tracking-page {
  padding: 0;
}

body.tracking-page .page-shell {
  width: calc(100% - 24px);
  max-width: none;
  padding: 8px 12px 10px;
}

html[data-theme="light"] .tracking-page {
  --track-blue: #0284c7;
  --track-teal: #0f766e;
  --track-blue-soft: color-mix(in srgb, #0284c7 10%, transparent);
  --track-zinc: color-mix(in srgb, var(--paper) 92%, #18181b);
}

html[data-theme="dark"] body.tracking-page {
  background:
    radial-gradient(920px 420px at 8% -10%, rgba(45, 212, 191, 0.08), transparent 58%),
    radial-gradient(820px 380px at 94% 0%, rgba(14, 165, 233, 0.12), transparent 52%),
    var(--bg);
}

.stats-masthead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px 28px;
  align-items: center;
  margin: 0 0 16px;
  padding: 22px 24px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 55%, transparent) 0%, transparent 42%),
    var(--panel);
  box-shadow: var(--panel-glow, none);
}

.stats-masthead-face {
  width: 92px;
  height: 92px;
}

.stats-masthead-face .dash-avatar,
.stats-masthead-face .dash-avatar-mark {
  width: 92px;
  height: 92px;
}

.stats-masthead-kicker {
  margin: 0 0 4px;
  color: var(--track-blue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stats-masthead-main h1 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3.2vw, 2.55rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.stats-masthead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-height: 0;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.86rem;
}

.stats-masthead-meta:empty {
  display: none;
}

.stats-masthead-main {
  min-width: 0;
}

.stats-masthead .track-lookup {
  position: relative;
  margin: 0;
  max-width: 34rem;
}

.stats-masthead .track-lookup-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.stats-masthead .tracking-status {
  margin: 10px 0 0;
}

.track-console .track-lookup {
  margin: 0 0 18px;
}

.stats-masthead-rating {
  min-width: 7.5rem;
  text-align: right;
  padding: 4px 2px 4px 22px;
  border-left: 1px solid color-mix(in srgb, var(--track-blue) 35%, var(--line));
}

.stats-masthead-rating span {
  display: block;
  margin-bottom: 4px;
  color: var(--track-blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stats-masthead-rating strong {
  display: block;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.stats-masthead-rating em {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}

.track-console {
  margin-bottom: 20px;
  padding: 22px 22px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #000 18%, transparent) 0%, transparent 28%),
    var(--panel);
  box-shadow: var(--panel-glow, none);
}

.track-console-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 16px 24px;
  align-items: start;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.track-console-kicker {
  margin: 0 0 6px;
  color: var(--track-gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.track-console-head h2 {
  margin: 0 0 6px;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}

.track-console-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.track-guest-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--track-gold) 38%, var(--line));
  border-radius: 12px;
  background: var(--track-gold-soft);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.track-guest-note.is-used {
  border-color: color-mix(in srgb, var(--track-gold) 55%, var(--line-strong));
  background: var(--track-gold-soft);
}

.track-guest-note[hidden] {
  display: none;
}

.track-guest-note a,
.guest-search-gate a {
  color: var(--gold);
}

.track-lookup-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.track-lookup-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  margin-bottom: 18px;
}

.track-site-mark {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  background: var(--paper-2, rgba(255, 255, 255, 0.03));
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.track-lookup-row input {
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-right: 0;
  border-radius: 0;
  background: var(--input-bg);
  color: var(--input-text);
  font: inherit;
  font-size: 1.05rem;
}

.track-lookup-row input:focus {
  outline: none;
  border-color: var(--cream-dim);
}

.track-lookup-row .btn {
  height: 52px;
  padding: 0 22px;
  border-radius: 0 12px 12px 0;
  font-weight: 800;
}

.tracking-linked {
  margin: 16px 0 4px;
}

.tracking-linked .tracking-chips {
  flex-wrap: wrap;
}

.tracking-chip.is-linked {
  max-width: 100%;
}

.track-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.tracking-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tracking-filter-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.track-limit-hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.tracking-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tracking-chip {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.tracking-chip.active {
  border-color: var(--track-gold);
  background: var(--track-gold);
  color: var(--on-gold);
}

.track-console-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.tracking-status {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.player-load-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.player-load-progress[hidden] {
  display: none;
}

.player-load-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.player-load-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--track-gold), var(--track-blue));
  transition: width 0.25s ease;
}

.guest-search-gate {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.guest-search-gate[hidden] {
  display: none;
}

.tracking-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 860px) {
  .tracking-results {
    grid-template-columns: 1fr;
  }
}

.tracking-dash-col {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
  padding: 0;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.tracking-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.tracking-col-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tracking-col-heading {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cream);
}

/* Per-column scan console */
.tracking-col-console {
  padding: 0 16px 14px;
}
.tracking-col-field {
  margin-bottom: 8px;
}
.tracking-field-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tracking-username-input {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg, transparent);
  color: var(--cream);
  font: inherit;
  font-size: 0.88rem;
  box-sizing: border-box;
}
.tracking-username-input:focus {
  border-color: var(--gold);
  outline: none;
}

.tracking-col-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: start;
  padding: 0;
}
.tracking-col-filter-row .tracking-col-field {
  min-width: 0;
  margin-bottom: 6px;
}
.tracking-col-filter-row .tracking-field-label {
  font-size: 0.7rem;
  margin-bottom: 2px;
}
.tracking-col-filter-row .tracking-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
}
.tracking-col-filter-row .tracking-chip {
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}
.tracking-col-filter-row .tracking-chip.active {
  border-color: var(--gold);
  color: var(--cream);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}

.tracking-col-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 0;
}
.tracking-col-btn-group {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tracking-scan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 18px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: transparent;
  color: var(--gold-bright);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tracking-scan-btn:hover {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--gold-bright);
}

.tracking-dash-inner {
  padding: 0 16px 16px;
}

/* Status text inside columns */
.tracking-col-console .tracking-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
  flex: 1;
}

/* Progress bar inside columns */
.tracking-col-console .player-load-progress {
  margin: 8px 0 0;
}

/* Split masthead (new unified header) */
.tracking-split-masthead {
  margin: 0 0 18px;
  padding: 18px 22px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 40%, transparent) 0%, transparent 38%),
    var(--panel);
}
.tracking-split-masthead h1 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.tracking-split-masthead-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.stats-result-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.stats-board {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 4px 2px 2px;
}

.stats-board-kicker {
  margin: 0 0 8px;
  color: var(--track-blue);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stats-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 210px);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.stats-panel[hidden] {
  display: none !important;
}

.stats-panel::-webkit-scrollbar,
.dash-scrollable::-webkit-scrollbar,
.dash-game-list::-webkit-scrollbar,
.dash-openings::-webkit-scrollbar,
.dash-elo-log::-webkit-scrollbar,
.dash-tilt-list::-webkit-scrollbar {
  width: 8px;
}

.stats-panel::-webkit-scrollbar-thumb,
.dash-scrollable::-webkit-scrollbar-thumb,
.dash-game-list::-webkit-scrollbar-thumb,
.dash-openings::-webkit-scrollbar-thumb,
.dash-elo-log::-webkit-scrollbar-thumb,
.dash-tilt-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--track-blue) 45%, var(--line));
}

.stats-panel::-webkit-scrollbar-track,
.dash-scrollable::-webkit-scrollbar-track,
.dash-game-list::-webkit-scrollbar-track,
.dash-openings::-webkit-scrollbar-track,
.dash-elo-log::-webkit-scrollbar-track,
.dash-tilt-list::-webkit-scrollbar-track {
  background: transparent;
}

/* Scrollable regions. Raised from 260/280px: at that height these lists showed
   barely three rows, so the panel read as cut off even though it scrolled. The
   cap is still there — an unbounded list would push the rest of the page down —
   it is just tall enough to be worth scrolling. */
.dash-scrollable {
  max-height: 420px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.dash-game-list,
.dash-openings,
.dash-elo-log,
.dash-tilt-list {
  max-height: 440px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.stats-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stats-map-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 16px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #000 12%, transparent) 0%, transparent 40%),
    var(--panel);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.stats-map-btn:hover {
  border-color: color-mix(in srgb, var(--track-blue) 45%, var(--line-strong));
  background: color-mix(in srgb, var(--track-blue) 8%, var(--panel));
}

.stats-map-btn span {
  color: var(--track-blue);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stats-map-btn strong {
  font-size: 1.02rem;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.stats-map-btn em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.82rem;
  line-height: 1.45;
}

.dash-kpis.is-extra .dash-kpi {
  padding: 12px 14px 10px;
  background: transparent;
}

.dash-kpis.is-extra .dash-kpi strong {
  font-size: 1.12rem;
}

.stats-split {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 16px;
}

.stats-read {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-read li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
}

.stats-read {
  max-height: 200px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.stats-read li:first-child {
  padding-top: 0;
}

.stats-read li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.stats-read strong {
  font-weight: 750;
}

.dash-card {
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #000 14%, transparent) 0%, transparent 32%),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 40px rgba(0, 0, 0, 0.12);
}

.dash-card-head {
  margin-bottom: 16px;
}

.dash-card-head h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.dash-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 28px 28px 24px;
  border-color: var(--line-strong);
}

.dash-hero-main {
  display: flex;
  gap: 18px;
  align-items: center;
  min-width: 0;
}

.dash-avatar,
.dash-avatar-mark {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.dash-avatar {
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--track-blue) 40%, var(--line-strong));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--track-blue) 12%, transparent);
}

.dash-avatar-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--track-blue) 45%, var(--line-strong));
  background: var(--track-blue-soft);
  color: var(--track-blue);
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 700;
}

.dash-hero h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
  letter-spacing: -0.04em;
}

.dash-kicker {
  margin: 0 0 6px;
  color: var(--track-gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dash-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.dash-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--track-blue) 40%, var(--line));
  border-radius: 999px;
  background: var(--track-blue-soft);
  color: var(--track-blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dash-hero-rating {
  text-align: right;
  padding: 8px 4px 8px 18px;
  border-left: 1px solid color-mix(in srgb, var(--track-gold) 35%, var(--line));
}

.dash-hero-rating span {
  display: block;
  margin-bottom: 4px;
  color: var(--track-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dash-hero-rating strong {
  display: block;
  font-size: clamp(2.6rem, 4.2vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.dash-rates {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.dash-kpi,
.dash-speed,
.dash-rate {
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--track-zinc);
}

.dash-rate span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dash-rate strong {
  display: block;
  margin: 6px 0 2px;
  font-size: 1.55rem;
  letter-spacing: -0.03em;
}

.dash-rate em {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--muted);
}

.dash-rate .is-up { color: var(--data-up); }
.dash-rate .is-down { color: var(--data-down); }

.dash-kpis,
.dash-speeds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dash-speeds {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dash-kpi span,
.dash-speed span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dash-kpi strong,
.dash-speed strong {
  display: block;
  margin: 6px 0 2px;
  font-size: 1.28rem;
  letter-spacing: -0.03em;
}

.dash-kpi em,
.dash-speed em {
  display: block;
  font-style: normal;
  font-size: 0.76rem;
  color: var(--muted);
}

.dash-games {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Raised with the other scroll regions. This rule is later in the file than
     the shared one, so it would otherwise keep capping the list at 280px. */
  max-height: 440px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.dash-game {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}

.dash-game.is-off,
.dash-bar.is-off,
.dash-game[hidden],
.dash-bar[hidden] {
  display: none !important;
}

.dash-game:hover {
  background: var(--fill-subtle);
}

.dash-game.is-white {
  box-shadow: inset 3px 0 0 #fbbf24;
}

.dash-game.is-black {
  box-shadow: inset 3px 0 0 #38bdf8;
}

.dash-game.is-win {
  border-color: var(--data-win-fill);
}

.dash-game.is-loss {
  border-color: var(--data-loss-fill);
}

.dash-game.is-draw {
  border-color: var(--data-draw-fill);
}

.dash-game strong { display: block; font-size: 0.92rem; }
.dash-game span { color: var(--muted); font-size: 0.8rem; }
.dash-game-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  background: var(--fill-subtle);
}
.dash-game-mark.is-win { color: var(--data-win); background: var(--data-win-soft); }
.dash-game-mark.is-loss { color: var(--data-loss); background: var(--data-loss-soft); }
.dash-game-mark.is-draw { color: var(--data-draw); background: var(--data-draw-soft); }

.dash-tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--fill-subtle, rgba(255, 255, 255, 0.03));
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.dash-tab {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.dash-tab:hover {
  /* `--ink` is near-black in both themes, so it made the hover state darker
     than the resting label rather than lighter. */
  color: var(--cream);
}

.dash-tab.active {
  color: var(--on-gold);
  background: var(--track-gold);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset;
}

.dash-panel[hidden] {
  display: none;
}

.dash-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
}

.dash-card h3 {
  margin: 0 0 4px;
  font-size: 1.02rem;
}

.dash-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.86rem;
}

.dash-card-head .dash-note {
  margin-bottom: 0;
}

.dash-forecast-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.dash-forecast-head strong {
  font-size: 1.05rem;
}

.dash-forecast-head span {
  color: var(--muted);
  font-size: 0.82rem;
}

.dash-chart {
  width: 100%;
  height: auto;
  aspect-ratio: 32 / 9;
  max-height: 640px;
  display: block;
  color: var(--muted);
  overflow: visible;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.dash-chart text {
  font-family: var(--font), "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.dash-chart.is-short {
  aspect-ratio: 32 / 7.2;
  max-height: 460px;
}

.dash-area {
  opacity: 1;
}

.dash-line {
  fill: none;
}

.dash-line.is-alt {
  stroke: var(--track-blue);
}

.dash-cone {
  opacity: 0.48;
}

.dash-future {
  fill: none;
  stroke: var(--track-blue);
}

.dash-bar-hit {
  cursor: pointer;
  transition: filter 0.12s ease;
}

.dash-bar-hit:hover {
  filter: brightness(1.14);
}

.dash-dot {
  stroke: color-mix(in srgb, var(--cream) 42%, transparent);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill;
  cursor: pointer;
  opacity: 0.94;
}

.dash-dot:hover {
  opacity: 1;
  stroke: var(--cream);
}

.dash-tip {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  min-width: 160px;
  max-width: 300px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--track-gold) 48%, var(--line));
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--text);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px);
  font-size: 0.84rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.dash-tip[hidden] {
  display: none !important;
}

.dash-tip strong,
.dash-tip span,
.dash-tip em {
  display: block;
}

.dash-tip span {
  color: var(--muted);
  font-size: 0.78rem;
}

.dash-tip em {
  margin-top: 4px;
  font-style: normal;
  font-weight: 700;
  font-size: 1.05rem;
}

.dash-shape-row,
.dash-ring,
.dash-speed,
.dash-form a,
.dash-form span {
  cursor: default;
}

.dash-legend {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  /* Lifted off the card's lower half. The card head's 16px was the only
     separation above it, which left the legend sitting level with the results
     rather than reading as a key sitting above them. */
  margin: 6px 0 12px;
  color: var(--muted);
  font-size: 0.8rem;
  /* Matches the small swatches, so the row's own height is honest. */
  line-height: 1.4;
}

.dash-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 2px;
}

.dash-legend .is-win { background: var(--data-win-fill); }
.dash-legend .is-draw { background: var(--data-draw-fill); }
.dash-legend .is-loss { background: var(--data-loss-fill); }

.dash-chart.is-heat {
  aspect-ratio: 32 / 8.2;
  max-height: 520px;
}

.dash-insight {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--muted);
  line-height: 1.5;
}

.dash-insight strong {
  color: var(--text);
}

.dash-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
}

.dash-toolbar input {
  flex: 1;
  min-width: 180px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--input-text);
  font: inherit;
}

.dash-rings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dash-ring {
  text-align: center;
}

.dash-ring svg {
  width: 184px;
  height: 184px;
  display: block;
  margin: 0 auto;
}

.dash-ring strong {
  display: block;
  margin-top: 6px;
  font-size: 1.05rem;
}

.dash-ring span {
  color: var(--muted);
  font-size: 0.78rem;
}

.dash-shape-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.dash-shape-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
}

.dash-shape-row span { color: var(--muted); }
.dash-shape-row strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dash-shape-track {
  height: 9px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.dash-shape-track > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--data-up-fill) 55%, transparent), var(--data-up-fill));
}

.dash-shape-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: center;
}

.dash-chart-radar {
  aspect-ratio: 1 / 1;
  max-height: 420px;
  margin: 0 auto;
}

.dash-family-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.78rem;
}

.dash-family-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: 1px;
}

.dash-family-legend .is-strong { background: var(--data-win-fill); }
.dash-family-legend .is-steady { background: var(--data-warn-fill); }
.dash-family-legend .is-leak { background: var(--data-loss-fill); }
.dash-family-legend .is-thin { background: var(--muted); }

.dash-families {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Raised with the other scroll regions. This rule sits after the shared one,
     so it needs raising on its own or the list stays short. */
  max-height: 440px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.dash-family-btn {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fill-subtle) 70%, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.dash-family-btn:hover,
.dash-family-btn:focus-visible {
  border-color: color-mix(in srgb, var(--track-gold) 40%, var(--line));
  background: color-mix(in srgb, var(--track-gold) 8%, var(--panel));
}

.dash-family-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dash-family-main strong {
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.dash-family-main span,
.dash-family-main em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}

.dash-family-score {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.dash-family.is-strong .dash-meter > span { background: var(--data-win-fill); }
.dash-family.is-steady .dash-meter > span { background: var(--data-warn-fill); }
.dash-family.is-leak .dash-meter > span { background: var(--data-loss-fill); }
.dash-family.is-thin .dash-meter > span { background: var(--muted); }
.dash-family.is-strong .dash-family-score { color: var(--data-win); }
.dash-family.is-leak .dash-family-score { color: var(--data-loss); }

.dash-tilt-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.dash-tilt-kpis article {
  padding: 12px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fill-subtle) 80%, transparent);
}

.dash-tilt-kpis span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dash-tilt-kpis strong {
  display: block;
  margin-top: 6px;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.dash-tilt-kpis em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.75rem;
  font-style: normal;
}

.dash-tilt-kpis .is-up strong { color: var(--data-up); }
.dash-tilt-kpis .is-down strong { color: var(--data-down); }

.dash-tilt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  /* Later in the file than the shared rule, so it needs raising too. */
  max-height: 440px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.dash-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* A flex container with no line boxes of its own inherits the page's
     line-height, and then reports a height of one row while the dots wrap onto
     two. The card's overflow clipped the second row, which is what cut the
     bottom off the recent-form panel. Giving the container the dot's own
     line-height makes its height match what it actually lays out. */
  line-height: 11px;
  /* Explicit, so the wrapped rows are never squeezed: the dots are 11px and the
     gap is 6px, so two rows need 28px. Without this the box could be shorter
     than its content and clip again at a different card width. */
  height: auto;
  min-height: 11px;
  /* Room under the last row of dots. The card's own padding is small and the
     dots sit flush against it, so the final row read as though it were falling
     out of the panel. A few pixels of breathing space makes the edge of the
     content obvious instead. */
  padding-bottom: 10px;
}

.dash-form a,
.dash-form span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  text-indent: -999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 14%, transparent);
  /* The result letter is pushed out of sight with text-indent rather than
     display:none, so it still occupies a line box. On an 11px-tall dot that box
     inherited the page line-height and overflowed, and the row's `overflow:
     hidden` clipped it — which is what cut the bottom of the last row of
     results off. A line-height equal to the dot removes the overflow at the
     source. Font-size is set too so the hidden text cannot influence the flex
     row's height either. */
  line-height: 11px;
  font-size: 11px;
}

/* A result is never colour-only. The W/D/L letter inside is visually
   hidden (text-indent above), so the SHAPE carries the same meaning as
   the colour: round = win, square = draw, diamond = loss. A deuteranope
   can still read the form left to right. */
.dash-form .is-win { background: var(--data-win-fill); }
.dash-form .is-draw {
  background: var(--data-draw-fill);
  border-radius: 2px;
}
.dash-form .is-loss {
  background: var(--data-loss-fill);
  border-radius: 2px;
  transform: rotate(45deg);
}
.dash-form .is-open { background: var(--line); }

.dash-openings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Later in the file than the shared rule, so it needs raising too. */
  max-height: 440px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.dash-opening.is-off {
  display: none !important;
}

.dash-opening .dash-bar {
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dash-opening .dash-bar:hover,
.dash-opening.is-open .dash-bar {
  background: var(--fill-subtle);
}

.dash-opening-games {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px;
  padding: 6px 0 4px 8px;
  border-left: 2px solid color-mix(in srgb, var(--track-blue) 40%, var(--line));
}

.dash-opening-games .dash-note {
  margin: 0 0 6px;
}

.dash-opening-games .dash-game {
  cursor: pointer;
}

.dash-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 10px;
  align-items: center;
}

.dash-bar strong { display: block; font-size: 0.92rem; }
.dash-bar span { color: var(--muted); font-size: 0.82rem; }
.dash-meter {
  height: 9px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.dash-meter > span {
  display: block;
  height: 100%;
  background: var(--series-1);
}

.dash-bar.is-white .dash-meter > span {
  background: linear-gradient(90deg, #854d0e, #fbbf24);
}

.dash-bar.is-black .dash-meter > span {
  background: linear-gradient(90deg, #0f172a, #38bdf8);
}

.dash-empty {
  margin: 0;
  color: var(--muted);
}

.dash-elo-card .dash-chart {
  margin-bottom: 12px;
}

.dash-elo-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.dash-elo-stats article {
  padding: 12px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--track-zinc);
}

.dash-elo-stats span,
.dash-elo-stats em {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dash-elo-stats strong {
  display: block;
  margin-top: 4px;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.dash-elo-stats em {
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
}

.dash-elo-stats .is-up strong { color: var(--data-up); }
.dash-elo-stats .is-down strong { color: var(--data-down); }

.dash-elo-tools {
  margin: 0 0 10px;
}

.dash-elo-speeds {
  margin: 0 0 14px;
}

.dash-elo-log {
  margin-top: 0;
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--track-zinc);
}

.dash-elo-month {
  padding: 8px 8px 6px;
  color: var(--track-blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--track-blue) 8%, transparent);
  border-top: 0;
}

/* The Elo log's rows and its sticky header share this shape, so both use grid
   with the same five tracks. This rule had lost its selector and its opening
   brace, so a stray closing brace ended the media query early and left the
   column sizing orphaned — the rows fell back to whatever the shared rule gave
   them and stopped lining up under the header. */
.dash-elo-head,
.dash-elo-row {
  display: grid;
  grid-template-columns: minmax(118px, 1.2fr) 56px minmax(0, 1.1fr) minmax(72px, 1fr) 76px;
  gap: 10px;
  align-items: center;
  padding: 10px 8px;
  font-size: 0.86rem;
}

/* ============================================================
   Premium Insights Card Grid
   ============================================================ */

.premium-insight {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.premium-insight__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.premium-insight__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.premium-insight__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
}

.premium-insight__sub {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 12px;
}

.premium-insight__value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold);
}

.premium-insight__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.premium-insight__badge--win {
  background: var(--data-win-fill);
  color: #fff;
}

.premium-insight__badge--down {
  background: var(--data-loss-fill);
  color: #fff;
}

.premium-insight__badge--neutral {
  background: var(--fill-subtle);
  color: var(--muted);
}

/* ============================================================
   Stat Bars (Shape Summary)
   ============================================================ */

.stat-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.stat-bar {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.stat-bar__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-bar__value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gold);
}

/* ============================================================
   Opening Family Cards
   ============================================================ */

.ops-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ops-card {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.ops-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--gold);
}

.ops-card__desc {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 10px;
}

.ops-card__metric {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ops-card__metric-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gold);
}

.ops-card__metric-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

/* ============================================================
   Bounce-Back Games
   ============================================================ */

.bounce-back {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  margin-bottom: 20px;
}

.bounce-back__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 12px;
}

.bounce-back__list {
  list-style: none;
  padding: 0;
}

.bounce-back__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.bounce-back__item__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.bounce-back__item__info {
  flex: 1;
  min-width: 0;
}

.bounce-back__item__info__time {
  color: var(--muted);
  font-size: 0.8rem;
  margin-right: 8px;
}

.bounce-back__item__details {
  flex: 1;
  min-width: 0;
}

/* ============================================================
   Speed Cards
   ============================================================ */

.speed-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.speed-card {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.speed-card__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.speed-card__value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gold);
}

.speed-card__detail {
  font-size: 0.78rem;
  color: var(--cream);
  margin-top: 4px;
}

/* ============================================================
   Utility Classes
   ============================================================ */

.box-shadow-custom {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

@media (max-width: 640px) {
  .stats-board {
    grid-template-columns: 1fr;
  }

  .ops-section {
    gap: 10px;
  }

  .speed-cards {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}

.dash-elo-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--line);
}

.dash-elo-row {
  border-radius: 10px;
  border-top: 0;
}

.dash-elo-row:hover {
  background: var(--fill-subtle);
}

.dash-elo-day {
  font-weight: 700;
  color: var(--text);
}

.dash-elo-track {
  height: 9px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.dash-elo-track > i {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.dash-elo-row.is-flat .dash-elo-track > i {
  background: var(--muted);
}

.dash-elo-row.is-up .dash-elo-track > i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--data-up-fill) 45%, transparent), var(--data-up-fill));
}

.dash-elo-row.is-down .dash-elo-track > i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--data-down-fill) 45%, transparent), var(--data-down-fill));
}

.dash-elo-row strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dash-elo-row.is-up strong { color: var(--data-up); }
.dash-elo-row.is-down strong { color: var(--data-down); }
.dash-elo-row.is-flat strong { color: var(--muted); }

@media (max-width: 980px) {
  .track-console-head,
  .track-filters,
  .dash-rates,
  .dash-grid,
  .dash-rings,
  .dash-kpis,
  .dash-speeds {
    grid-template-columns: 1fr;
  }

  .stats-masthead,
  .dash-hero,
  .stats-split,
  .stats-map,
  .dash-shape-grid,
  .dash-tilt-kpis {
    grid-template-columns: 1fr;
  }

  .stats-masthead-rating,
  .dash-hero-rating {
    text-align: left;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 700px) {
  .track-console,
  .dash-card {
    padding: 16px 14px;
  }

  .track-lookup-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .track-site-mark,
  .track-lookup-row input,
  .track-lookup-row .btn {
    width: 100%;
    height: 46px;
    border-radius: 10px;
    border-right: 1px solid var(--line-strong);
  }

  .dash-kpis,
  .dash-speeds,
  .dash-tabs {
    width: 100%;
  }

  .dash-tab {
    flex: 1;
  }

  .dash-elo-stats {
    grid-template-columns: 1fr 1fr;
  }

  .dash-chart,
  .dash-chart.is-short,
  .dash-chart.is-heat {
    height: auto;
  }

  .dash-elo-head,
  .dash-elo-row {
    grid-template-columns: minmax(108px, 1.3fr) 40px minmax(0, 1fr) 64px;
  }

  .dash-elo-track {
    display: none;
  }
}

/* ============================================================
   Premium Insights Tab Styles
   ============================================================ */

.premium-radar {
  max-height: 520px;
}

.premium-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.premium-family-card {
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 8%, transparent) 0%, transparent 30%),
    var(--panel);
}

.premium-chips {
  gap: 8px;
}

.premium-chip {
  padding: 8px 16px;
  font-size: 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  transition: all 0.2s ease;
}

.premium-chip.active {
  background: var(--gold);
  color: var(--muted);
  border-color: var(--gold);
}

.premium-legend {
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.premium-legend-icon {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
}

.premium-families {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.premium-tilt-card {
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--track-blue) 8%, transparent) 0%, transparent 30%),
    var(--panel);
}

.premium-tilt-indicator {
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--track-blue) 12%, transparent) 0%, transparent 40%),
    var(--panel);
  margin-bottom: 20px;
}

.premium-tilt-icon {
  width: 44px;
  height: 44px;
  background: var(--track-blue-soft);
  color: var(--track-blue);
  font-size: 1.6rem;
}

.premium-tilt-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.premium-tilt-kpis article {
  padding: 14px 14px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.premium-tilt-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.premium-tilt-kpis span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.premium-tilt-kpis strong {
  display: block;
  margin-top: 6px;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.premium-tilt-kpis em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.75rem;
  font-style: normal;
}

.premium-tilt-kpis .is-up strong { color: var(--data-up); }
.premium-tilt-kpis .is-down strong { color: var(--data-down); }

.premium-bounce-back {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 8%, transparent) 0%, transparent 30%),
    var(--panel);
  max-height: 280px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.premium-summary {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--track-gold) 8%, transparent) 0%, transparent 30%),
    var(--panel);
}

.premium-summary h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 14px;
}

.insight-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.insight-summary-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--cream);
  font-size: 0.92rem;
  line-height: 1.5;
}

.insight-summary-item:last-child {
  border-bottom: 0;
}

.insight-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}

.insight-bullet--green {
  background: var(--data-win-fill);
  box-shadow: 0 0 8px var(--data-win-fill);
}

.insight-bullet--blue {
  background: var(--track-blue);
  box-shadow: 0 0 8px var(--track-blue);
}

.insight-bullet--gold {
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

/* ——— OpeningMatrix practice dashboard ——— */
.om-dash {
  margin: 0 0 22px;
  padding: 22px 22px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 42%),
    var(--panel);
  box-shadow: var(--panel-glow, none);
}

.om-dash-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.om-dash-kicker {
  margin: 0 0 4px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.om-dash-title {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  font-weight: 750;
  letter-spacing: -0.03em;
}

.om-dash-lead {
  margin: 0;
  max-width: 42rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* `--ink` is a near-black in BOTH themes (#0f172a light, #07111f dark) — it
   exists for surfaces and rules, not for type. Using it here put "Leaderboard"
   at rgb(7,17,31) on a rgb(14,17,22) panel: a contrast ratio of 1.0, so the
   link was effectively invisible in dark mode. `--cream` is the text token and
   adapts on its own. */
.om-dash-link {
  flex: 0 0 auto;
  color: var(--cream);
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.om-dash-link:hover {
  color: var(--gold-bright);
}

.om-dash-guest {
  padding: 18px;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--line-strong) 80%, transparent);
  background: color-mix(in srgb, var(--paper-2, #09090b) 35%, transparent);
}

.om-dash-guest p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.45;
}

.om-dash-guest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.om-dash-status {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
}

.om-dash-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.om-metric {
  padding: 14px 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-2, #09090b) 55%, transparent);
}

.om-metric-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.om-metric strong {
  font-size: 1.45rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.om-dash-panels,
.om-dash-openings {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 12px;
  margin-bottom: 12px;
}

.om-dash-openings {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0;
}

.om-panel {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-2, #09090b) 40%, transparent);
}

.om-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.om-panel-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.om-panel-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.om-week-chips {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.om-week-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
}

.om-week-chip b {
  font-size: 0.95rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.om-week-chip.is-done {
  border-color: color-mix(in srgb, var(--seq-3) 60%, var(--line));
  background: linear-gradient(180deg, var(--seq-1), var(--seq-2));
  color: var(--cream);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent),
    0 0 10px color-mix(in srgb, var(--seq-2) 38%, transparent);
}

.om-week-chip.is-done b {
  color: var(--seq-4);
  text-shadow: 0 0 10px color-mix(in srgb, var(--seq-2) 72%, transparent);
}

.om-week-chip.is-today {
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--seq-base) 85%, transparent),
    0 0 9px color-mix(in srgb, var(--seq-2) 45%, transparent);
}

.om-week-chip.is-future {
  opacity: 0.45;
}

.om-heat-wrap {
  overflow-x: auto;
  padding-bottom: 4px;
}

.om-heat-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 11px);
  grid-auto-columns: 11px;
  gap: 3px;
  width: max-content;
  min-height: 95px;
}

.om-heat-cell {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--seq-empty);
  cursor: default;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.om-heat-cell.is-pad {
  visibility: hidden;
}

.om-heat-cell[data-level="1"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--seq-1) 88%, #fff 12%), var(--seq-1));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
}

.om-heat-cell[data-level="2"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--seq-2) 86%, #fff 14%), var(--seq-2));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent),
    0 0 5px color-mix(in srgb, var(--seq-2) 42%, transparent);
}

.om-heat-cell[data-level="3"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--seq-3) 84%, #fff 16%), var(--seq-3));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent),
    0 0 7px color-mix(in srgb, var(--seq-3) 54%, transparent);
}

.om-heat-cell[data-level="4"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--seq-4) 82%, #fff 18%), var(--seq-4));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent),
    0 0 9px 1px color-mix(in srgb, var(--seq-4) 64%, transparent);
}

/* Hover: cells with a level are <button>s, so the pop is a deliberate
   signal that the day is inspectable. Empty cells stay flat. */
.om-heat-cell[data-level="1"]:hover,
.om-heat-cell[data-level="2"]:hover,
.om-heat-cell[data-level="3"]:hover,
.om-heat-cell[data-level="4"]:hover {
  position: relative;
  z-index: 1;
  transform: scale(1.4);
  filter: brightness(1.12);
  cursor: pointer;
}

.om-heat-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.72rem;
}

.om-heat-legend i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--seq-empty);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 24%, transparent);
}

.om-heat-legend i[data-level="1"] { background: var(--seq-1); }
.om-heat-legend i[data-level="2"] { background: var(--seq-2); }
.om-heat-legend i[data-level="3"] { background: var(--seq-3); }
.om-heat-legend i[data-level="4"] { background: var(--seq-4); }

.om-opening-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.om-opening-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}

.om-opening-list a:hover {
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
}

.om-opening-list strong {
  font-size: 0.92rem;
}

.om-opening-list span {
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.om-empty {
  margin: 0;
  padding: 10px 2px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .om-dash-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .om-dash-panels,
  .om-dash-openings {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .om-dash {
    padding: 16px;
  }

  .om-dash-head {
    flex-direction: column;
  }

  .om-dash-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .om-week-chip {
    padding: 10px 4px;
    font-size: 0.68rem;
  }
}

/* ——— Chart entrance animations ——— */
@keyframes dashChartIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dashBarIn {
  from { opacity: 0; transform: scaleY(0.2); transform-origin: bottom; }
  to { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
}
@keyframes dashRadarIn {
  from { opacity: 0; transform: scale(0.92); transform-origin: center; }
  to { opacity: 1; transform: scale(1); transform-origin: center; }
}
@keyframes dashDonutIn {
  from { opacity: 0; transform: scale(0.94); transform-origin: center; }
  to { opacity: 1; transform: scale(1); transform-origin: center; }
}
.dash-chart { animation: dashChartIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.dash-chart rect.dash-bar-hit { animation: dashBarIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: bottom; }
.dash-chart polygon { animation: dashRadarIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.dash-ring svg { animation: dashDonutIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .dash-chart,
  .dash-chart rect.dash-bar-hit,
  .dash-chart polygon,
  .dash-ring svg { animation: none; }
}

/* ——— Guest lock: blur + overlay for non-logged-in visitors —————————

   Matches the pattern used by the review page's Insights lock — the
   content is rendered behind a blur so a guest sees what the page looks
   like without being able to interact with it, and a card sits on top
   with a sign-in prompt.

   The lock activates only when `data-logged-in` is `"0"` on the <main>
   element. Logged-in visitors see the page at full clarity with no
   overlay, and the lock markup does not interfere.                          */

/* The lock container becomes a positioning context for the overlay card. */
body.tracking-page main.tracking-page[data-logged-in="0"] .tracking-guest-lock {
  position: relative;
}

/* Blur applied to the content wrapper. */
body.tracking-page main.tracking-page[data-logged-in="0"] .tracking-guest-lock-body {
  filter: blur(7px) saturate(0.7);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* Cap height so a long page does not become a wall of grey before the
     sign-in card — the fade-out edge tells the reader there is more. */
  max-height: 620px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

/* Overlay card — sits above the blur, hidden for signed-in visitors. */
body.tracking-page .tracking-guest-lock-card {
  /* Centred small box overlay inside the guest-lock container. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 340px;
  padding: 20px 24px 22px;
  text-align: center;
  border-radius: 16px;
  /* Premium surface depth: warm top-light + soft gold centre glow + rich base. */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream) 4%, transparent) 0%, transparent 40%),
    radial-gradient(ellipse 70% 60% at 50% 42%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg) 96%, var(--bg-2));
  /* Frosted layer — matches the review page lock card. */
  -webkit-backdrop-filter: blur(5px) saturate(1.05);
  backdrop-filter: blur(5px) saturate(1.05);
  /* Premium glass border with neon green cast. */
  border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--glass-border));
  /* Elevation + neon green glow stack — matches review page. */
  box-shadow:
    var(--panel-glow),
    0 0 0 1px var(--gold-glow),
    0 0 18px var(--glow-line),
    0 0 48px color-mix(in srgb, var(--glow-line) 35%, transparent);
  animation: om-fade-in 0.2s ease-out both;
}

/* Hidden when the `hidden` attribute is set (signed-in state). */
body.tracking-page .tracking-guest-lock-card[hidden] {
  display: none !important;
}

/* Badge — key icon in a rounded purple-tinted square. */
body.tracking-page .tracking-guest-lock-badge {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, #a855f7 34%, var(--line));
  border-radius: 12px;
  color: #a855f7;
  background: color-mix(in srgb, #a855f7 10%, transparent);
  font-size: 1.5rem;
}

body.tracking-page .tracking-guest-lock-badge svg {
  width: 24px;
  height: 24px;
  display: block;
}

body.tracking-page .tracking-guest-lock-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cream);
}

body.tracking-page .tracking-guest-lock-copy {
  margin: 0;
  max-width: 46ch;
  color: var(--cream-dim);
  font-size: 0.86rem;
  line-height: 1.55;
}

body.tracking-page .tracking-guest-lock-cta {
  margin-top: 4px;
  text-decoration: none;
  pointer-events: auto;
}

body.tracking-page .tracking-guest-lock-secondary {
  display: inline-block;
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  body.tracking-page .tracking-guest-lock-card {
    animation: none;
  }
}