/* Shared Tracker surfaces, inspired by the public s&box metrics pages. */
.tracker-page {
  --color-bg: #171e2b;
  --color-bg-elevated: #222a38;
  --color-surface-1: #222a38;
  --color-surface-2: #2a3546;
  --color-border: #354050;
  --color-muted: #a3aec0;
  --color-subtle: #8493ab;
  --tracker-blue: #38a9ff;
  background: var(--color-bg);
}
.tracker-page .tool-page { max-width: 1384px; padding-top: 34px; }
.tracker-page .tool-hero { margin-bottom: 30px; }
.tracker-page .tool-hero h1 { font-size: clamp(2rem, 4vw, 2.65rem); }
.tracker-page .eyebrow { color: var(--color-subtle); font-size: .68rem; }
.tracker-page .hero-copy { color: var(--color-muted); }
.tracker-page .refresh-button { border: 1px solid var(--color-border); background: #2c3b50; color: var(--color-text); box-shadow: none; }
.tracker-page .text-button { color: #aecdf2; }
.tracker-hero-actions { display: flex; align-items: center; gap: 12px; }
.tracker-page .stats-panel { border: 0; padding: 0; background: transparent; box-shadow: none; gap: 22px; margin-bottom: 30px; }
.tracker-page .tracker-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: 880px; }
.tracker-page .tracker-key-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.tracker-page .metric-card { position: relative; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.tracker-page .metric-card:hover { background: transparent; transform: none; }
.tracker-page .metric-card > span { color: var(--color-text-soft); font-size: .82rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.tracker-page .metric-card strong { margin: 6px 0 3px; color: #acc8ee; font-size: 1.85rem; line-height: 1.2; font-weight: 500; white-space: nowrap; }
.tracker-page .metric-card small { color: var(--color-subtle); font-size: .7rem; line-height: 1.4; }
.tracker-page .metric-card strong.is-positive, .tracker-page .is-positive { color: #9ceba7; }
.tracker-page .metric-card strong.is-negative, .tracker-page .is-negative { color: #ffb8ac; }
.tracker-page .info-tooltip { width: 15px; height: 15px; font-size: .6rem; }
.tracker-page .info-tooltip::after { visibility: hidden; }
.tracker-page .info-tooltip:hover::after, .tracker-page .info-tooltip:focus-visible::after { visibility: visible; }
.tracker-page .info-tooltip:focus::after { visibility: visible; opacity: 1; }
.tracker-page .metric-card .info-tooltip { position: static; }
.tracker-page .metric-card .info-tooltip::after { left: 0; transform: translateY(4px); }
.tracker-page .metric-card .info-tooltip:hover::after, .tracker-page .metric-card .info-tooltip:focus::after { transform: translateY(0); }
.tracker-key-metrics .metric-card:last-child .info-tooltip::after { left: auto; right: 0; }
.tracker-page .back-link { margin-bottom: 24px; font-size: .78rem; }
.tracker-page .back-link::before { content: none; }
.tracker-page .game-detail-hero { grid-template-columns: 112px minmax(0, 1fr) auto; padding: 0; background: transparent; border: 0; gap: 20px; margin-bottom: 32px; }
.tracker-page .game-detail-hero .detail-thumb { width: 112px; height: 72px; border-radius: 6px; aspect-ratio: auto; }
.tracker-page .game-detail-hero h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); white-space: normal; line-height: 1.15; }
.tracker-page .game-detail-hero .hero-copy { margin: 0; font-size: .75rem; }
.tracker-page .game-detail-range { width: 160px; }
.tracker-page .select-field > span, .tracker-page .search-field > span { font-size: .68rem; letter-spacing: 0; text-transform: none; }
.tracker-page select, .tracker-page input[type="search"] { min-height: 38px; font-size: .78rem; border-color: var(--color-border); border-radius: 7px; background: #141b27; }
.tracker-page .chart-card { padding: 22px 24px 16px; border: 1px solid var(--color-border); border-radius: 13px; background: var(--color-bg-elevated); box-shadow: none; }
.tracker-page .chart-card::before { display: none; }
.tracker-page .chart-card .section-heading { align-items: flex-start; gap: 16px; padding: 0; border: 0; margin-bottom: 20px; }
.tracker-page .chart-card .section-heading h2, .tracker-page .tracker-section-heading h2, .tracker-page .section-heading h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.015em; }
.tracker-page .chart-card .section-heading p, .tracker-page .tracker-section-heading p, .tracker-page .section-heading > p { margin: 4px 0 0; color: var(--color-muted); font-size: .75rem; line-height: 1.5; }
.tracker-page .chart-card .section-heading > p { font-size: .68rem; white-space: nowrap; }
.tracker-page .chart-card .chart-canvas-frame { position: relative; padding: 0; border: 0; border-radius: 0; background: transparent; height: 230px; }
.tracker-page .tracker-primary-chart { margin-bottom: 34px; }
.tracker-page .tracker-primary-chart .chart-canvas-frame { height: 260px; }
.tracker-chart-caption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; color: var(--color-subtle); font-size: .68rem; line-height: 1.5; }
.tracker-chart-caption b { font-weight: 500; color: #bfd4ef; }
.tracker-line-key { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--tracker-blue); margin: 0 6px 3px 0; }
.tracker-line-key.is-dashed { border-top: 2px dashed #aebbd0; margin-left: 14px; }
.tracker-chart-empty { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; padding: 18px; color: var(--color-muted); text-align: center; font-size: .82rem; background: var(--color-bg-elevated); }
.tracker-two-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tracker-chart-wide { grid-column: 1 / -1; }
.tracker-page .tracker-section { margin-bottom: 32px; }
.tracker-page .tracker-section-heading { margin-bottom: 16px; align-items: center; }
.tracker-lifetime-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 16px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.tracker-lifetime-grid dl { margin: 0; }
.tracker-lifetime-grid dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; }
.tracker-lifetime-grid dt { font-size: .74rem; color: var(--color-muted); }
.tracker-lifetime-grid dd { margin: 0; color: #c1d5f1; font-size: .84rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tracker-page .tracker-data-note { color: var(--color-subtle); font-size: .7rem; line-height: 1.7; margin: 12px 0 0; }
.tracker-data-note a { color: #aecdf2; }
.tracker-disclosure { border-top: 1px solid var(--color-border); margin: 0; }
.tracker-disclosure > summary { cursor: pointer; display: flex; align-items: center; gap: 20px; padding: 22px 0; list-style: none; }
.tracker-disclosure > summary::-webkit-details-marker { display: none; }
.tracker-disclosure > summary::after { content: '+'; margin-left: auto; color: var(--color-subtle); font-size: 1.2rem; }
.tracker-disclosure[open] > summary::after { content: '−'; }
.tracker-disclosure > summary strong { display: block; font-size: .92rem; font-weight: 600; }
.tracker-disclosure > summary small { display: block; margin-top: 4px; font-size: .72rem; color: var(--color-subtle); }
.tracker-disclosure > summary > span + span { color: var(--color-muted); font-size: .7rem; }
.tracker-disclosure-content { padding: 4px 0 20px; }
.tracker-page .tracker-pattern-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.tracker-page .update-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; margin: 22px 0; }
.tracker-page .detail-table-wrap, .tracker-page .retention-explainer { background: var(--color-bg-elevated); border-color: var(--color-border); box-shadow: none; }
.tracker-page .detail-table th { color: var(--color-subtle); font-size: .7rem; text-transform: none; letter-spacing: 0; }
.tracker-page .detail-table td { font-size: .78rem; }
.tracker-page .tracker-table-section { margin-top: 28px; }
.tracker-page .daily-stats-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.tracker-list-controls { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.tracker-list-controls .search-field { flex: 1; max-width: 390px; }
.tracker-list-controls .select-field { width: 160px; }
.tracker-list-controls > span { margin-left: auto; font-size: .7rem; color: var(--color-subtle); }
.tracker-list-heading, .tracker-game-row { display: grid; grid-template-columns: minmax(210px, 1fr) 110px 78px 88px 88px 104px 132px; align-items: center; gap: 14px; }
.tracker-list-heading { padding: 0 12px 12px; color: var(--color-subtle); font-size: .68rem; border-bottom: 1px solid var(--color-border); }
.tracker-list-heading > span:not(:first-child) { text-align: center; }
.tracker-list-heading small { display: block; font-size: .62rem; margin-top: 4px; color: var(--color-subtle); }
.tracker-game-row { padding: 15px 12px; border-bottom: 1px solid var(--color-border); transition: background 150ms; }
.tracker-game-row:nth-child(even) { background: #1d253280; }
.tracker-game-row:hover { background: #263244; }
.tracker-game-row.selected-for-compare { background: #243749; box-shadow: inset 3px 0 var(--tracker-blue); }
.tracker-game-row-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tracker-game-row-thumb { width: 80px; height: 48px; border-radius: 5px; overflow: hidden; flex-shrink: 0; background: #2c3748; }
.tracker-game-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tracker-game-row-name { min-width: 0; flex: 1; }
.tracker-game-row-name strong { display: block; font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracker-game-row-name small { display: block; color: var(--color-subtle); font-size: .68rem; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracker-sparkline { width: 110px; height: 32px; justify-self: center; }
.tracker-row-metric { text-align: center; font-size: .94rem; font-variant-numeric: tabular-nums; color: #c1d5f1; }
.tracker-row-metric:first-of-type { color: #9ceba7; }
.tracker-row-metric small { display: none; }
.tracker-row-metric.is-missing { color: var(--color-subtle); }
.tracker-row-popularity { display: grid; gap: 5px; font-size: .72rem; font-variant-numeric: tabular-nums; }
.tracker-row-popularity > span { display: flex; justify-content: space-between; gap: 10px; }
.tracker-row-popularity small { color: var(--color-subtle); font-size: .64rem; }
.tracker-row-popularity b { font-weight: 500; color: #c1d5f1; }
.tracker-page .tracker-popularity-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 540px; margin: 0 0 24px; }
.tracker-popularity-controls { display: flex; align-items: center; gap: 8px; }
.tracker-popularity-controls button { padding: 5px 12px; border: 1px solid var(--color-border); border-radius: 6px; background: transparent; color: var(--color-muted); font: inherit; font-size: .72rem; cursor: pointer; }
.tracker-popularity-controls button[aria-pressed="true"] { background: #2c3b50; color: var(--color-text); border-color: #527198; }
.tracker-popularity-controls button:focus-visible { outline: 2px solid var(--tracker-blue); outline-offset: 3px; }
.tracker-line-key.is-purple { border-color: #b29aff; margin-left: 14px; }
.tracker-page .analytics-total-chart { margin: 0; }
.tracker-page [hidden] { display: none !important; }
.tracker-brief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.brief-card { display: block; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-elevated); color: var(--color-text); }
.brief-card > span { display: block; color: var(--color-muted); font-size: .73rem; }
.brief-card > p { margin: 7px 0 0; font-size: .92rem; line-height: 1.5; color: #c2d6ef; }
.brief-card.is-positive > p { color: #9ceba7; }
.brief-card.is-negative > p { color: #ffb8ac; }
a.brief-card:hover { border-color: #6484a8; }
.tracker-coverage { border-bottom: 1px solid var(--color-border); margin-bottom: 10px; }
.tracker-coverage > summary { display: flex; align-items: center; gap: 18px; padding: 12px 0 18px; list-style: none; cursor: pointer; }
.tracker-coverage > summary::-webkit-details-marker { display: none; }
.tracker-coverage > summary > span:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; flex: 1; }
.tracker-coverage strong { font-size: .76rem; font-weight: 500; }
#coverageStatus, .coverage-toggle { color: var(--color-muted); font-size: .73rem; }
.coverage-progress { width: 100px; height: 5px; background: #354050; border-radius: 10px; overflow: hidden; }
.coverage-progress i { display: block; height: 100%; width: 0; background: var(--tracker-blue); }
.coverage-toggle { white-space: nowrap; }
.coverage-body { padding: 0 0 20px; }
#coverageNote { color: var(--color-muted); font-size: .76rem; min-height: 1.5em; }
.coverage-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); gap: 4px; }
.coverage-day { padding: 0; height: 17px; border: 1px solid #516174; border-radius: 3px; cursor: pointer; }
.coverage-day.is-recorded, .coverage-legend .is-recorded { background: #38a9ff; }
.coverage-day.is-partial, .coverage-legend .is-partial { background: #cf9c4a; }
.coverage-day.is-missing, .coverage-legend .is-missing { background: #586277; }
.coverage-day.is-not_tracked, .coverage-day.is-pending, .coverage-legend .is-not_tracked { background: transparent; opacity: .55; }
.coverage-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--color-muted); font-size: .7rem; }
.coverage-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; border: 1px solid #516174; margin-right: 5px; }
.tracker-jump-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 26px; }
.tracker-jump-nav a { color: #a9c9ef; font-size: .78rem; padding: 5px 0; }
.tracker-jump-nav a:hover { color: var(--color-text); }
.tracker-page [id] { scroll-margin-top: 96px; }
.tracker-update-key { display: inline-block; height: 11px; border-left: 1px dashed #f2b75e; margin: 0 6px 0 14px; }
.tracker-heatmap-scroll { overflow-x: auto; padding: 3px 0; }
.tracker-heatmap { width: 100%; min-width: 660px; border-spacing: 3px; table-layout: fixed; }
.tracker-heatmap th { font-size: .67rem; font-weight: 400; color: var(--color-muted); padding: 4px 0; text-align: left; }
.tracker-heatmap th:first-child { width: 72px; }
.tracker-heatmap td { padding: 0; }
.heatmap-cell { display: block; width: 100%; height: 24px; border: 0; border-radius: 3px; cursor: pointer; }
.heatmap-cell.is-empty { background: repeating-linear-gradient(135deg, #30394a 0 4px, #3d4656 4px 5px); }
.heatmap-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; color: var(--color-muted); font-size: .7rem; }
.heatmap-legend i { width: 140px; height: 9px; border-radius: 3px; background: linear-gradient(90deg, hsl(220 92% 13%), hsl(202 92% 39%), hsl(184 92% 66%)); }
#heatmapScale { margin-left: auto; font-variant-numeric: tabular-nums; }
.heatmap-cell:hover { outline: 1px solid #d9e7f9; }
.heatmap-readout { color: #bfd4ef; margin: 14px 0 0; font-size: .8rem; min-height: 1.5em; }
.tracker-page .tracker-heatmap-card { margin-bottom: 24px; }
.tracker-page .tracker-pattern-metrics { margin-bottom: 18px; }
.update-comparison { border: 1px solid var(--color-border); border-radius: 13px; padding: 22px 24px 18px; background: var(--color-bg-elevated); margin-bottom: 20px; }
.update-comparison .section-heading { border: 0; padding: 0; gap: 18px; margin-bottom: 24px; align-items: flex-start; }
.comparison-select { max-width: 280px; min-width: 0; width: 100%; }
.comparison-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.comparison-metrics article > span { display: block; font-size: .8rem; font-weight: 600; }
.comparison-metrics strong { display: block; font-size: 2rem; color: #acc8ee; margin: 5px 0; font-weight: 500; }
.comparison-metrics small { color: var(--color-muted); font-size: .73rem; line-height: 1.6; display: block; }
.tracker-version-history > summary { padding: 16px 0; }
.tracker-page .brief-card:focus-visible, .tracker-page .coverage-day:focus-visible, .tracker-page .heatmap-cell:focus-visible, .tracker-page .tracker-coverage summary:focus-visible, .tracker-page .tracker-jump-nav a:focus-visible { outline: 2px solid var(--tracker-blue); outline-offset: 3px; }
@media (max-width: 1100px) {
  .tracker-page .tracker-key-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 22px; }
  .tracker-sparkline { display: none; }
  .tracker-list-heading, .tracker-game-row { grid-template-columns: minmax(170px, 1fr) 70px 78px 78px 94px 120px; gap: 10px; }
  .tracker-history-heading { display: none; }
  .tracker-page .game-detail-hero .tracker-hero-actions { flex-direction: column; align-items: flex-end; gap: 5px; }
  .tracker-lifetime-grid { gap: 20px; }
}
@media (max-width: 800px) {
  .tracker-brief { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .brief-card { padding: 12px 16px; }
  .brief-card > p { font-size: .86rem; margin-top: 4px; }
  .tracker-coverage > summary { gap: 12px; }
  .coverage-progress { display: none; }
  .update-comparison { padding: 18px 14px; }
  .update-comparison .section-heading { flex-direction: column; }
  .comparison-select { max-width: 100%; width: 100%; }
  .tracker-two-charts { grid-template-columns: minmax(0, 1fr); }
  .tracker-page .game-detail-hero { grid-template-columns: 80px minmax(0, 1fr); }
  .tracker-page .game-detail-hero .detail-thumb { width: 80px; height: 58px; }
  .tracker-page .game-detail-hero .tracker-hero-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .tracker-lifetime-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tracker-lifetime-grid dl + dl { border-top: 1px solid var(--color-border); padding-top: 10px; margin-top: 10px; }
  .tracker-list-heading { display: none; }
  .tracker-game-row { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 12px; row-gap: 14px; }
  .tracker-game-row-identity { grid-column: 1 / -1; }
  .tracker-row-metric { text-align: left; font-size: 1rem; }
  .tracker-row-metric small { display: block; color: var(--color-subtle); font-size: .6rem; margin-bottom: 4px; }
  .tracker-row-popularity { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; padding-top: 10px; border-top: 1px solid var(--color-border); }
}
@media (max-width: 480px) {
  .comparison-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .comparison-metrics article:last-child { grid-column: 1 / -1; }
  .tracker-heatmap th:first-child { width: 48px; }
  .tracker-jump-nav { gap: 18px; }
  .tracker-page .tool-page { padding-top: 26px; }
  .tracker-page .tool-hero { flex-direction: column; align-items: flex-start; gap: 18px; }
  .tracker-page .tracker-stats, .tracker-page .tracker-key-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 14px; }
  .tracker-page .metric-card strong { font-size: 1.7rem; }
  .tracker-page .tracker-key-metrics .metric-card:nth-child(even) .info-tooltip::after { left: auto; right: 0; }
  .tracker-page .game-detail-hero h1 { font-size: 1.6rem; }
  .tracker-page .game-detail-hero .hero-copy { white-space: normal; overflow-wrap: anywhere; }
  .tracker-page .chart-card { padding: 18px 14px 14px; }
  .tracker-page .chart-card .section-heading { flex-wrap: wrap; gap: 7px; }
  .tracker-page .chart-card .chart-canvas-frame, .tracker-page .tracker-primary-chart .chart-canvas-frame { height: 210px; }
  .tracker-page .tracker-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .tracker-page .tracker-section-heading > p { text-align: left; }
  .tracker-page .update-stats, .tracker-page .tracker-pattern-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tracker-disclosure > summary > span + span { display: none; }
  .tracker-list-controls { flex-wrap: wrap; }
  .tracker-list-controls .search-field { flex-basis: 100%; max-width: none; }
  .tracker-list-controls > span { font-size: .65rem; }
  .tracker-game-row { padding-inline: 0; }
  .tracker-page .refresh-button { font-size: .78rem; }
}