/* ==========================================================================
   Screen "progress" (js/ui/progress.js): the learner's dashboard. Every class starts with .progress-.
   Built on the shared components of css/system.css (.card, .btn, .segmented, .progress bar of the kit,
   .empty) and on the colour tokens of styles.css; only layout, the hand written SVG charts and the few
   one-off decorations live here. No token is redefined.

   Charts (all SVG drawn in js/ui/progress.js, each with a text alternative):
     .progress-heat-*      calendar heatmap: five levels of the gold ramp, hairline outline on empty days
     .progress-trend-*     line of the accuracy per session: 2px line, 10% wash, round markers with a surface
                           ring, hairline grid, focusable points with a tooltip
     .progress-bar-*       accuracy rows: one colour for one series, a mark on the pass line (70)
     .progress-stack-*     the quality of the moves as one stacked bar with a 2px gap between segments and a
                           legend that repeats every number (colour is never the only signal)

   Layout: phone one column; tablet two columns for the small cards; desktop the hero in two columns, the
   accuracy card with its improvement panel beside it, three cards for the breakdowns.
   ========================================================================== */

/* The screen root is .progress-root: a bare .progress is the kit's bar (system.css) and must not be restyled from here. */
.progress-root {
  display: grid;
  /* An explicit minmax(0, 1fr) track: an implicit `auto` column grows to the min-content of its widest card (the
     achievement filter's unbreakable words), which dragged the whole screen into a sideways scroll at 320px and at
     text size 130% (QA VIS-002 / A11Y-006). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  min-width: 0;
}

/* ── Header and profile switcher ── */
.progress-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}
.progress-head-text { max-width: 48rem; }
.progress-head .t-eyebrow { margin-bottom: var(--space-2); letter-spacing: 0.18em; }
.progress-title {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.progress-title:focus { outline: none; }
.progress-sub { margin-top: var(--space-3); max-width: 58ch; line-height: 1.55; text-wrap: pretty; }
.progress-unavailable { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-muted); }

.progress-switcher { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.progress-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--hit);
  padding: 0 var(--space-4) 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.progress-switch:hover { background: var(--color-surface-3); color: var(--color-text); }
.progress-switch[aria-pressed="true"] {
  border-color: var(--color-gold-dim);
  background: var(--color-gold-bg);
  color: var(--color-gold);
  box-shadow: inset 0 0 0 1px var(--color-gold-dim);
}
.progress-switch-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.progress-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 650;
  line-height: var(--lh-tight);
}
.progress-lead { margin: var(--space-1) 0 0; max-width: 62ch; color: var(--color-text-muted); font-size: var(--text-base); line-height: var(--lh-normal); }
.progress-note { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--lh-normal); }
.progress-empty-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
}
.progress-empty-note .ui-icon { flex: none; margin-top: 3px; }

.progress-card { --card-pad: clamp(18px, 2.4vw, 28px); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; min-width: 0; }
.progress-card-head { display: grid; gap: var(--space-1); }

