.course-home #qualificationList[hidden] { display: none; }
.course-home #subjectList,
.course-home #unitList {
  max-height: none;
  overflow: visible;
}
.course-categories { display: grid; gap: 11px; }
.course-category { display: block; min-width: 0; }
.course-category summary { list-style: none; }
.course-category summary::-webkit-details-marker { display: none; }
.course-category summary:focus-visible,
.course-category .course-choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.course-category-list { margin-top: 10px; }
.course-category .course-choice { font-size: .98rem; overflow-wrap: anywhere; }
.course-home #resultPanel:empty { display: none; }
.course-home #subjectList,
.course-home #languageExamList { grid-template-columns: minmax(0, 1fr); }
.course-home .subject-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--glass-button);
}
.course-home .subject-card.selected { border-color: var(--gold); }
.course-home .subject-card-choice {
  flex: 1;
  min-width: 0;
  width: auto;
  overflow-wrap: anywhere;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.course-home .subject-card-choice.selected { background: transparent; box-shadow: none; }
.subject-card-resources { display: flex; flex: 0 0 auto; gap: 10px; }
.subject-resource-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 30px;
  padding: 6px 0;
  border: 0;
  color: var(--ink);
  opacity: .7;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  background-image: none;
}
.subject-resource-link::after {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229.5%22%2F%3E%3Cpath%20d%3D%22M12%206.5v10m-4-4%204%204%204-4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229.5%22%2F%3E%3Cpath%20d%3D%22M12%206.5v10m-4-4%204%204%204-4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.subject-resource-link:hover { opacity: 1; }
.subject-resource-link[aria-label^="真题:"],
.subject-resource-link[aria-label^="Past papers:"],
.subject-resource-link[data-competition-paper-link] { color: #b0e6f0; opacity: 1; }
.subject-resource-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 820px) {
  .course-home #subjectList.ap-subject-list { gap: 6px; }
  .course-home #subjectList.ap-subject-list .subject-card-choice,
  .course-home #subjectList.ap-subject-list .subject-wrapper-button {
    min-height: 44px;
    padding: 6px 10px;
    line-height: 1.2;
  }
  .course-home #subjectList.ap-subject-list .subject-card { padding-right: 8px; }
}

/* Keep the homepage frame still; only the course selectors scroll. */
.fixed-course-home { height: 100%; overflow: hidden; background: #102a57; }
body.course-home {
  position: relative;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.course-home > .app-shell {
  width: min(1440px, calc(100% - 32px));
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 0 12px;
}
.course-home .topbar { flex: 0 0 auto; margin-bottom: 20px; }
.course-home .topbar > h1 { max-width: none; }
.course-home .home-title-compact { display: none; }
@media (max-width: 600px) and (orientation: portrait) {
  .course-home .home-title-full { display: none; }
  .course-home .home-title-compact { display: inline; }
}
.course-home .picker {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  align-items: start;
}
.course-home .step-column {
  height: fit-content;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.course-home .step-column[hidden] { display: none; }
.course-home .step-heading { flex: 0 0 auto; }
.course-home #subjectList,
.course-home #unitList {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
.course-home .course-categories {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.course-home .course-category { flex: 0 0 auto; padding: 6px; }
.course-home .course-category[open] {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.course-home .course-category summary { flex: 0 0 auto; min-height: 44px; }
.course-home .course-category-list {
  flex: 0 1 auto;
  min-height: 0;
  margin-top: 8px;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
.course-home > .legal-footer {
  flex: 0 0 auto;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 820px), (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  .course-home > .app-shell { padding: 12px 0; }
  .course-home .topbar { margin-bottom: 14px; }
  .course-home .picker {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 12px;
  }
  .course-home .step-column {
    flex: 0 0 100%;
    padding: 14px;
    min-width: 0;
    scroll-snap-align: start;
  }
  .course-home .step-heading { margin-bottom: 12px; }
  .course-home > .legal-footer { gap: 3px; font-size: .7rem; }
}
@media (max-height: 650px) {
  .course-home > .app-shell { padding-top: 10px; }
  .course-home .topbar { row-gap: 8px; margin-bottom: 10px; }
  .course-home .topbar > h1 { font-size: clamp(1.4rem, 3.6vw, 2rem); line-height: 1.2; }
  .course-home .step-column { padding: 12px; }
  .course-home .course-categories { gap: 6px; }
  .course-home .course-category { padding: 4px; }
  .course-home .course-category summary { padding: 6px; }
}
@media (max-height: 480px) {
  .course-home .course-categories { display: block; overflow-y: auto; }
  .course-home .course-category { margin-bottom: 6px; }
  .course-home .course-category-list { flex: none; max-height: 160px; }
}

.course-home::before, .course-home::after { animation: none; }
.course-home #subjectList[hidden],
.course-home #languageExamList[hidden],
.course-home .course-category-list[hidden] { display: none; }
.course-home.language-category-selected #resultPanel { display: none !important; }
.course-home .course-category-language .framework-picker-card::after { content: "›"; }
.course-home .course-category-language .framework-picker-card[aria-pressed="true"]::after {
  background: var(--gold);
  color: #251704;
}
html[lang^="zh"] .course-home #unitList .toefl-cn-section-english { display: none; }

.course-home .picker { grid-template-columns: minmax(190px, .78fr) minmax(210px, 1fr) minmax(250px, 1.35fr); }
.course-home .picker-back { display: none; }
@media (max-width: 820px), (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  .course-home > .app-shell { width: calc(100% - 24px); }
  .course-home .picker::-webkit-scrollbar { display: none; }
  .course-home .step-heading h2 { flex: 1; }
  .course-home .picker-back {
    display: inline-grid;
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--glass-button);
    color: var(--ink);
    font: inherit;
    font-size: 1.2rem;
    cursor: pointer;
  }
  .course-home .picker-back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
}

/* Keep the phone course panel close to the heading. */
@media (max-width: 820px) and (min-height: 651px) {
  .course-home .topbar { margin-bottom: 16px; }
}

/* One extra line of space between the brand row and homepage heading. */
@media (max-width: 820px) and (min-height: 741px) {
  .course-home .topbar { row-gap: 40px; }
}
@media (max-width: 820px) and (max-height: 740px) and (min-height: 651px) {
  .course-home .topbar { row-gap: 24px; }
  .course-home .step-column { padding: 10px; }
  .course-home .course-categories { gap: 4px; }
  .course-home .course-category { padding: 0; }
  .course-home .course-category summary,
  .course-home .course-category-language .framework-picker-card { padding: 6px 12px; min-height: 44px; }
}

@media (max-width: 820px) and (max-height: 740px) {
  .course-home .course-categories { overflow-y: auto; overscroll-behavior-y: contain; }
}

/* Use the subject-card height throughout the three course selectors. */
.course-home { --picker-row-height: 52px; }
.course-home .course-category,
.course-home #unitList > .framework-picker-section { padding: 0; }
.course-home .course-category > .framework-picker-card,
.course-home #unitList > .framework-picker-section > .framework-picker-card {
  min-height: calc(var(--picker-row-height) - 2px);
  padding: 6px 14px;
}
.course-home .course-category .course-choice,
.course-home #unitList .unit-link,
.course-home #unitList .framework-practice-card,
.course-home #subjectList .subject-wrapper-button {
  min-height: var(--picker-row-height);
  padding: 8px 14px;
}
.course-home .course-category-list { margin: 8px 6px 6px; }
.course-home #unitList .framework-picker-list,
.course-home #unitList .framework-practice-grid { margin: 0 6px 6px; }
@media (max-width: 820px) {
  .course-home #subjectList .subject-card-choice,
  .course-home #subjectList.ap-subject-list .subject-card-choice {
    min-height: calc(var(--picker-row-height) - 2px);
    padding: 6px 10px;
    line-height: 1.2;
  }
  .course-home #subjectList.ap-subject-list .subject-wrapper-button {
    min-height: var(--picker-row-height);
  }
}

.course-home .course-category > .framework-picker-card::after,
.course-home #unitList > .framework-picker-section > .framework-picker-card::after {
  grid-row: 1;
}

