/* ───────────────────────────────────────────────────────────────────────────
   v2-style.css — styles specific to the v2 rebuild (within-subjects).
   Loaded after style.css (v1 base) so v2-specific selectors win.
   ─────────────────────────────────────────────────────────────────────────── */

/* Session-page shell (built by practice-engine.mountSessionShell). */
.session-header {
  max-width: 760px;
  margin: var(--space-lg) auto var(--space-xs);
  padding: 0 var(--space-md);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.session-title {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-text);
}
.session-progress {
  margin: 0;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.session-trial-slot,
.session-summary-slot {
  max-width: 760px;
  margin: var(--space-md) auto;
  padding: 0 var(--space-md);
}

/* Image fallback shown when the structure SVG has not been drawn yet.
   Soft dashed border, muted colour, makes it obvious to RJ but not alarming
   to a participant who might briefly see it. */
.trial-img-fallback {
  padding: var(--space-lg);
  border: 1px dashed var(--color-border-2);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-muted);
  font-style: italic;
  background: var(--color-surface);
}

/* The correction-panel sub-element styles (.correction-title, .correction-rule)
   live in style.css (yellow-tinted panel block). v2-style.css used to override
   them with muted variants; that override was removed in Stage 3 since the
   style.css version is now palette-aware and more polished. */

/* Feedback panel entrance animation (suppressed by reduced-motion) */
@keyframes feedbackPop {
  0%   { opacity: 0; transform: translateY(4px) scale(0.98); }
  60%  { opacity: 1; transform: translateY(0)   scale(1.02); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}
.feedback-block--pop {
  animation: feedbackPop 280ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .feedback-block--pop { animation: none; }
}

/* Submit button morphs into a result indicator after submit (v1 parity).
   Important: override the disabled-button styling so the colour shows
   clearly even though the button is disabled during feedback. Uses the
   new palette tokens so theme toggle works in both directions. */
.trial-submit--correct,
.trial-submit--correct:disabled {
  background:    var(--color-green) !important;
  border-color:  var(--color-green) !important;
  color:         var(--color-bg)    !important;
  opacity:       1                  !important;
  box-shadow:    var(--shadow-md)   !important;
}
.trial-submit--incorrect,
.trial-submit--incorrect:disabled {
  background:    var(--color-red)  !important;
  border-color:  var(--color-red)  !important;
  color:         var(--color-bg)   !important;
  opacity:       1                 !important;
  box-shadow:    var(--shadow-md)  !important;
}

/* Interstitial cards (Day-4 break, intros, transitions). */
.interstitial-card {
  max-width: 560px;
  margin: var(--space-3xl) auto;
  padding: var(--space-xl);
}
.interstitial-card ol,
.interstitial-card ul {
  padding-left: var(--space-lg);
  line-height: 1.65;
}
.interstitial-card li { margin-bottom: var(--space-2xs); }

/* The break-timer numerals. Tabular so the mm:ss does not jitter as it
   counts down. Slightly oversized to draw attention; this IS the focus of
   the screen during the 5-minute break. */
.interstitial-countdown {
  font-size: 2.6rem;
  font-weight: 500;
  font-family: var(--font-mono);
  text-align: center;
  margin: var(--space-xl) 0 var(--space-xs);
  letter-spacing: 0.04em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

/* DEV-only skip-timer button. Tucked in the bottom-right corner so it is
   discoverable for testing but visually low-key. Removed from the DOM when
   the participant skips. Palette-coherent now (was a flat grey rectangle). */
.interstitial-skip {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 100;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-accent-dim);
  color: var(--color-accent-hover);
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  opacity: 0.75;
  transition:
    background-color var(--dur-med) var(--ease-out),
    opacity          var(--dur-med) var(--ease-out),
    color            var(--dur-med) var(--ease-out);
}
.interstitial-skip:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  opacity: 1;
}

/* ── Per-item confidence prompt (metacognitive layer) ────────────────────────
   Fires between answer submit and correctness feedback. Must not signal
   correctness — no green/red, no confetti, no animation tied to outcome.
   Visually a quiet box that asks one question with four choices.        */
