/* Phone round screens, group B: Build the Finding and Fill the Register, Flash Record,
   Tie It Out, Accuse Early, Match Pairs, Trust or Check, Place the Risk.
   Built on the tokens and components in base.css and play.css; see DESIGN.md. */

/* Once answered, the ring would only show a stopped clock, so it goes; the band and the question stay
   because the reveal happens in place. The question head keeps its height so nothing moves. */
.play.is-answered .qhead .timer { display: none; }

/* A long case (over about 220 characters) reads in Inter; a question stays in Archivo. */
.prompt.case { font-family: var(--body); font-weight: 600; font-size: 16px; line-height: 1.45; letter-spacing: 0; color: var(--ink); }

/* A fifth mark, for the fifth pair: the family colour with a tick */
[data-mark='4'] { --c: var(--accent, var(--blue)); --c-ink: #fff; }

/* A wrong tap jolts the cards sideways once */
@keyframes jolt-b { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.jolt { animation: jolt-b .3s; }
.hint.bad { color: var(--red-text); font-weight: 600; }

/* ---- Build the Finding, Fill the Register: each part is a white card with its options inside ---- */
.form-b { display: grid; gap: 12px; }
.fcard { display: grid; gap: 8px; padding: 12px 14px 6px; background: var(--card); border: 2px solid var(--line); border-radius: var(--r-tile); }
.fcard .fhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.fcard .fhead h3 { font-size: 17px; font-weight: 800; }
.fcard .fpts { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fcard .fpts svg { width: 18px; height: 18px; }
.fcard.is-right .fpts { color: var(--ok); }
.fcard.is-second .fpts { color: var(--warn); }
.fcard.is-wrong .fpts { color: var(--red-text); }
.fcard .opts { display: grid; gap: 4px; }
.fcard .opt.slim { gap: 10px; padding: 8px 12px; font-size: 15px; }
.fcard .opt .chip.sm { width: 28px; height: 28px; border-radius: var(--r-chip); } .fcard .opt .chip.sm svg { width: 13px; height: 13px; }
.fcard.is-folded .opts { display: none; }
/* The filled part: the choice on one line, pressable to change it */
.fcard .picked { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-bottom: 6px; padding: 8px 12px; border: 2px solid var(--line); border-radius: var(--r-control); background: var(--well); color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.25; text-align: left; }
.fcard .picked .txt { min-width: 0; }
.fcard .picked .chg { margin-left: auto; flex: none; color: var(--blue); font-weight: 700; font-size: 14px; }
.fcard .picked .chip.sm { width: 28px; height: 28px; border-radius: var(--r-chip); } .fcard .picked .chip.sm svg { width: 13px; height: 13px; }
.fcard .why { padding: 2px 0 6px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }

/* ---- Flash Record: the record in the round's colour frame, a bar draining under its title ---- */
.record { border: 2px solid var(--accent, var(--blue)); border-radius: var(--r-tile); background: var(--card); overflow: hidden; }
.record .rtitle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--accent, var(--blue)); color: var(--white); font-weight: 700; font-size: 14px; line-height: 1.2; }
.record .drain { height: 8px; background: var(--well); border-top: 1px solid var(--line); }
.record .drain i { display: block; height: 100%; width: 100%; background: var(--accent, var(--blue)); transform-origin: left; }
@keyframes drain-b { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) { .record .drain i { animation: drain-b var(--secs, 12s) linear forwards; } }
@media (prefers-reduced-motion: reduce) { .record .drain { display: none; } }
.record dl { margin: 0; }
.record dl > div { display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 14px; border-top: 1px solid var(--line); }
.record dl > div:first-child { border-top: 0; }
.record dt { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.record dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.flash-recall { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flash-recall li { display: grid; gap: 8px; padding: 12px 14px; background: var(--card); border: 2px solid var(--line); border-radius: var(--r-tile); }
.flash-recall .q { font-size: 13.5px; line-height: 1.35; color: var(--ink-3); }
.flash-recall .a { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.25; }
.flash-recall .a b { font-weight: 600; min-width: 0; }
.flash-recall .a .verdict-mark { margin-left: auto; flex: none; width: 22px; height: 22px; color: var(--ok); }
.flash-recall .a.said .verdict-mark { color: var(--red-text); }
.flash-recall .a.said { color: var(--ink-2); }
.flash-recall .a.said b { text-decoration: line-through; text-decoration-thickness: 2px; }

/* ---- Tie It Out: entries as pressable cards with tabular figures, a tally bar that fills to the target ---- */
.tally { display: grid; gap: 8px; }
/* Selected and Target: the label over the figure, so two figures with their unit sit side by side on a phone */
.tally .row { display: flex; justify-content: space-between; align-items: end; gap: 12px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.tally .row > span { display: grid; gap: 4px; }
.tally .row > span:last-child { text-align: right; }
.tally .row b { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
/* The fill is blue, not the round's olive: olive next to the green of a right answer would read as right */
.tally .bar { height: 14px; border-radius: 7px; --c: var(--blue); }
.tally .bar i { border-radius: 7px; transition: width .25s cubic-bezier(.2, .7, .2, 1); animation: none; }
.tally .state { font-size: 14px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tally.is-tied .state { color: var(--ink); }
.tally.is-over .state { color: var(--red-text); }
.tally.is-over .bar i { background: var(--red-text); }
.entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.entries .entry:nth-child(odd):last-child { grid-column: 1 / -1; }
.entry { display: grid; gap: 2px; align-content: center; min-height: 66px; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--r-tile); background: var(--card); color: var(--ink); text-align: left; box-shadow: 0 var(--edge) 0 var(--line-2); margin-bottom: var(--edge); transition: transform .08s, box-shadow .08s, border-color .12s; }
.entry:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--line-2); }
.entry small { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink-3); }
.entry b { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* A picked entry sinks onto its edge and goes dark, like a picked tile in Four Groups */
.entry[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--white); transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--ink); }
.entry[aria-pressed='true'] b, .entry[aria-pressed='true'] small { color: var(--white); }
.entry.right, .entry.right[aria-pressed='true'] { background: var(--ok); border-color: var(--ok); transform: none; box-shadow: 0 var(--edge) 0 var(--ok-deep); }
.entry.right small, .entry.right b { color: var(--white); }
.entry.wrong, .entry.wrong[aria-pressed='true'] { background: var(--card); border-color: var(--red-text); color: var(--ink); transform: none; box-shadow: 0 var(--edge) 0 var(--red-text); }
.entry.wrong small { color: var(--ink-3); }
.entry.wrong b, .entry.wrong[aria-pressed='true'] b { color: var(--red-text); }
.entry:disabled { cursor: default; transform: none; }
.entry:disabled:not(.right):not(.wrong) { color: var(--ink-3); border-color: var(--line); box-shadow: 0 var(--edge) 0 var(--line); }
.entry:disabled:not(.right):not(.wrong) b { color: var(--ink-3); }

/* ---- Accuse Early: the points ladder, clues that drop in, suspects as big cards ---- */
.ladder { display: flex; gap: 6px; }
.ladder span { flex: 1; min-height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--well); color: var(--ink-3); font-family: var(--display); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.ladder span.now { flex: 1.5; background: var(--accent, var(--blue)); color: var(--white); font-size: 18px; }
.ladder span.gone { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-3); background: transparent; border: 2px solid var(--line); }
.ladder-cap { margin-top: -6px; }
.clues { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.clues li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; background: var(--card); border: 2px solid var(--line); border-radius: var(--r-tile); font-size: 15px; line-height: 1.4; }
.clues .no { width: 30px; height: 30px; border-radius: var(--r-chip); background: var(--accent, var(--blue)); color: var(--white); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 14px; }
.suspects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.suspects .opt { flex-direction: column; justify-content: center; gap: 8px; min-height: 96px; padding: 12px 10px; text-align: center; font-family: var(--display); font-weight: 800; font-size: 16px; line-height: 1.2; letter-spacing: -0.01em; }
.suspects .opt:nth-child(odd):last-child { grid-column: 1 / -1; }
/* The chosen suspect sinks onto its edge and goes dark; the chip keeps its colour */
.suspects .opt[aria-pressed='true']:not(.right):not(.wrong) { background: var(--ink); border-color: var(--ink); color: var(--white); transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--ink); }
/* The tick or cross sits in the corner, out of the flow, so the name never moves on the reveal */
.suspects .opt .verdict-mark, .decide .opt .verdict-mark { position: absolute; top: 8px; right: 8px; margin: 0; width: 22px; height: 22px; }

