/* Exercise runner */
.exercise { max-width: 46rem; }
.exercise-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between;
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-5);
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
}
@media (max-width: 959px) { .exercise-toolbar { top: 61px; } }
.exercise-toolbar .cluster { gap: var(--space-2); }
.exercise-title { font-family: var(--font-serif); font-weight: 600; font-size: var(--step-0); margin: 0; }

.step-progress { margin-bottom: var(--space-5); }
.step-progress p { margin: 0 0 var(--space-2); color: var(--ink-soft); font-size: var(--step--1); }
.step-progress progress { width: 100%; height: 6px; appearance: none; border: 0; border-radius: 3px; background: var(--rule); overflow: hidden; display: block; }
.step-progress progress::-webkit-progress-bar { background: var(--rule); }
.step-progress progress::-webkit-progress-value { background: var(--teal); transition: width var(--motion); }
.step-progress progress::-moz-progress-bar { background: var(--teal); }

.step h2 { margin-top: 0; font-size: var(--step-3); font-weight: 500; }
.step-body p { font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.6; }
.step-examples ul { padding-left: var(--space-5); }

.step-nav {
  display: flex; justify-content: space-between; gap: var(--space-3);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-4); margin-top: var(--space-6);
}

.repeater-entry, .compare-entry {
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-4);
  background: var(--surface);
}
.repeater-entry legend, .compare-entry legend {
  font-family: var(--font-serif); font-weight: 600; font-size: var(--step-1);
  padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2));
}
.repeater-entry .field:last-of-type, .compare-entry .field:last-of-type { margin-bottom: var(--space-3); }

.list-items { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: var(--space-2); max-width: var(--measure); }
.list-items li { display: flex; gap: var(--space-2); margin: 0; }
.list-items li input { flex: 1; }

.classify-item { border: 1px solid var(--rule); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); background: var(--surface); }
.classify-item legend { font-weight: 650; padding: 0 var(--space-1); }
.classify-item .option-list { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.classify-feedback { margin: var(--space-2) 0 0; font-size: var(--step--1); display: flex; gap: var(--space-2); align-items: flex-start; }
.classify-feedback[data-correct="true"] { color: var(--ok); }
.classify-feedback[data-correct="false"] { color: var(--draft-ink); }

/* Skill practice */
.skill-card { border: 1px solid var(--rule); border-radius: var(--radius-l); background: var(--surface); padding: var(--space-5); margin-bottom: var(--space-5); }
.skill-card h3 { margin-top: 0; }
.skill-steps { padding-left: var(--space-5); }
.skill-steps li { font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.5; margin-bottom: var(--space-2); }
.timer { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
.timer-readout { font-variant-numeric: tabular-nums; font-size: var(--step-2); font-family: var(--font-serif); min-width: 4.5ch; }
.pacer { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.pacer-circle {
  width: 72px; height: 72px; border-radius: 50%;
  border: 2px solid var(--teal); background: var(--teal-wash);
  transform: scale(0.7);
  transition: transform var(--pacer-duration, 4s) ease-in-out;
}
.pacer[data-phase="in"] .pacer-circle { transform: scale(1); }
.pacer[data-phase="out"] .pacer-circle { transform: scale(0.7); }
.pacer-cue { font-family: var(--font-serif); font-size: var(--step-2); }
:root[data-motion="reduced"] .pacer-circle { transition: none; }
@media (prefers-reduced-motion: reduce) { .pacer-circle { transition: none; } }

/* Overlays within the exercise (pause, discomfort) */
.exercise-overlay { border: 2px solid var(--rule-strong); border-radius: var(--radius-l); padding: var(--space-5); background: var(--surface); margin-bottom: var(--space-5); }
.exercise-overlay h2 { margin-top: 0; }

/* Results */
.results-section { border-top: 1px solid var(--rule); padding-top: var(--space-4); margin-top: var(--space-5); }
.results-section h2 { margin-top: 0; font-size: var(--step-1); }
.response-list { display: grid; gap: var(--space-3); max-width: var(--measure); }
.response-item { margin: 0; }
.response-item dt { font-size: var(--step--1); color: var(--ink-soft); }
.response-item dd { margin: 0; font-family: var(--font-serif); font-size: var(--step-1); white-space: pre-wrap; }
.meaning-grid { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .meaning-grid { grid-template-columns: 1fr 1fr; } }
.meaning-grid h3 { margin-top: 0; font-size: var(--step-0); font-family: var(--font-sans); }

/* Detail page */
.detail-header .summary { font-family: var(--font-serif); font-size: var(--step-1); color: var(--ink-soft); }
.detail-section { margin-top: var(--space-6); }
.detail-section > h2 { margin-top: 0; padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.evidence-item { border-left: 3px solid var(--rule-strong); padding-left: var(--space-4); margin-bottom: var(--space-4); max-width: var(--measure); }
.evidence-item h4 { margin-bottom: var(--space-1); }
.evidence-item p { margin-bottom: var(--space-2); }
.start-panel { position: relative; }
.mechanism-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.mechanism-list li { margin: 0; }

.compare-table th[scope="row"] { width: 12rem; }
.plan-output { white-space: pre-wrap; font-family: var(--font-serif); }

/* On narrow screens the top bar already carries the support button */
@media (max-width: 959px) { .exercise-toolbar .btn-support { display: none; } }