/* Review + Practice pages — session UI (rs-*), hub panel (rv3-*), activity
   tiles (ra-*) and their dark-theme rules. Moved out of review/index.html on
   2026-10-10 so review/practice/ shares one stylesheet. Bump the ?v= token on
   both pages when this changes. */
/* Scoped to the Review hub so the shared stylesheet is untouched. Uses the
   existing Little Lantern design tokens (--paper/--ink/--red …). */
.review-page { max-width: 46rem; margin: 0 auto; display: grid; gap: 1.4rem; }
.review-today {
  position: relative;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,247,233,0.96)), var(--paper);
  border: 1.5px solid rgba(123, 92, 67, 0.34);
  border-radius: 16px;
  box-shadow: 0 16px 34px rgba(79, 51, 28, 0.16);
}
/* Plain label above the count: the site's sans, muted, no red, no tracking */
.review-today__eyebrow {
  margin: 0 0 0.3rem; font-family: var(--ll-font-sans);
  color: var(--ll-muted); font-size: 0.9rem; font-weight: 800; letter-spacing: 0;
}
.review-today__count { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.1; color: var(--ink); }
.review-today__note { margin: 0.4rem 0 0.9rem; color: rgba(60,43,32,0.6); font-weight: 600; font-size: 0.9rem; }
.review-today__meta { margin: 0.35rem 0 1.2rem; color: rgba(60,43,32,0.7); font-weight: 700; }
.review-start {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 3.6rem; padding: 0.9rem 1.9rem;
  font-size: 1.35rem; font-weight: 800; color: #fffaf0;
  background: var(--red-fill); border: 1px solid rgba(123,92,67,0.3); border-radius: var(--ll-radius, 10px);
  box-shadow: 0 14px 26px rgba(185, 68, 54, 0.28); text-decoration: none;
}
.review-start[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.review-all-link { display: inline-block; margin-top: 0.9rem; color: var(--red); font-weight: 700; text-decoration: none; font-size: 0.95rem; }
.review-all-link:hover { text-decoration: underline; }
.review-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.review-count {
  padding: 0.9rem 0.7rem; text-align: center;
  background: var(--paper); border: 1px solid rgba(123, 92, 67, 0.22); border-radius: 12px;
  box-shadow: 0 6px 16px rgba(79, 51, 28, 0.1);
}
.review-count strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; color: var(--ink); }
.review-count small { color: rgba(60,43,32,0.66); font-weight: 700; font-size: 0.82rem; }
.review-count.is-due strong { color: var(--red); }
.review-secondary { padding-top: 0.2rem; }
.review-secondary h2 { font-size: 1.15rem; margin: 0 0 0.6rem; color: rgba(60,43,32,0.82); }
.review-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.6rem; }
.review-link {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.8rem 1rem; color: var(--ink); text-decoration: none; font-weight: 700;
  background: rgba(255, 250, 240, 0.7); border: 1px dashed rgba(123, 92, 67, 0.3); border-radius: 10px;
}
.review-link:hover { border-style: solid; background: #fff; }
.review-link span[aria-hidden] { color: var(--red); }
@media (max-width: 560px) { .review-counts { grid-template-columns: repeat(2, 1fr); } }

/* --- session --- */
.rs-card {
  padding: clamp(1.3rem, 4vw, 2rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,247,233,0.97)), var(--paper);
  border: 1.5px solid rgba(123, 92, 67, 0.32); border-radius: 16px;
  box-shadow: 0 16px 34px rgba(79, 51, 28, 0.16);
}
.rs-progress { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.1rem; }
.rs-progress__label { font-weight: 800; color: rgba(60,43,32,0.7); font-size: 0.9rem; white-space: nowrap; }
.rs-progress__bar { flex: 1; height: 8px; background: rgba(123, 92, 67, 0.16); border-radius: 999px; overflow: hidden; }
.rs-progress__fill { display: block; height: 100%; background: var(--red-fill); border-radius: 999px; transition: width 200ms ease; }
.rs-instruction { margin: 0 0 0.9rem; color: rgba(60,43,32,0.72); font-weight: 700; text-align: center; }
.rs-prompt { text-align: center; margin-bottom: 1.1rem; }
/* tap-to-play speaker beside the word (shared dictionary-audio button,
   sized to sit next to the big hanzi) and in the answer panel */
.rs-hanzi .rs-speaker { display: inline-flex; vertical-align: middle; margin-left: 0.35rem; }
.rs-hanzi .rs-speaker .dictionary-audio-button svg { width: 1.9rem; height: 1.9rem; }
.rs-feedback__audio { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem; padding: 0.35rem 0.75rem 0.35rem 0.9rem; border-radius: 999px; background: rgba(255, 250, 240, 0.7); border: 1px solid rgba(123, 92, 67, 0.16); font-weight: 800; }
.rs-feedback__audio-zh { font-size: 1.25rem; color: var(--ink); }
.rs-feedback__audio-pinyin { font-size: 0.95rem; color: var(--red); }
.rs-feedback__audio .dictionary-audio-button { margin-left: 0; }
.rs-feedback__audio .dictionary-audio-button svg { width: 1.3rem; height: 1.3rem; }
:root[data-theme="dark"] .rs-feedback__audio { background: rgba(38, 31, 25, 0.7); border-color: rgba(230, 210, 180, 0.14); }
/* Dictionary page: the › beside the word / sentence flips the card to the
   word's entry (the readers' word card, in the flow: no float, shadow or close)
   plus its example sentence, and ‹ Back returns to the exercise. */
