/* Learner-facing pages (Today, Scenes, Collections, Account and the
   player), tuned for a laptop or a big screen. Colors follow the iOS app's
   palette. */
.learn {
  --learn-background: rgb(240 245 235);
  --learn-ink: rgb(43 31 23);
  --learn-muted: rgb(79 94 87);
  --learn-accent: rgb(15 92 87);
  --learn-line: rgb(158 184 171);
  --learn-story: rgb(71 97 140);
  --learn-category: rgb(163 51 41);
  --learn-error: rgb(158 28 23);
  --avatar-0: rgb(15 92 87);
  --avatar-1: rgb(163 51 41);
  --avatar-2: rgb(71 97 140);
  --avatar-3: rgb(138 97 33);

  background: var(--learn-background);
  color: var(--learn-ink);
  min-block-size: 100dvh;
}

.today {
  margin-inline: auto;
  max-inline-size: 48rem;
  padding: 2rem 1rem;
}

.today__heading, .library__heading {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-block-end: 1.5rem;
}

.today__empty { color: var(--learn-muted); font-weight: 600; }

.today__student { margin-block-end: 2rem; }

.today__name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-block-end: .75rem;
}

.today__card {
  align-items: center;
  background: rgb(255 255 255 / .92);
  border: 1.5px solid rgb(from var(--learn-story) r g b / .55);
  border-radius: .75rem;
  display: flex;
  gap: 1.25rem;
  margin-block-end: .75rem;
  padding: 1.25rem;
  transition: transform .15s ease;

  &:hover, &:focus-visible { transform: translateY(-2px); }
}

.today__badge {
  align-items: center;
  background: var(--learn-story);
  border-radius: .75rem;
  color: white;
  display: flex;
  flex: none;
  font-size: 1.75rem;
  justify-content: center;
  block-size: 4rem;
  inline-size: 4rem;
}