/* ---- Match Pairs: two columns of cards; a made pair carries the same mark on both sides ---- */
.match { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.match > div { display: grid; gap: 10px; align-content: start; }
.mcell { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 64px; padding: 10px; border: 2px solid var(--line); border-radius: var(--r-tile); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.25; text-align: left; box-shadow: 0 var(--edge) 0 var(--line-2); margin-bottom: var(--edge); transition: transform .08s, box-shadow .08s, border-color .12s, background-color .12s; }
.mcell:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--line-2); }
/* The card waiting for its match sinks onto its edge and goes dark */
.mcell[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--white); transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--ink); }
.mcell .chip.sm { width: 26px; height: 26px; border-radius: var(--r-chip); } .mcell .chip.sm svg { width: 12px; height: 12px; }
/* The empty slot a mark fills once the pair is made: the well with a faint line */
.mcell .chip.slot { background: var(--well); border: 2px solid var(--line); }
.mcell[aria-pressed='true'] .chip.slot, .mcell.bad .chip.slot { border-color: currentColor; background: var(--card); }
.mcell[aria-pressed='true'] .chip.slot { color: var(--white); background: var(--ink); }
.mcell.bad .chip.slot { color: var(--red-text); }
.mcell.m-done { border-color: var(--c); box-shadow: 0 var(--edge) 0 var(--c); cursor: default; }
.mcell.m-done.late { border-style: dashed; }
.mcell.bad { border-color: var(--red-text); box-shadow: 0 var(--edge) 0 var(--red-text); }
.mcell:disabled { cursor: default; }
.mcell:disabled:not(.m-done) { color: var(--ink-3); box-shadow: 0 var(--edge) 0 var(--line); }

