/**
 * The walk - public/walk.js.
 *
 * One step on a screen, and the screen is never taller than the iPad mini
 * viewport fit.css enforces. There is no clock, no rung chip and no score
 * anywhere in here, because there is none in the walk.
 */

.wk-wrap { max-width: 640px; margin: 0 auto; padding: 0 2px 40px; }

.wk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wk-where { font-size: 15px; color: var(--muted); flex: 1; min-width: 0; }
/* Which idea he is on, never how many he has got right. */
.wk-of {
  font-family: var(--num); font-size: 15px; color: var(--muted);
  letter-spacing: .04em; flex: none;
}

/* The step bar for the part he is in, and one dot per part, on one row. The bar
   says how far through this idea he is; the dots say which idea. */
.wk-rail { display: flex; align-items: center; gap: 12px; }

.wk-bar { flex: 1; min-width: 0; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
/* 🔴 A full-width fill squashed by scaleX, never a width. `--p` is written on
   the element by walk.js and is the ONLY thing that has to be right for the
   bar to read correctly with motion off - the growth from `--p0` is an
   animation and animations are optional here. A width would also lay out the
   head again on every single step, which is the thrash this file will not do. */
.wk-bar i {
  display: block; width: 100%; height: 100%; background: var(--turq);
  transform-origin: left center; transform: scaleX(var(--p, 1));
}

/* One dot per part: finished behind him, open where he is, plain ahead. Sizes
   are transforms rather than widths so a part closing cannot move the bar
   beside it, and the colors are the app's own. It counts IDEAS, exactly as the
   "2 of 4" beside it already does - there is no number here about how many he
   got right, because a walk has none. */
.wk-dots { flex: none; display: flex; align-items: center; gap: 7px; }
.wk-dot {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); box-shadow: 0 0 0 0 transparent; transform: scale(1);
}
/* 🔴 The open one is a RING and a finished one is FILLED, and that is shape
   rather than color on purpose: on Scoreboard `--green` and `--turq` are the
   same amber (styles.css line 71 and 75), so a green dot beside a turquoise one
   is two identical dots and finishing a part shows nothing at all. The ring
   filling in reads in both skins. The ring is a box-shadow, so it costs no
   layout and scales with the dot. */
.wk-dot.wk-here {
  background: transparent; box-shadow: 0 0 0 2px var(--turq); transform: scale(1.4);
}
/* After .wk-here on purpose: the part he is finishing keeps the ring and fills.
   🔴 And both modifiers are prefixed because a bare `done` is already taken:
   styles.css `.done` is the LESSON'S STAGE CLEAR panel - display:grid with its
   own padding - so an 8px dot marked `done` came out 8x34 and 8x51. Measured,
   not spotted: on screen it reads as a slightly tall dot. It is also precisely
   the panel this screen must never borrow, which is the other reason it is not
   a name to share. */
.wk-dot.wk-past { background: var(--green); }

.wk-card {
  margin-top: 18px; padding: 18px 16px 20px;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--card);
}

.wk-say { margin: 0 0 16px; font-size: 19px; line-height: 1.5; }
.wk-ask { margin: 4px 0 16px; font-size: 20px; line-height: 1.45; font-weight: 600; }

.wk-fig { margin: 0 0 18px; }
.wk-fig svg, .wk-fig canvas { display: block; width: 100%; height: auto; }

/**
 * 🔴 Stacked, full width, two or three. Never a grid.
 *
 * Four tiles in a two-by-two grid is the Kahoot layout, and in HQ that layout
 * means a question that counts towards something. Nothing in a walk counts, so
 * it must not borrow the look of the thing that does.
 *
 * 50px is the floor the brief names and `min-height` rather than `height`, so a
 * two-line option grows instead of clipping - a clipped option is a question he
 * cannot read, which is the one failure that cannot be recovered by tapping.
 */
.wk-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wk-opt {
  display: block; width: 100%; min-height: 56px; padding: 14px 16px;
  font: inherit; font-size: 18px; line-height: 1.35; text-align: left;
  color: var(--ink); background: var(--btn-a); border: 2px solid var(--line);
  border-radius: var(--radius); cursor: pointer;
}
.wk-opt:active { transform: translateY(2px); }
/* The one he got right stays bright; the others fall back so his answer is the
   last thing on the screen. A dimmed WRONG option is still legible - he has to
   be able to read what he ruled out. */
.wk-opt.right { color: var(--on-bright); background: var(--green); border-color: var(--green); }
.wk-opt.dim { opacity: .45; }
.wk-opt:disabled { cursor: default; }

/* The nudge, or the yes. One line, under the options, where he is looking. */
.wk-tell { margin: 16px 0 0; font-size: 17px; line-height: 1.45; }
.wk-tell.good { color: var(--green); font-weight: 600; }
.wk-tell.look { color: var(--muted); }

.wk-write-lead { margin: 4px 0 10px; font-size: 15px; color: var(--muted); }
.wk-write {
  margin: 0; padding: 14px 16px; font-size: 19px; line-height: 1.5;
  border: 2px dashed var(--turq); border-radius: var(--radius);
}

/* Under the sentence he copies down, where that sentence is NOT from his own
   notes. Same meaning as a guide card's .sg-note, same edge - he has to be able
   to tell our wording from his teacher's before he writes it on his sheet. */
