/* Session runner (js/ui/session.js): pause / idle overlay, notice and shared-board cards, the result card after each
   round (and its replay), and the ink spread from Home into the stage. Shared stage tokens and the base cards are in bead.css. */

/* ---------- touch targets on the stage: every text button at least 44 px ---------- */
.stage-foot .stage-link,
.stage-overlay .stage-link { min-height: 44px; min-width: 88px; padding: 0 16px; }

/* ---------- an exercise's first day: what it practices and why, above its rule ---------- */
.stage-card.first-day { gap: 0; }
.stage-card.first-day > small { margin-bottom: 14px; }
.stage-card .fd { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 320px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--stage-rule); }
.stage-card .fd p { margin: 0; }
.stage-card .fd-what { font-size: 17px; line-height: 1.4; color: var(--stage-ink); }
.stage-card .fd-why { font-size: 14px; line-height: 1.5; color: #B8B3AA; }
.stage-card .fd-src { font-size: 12px; line-height: 1.45; color: var(--stage-dim); }
.stage-card.first-day .rule { font-size: 18px; }
@media (max-height: 700px) {
  .stage-card.first-day > small { margin-bottom: 8px; }
  .stage-card .fd { gap: 6px; padding-bottom: 12px; margin-bottom: 12px; }
  .stage-card .fd-what { font-size: 16px; }
  .stage-card .fd-why { font-size: 13px; }
  .stage-card.first-day .rule { font-size: 17px; }
}

/* ---------- pause / interrupted / still there? ---------- */
.stage-overlay { gap: 0; padding: 0 28px; text-align: center; }
.stage-overlay .ov-title { margin: 0 0 14px; font-size: 24px; font-weight: 300; }
.stage-overlay .ov-rule { margin: 0 0 12px; max-width: 300px; font-size: 15px; line-height: 1.45; color: var(--stage-ink); }
.stage-overlay .ov-note { margin: 0 0 26px; max-width: 280px; font-size: 13px; line-height: 1.5; color: var(--stage-dim); }
.stage-overlay .ov-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stage-overlay .ov-actions .stage-link { font-size: 15px; color: var(--stage-ink); }

/* ---------- cards ---------- */
.stage-card .rule.notice { font-size: 17px; max-width: 280px; }
.stage-card .second.best { color: var(--stage-ink); }
.guest-card .second { max-width: 300px; line-height: 1.45; }
.guest-card small { margin-top: 18px; }

/* ---------- level flip: 'Medium 2' turns over to 'Medium 3' once (600 ms) ---------- */
.lv-flip { display: inline-grid; vertical-align: bottom; perspective: 240px; font-variant-numeric: tabular-nums; }
.lv-flip > span { grid-area: 1 / 1; backface-visibility: hidden; transform-origin: 50% 55%; white-space: nowrap; }
.lv-old { animation: lv-out 300ms cubic-bezier(0.5, 0, 1, 1) 200ms both; }
.lv-new { animation: lv-in 300ms cubic-bezier(0, 0, 0.4, 1) 500ms both; }
@keyframes lv-out { from { transform: rotateX(0deg); opacity: 1; } to { transform: rotateX(90deg); opacity: 0; } }
@keyframes lv-in { from { transform: rotateX(-90deg); opacity: 0.3; } to { transform: rotateX(0deg); opacity: 1; } }

/* ---------- ink spreads from the tapped bead over the page (350 ms), then the stage is there ---------- */
.ink-spread { position: absolute; inset: 0; z-index: 40; background: var(--stage); clip-path: circle(0 at 50% 50%); }

/* screen-reader-only text */
.stage-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ================================================================ the result card after each round (v3 §3.7)
   Three blocks: what you did in the task's own units, the skill's level, one line of feedback (and See what you
   missed, and a single round's seal on a paper slip). The stage is always dark, so its accent is the dark-paper
   vermilion in both themes. Vermilion marks only a new level and a new best. */

:root {
  --stage-accent: #E05A44;
  --stage-rule: #2A2826;
  --stage-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .3 -.12'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage-screen.view-interval {
  background-color: var(--stage);
  background-image: radial-gradient(90% 55% at 30% 18%, rgba(255, 255, 255, 0.045), transparent 70%), var(--stage-grain);
}
.view-interval .stage-line,
.view-interval .stage-top,
.view-interval .stage-hint { display: none; }
.view-interval .stage-body { height: 100dvh; min-height: 0; flex: none; padding: calc(var(--safe-top) + 16px) 24px 0; overflow: hidden; }

.iv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.iv-progress { display: flex; gap: 6px; flex: none; }
.iv-progress i { flex: 1; height: 2px; border-radius: 1px; background: var(--stage-line); }
.iv-progress i.on { background: var(--stage-ink); }
.iv-head { flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-top: 18px; }
.iv-head-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.iv-head b { font-weight: 400; font-size: 17px; }
.iv-head small { font-size: 13px; color: var(--stage-dim); }
.iv-skill { flex: none; margin-top: 3px; font-size: 11px; line-height: 1.3; letter-spacing: 1.6px; text-transform: uppercase; color: var(--stage-dim); font-weight: 500; }

/* three blocks: what you did · the skill's level · one line of feedback */
.iv-main { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 22px; overflow: hidden; }
.iv-step { margin: 0 0 20px; font-size: 14px; line-height: 1.35; color: #B8B3AA; font-variant-numeric: tabular-nums; }
.iv-did { display: flex; flex-direction: column; flex: none; }
.iv-eb { margin: 0; font-size: 11px; line-height: 1.3; letter-spacing: 1.6px; text-transform: uppercase; color: var(--stage-dim); font-weight: 500; }
.iv-big { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; white-space: nowrap; }
.iv-big .num { font-size: 104px; line-height: 0.84; letter-spacing: -2.5px; font-variant-numeric: tabular-nums lining-nums; }
.iv-big .u { font-size: 34px; color: var(--stage-dim); }
.iv-big .u.long { font-size: 22px; letter-spacing: 0; }
.iv-big .u.pre { font-size: 30px; letter-spacing: -0.3px; margin-right: 4px; }
.iv-big.wide .num { font-size: 80px; letter-spacing: -2px; }
.iv-big.text .num { font-size: 40px; line-height: 1.05; letter-spacing: -0.4px; white-space: normal; }
.iv-sec { margin: 12px 0 0; font-size: 13px; color: var(--stage-dim); }
.iv-vs { margin: 6px 0 0; font-size: 15px; line-height: 1.4; }

.iv-rule { height: 1px; background: var(--stage-rule); margin: 20px 0 18px; flex: none; }

.iv-lvl { flex: none; }
.iv-next .n { display: flex; align-items: center; gap: 9px; margin-top: 9px; font-size: 27px; line-height: 1; white-space: nowrap; }
.iv-next .n svg { display: block; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)); }
.iv-next p { margin: 8px 0 0; font-size: 14px; color: var(--stage-dim); }
.iv-next .hold { display: inline-flex; gap: 5px; margin-left: 4px; }
.iv-next .hold i { width: 11px; height: 11px; border-radius: 50%; border: 1.2px solid #57544F; }
.iv-next .hold i.on { background: var(--stage-ink); border-color: var(--stage-ink); }
.iv-next .levelup { display: inline-flex; align-items: center; color: var(--stage-accent); }
.iv-next.quiet .levelup { color: var(--stage-ink); }
.iv-next .lv-row { display: inline-flex; align-items: center; gap: 9px; }
.iv-next .lv-was { color: var(--stage-dim); font-variant-numeric: tabular-nums; }
.iv-next .iv-arrow { color: var(--stage-dim); flex: none; }
.iv-next .lv-to { display: inline-block; font-variant-numeric: tabular-nums; animation: lv-in-num 420ms cubic-bezier(.2, .8, .2, 1) 520ms both; }
@keyframes lv-in-num { from { transform: translateY(6px) scale(0.8); opacity: 0; } 60% { transform: translateY(-1px) scale(1.12); opacity: 1; } to { transform: none; opacity: 1; } }
.iv-fixed { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--stage-dim); max-width: 320px; }
.iv-same { --ink: var(--stage-ink); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 5px; border-radius: 11px; border: 1px solid #34322E; font-size: 11.5px; color: var(--stage-dim); white-space: nowrap; }
.iv-same svg { display: block; }

/* one line of feedback (a tick, plain ink; a new best in the stage's vermilion), the replay link, a single round's seal */
.iv-fb { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.iv-wins { --ink: var(--stage-ink); --ink-2: var(--stage-dim); --ink-3: #6B6862; --paper: var(--stage); display: flex; flex-direction: column; gap: 4px;
  color: var(--stage-ink); font-size: 15.5px; line-height: 1.35; }
.iv-wins > * { margin: 0; font-size: inherit; line-height: inherit; }
.iv-wins.best .k-win { color: var(--stage-accent); }
.iv-wins.best .kw-tick { stroke: var(--stage-accent); }
.iv-missed { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -8px 0 -6px; padding: 0; border: 0; background: none; color: var(--stage-ink); font-size: 15px;
  text-decoration: underline; text-decoration-color: #57544F; text-underline-offset: 4px; touch-action: manipulation; }
.iv-missed .iv-arrow { color: var(--stage-dim); }
.iv-seal { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding: 10px 16px 10px 12px; border-radius: 18px; background: #F4F2ED; color: #1C1B1A; align-self: stretch;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 26px -16px rgba(0, 0, 0, 0.9); }
.iv-seal-stamp { flex: none; display: flex; align-items: center; justify-content: center; width: 66px; height: 66px; }
.iv-seal-stamp > * { display: block; overflow: visible; }
.iv-seal-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iv-seal-t small { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #6E6A63; font-weight: 500; }
.iv-seal-t b { font-weight: 500; font-size: 16px; line-height: 1.25; }
.iv-seal-t span { font-size: 12.5px; color: #6E6A63; }

/* See what you missed: the exercise's replay hook plays in a body like the play area */
.stage-replay { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.iv-replay-foot { flex: none; flex-direction: row; justify-content: space-between; padding-top: 12px; }
.iv-replay-foot .stage-btn { min-width: 132px; }
.iv-replay-foot .stage-link { min-height: 44px; padding: 0 8px; font-size: 15px; color: var(--stage-ink); }
.iv-replay-foot .stage-link[disabled] { color: var(--stage-faint); }

.iv-foot { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 8px 0 calc(var(--safe-bottom) + 24px); }
.iv-foot-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
.iv-foot .iv-stop { min-height: 44px; padding: 0 4px 0 16px; font-size: 14px; color: var(--stage-dim); }
/* Again (this exercise once more) beside the way on (Next: Light Path · Finish · Done) */
.iv-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.iv-actions.solo { grid-template-columns: minmax(0, 1fr); }
.iv-again { height: 54px; min-width: 104px; padding: 0 22px; border-radius: 27px; border: 1px solid #57544F; background: transparent; color: var(--stage-ink); font-size: 17px; touch-action: manipulation; }
.iv-again:active { transform: scale(0.985); background: rgba(255, 255, 255, 0.05); }
.iv-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; padding: 0 14px; }
.iv-pill { position: relative; overflow: hidden; height: 54px; width: 100%; border-radius: 27px; border: none; background: var(--stage-ink); color: var(--stage); font-size: 17px; touch-action: manipulation; }
.iv-pill:active { transform: scale(0.985); }
.iv-pill span { position: relative; }
/* the clock: a shade sweeping across the pill until the card moves on by itself */
.iv-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; background: rgba(17, 17, 16, 0.09); pointer-events: none; }

/* short phones (iPhone SE, 375 × 667): the same card, tighter */
@media (max-height: 760px) {
  .iv-head { padding-top: 12px; }
  .iv-main { margin-top: 14px; }
  .iv-step { margin-bottom: 12px; }
  .iv-big .num { font-size: 80px; letter-spacing: -2px; }
  .iv-big .u { font-size: 28px; }
  .iv-big .u.pre { font-size: 24px; }
  .iv-big.wide .num { font-size: 64px; }
  .iv-rule { margin: 13px 0 12px; }
  .iv-next .n { font-size: 24px; }
  .iv-wins { font-size: 14.5px; }
  .iv-seal { padding: 8px 14px 8px 10px; }
  .iv-seal-stamp { width: 56px; height: 56px; }
  .iv-foot { padding-bottom: calc(var(--safe-bottom) + 16px); }
}
@media (max-width: 360px) {
  .iv-again { min-width: 88px; padding: 0 16px; }
  .view-interval .stage-body { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-old { display: none; }
  .lv-new { animation: none; }
  .iv-next .lv-to { animation: none; }
  .ink-spread { display: none; }
}