/* ============================================================================
   RETRIVIUM — progress surface.
   ----------------------------------------------------------------------------
   §9 of the rebuild plan. Seven readings of the same learner, in one column on
   a phone and two on a desktop.

   Two rules shape everything below:

     · No chart here may be read as "percent of course complete" (§10.5). The
       mastery bars therefore fill their own width and describe a distribution,
       and the fortnight of scheduled checks carries height but never a figure
       (§6.2).
     · Every state is encoded at least twice (PRINCIPLES 7). Rung segments carry
       fill AND numeral AND a named key row; a demoted block adds a hatch; the
       day columns carry fill density AND height AND words for a screen reader.

   Garnet (--color-action / --color-loss) appears in exactly one place on this
   page: the hatch on concepts that came back down, and the mark beside a
   statement that is no longer held. Both are losses. Nothing else earns it.
   ============================================================================ */

.progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-content: start;
}

.progress-section {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}
.progress-section h2 { font-size: var(--text-xl); }

.progress-empty {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------ 1 · CRITERION
   The outcome and its cost share one frame. The cost is deliberately quieter
   and smaller: it is what the figure beside it took, not a second achievement. */
.progress-criterion {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-state);
  border-radius: var(--radius-xl);
  background: var(--color-state-wash);
}

.progress-figure {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: clamp(2.25rem, 11vw, 3.25rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.progress-figure__unit { font-size: 0.5em; margin-left: 0.1em; color: var(--color-text-muted); }
.progress-figure--empty { color: var(--color-text-subtle); }
.progress-figure--cost {
  font-size: clamp(1.375rem, 6vw, 1.75rem);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.progress-cost-rows {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.progress-cost-rows .tabular { color: var(--color-text); }

/* --------------------------------------------------------- 2 · MASTERY BARS */
.progress-tracks {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.progress-track__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
}
.progress-track__header h3 { font-size: var(--text-md); font-weight: var(--weight-semi); }
.progress-track__header .note { margin-top: 0; font-size: var(--text-sm); }
.progress-track__returned {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-loss);
}

.progress-bar {
  display: flex;
  gap: 2px;
  margin-top: var(--space-3);
  height: 1.75rem;
}
.progress-bar__seg {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-sunk);
}
.progress-bar__numeral {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  line-height: 1;
}

/* An ordinal ramp: one hue, rising density, with rung 6 taking the "counted"
   hue because holding a concept through maintenance is a different claim from
   climbing to it. Text flips at rung 4 — the rung where scaffolds are removed,
   which is also where the fill goes dark enough to need it. */
.progress-bar__seg--r0 { background-color: color-mix(in srgb, var(--color-state) 6%, var(--color-surface-sunk)); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.progress-bar__seg--r1 { background-color: color-mix(in srgb, var(--color-state) 15%, var(--color-surface-sunk)); }
.progress-bar__seg--r2 { background-color: color-mix(in srgb, var(--color-state) 26%, var(--color-surface-sunk)); }
.progress-bar__seg--r3 { background-color: color-mix(in srgb, var(--color-state) 40%, var(--color-surface-sunk)); }
.progress-bar__seg--r4 { background-color: color-mix(in srgb, var(--color-state) 78%, var(--color-surface-sunk)); }
.progress-bar__seg--r5 { background-color: var(--color-state); }
.progress-bar__seg--r6 { background-color: var(--color-counted); }

.progress-bar__seg--r0 .progress-bar__numeral,
.progress-bar__seg--r1 .progress-bar__numeral,
.progress-bar__seg--r2 .progress-bar__numeral,
.progress-bar__seg--r3 .progress-bar__numeral { color: var(--color-text); }
.progress-bar__seg--r4 .progress-bar__numeral,
.progress-bar__seg--r5 .progress-bar__numeral,
.progress-bar__seg--r6 .progress-bar__numeral { color: var(--color-state-text); }

/* Demotion. C2 and PRINCIPLES 6: the display must be able to move down, and it
   must be legible that it has. Hatch, outline, and a ↓ on the numeral. */
.progress-bar__seg--returned {
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-loss) 62%, transparent) 0 2px,
    transparent 2px 6px
  );
  box-shadow: inset 0 0 0 1px var(--color-loss);
}

/* Named once for the section, not once per track: seven names repeated four
   times is four times the height and no extra information. */
.progress-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.progress-key li { display: flex; align-items: center; gap: var(--space-1); }
.progress-key__swatch {
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------- 3 · COMING UP
   A shape, and only a shape. There is no number in this block and there must
   never be one: the queue as a figure is the debt display §6.2 refuses. */
.progress-days {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.progress-days__group--overdue { flex: 0 0 3.25rem; }
.progress-days__group--window {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 2px;
}
.progress-days__rule {
  flex: 0 0 1px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--color-border-strong) 0 4px,
    transparent 4px 9px
  );
}

