/* Match the existing OCT controls and keep the audio entry usable on narrow screens. */
.oct-tabsrow { flex-wrap: wrap; gap: 8px; }
.oct-voice-entry { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.oct-voice-entry svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.oct-voice-status { color: #8a5411; font-size: 13px; max-width: 22em; }
.oct-voice-sources { font-size: 12px; color: var(--oct-text-muted, #526363); text-underline-offset: 3px; }
.oct-voice-entry button { min-height: 44px; }

/* Two courses, one joined control: the foundations guide is the calm outline,
   the advanced course the deep-teal pill; level bars (1 of 3 / 3 of 3) say which is which. */
.oct-audio-pair {
  display: inline-flex; align-items: stretch; padding: 3px; gap: 3px;
  border: 1px solid var(--border, #BFCAC7); border-radius: 12px;
  background: var(--surface-sunken, #F1F4F3); box-shadow: var(--oct-shadow, none);
}
.oct-audio-pair .oct-audio-btn {
  gap: 8px; border-radius: 9px; border: 1px solid transparent; letter-spacing: .005em; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.oct-audio-btn--basic { background: var(--surface, #fff); color: var(--oct-teal-ink, #185A5C); border-color: var(--border-soft, #D2DBD8); }
.oct-audio-btn--basic:hover { background: color-mix(in srgb, var(--oct-teal, #185A5C) 8%, var(--surface, #fff)); border-color: color-mix(in srgb, var(--oct-teal, #185A5C) 35%, transparent); }
.oct-audio-btn--advanced {
  color: var(--oct-on-teal, #fff);
  background: linear-gradient(160deg, var(--oct-teal, #185A5C), var(--oct-teal-deep, #104749));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(16, 71, 73, .25);
}
.oct-audio-btn--advanced:hover { background: linear-gradient(160deg, color-mix(in srgb, var(--oct-teal, #185A5C) 88%, #fff), var(--oct-teal, #185A5C)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 10px rgba(16, 71, 73, .28); }
.oct-audio-btn:focus-visible { outline: 2px solid var(--oct-gold, #B38B3A); outline-offset: 2px; }
.oct-audio-btn:disabled { opacity: .6; cursor: progress; }
.oct-voice-entry .oct-audio-level { width: 13px; height: 11px; flex: 0 0 auto; stroke: none; fill: currentColor; }
.oct-audio-level rect { opacity: .22; }
.oct-audio-level[data-level="1"] rect:first-child { opacity: 1; }
.oct-audio-btn--basic .oct-audio-level { color: var(--oct-gold, #B38B3A); }
.oct-audio-btn--advanced .oct-audio-level { color: var(--oct-gold-ink, #E3C27E); }
.oct-audio-btn--advanced .oct-audio-level rect { opacity: 1; fill: #E3C27E; }
@media (prefers-reduced-motion: reduce) { .oct-audio-pair .oct-audio-btn { transition: none; } }
html.vl-active .oct-sheet__body { padding-block-end: calc(var(--vl-panel-h, 0px) + 24px); }
.oct-study { margin-block-start: 16px; padding: clamp(16px, 2vw, 24px); color: var(--oct-text, #1c3030); text-align: start; }
/* A pinned scan cannot also hold a scrollable MCQ/report. Release its pin only
   while the course card is present; removing the card restores normal behavior. */
.oct-app[data-layout] .oct-stage:has(.oct-study) { position: relative; top: auto; }
.oct-app[data-layout] .oct-col--center:has(.oct-study) { position: static; top: auto; }
.oct-study__eyebrow { color: var(--oct-accent, #195d60); font-size: 12px; margin: 0 0 8px; }
.oct-study h2 { font-size: 19px; line-height: 1.65; margin: 0 0 12px; }
.oct-study p { line-height: 1.85; }
.oct-study__choices { display: grid; gap: 8px; margin-block: 16px; }
.oct-study__choices button { min-height: 48px; white-space: normal; text-align: start; line-height: 1.6; justify-content: flex-start; gap: 12px; }
.oct-study__letter { display: grid; place-items: center; border: 1px solid currentColor; width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; font-weight: 700; }
.oct-study [role="radio"][aria-checked="true"] { border-color: #185d60; box-shadow: inset 0 0 0 1px #185d60; background: #e8f2f1; }
.oct-study__memory { border-inline-start: 3px solid #27776c; padding: 12px 16px; background: #f0f7f4; }
.oct-study [data-result="correct"] { border-color: #26745c; background: #edf7f1; color: #164b39; }
.oct-study [data-result="retry"] { border-color: #a57123; background: #fff8eb; color: #744c0d; }
.oct-study__facts { display: grid; gap: 8px; margin: 16px 0; }
.oct-study__facts div { display: grid; grid-template-columns: minmax(90px, 1fr) 3fr; gap: 12px; padding-block: 8px; border-block-end: 1px solid #dce5e4; }
.oct-study__facts dt { font-weight: 700; }
.oct-study__facts dd { margin: 0; line-height: 1.7; }
.oct-study__report { display: grid; gap: 16px; padding-block-start: 16px; border-block-start: 1px solid #dce5e4; }
.oct-study__report label { display: grid; gap: 8px; line-height: 1.8; }
.oct-study__report label:has([type="checkbox"]) { display: block; }
.oct-study__report textarea { width: 100%; box-sizing: border-box; resize: vertical; padding: 12px; border: 1px solid #a6c1c1; border-radius: 8px; background: var(--oct-surface, #fff); color: inherit; font: inherit; }
.oct-study__report pre { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; font: inherit; padding: 16px; background: #f0f5f4; border-radius: 8px; }
.oct-study-blind #octCasePanel, .oct-study-blind #octNotes,
.oct-study-blind #octCondField, .oct-study-blind #octCaseField,
.oct-study-blind #octStageField { visibility: hidden; pointer-events: none; }
@media (max-width: 767px) {
  /* The MCQ card contains the full task and feedback; keep its controls reachable. */
  .oct-body:has(.oct-study) .vl-panel.is-awaiting .vl-caption { min-height: 0; max-height: 3.4em; }
  .oct-body:has(.oct-study) .vl-panel.is-awaiting .vl-await__text { display: none; }
  .oct-voice-entry { width: 100%; margin: 0; flex-wrap: wrap; }
  .oct-voice-entry button { flex: 1; justify-content: center; }
  .oct-audio-pair { flex: 1 1 100%; }
  .oct-audio-pair .oct-audio-btn { gap: 6px; padding-inline: 8px; white-space: nowrap; min-width: 0; }
  .oct-voice-status { flex-basis: 100%; }
}
/* Short windows need modes and audio beside each other, leaving room for the scan. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 640px) and (max-width: 1023px) {
  .oct-chrome .oct-tabsrow { flex-wrap: nowrap; }
  .oct-chrome .oct-tabs { flex: 1 1 auto; width: auto; }
  .oct-chrome .oct-voice-entry { flex: 0 1 auto; width: auto; margin: 0; }
  .oct-chrome .oct-voice-entry .oct-btn { padding-inline: 10px; font-size: .8125rem; }
}
/* In the desktop command bar the pair sits beside 40px controls: slim the inner buttons. */
@media (min-width: 768px) and (pointer: fine) {
  .oct-chrome .oct-audio-pair .oct-audio-btn { min-height: 34px; padding-inline: 12px; }
}