.confidence-block {
  margin: var(--space-md) 0 var(--space-sm);
  padding: var(--space-md);
  background: var(--color-accent-soft, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  animation: confidence-fade-in var(--dur-med) var(--ease-out);
}
@keyframes confidence-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .confidence-block { animation: none; }
}
.confidence-prompt {
  margin: 0 0 var(--space-sm);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
}
.confidence-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
}
@media (max-width: 540px) {
  /* Two-by-two grid on narrow screens so each button stays tappable. */
  .confidence-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.confidence-btn {
  /* Inherits .btn / .btn--ghost from the base stylesheet. Only the spacing
     and font size are tuned here so the four labels fit in one line. */
  padding-inline: var(--space-sm);
  font-size: 0.95rem;
  white-space: normal;
}

/* [N] number-key hint on each confidence button. Shown only on devices with a
   real keyboard (PC); hidden on touch. The 1..4 shortcuts themselves are wired
   in practice-engine.js (showConfidencePrompt). */
.confidence-key {
  display: none;
  margin-right: 0.4em;
  padding: 0.05em 0.45em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: 600 0.78em/1.4 var(--font-mono, monospace);
  color: var(--color-muted);
  vertical-align: baseline;
}
@media (hover: hover) and (pointer: fine) {
  .confidence-key { display: inline-block; }
}
.confidence-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Pre-session prediction / post-session postdiction widget ──────────────
   Fires once before the first item (pre) and once after the last item (post)
   of each spaced session and each Day-4 massed block. Asks the participant
   to commit a 0..12 count with no default selection.                       */
.prediction-card {
  max-width: 640px;
  margin: var(--space-2xl) auto;
}
.prediction-prompt {
  font-size: 1.1rem;
  line-height: 1.5;
  text-align: center;
  margin: 0 0 var(--space-lg);
  color: var(--color-text);
}
.prediction-options {
  /* Flex-wrap rather than a fixed grid so the 13 buttons always fit
     inside the card. The grid version overflowed the card right edge
     on wider viewports where the column track exceeded the available
     content width. Flex sizes each button to its natural width and
     wraps to a second row as needed. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-md);
}
.prediction-num-btn {
  /* Inherits .btn / .btn--ghost from the base stylesheet. Width is
     fixed-ish (>=56px) so single- and double-digit numbers share a
     visual rhythm. Min-height keeps touch targets >=44px. */
  flex: 0 0 auto;
  min-width: 56px;
  padding: var(--space-xs) var(--space-sm);
  min-height: 44px;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.prediction-num-btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-dim, var(--color-accent));
}
.prediction-num-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.prediction-hint {
  text-align: center;
  margin: 0;
  min-height: 1.4em;   /* prevents layout shift when hint text changes */
}

/* ── Day-4 + Day-14 forced-choice widget ─────────────────────────────────
   Two fieldsets on one card: the set-comparison question (3 radios) and
   the confidence rating (3 radios). Submit enables once both are answered. */
.forced-choice-card {
  max-width: 640px;
  margin: var(--space-2xl) auto;
}
.forced-choice-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
}
.forced-choice-fieldset:last-of-type {
  margin-bottom: 0;
}
.forced-choice-legend {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
  margin: 0 0 var(--space-md);
  padding: 0;
}
.forced-choice-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.forced-choice-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--dur-med) var(--ease-out),
    border-color     var(--dur-med) var(--ease-out);
  min-height: 44px;
}
.forced-choice-option:hover {
  background: var(--color-accent-soft, var(--color-surface));
}
.forced-choice-option:has(input:checked) {
  /* Selected radio's label gets the accent. :has() is widely supported in
     evergreen browsers; degrades gracefully (just no highlight) where not. */
  background: var(--color-accent-soft, var(--color-surface));
  border-color: var(--color-accent);
}
.forced-choice-option input[type="radio"] {
  /* Slightly enlarge the native radio for easier tap targets. */
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}
.forced-choice-option span {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.4;
}

/* ── Day-14 debrief screen ───────────────────────────────────────────────
   Unlocked after the delayed posttest submits. Mixes paragraphs of copy,
   a per-session prediction-vs-actual bar chart, a small scores table, and
   a forced-choice comparison table. Reads as a quiet research-instrument
   wrap-up rather than a celebration.                                    */
.debrief-card {
  max-width: 820px;
  margin: var(--space-2xl) auto;
}
.debrief-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.debrief-intro {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}
.debrief-section {
  margin: 0;
}
.debrief-section-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 var(--space-md);
  color: var(--color-text);
}
.debrief-section p {
  margin: 0 0 var(--space-sm);
  line-height: 1.6;
}
.debrief-section p:last-child {
  margin-bottom: 0;
}

/* Prediction-vs-actual chart. Each row is one practice session with
   two stacked bars: predicted on top, actual below.                    */
.debrief-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.debrief-bar-row {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  gap: var(--space-md);
  align-items: center;
}
@media (max-width: 540px) {
  .debrief-bar-row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
}
.debrief-bar-label {
  font-size: 0.95rem;
  color: var(--color-muted);
  font-weight: 500;
}
.debrief-bar-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.debrief-bar {
  position: relative;
  height: 26px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.debrief-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--color-accent-dim, var(--color-accent));
  transition: width var(--dur-med) var(--ease-out);
}
.debrief-bar--actual .debrief-bar-fill {
  /* Actuals get the stronger accent fill; predictions get the muted dim. */
  background: var(--color-accent);
  opacity: 0.85;
}
.debrief-bar-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--space-sm);
  font-size: 0.85rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.debrief-bar-val small {
  margin-left: var(--space-2xs);
  color: var(--color-muted);
  font-size: 0.75rem;
}
.debrief-chart-legend {
  margin: var(--space-md) 0 0;
  line-height: 1.5;
}