/* Lower the whole phone header and course group by one visual line. */
@media (max-width: 820px) {
  .course-home > .app-shell { padding-top: 44px; }
}
@media (max-width: 820px) and (max-height: 740px) {
  .course-home > .app-shell { padding-top: 36px; }
}
@media (max-width: 820px) and (max-height: 650px) {
  .course-home > .app-shell { padding-top: 26px; }
}

/* Short phone screens keep one usable picker in the safe viewport. */
@media (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  .course-home > .app-shell { padding-top: 8px; padding-bottom: 6px; }
  .course-home .topbar { row-gap: 4px; margin-bottom: 8px; }
  .course-home .topbar > h1 { font-size: 1.4rem; line-height: 1.2; }
  .course-home .app-logo { width: 32px; height: 32px; }
  .course-home .exam-calendar-home-link { display: none; }
  .course-home .step-column { padding: 10px; }
  .course-home .step-heading { margin-bottom: 8px; }
  .course-home .course-categories {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .course-home .course-category-list { max-height: none !important; overflow: visible; }
  .course-home #languageExamList {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .course-home .home-mailbox-invitation {
    flex-direction: row;
    gap: 12px;
    padding: 2px 12px;
    font-size: .75rem;
  }
  .course-home .home-mailbox-open { min-height: 30px; font-size: inherit; }
  .course-home > .legal-footer {
    display: flex;
    gap: 2px 10px;
    font-size: .65rem;
    padding-top: 2px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  }
  .course-home .locale-attribution { font-size: inherit; }
}

/* Landscape touch tablets keep downloads readable and expand long course categories. */
@media (min-width: 821px) and (max-width: 1366px) and (min-height: 501px) and (orientation: landscape) and (any-pointer: coarse) {
  .course-home .picker { grid-template-columns: minmax(190px, .78fr) minmax(210px, 1.2fr) minmax(250px, 1.15fr); }
  .course-home .course-category[open]:has(> #course-subject) ~ .course-category,
  .course-home .course-category[open]:has(> #course-competition) ~ .course-category { display: none; }
}

/* Long desktop lists share the bottom edge; short lists keep their own height. */
@media (min-width: 821px) and (min-height: 501px), (min-width: 1025px) {
  .course-home .picker { grid-template-rows: minmax(0, 1fr); }
  .course-home .step-column.picker-column-filled { height: 100%; }
}
