/* SAB v5.12: Practice (SAB Student Look 14a–14c). The same questions as the
   real test in the student look: a top bar with the subject strip and the
   question dots, the question card with Check answer, and Ask Buddy at 400px.
   Reading adds the passage as a third column. Below 1180px Buddy becomes a
   side sheet. Values follow the handoff. The student look styles every button
   in main, so the buttons here are scoped to outrank it. */
body[data-surface='practice'] .site-header { display: none; }
body[data-surface='practice'] #content { max-width: none; }
body[data-surface='practice'] main { font-size: 16px; }

/* The page scrolls the question; the top bar, the passage and Buddy stay in view. */
.practice-screen { --practice-bar: 80px; --practice-gap: 28px; min-height: 100dvh; display: flex; flex-direction: column; background: #faf6ef; border-top: 6px solid var(--subject, #7a3550); color: #1b2a24; }

/* Top bar. */
.practice-bar { position: sticky; top: 0; z-index: 5; flex: none; box-sizing: border-box; height: var(--practice-bar); display: flex; align-items: center; gap: 20px; padding: 0 28px; background: #fffefb; border-bottom: 1px solid #e3ded2; }
.practice-bar > img { flex: none; display: block; width: 24px; height: 24px; }
.practice-title { display: grid; gap: 2px; }
.practice-title span { font-size: 13px; font-weight: 600; color: var(--subject-ink, #7a3550); white-space: nowrap; }
.practice-title strong { font-size: 18px; font-weight: 700; white-space: nowrap; }
.practice-pill { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--subject-tint, #f8e6ec); color: var(--subject-ink, #7a3550); font-size: 14px; font-weight: 600; white-space: nowrap; }
.practice-dots { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 5px; }
body[data-look='student'] .practice-screen .practice-dot { flex: none; box-sizing: border-box; width: 12px; height: 12px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: #ece6dc; }
body[data-look='student'] .practice-screen .practice-dot--right { background: #1f7a6d; }
body[data-look='student'] .practice-screen .practice-dot--wrong { background: #c0573e; }
body[data-look='student'] .practice-screen .practice-dot[aria-current='step'] { background: #fffefb; border: 2px solid var(--subject, #7a3550); }
body[data-look='student'] .practice-screen .practice-dot--right[aria-current='step'] { background: #1f7a6d; box-shadow: 0 0 0 2px #fffefb, 0 0 0 4px #1f7a6d; border: 0; }
body[data-look='student'] .practice-screen .practice-dot--wrong[aria-current='step'] { background: #c0573e; box-shadow: 0 0 0 2px #fffefb, 0 0 0 4px #c0573e; border: 0; }
body[data-look='student'] .practice-screen .practice-dots-end { flex: none; min-height: 0; padding: 0 2px; border: 0; background: transparent; color: #646e69; font-size: 13px; font-weight: 500; }
body[data-look='student'] .practice-screen .practice-exit { flex: none; min-height: 0; padding: 9px 16px; border: 1px solid #d6d0c4; border-radius: 999px; background: transparent; font-size: 15px; font-weight: 500; }

/* Body: question card and Buddy; with a passage, the passage first. */
.practice-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; gap: 24px; padding: var(--practice-gap); }
.practice-body--passage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 400px; }
.practice-main { min-width: 0; }
.practice-passage, .practice-buddy-slot { position: sticky; top: calc(var(--practice-bar) + var(--practice-gap)); height: calc(100dvh - var(--practice-bar) - 2 * var(--practice-gap)); }
.practice-passage { box-sizing: border-box; overflow: auto; padding: 26px 30px 32px; border: 1px solid #e3ded2; border-radius: 20px; background: #fffefb; }
.practice-passage .reading-passage { font-size: 16px; line-height: 1.8; color: #2a3833; }

.practice-card { display: flex; flex-direction: column; gap: 20px; padding: 30px 34px; border: 1px solid #e3ded2; border-radius: 20px; background: #fffefb; box-shadow: 0 4px 0 #e3ded2; }
.practice-part { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 20px; }
.practice-part + .practice-part { padding-top: 24px; border-top: 1px solid #efebe1; }
.practice-stem { display: flex; flex-direction: column; gap: 10px; }
.practice-stem .question-stem-stimulus, .practice-stem .question-stem-stimulus p { font-size: 18px; line-height: 1.6; }
.practice-stem .question-stem-stimulus p { margin: 0 0 10px; }
.practice-stem .question-stem-stimulus p:last-child { margin-bottom: 0; }
.practice-stem h2 { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.5; text-wrap: pretty; }

.practice-options { display: flex; flex-direction: column; gap: 10px; }
.practice-option { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 2px solid #e3ded2; border-radius: 14px; background: #fffefb; cursor: pointer; }
.practice-option:hover { border-color: #cfc8ba; }
.practice-option:has(input:focus-visible) { outline: 3px solid #3a5fa8; outline-offset: 2px; }
.practice-radio { flex: none; box-sizing: border-box; width: 22px; height: 22px; border: 2px solid #b9b2a4; border-radius: 50%; background: #fffefb; }
.practice-letter { flex: none; width: 16px; color: #646e69; font-size: 15px; font-weight: 600; }
.practice-option-text { flex: 1; min-width: 0; color: #1b2a24; font-size: 18px; font-weight: 500; line-height: 1.45; }
.practice-option small { flex: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.practice-option.is-picked { border-color: #7a3550; background: #f8e6ec; }
.practice-option.is-picked .practice-radio { border: 6px solid #7a3550; }
/* Checked: the answer is locked, so nothing invites a click. */
.practice-part:disabled .practice-option { cursor: default; }
.practice-part:disabled .practice-option:hover { border-color: #efebe1; }
.practice-option.is-other { border-color: #efebe1; }
.practice-option.is-other .practice-option-text { color: #646e69; }
.practice-option.is-wrong, .practice-part:disabled .practice-option.is-wrong:hover { border-color: #c0573e; background: #fbebe6; }
.practice-option.is-wrong .practice-radio { border: 6px solid #c0573e; }
.practice-option.is-wrong small { color: #9a3a24; }
.practice-option.is-right, .practice-part:disabled .practice-option.is-right:hover { border-color: #1f7a6d; background: #dff0ec; }
.practice-option.is-right .practice-radio { border: 6px solid #1f7a6d; }
.practice-option.is-right small { color: #14574e; }

/* Questions answered in place, as in the test: the word-choice cloze has a
   drop-down in each gap of its passage, the sentence bank places a sentence
   in each gap, and "Which extract…" has a drop-down for each part. Checked,
   each answer is locked and marked, and its solution follows. Review shows
   them marked in the same way, so these rules serve both screens. */
.practice-gaps { display: flex; flex-direction: column; gap: 18px; }
.practice-gaps-instruction { margin: 0; color: #3d4844; font-size: 16px; line-height: 1.55; }
.practice-gaps-title { margin: 4px 0 0; font-size: 21px; font-weight: 700; line-height: 1.35; text-align: center; text-wrap: balance; }
.practice-cloze .reading-cloze-passage { color: #1b2a24; font-size: 18px; line-height: 48px; }
.practice-cloze p { margin: 0; font-size: 18px; line-height: 48px; }
.practice-gap { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; white-space: nowrap; vertical-align: middle; line-height: normal; }
.practice-gap-number { color: #646e69; font-size: 15px; font-weight: 600; }
.practice-gap-mark { font-size: 17px; font-weight: 700; }
.practice-gap.is-right .practice-gap-mark { color: #1f7a6d; }
.practice-gap.is-wrong .practice-gap-mark { color: #c0573e; }
/* Sized to its answer, so a long one such as "second nature" is never cut off. */
:is(.practice-screen, .review-screen) .practice-gap .reading-dropdown { width: auto; min-width: 150px; max-width: 100%; height: 40px; margin: 0; }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-gap .reading-dropdown > button { gap: 8px; min-height: 0; padding: 0 12px; border: 2px solid #d6d0c4; border-radius: 10px; background: #fffefb; color: #646e69; font-size: 16px; font-weight: 600; white-space: nowrap; }
:is(.practice-screen, .review-screen) .practice-gap .reading-dropdown > button span:first-child { color: #1b2a24; }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-gap .reading-dropdown > button:hover:not(:disabled) { border-color: #b9b2a4; }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-gap.is-picked .reading-dropdown > button { border-color: var(--subject, #7a3550); background: var(--subject-tint, #f8e6ec); }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-gap.is-right .reading-dropdown > button { border-color: #1f7a6d; background: #dff0ec; opacity: 1; cursor: default; }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-gap.is-wrong .reading-dropdown > button { border-color: #c0573e; background: #fbebe6; opacity: 1; cursor: default; }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-gap .reading-dropdown--open > button { border-color: var(--subject, #7a3550); box-shadow: 0 0 0 3px var(--subject-tint, #f8e6ec); }
:is(.practice-screen, .review-screen) .practice-gap .reading-dropdown-list { top: 46px; min-width: 100%; padding: 6px; border: 1px solid #e3ded2; border-radius: 12px; background: #fffefb; box-shadow: 0 8px 24px #1b2a2426; }
:is(.practice-screen, .review-screen) .practice-gap .reading-dropdown-list--up { top: auto; bottom: 46px; }
:is(.practice-screen, .review-screen) .practice-gap .reading-dropdown-list [role=option] { min-height: 0; padding: 9px 12px; border: 0; border-radius: 8px; color: #1b2a24; font-size: 16px; font-weight: 500; }
:is(.practice-screen, .review-screen) .practice-gap .reading-dropdown-list [role=option][aria-selected='true'] { font-weight: 700; }
:is(.practice-screen, .review-screen) .practice-gap .reading-dropdown-list [role=option].active { background: var(--subject-tint, #f8e6ec); color: #1b2a24; outline: 0; }

.practice-sentence-bank { display: flex; flex-direction: column; gap: 18px; }
.practice-sentence-bank .sentence-bank-list { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #f3efe8; }
.practice-sentence-bank .sentence-bank-list:empty { display: none; }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-sentence-bank .sentence-choice { box-sizing: border-box; width: 100%; min-height: 0; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border: 2px solid #e3ded2; border-radius: 12px; background: #fffefb; color: #1b2a24; font-size: 16px; font-weight: 500; line-height: 1.5; text-align: left; white-space: normal; cursor: pointer; }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-sentence-bank button.sentence-choice:hover:not(:disabled) { border-color: #cfc8ba; }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-sentence-bank .sentence-choice--selected { border-color: var(--subject, #7a3550); background: var(--subject-tint, #f8e6ec); }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-sentence-bank button.sentence-choice:disabled { opacity: 1; color: #646e69; cursor: default; }
.practice-sentence-bank .sentence-letter { flex: none; width: 16px; color: #646e69; font-size: 15px; font-weight: 600; line-height: 24px; }
.practice-sentence-bank .sentence-text { flex: 1; min-width: 0; }
/* A placed sentence keeps its place in the bank, faded and tagged with its gap, so nothing below it moves. */
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-sentence-bank .sentence-choice--placed:not(.sentence-choice--selected) { border-style: dashed; background: transparent; color: #8a918d; }
.practice-sentence-bank .sentence-choice--placed:not(.sentence-choice--selected) .sentence-letter { color: #a3a9a5; }
.practice-sentence-bank .sentence-placed-gap { flex: none; align-self: center; padding: 2px 10px; border-radius: 999px; background: #ebe6dc; color: #3d4844; font-size: 13px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.practice-sentence-bank .sentence-gap-list { display: flex; flex-direction: column; gap: 10px; }
.practice-sentence-bank .sentence-gap-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; }
.practice-sentence-bank .sentence-gap-label { color: #3d4844; font-size: 16px; font-weight: 700; }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-sentence-bank .sentence-gap-target { box-sizing: border-box; width: 100%; min-height: 60px; display: block; padding: 4px; border: 2px solid #ddd7cb; border-radius: 14px; background: #faf8f3; text-align: left; white-space: normal; cursor: pointer; }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-sentence-bank .sentence-gap-target:hover:not(:disabled) { border-color: var(--subject, #7a3550); }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-sentence-bank .sentence-gap-target:not(.sentence-gap-target--empty) { border-style: solid; border-color: #e3ded2; background: #fffefb; }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-sentence-bank .sentence-gap-target .sentence-choice { border: 0; padding: 8px 12px; background: transparent; }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-sentence-bank .sentence-gap-target .sentence-choice--selected { background: var(--subject-tint, #f8e6ec); }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-sentence-bank .sentence-gap-target:disabled { opacity: 1; cursor: default; }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-sentence-bank .sentence-gap-row--right .sentence-gap-target { border: 2px solid #1f7a6d; background: #dff0ec; }
:is(body[data-look='student'] .practice-screen, .review-screen) .practice-sentence-bank .sentence-gap-row--wrong .sentence-gap-target { border: 2px solid #c0573e; background: #fbebe6; }
.practice-sentence-bank .sentence-gap-row--right .sentence-gap-label { color: #14574e; }
.practice-sentence-bank .sentence-gap-row--wrong .sentence-gap-label { color: #9a3a24; }
.practice-theme { display: flex; flex-direction: column; gap: 10px; }
.practice-theme-lead { margin: 0; color: #1b2a24; font-size: 17px; font-weight: 700; }
.practice-theme-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border: 2px solid #e3ded2; border-radius: 12px; background: #fffefb; }
.practice-theme-row.is-right { border-color: #1f7a6d; }
.practice-theme-row.is-wrong { border-color: #c0573e; }
.practice-theme-number { color: #646e69; font-size: 15px; font-weight: 600; }
.practice-theme-prompt { color: #1b2a24; font-size: 16px; line-height: 1.5; }
.practice-theme-row .practice-gap { margin: 0; }
:is(.practice-screen, .review-screen) .practice-theme-row .practice-gap .reading-dropdown { min-width: 124px; }

/* The worked solution, right answer first. */
.practice-solution { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 16px; }
.practice-solution.is-wrong { background: #fbebe6; }
.practice-solution.is-right { background: #dff0ec; }
.practice-solution h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; }
.practice-solution.is-wrong h3 { color: #9a3a24; }
.practice-solution.is-right h3 { color: #14574e; }
.practice-solution .question-text-renderer { color: #1b2a24; font-size: 16px; line-height: 1.6; }
.practice-solution .question-text-renderer p { margin: 0 0 8px; }
.practice-solution .question-text-renderer p:last-child { margin-bottom: 0; }
body[data-look='student'] .practice-screen .practice-solution-more { align-self: flex-start; min-height: 0; padding: 0; border: 0; background: transparent; color: #7a3550; font-size: 15px; font-weight: 500; }
.practice-solution .worked-reason--other { padding-top: 8px; border-top: 1px solid #1b2a2414; }

/* Actions: Flag on the left; Skip and Check answer, or Next question, on the right. */
.practice-actions { display: flex; align-items: center; gap: 12px; }
.practice-actions-gap { flex: 1; }
body[data-look='student'] .practice-screen .practice-flag { min-height: 0; padding: 8px 0; border: 0; background: transparent; color: #3d4844; font-size: 15px; font-weight: 500; }
body[data-look='student'] .practice-screen .practice-flag[aria-pressed='true'] { color: #7a3550; }
body[data-look='student'] .practice-screen .practice-skip { min-height: 0; padding: 13px 20px; border: 1px solid #d6d0c4; border-radius: 14px; background: #fffefb; font-size: 16px; font-weight: 500; }
body[data-look='student'] .practice-screen .practice-actions .primary { padding: 14px 26px; font-size: 17px; }
.practice-card > .form-error { margin: 0; }

/* Writing has no Check step: the task and the response. */
.practice-writing { display: flex; flex-direction: column; gap: 14px; }
.practice-writing h2 { margin: 0; font-size: 19px; font-weight: 600; }
.practice-writing-task { margin: 0; padding: 16px 18px; border-radius: 14px; background: #f3efe8; font-size: 17px; line-height: 1.6; white-space: pre-wrap; }
.practice-writing textarea { box-sizing: border-box; width: 100%; min-height: 360px; padding: 16px 18px; border: 2px solid #e3ded2; border-radius: 14px; background: #fffefb; color: #1b2a24; font: inherit; font-size: 17px; line-height: 1.7; resize: vertical; }
.practice-writing textarea:focus { outline: none; border-color: #7a3550; }
.practice-word-count { margin: 0; color: #646e69; font-size: 14px; text-align: right; }

/* Ask Buddy: bubbles, chips by step, and the composer at the bottom. */
.practice-buddy-slot { display: flex; }
.practice-buddy { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e3ded2; border-top: 3px solid #7a3550; border-radius: 20px; background: #fffefb; }
.practice-buddy > header { flex: none; display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #e3ded2; }
.practice-buddy > header > div { flex: 1; min-width: 0; }
.practice-buddy h2 { margin: 0; font-size: 18px; font-weight: 600; }
.practice-buddy header p { margin: 0; color: #3d4844; font-size: 13px; }
.practice-buddy .usage-counter { margin-left: 0; padding: 6px 11px; color: #3d4844; font-size: 13px; font-weight: 500; }
body[data-look='student'] .practice-screen .practice-buddy-close { display: none; flex: none; width: 36px; min-height: 36px; padding: 0; border: 1px solid #e3ded2; border-radius: 50%; background: #fffefb; font-size: 20px; font-weight: 400; line-height: 1; }
.practice-buddy-thread { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; }
/* Messages sit at the bottom of an unfilled panel, as a chat does. */
.practice-buddy-thread > :first-child { margin-top: auto; }
.practice-exchange { display: flex; flex-direction: column; gap: 12px; }
.practice-learner { align-self: flex-end; max-width: 300px; margin: 0; padding: 11px 15px; border-radius: 18px 18px 4px 18px; background: #7a3550; color: #fffefb; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.practice-reply { align-self: flex-start; max-width: 330px; margin: 0; padding: 11px 15px; border-radius: 18px 18px 18px 4px; background: #f3efe8; color: #1b2a24; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.practice-reply--pending { color: #646e69; font-style: italic; }
.practice-buddy-intro { margin: 0; color: #3d4844; font-size: 15px; line-height: 1.5; }
.practice-buddy-thread .iclass-card { flex: none; }
.practice-buddy-composer { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 0 20px 18px; }
.practice-buddy-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-look='student'] .practice-screen .practice-buddy-chips button { min-height: 0; padding: 8px 13px; border: 1px solid #d6d0c4; border-radius: 999px; background: #fffefb; font-size: 14px; font-weight: 500; }
.practice-buddy-composer form { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 16px; border: 1px solid #e3ded2; border-radius: 14px; background: #faf8f3; }
.practice-buddy-composer form:focus-within { border-color: #7a3550; }
.practice-buddy-composer input { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; color: #1b2a24; font-size: 15px; }
.practice-buddy-composer input:focus-visible { outline: none; }
body[data-look='student'] .practice-screen .practice-buddy-composer .primary { width: 40px; min-height: 40px; padding: 0; border-radius: 10px; background: transparent; color: #7a3550; font-size: 20px; box-shadow: none; }
body[data-look='student'] .practice-screen .practice-buddy-composer .primary:hover:not(:disabled) { background: #f8e6ec; }
body[data-look='student'] .practice-screen .practice-buddy-composer .primary:disabled { background: transparent; color: #c9c2b5; box-shadow: none; }
.practice-buddy-composer .form-error { margin: 0; }

/* The button that opens Buddy's side sheet below 1180px. */
body[data-look='student'] .practice-screen .practice-buddy-toggle { display: none; position: fixed; right: 24px; bottom: 24px; z-index: 20; gap: 10px; min-height: 0; padding: 8px 18px 8px 8px; border: 1px solid #e3ded2; border-radius: 999px; background: #fffefb; box-shadow: 0 4px 0 #e3ded2; font-size: 16px; font-weight: 600; }
.practice-sheet-backdrop { display: none; }

@media (max-width: 1179px) {
  .practice-body { grid-template-columns: minmax(0, 1fr); }
  .practice-body--passage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .practice-buddy-slot { position: fixed; top: 0; right: 0; bottom: 0; z-index: 31; width: min(400px, 92vw); height: auto; padding: 12px; box-sizing: border-box; visibility: hidden; transform: translateX(100%); transition: transform .2s, visibility .2s; }
  .practice-buddy-slot.is-open { visibility: visible; transform: none; }
  .practice-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 30; background: #1b2a2440; }
  body[data-look='student'] .practice-screen .practice-buddy-toggle { display: inline-flex; }
  body[data-look='student'] .practice-screen .practice-buddy-close { display: inline-flex; }
  .practice-screen { --practice-gap: 20px; }
  .practice-bar { gap: 14px; padding: 0 20px; }
  /* Room below the card for the Ask Buddy button, so it never covers the actions. */
  .practice-body { gap: 18px; padding-bottom: 96px; }
  .practice-card { padding: 24px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .practice-buddy-slot { transition: none; }
}