/* CompetenceRow: one card per theme (sunken header, tri-state box, count, chevron), one row per competence. */
.competence-grid { display: flex; flex-direction: column; gap: var(--space-4); }

.competence-theme {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  scroll-margin-top: var(--space-4);
}
.competence-theme__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--surface-sunken);
}
.competence-theme__check, .competence-theme__check form { display: flex; }
/* The box is 24px; the label around it is the 48px target, without moving the box. */
.competence-theme__hit { display: flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; margin: 0 -12px; cursor: pointer; }
.competence-theme__toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.competence-theme__name { flex: 1; font-size: 20px; line-height: 26px; font-weight: 800; }
.competence-theme__count { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); white-space: nowrap; }
.competence-theme__chevron {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: var(--ink-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform var(--transition);
}
.competence-theme__toggle[aria-expanded="true"] .competence-theme__chevron { transform: rotate(90deg); }

.competence-check { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--brand); cursor: pointer; }

.competence-row {
  display: grid;
  grid-template-columns: 24px 1fr 130px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
  border-top: 1px solid var(--line);
  transition: opacity var(--transition);
}
.competence-row--stats { grid-template-columns: 24px 1fr 110px 140px 120px; }
/* An unchecked row is at 55 %, as soon as the box is clicked. */
.competence-row:has(.competence-check:not(:checked)) { opacity: 0.55; }
.competence-row__text { display: flex; flex-direction: column; cursor: pointer; min-width: 0; }
.competence-row__name { font-size: 16px; line-height: 24px; font-weight: 600; }
.competence-row__example { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.competence-row__example .num { color: var(--ink); }

.level-tag {
  justify-self: start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  white-space: nowrap;
}
.level-tag--current { background: var(--brand-soft); color: var(--brand); }
.level-tag--upcoming { background: transparent; border: 1px solid var(--line); }

/* À venir rows (§4.3): folded at the bottom of the theme, « CM1 et après ». */
.competence-upcoming { border-top: 1px solid var(--line); }
.competence-upcoming__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-8);
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-muted);
}
.competence-upcoming__summary::-webkit-details-marker { display: none; }
.competence-upcoming__name { flex: 1; }
.competence-upcoming__count { font-size: 14px; font-weight: 500; }
.competence-upcoming__chevron { width: 18px; height: 18px; flex: none; stroke: var(--ink-muted); fill: none; stroke-width: 2; stroke-linecap: round; transition: transform var(--transition); }
.competence-upcoming[open] .competence-upcoming__chevron { transform: rotate(90deg); }

/* Consolidation (§12.4): the rows of the year and above sleep, greyed. */
.competence-row--paused, .competence-row--paused:has(.competence-check:not(:checked)) { opacity: 0.45; }
.competence-row__pause { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ink-muted); font-style: italic; }

/* Success (parent dashboard): the dot always comes with the figures. */
.competence-success { display: inline-flex; align-items: center; gap: var(--space-2); }
.competence-success__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.competence-success--high .competence-success__dot { background: var(--success); }
.competence-success--mid .competence-success__dot { background: var(--star); }
.competence-success--low .competence-success__dot { background: var(--danger); }
.competence-success--none, .competence-success--muted { color: var(--ink-muted); }
.competence-success--muted .competence-success__dot { background: var(--line-strong); }

@media (max-width: 640px) {
  .competence-row, .competence-row--stats {
    grid-template-columns: 24px 1fr;
    padding-left: var(--space-4);
    row-gap: var(--space-1);
  }
  .competence-row .level-tag, .competence-row .competence-success { grid-column: 2; }
  .competence-theme__name { font-size: 18px; }
}