.wk-flag {
  margin: 14px 0 0; padding: 12px 14px; font-size: 16px; line-height: 1.5;
  color: var(--ink); background: var(--sunk);
  border-left: 6px solid var(--turq); border-radius: var(--radius);
}

.wk-go { display: block; width: 100%; margin-top: 20px; }

.wk-done { text-align: center; padding-top: 20px; }
.wk-done h1 { font-size: 17px; line-height: 1.5; }
.wk-line { font-size: 17px; margin: 0 0 10px; }
.wk-done .big-btn { display: block; width: 100%; margin: 22px 0 0; }
.wk-done .ghost-btn { width: 100%; }

/* The walk's row in the Study Guides list. Same control as a guide's, marked
   by its edge so the thing to do FIRST is the one that stands out - not by a
   badge, which would be one more word to read. */
.sg-item.sg-walk { border-left: 6px solid var(--turq); }

/* ============================================================== the motion
 *
 * Jason, 2026-10-25: "I want animation." Everything above this line draws the
 * screen; everything below it makes the screen MOVE, and the two are kept
 * apart on purpose.
 *
 * 🔴 EVERY animation and transition in this file is inside this one
 * `prefers-reduced-motion: no-preference` block, and there is no other. With
 * motion off they do not exist - not "are overridden", do not exist - so the
 * screen is the finished state of every rule above, which is already complete:
 * the bar sits at `--p`, the right option is green, the dots are sized and
 * colored, and every arriving element is simply there. That is the test, and
 * `tests/walk.test.mjs` asserts the containment by parsing this file, because a
 * stray `transition` three rules further down is invisible on a screenshot.
 *
 * The house convention it follows is guide.css's and styles.css's `.pr-row`:
 * opt IN under no-preference rather than switch off under reduce. A rule that
 * has to be turned off is a rule somebody can forget to turn off.
 *
 * Two hard numbers, both from the brief:
 *   - no animation runs longer than 240ms, and the longest total - the last
 *     thing in a stagger, the Next button - lands at 300ms
 *   - transform and opacity ONLY. Nothing here touches height, width, top or
 *     margin, so none of it can cost a layout
 *
 * And nothing is on the path to a tap. These are decorations on a state the
 * handler has already finished writing: a button mid-arrival is a button that
 * works, because opacity and transform do not take pointer events away.
 */

@media (prefers-reduced-motion: no-preference) {
  .wk-wrap { --wk-ease: cubic-bezier(.22, .7, .3, 1); }

  /* ---------------------------------------------------- 1. a step arrives
   *
   * The card comes up as one piece. The step leaving does not go anywhere -
   * this is a stack he is walking down, not a carousel, and a slide-out would
   * put 200ms between his tap and the next thing to read. */
  .wk-card.wk-in { animation: wk-arrive 220ms var(--wk-ease) both; }

  /* Then, just behind it, the thing he actually taps. One beat, not a cascade:
     a card whose every line arrives separately is a credits roll. */
  .wk-a1 { animation: wk-arrive 190ms 60ms var(--wk-ease) both; }
  /* And last, the way forward - see wk-a2 on the option moment below. */
  .wk-a2 { animation: wk-arrive 180ms 120ms var(--wk-ease) both; }

  .wk-done.wk-in { animation: wk-arrive 220ms var(--wk-ease) both; }

  /* The bar grows from where the last step left it. Both ends come off the
     element's own custom properties, so if a browser ever refuses var() in a
     keyframe the whole animation is dropped and the static scaleX stands. */
  .wk-bar i { animation: wk-fill 260ms var(--wk-ease) both; }

  /* ------------------------------------------------ 2. the right answer
   *
   * A settle, not a bounce: it goes up 3.5% and comes back, and the green
   * arrives underneath it as a transition over the same quarter second. The
   * yes line and the Next button carry wk-a1 and wk-a2 from the markup, which
   * is what staggers the three apart - option, then yes, then forward. */
  .wk-opt { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease; }
  .wk-opt.right { animation: wk-settle 240ms var(--wk-ease) both; }

  /* --------------------------------------------------- 3. a soft no
   *
   * The dim is the transition above and nothing else. No shake, no shift, no
   * red, no buzz - CLAUDE.md is explicit that a nudge is a soft neutral tone
   * and a hint, and a 2px jolt is a buzzer you can see. The nudge itself
   * arrives, which is the only movement on a tap that was not it. */
  .wk-tell-a, .wk-tell-b { animation: wk-arrive 190ms var(--wk-ease) both; }

  /* ------------------------------------------- 4. an idea is finished
   *
   * The open dot turns green under him while he reads the sentence to copy.
   * A transition, so it is the same movement whichever way a dot changes. */
  .wk-dot { transition: background-color 240ms ease, box-shadow 240ms ease, transform 240ms var(--wk-ease); }
}

@keyframes wk-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* 1.035, deliberately small. It is a thing settling into being the answer, and
   anything bigger is the bouncing this screen was told not to do. */
@keyframes wk-settle {
  0%   { transform: none; }
  40%  { transform: scale(1.035); }
  100% { transform: none; }
}
@keyframes wk-fill {
  from { transform: scaleX(var(--p0, 0)); }
  to   { transform: scaleX(var(--p, 1)); }
}