/* A compact practice sheet: a clear prompt, a ruled desk, and room to try. */
.sentence-sheet,
.quiz-sheet {
  --practice-ink:#234e4e;
  --practice-paper:#faf8f0;
  --practice-rule:#b9cac1;
  container-type:inline-size;
  min-width:0;
  padding:0;
  border:1px solid #244c4433;
  border-radius:3px;
  background:var(--practice-paper);
  box-shadow:0 3px 0 #d8dfd4;
  color:var(--practice-ink);
}
.sentence-sheet { margin-top:28px; }
.quiz-sheet { margin:0 0 24px; }
.sentence-sheet .practice-prompt,
.quiz-sheet .practice-prompt {
  padding:19px 24px 23px;
  background:#173f42;
  color:#f6f3e8;
  border-radius:2px 2px 0 0;
}
.practice-meta {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:5px 16px;
  margin-bottom:14px;
}
.practice-meta .sentence-label,
.practice-meta .quiz-number {
  display:inline-flex;
  align-items:baseline;
  gap:11px;
  color:#bdd8cf;
  font-size:9px;
  font-weight:500;
  letter-spacing:.12em;
}
.practice-number {
  color:#f2f0e5;
  font:400 25px/1 var(--display);
  letter-spacing:-.04em;
}
.practice-total { color:#9fbfb8; font-size:10px; letter-spacing:.04em; }
.practice-kind { color:#bfd5cc; font-size:10px; line-height:1.6; }
.sentence-sheet .practice-question {
  max-width:34ch;
  margin:0;
  font:400 clamp(20px,2vw,25px)/1.6 var(--display);
  letter-spacing:-.04em;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.quiz-sheet .practice-question {
  margin:0;
  color:#f6f3e8;
  font:500 16px/1.85 var(--body);
  letter-spacing:-.025em;
  text-wrap:pretty;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.practice-workspace { position:relative; padding:23px 24px 0; min-width:0; }
.practice-workline,
.practice-bankline {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:5px 12px;
}
.practice-workline { margin-bottom:13px; }
.practice-label {
  color:#426b64;
  font-size:9px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:.12em;
}
.sentence-sheet .sentence-progress {
  color:#6a8377;
  font-size:11px;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
}
.sentence-sheet .word-slot {
  --practice-row:54px;
  min-height:108px;
  padding:0 0 8px;
  align-content:flex-start;
  align-items:flex-start;
  gap:8px;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--practice-row) - 1px),#afc3b991 calc(var(--practice-row) - 1px),#afc3b991 var(--practice-row));
}
.sentence-sheet .word-slot-measure {
  position:absolute;
  inset:0 auto auto 0;
  height:auto !important;
  min-height:0 !important;
  visibility:hidden;
  pointer-events:none;
  background:none;
}
.sentence-sheet .slot-hint {
  align-self:flex-start;
  padding:15px 0 0;
  color:#748a7f;
  font-size:12px;
  line-height:1.8;
}
.practice-bankline { margin-top:23px; }
.practice-bank-note { color:#70867b; font-size:10px; line-height:1.6; }
.sentence-sheet .word-bank { gap:8px; margin-top:12px; }
.sentence-sheet .word-pocket {
  min-width:0;
  border-radius:5px;
  background:#dfe5d9;
}
.sentence-sheet .word,
.sentence-sheet .word-ghost {
  box-sizing:border-box;
  min-height:46px;
  padding:10px 13px;
  border:1px solid transparent;
  font:400 18px/1.2 Georgia,serif;
}
.sentence-sheet .word {
  border:1px solid #b7c6ba;
  border-radius:5px;
  background:#fffdf7;
  color:#244d48;
  box-shadow:0 3px 0 #c9d3c5;
}
.sentence-sheet .word.is-word-travelling {
  z-index:3;
  pointer-events:none;
  will-change:transform;
}
.sentence-sheet .word:hover { border-color:#648e80; box-shadow:0 3px 0 #aebfb0; }
.sentence-sheet .word:active { box-shadow:0 1px 0 #aebfb0; }
.sentence-sheet .word-slot .word {
  border-color:#92b5a854;
  background:#e7eee3;
  color:#214f49;
  box-shadow:none;
}
.sentence-sheet[data-result=correct] .word-slot,
.sentence-sheet[data-result=retry] .word-slot {
  border:0;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--practice-row) - 1px),#afc3b991 calc(var(--practice-row) - 1px),#afc3b991 var(--practice-row));
}
.sentence-sheet[data-result=correct] .word-slot .word {
  color:#245e50;
  background:transparent;
  border-color:transparent;
}
.sentence-sheet .word-slot .word-review {
  text-decoration-color:#a26746;
  text-underline-offset:5px;
}
.sentence-sheet .sentence-actions {
  justify-content:space-between;
  gap:8px 16px;
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid #294b4224;
}
.sentence-tools { display:flex; align-items:center; gap:18px; }
.sentence-sheet .sentence-actions .small-button {
  min-height:44px;
  padding:11px 15px;
  gap:20px;
  border:1px solid #234e4e;
  border-radius:2px;
  background:#234e4e;
  color:#f6f3e8;
  font-size:12px;
}
.sentence-sheet .subtle-button,
.quiz-sheet .subtle-button {
  min-height:44px;
  border:0;
  padding:10px 0;
  color:#4d7166;
  font-size:11px;
  text-decoration:underline;
  text-decoration-color:#4d716650;
  text-underline-offset:5px;
}
.sentence-sheet .feedback-space { min-height:96px; padding:13px 0 14px; }
.sentence-sheet .feedback,
.quiz-sheet .quiz-explanation {
  margin:0;
  padding:11px 0 0;
  border:0;
  border-top:1px solid #8cae9c6b;
  border-radius:0;
  background:transparent;
  color:#326151;
  font-size:12px;
  line-height:1.85;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.sentence-sheet .feedback.is-error,
.quiz-sheet[data-result=retry] .quiz-explanation {
  border-color:#b7997b66;
  background:transparent;
  color:#825339;
}
.quiz-sheet .quiz-options {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.quiz-sheet .quiz-options button {
  display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:56px;
  padding:11px 12px;
  border:1px solid #c2cec1;
  border-radius:2px;
  background:#f5f4ea;
  color:#2c5048;
  font:400 14px/1.65 var(--body);
  box-shadow:none;
}
.quiz-sheet .option-index {
  display:grid;
  place-items:center;
  width:24px;
  min-height:27px;
  border-bottom:1px solid #9ab0a2;
  color:#5e7c6c;
  font:400 17px/1 var(--display);
}
.quiz-sheet .option-copy { min-width:0; overflow-wrap:anywhere; }
.quiz-sheet .option-result { font-size:10px; white-space:nowrap; font-weight:600; }
.quiz-sheet .quiz-options button:hover:not(:disabled) { background:#eaf0e3; border-color:#749c88; box-shadow:none; }
.quiz-sheet .quiz-options button.is-correct { background:#e0ecdc; color:#275e46; border-color:#789b76; }
.quiz-sheet .quiz-options button.is-wrong { background:#f2e7da; color:#855a3d; border-color:#b79676; }
.quiz-sheet .quiz-options button.is-correct::after,
.quiz-sheet .quiz-options button.is-wrong::after { content:none; }
.quiz-sheet .quiz-feedback-space { min-height:85px; padding:18px 0 16px; }
.quiz-sheet .retry { display:inline-flex; align-items:center; gap:16px; margin-top:4px; }
.sentence-sheet button:focus-visible,
.quiz-sheet button:focus-visible { outline:2px solid #397769; outline-offset:4px; }
@container (max-width:440px) {
  .practice-prompt { padding:17px 17px 20px !important; }
  .practice-workspace { padding:19px 17px 0; }
  .practice-meta { gap:5px 10px; margin-bottom:13px; }
  .practice-question { font-size:20px !important; }
  .quiz-sheet .practice-question { font-size:15px !important; }
  .practice-bank-note { max-width:170px; text-align:right; }
  .sentence-sheet .word-slot { --practice-row:52px; min-height:104px; }
  .sentence-sheet .word,
  .sentence-sheet .word-ghost { min-height:44px; padding-inline:11px; font-size:17px; }
  .sentence-sheet .sentence-actions { gap:6px 12px; margin-top:20px; }
  .sentence-tools { gap:15px; }
  .sentence-sheet .feedback-space { min-height:108px; }
  .quiz-sheet .quiz-options { grid-template-columns:minmax(0,1fr); }
  .quiz-sheet .quiz-options button { min-height:50px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .sentence-sheet .word,
  .sentence-sheet .small-button,
  .quiz-sheet .quiz-options button { transition:none !important; }
  .sentence-sheet .feedback-enter,
  .quiz-sheet .feedback-enter { animation:none; }
}

/* A completed sentence clears the empty word tray. */
.sentence-sheet[data-result=correct] .practice-bankline,
.sentence-sheet[data-result=correct] .word-bank { display:none; }