/* Preptests — plan/pages/preptests.html.

   Widths and the repeating list-row treatment are page-specific and sit here; everything else
   (.form-box, .selector-box, .col-label, .tab-bar, .chart-pane*, .progress-averages-row,
   .bookmark-filter-btn, .results-table, select.form-select, .content-column, .type-info-box and
   everything under it, .breadcrumb, .avg-sub-name/.avg-sub-date) is already in components.css
   and base.css and is consumed here, not copied — components.md's rename table. */

.continue-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.continue-detail { font-size: 15px; }

.picker-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 26px;
}
.picker-field { flex-shrink: 0; }
.picker-field .col-label { margin-bottom: 8px; }

#prepTestSelect.form-select { width: 195px; }
#sectionNumSelect.form-select { width: 210px; } /* "4 – With Experimental" is the widest option */
#modeSelect.form-select { width: 110px; }
#timeSelect.form-select { width: 130px; }
#customTimeInput.form-select { width: 110px; }

.bottom-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.preptests-progress-section { margin-top: 48px; }

/* component-library.md, "Chart pane header": "Preptests' version is not a flex row, because
   its header has only one child (the title block; there are no per-chart controls here) —
   making it one moved the chart. Deliberate difference." Scoped to this one chart rather than
   changed sitewide, since the other eight charts' headers do have two children and rely on the
   shared class staying a flex row. */
.chart-pane-single-header .chart-pane-header { display: block; }

/* The two averages cards, 3-then-2 figures, side by side rather than one row of five — the
   plan's own layout. Each card is a plain <x-averages-row>; this only places the two of them. */
.averages-row { display: grid; grid-template-columns: 3fr 2fr; gap: 22px; }
@media (max-width: 720px) { .averages-row { grid-template-columns: 1fr; } }

.list-controls-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 16px;
}

.preptest-row {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.preptest-row:hover,
.preptest-row-wrap.expanded .preptest-row {
  background: rgba(241,231,219,0.09);
  border-color: rgba(241,231,219,0.22);
}
.preptest-sections { display: none; margin: -6px 0 16px; }
.preptest-row-wrap.expanded .preptest-sections { display: block; }
.section-list-indent { margin-left: 18px; }

/* component-library.md: "preptests keeps align-items: center on its figures, because its
   top-level row puts a 19px accuracy figure beside a 13px section breakdown. Load-bearing there
   and nowhere else" — scoped to this page's own row rather than added to the shared
   .type-info-stats, which sections and course progress also use with no such requirement. */
.preptest-row .type-info-stats { align-items: center; }
.type-info-breakdown { font-size: 13px; opacity: 0.7; white-space: nowrap; }
.type-info-score {
  font-variant: small-caps;
  font-size: 19px;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

/* Section rows nested inside an expanded PrepTest row: #4a7fa7, deliberately darker than
   --color-icon-blue-light so this middle nesting level reads as distinct from the RC passage
   rows (teal) a level deeper still. Milan's call — page-specific, not added to
   design-tokens.css, since nothing else on the site nests three levels. */
.prep-section-row-wrap { margin-bottom: 10px; }
.prep-section-row-wrap:last-child { margin-bottom: 0; }
.prep-section-row {
  cursor: pointer;
  border-color: rgba(74,127,167,0.3);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.prep-section-row:hover,
.prep-section-row-wrap.expanded .prep-section-row {
  background: rgba(74,127,167,0.1);
  border-color: rgba(74,127,167,0.4);
}
.prep-section-row .type-info-name { color: #4a7fa7; }
.prep-section-row .info-action-btn { border-color: rgba(74,127,167,0.5); color: #4a7fa7; }
.prep-section-row .info-action-btn:hover { background: rgba(74,127,167,0.12); }
.prep-section-row .bookmark-toggle-btn { border-color: rgba(74,127,167,0.5); color: #4a7fa7; }
.prep-section-row .bookmark-toggle-btn:hover { background: rgba(74,127,167,0.12); }
.prep-section-row .bookmark-toggle-btn.bookmarked { background: rgba(74,127,167,0.18); }
.prep-section-row .bookmark-toggle-btn.bookmarked svg { fill: #4a7fa7; }
.prep-section-questions { display: none; margin: -4px 0 14px; }
.prep-section-row-wrap.expanded .prep-section-questions { display: block; }

/* "0% renders dimmed and stays selectable" — an option cannot take opacity directly in most
   browsers, so this dims the text colour instead, matching sections.css's own rule. */
option.option-dimmed { color: graytext; color: rgba(43,41,49,0.4); }

@media (max-width: 1100px) {
  .picker-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; }
}
@media (max-width: 768px) {
  .picker-row { grid-template-columns: 1fr; }
}