/* The RQ4 lookup study (capstone WP4, D22): the consent dialog and the study banner.
   Expires with the study (2027-02-01): removed together with public/js/study/. */

.rq4-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-accent-bg);
  color: var(--color-accent-ink);
  font-size: 0.9rem;
}
.rq4-banner-text { margin: 0; }
.rq4-banner-button { flex: 0 0 auto; }
.rq4-banner-error {
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-error-bg);
  color: var(--color-error-ink);
  border-radius: var(--radius-sm);
}

.rq4-dialog { align-items: flex-start; overflow-y: auto; }
.rq4-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: min(46rem, 100%);
  max-width: min(46rem, 100%); /* .modal caps its width at 400px; this dialog carries a whole information sheet */
  max-height: none;
  margin: var(--space-md) auto;
  padding: var(--space-md);
}
.rq4-title { margin: 0; }
.rq4-participant { margin: 0; }
.rq4-sheet {
  max-height: 16rem;
  overflow-y: auto;
  padding: var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}
.rq4-sheet h3, .rq4-sheet h4 { margin: var(--space-sm) 0 var(--space-xs); }
.rq4-sheet p, .rq4-sheet li { margin: 0 0 var(--space-xs); }
.rq4-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.rq4-form p { margin: 0; }
.rq4-statements { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
ol.rq4-statements { padding-left: var(--space-md); }
.rq4-legend { font-weight: 600; padding: 0; margin-bottom: var(--space-xs); }
.rq4-statement { display: flex; gap: var(--space-sm); align-items: flex-start; }
.rq4-statement input[type="checkbox"] { flex: 0 0 auto; margin-top: 0.25rem; width: 1.15rem; height: 1.15rem; }
.rq4-statement-number { font-weight: 600; }
.rq4-error {
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-error-bg);
  color: var(--color-error-ink);
  border-radius: var(--radius-sm);
}
.rq4-version, .rq4-withdraw { color: var(--text-muted); font-size: 0.9rem; }
.rq4-actions { display: flex; gap: var(--space-sm); justify-content: flex-end; flex-wrap: wrap; }

/* The global .btn-accent is white on --accent: 5.76:1 on the light theme's brown but 2.57:1 on the dark theme's tan (measured). The
   consent dialog's one primary action takes dark text on the tan in the dark theme (6:1) and keeps white on the brown in the light one. */
.rq4-actions .btn-accent { color: var(--text-on-light); }
:root[data-theme="light"] .rq4-actions .btn-accent { color: var(--color-white); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .rq4-actions .btn-accent { color: var(--color-white); }
}

/* The rating strip under a lookup result (C2a). It sits in its own slot beneath the result card, outside the card's live region. */
.scan-lookup-study:empty { display: none; }
.rq4-strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}
.rq4-strip-title { margin: 0; }
.rq4-strip-note, .rq4-strip-status { margin: 0; color: var(--text-muted); }
.rq4-strip-group, .rq4-strip-comment { display: flex; flex-direction: column; gap: var(--space-xs); }
.rq4-strip-question { margin: 0; font-weight: 600; }
.rq4-strip-options { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.rq4-strip-option {
  min-width: 2.75rem;
  min-height: 2.75rem; /* 44px touch target */
  padding: 0 var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* Selected is an outline AND aria-checked, never colour alone; the gate's accent pair, 5.03:1 on both themes. */
.rq4-strip-option[aria-checked="true"] {
  background: var(--color-accent-bg);
  color: var(--color-accent-ink);
  outline: 2px solid var(--color-accent-ink);
  outline-offset: 1px;
}
.rq4-strip-option[aria-disabled="true"], .rq4-strip[aria-disabled="true"] .rq4-strip-input { opacity: 0.6; cursor: not-allowed; }
.rq4-strip-input {
  min-height: 2.75rem;
  padding: 0 var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: inherit;
  font: inherit;
}
.rq4-strip-counter { color: var(--text-muted); font-size: 0.85rem; }
.rq4-strip-retry { align-self: flex-start; }
/* C2b: the label-photo control, a quiet block under the comment */
.rq4-strip-photo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.rq4-strip-hint, .rq4-strip-photo-status { margin: 0; color: var(--text-muted); }
.rq4-strip-photo-button { min-height: 2.75rem; }
.rq4-strip-photo-button[aria-busy="true"] { opacity: 0.6; cursor: progress; }