/* Tikrar — the review session's palette (T-243 / D-T26).
 *
 * "The review session itself please do not change the feeling of our first design: unify the colouring
 * template yet no change in places, design or feeling." So this file changes COLOUR AND SURFACE ONLY.
 * Not one element moves, no class is renamed, and the order the session renders in is untouched:
 * counter, progress, card, masked answer, primer, End session, four ratings. There is no bar in a
 * session — the sheet the review appears in (bevel-stats-review.html) draws none either.
 *
 * The four ratings keep their marks: the colour that names the outcome. What the sheet draws is a 24 px
 * strip above the word instead of the old rail down the inline edge, so the rail steps aside here and the
 * strip takes its place (T-190 removed the interval numbers; the names stay, alone).
 */

body.is-session { background: #0A0C0B; }

/* ── the progress line ────────────────────────────────────────────────── */
.review-body .progress { height: 3px; border-radius: 2px; background: #242B28; margin: 8px 0 0; }
.review-body .progress__bar { background: #C9F45A; border-radius: 2px; }

/* ── the card ─────────────────────────────────────────────────────────── */
.review-body .qcard {
  background: #131716; border: 1px solid #242B28; border-radius: 18px;
  padding: 18px; margin-top: 16px; box-shadow: none;
}
.review-body .qcard__prompt { font-size: 20px; line-height: 1.45; letter-spacing: -.01em; }

/* ── the masked answer ────────────────────────────────────────────────── */
.review-body .reveal { margin-top: 14px; }
.review-body .reveal__btn,
.review-body .reveal__btn:hover,
.review-body .reveal.is-revealed .reveal__btn,
.review-body .reveal:not(.is-revealed) .reveal__btn {
  background: #0F1413; border: 1px solid #22302B; border-radius: 14px; padding: 13px;
}
.review-body .reveal__label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #5BE0B0; margin-bottom: 2px; }
.review-body .reveal:not(.is-revealed) .reveal__content { filter: blur(3.4px); opacity: .5; }
.review-body .reveal__content { font-size: 13.5px; line-height: 1.6; }
.review-body .reveal__hint { margin-top: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0;
  color: #5BE0B0; }
.review-body .reveal__hide { min-height: 44px; padding: 0 14px; margin-top: 8px; border-radius: 999px;
  border: 1px solid #2A332F; color: #8D9A94; background: none; }

/* ── the primer row: one line, the label bold, its state quiet on the far side ── */
.review-body .psources { margin: 12px 0 0; }
.review-body .psources__toggle,
.review-body .psources__toggle:hover {
  border: 1px solid #2A332F; border-radius: 14px; background: #0F1413;
  padding: 11px 13px; color: #F2F5F3; font-size: 13px; gap: 10px;
}
.review-body .psources__label { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
/* the state is the long half ("No primer yet — build one"), so IT takes the wrap, never the name */
.review-body .psources__state { flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 400;
  color: #8D9A94; line-height: 1.3; text-align: end; }

/* ── the foot: End session, then the four ratings ─────────────────────── */
.session-footer { background: #0A0C0B; border-top: 1px solid #242B28; }
.session-footer__exit { background: #0A0C0B; border-bottom: 0; }
.session-footer__exit .btn,
.session-footer__exit .btn:hover { background: none; border: 0; color: #8D9A94;
  font-size: 13px; font-weight: 600; }

.session-footer .ratings { margin: 0 14px 14px; gap: 8px; }
.session-footer .rate {
  min-height: 62px; padding: 10px 6px 11px; gap: 0;
  background: #101513; border: 1px solid #2A332F; border-radius: 14px;
}
.session-footer .rate:hover { background: #141917; border-color: #3A443F; }
.session-footer .rate__name { font-size: 12.5px; font-weight: 700; color: #F2F5F3; }
/* the colour that names the outcome, above the word — the sheet's 24 × 3 strip */
.session-footer .rate::before {
  content: ""; display: block; width: 24px; height: 3px; border-radius: 2px;
  margin: 0 auto 9px; background: #3A443F;
}
.session-footer .rate--again::before { background: #FF6B57; }
.session-footer .rate--hard::before { background: #FFB347; }
.session-footer .rate--good::before { background: #C9F45A; }
.session-footer .rate--easy::before { background: #5BE0B0; }
/* the chosen tap keeps its full weight while the other three dim (T-033 / D-14) */
.session-footer .rate[disabled] { opacity: .5; }
.session-footer .rate.is-chosen { background: #1B211E; border-color: #C9F45A;
  box-shadow: inset 0 0 0 2px #C9F45A; }
.session-footer .rate.is-chosen[disabled] { opacity: 1; }

/* ── T-353 — one label, one size, one shade ───────────────────────────────────────────────────────
   Founder, 30.10: "card 10 of X, concept, answer, explanation, hide/reveal, note, flag, end session,
   war das, before u look: all should be all cap, same size, same color shade except ones inside the
   answer block/box." So every label wears the same caps, the same 10.5 px and the one muted shade.
   The answer's own prose is content, not a label, and keeps its own type. Scoped to .review-body
   because this file is the one that owns the session's palette and loads after styles.css. */
.review-body .card-marks__kicker,
.review-body .reveal__label,
.review-body .reveal__hint,
.review-body .reveal__hide,
.review-body .merged__label:not(.merged__label--hook),
.review-body .card-marks__foot-btn,
.review-body .outcome__ask,
.review-body .survey__ask,
.review-body .certainty__ask {
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--muted);
  line-height: 1.3;
}
/* The one question that is asked of him, centred, as he asked. */
.review-body .outcome__ask { text-align: center; }