.today__details { display: flex; flex-direction: column; gap: .25rem; }
.today__eyebrow { color: var(--learn-story); font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.today__story { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; font-weight: 700; }
.today__meta { color: var(--learn-muted); font-weight: 600; }

.lesson {
  background: var(--learn-background);
  block-size: 100dvh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

.lesson__bar {
  align-items: center;
  display: flex;
  gap: 1rem;
  padding: 1rem 1.5rem .75rem;
}

.lesson__exit, .lesson__fullscreen {
  align-items: center;
  border: 1.5px solid var(--learn-line);
  border-radius: 999px;
  color: var(--learn-ink);
  display: flex;
  font-size: 1.5rem;
  block-size: 2.75rem;
  inline-size: 2.75rem;
  justify-content: center;
}

.lesson__titles { flex: 1; min-inline-size: 0; }
.lesson__title { font-weight: 700; }
.lesson__subtitle { color: var(--learn-muted); font-size: .875rem; font-weight: 600; }
.lesson__counter { color: var(--learn-muted); font-variant-numeric: tabular-nums; font-weight: 700; }

.lesson__track { background: rgb(from var(--learn-line) r g b / .3); block-size: 4px; }
.lesson__progress { background: var(--learn-accent); block-size: 100%; transition: inline-size .25s ease; }

.lesson__stage {
  cursor: pointer;
  display: grid;
  min-block-size: 0;
  padding: 1.5rem;
  user-select: none;
}

.lesson__card {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  min-block-size: 0;

  &[hidden] { display: none; }
}

.lesson__word {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 9vw, 9rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.lesson__card--scene { block-size: 100%; }

.scene-image {
  border-radius: .75rem;
  flex: 1 1 0;
  inline-size: 100%;
  min-block-size: 0;
  overflow: hidden;
  position: relative;
}

.scene-image__fill {
  filter: blur(26px);
  inset: 0;
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  opacity: .5;
  position: absolute;
  transform: scale(1.1);
}

.scene-image__picture {
  block-size: 100%;
  inline-size: 100%;
  object-fit: contain;
  position: relative;
}

.lesson__caption {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3.2vw, 3rem);
  font-weight: 700;
  line-height: 1.25;
  max-inline-size: 40ch;
  text-align: center;
}

.lesson__caption--line { cursor: pointer; }
.lesson__caption--question { color: var(--learn-accent); }

.lesson__controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: .75rem 1.5rem 1.5rem;
}

.lesson__button {
  background: var(--learn-accent);
  border-radius: .75rem;
  color: white;
  font-size: 1.125rem;
  font-weight: 700;
  min-inline-size: 12rem;
  padding: .9rem 1.5rem;
}

.lesson__button--quiet {
  background: transparent;
  border: 1.5px solid var(--learn-line);
  color: var(--learn-ink);
  min-inline-size: 8rem;

  &[hidden] { display: none; }
}

.lesson:fullscreen .lesson__bar,
.lesson:fullscreen .lesson__controls { opacity: .25; transition: opacity .2s; }
.lesson:fullscreen .lesson__bar:hover,
.lesson:fullscreen .lesson__controls:hover { opacity: 1; }

.learn-header {
  align-items: center;
  background: rgb(from var(--learn-background) r g b / .92);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid rgb(from var(--learn-line) r g b / .45);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  inset-block-start: 0;
  padding: .75rem max(1rem, calc((100% - 48rem) / 2));
  position: sticky;
  z-index: 1;
}

.learn-header__brand {
  align-items: center;
  display: flex;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 700;
  gap: .6rem;
}

.learn-header__mark { block-size: 2.25rem; inline-size: 2.25rem; }

.learn-header__tabs {
  display: flex;
  flex: 1;
  gap: .25rem;
  overflow-x: auto;
}

.learn-header__tab {
  border-radius: 999px;
  color: var(--learn-muted);
  font-weight: 700;
  padding: .4rem .9rem;
  white-space: nowrap;

  &:hover { background: rgb(from var(--learn-line) r g b / .2); }
  &[aria-current="page"] { background: var(--learn-accent); color: white; }
}

.learn-header__test {
  background: var(--learn-error);
  border-radius: 999px;
  color: white;
  font-size: .75rem;
  font-weight: 800;
  padding: .2rem .6rem;
}

.library {
  margin-inline: auto;
  max-inline-size: 48rem;
  padding: 2rem 1rem;
}

.library__empty { color: var(--learn-muted); font-weight: 600; margin-block: 1rem; }

.library__list { display: grid; gap: .75rem; list-style: none; margin-block-start: 1.5rem; padding: 0; }

.library__row {
  --row-color: var(--learn-story);

  align-items: center;
  background: rgb(255 255 255 / .85);
  border: 1.5px solid rgb(from var(--learn-line) r g b / .6);
  border-radius: .75rem;
  display: flex;
  gap: 1rem;
  padding: .9rem;
  transition: transform .15s ease;

  &:hover, &:focus-visible { transform: translateY(-2px); }
}

.library__row--category { --row-color: var(--learn-category); }

.library__badge {
  align-items: center;
  background: var(--row-color);
  border-radius: .6rem;
  color: white;
  display: flex;
  flex: none;
  font-size: 1.5rem;
  justify-content: center;
  block-size: 3.4rem;
  inline-size: 3.4rem;
}

.library__details { display: flex; flex: 1; flex-direction: column; gap: .2rem; min-inline-size: 0; }
.library__title { font-weight: 700; font-size: 1.1rem; }
.library__meta { color: var(--learn-muted); font-size: .85rem; font-weight: 600; }
.library__chevron { color: var(--learn-line); font-size: 1.75rem; font-weight: 700; }

.participants, .panel {
  background: rgb(255 255 255 / .74);
  border: 1px solid rgb(from var(--learn-line) r g b / .7);
  border-radius: .75rem;
  display: block;
  margin-block-end: .75rem;
  padding: 1rem;
}

.participants__legend { font-weight: 700; margin-block-end: .75rem; }
.participants__list { display: flex; flex-wrap: wrap; gap: 1rem; }

.participant {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  inline-size: 5.5rem;
}

.participant__input { opacity: 0; position: absolute; pointer-events: none; }

.participant__avatar {
  align-items: center;
  background: var(--avatar-color);
  border: 1px solid var(--learn-line);
  border-radius: 50%;
  color: white;
  display: flex;
  font-size: 1.25rem;
  font-weight: 700;
  justify-content: center;
  block-size: 4.6rem;
  inline-size: 4.6rem;
  opacity: .46;
  overflow: hidden;
  filter: saturate(.15);
  transition: opacity .15s, filter .15s;

  img { block-size: 100%; inline-size: 100%; object-fit: cover; }
}

.participant__name { color: var(--learn-muted); font-size: .85rem; font-weight: 600; text-align: center; }

.participant__input:checked + .participant__avatar {
  border: 3px solid var(--learn-accent);
  filter: none;
  opacity: 1;
}

.participant__input:checked ~ .participant__name { color: var(--learn-ink); }
.participant__input:focus-visible + .participant__avatar { outline: 2px solid var(--learn-accent); outline-offset: 2px; }

.panel__title { font-weight: 700; font-size: 1.1rem; }
.panel__meta { color: var(--learn-muted); font-size: .9rem; font-weight: 500; margin-block-start: .25rem; }
.panel__toggle { align-items: center; cursor: pointer; display: flex; justify-content: space-between; }

.panel__danger {
  color: var(--learn-error);
  font-weight: 700;
  inline-size: 100%;
  text-align: start;
}

.switch {
  appearance: none;
  background: rgb(from var(--learn-line) r g b / .5);
  border-radius: 999px;
  block-size: 1.75rem;
  cursor: pointer;
  inline-size: 3rem;
  position: relative;
  transition: background .15s;

  &::after {
    background: white;
    border-radius: 50%;
    block-size: 1.45rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / .25);
    content: "";
    inline-size: 1.45rem;
    inset-block-start: .15rem;
    inset-inline-start: .15rem;
    position: absolute;
    transition: transform .15s;
  }

  &:checked { background: var(--learn-accent); }
  &:checked::after { transform: translateX(1.25rem); }
}

@media (max-width: 40rem) {
  .learn-header__tabs { flex-basis: 100%; order: 1; }
}