/* ══════════════════════════════════════════════════════════════
 * Rappel: the review surface (js/render-session.js).
 *
 * Loaded after css/style.css, so anything both declare is settled here.
 * Tokens come from the CDN base.css; the only local knobs are --accent and
 * --accent-bright (style.css). Every other colour below is a color-mix of
 * those two, of --danger, or of a neutral. No literal colour appears here.
 *
 * Rhythm, top to bottom: bar, 12, progress, 24, card, 16, the one control,
 * 32, grades, 12, note. The column is a size container, so the 420px embed
 * and a 390px phone get the same narrow layout without a viewport query.
 * ══════════════════════════════════════════════════════════════ */

.rp-session,
.rp-done {
  /* The four grades, mapped onto tokens css/style.css already declares. --warn
     is danger mixed into the accent, which in oklch lands on amber: caution,
     not failure, which is what Hard means and Again does not. */
  --grade-again: var(--danger);
  --grade-hard: var(--warn);
  --grade-good: var(--accent);
  --grade-easy: color-mix(in oklch, var(--accent-bright) 72%, var(--text-primary));
  --rp-fade: 160ms;

  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  container-type: inline-size;
}

/* ── Keycaps: a box beside the label, never part of it ─────────
   Typed as kbd.rp-key so it keeps its weight against any bare-element rule a
   later block writes; the `.rp-grade kbd` it was written to outrank is gone
   from css/style.css along with the rest of the shadowed review block. */
kbd.rp-key {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  box-shadow: inset 0 -1px 0 var(--border);
}

/* ── Bar ──────────────────────────────────────────────────────── */
.rp-session__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
}
.rp-session__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}
.rp-session__title .section__title {
  min-width: 0;
  margin: 0;
  font-size: var(--text-lg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-session__title .section__title:focus-visible { outline-offset: 4px; }
.rp-session__count {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rp-session__end { min-height: var(--control-height); white-space: nowrap; }
.rp-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}

/* ── Progress ─────────────────────────────────────────────────── */
.rp-session .rp-progress {
  height: 4px;
  margin: var(--space-3) 0 0;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.rp-session .rp-progress__fill {
  height: 100%;
  background: var(--accent);
  transition: width var(--dur) var(--ease-out);
}

/* ── The card ─────────────────────────────────────────────────── */
.rp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-6);
  min-height: 280px;
  margin-top: var(--space-6);
  padding: var(--space-8);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 3%, var(--surface-2));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent),
    0 28px 44px -30px color-mix(in srgb, var(--bg) 92%, transparent);
}
.rp-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-bright) 70%, transparent);
  outline-offset: 4px;
}
.rp-face {
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.rp-face--front {
  font-size: clamp(1.6rem, 5cqi, 2.6rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.rp-face--back {
  font-size: clamp(1.3rem, 4cqi, 2.1rem);
  line-height: 1.3;
  color: var(--accent-bright);
}
.rp-card .rp-rule {
  border: 0;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.rp-card .rp-cloze {
  display: inline-block;
  min-width: 2.4ch;
  padding: 0 0.45em;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  color: var(--text-muted);
}
.rp-card .rp-cloze--shown {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-bright);
}
.rp-reveal { animation: rp-fade var(--rp-fade) var(--ease-out) both; }
@keyframes rp-fade { from { opacity: 0; } to { opacity: 1; } }

/* The last grade, acknowledged on the next card and gone before it matters. */
.rp-card__ack {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  border: 1px solid color-mix(in srgb, var(--g, var(--accent)) 45%, transparent);
  background: color-mix(in srgb, var(--g, var(--accent)) 12%, transparent);
  animation: rp-ack 2.4s var(--ease-out) both;
}
.rp-card__ack > span { color: var(--g, var(--accent)); }
.rp-card__ack--again { --g: var(--grade-again); }
.rp-card__ack--hard { --g: var(--grade-hard); }
.rp-card__ack--good { --g: var(--grade-good); }
.rp-card__ack--easy { --g: var(--grade-easy); }
/* The chip sits in the corner the card's own copy grows towards, so the card
   makes room for it rather than letting a three-line front run underneath. */
.rp-card:has(> .rp-card__ack) { padding-top: calc(var(--space-8) + var(--space-4)); }
@keyframes rp-ack {
  0% { opacity: 0; }
  8% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── The answer box ───────────────────────────────────────────── */
.rp-answer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.rp-session .rp-typed {
  width: min(100%, 28ch);
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-size: var(--text-xl);
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text-primary);
}
.rp-session .rp-typed::placeholder { color: var(--text-muted); }
.rp-session .rp-typed:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
  border-color: transparent;
}
.rp-answer__mode {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
}
.rp-answer__echo {
  margin: 0;
  text-align: center;
  font-size: var(--text-base);
  color: var(--text-secondary);
}
.rp-answer__echo b { font-weight: 600; color: var(--text-primary); }

/* Choices: the option is the name, the keycap sits at the far edge. */
.rp-session .rp-choices {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rp-session .rp-choice {
  min-height: 48px;
  justify-content: flex-start;
  gap: var(--space-3);
  padding-inline: var(--space-4) var(--space-2);
  text-align: left;
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--bg) 35%, transparent);
}
.rp-session .rp-choice:hover,
.rp-session .rp-choice:focus-visible { background: var(--surface-2); }
.rp-choice__label { flex: 1 1 auto; min-width: 0; }

/* ── Verdict: a chip with a glyph as well as a colour (WCAG 1.4.1) ─ */
.rp-session .rp-verdict {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 12px 4px 6px;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
}
.rp-verdict__glyph {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--bg);
}
.rp-session .rp-verdict--hit { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.rp-session .rp-verdict--hit .rp-verdict__glyph { background: var(--ok); }
.rp-session .rp-verdict--miss { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.rp-session .rp-verdict--miss .rp-verdict__glyph { background: var(--warn); }

/* ── The one control ──────────────────────────────────────────── */
.rp-flip {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}
.rp-flip__btn {
  width: min(100%, 320px);
  min-height: 48px;
  gap: var(--space-3);
  font-size: var(--text-base);
}
.rp-flip__btn .rp-key {
  color: color-mix(in srgb, var(--bg) 80%, transparent);
  border-color: color-mix(in srgb, var(--bg) 35%, transparent);
  background: color-mix(in srgb, var(--bg) 14%, transparent);
  box-shadow: none;
}
.rp-flip__label--touch { display: none; }
@media (hover: none) {
  .rp-flip__label { display: none; }
  .rp-flip__label--touch { display: inline; }
  .rp-flip__btn .rp-key { display: none; }
}

/* ── The four grades ──────────────────────────────────────────── */
.rp-session .rp-grades {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--space-8);
}
.rp-session .rp-grade {
  position: relative;
  display: grid;
  /* .btn centres its content. A one-column grid inherits that as a centred
     track, which put the label in the middle of a box whose keycap is pinned
     right. Naming the track is what makes justify-items: start mean anything. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-content: center;
  gap: 2px;
  min-height: 64px;
  height: auto;
  padding: var(--space-3) 44px var(--space-3) var(--space-4);
  text-align: left;
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--g) 45%, transparent);
  background: color-mix(in srgb, var(--g) 4%, transparent);
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.rp-grade--again { --g: var(--grade-again); }
.rp-grade--hard { --g: var(--grade-hard); }
.rp-grade--good { --g: var(--grade-good); }
.rp-grade--easy { --g: var(--grade-easy); }
.rp-session .rp-grade .rp-key {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}
.rp-grade__name { font-size: var(--text-base); font-weight: 600; }
/* Two lines reserved, because "I recalled it, with effort" takes two and the
   other three take one: without it the four intervals sit at four heights. */
.rp-grade__gloss {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-secondary);
  min-height: 2.4em;
}
.rp-grade__eta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.rp-session .rp-grade:hover,
.rp-session .rp-grade:focus-visible {
  background: color-mix(in srgb, var(--g) 12%, transparent);
  border-color: color-mix(in srgb, var(--g) 75%, transparent);
}
.rp-session .rp-grade.is-pressed,
.rp-session .rp-grade[aria-checked="true"] {
  background: color-mix(in srgb, var(--g) 18%, transparent);
  border-color: var(--g);
}
.rp-grade__note {
  margin: var(--space-3) 0 0;
  max-width: 70ch;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-muted);
}
/* The gloss is a desktop reading; on a phone the name and the ? sheet carry it. */
@media (max-width: 939px), (hover: none) {
  .rp-grade__gloss { display: none; }
}
/* A keycap on a device with no keyboard is an instruction nobody can follow.
   The flip button already dropped its one; the four grades and the choice
   options drew five more. The 44px a grade reserved for the cap goes back to
   the label. After the rules above, because it overrides them. */
