/*
 * dashboard.css — owned by the Dashboard route agent.
 *
 * Scope: styling for js/dashboard.js's rendered markup (the #app-main
 * content when the route is "dashboard" — data-route="dashboard").
 *
 * This file is loaded AFTER app.css and BEFORE quiz.css/pages.css (see
 * index.html's <link> order), so it can override app.css's shared
 * component defaults (.card, .stat-tile, .badge, .btn, etc.) for
 * dashboard-specific layout, but still reaches for the design tokens
 * defined in app.css's :root (--garnet-*, --gold-*, --sage-*, --ink-*,
 * --space-*, --radius-*, --shadow-*, --text-*) rather than hardcoding new
 * colors/sizes. See site/DESIGN.md for the full token + component contract
 * and the do/don't list (no purple, AA contrast on all text).
 *
 * Everything below is new for the Phase 2a information-density rebuild:
 * the 5th hero tile fits via a route-scoped breakpoint override, the study
 * heatmap, the mastery-overview pinned/scrollable bar lists + clickable
 * topic rows, the per-mode accuracy breakdown, the recent-sessions table
 * type chips, and the "last tasting" summary line.
 */

/* ── hero row: fit 5 tiles at wide widths without touching app.css's
   shared 4-col rule (which still applies 480–999px) ─────────────────── */
@media (min-width: 1200px) {
  [data-route="dashboard"] .stat-tiles {
    grid-template-columns: repeat(5, 1fr);
  }
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 2px;
}

/* ── study activity heatmap ────────────────────────────────────────────── */

.panel-heatmap .heatmap {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: 2px;
}

.heatmap-daylabels {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--ink-500);
  line-height: 1;
}

.heatmap-daylabels span {
  display: flex;
  align-items: center;
  height: 12px;
}

.heatmap-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.heat-cell {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--border);
}

.heat-cell--future {
  background: transparent;
  border-color: transparent;
}

.heat-cell[data-level="1"] { background: var(--sage-100); border-color: var(--sage-100); }
.heat-cell[data-level="2"] { background: color-mix(in srgb, var(--sage-500) 45%, var(--sage-100)); border-color: transparent; }
.heat-cell[data-level="3"] { background: var(--sage-500); border-color: transparent; }
.heat-cell[data-level="4"] { background: var(--sage-700); border-color: transparent; }

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}

.heatmap-legend .heat-cell {
  width: 10px;
  height: 10px;
}

.empty-state--inline {
  padding: var(--space-4) var(--space-3);
}

/* ── performance card: per-mode accuracy breakdown ─────────────────────── */

.format-breakdown-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-700);
  margin: var(--space-4) 0 var(--space-2);
}

.format-breakdown {
  margin: 0;
}

.bar-row--static {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
}

/* ── mastery overview ──────────────────────────────────────────────────── */

.mastery-pin-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: var(--space-3) 0 var(--space-1);
}

.mastery-pinned {
  margin-bottom: var(--space-2);
}

.mastery-list--scroll {
  max-height: 380px;
  overflow-y: auto;
  padding-right: 2px;
}

.mastery-hint {
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}

button.topic-row {
  cursor: pointer;
  font-family: inherit;
  border: none;
}

button.topic-row .badge--retired {
  margin-left: var(--space-2);
}

/* ── tasting & service: last-tasting summary line ──────────────────────── */

.last-tasting {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.last-tasting__eyebrow {
  font-size: var(--text-xs);
  margin: 0 0 2px;
}

.last-tasting__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-900);
}

.last-tasting--empty {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

/* ── recent sessions table ─────────────────────────────────────────────── */

.recent-table td {
  vertical-align: middle;
}

.badge--type-quiz { background: var(--garnet-100); color: var(--garnet-800); border-color: var(--garnet-100); }
.badge--type-study { background: var(--gold-100); color: var(--gold-700); border-color: var(--gold-100); }
.badge--type-tasting { background: var(--sage-100); color: var(--sage-700); border-color: var(--sage-100); }

/* Tiles must never force the hero row wider than its container: 1fr grid
   tracks respect min-content unless children opt out, and the ring+label
   tiles' min-content exceeds a fifth of the content column at 1000-1400px.
   Let tiles shrink and their text wrap instead of overflowing the page. */
[data-route="dashboard"] .stat-tile { min-width: 0; }
[data-route="dashboard"] .stat-tile__body { min-width: 0; }


/* Mobile: long topic names must shrink inside their bar rows, not push the
   page wider. */
[data-route="dashboard"] .bar-row,
[data-route="dashboard"] .topic-row { min-width: 0; max-width: 100%; }
[data-route="dashboard"] .bar-row > * { min-width: 0; }
[data-route="dashboard"] .bar-row__label,
[data-route="dashboard"] .topic-row .bar-row__label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Stat tiles: number and ring must never collide, badges never break
   mid-word, and everything scales down gracefully in narrow tiles. */
[data-route="dashboard"] .stat-tile { container-type: inline-size; }
[data-route="dashboard"] .stat-tile__body { overflow: hidden; }
[data-route="dashboard"] .stat-tile__num { overflow: hidden; text-overflow: ellipsis; }
[data-route="dashboard"] .stat-tile .badge { white-space: nowrap; overflow-wrap: normal; }
@container (max-width: 250px) {
  .stat-tile__num { font-size: 1.375rem; }
  .stat-tile__ring svg { width: 44px; height: 44px; }
}
@container (max-width: 180px) {
  .stat-tile__ring { display: none; }
}