/* Sections — plan/pages/sections.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) is already in
   components.css and base.css and is consumed, 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; }

/* select.form-select already carries the shared control treatment; only the page's own
   widths, which components.css leaves to the page, go here. */
#subjectSelect.form-select { width: 210px; }
#prepTestSelect.form-select { width: 175px; }
#sectionSelect.form-select { width: 190px; }
#timeSelect.form-select { width: 110px; }
#customTimeInput.form-select { width: 110px; }
.picker-field .form-select.wide { width: 190px; }

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

.subject-filter-box {
  display: inline-block;
  background: #313d56;
  border: 1px solid rgba(241,231,219,0.12);
  border-radius: 4px;
  padding: 16px 18px;
  margin-bottom: 22px;
}

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

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

/* .toggle-group / .toggle-btn are already in components.css ("the metric toggle some chart
   headers carry"), consumed here rather than copied. Its active state is the sitewide accent
   colour, not the mockup's own blue — a pre-existing divergence from every mockup page that
   carries this control (sections, dashboard, course progress, both drilling pages), not
   something this item introduced or should fork around. Worth a look if Milan wants the
   mockup's own colour; not fixed here, since that would mean changing an already-shipped
   shared component and the dashboard along with it. */

/* .type-info-box and everything under it (the repeating list row, shared by a section's own
   row and an RC passage's nested one), .info-action-btn and .bookmark-toggle-btn are all in
   components.css, consumed here rather than copied — trimmed from this file at stage 5's round
   2 close, once course progress (item 4) had promoted the same stopgap this file carried to the
   shared file it always belonged in. */

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

/* .passage-list-indent, .passage-row-wrap, .passage-row, .passage-questions and the RC recolour
   (this file's own passage nesting) moved to components.css, item 5: preptests reuses
   `sections._passage-row.blade.php` directly for its own third nesting level, and its page
   (preptests.css) never loaded this file, so its passages rendered with no CSS at all — reader
   2's finding. Two pages sharing one partial is exactly "shared things are built once", the same
   move item 4 already made for `.type-info-box`/`.bookmark-toggle-btn`. */

/* Both dropdowns' own options carry the % New tag as plain text — "60% New" — built in
   sections.js from the JSON payload, not styled specially: feature-logic.md's "How much of a
   test is new" is a plain-text tag, not a coloured one, and 100% is simply absent.

   "0% renders dimmed and stays selectable" is the one thing that is styled: an option cannot
   take opacity directly in most browsers, so this dims the text colour instead, which is what
   every browser does render. */
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; }
}