/* Grown-ups page (progress.html). Builds on css/learn.css; loaded after it.
   Phone first at 375px with 16px gutters; cards go two-up on wide screens. */

.lp-nav { display: flex; flex-wrap: wrap; gap: 4px; }

.lp-main { display: flex; flex-direction: column; gap: 20px; }
.lp-live { margin: 0; min-height: 1.4em; font-weight: 700; }
.lp-live:empty { min-height: 0; }

.lp-kids { display: flex; flex-direction: column; gap: 20px; }

.lp-card {
  min-width: 0;
  padding: 16px;
  border-radius: 24px;
  background: var(--learn-card);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.lp-kid { border-top: 8px solid var(--lp-kid, var(--learn-accent)); }
.lp-kid.theme-abby { --lp-kid: #2f5fb3; --lp-soft: #eaf2ff; }
.lp-kid.theme-bella { --lp-kid: #b04a7c; --lp-soft: #fbeef2; }

.lp-kid-title,
.lp-sec-title {
  margin: 0 0 12px;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
}
.lp-kid-emoji { font-size: 1.6rem; }

.lp-courses { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.lp-course {
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  background: var(--lp-soft, var(--learn-soft));
}
.lp-course-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 10px;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
}
.lp-badge {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--learn-card);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
}

.lp-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}
.lp-stat {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--learn-card);
}
.lp-stat dt { font-size: 0.8rem; font-weight: 700; opacity: 0.8; }
.lp-stat dd { margin: 2px 0 0; font-size: 1.1rem; font-weight: 800; overflow-wrap: anywhere; }

.lp-next { margin: 0 0 10px; }
.lp-muted { opacity: 0.85; font-size: 0.95rem; }
.lp-words h4 { margin: 8px 0 6px; font-size: 1rem; }
.lp-wordlist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lp-word {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--learn-card);
}
.lp-word-fr { font-weight: 800; }
.lp-word-en { font-size: 0.85rem; opacity: 0.8; }

.lp-units summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.lp-units summary::-webkit-details-marker { display: none; }
.lp-units summary::before { content: "▸"; margin-right: 8px; }
.lp-units[open] summary::before { content: "▾"; }
.lp-unit-title { margin: 10px 0 4px; font-size: 1rem; }
.lp-unit-stars { font-weight: 700; }
.lp-lessonlist { margin: 0; padding: 0; list-style: none; }
.lp-lesson {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.lp-lesson-title { min-width: 0; overflow-wrap: anywhere; }
.lp-lesson-stars { flex: none; }

.lp-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lp-form { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.lp-label { font-weight: 800; }
.lp-input {
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 2px solid var(--learn-ink);
  border-radius: 12px;
  background: #fff;
  color: var(--learn-ink);
  font: inherit;
}
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 18px;
  border: 3px solid var(--learn-accent);
  border-radius: 999px;
  background: var(--learn-card);
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}
.lp-btn-main { background: var(--learn-accent); color: #fff !important; }
.lp-btn-quiet { border-color: transparent; background: var(--learn-soft); }
.lp-btn[disabled] { opacity: 0.6; cursor: wait; }
.lp-form .lp-btn { align-self: flex-start; }

/* The real file input stays focusable but invisible; its label is the button. */
.lp-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.lp-file:focus-visible + .lp-file-label { outline: 3px solid var(--learn-ring); outline-offset: 3px; }

.lp-ok { font-size: 1.15rem; font-weight: 800; }
.lp-error {
  margin: 0;
  padding: 8px 12px;
  border-left: 6px solid #b3541e;
  border-radius: 10px;
  background: #fdecc8;
  font-weight: 700;
}
.lp-report { margin: 10px 0 0; padding-left: 20px; }

@media (min-width: 720px) {
  .lp-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* French games: Bella's garden stickers, Abby's stamps and badges. Pictures
   come from js/french/art.js (an image once it exists, the emoji until then). */
.lp-game { margin: 0 0 10px; }
.lp-sub { margin: 10px 0 6px; font-size: 1rem; }
.lp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 4px;
  border-radius: 12px;
  background: var(--learn-card);
  text-align: center;
}
.lp-tile-text { font-size: 0.75rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.lp-tile-off .lp-pic { opacity: 0.45; filter: grayscale(1); }
.lp-tile-off .lp-tile-text { opacity: 0.75; }
.lp-tile-next { outline: 3px solid var(--lp-kid, var(--learn-accent)); outline-offset: -3px; }
.lp-pic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; }
.lp-pic .fr-art-img { width: 40px; height: 40px; object-fit: contain; }
.lp-pic .fr-art-emoji { font-size: 1.8rem; line-height: 1; }
.lp-badge-item { align-items: center; }
.lp-badge-item .lp-pic { width: 28px; height: 28px; }
.lp-badge-item .fr-art-img { width: 28px; height: 28px; }
.lp-badge-item .fr-art-emoji { font-size: 1.3rem; }
.lp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}