/* Shared presentation only: no changes to language tasks or assessment. */
.a11y-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.response-label {
  display: block;
  margin: 0 0 7px;
  color: #334155;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.5;
}
/* Stack the existing audio, persistent label, response and send row.
   A new label must not become an extra column in the old flex form. */
.rp-controls { flex-direction: column; }
button.rp-btn-select { font-family: inherit; line-height: inherit; }
button.rp-btn-select:not(.topic-btn) { box-sizing: content-box; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex="-1"]:focus {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}
@media (forced-colors: active) {
  button:focus-visible, a:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, summary:focus-visible,
  [tabindex="-1"]:focus { outline-color: Highlight; }
  button[aria-pressed="true"] { border: 2px solid ButtonText; }
}
@media (max-width: 540px) {
  /* Keep existing horizontally scrolling activity rows, but allow their
     containing flex items and text controls to shrink with the viewport. */
  .container, .container > div { min-width: 0; }
  .tabs-container, .level-selector, .mode-selector { flex-wrap: wrap; }
  .tab-btn, .level-btn, .mode-btn { white-space: normal; overflow-wrap: anywhere; }
  .checklist-grid { grid-template-columns: minmax(0, 1fr); }
  textarea, select, input { max-width: 100%; box-sizing: border-box; }
  .question-card, .student-response-box, [id^="scoreDisplay"] { overflow-wrap: anywhere; }
}

/* Text from learners/AI retains its line breaks when escaped. */
.error-item, .bubble.st, #fbNative, .safe-study-output { white-space: pre-wrap; overflow-wrap: anywhere; }