/* student/work.css

   Mes exercices : groupé par état, en panneaux (voir core/tables.css et
   core/cards.css pour .panel et .row, réutilisés tels quels ici).

   Chargé par index.html, dans l'ordre de css/README.md. Ne pas changer cet
   ordre sans relire la section « Ordre de chargement ». */

/* Les panneaux gardent une largeur de lecture : sur un grand écran, un
   panneau étiré sur 1 200 px mettait le bouton loin du titre. */
.work-sections { max-width: var(--w-lesson); display: grid; gap: var(--s-4); }

/* Partagé avec student/courses.css (courses/reader.js) : un titre de groupe
   discret, et la note qui remplace un bouton indisponible. */

.work-note { font-size: var(--fs-2); color: var(--muted); }

/* ---------- listes groupées, comme l'accueil ---------- */

.work-sections { gap: var(--s-5); }

.group-label {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0 0 var(--s-2);
  padding: 0 var(--s-1);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.group-label span + span { font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.work-row .home-row-title { white-space: normal; }
.work-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.work-go { flex: none; font-size: var(--fs-3); font-weight: 600; color: var(--primary); }
:root:not([data-theme="light"]) .work-go { color: var(--primary-strong); }
.work-score { flex: none; font-size: var(--fs-5); font-weight: 650; font-variant-numeric: tabular-nums; }
.work-row.is-missed .home-row-title { color: var(--muted); }

/* Puces d'état partagées avec le parcours (student/plan.css). */
.plan-dot.is-on { background: var(--green); border-color: var(--green); }
.plan-dot.is-half { border-color: var(--primary); background: linear-gradient(90deg, var(--primary) 50%, transparent 50%); }
.plan-dot.is-missed { border-color: var(--red); border-style: dashed; }

/* ---------- catalogue : recherche et filtres ---------- */

.catalog-tools { max-width: var(--w-lesson); display: flex; flex-direction: column; gap: var(--s-3); margin: 0 0 var(--s-5); }
.catalog-tools .search input { width: 100%; min-width: 0; height: 42px; border-radius: var(--r-md); }

.filter-chips { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filter-chips::-webkit-scrollbar { display: none; }

.filter-chip {
  flex: none;
  height: 34px;
  padding: 0 14px;
  border-radius: 17px;
  border: 1px solid var(--border);
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-3);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.filter-chip:hover { color: var(--text); }
.filter-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
:root:not([data-theme="light"]) .filter-chip.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.filter-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }