/* Learn responsive layout layer. Loaded after the board skin; phone rules stay
   intentionally compact while desktop gains room for useful parallel content. */
@media (min-width: 851px) {
  .learn-home, .courses-page, .utility-page, .course-page, .reader-page {
    width: min(1180px, calc(100% - 64px));
    margin-inline: auto;
  }
  .learn-home {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(290px, .72fr);
    grid-template-areas:
      "welcome start"
      "courses progress"
      "glossary glossary";
    gap: 24px;
    align-items: start;
  }
  .learn-welcome { grid-area: welcome; width: 100%; max-width: none; margin: 0; padding: 24px 26px; align-self: stretch; }
  .learn-welcome h1 { font-size: clamp(46px, 4.3vw, 56px); line-height: 1; }
  .learn-start-card { grid-area: start; width: 100%; max-width: none; min-height: 190px; margin: 0; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 22px; align-self: stretch; gap: 18px; }
  .learn-start-card .start-card-copy h2 { font-size: 27px; line-height: 1.14; }
  .learn-start-card .button { width: 100%; justify-content: center; }
  .learn-game { grid-area: progress; width: 100%; max-width: none; margin: 0; align-self: start; display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 16px 12px; }
  .learn-game .level-token { grid-column: 1; grid-row: 1; align-self: center; }
  .learn-game .game-main { width: 100%; min-width: 0; grid-column: 2; grid-row: 1; }
  .learn-game .game-challenge { width: 100%; min-height: 110px; grid-column: 1/-1; grid-row: 2; }
  .learn-game .game-badges { margin-top: 0; grid-column: 1/-1; grid-row: 3; justify-self: start; }
  .learn-courses { grid-area: courses; width: 100%; max-width: none; }
  .learn-glossary-link { grid-area: glossary; width: 100%; max-width: none; margin: 0; }
  .course-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .course-chip { display: grid; grid-template-columns: minmax(0,1fr) auto; align-content: start; gap: 12px; min-height: 170px; padding: 16px; }
  .course-chip > span:nth-child(2) { grid-column: 1/-1; grid-row: 2; }
  .course-chip-arrow { grid-column: 2; grid-row: 1; }
  .course-chip strong { font-size: 19px; line-height: 1.3; }
  .courses-page .hero-board-wrap { max-width: none; }
  .courses-page .courses-list { max-width: none; }
  .glossary-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Medium desktop keeps the reader focused: outline + article. */
  .reader-shell { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
  .reader-right { display: none; }
  .reader-body { padding-inline: clamp(30px, 4vw, 64px); }
  .reader-content { max-width: 68ch; }
  .results-list { max-width: 980px; }
  .utility-head { max-width: 860px; }
}

@media (min-width: 851px) and (max-width: 1100px) {
  .course-chips { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (min-width: 1200px) {
  .learn-home { gap: 28px; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); }
  .learn-welcome { padding: 28px 30px; }
  .course-chips { gap: 16px; }
  .glossary-list { gap: 14px; }
  .reader-shell { grid-template-columns: 220px minmax(0, 760px) 240px; gap: 28px; }
  .reader-right { display: block; }
}

@media (max-width: 850px) {
  .learn-home, .courses-page, .utility-page, .course-page, .reader-page {
    width: min(100% - 32px, 620px);
    margin-inline: auto;
  }
  .learn-start-card, .learn-game { width: 100%; }
}

@media (max-width: 560px) {
  .learn-home, .courses-page, .utility-page, .course-page, .reader-page { width: calc(100% - 24px); }
  .course-chips, .glossary-list { grid-template-columns: 1fr; }
  .reader-shell { grid-template-columns: 1fr; }
  .button, .tool-button, .quiz-option, .reader-mobile-dock a, .reader-mobile-dock button { min-height: 44px; }
}

/* Keep the next lesson first, then make supporting routes easy to scan. */
@media (min-width: 851px) {
  .learn-home {
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
    grid-template-areas:
      "welcome start"
      "match progress"
      "trail trail"
      "courses courses"
      "glossary glossary";
    gap: 18px 22px;
  }
  .learn-welcome, .learn-start-card { align-self: center; min-height: 0; }
  .learn-welcome { padding: 24px 26px; }
  .learn-start-card { justify-content: flex-start; gap: 18px; }
  .learn-start-card .start-card-copy { flex: 1; }
  .money-match-entry { grid-area: match; width: 100%; min-width: 0; }
  .learn-game { grid-area: progress; width: 100%; min-width: 0; margin: 0; }
  .home-trail { grid-area: trail; }
  .learn-courses { grid-area: courses; }
  .learn-glossary-link { grid-area: glossary; }
  .course-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  .learn-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "welcome" "start" "match" "progress" "trail" "courses" "glossary";
    gap: 14px;
  }
  .learn-welcome, .learn-start-card, .money-match-entry, .learn-game,
  .home-trail, .learn-courses, .learn-glossary-link { grid-column: 1; width: 100%; min-width: 0; margin: 0; }
  .learn-welcome { grid-area: welcome; padding: 18px 16px; }
  .learn-start-card { grid-area: start; min-height: 0; }
  .money-match-entry { grid-area: match; }
  .learn-game { grid-area: progress; }
  .home-trail { grid-area: trail; }
  .learn-courses { grid-area: courses; }
  .learn-glossary-link { grid-area: glossary; }
  .course-chips { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  .course-chip { min-height: 72px; }
}

@media (max-width: 380px) {
  .learn-home, .courses-page, .utility-page, .course-page, .reader-page { width: calc(100% - 20px); }
  .learn-welcome { padding: 16px 14px; }
  .learn-start-card { padding: 14px; }
  .course-chip { padding: 12px; }
  .reader-body { padding-inline: 14px; }
}