/* RC Question Set — plan/pages/rc-question-set.html.

   Everything shared (.form-box, .selector-box, .col-label, .tab-bar, .chart-pane*,
   .progress-averages-row, .bookmark-filter-btn, .results-table, .field-select-btn,
   .field-dropdown, .type-info-box and the passage-row family, .info-action-btn,
   .bookmark-toggle-btn) is already in components.css and consumed, not copied. The builder's
   grid and its swap control are new here: nothing else in the codebase has built this control
   yet, though the mockup's own comment notes RC Passages' Progress tab reuses the identical
   one — worth promoting to components.css the day a second page actually needs it, not
   before ("shared things are built once", not "built once in advance"). */

#builderRow {
  display: grid;
  grid-template-columns: 1fr 1.3fr auto 1.3fr auto;
  gap: 30px;
  align-items: start;
}
.check-col { min-height: 20px; }

.dim-swap-col { display: flex; flex-direction: column; }
.dim-swap-btn {
  background: transparent;
  border: 1px solid rgba(241,231,219,0.3);
  border-radius: 3px;
  color: var(--color-accent);
  font-size: 16px;
  line-height: 1;
  padding: 9px 11px;
  cursor: pointer;
  flex-shrink: 0;
}
.dim-swap-btn:hover { background: rgba(255,128,88,0.12); }

.qty-field { flex-shrink: 0; }
select.qty-select {
  background: transparent;
  color: var(--color-text);
  border: 1px solid rgba(241,231,219,0.35);
  border-radius: 2px;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13.5px;
  width: 90px;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  opacity: 0.8;
}
select.qty-select:focus { outline: 1px solid var(--color-accent); }
select.qty-select:disabled { opacity: 0.4; cursor: default; }

.bottom-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.generate-btn {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border: none;
  border-radius: 2px;
  padding: 13px 26px;
  font-variant: small-caps;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.generate-btn:disabled { opacity: 0.4; cursor: default; }
.generate-reason { font-size: 13px; opacity: 0.65; }

.drill-sets-section { margin-top: 48px; }

.drill-sort-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 0 4px 16px; }
.drill-sort-label { font-variant: small-caps; font-size: 12.5px; letter-spacing: 0.03em; opacity: 0.55; }
.drill-sort-row .bookmark-filter-btn { margin-left: auto; }

/* The drill-set row's own expand/collapse, the level-1 wrapper around the shared
   .type-info-box / .passage-row family — the same pattern sections.css keeps for
   .section-row / .section-row-wrap, page-scoped there for the same reason. */
.drill-set-row {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.drill-set-row:hover,
.drill-set-row-wrap.expanded .drill-set-row {
  background: rgba(241,231,219,0.09);
  border-color: rgba(241,231,219,0.22);
}
.drill-set-passages { display: none; margin: -6px 0 16px 18px; }
.drill-set-row-wrap.expanded .drill-set-passages { display: block; }

/* course-progress.css's own local override for the shared .passage-row partial, reused
   verbatim: without it the passage row's bookmark toggle keeps its accent-orange base
   (components.css), which is the wrong category color on an RC-only page. */
.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); }

.type-info-selection {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 2px;
  max-width: 480px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 880px) {
  #builderRow { grid-template-columns: 1fr 1fr; gap: 20px 30px; }
  /* Not in the mockup's own narrow-width rule: its 5-column grid auto-places the swap
     button's "auto" column wherever the 2-column collapse leaves room, which put it beside
     the passage-type field rather than between primary and secondary. Pinned to row 2 so it
     stays between them the way it reads at full width. */
  .dim-swap-col { grid-row: 2; }
}
@media (max-width: 768px) {
  #builderRow { grid-template-columns: 1fr; }
}