/* The whiteboard card, and the rules that were wrong on it.
 *
 * Loaded AFTER each player's inline <style>, so these win. The card styles are
 * copied into all three player HTML files, which is how they came to disagree
 * in the first place; anything changed from here on goes here once instead of
 * three times, and the inline copies are left alone rather than surgically
 * edited in triplicate.
 *
 * Every rule below came out of Derick's review on 2026-08-02.
 */

/* ——— the answer is green ———
 *
 * It was crimson, which is the same red the practice sheet uses for a WRONG
 * answer and for the misconception note under it. On a card whose whole job is
 * to show the answer, red is the one colour it must not be — a learner reads
 * the highlight before they read the number.
 *
 * Green, and only ever on the thing that answers the question. Nothing else on
 * a card is allowed to be green, or it stops meaning "this is the answer". */
:root {
  --correct: #146b33;
}

.highlight,
.stage-card .check {
  color: var(--correct);
  font-weight: 700;
}

/* ——— centred blocks, left-aligned lines ———
 *
 * A step list wants its lines to start in the same place — that vertical edge
 * is what makes three steps read as one worked example rather than three
 * unrelated facts. But the BLOCK was pinned to the left of a wide card with a
 * lake of space beside it.
 *
 * fit-content plus auto margins gives both: the lines stay flush with each
 * other, the group sits in the middle of the card. */
.stage-card .rules,
.stage-card .steps-list {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* ——— a fraction that is a fraction ———
 *
 * "part on top / whole underneath" was three lines of prose describing a
 * picture instead of being one. The words are doing real teaching work, so
 * they stay — but they stay as a numerator over a bar over a denominator,
 * which is the thing they are describing.
 *
 * The note underneath is the next instruction, not part of the fraction, so it
 * is smaller and parenthesised and sits clear of the rule. */
.frac-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.frac-text .frac {
  font-size: 1.15em;
}

.frac-text .frac-note {
  margin-top: 0.55rem;
  font-size: 0.62em;
  color: var(--muted, #64748b);
}

/* ——— hover a small number and it grows ———
 *
 * Derick, 2026-10-26, answering the question sheet's fraction question: "maybe you can hover
 * over a fraction. Or, for any subscript/superscript type thing that's a
 * little bit small, you can hover on anything, and it'll make it a little bit
 * bigger for you."
 *
 * A transform rather than a font-size, so nothing around it moves and the
 * line it sits on does not reflow under the pointer. Only where there is a
 * real pointer: on a phone there is no hover, and a :hover rule there sticks
 * after a tap. A sup or sub is an inline box and cannot be transformed, so it
 * is made inline-block in the same breath. Its line-height is pinned to 1 so
 * the box is the glyph and nothing else: 0 collapsed it to no height at all,
 * which transforms fine and cannot be hovered with a real pointer, and the
 * inherited value would have made it taller than the line it sits in.
 */
sup, sub { display: inline-block; line-height: 1; }

@media (hover: hover) and (pointer: fine) {
  .frac, sup, sub {
    transition: transform 0.12s ease;
    transform-origin: center;
  }
  .frac:hover, sup:hover, sub:hover {
    transform: scale(1.4);
    position: relative;
    z-index: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frac, sup, sub { transition: none; }
}

/* ——— a passage is prose, not a formula ———
 *
 * Reading lessons put a 25 to 60 word original passage on the card. Centred
 * formula type at that length wraps into a blob, and a span collapses the
 * one-line paragraph a lesson may be asking about. Left-aligned, smaller,
 * paragraph breaks kept. Added 2026-09-07 with the first language arts
 * lessons. */
.stage-card .passage {
  white-space: pre-line;
  text-align: left;
  font-size: 0.7em;
  line-height: 1.45;
  font-weight: 400;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* ——— a figure never runs off a phone ———
 *
 * figures.js sizes every figure in whole grid squares and writes the result
 * as width and height attributes, which is right for the paper and wrong for
 * a 390px screen: nothing constrained them, so 176 of the 490 figures our
 * lessons draw were wider than 320px and 98 were wider than the phone itself.
 * The worst is a 720px number line in g7-distance-between-rationals, whose
 * hook asks how far apart -6 and 9 are and then runs the 9 off the screen.
 *
 * Scaling here rather than in figures.js on purpose: the renderer is shared
 * with the practice questions, where the figure sits in a sheet that is
 * already laid out for it, and its 1:1 drawing is what puts a figure's lines
 * on lines the paper already has. This is the player's problem, so the
 * player's stylesheet solves it. */
.stage-card svg,
.stage svg {
  max-width: 100%;
  height: auto;
}