/* Course planning shares the app's readable type scale. */
.course-overview{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;margin-top:22px;border:1px solid var(--line);border-radius:20px;background:var(--white)}
.course-overview h2{font-size:var(--font-title);margin:7px 0}.course-overview p{font-size:var(--font-small);color:#63745d;line-height:1.6;margin:5px 0}


.course-starting-points{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 26px}.course-starting-points>div{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--white)}
.course-starting-points h3{font-size:var(--font-body);margin:0 0 7px}.course-starting-points p{font-size:var(--font-small);line-height:1.7;margin:0;color:#63745d}
.course-stages{display:flex;gap:9px;overflow-x:auto;padding:3px 3px 12px;margin:0 0 20px;scrollbar-width:thin}
.course-stage-button{flex:none;background:#edf2e5;border:1px solid #dfe6d5;border-radius:12px;padding:11px 15px;text-align:left;min-height:58px}
.course-stage-button span{display:block;font-size:var(--font-caption);color:#63745d;margin-bottom:3px}.course-stage-button strong{display:block;font-size:var(--font-small)}
.course-stage-button[aria-pressed=true]{background:#dfeccf;border-color:#9fbd84;color:#355e46}.course-stage-button:hover{background:#e4eed7}
.course-stage-summary{margin-bottom:25px}.course-stage-summary h2{font-size:var(--font-heading);margin:8px 0}.course-stage-summary>p{color:#63745d;line-height:1.7;margin:8px 0}.course-stage-summary ul{padding-left:23px;font-size:var(--font-small);line-height:1.8;color:#63745d}
.course-unit{border:1px solid var(--line);border-radius:16px;background:var(--white);margin-bottom:14px;overflow:hidden}
.course-unit>summary{cursor:pointer;display:flex;align-items:center;gap:15px;min-height:90px;padding:19px 22px;list-style:none}.course-unit>summary::-webkit-details-marker{display:none}
.course-unit-number{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#edf3df;font-size:var(--font-small);font-weight:850;color:#58764a}
.course-unit-heading{flex:1;min-width:0}.course-unit-heading h3{font-size:var(--font-lead);margin:0 0 5px;line-height:1.4}.course-unit-heading p{font-size:var(--font-small);color:#63745d;margin:0;line-height:1.6}
.course-unit-status{font-size:var(--font-caption);flex:none;color:#63745d;background:#f0f4e8;border-radius:7px;padding:5px 8px}.course-unit[open]>summary{border-bottom:1px solid var(--line)}
.course-unit>summary>.ph{font-size:18px;flex:none;transition:transform .15s}.course-unit[open]>summary>.ph{transform:rotate(180deg)}
.course-unit-content{padding:22px}.course-unit-content h4{font-size:var(--font-body);margin:0 0 8px}.course-unit-content p,.course-unit-content li{font-size:var(--font-small);color:#63745d;line-height:1.8}
.course-unit-content ul{padding-left:21px;margin:5px 0 16px}.course-unit-task{padding:16px 18px;border-radius:12px;background:#f0f5e7;margin-bottom:18px}.course-unit-task p{margin:5px 0 0}
.course-unit-skills{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin:20px 0}.course-unit-skills p{margin:0}
.course-lesson{border-top:1px solid var(--line);padding:14px 0}.course-lesson>summary{cursor:pointer;font-size:var(--font-body);font-weight:800;line-height:1.6;min-height:40px;padding:6px 0}.course-lesson>summary span{font-size:var(--font-caption);font-weight:650;color:#63745d}
.course-lesson-body{padding:7px 0 12px}.course-lesson-body p{margin:7px 0}.course-example{background:#f4f6ec;border-radius:12px;padding:16px;margin:16px 0}.course-example .phrase-zh{font-size:var(--font-heading);display:block;letter-spacing:.5px}.course-example .phrase-pinyin{display:block;margin:6px 0}.course-example .phrase-gloss{display:block;font-size:var(--font-small);margin:0}
.audio-button.pending{background:#f2f3eb;border-color:#dfe3d5;color:#63745d;box-shadow:none}.course-status-note{padding:17px 20px;background:#f0f2e9;border-radius:13px;color:#63745d;font-size:var(--font-small);line-height:1.8;margin:20px 0}
@media(max-width:760px){.course-overview{align-items:flex-start;flex-direction:column;padding:20px;gap:12px}.course-starting-points,.course-unit-skills{grid-template-columns:1fr}.course-unit>summary{flex-wrap:wrap;gap:10px;padding:16px}.course-unit-heading{min-width:140px}.course-unit-status{margin-left:52px}.course-unit>summary>.ph{margin-left:auto}.course-unit-content{padding:18px}.course-example{padding:14px}.course-example .phrase-pinyin{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.course-unit>summary>.ph{transition:none}}

.course-guide{margin:0 0 18px;border-bottom:1px solid var(--line);padding-bottom:10px}
.course-guide>summary,.stage-outcomes>summary{cursor:pointer;font-size:var(--font-small);font-weight:800;min-height:44px;padding:10px 0;line-height:1.7}
.course-guide>p,.stage-outcomes>p{font-size:var(--font-small);color:#63745d;line-height:1.7}
.course-guide .course-starting-points{margin:10px 0}.course-stage-summary>p{font-size:var(--font-small)}
.stage-outcomes>p{margin:5px 0}.stage-outcomes ul{margin:5px 0 15px}
@media(max-width:600px){.main-shell:has(.course-units) .topbar{margin-bottom:12px}.main-shell:has(.course-units) .topbar p{display:none}.course-stages{margin-bottom:12px}.course-stage-summary{margin-bottom:14px}.course-stage-summary h2{margin:5px 0}.course-guide{margin-bottom:12px}}

.pinyin-note{display:block;color:#63745d;font-size:var(--font-caption);line-height:1.6;margin:8px 0}

.course-lesson-body > .button {
  margin-bottom: 12px;
}

.course-exercise h1,
.learning-session .course-exercise h1 {
  font-size: var(--font-heading);
  overflow-wrap: anywhere;
}

.course-lesson-bottom {
  justify-content: flex-end;
}

.practice-goal,
.practice-text {
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.practice-stimulus,
.practice-feedback,
.response-panel {
  max-width: 530px;
  margin: 16px auto;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  text-align: left;
}

.practice-stimulus {
  background: #edf3df;
}

.practice-feedback.is-correct {
  background: #edf4e1;
}

.practice-feedback.is-incorrect {
  background: #fbf1e1;
}

.practice-feedback p,
.response-panel p {
  margin: 8px 0 0;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.course-exercise .answer-option {
  text-align: left;
}

.response-panel label {
  display: block;
  font-weight: 800;
  margin-bottom: 8px;
}

.response-panel textarea {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid #b8c7ad;
  border-radius: 10px;
  background: #fffefa;
  color: inherit;
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}

.response-panel textarea:focus-visible {
  outline: 3px solid #438a70;
  outline-offset: 2px;
}

.response-panel h2 {
  margin: 0;
  font-size: var(--font-lead);
}

.response-model {
  background: #edf3df;
}

.response-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-top: 12px;
}

.response-actions button,
.response-panel > .text-button {
  min-height: 44px;
}

.response-ratings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.response-ratings button {
  white-space: normal;
}

.response-actions button[aria-pressed="true"] {
  border-color: #7c9f65;
  background: #e3eed6;
}

.lesson-review-list,
.course-progress {
  margin-bottom: 22px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}

.course-progress-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.course-progress-stages span {
  margin: 4px 0 0;
}

.course-progress-stages button {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .practice-stimulus,
  .practice-feedback,
  .response-panel {
    padding: 13px;
  }

  .course-progress-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-review-list,
  .course-progress {
    padding: 14px;
  }
}