/* ---- Trust or Check: the agent's answer as a quoted card with a confidence meter, two big decision cards ---- */
.claude { display: grid; gap: 12px; padding: 14px 16px; background: var(--card); border: 2px solid var(--line); border-radius: var(--r-tile); }
.claude .who { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.claude .who .chip { width: 30px; height: 30px; border-radius: var(--r-chip); } .claude .who .chip svg { width: 16px; height: 16px; }
.claude .said { font-size: 18px; font-weight: 600; line-height: 1.4; }
.claude .sure { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.claude .sure b { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.claude .sure .bar { --c: var(--a8); margin-left: 4px; }
.decide .opt .txt { display: grid; gap: 4px; }
.decide .opt .txt small { font-size: 13px; }
.decide .opt.right .txt small { color: var(--white); }

/* ---- Place the Risk: a five by five grid shaded by score, with a number in every cell ---- */
.risk { display: grid; grid-template-columns: 20px 18px minmax(0, 1fr); grid-template-rows: auto 18px 18px; gap: 4px 6px; }
.axis-y { grid-row: 1; grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ticks-y { grid-row: 1; grid-column: 2; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 4px; }
.ticks-x { grid-row: 2; grid-column: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.ticks-y span, .ticks-x span { display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.axis-x { grid-row: 3; grid-column: 3; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.risk-grid { grid-row: 1; grid-column: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; aspect-ratio: 1; }
.cell { position: relative; display: grid; place-items: center; min-height: 44px; padding: 0; border: 2px solid transparent; border-radius: var(--r-chip); background: color-mix(in srgb, var(--accent, var(--blue)) var(--heat, 0%), var(--well)); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; transition: transform .08s; }
.cell.b0 { --heat: 0%; } .cell.b1 { --heat: 18%; } .cell.b2 { --heat: 38%; } .cell.b3 { --heat: 60%; } .cell.b4 { --heat: 100%; color: var(--white); }
.cell:active { transform: scale(.94); }
.cell[aria-pressed='true'] { border-color: var(--blue); box-shadow: inset 0 0 0 2px var(--white); }
.cell.ans { border-color: var(--ok); box-shadow: inset 0 0 0 2px var(--white); }
.cell.path { outline: 2px dashed var(--ink-3); outline-offset: -5px; }
.cell .pin { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: var(--r-chip); display: grid; place-items: center; color: var(--white); box-shadow: 0 0 0 2px var(--paper); }
.cell .pin svg { width: 12px; height: 12px; }
.cell .pin.you { background: var(--blue); }
.cell .pin.truth { background: var(--ok); }
.cell .n { position: absolute; left: 3px; bottom: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-chip); display: grid; place-items: center; background: var(--white); color: var(--ink); font: 700 13px/1 var(--body); font-variant-numeric: tabular-nums; }
.cell:disabled { cursor: default; transform: none; }
.bands { display: grid; gap: 4px; min-height: 44px; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.bands p b { font-family: var(--display); font-weight: 800; color: var(--ink); margin-right: 6px; }
.bands .k { font-size: 13px; font-weight: 600; color: var(--ink-3); }