/* Learning course shell: header, picker, sync badge, course map.

   Shared by piano.html and french.html (load fonts.css first). It borrows
   the site's wonder palette and its Fredoka/Nunito pairing so the courses
   feel like the same house as the story pages. Phone first: everything is
   laid out for a 375px screen with 16px gutters and grows from there, and
   nothing is wider than the viewport. Lesson buttons are at least 56px tall
   because a five-year-old taps with a whole finger. */

body.learn {
  --learn-ink: #253f44;
  --learn-bg: #eef6ee;
  --learn-card: #ffffff;
  --learn-accent: #234e46;
  --learn-soft: #dcecd8;
  --learn-sun: #f5c967;
  --learn-locked: #e7ebe6;
  --learn-ring: #3069ab;
  --learn-gutter: 16px;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--learn-ink);
  background: var(--learn-bg);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.4;
}
body.learn *,
body.learn *::before,
body.learn *::after { box-sizing: border-box; }

body.learn.theme-bella {
  --learn-bg: #fbeef2;
  --learn-ink: #5e3d60;
  --learn-accent: #b04a7c;
  --learn-soft: #f8d7e4;
  --learn-sun: #ffd166;
}
body.learn.theme-abby {
  --learn-bg: #eaf2ff;
  --learn-ink: #1f3550;
  --learn-accent: #2f5fb3;
  --learn-soft: #d6e4ff;
  --learn-sun: #f5c967;
}

body.learn button { font: inherit; color: inherit; cursor: pointer; }
body.learn a { color: inherit; }
/* Safari 15.0-15.3 (the iPad floor) has no :focus-visible, so a plain :focus
   ring is drawn first and removed only where :focus-visible exists. The
   selector beats `.piano-key { outline: none }`, so piano keys get it too. */
body.learn :focus {
  outline: 3px solid var(--learn-ring);
  outline-offset: 3px;
}
body.learn :focus:not(:focus-visible) { outline: none; }
body.learn :focus-visible {
  outline: 3px solid var(--learn-ring);
  outline-offset: 3px;
}
/* Read by screen readers, not drawn. */
body.learn .learn-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
body.learn [hidden] { display: none !important; }

/* ---------- header ---------- */

.learn-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 12px var(--learn-gutter);
  max-width: 1100px;
  margin: 0 auto;
}
.learn-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  border-radius: 16px;
  background: var(--learn-card);
  font-size: 1.6rem;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
}
.learn-title {
  flex: 1 1 140px;
  min-width: 0;
  margin: 0;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.learn-title-emoji { margin-right: 6px; }
.learn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 6px 14px;
  border: 3px solid var(--learn-accent);
  border-radius: 999px;
  background: var(--learn-card);
  font-weight: 800;
}
.learn-chip-emoji { font-size: 1.4rem; line-height: 1; }
.learn-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--learn-soft);
  font-size: 0.88rem;
  font-weight: 700;
}
.learn-sync[data-status="offline"],
.learn-sync[data-status="error"] { background: #fdecc8; }
.learn-sync[data-status="saving"] .learn-sync-icon { display: inline-block; animation: learn-spin 1.2s linear infinite; }
.learn-grownups {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes learn-spin { to { transform: rotate(360deg); } }

/* ---------- main + picker ---------- */

.learn-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px var(--learn-gutter) 48px;
}
body.learn .who-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 32px 0;
}
body.learn .who-title {
  margin: 0;
  text-align: center;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.8rem;
}
body.learn .who-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
body.learn .who-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 150px;
  max-width: calc(50vw - 28px);
  min-height: 150px;
  padding: 18px 10px;
  border: 4px solid var(--who-colour, var(--learn-accent));
  border-radius: 28px;
  background: var(--learn-card);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.08);
  transition: transform 0.12s ease;
}
body.learn .who-btn:active { transform: translateY(3px); }
body.learn .who-emoji { font-size: 3.2rem; line-height: 1; }
body.learn .who-name { font-size: 1.3rem; font-weight: 800; }

/* ---------- course map ---------- */

.learn-map { display: flex; flex-direction: column; gap: 22px; }
.learn-unit {
  padding: 16px;
  border-radius: 24px;
  background: var(--learn-card);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.learn-unit-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
}
.learn-unit-emoji { font-size: 1.6rem; }
.learn-lessons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.learn-lesson {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px;
  border: 3px solid transparent;
  border-radius: 20px;
  background: var(--learn-soft);
  text-align: left;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
  transition: transform 0.12s ease;
}
.learn-lesson:active { transform: translateY(2px); }
.learn-lesson-emoji { flex: none; font-size: 1.8rem; line-height: 1; }
.learn-lesson-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.learn-stars { flex: none; display: inline-flex; gap: 1px; font-size: 1.05rem; }
.learn-star { opacity: 0.45; }
.learn-star-on { opacity: 1; }
.learn-current {
  border-color: var(--learn-accent);
  background: var(--learn-card);
  box-shadow: 0 0 0 4px var(--learn-sun), 0 4px 0 rgba(0, 0, 0, 0.08);
}
.learn-next {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--learn-accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}
.learn-locked {
  background: var(--learn-locked);
  color: #5a6b6a;
  box-shadow: none;
}
.learn-locked .learn-lesson-title { font-weight: 700; }

@media (min-width: 640px) {
  .learn-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn-title { font-size: 1.8rem; }
}
@media (min-width: 960px) {
  .learn-lessons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  body.learn *,
  body.learn *::before,
  body.learn *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}