.progress-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.progress-day__track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 4.5rem;
  border-radius: var(--radius-xs);
}
.progress-day__bar {
  width: 100%;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background-color: var(--color-state);
}
.progress-day__bar--none { background-color: var(--color-border-strong); }
.progress-day__bar--light { background-color: color-mix(in srgb, var(--color-state) 30%, var(--color-surface-sunk)); }
.progress-day__bar--steady { background-color: color-mix(in srgb, var(--color-state) 62%, var(--color-surface-sunk)); }
.progress-day__bar--overdue {
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-surface) 70%, transparent) 0 2px,
    transparent 2px 6px
  );
}
.progress-day__label {
  font-size: var(--text-2xs);
  line-height: 1.2;
  color: var(--color-text-subtle);
  text-align: center;
}
/* Today is marked on its label, not around its column: an outline or a rule
   inside the plot area reads as a bar, which is the one thing it must not say. */
.progress-day--today .progress-day__label {
  color: var(--color-text);
  font-weight: var(--weight-semi);
  border-bottom: 2px solid var(--color-text);
}

/* ---------------------------------------------------- 4 · RETRIEVABILITY */
.progress-recall { margin-top: var(--space-4); }
.progress-recall__row { border-top: 1px solid var(--color-border-soft); }
.progress-recall__row:first-child { border-top: 0; }
/* The whole row is the target, which is what keeps it over 44px without
   spending 44px on the link alone. */
.progress-recall__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem 2.5rem;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding-block: var(--space-2);
  text-decoration: none;
}
.progress-recall__what { min-width: 0; }
.progress-recall__name {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 3px;
}
.progress-recall__link:hover .progress-recall__name { text-decoration-color: var(--color-text-muted); }
.progress-recall__when {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  line-height: 1.3;
  color: var(--color-text-muted);
}
.progress-recall__curve { width: 100%; height: auto; }
.progress-recall__base { stroke: var(--color-border); stroke-width: 1; }
.progress-recall__past { stroke: var(--color-state); stroke-width: 2; }
.progress-recall__future {
  stroke: var(--color-text-subtle);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}
.progress-recall__now { fill: var(--color-state); }
.progress-recall__value {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  text-align: right;
  color: var(--color-text);
}

/* ------------------------------------------------------- 5 · CAPABILITIES */
.progress-capabilities { margin-top: var(--space-4); }
.progress-capabilities__second { margin-top: var(--space-5); }
.progress-claims { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.progress-claim {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: var(--space-2);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}
.progress-claim__mark {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-counted);
}
/* A revoked statement is a loss, which is the second and only other thing
   garnet is allowed to mean. It is still stated as information (§10.6). */
.progress-claims--released .progress-claim { color: var(--color-text-muted); }
.progress-claims--released .progress-claim__mark { color: var(--color-loss); }

.progress-more { margin-top: var(--space-3); }
.progress-more > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-size: var(--text-md);
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
}
.progress-more > summary::-webkit-details-marker { display: none; }
.progress-more > summary::after { content: "›"; font-size: var(--text-lg); }
.progress-more[open] > summary::after { content: "⌄"; }

/* ---------------------------------------------------------- 6 · TRANSFER */
.progress-transfer { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.progress-transfer__row { display: grid; gap: var(--space-2); }
.progress-transfer__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.progress-transfer__name .note { margin-top: 0; font-size: var(--text-sm); }
.progress-transfer__reading {
  display: grid;
  grid-template-columns: minmax(0, 26rem) max-content;
  justify-content: start;
  align-items: center;
  gap: var(--space-3);
}
.progress-transfer__result { font-size: var(--text-sm); color: var(--color-text-muted); }
.progress-meter {
  max-width: 26rem;
  height: 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunk);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  overflow: hidden;
}
.progress-meter__fill { display: block; height: 100%; background: var(--color-state); }

/* ------------------------------------------------------- 7 · CONSISTENCY
   The shared partial sizes its dots from the column it is given, and this page
   is far wider than the one it was written for. Scoped here so the component
   itself keeps its own defaults. */
.progress .consistency-window { padding-inline: 0; }
.progress .consistency-window__dots { max-width: 26rem; }

/* ------------------------------------------------------------ 8 · WAY OUT */
.progress .page-actions { margin-top: var(--space-1); }
.progress-out {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-5);
  margin-top: var(--space-2);
}
.progress-out .btn-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 44px;
  margin-top: 0;
}

/* ------------------------------------------------------------------ NARROWER */
@media (max-width: 36rem) {
  .progress { gap: var(--space-4); }
  .progress-section, .progress-criterion { padding: var(--space-4); }
  .progress-claims { gap: var(--space-3); }
}

/* ------------------------------------------------------------------ WIDER
   Two columns from the point the single column stops being the honest shape.
   The bars keep their own widths, so nothing about the reading changes. */
@media (min-width: 44rem) {
  .progress-criterion { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
  .progress-criterion__cost { padding-left: var(--space-6); border-left: 1px solid var(--color-border); }
}

@media (min-width: 64rem) {
  .progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress > * { grid-column: 1 / -1; }
  .progress-section--half { grid-column: auto; }
  .progress-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .progress-track + .progress-track { padding-top: 0; border-top: 0; }
}