/* Course Progress — plan/pages/course-progress.html.

   The repeating row card (.type-info-box and everything under it), the bookmark toggle
   (.bookmark-toggle-btn) and the results table are shared and sit in components.css,
   consumed rather than copied. So are .form-box, .selector-box (this page's own Level filter
   is <x-selector-box behaviour="filter">, per component-library.md's own instruction for
   course progress), .tab-bar/.tab-panel, .chart-pane*, .progress-averages-row,
   .bookmark-filter-btn, .col-sort-btn/.col-filter-btn, the pagination bar and .content-column
   — components.md's rename table. Only this page's own row-wrapper names and layout widths
   are here. */

.level-select { width: 200px; }
.selector-box noscript button { margin-left: 10px; }

.list-controls-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 16px;
}
.exercise-sort-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; align-self: stretch; }
.exercise-sort-label { font-variant: small-caps; font-size: 12.5px; letter-spacing: 0.03em; opacity: 0.55; }

/* ---- top-level exercise row — expands in place, dispatching to either the standard LR
   question table or the RC nested passage list, depending on that row's own shape. ---- */
.exercise-set-row {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.exercise-set-row:hover {
  background: rgba(241,231,219,0.09);
  border-color: rgba(241,231,219,0.22);
}
.exercise-set-row-wrap.expanded .exercise-set-row {
  background: rgba(241,231,219,0.09);
  border-color: rgba(241,231,219,0.22);
}
.exercise-questions { display: none; margin: -6px 0 16px; }
.exercise-set-row-wrap.expanded .exercise-questions { display: block; }
.passage-list-indent { margin-left: 18px; }

/* ---- passage rows (RC only), nested one level inside an expanded exercise — recoloured to
   RC's own category colour, no date, "Time" instead of "Avg. Time" since it's one passage's
   own total. ---- */
.passage-row-wrap { margin-bottom: 10px; }
.passage-row-wrap:last-child { margin-bottom: 0; }
.passage-row {
  cursor: pointer;
  border-color: rgba(95,174,158,0.3);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.passage-row:hover,
.passage-row-wrap.expanded .passage-row {
  background: rgba(95,174,158,0.1);
  border-color: rgba(95,174,158,0.4);
}
.passage-row .type-info-name { color: var(--color-category-rc); }
.passage-row .bookmark-toggle-btn { border-color: rgba(95,174,158,0.4); color: var(--color-category-rc); }
.passage-row .bookmark-toggle-btn:hover { background: rgba(95,174,158,0.12); }
.passage-row .bookmark-toggle-btn.bookmarked { background: rgba(95,174,158,0.18); }
.passage-row .bookmark-toggle-btn.bookmarked svg { fill: var(--color-category-rc); }
.passage-questions { display: none; margin: -4px 0 14px; }
.passage-row-wrap.expanded .passage-questions { display: block; }

@media (max-width: 768px) {
  .level-select { width: 100%; }
}