/* recallit demo · Bubble components (built on hum-tokens.css + hum.css) */

.demo { display: block; }
.demo__intro { margin-bottom: 2.5rem; }
.demo__intro .section__title { max-width: 18ch; }

/* ── Comprehension tutor card ─────────────────────────────────── */
.tcard {
  background: var(--color-paper); border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  display: grid; gap: 1.1rem; margin-bottom: clamp(3rem, 7vh, 5rem);
}
.tcard__q { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2vw + 0.6rem, 1.9rem); line-height: 1.18; letter-spacing: -0.02em; color: var(--color-ink); margin: 0; }

.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tab {
  min-height: 40px; padding: 0.45rem 1rem; border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-rule); background: var(--color-paper-2);
  font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; color: var(--color-ink-2);
  cursor: pointer; transition: background 160ms, border-color 160ms, color 160ms;
}
.tab:hover { color: var(--color-ink); }
.tab.is-active { background: var(--color-mint); border-color: var(--color-mint-deep); color: var(--color-ink); box-shadow: 0 3px 0 -1px var(--color-mint-deep); }

.tcard__answer {
  margin: 0; padding: 1rem 1.2rem; border-radius: var(--radius-input);
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.45; color: var(--color-ink);
}

/* rating badge + receipt */
.grade { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; }
.grade__rating {
  display: inline-flex; align-items: center; padding: 0.3rem 0.85rem; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em;
  background: var(--color-paper-2); color: var(--color-ink-2);
}
.grade.is-good .grade__rating, .grade.is-easy .grade__rating { background: var(--tint-mint); color: var(--color-mint-deep); }
.grade.is-hard .grade__rating { background: var(--tint-pear); color: var(--color-accent-deep); }
.grade.is-again .grade__rating { background: var(--tint-coral); color: var(--color-accent-3-deep); }
.grade__why { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-muted); }

/* per-checkpoint coverage */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.check { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.85rem 1rem; border-radius: var(--radius-input); border: 1px solid var(--color-rule); background: var(--color-paper); }
.check.hit { border-color: color-mix(in oklch, var(--color-mint) 55%, var(--color-rule)); }
.check__mark { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; flex: 0 0 auto; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.check.hit .check__mark { background: var(--color-mint); color: var(--color-ink); box-shadow: 0 2px 0 -0.5px var(--color-mint-deep); }
.check.miss .check__mark { background: var(--color-paper-2); color: var(--color-muted); border: 1px solid var(--color-rule); }
.check__claim { font-weight: 600; color: var(--color-ink); font-size: 0.9375rem; }
.check__opt { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.check__cite { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-ink-2); line-height: 1.6; }

.tcard__note { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em; color: var(--color-muted); margin: 0; max-width: 60ch; line-height: 1.6; }

/* ── Voice player ─────────────────────────────────────────────── */
.demo__split { margin-bottom: 2rem; }
.player { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "card readout" "nav nav"; gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }

/* the flip card as a Bubble card */
.flip { grid-area: card; perspective: 1100px; cursor: pointer; width: 100%; aspect-ratio: 5 / 3.6; border: 0; background: transparent; padding: 0; }
.flip__inner { position: relative; width: 100%; height: 100%; transition: transform var(--dur-long) var(--ease-soft); transform-style: preserve-3d; }
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
@media (hover: hover) { .flip:hover .flip__inner { transform: rotateY(180deg); } }
.flip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-card); }
.flip__face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: var(--radius-card); border: 1.5px solid var(--color-rule); box-shadow: var(--shadow-card);
  padding: 1.4rem; display: flex; flex-direction: column; justify-content: space-between; gap: 0.6rem;
}
.flip__face--front { background: var(--color-paper); }
.flip__face--back { background: var(--tint-mint); transform: rotateY(180deg); border-color: var(--color-mint-deep); }
.flip__hint { font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-muted); }
.flip__en, .flip__es { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--color-ink); }
.demo__ctx { font-size: 0.85rem; color: var(--color-ink-2); }
.demo__audio { align-self: flex-start; }

/* readout card */
.readout { grid-area: readout; background: var(--color-paper); border: 1.5px solid var(--color-rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: clamp(1.25rem, 3vw, 1.85rem); display: grid; gap: 0.6rem; }
.readout .eyebrow { margin-bottom: 0.25rem; }
.readout__typed { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; color: var(--color-ink); margin: 0; }
.readout__next { font-size: 0.95rem; color: var(--color-ink-2); margin: 0.25rem 0 0; }
.readout__next strong { color: var(--color-mint-deep); font-weight: 700; }

.sched { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.sched li { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.85rem; border-radius: var(--radius-pill); border: 1px solid var(--color-rule); background: var(--color-paper-2); }
.sched__k { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.sched__v { font-size: 0.875rem; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.sched li.is-picked { background: var(--tint-mint); border-color: var(--color-mint-deep); }
.sched li.is-picked .sched__k { color: var(--color-mint-deep); }
.sched li.is-picked .sched__v { color: var(--color-ink); font-weight: 700; }

.player__nav { grid-area: nav; display: flex; align-items: center; justify-content: space-between; }
.player__count { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }

.demo__provenance { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.04em; color: var(--color-muted); max-width: 60ch; line-height: 1.7; margin: 2.5rem 0 0; }

@media (max-width: 720px) {
  .player { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "readout" "nav"; }
  .flip { max-width: 26rem; justify-self: center; }
}