/* ── Hero: level and streak ── */
.progress-hero {
  --card-pad: clamp(20px, 3vw, 36px);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-8);
  align-items: stretch;
  background-image:
    radial-gradient(560px 260px at 0 0, rgba(221, 167, 52, 0.11), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0) 46%);
}
.progress-level { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.progress-level-head { display: flex; align-items: center; gap: var(--space-4); }
.progress-medal {
  display: grid;
  flex: none;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid var(--color-gold-dim);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(221, 167, 52, 0.22), var(--color-gold-bg) 70%);
  box-shadow: 0 0 0 4px rgba(221, 167, 52, 0.06);
}
.progress-medal.is-gm { border-color: var(--color-gold); box-shadow: 0 0 0 4px rgba(221, 167, 52, 0.16); }
.progress-medal-piece { width: 40px; height: 40px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5)); }
.progress-level-text { min-width: 0; }
.progress-level-text .t-eyebrow { margin: 0; letter-spacing: 0.14em; }
.progress-level-title {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.progress-xp { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--text-base); line-height: var(--lh-snug); }
.progress-xp-main { color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.progress-xp-total { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

.progress-streak {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
  padding-left: var(--space-8);
  border-left: 1px solid var(--color-hairline);
}
.progress-streak-label { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 650; letter-spacing: 0.04em; }
.progress-streak-label .ui-icon { color: var(--color-gold); }
/* The hero figure of the screen: proportional figures in the UI face. */
.progress-streak-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); margin: 0; }
.progress-streak-count {
  font-family: var(--font-ui);
  font-size: clamp(3.25rem, 2.6rem + 3vw, 4.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--color-gold);
}
.progress-streak-unit { color: var(--color-text); font-size: var(--text-lg); font-weight: 600; }
.progress-streak-best { margin: 0; color: var(--color-text-muted); font-size: var(--text-base); }
.progress-streak-msg { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-1) 0 0; font-size: var(--text-base); font-weight: 600; line-height: var(--lh-snug); }
.progress-streak-msg .ui-icon { flex: none; margin-top: 2px; }
.progress-streak-msg.is-ok { color: var(--color-perfect); }
.progress-streak-msg.is-risk {
  padding: var(--space-3);
  border: 1px solid var(--color-dubious-bd);
  border-radius: var(--radius-md);
  background: var(--color-dubious-bg);
  color: var(--color-dubious);
}
.progress-streak-daily { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── Numbers ── */
.progress-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}
.progress-stat { display: grid; align-content: start; gap: 2px; min-width: 0; padding: var(--space-4) var(--space-5); }
.progress-stat + .progress-stat { border-left: 1px solid var(--color-hairline); }
.progress-stat-label { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 650; letter-spacing: 0.02em; }
.progress-stat-value { font-family: var(--font-ui); font-size: var(--text-3xl); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.progress-stat-hint { color: var(--color-text-muted); font-size: var(--text-xs); line-height: var(--lh-snug); }

/* ── Activity heatmap ── */
.progress-activity-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-8); }
.progress-heat { display: grid; flex: 1 1 18rem; gap: var(--space-2); min-width: 0; max-width: 26rem; }
.progress-heat-svg { display: block; width: 100%; height: auto; }
.progress-heat-label { fill: var(--color-text-muted); font: 500 10px var(--font-ui); }
.progress-heat-cell { fill: var(--color-surface-2); stroke: var(--color-hairline-strong); stroke-width: 1; }
.progress-heat-cell.is-l1 { fill: rgba(221, 167, 52, 0.34); stroke: none; }
.progress-heat-cell.is-l2 { fill: rgba(221, 167, 52, 0.56); stroke: none; }
.progress-heat-cell.is-l3 { fill: rgba(221, 167, 52, 0.78); stroke: none; }
.progress-heat-cell.is-l4 { fill: var(--color-gold); stroke: none; }
.progress-heat-cell.is-today { stroke: var(--color-text); stroke-width: 1.5; }
.progress-heat-legend { display: flex; align-items: center; gap: 5px; color: var(--color-text-muted); font-size: var(--text-xs); }
.progress-heat-legend-text { padding-inline: 3px; }
.progress-heat-swatch { width: 14px; height: 14px; border-radius: 3px; background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-hairline-strong); }
.progress-heat-swatch.is-l1 { background: rgba(221, 167, 52, 0.34); box-shadow: none; }
.progress-heat-swatch.is-l2 { background: rgba(221, 167, 52, 0.56); box-shadow: none; }
.progress-heat-swatch.is-l3 { background: rgba(221, 167, 52, 0.78); box-shadow: none; }
.progress-heat-swatch.is-l4 { background: var(--color-gold); box-shadow: none; }
.progress-activity-facts { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.progress-fact { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.progress-fact-value { font-family: var(--font-ui); font-size: var(--text-3xl); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.progress-fact-label { color: var(--color-text-muted); font-size: var(--text-base); line-height: var(--lh-snug); }
.progress-list-details { min-width: 0; }
.progress-list-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--hit);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.progress-list-summary::-webkit-details-marker { display: none; }
.progress-list-summary:hover { color: var(--color-text); }
.progress-list-summary .ui-icon { transition: transform var(--dur-2) var(--ease-out); }
.progress-list-details[open] .progress-list-summary .ui-icon { transform: rotate(180deg); }
.progress-day-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-1) var(--space-5);
  margin: var(--space-2) 0 0;
  padding: 0 var(--space-2) 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ── Accuracy trend ── */
.progress-trend-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: var(--space-6); align-items: start; }
.progress-trend-main { display: grid; gap: var(--space-3); min-width: 0; }
.progress-trend { display: grid; gap: var(--space-2); margin: 0; min-width: 0; }
.progress-axis-title { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.progress-trend-plot { position: relative; min-width: 0; }
.progress-trend-svg { display: block; width: 100%; height: auto; overflow: visible; }
.progress-grid { stroke: var(--color-hairline); stroke-width: 1; }
/* rem, not px: this drawing is shown at its own size (see fitTrend), so the text follows a11y.textScale. */
.progress-axis-label { fill: var(--color-text-muted); font: 500 0.6875rem var(--font-ui); font-variant-numeric: tabular-nums; }
.progress-area { fill: rgba(221, 167, 52, 0.1); }
.progress-line { fill: none; stroke: var(--color-gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.progress-cross { stroke: var(--color-border-mid); stroke-width: 1; }
.progress-pt { outline: none; cursor: pointer; }
.progress-pt-hit { fill: transparent; }
.progress-pt-dot { fill: var(--color-gold); stroke: var(--color-surface); stroke-width: 2; transition: transform var(--dur-1) ease; transform-box: fill-box; transform-origin: center; }
.progress-pt-dot.is-last { fill: var(--gold-100); }
.progress-pt-focus { fill: none; stroke: transparent; stroke-width: 3; }
.progress-pt:hover .progress-pt-dot,
.progress-pt:focus-visible .progress-pt-dot { transform: scale(1.35); }
.progress-pt:focus-visible .progress-pt-focus { stroke: var(--color-info); }
.progress-tip {
  position: absolute;
  z-index: var(--z-popover);
  display: grid;
  gap: 2px;
  width: max-content;
  min-width: 9.5rem;
  max-width: min(16rem, 86%);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-3);
  box-shadow: var(--shadow-2);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
}
.progress-tip.is-below { transform: translate(-50%, 14px); }
.progress-tip p { margin: 0; }
.progress-tip-value { font-family: var(--font-ui); font-size: var(--text-xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.progress-tip-title { color: var(--color-text); font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.progress-tip-meta { color: var(--color-text-muted); font-size: var(--text-xs); }
.progress-trend-keys { font-size: var(--text-xs); }

.progress-improve {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-4);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.02);
}
.progress-improve-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.progress-improve-title .ui-icon.is-up { transform: rotate(-45deg); color: var(--color-perfect); }
.progress-improve.is-down .progress-improve-title .ui-icon { color: var(--color-dubious); }
.progress-improve-headline { margin: 0; font-family: var(--font-ui); font-size: var(--text-xl); font-weight: 700; line-height: var(--lh-snug); }
.progress-improve.is-up .progress-improve-headline { color: var(--color-perfect); }
.progress-improve.is-down .progress-improve-headline { color: var(--color-dubious); }
.progress-improve-detail { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--lh-normal); }

/* ── Breakdowns ── */
.progress-breakdowns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.progress-bars { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.progress-bar-row { min-width: 0; }
.progress-bar-body { display: grid; gap: 6px; min-width: 0; }
.progress-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.progress-bar-label { color: var(--color-text); font-size: var(--text-base); font-weight: 600; }
.progress-bar-value { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.progress-bar-svg { display: block; width: 100%; height: 10px; overflow: visible; }
.progress-bar-track { fill: var(--color-surface-3); }
.progress-bar-fill { fill: var(--color-gold); }
.progress-bar-svg.is-small .progress-bar-fill { fill: rgba(221, 167, 52, 0.55); }
.progress-bar-mark { fill: var(--color-text); opacity: 0.55; }
.progress-bar-n { color: var(--color-text-muted); font-size: var(--text-sm); }
.progress-bar-n.is-small { color: var(--color-dubious); }
.progress-bar-row.is-empty .progress-bar-value { color: var(--color-text-muted); }

/* Quality of the moves: one stacked bar (2px gaps), a legend that repeats every number. */
.progress-stack-svg { display: block; width: 100%; height: 18px; }
.progress-seg { stroke: none; }
.progress-seg.q-brilliant, .progress-swatch.q-brilliant { fill: var(--q-brilliant); background: var(--q-brilliant); }
.progress-seg.q-great, .progress-swatch.q-great { fill: var(--q-great); background: var(--q-great); }
.progress-seg.q-perfect, .progress-swatch.q-perfect { fill: var(--q-perfect); background: var(--q-perfect); }
.progress-seg.q-very_good, .progress-swatch.q-very_good { fill: var(--q-very-good); background: var(--q-very-good); }
.progress-seg.q-good, .progress-swatch.q-good { fill: var(--q-good); background: var(--q-good); }
.progress-seg.q-interesting, .progress-swatch.q-interesting { fill: var(--q-interesting); background: var(--q-interesting); }
.progress-seg.q-dubious, .progress-swatch.q-dubious { fill: var(--q-dubious); background: var(--q-dubious); }
.progress-seg.q-bad, .progress-swatch.q-bad { fill: var(--q-bad); background: var(--q-bad); }
.progress-seg.q-blunder, .progress-swatch.q-blunder { fill: var(--q-blunder); background: var(--q-blunder); }
.progress-seg.q-no_move, .progress-swatch.q-no_move { fill: var(--color-border-mid); background: var(--color-border-mid); }
.progress-legend { display: grid; gap: var(--space-2); max-width: 30rem; margin: 0; padding: 0; list-style: none; }
.progress-legend-item { display: grid; grid-template-columns: 12px 1.5em minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.progress-swatch { width: 12px; height: 12px; border-radius: 3px; }
.progress-legend-glyph { color: var(--color-text-muted); font-weight: 700; text-align: center; }
.progress-legend-label { color: var(--color-text); font-weight: 600; }
.progress-legend-count { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ── Weak themes ── */
.progress-weak-list { display: grid; margin: 0; padding: 0; list-style: none; }
.progress-weak-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-4) 0;
}
.progress-weak-item + .progress-weak-item { border-top: 1px solid var(--color-hairline); }
.progress-weak-item:first-child { padding-top: 0; }
.progress-weak-main { display: grid; gap: 6px; min-width: 0; }
.progress-weak-name { margin: 0; font-size: var(--text-lg); font-weight: 650; line-height: var(--lh-snug); }
.progress-weak-meta { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.progress-weak-bar { max-width: 26rem; }
.progress-weak-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }

/* ── Achievements ── */
.progress-ach-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.progress-ach-filter { max-width: 100%; }
.progress-ach-filter > button { min-width: 3.5rem; padding: 0 var(--space-3); }
/* The filter needs about 17rem in Spanish ("Todos | Logrados | Pendientes"); when its card is narrower than that (a 320px phone,
   or a larger text size, because the query is in rem) the three choices stack as full-width rows instead of clipping a label
   (QA VIS-002 / CNT-027 / A11Y-006). */
.progress-ach-card { container: progress-ach / inline-size; }
.progress-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.progress-ach {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xl);
  background: var(--color-surface-2);
}
.progress-ach.is-unlocked { border-color: var(--color-gold-dim); background-image: radial-gradient(240px 120px at 0 0, rgba(221, 167, 52, 0.1), transparent 70%); }
.progress-ach-glyph {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-gold-dim);
  border-radius: 50%;
  background: var(--color-gold-bg);
  color: var(--color-gold);
  font-size: 1.35rem;
  line-height: 1;
}
.progress-ach.is-locked .progress-ach-glyph { border-color: var(--color-border); background: var(--color-surface-3); color: var(--color-text-muted); }
.progress-ach-body { display: grid; gap: 2px; min-width: 0; }
.progress-ach-cat { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.progress-ach-cat:empty { display: none; }
.progress-ach-name { margin: 0; font-size: var(--text-md); font-weight: 650; line-height: var(--lh-snug); }
.progress-ach-desc { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--lh-normal); }
.progress-ach-state { display: flex; align-items: center; gap: 6px; margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.progress-ach-state.is-done { color: var(--color-gold); }
.progress-ach-progress { display: grid; gap: 6px; }
.progress-ach-progress .progress-ach-state { margin-top: var(--space-2); }

/* ── Recent sessions ── */
.progress-sessions { display: grid; margin: 0; padding: 0; list-style: none; }
.progress-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-4) 0;
}
.progress-session + .progress-session { border-top: 1px solid var(--color-hairline); }
.progress-session:first-child { padding-top: 0; }
.progress-session:last-child { padding-bottom: 0; }
.progress-session-main { display: grid; gap: 4px; min-width: 0; }
.progress-session-title { margin: 0; font-size: var(--text-md); font-weight: 650; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.progress-session-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.progress-kind {
  padding: 1px 8px;
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 650;
}
.progress-kind.is-duel { border-color: var(--color-gold-dim); background: var(--color-gold-bg); color: var(--color-gold); }
.progress-session-nums { display: flex; gap: var(--space-6); margin: 0; }
.progress-session-num { display: grid; gap: 2px; min-width: 4.5rem; text-align: right; }
.progress-session-num dt { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.04em; }
.progress-session-num dd { margin: 0; font-size: var(--text-md); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Empty state ── */
.progress-gaps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.progress-gap { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.02); }
.progress-gap-mark { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-text-muted); }
.progress-gap.is-done .progress-gap-mark { border-color: var(--color-perfect-bd); background: var(--color-perfect-bg); color: var(--color-perfect); }
.progress-gap-text { min-width: 0; }
.progress-gap-title { margin: 0; font-size: var(--text-md); font-weight: 650; }
.progress-gap-need { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--lh-normal); }
.progress-empty-actions { display: flex; }