.rs-prompt { position: relative; padding-left: 2.8rem; padding-right: 2.8rem; } /* room for the ›, kept centred */
.rs-card { position: relative; }
.rs-dict-flip {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; min-width: 0; min-height: 0; padding: 0;
  border: 1px solid rgba(123, 92, 67, 0.25); border-radius: 999px; background: rgba(255, 250, 240, 0.85); box-shadow: none;
  color: var(--brown); font: inherit; font-size: 1.5rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.rs-dict-flip span { margin-top: -0.12em; }
.rs-dict-flip--corner { top: clamp(1.3rem, 4vw, 2rem); right: clamp(1.3rem, 4vw, 2rem); transform: none; }
.rs-dict-flip:hover { border-color: var(--red); color: var(--red); }
.rs-card.is-dict-open > :not(.rs-dict-view):not(.rs-progress) { display: none !important; }
.rs-card:not(.is-dict-open) > .rs-dict-view { display: none; }
.rs-dict-view { text-align: left; }
.rs-dict-back {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 0; margin: 0.9rem 0 0.2rem; padding: 0.35rem 0.9rem 0.35rem 0.7rem;
  border: 1px solid rgba(123, 92, 67, 0.25); border-radius: 999px; background: transparent; box-shadow: none;
  color: var(--brown); font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer;
}
.rs-dict-back span[aria-hidden] { font-size: 1.3em; line-height: 1; margin-top: -0.1em; }
.rs-dict-back:hover { border-color: var(--red); color: var(--red); }
.rs-dict-note { margin: 0.5rem 0 0; font-size: 0.82rem; color: rgba(60, 43, 32, 0.62); }
/* !important: on phones styles.css turns every .story-popover into a fixed
   bottom sheet; here it stays inside the card. */
.rs-dict.story-popover { position: static !important; top: auto !important; left: auto !important; right: auto; bottom: auto; width: auto; max-height: none; overflow: visible; margin: 0.7rem 0 0; border-radius: var(--ll-r-16, 16px); padding-bottom: 1.1rem; box-shadow: none; z-index: auto; }
.rs-dict .story-popover-close { display: none; }
/* On the review card the entry sits straight on the page: no box around the
   word and none around the example sentence (light and dark). */
.rs-dict.story-popover { background: none !important; border: 0 !important; padding: 0 !important; }
.rs-dict .word-card-example { background: none !important; border: 0 !important; box-shadow: none; padding: 0; margin: 0.7rem 0 0.4rem; }
:root[data-theme="dark"] .rs-dict-flip { background: rgba(38, 31, 25, 0.85); border-color: rgba(230, 210, 180, 0.24); color: var(--ll-text-muted); }
:root[data-theme="dark"] .rs-dict-back { border-color: rgba(230, 210, 180, 0.24); color: var(--ll-text-muted); }
:root[data-theme="dark"] :is(.rs-dict-flip, .rs-dict-back):hover { border-color: var(--red); color: var(--red); }
:root[data-theme="dark"] .rs-dict-note { color: var(--ll-text-muted); }
.rs-hanzi { font-family: Georgia, serif; font-size: clamp(3rem, 12vw, 5rem); line-height: 1; color: var(--ink); }
.rs-sub { color: rgba(60,43,32,0.7); font-weight: 700; margin-top: 0.35rem; }
.rs-reveal { text-align: center; margin: 0.5rem 0 1rem; }
.rs-pinyin { color: var(--red); font-size: 1.35rem; font-weight: 800; }
.rs-meaning { color: var(--ink); font-size: 1.5rem; margin-top: 0.2rem; }
.rs-example { color: rgba(60,43,32,0.7); margin-top: 0.6rem; font-size: 1.05rem; }
.rs-sentence { text-align: center; font-size: clamp(1.4rem, 5vw, 2rem); color: var(--ink); line-height: 1.5; margin-bottom: 0.4rem; }
.rs-options { display: grid; gap: 0.6rem; margin-top: 0.4rem; }
.rs-option {
  padding: 0.85rem 1rem; font-size: 1.1rem; font-weight: 700; color: var(--ink); text-align: center;
  background: rgba(255,250,240,0.9); border: 1.5px solid rgba(123, 92, 67, 0.28); border-radius: 12px; cursor: pointer;
}
.rs-option--zh { font-family: Georgia, serif; font-size: 1.6rem; }
.rs-option:hover:not(:disabled) { border-color: var(--red); }
.rs-option.is-correct { border-color: #4f7a3a; background: #eef6e6; color: #345327; }
.rs-option.is-wrong { border-color: var(--red); background: #fbe9e6; }
.rs-audio { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.rs-typed { display: flex; gap: 0.5rem; }
.rs-input { flex: 1; padding: 0.85rem 1rem; font-size: 1.15rem; border: 1.5px solid rgba(123, 92, 67, 0.3); border-radius: 12px; }
.rs-actions { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1.1rem; flex-wrap: wrap; }
.rs-btn { padding: 0.75rem 1.4rem; font-size: 1.05rem; font-weight: 800; border-radius: var(--ll-radius, 10px); border: 1px solid rgba(123,92,67,0.28); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.rs-btn--primary { background: var(--red-fill); color: #fffaf0; box-shadow: 0 12px 22px rgba(185,68,54,0.26); }
.rs-btn--soft { background: #f8e9c7; color: var(--ink); }
.rs-btn--ghost { background: transparent; color: rgba(60,43,32,0.8); }
/* scroll-margin: when the session scrolls the feedback into view on phones, keep it clear of the fixed bottom nav. */
.rs-feedback { margin-top: 1.1rem; padding: 1rem; border-radius: 12px; text-align: center; scroll-margin-bottom: 76px; }
.rs-feedback.is-correct { background: #eef6e6; border: 1px solid #cfe3bd; }
.rs-feedback.is-wrong { background: #fbe9e6; border: 1px solid #f0cfc9; }
.rs-feedback__title { margin: 0 0 0.3rem; font-weight: 800; font-size: 1.15rem; }
.rs-feedback__correction { margin: 0; color: var(--ink); font-weight: 700; }
/* Helped answers: a hint / trace / first look counts as practice. */
.rs-hint-row { margin-top: 0.75rem; text-align: center; }
.rs-hint-reveal { text-align: center; margin-top: 0.6rem; }
.rs-intro-note { text-align: center; font-weight: 600; }
.rs-feedback.is-assisted { border-color: rgba(200,140,40,0.55); }
.rs-feedback__note { margin: 0; color: rgba(60,43,32,0.75); font-size: 0.92rem; }
.rs-feedback__reveal { margin: 0.4rem 0 0; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.rs-feedback__reveal-zh { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.rs-feedback__reveal-sub { font-size: 0.95rem; font-weight: 700; color: rgba(60,43,32,0.75); }
.rs-feedback__more { margin-top: 0.7rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; }
.rs-feedback__note { color: rgba(60,43,32,0.7); font-weight: 700; font-size: 0.85rem; }
.rs-btn--tiny { padding: 0.35rem 0.7rem; font-size: 0.82rem; font-weight: 700; box-shadow: none; }
/* Sentence Builder tiles */
.rs-builder-answer { min-height: 3.2rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: center; padding: 0.6rem; margin-bottom: 0.9rem; border: 1.5px dashed rgba(123, 92, 67, 0.32); border-radius: 12px; background: rgba(255,250,240,0.6); }
.rs-builder-bank { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.rs-tile { font-family: Georgia, serif; font-size: 1.5rem; padding: 0.5rem 0.8rem; color: var(--ink); background: #fffaf0; border: 1.5px solid rgba(123, 92, 67, 0.3); border-radius: 10px; cursor: pointer; }
.rs-tile:hover:not(:disabled) { border-color: var(--red); }
.rs-tile:disabled { opacity: 0.35; cursor: default; }
.rs-tile--placed { background: #f8e9c7; border-color: rgba(123, 92, 67, 0.4); opacity: 1; }
.rs-summary { text-align: center; }
/* One plain heading in the site's Nunito 800, like the home section titles. */
.rs-summary__title {
  font-family: var(--ll-font-sans, "Nunito", system-ui, sans-serif); font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.1; margin: 0 0 1.1rem; color: var(--ink);
}
.rs-summary__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 1.2rem; }
.rs-stat strong { display: block; font-family: var(--ll-font-sans, "Nunito", system-ui, sans-serif); font-weight: 800; font-size: 1.8rem; color: var(--ink); }
.rs-stat small { color: rgba(60,43,32,0.66); font-weight: 700; font-size: 0.8rem; }

/* --- "How Review works" explainer (crafted scrapbook panel) --- */
.rv-how {
  position: relative;
  padding: 1.2rem clamp(1rem, 3vw, 1.7rem) 1.35rem;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 26px, rgba(143,112,72,0.06) 27px),
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,248,235,0.93)), var(--paper);
  border: 1px solid rgba(123,92,67,0.26);
  border-radius: 14px 20px 15px 22px;
  box-shadow: 0 12px 26px rgba(79,51,28,0.12);
}
.rv-how::before { /* a strip of CSS washi tape, hand-placed */
  content: ""; position: absolute; top: -0.72rem; left: 1.7rem;
  width: clamp(96px, 26vw, 112px); height: 22px; transform: rotate(-2.5deg); opacity: 0.85;
  background: var(--washi-bg); clip-path: var(--washi-clip); box-shadow: var(--washi-shadow);
}
.rv-how__head {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.55rem;
  font-family: Georgia, "Times New Roman", serif; font-size: 1.18rem; font-weight: 700; color: var(--red);
}
.rv-how__head::-webkit-details-marker { display: none; }
.rv-how__i {
  width: 1.5rem; height: 1.5rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  background: #fff2c8; border: 1px solid rgba(185,68,54,0.3); color: var(--red);
  font-family: Georgia, serif; font-style: italic; font-weight: 800; font-size: 0.95rem;
}
.rv-how__toggle { margin-left: auto; font-family: system-ui, sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--red); }
.rv-how__toggle::after { content: "Show ▾"; }
.rv-how[open] .rv-how__toggle::after { content: "Hide ▴"; }
.rv-how__steps {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem; align-items: start; margin-top: 1.2rem;
}
.rv-how__steps::before { /* the dashed "path" that links the three steps */
  content: ""; position: absolute; top: 1rem; left: 16.6%; right: 16.6%; height: 0; z-index: 0;
  border-top: 2px dashed rgba(185,68,54,0.38);
}
.rv-step { position: relative; z-index: 1; text-align: center; padding: 0 0.3rem; }
.rv-step__badge {
  width: 2rem; height: 2rem; margin: 0 auto 0.6rem; display: grid; place-items: center;
  font-family: Georgia, serif; font-weight: 700; color: #8a4a2c;
  background: #fff2c8; border: 1.5px solid rgba(185,68,54,0.3); border-radius: 50%;
  box-shadow: 0 3px 0 rgba(123,92,67,0.12);
}
.rv-step__art {
  width: 4.3rem; height: 4.3rem; margin: 0 auto 0.55rem; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #fffdf6, #fdf1da);
  border: 1px solid rgba(123,92,67,0.18); border-radius: 50%;
  box-shadow: 0 8px 16px rgba(79,51,28,0.12);
}
.rv-step__art img { width: 2.9rem; height: 2.9rem; object-fit: contain; }
.rv-step__title { font-family: Georgia, serif; font-size: 1.05rem; color: var(--ink); margin: 0 0 0.15rem; }
.rv-step__text { color: rgba(60,43,32,0.7); font-weight: 600; font-size: 0.85rem; line-height: 1.35; margin: 0; }
.rv-how__note {
  margin: 1.25rem auto 0; max-width: 33rem; padding-top: 0.95rem;
  border-top: 1px dashed rgba(123,92,67,0.24); text-align: center;
  font-family: "Comic Sans MS", "Segoe Print", cursive; color: rgba(90,62,40,0.85); font-size: 0.95rem;
}
.rv-how__note .rv-sprig { color: #6f9a4b; opacity: 0.75; padding: 0 0.35rem; }
@media (max-width: 560px) {
  .rv-how__steps { grid-template-columns: 1fr; gap: 1.1rem; }
  .rv-how__steps::before { display: none; }
}

/* Phones: the admin-only debug strip (per card + inside feedback) and the hub
   debug panel made every card ~1,000px tall on a staff phone. Keep them to
   desktop — the "Admin view" / "Show Review debug information" toggles still
   govern them there. */
@media (max-width: 640px) {
  .rs-debug, .rs-debug__inline, [data-review-debug-admin], [data-review-admin-only] { display: none !important; }
}

/* --- admin: Review debug panel (hub) --- */
[data-review-debug-admin] { margin: 0.2rem 0 0.2rem; }
.rdbg-panel {
  padding: 0.85rem 1rem; border: 1px dashed rgba(90, 90, 110, 0.5); border-radius: 12px;
  background: rgba(238, 240, 246, 0.6); color: #2b2f3a; font-size: 0.9rem;
}
.rdbg-panel__head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.rdbg-badge, .rs-debug__badge {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em;
  color: #fff; background: #5b6270; padding: 0.12rem 0.4rem; border-radius: 5px;
}
.rdbg-note { color: rgba(43, 47, 58, 0.6); font-size: 0.78rem; flex: 1 1 12rem; }
.rdbg-toggle { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; margin-bottom: 0.6rem; cursor: pointer; }
.rdbg-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rdbg-status { margin: 0.55rem 0 0; color: rgba(43, 47, 58, 0.72); font-size: 0.82rem; }

/* --- admin: per-card debug strip (session) --- */
.rs-debug {
  margin-top: 1rem; padding: 0.55rem 0.75rem; border: 1px dashed rgba(90, 90, 110, 0.5); border-radius: 10px;
  background: rgba(238, 240, 246, 0.55); color: #2b2f3a;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.78rem; line-height: 1.5;
}
.rs-debug__head { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 700; list-style: none; }
.rs-debug__head::-webkit-details-marker { display: none; }
.rs-debug__head::before { content: "▸"; color: rgba(43, 47, 58, 0.6); }
.rs-debug[open] .rs-debug__head::before { content: "▾"; }
.rs-debug__mono { margin-left: auto; color: rgba(43, 47, 58, 0.6); }
.rs-debug__body { margin-top: 0.5rem; display: grid; gap: 0.15rem; }
.rs-debug__row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.5rem; align-items: start; }
.rs-debug__k { color: rgba(43, 47, 58, 0.55); text-transform: lowercase; }
.rs-debug__v { color: #2b2f3a; overflow-wrap: anywhere; }
.rs-debug__inline { margin: 0.7rem 0 0; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.74rem; color: rgba(43, 47, 58, 0.7); }

/* --- Hanzi Writing activity (embedded Write Hanzi) --- */
.rs-write { text-align: center; }
.rs-write .rs-prompt { margin-bottom: 0.7rem; }
.rs-write__progress { margin: 0 0 0.5rem; font-weight: 800; color: rgba(60,43,32,0.6); font-size: 0.85rem; }
.rs-write__grid {
  width: 240px; max-width: 78vw; aspect-ratio: 1 / 1; margin: 0 auto;
  border: 1.5px dashed rgba(123, 92, 67, 0.4); border-radius: 14px; background: rgba(255,250,240,0.75);
  touch-action: none; /* drawing must not scroll the page */
}
.rs-write__grid svg { display: block; width: 100%; height: 100%; }
.rs-write__status { min-height: 1.3rem; margin: 0.6rem 0 0.2rem; color: rgba(60,43,32,0.72); font-weight: 700; font-size: 0.95rem; }
.rs-write__controls { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; margin-top: 0.4rem; }
.rs-write__skip { margin-top: 0.5rem; }
.rs-write__reveal { margin-top: 1rem; }
.rs-write__reveal .rs-hanzi { font-size: clamp(2.4rem, 9vw, 3.4rem); }

/* --- Review preferences (learner-facing) --- */
.review-prefs { padding-top: 0.2rem; }
.review-prefs h2 { font-size: 1.15rem; margin: 0 0 0.5rem; color: rgba(60,43,32,0.82); }
.review-pref {
  display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.75rem 0.9rem;
  background: rgba(255, 250, 240, 0.7); border: 1px dashed rgba(123, 92, 67, 0.3); border-radius: 10px;
}
.review-pref input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.review-pref__text strong { display: block; color: var(--ink); font-weight: 800; }
.review-pref__text small { color: rgba(60,43,32,0.68); font-weight: 600; }

/* --- "reviews adapt to your mastery" activity panel (learner-facing) --- */
.review-adapt {
  padding: clamp(1.1rem, 3.5vw, 1.8rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,248,236,0.95)), var(--paper);
  border: 1.5px solid rgba(123, 92, 67, 0.28);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(79, 51, 28, 0.13);
}
.review-adapt__title {
  margin: 0 0 1.15rem; text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 3.4vw, 1.6rem); line-height: 1.25; color: var(--ink);
}
.review-adapt__title em {
  font-style: normal; color: var(--red);
  border-bottom: 3px solid rgba(224, 138, 46, 0.85); padding-bottom: 1px;
}
.review-adapt__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
}
.ra-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 1rem 0.6rem 0.85rem; border-radius: 14px; text-align: center;
  border: 1px solid rgba(123, 92, 67, 0.14);
}
.ra-art {
  width: 3.4rem; height: 3.4rem; display: grid; place-items: center;
  font-size: 1.95rem; line-height: 1; position: relative;
}
.ra-label { font-weight: 800; color: var(--ink); font-size: 0.92rem; }
/* One tile look for all nine, in the site's cream / beige / brown palette */
.ra-tile {
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,246,230,0.95)), var(--cream);
  border: 1px solid rgba(216, 189, 145, 0.6);
  box-shadow: 0 6px 14px rgba(79, 51, 28, 0.06);
}
.ra-tile .ra-art { color: var(--brown); }
/* emoji glyphs tinted to the paper palette so they stop shouting */
.ra-art--emoji { filter: sepia(1) saturate(0.55) hue-rotate(-8deg) brightness(0.85); opacity: 0.9; }
/* Flip card: two stacked cards */
.ra-card { position: absolute; width: 2.1rem; height: 2.6rem; border-radius: 6px; }
.ra-card--back { background: var(--beige); transform: rotate(-8deg) translate(-5px, 2px); }
.ra-card--front {
  background: var(--red-fill); color: #fffaf0; display: grid; place-items: center;
  font-family: Georgia, serif; font-size: 1.35rem; transform: rotate(5deg) translate(3px, 0);
  box-shadow: 0 3px 8px rgba(79,51,28,0.2);
}
/* Meaning: badge + tick */
.ra-meaning .ra-badge {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #f2ddbb; color: var(--ink); border: 1px solid rgba(123,92,67,0.3);
  display: grid; place-items: center; font-family: Georgia, serif; font-size: 1.35rem;
}
.ra-meaning .ra-check {
  position: absolute; right: 0.05rem; bottom: 0.1rem; width: 1.2rem; height: 1.2rem; border-radius: 4px;
  background: var(--red-fill); color: #fff; display: grid; place-items: center; font-size: 0.78rem; font-weight: 900;
}
/* Pinyin: tone-marked syllable */
.ra-art--pinyin { font-family: var(--ll-font-sans, "Segoe UI", system-ui, sans-serif); font-size: 1.75rem; font-weight: 700; color: var(--red); }
/* Fill the gap */
.ra-art--fill {
  width: auto; display: flex; align-items: flex-end; gap: 0.05rem;
  font-family: Georgia, serif; font-size: 1.3rem; color: var(--ink);
}
.ra-blank { display: inline-block; width: 1.1rem; border-bottom: 2px solid var(--red); margin: 0 0.18rem 0.28rem; }
/* Sentence builder tiles */
.ra-art--tiles { width: auto; display: flex; gap: 0.28rem; }
.ra-art--tiles b {
  font-family: Georgia, serif; font-weight: 700; font-size: 1.05rem; color: var(--ink);
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 6px;
  border: 1px solid rgba(123,92,67,0.28);
}
.ra-art--tiles b:nth-child(1) { background: #fff6e6; }
.ra-art--tiles b:nth-child(2) { background: #f2ddbb; }
.ra-art--tiles b:nth-child(3) { background: #d8bd91; }
/* Write hanzi: character in a rice grid */
.ra-art--grid {
  width: 3rem; height: 3rem; font-family: Georgia, serif; font-size: 1.7rem; color: var(--red);
  border: 1.5px solid rgba(185,68,54,0.32); border-radius: 8px;
  background:
    linear-gradient(rgba(185,68,54,0.22), rgba(185,68,54,0.22)) center/100% 1px no-repeat,
    linear-gradient(rgba(185,68,54,0.22), rgba(185,68,54,0.22)) center/1px 100% no-repeat;
}
@media (max-width: 560px) { .review-adapt__grid { grid-template-columns: repeat(2, 1fr); } }

/* --- admin-only hub sections (hidden for normal learners) --- */
[data-review-admin-only] { display: none; }
html[data-ll-admin="1"] [data-review-admin-only] { display: block; }

/* ============================================================
   FROM-SCRATCH REVIEW LOOK (preview).
   One warm, unified spread instead of stacked cards. The site
   header/nav is untouched; the session, mode-art, how-step and
   debug styles above are reused verbatim (the running session
   renders into them). Everything below re-skins the hub only.
   ============================================================ */
.review-page { max-width: 62rem; gap: 1.9rem; }
/* The hub stacks the panel, the how-strip, the library and the admin
   accordion — space them out. :not([hidden]) so "Start review" can still
   hide the whole hub when the session begins. */
[data-review-hub]:not([hidden]) { display: flex; flex-direction: column; gap: 1.7rem; }

/* One big scrapbook surface holds Today + stats + the mode board */
.rv3-panel {
  position: relative;
  padding: clamp(1.6rem, 4vw, 2.7rem) clamp(1.35rem, 4vw, 2.7rem) clamp(1.7rem, 4vw, 2.5rem);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(143,112,72,0.045) 31px),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,248,235,0.97)), var(--paper);
  border: 1.5px solid rgba(123, 92, 67, 0.3);
  border-radius: 22px 24px 20px 26px;
  box-shadow: 0 22px 46px rgba(79, 51, 28, 0.16);
}
/* Hero row: focus copy on the left, soft lantern art on the right */
.rv3-hero { display: grid; grid-template-columns: 1fr; gap: 1.9rem; align-items: center; }
.rv3-eyebrow {
  font-family: var(--ll-font-sans); text-transform: none; letter-spacing: 0;
  font-size: 0.9rem; font-weight: 800; color: var(--ll-muted); margin: 0 0 0.25rem;
}
/* The big count / page title in the site's display face, like every other H1 */
.rv3-count { font-family: var(--ll-font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.04; color: var(--ink); margin: 0 0 0.55rem; }
.rv3-sub { color: rgba(60,43,32,0.62); font-weight: 600; margin: 0 0 1.4rem; max-width: 26rem; }
.rv3-note { margin: 0 0 0.9rem; color: rgba(60,43,32,0.6); font-weight: 600; font-size: 0.88rem; }
.review-start { font-size: 1.25rem; }
/* Stat chips woven under the hero (same data hooks) */
.rv3-stats { display: flex; flex-wrap: wrap; gap: 0.95rem; margin-top: 1.7rem; padding-top: 1.4rem; border-top: 1px dashed rgba(123,92,67,0.22); }
.rv3-stat { flex: 1 1 8rem; display: flex; align-items: center; gap: 0.6rem; padding: 0.62rem 0.85rem; border-radius: 12px; border: 1px solid rgba(123,92,67,0.14); }
.rv3-stat__i { width: 2rem; height: 2rem; border-radius: 8px; display: grid; place-items: center; font-size: 1rem; flex: 0 0 auto; }
.rv3-stat strong { font-family: Georgia, serif; font-size: 1.4rem; color: var(--ink); line-height: 1; display: block; }
.rv3-stat small { color: rgba(60,43,32,0.66); font-weight: 700; font-size: 0.74rem; }
.rv3-stat.is-due { background: #fbeee7; } .rv3-stat.is-due .rv3-stat__i { background: #f4d9c9; }
.rv3-stat.is-learn { background: #fdf3d6; } .rv3-stat.is-learn .rv3-stat__i { background: #f6e2a8; }
.rv3-stat.is-needs { background: #fbe9ec; } .rv3-stat.is-needs .rv3-stat__i { background: #f3c9cf; }
.rv3-stat.is-known { background: #eaf3df; } .rv3-stat.is-known .rv3-stat__i { background: #cfe3bd; }

/* Divider + mode board inside the same panel */
.rv3-rule { margin: 1.8rem 0 1.35rem; border: 0; border-top: 2px dashed rgba(185,68,54,0.18); }
.rv3-modes-title { text-align: center; font-family: var(--ll-font-display); font-weight: 600; font-size: clamp(1.15rem, 3.2vw, 1.5rem); color: var(--ink); margin: 0 0 1.15rem; }
.rv3-modes-title em { font-style: normal; color: inherit; }
.rv3-modes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.05rem; }
.rv3-modes .ra-desc { color: rgba(60,43,32,0.56); font-weight: 600; font-size: 0.75rem; line-height: 1.3; margin: 0.05rem 0 0; }
.rv3-modes .ra-tile { padding: 1.15rem 0.9rem 1rem; gap: 0.5rem; }

@media (max-width: 640px) { .rv3-modes { grid-template-columns: repeat(2, 1fr); } }

/* Compact how-it-works ribbon (below the panel, lighter zone) */
.rv-how { padding: 1rem clamp(1rem,3vw,1.5rem) 1.1rem; box-shadow: 0 8px 18px rgba(79,51,28,0.08); }
.rv-how::before { content: none; } /* drop this panel's washi tape too */
.rv-how__steps { margin-top: 0.9rem; }
.rv-step__art { width: 3.2rem; height: 3.2rem; margin-bottom: 0.45rem; }
.rv-step__art img { width: 2rem; height: 2rem; }
.rv-step__badge { width: 1.6rem; height: 1.6rem; margin-bottom: 0.4rem; font-size: 0.85rem; }
.rv-step__title { font-size: 0.98rem; }

/* Your review library — 3-up cards */
.rv2-library-wrap { display: block; }
.rv2-section-title { font-family: Georgia,"Times New Roman",serif; font-size: 1.3rem; color: var(--ink); margin: 0 0 0.7rem; }
.rv2-library { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.rv2-libcard {
  display: flex; flex-direction: column; gap: 0.3rem; padding: 1.2rem 1.1rem; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,248,236,0.92)), var(--paper);
  border: 1px solid rgba(123,92,67,0.2); box-shadow: 0 8px 20px rgba(79,51,28,0.08);
}
.rv2-libcard__num { font-family: Georgia, serif; font-size: 1.9rem; color: var(--ink); line-height: 1; }
.rv2-libcard__name { font-weight: 800; color: var(--ink); }
.rv2-libcard__desc { color: rgba(60,43,32,0.62); font-weight: 600; font-size: 0.85rem; flex: 1; margin: 0.15rem 0 0.2rem; }
.rv2-libcard__link { margin-top: 0.3rem; color: var(--red); font-weight: 800; text-decoration: none; font-size: 0.9rem; align-self: flex-start; }
.rv2-libcard__link:hover { text-decoration: underline; }
.rv2-libcard .review-pref { border: none; background: none; padding: 0.1rem 0; }
@media (max-width: 820px) { .rv2-library { grid-template-columns: 1fr; } }

/* Admin debugging — collapsed accordion at the very bottom */
.rv2-admin { margin-top: 0.4rem; }
.rv2-admin > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
  font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; font-weight: 700; color: #5b6270;
  padding: 0.65rem 0.9rem; border: 1px dashed rgba(90,90,110,0.45); border-radius: 10px; background: rgba(238,240,246,0.5);
}
.rv2-admin > summary::-webkit-details-marker { display: none; }
.rv2-admin > summary::after { content: "▾"; margin-left: auto; }
.rv2-admin[open] > summary::after { content: "▴"; }
.rv2-admin__body { padding-top: 0.85rem; }

/* ============================================================
   DARK THEME. Everything above hard-codes cream surfaces and dark-brown
   muted text (rgba(60,43,32,…)), which on a dark page means glaring cream
   panels and invisible notes. Same structure, dark paper, light ink.
   ============================================================ */
/* Big surfaces: hub panel, session card, mastery panel, explainer */
:root[data-theme="dark"] .rv3-panel {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(230,210,180,0.035) 31px),
    linear-gradient(180deg, #2b241d, #241d18);
  border-color: var(--ll-border-strong);
  box-shadow: var(--ll-elev-2);
}
:root[data-theme="dark"] .review-today,
:root[data-theme="dark"] .rs-card,
:root[data-theme="dark"] .review-adapt {
  background: linear-gradient(180deg, #2b241d, #241d18);
  border-color: var(--ll-border-strong);
  box-shadow: var(--ll-elev-2);
}
:root[data-theme="dark"] .rv-how {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 26px, rgba(230,210,180,0.035) 27px),
    linear-gradient(180deg, #2b241d, #241d18);
  border-color: var(--ll-border);
  box-shadow: var(--ll-elev-1);
}
/* Smaller cards and rows */
:root[data-theme="dark"] .review-count,
:root[data-theme="dark"] .rv2-libcard {
  background: linear-gradient(180deg, #2b241d, #241d18);
  border-color: var(--ll-border);
  box-shadow: var(--ll-elev-1);
}
:root[data-theme="dark"] .review-link,
:root[data-theme="dark"] .review-pref {
  background: rgba(43, 36, 29, 0.7);
  border-color: rgba(230, 210, 180, 0.18);
}
:root[data-theme="dark"] .review-link:hover { background: #2b241d; }
:root[data-theme="dark"] .rv2-libcard .review-pref { background: none; }
/* Mode tiles */
:root[data-theme="dark"] .ra-tile {
  background: linear-gradient(180deg, #2f271f, #261f19);
  border-color: rgba(230, 210, 180, 0.12);
  box-shadow: var(--ll-elev-0);
}
:root[data-theme="dark"] .ra-meaning .ra-badge { background: #4a3d32; border-color: var(--ll-border-strong); }
:root[data-theme="dark"] .ra-art--tiles b { border-color: var(--ll-border-strong); }
:root[data-theme="dark"] .ra-art--tiles b:nth-child(1) { background: #3a2f27; }
:root[data-theme="dark"] .ra-art--tiles b:nth-child(2) { background: #4a3d32; }
:root[data-theme="dark"] .ra-art--tiles b:nth-child(3) { background: #5a4a3b; }
/* Stat chips keep their colour meaning, as deep tints */
:root[data-theme="dark"] .rv3-stat { border-color: rgba(230, 210, 180, 0.1); }
:root[data-theme="dark"] .rv3-stat.is-due { background: #33241e; } :root[data-theme="dark"] .rv3-stat.is-due .rv3-stat__i { background: #4a2f25; }
:root[data-theme="dark"] .rv3-stat.is-learn { background: #33291a; } :root[data-theme="dark"] .rv3-stat.is-learn .rv3-stat__i { background: #4a3a1c; }
:root[data-theme="dark"] .rv3-stat.is-needs { background: #34222a; } :root[data-theme="dark"] .rv3-stat.is-needs .rv3-stat__i { background: #4b2d36; }
:root[data-theme="dark"] .rv3-stat.is-known { background: #222a1c; } :root[data-theme="dark"] .rv3-stat.is-known .rv3-stat__i { background: #33422a; }
/* How-it-works badges and art discs */
:root[data-theme="dark"] .rv-how__i,
:root[data-theme="dark"] .rv-step__badge { background: #3a3016; border-color: rgba(212, 175, 85, 0.35); }
:root[data-theme="dark"] .rv-step__badge { color: #e0b48a; }
:root[data-theme="dark"] .rv-step__art {
  background: radial-gradient(circle at 50% 38%, #3a2f27, #2b241d);
  border-color: var(--ll-border);
}
/* Session: answers, input, buttons, builder tiles, writing grid */
:root[data-theme="dark"] .rs-option {
  background: #2b241d; border-color: var(--ll-border-strong); color: var(--ll-text);
}
:root[data-theme="dark"] .rs-option.is-correct { background: #1f2a1a; border-color: #5b8a45; color: #c4dfae; }
:root[data-theme="dark"] .rs-option.is-wrong { background: #3a2620; border-color: #a5523f; color: #f1c4b8; }
:root[data-theme="dark"] .rs-input {
  background: #1d1713; border-color: var(--ll-border-strong); color: var(--ll-text);
}
:root[data-theme="dark"] .rs-btn { border-color: var(--ll-border-strong); }
:root[data-theme="dark"] .rs-btn--soft { background: #3a3016; color: var(--ll-text); }
:root[data-theme="dark"] .rs-btn--ghost { color: var(--ll-text-muted); }
:root[data-theme="dark"] .rs-feedback.is-correct { background: #1f2a1a; border-color: #3f5a2e; }
:root[data-theme="dark"] .rs-feedback.is-wrong { background: #3a2620; border-color: #6b3a30; }
:root[data-theme="dark"] .rs-progress__bar { background: rgba(230, 210, 180, 0.12); }
:root[data-theme="dark"] .rs-builder-answer {
  background: rgba(29, 23, 19, 0.6); border-color: rgba(230, 210, 180, 0.22);
}
:root[data-theme="dark"] .rs-tile { background: #2b241d; border-color: var(--ll-border-strong); }
:root[data-theme="dark"] .rs-tile--placed { background: #3a3016; border-color: rgba(212, 175, 85, 0.4); }
:root[data-theme="dark"] .rs-write__grid {
  background: rgba(43, 36, 29, 0.75); border-color: rgba(230, 210, 180, 0.25);
}
/* Every muted note on this page was dark brown at partial opacity */
:root[data-theme="dark"] .review-today__note,
:root[data-theme="dark"] .review-today__meta,
:root[data-theme="dark"] .review-count small,
:root[data-theme="dark"] .review-secondary h2,
:root[data-theme="dark"] .review-prefs h2,
:root[data-theme="dark"] .review-pref__text small,
:root[data-theme="dark"] .rs-progress__label,
:root[data-theme="dark"] .rs-instruction,
:root[data-theme="dark"] .rs-sub,
:root[data-theme="dark"] .rs-example,
:root[data-theme="dark"] .rs-feedback__note,
:root[data-theme="dark"] .rs-feedback__reveal-sub,
:root[data-theme="dark"] .rs-stat small,
:root[data-theme="dark"] .rs-write__progress,
:root[data-theme="dark"] .rs-write__status,
:root[data-theme="dark"] .rv-step__text,
:root[data-theme="dark"] .rv-how__note,
:root[data-theme="dark"] .rv3-sub,
:root[data-theme="dark"] .rv3-note,
:root[data-theme="dark"] .rv3-stat small,
:root[data-theme="dark"] .rv3-modes .ra-desc,
:root[data-theme="dark"] .rv2-libcard__desc { color: var(--ll-text-muted); }
/* Dashed dividers drawn in dark brown */
:root[data-theme="dark"] .rv3-stats,
:root[data-theme="dark"] .rv-how__note { border-top-color: rgba(230, 210, 180, 0.16); }
/* Admin-only debug panels: grey-on-pale → grey-on-dark */
:root[data-theme="dark"] .rdbg-panel,
:root[data-theme="dark"] .rs-debug,
:root[data-theme="dark"] .rv2-admin > summary {
  background: rgba(60, 64, 78, 0.35); border-color: rgba(160, 165, 185, 0.4); color: #d5d9e3;
}
:root[data-theme="dark"] .rdbg-note,
:root[data-theme="dark"] .rdbg-status,
:root[data-theme="dark"] .rs-debug__k,
:root[data-theme="dark"] .rs-debug__mono,
:root[data-theme="dark"] .rs-debug__inline { color: rgba(213, 217, 227, 0.7); }
:root[data-theme="dark"] .rs-debug__v { color: #d5d9e3; }