@media (hover: none) {
  .rp-session .rp-grade .rp-key,
  .rp-session .rp-choice .rp-key { display: none; }
  .rp-session .rp-grade { padding-right: var(--space-4); }
  .rp-session .rp-choice { padding-inline: var(--space-4); }
}

/* ── End of session ───────────────────────────────────────────── */
.rp-done {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
}
.rp-done__deck {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
/* Focus lands here at the end of a session, so the ring hugs the words
   rather than drawing a full-width box that reads as a text field. */
.rp-done .section__title { font-size: var(--text-2xl); width: max-content; max-width: 100%; }
.rp-done__lead {
  margin: 0;
  max-width: 60ch;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text-secondary);
}
.rp-done__lead + .rp-done__lead { margin-top: calc(var(--space-2) * -1); }
.rp-done__bar {
  display: flex;
  gap: 2px;
  height: 10px;
  margin-top: var(--space-3);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}
.rp-done__seg { flex: 0 1 auto; min-width: 6px; background: var(--g); }
.rp-done__seg--again { --g: var(--grade-again); }
.rp-done__seg--hard { --g: var(--grade-hard); }
.rp-done__seg--good { --g: var(--grade-good); }
.rp-done__seg--easy { --g: var(--grade-easy); }
.rp-done__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.rp-done__item { display: inline-flex; align-items: center; gap: 8px; }
.rp-done__item b { font-weight: 600; color: var(--text-primary); }
.rp-done__swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--g, var(--border-strong)); }
.rp-done__item--again { --g: var(--grade-again); }
.rp-done__item--hard { --g: var(--grade-hard); }
.rp-done__item--good { --g: var(--grade-good); }
.rp-done__item--easy { --g: var(--grade-easy); }
.rp-done__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ── Narrow column: a 390px phone or the 420px embed ─────────── */
@container (max-width: 560px) {
  .rp-session .rp-grades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 480px) {
  .rp-card { min-height: 220px; padding: var(--space-6) var(--space-4); }
  .rp-card:has(> .rp-card__ack) { padding-top: calc(var(--space-6) + var(--space-4)); }
  .rp-session .rp-choices { grid-template-columns: minmax(0, 1fr); }
  .rp-flip__btn { width: 100%; }
  .rp-session__bar { gap: var(--space-2); }
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rp-reveal { animation: none; }
  .rp-card__ack { animation: none; opacity: 1; }
  .rp-session .rp-progress__fill,
  .rp-session .rp-grade { transition: none; }
}