/* ── Wide screens: no empty areas (QA VIS-024) ──
   The heatmap keeps a readable size (its cells are square) and the three numbers become a panel that fills the rest of the
   card, like the "your improvement" panel of the trend card. */
@media (min-width: 900px) {
  .progress-activity-body { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); align-items: stretch; gap: var(--space-6) var(--space-8); }
  .progress-activity-body > .progress-heat { max-width: none; }
  .progress-activity-facts {
    align-content: center;
    gap: 0;
    padding: var(--space-2) var(--space-6);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.02);
  }
  .progress-activity-facts > .progress-fact { padding: var(--space-4) 0; }
  .progress-activity-facts > .progress-fact + .progress-fact { border-top: 1px solid var(--color-hairline); }
}
/* Three cards side by side: the shortest one (the quality legend) spreads its rows over the height the others need. */
@media (min-width: 1100px) {
  .progress-breakdowns > .progress-quality { grid-template-rows: auto auto minmax(0, 1fr); }
  .progress-breakdowns > .progress-quality .progress-legend { grid-auto-rows: minmax(0, 1fr); align-content: stretch; max-width: none; }
  .progress-breakdowns > .progress-quality .progress-legend-item + .progress-legend-item { border-top: 1px solid var(--color-hairline); }
}

/* ── Breakpoints ── */
@media (max-width: 1099px) {
  .progress-breakdowns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-breakdowns > .progress-quality { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .progress-hero { grid-template-columns: minmax(0, 1fr); }
  .progress-streak { padding-left: 0; padding-top: var(--space-5); border-left: 0; border-top: 1px solid var(--color-hairline); }
  .progress-trend-layout { grid-template-columns: minmax(0, 1fr); }
  .progress-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-stat:nth-child(3) { border-left: 0; }
  .progress-stat:nth-child(n + 3) { border-top: 1px solid var(--color-hairline); }
}
@media (max-width: 719px) {
  .progress-root { gap: var(--space-5); }
  .progress-ach-filter { display: flex; width: 100%; }
  .progress-ach-filter > button { flex: 1 1 0; min-width: 0; }
  .progress-breakdowns { grid-template-columns: minmax(0, 1fr); }
  .progress-weak-item { grid-template-columns: minmax(0, 1fr); }
  .progress-weak-actions { justify-content: flex-start; }
  .progress-session { grid-template-columns: minmax(0, 1fr); }
  .progress-session-nums { justify-content: space-between; gap: var(--space-3); }
  .progress-session-num { text-align: left; min-width: 0; }
  .progress-stat { padding: var(--space-3) var(--space-4); }
  .progress-stat-value { font-size: var(--text-2xl); }
  .progress-activity-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); width: 100%; }
  .progress-fact { display: grid; gap: 2px; }
  .progress-fact-value { font-size: var(--text-2xl); }
  .progress-fact-label { font-size: var(--text-sm); }
  .progress-switch-name { max-width: 8rem; }
}
@media (max-width: 400px) {
  .progress-stat-hint { display: none; }
}
/* After the breakpoints on purpose: it must win over `.progress-ach-filter { display: flex }` of the phone rule above. */
@container progress-ach (max-width: 18rem) {
  .progress-ach-filter { display: grid; width: 100%; border-radius: var(--radius-lg); }
  .progress-ach-filter > button { width: 100%; }
  .progress-ach-filter > * + * { border-left: 0; border-top: 1px solid var(--color-hairline-strong); }
}
@media (prefers-reduced-motion: reduce) {
  .progress-pt-dot,
  .progress-list-summary .ui-icon { transition: none; }
  .progress-pt:hover .progress-pt-dot,
  .progress-pt:focus-visible .progress-pt-dot { transform: none; }
}