/* Tables for set scores and forced choice. Compact, readable, no zebra. */
.debrief-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.debrief-table th,
.debrief-table td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.debrief-table thead th {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  font-weight: 600;
  border-bottom-width: 2px;
}
.debrief-table tbody th[scope="row"] {
  font-weight: 500;
  color: var(--color-text);
}
.debrief-table td {
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════════
   Session 0 tutorial (study-session1 spaced intro + day-4 massed intro)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tutorial cards ──────────────────────────────────────────────────────
   Linear, forward-only flow rendered into #practice-app. Reuses the base
   .card / .card__* primitives; these helpers just set width + spacing. */
.s0-card { max-width: 720px; margin: var(--space-2xl) auto; }
.s0-intro { font-size: 1.05rem; line-height: 1.6; color: var(--color-text); }
.s0-rule {
  background: var(--color-accent-dim, var(--color-surface));
  color: var(--color-text);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0 var(--space-lg);
  font-size: 1.02rem;
  line-height: 1.55;
}
.s0-figure-caption { text-align: center; color: var(--color-muted); font-size: 0.9rem; margin: var(--space-sm) 0 0; }
/* Multiple worked examples on one lesson card (e.g. to show how a position
   number changes). Side by side on wide screens, wraps/stacks when narrow. */
.s0-examples { display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: center; align-items: flex-start; }
.s0-example { margin: 0; flex: 1 1 240px; max-width: 320px; }

/* ── Self-rating screens: familiarity (legacy) + ease-of-learning (1..7) ──── */
.familiarity-card { max-width: 560px; margin: var(--space-2xl) auto; }
.familiarity-progress { text-align: center; color: var(--color-muted); margin: 0 0 var(--space-md); }
.familiarity-stimulus {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-sm); margin-bottom: var(--space-lg);
}
/* Familiarity + lesson structures reuse the study's .trial-img-wrap / .trial-img
   box (style.css) so a molecule looks identical in the tutorial and in practice. */
.familiarity-name { font-size: 1.15rem; font-weight: 600; color: var(--color-text); margin: 0; }
.familiarity-prompt {
  font-size: 1.05rem; text-align: center; line-height: 1.5;
  margin: 0 0 var(--space-lg); color: var(--color-text);
}
.familiarity-scale {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-sm); margin: 0 0 var(--space-sm);
}
.familiarity-anchor { flex: 0 1 92px; font-size: 0.8rem; color: var(--color-muted); line-height: 1.3; }
.familiarity-scale > .familiarity-anchor:first-child { text-align: right; }
.familiarity-scale > .familiarity-anchor:last-child  { text-align: left; }
.familiarity-bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }
.familiarity-bubble {
  width: 42px; height: 42px; min-height: 42px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--color-surface);
  border: 2px solid var(--color-border); color: var(--color-muted); cursor: pointer;
  transition: background-color var(--dur-med, .15s) var(--ease-out, ease),
              border-color var(--dur-med, .15s) var(--ease-out, ease),
              color var(--dur-med, .15s) var(--ease-out, ease);
}
.familiarity-bubble:hover { border-color: var(--color-accent); }
.familiarity-bubble[aria-pressed="true"] {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg);
}
.familiarity-bubble:disabled { cursor: default; }
.familiarity-bubble-num { font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.familiarity-hint { text-align: center; min-height: 1.4em; margin: 0; }

/* ── Skeletal-structures picker (shared with /demo; see skeletal-picker.js) ──
   Moved here from demo.html's inline <style> so the public /demo route and the
   Session 0 primer share one source. */
.picker-image-wrap {
  position: relative; display: flex; justify-content: center; align-items: center;
  min-height: 200px; padding: var(--space-lg);
  background: var(--color-bg, #fff); border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.picker-image-inner { position: relative; display: block; max-width: 100%; }
.picker-image { display: block; width: 100%; height: 100%; }
.picker-label { margin: var(--space-md) 0 var(--space-2xs); font-size: 1.1rem; font-weight: 600; color: var(--color-text); }
.picker-detail { margin: 0 0 var(--space-md); color: var(--color-muted); font-size: 0.92rem; }
.picker-control-label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-muted); margin: var(--space-md) 0 var(--space-2xs);
}
.picker-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.picker-btn {
  padding: 6px 12px; background: var(--color-surface-2, var(--color-surface));
  border: 1px solid var(--color-border); border-radius: var(--radius-pill, 999px);
  color: var(--color-text); font: 500 0.88rem/1 inherit; cursor: pointer;
}
.picker-btn:hover:not(:disabled) { border-color: var(--color-accent); }
.picker-btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg, #fff); }
.picker-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.picker-toggle-row { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-2xs); }
.picker-hint { color: var(--color-muted); font-size: 0.85rem; }