/* Suivi and Sessions (§10): KPI tiles, weekly chart, repeated errors, history and session detail. Phone-friendly. */
.tracking__intro { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.tracking__last { font-size: 14px; font-weight: 700; color: var(--ink-muted); }
.tracking__last a { color: var(--ink-muted); }
.tracking__last a:hover { color: var(--ink); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.kpi {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.kpi__label { color: var(--ink-muted); }
.kpi__note { font-size: 14px; color: var(--ink-muted); }
.kpi__note--up { color: var(--success); font-weight: 700; }

.tracking__panels { display: flex; gap: var(--space-8); align-items: flex-start; flex-wrap: wrap; }
.panel {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 420px;
  min-width: 0;
}
.panel--chart { flex: 1 1 520px; gap: var(--space-4); }
.panel--flush { padding: 0; overflow: hidden; }
.panel__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.panel__title { font-size: 20px; line-height: 26px; font-weight: 800; }
.panel__note, .panel__empty { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

.chart-filter__select {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-raised);
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  padding: 6px 10px;
  max-width: 100%;
}
.chart-filter__select:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; }

/* Day, week or month (§10.3) next to the theme filter; both GET forms keep the other's value. */
.chart-filters { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.chart-period .segments__option { min-height: 36px; padding: 0 var(--space-3); font-size: 14px; }

/* Two drawings of the same chart: the phone one has its own scale, so labels stay readable without scrolling. */
.chart { display: block; width: 100%; height: auto; font-family: var(--font-num); }
.chart + .chart { display: none; }
@media (max-width: 600px) {
  .chart:first-child { display: none; }
  .chart + .chart { display: block; }
}
.chart__grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.chart__tick { fill: var(--ink-muted); font-family: var(--font-sans); font-size: 12px; font-weight: 700; }
.chart__bar { fill: var(--brand-soft); }
.chart__line { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart__point { fill: var(--surface-raised); stroke: var(--brand); stroke-width: 2.5; }
.chart__value { fill: var(--ink); font-size: 13px; font-weight: 700; }
.chart__marker { fill: var(--brand); }
.chart__marker-line { stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: 0.6; }

.chart-legend { display: flex; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap; font-size: 13px; color: var(--ink-muted); }
.chart-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart-legend__line { width: 16px; height: 3px; border-radius: 2px; background: var(--brand); }
.chart-legend__bar { width: 12px; height: 12px; border-radius: 3px; background: var(--brand-soft); }
.chart-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.chart-notes__item { font-size: 13px; line-height: 18px; color: var(--ink-muted); display: flex; gap: var(--space-2); align-items: center; }
.chart-notes__swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--brand); flex: none; }
.chart-notes__help { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

.errors { width: 100%; border-collapse: collapse; font-family: var(--font-num); font-size: 15px; font-variant-numeric: tabular-nums; }
.errors th.label { text-align: left; color: var(--ink-muted); font-family: var(--font-sans); font-size: 12px; padding-bottom: var(--space-2); }
.errors td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-top: 1px solid var(--line); vertical-align: top; }
.errors td:not(:first-child) { width: 100px; }
.errors__group th { text-align: left; font-family: var(--font-sans); font-size: 15px; font-weight: 800; padding: var(--space-3) 0 var(--space-1); }
.errors__count { font-weight: 600; color: var(--ink-muted); }
.errors__given { color: var(--danger); }
.errors__words { font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.errors__more { font-family: var(--font-sans); font-size: 13px; color: var(--ink-muted); }

.tracking__grid { display: flex; flex-direction: column; gap: var(--space-4); }
.success-legend { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: 13px; }
.competence-theme__fluence { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.competence-median { display: flex; flex-direction: column; color: var(--ink-muted); }
.competence-median__slow { font-size: 12px; font-weight: 700; color: var(--ink); }

/* Sessions history: a table on wide screens, one card per session on phones. */
.history-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.history-table th, .history-table td { padding: var(--space-3); text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
.history-table thead th { border-top: 0; background: var(--surface-sunken); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.history-table__num { text-align: right !important; }
.history-table__link { font-weight: 700; color: var(--info); white-space: nowrap; }
.history-table__topics { max-width: 260px; }
.history-table__row:hover { background: var(--surface); }

.status { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; }
.status--finished { background: var(--success-soft); color: var(--success); }
.status--interrupted, .status--abandoned { background: var(--surface-sunken); color: var(--ink-muted); }
.status--in_progress, .status--paused { background: var(--info-soft); color: var(--info); }

.back-link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 15px; font-weight: 700; color: var(--ink-muted); text-decoration: none; align-self: flex-start; }
.back-link .icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.back-link:hover { color: var(--ink); }

.session-facts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); margin: 0; }
.session-facts dt { color: var(--ink-muted); }
.session-facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; }

.attempts { list-style: none; margin: 0; padding: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.attempt { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-3); padding: var(--space-3) var(--space-4); align-items: start; }
.attempt + .attempt { border-top: 1px solid var(--line); }
.attempt--failed { background: var(--danger-soft); }
.attempt__position { color: var(--ink-muted); }
.attempt__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attempt__competence { font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.attempt__text { font-size: 18px; line-height: 26px; font-weight: 700; overflow-wrap: anywhere; }
.attempt__answers { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); font-size: 15px; }
.attempt__label { font-size: 14px; color: var(--ink-muted); }
.attempt__given--wrong { color: var(--danger); text-decoration: line-through; }
.attempt__expected { font-weight: 700; }
.attempt__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 14px; color: var(--ink-muted); text-align: right; }
.attempt--failed .attempt__outcome { color: var(--danger); font-weight: 700; }
.attempt--first_try .attempt__outcome { color: var(--success); font-weight: 700; }

@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .kpis { gap: var(--space-3); }
  .kpi { padding: var(--space-4); }
  .panel { padding: var(--space-4); flex-basis: 100%; }
  .competence-row .competence-median { grid-column: 2; flex-direction: row; gap: var(--space-2); }
  .errors td:not(:first-child) { width: auto; }

  .history-table thead { display: none; }
  .history-table, .history-table tbody, .history-table tr { display: block; }
  .history-table tr.history-table__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
  .history-table__row:first-child { border-top: 0; }
  .history-table th, .history-table td { display: block; padding: 0; border: 0; text-align: left !important; }
  .history-table td::before { content: attr(data-label) " : "; color: var(--ink-muted); font-family: var(--font-sans); font-size: 13px; }
  .history-table__row > th { grid-column: 1 / -1; }
  .history-table__topics { grid-column: 1 / -1; max-width: none; }

  .attempt { grid-template-columns: 28px 1fr; }
  .attempt__meta { grid-column: 2; flex-direction: row; align-items: baseline; gap: var(--space-2); text-align: left; }
}