/* Athena teaching pass. Tokens from rp-style.css only, no new colour values, and no
 * component redefined that app.css already owns. Everything here is either the frame the
 * six screens sit in, or a small adjustment that keeps a house component tappable when
 * it is being used as a demonstration rather than as itself.
 *
 * Mobile first, and then it keeps going. The extra width on a tablet or a desktop buys
 * air and composition around the column, never a longer line: the teaching copy obeys the
 * same 34em measure as the curriculum (FR-10a.3), because a person who finds reading hard
 * finds the instructions hard first.
 *
 * Hover states live inside @media (hover: hover) so a tablet never sticks in one, and
 * every tap target stays at least 44px at every width. */

/* ── the flow ──────────────────────────────────────────────────────────
   Full screen from directly under the app's own top bar, so the settings gear and the
   way back in stay visible and can be pointed at while the tour talks about them. The
   offset is measured in JS, because the bar grows when the learner picks a larger text
   size. */
.rp-teach {
  position: fixed;
  inset: var(--rp-teach-top, 0) 0 0 0;
  z-index: var(--z-index-modal);
  background: var(--color-surface-dim);
  color: var(--color-on-surface);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}
/* The page underneath does not scroll behind the flow. */
body.rp-teach-open-body { overflow: hidden; }

.rp-teach-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-outline-variant);
}
/* The progress indicator FR-10.2 asks for, drawn the same way onboarding draws it so a
   learner recognises the shape rather than learning a second one. */
.rp-teach-dots { display: flex; gap: 6px; flex: 1; min-width: 0; }
.rp-teach-dots i {
  flex: 1;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-outline-variant);
}
.rp-teach-dots i.on { background: var(--color-info-on); }

.rp-teach-icon {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-on-surface-muted);
  font-size: 1.1rem;
  font-family: inherit;
  cursor: pointer;
}

.rp-teach-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--spacing-4);
}
.rp-teach-card {
  margin: 0 auto;
  max-width: 560px;
  width: 100%;
  outline: none;
}
.rp-teach-card > h2 { margin-bottom: var(--spacing-3); }
.rp-teach-line { margin: var(--spacing-4) 0 var(--spacing-4); }
.rp-teach-demo { margin-top: var(--spacing-2); }
.rp-teach-demo > .card:last-child { margin-bottom: 0; }

.rp-teach-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--spacing-3) var(--spacing-4) calc(var(--spacing-4) + env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-top: 1px solid var(--color-outline-variant);
}
.rp-teach-foot .btn { margin-top: 0; }
.rp-teach-foot > * { width: 100%; max-width: 560px; margin-inline: auto; }

/* ── the demonstrations ──────────────────────────────────────────────── */
.rp-teach-ill {
  width: 100%;
  max-width: 140px;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* Forward and back, side by side, as two arrows. A learner who reads nothing still sees
   which one goes which way. */
.rp-teach-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rp-teach-pair .btn { margin-top: 0; font-size: 1.5rem; min-height: 60px; }
.rp-teach-fake { margin-bottom: var(--spacing-3); }

.rp-teach-opts .opt:last-child { margin-bottom: 0; }
/* What happens after a paper that did not pass, shown as the two states it moves
   between rather than described. */
.rp-teach-after {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
}
.rp-teach-arrow { color: var(--color-on-surface-muted); font-size: 1.2rem; }

/* .rp-half is a label in the journey. Here it is something a learner taps, so it grows
   to a real target without changing what it looks like. */
.rp-teach-half {
  min-height: 44px;
  padding: 10px 14px;
  font-size: .8rem;
  font-family: inherit;
  cursor: pointer;
}
.rp-teach-done {
  margin-top: var(--spacing-3);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-success-light);
  color: var(--color-success-on);
  font-weight: var(--font-weight-bold);
  font-size: .9rem;
}

/* ── the way back in, in the top bar beside the gear ─────────────────── */
/* No colour of its own: it borrows the bar's white through currentColor, so it is right
   in both themes without naming a value. */
.rp-teach-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-full);
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: .78rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.rp-teach-open[hidden] { display: none; }
.rp-teach-open svg { width: 20px; height: 20px; flex: 0 0 auto; }
.rp-teach-open-label { display: none; }
@media (min-width: 420px) { .rp-teach-open-label { display: inline; } }

/* ── the control being talked about, ringed where it actually lives ──── */
.rp-lit {
  position: relative;
  outline: 3px solid var(--color-warning);
  outline-offset: 3px;
  border-radius: var(--radius-full);
  animation: rp-teach-pulse 1.5s var(--ease-settle) infinite;
}
@keyframes rp-teach-pulse {
  0%, 100% { outline-color: var(--color-warning); }
  50%      { outline-color: var(--color-warning-on); }
}

/* ── one time hints ──────────────────────────────────────────────────── */
.rp-teach-hint {
  position: fixed;
  z-index: var(--z-index-toast);
  background: var(--color-surface);
  color: var(--color-on-surface);
  border: 2px solid var(--color-info-on);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  box-shadow: var(--shadow-pop);
}
.rp-teach-hint p { margin: 0 0 var(--spacing-3); font-size: .95rem; line-height: 1.5; }
.rp-teach-hint-row { display: flex; gap: 10px; align-items: center; }
.rp-teach-hint-row .btn { width: auto; min-height: 44px; padding: 10px 18px; margin-top: 0; }
.rp-teach-hint-row .speak { flex: 1; justify-content: center; }

/* ── wider than a phone ──────────────────────────────────────────────── */
/* The flow keeps one thing on the screen at a time at every width. What the extra room
   buys is air around the column and a footer that reads as a footer, not a longer line
   of text and not a 360px strip stranded in a grey field. */
@media (min-width: 680px) {
  .rp-teach-bar { padding: var(--spacing-4) var(--spacing-6); }
  .rp-teach-dots { max-width: 560px; }
  /* Centred when the screen fits, top aligned when it does not. `safe` is the whole
     point: a centred flex or grid item that is taller than its box overflows EQUALLY in
     both directions, and the overflow above the top is unreachable by scrolling, so the
     first control on a long screen slides up behind the top bar. A browser that does not
     know the keyword drops the declaration and top aligns, which is the harmless half. */
  .rp-teach-scroll {
    padding: var(--spacing-6) var(--spacing-6) var(--spacing-8);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: safe center;
  }
  .rp-teach-card { padding: var(--spacing-6); }
  .rp-teach-foot {
    flex-direction: row-reverse;
    justify-content: center;
    padding: var(--spacing-4) var(--spacing-6) calc(var(--spacing-4) + env(safe-area-inset-bottom));
  }
  .rp-teach-foot > * { width: auto; min-width: 190px; margin-inline: 0; }
  .rp-teach-foot .btn { min-height: 52px; }
}
@media (min-width: 1180px) {
  .rp-teach-card { max-width: calc(34em + 5rem); }
  .rp-teach-dots { max-width: calc(34em + 5rem); }
}

/* Pointer hover only. A tablet must never stick in a hover state it cannot leave. */
@media (hover: hover) and (pointer: fine) {
  .rp-teach-icon:hover { background: var(--color-surface-container); color: var(--color-on-surface); }
  .rp-teach-open:hover { background: var(--color-brand-blue-dark); }
  .rp-teach-half:hover { border-color: var(--color-outline); }
}

/* Less movement for anybody who asked their operating system for less of it. The ring
   stays, because a static outline is the part that carries the meaning. */
@media (prefers-reduced-motion: reduce) {
  .rp-lit { animation: none; }
}