/* RC Passages — plan/pages/rc-passages.html (stage 7 item 6). Everything else the page uses
   (the tab bar, the selector box, the chart pane, the selected-item box, the efficiency matrix,
   the results table and its filter/sort/pagination, the toggle group, the averages row, and
   .form-select for every dropdown here) is already in components.css from item 1 and earlier
   stages — item6-planning.md 2.3's own build note: use x-selector-box behaviour="filter" with
   .form-select controls, matching LR Questions, rather than the mockup's own .picker-select. */

/* One per tab, centred — the same rule lr-questions.css already carries for its own three. */
.intro-text {
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.75;
  max-width: 780px;
  margin: 0 auto 34px;
  text-align: center;
}

/* Snapshot tab's own two-picker row. Must come after .selector-box in source order
   (item6-planning.md 2.3, the mockup's own comment). */
.snapshot-selector-row {
  display: inline-flex;
  align-items: flex-end;
  gap: 20px;
}

.picker-field .col-label {
  margin-bottom: 8px;
}

/* Progress tab's own row: the passage-type picker, the primary field, the swap button, the
   secondary field. */
.progress-selector-row {
  display: inline-flex;
  align-items: flex-end;
  gap: 20px;
}

.progress-field .col-label {
  margin-bottom: 8px;
}

/* The primary/secondary swap control. Not in components.css: rc-question-set.css carries the
   identical rule for its own control of the same name, page-local rather than shared
   (item6-planning.md 2.7 — checked against components.css before writing this). */
.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);
}

/* The Passages tab's own summary box: "Filtered to <a>Clear</a>" once a filter is applied. */
.clear-link {
  color: var(--color-accent);
  text-decoration: none;
  cursor: pointer;
  margin-left: 8px;
}

.clear-link:hover {
  text-decoration: underline;
}

.passages-box {
  padding: 0;
  overflow: hidden;
}

/* The mockup keeps .table-pagination inside the same card as the table, giving it a border-top
   separator instead of the shared component's own default margin-top gap — the same precedent
   lr-questions.css's own .questions-box override set for x-pagination's first use. */
.passages-box .table-pagination {
  margin-top: 0;
  padding: 14px 16px;
  border-top: 1px solid rgba(241, 231, 219, 0.12);
}

/* The Drill button's own error message, the same treatment every drilling and analytics page
   gives it (lr-question-set.css, rc-question-set.css, lr-questions.css). */
.drill-reason {
  margin-top: 12px;
  font-size: 12.5px;
  opacity: 0.6;
  min-height: 1em;
}