/* layer: family (skip counting)
   is:    the look of the chain machinery — the group that waits, the groups
          laid on the track, the bare chain of numbers
   owns:  nothing a single lesson decides */

/* the skip family leans on the boxes since the connect moment —
   whoever brings the skip brings its boxes along */
@import url("boxes.css");

/* The chain of twos: the pair that waits, the pairs laid on the track,
   and the bare chain of numbers. */

/* ONE size for the cherry, wherever it stands: on the track and in the
   waiting pair alike, a fraction of the track's own unit. Two sizes would
   say they are different things. */
[data-screen] {
  --pair-thing: calc(var(--unit) * 0.72);
}

/* ---------- one pair at a time ---------- */

/* a pair takes its two units of the track and stays there */
.laid {
  position: absolute;
  /* seated a canonical breath above the rail, never on it */
  top: calc(52px - 34px - var(--breath));
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  animation: settle 0.34s ease;
}

.laid .thing {
  width: var(--pair-thing);
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
}

.supply {
  display: flex;
  justify-content: center;
  align-items: center;
  /* measured by the same token that sizes the pair inside it, so the band
     never changes height when the last pair leaves */
  min-height: calc(var(--pair-thing) + 38px);
  transition: opacity var(--step) ease;
}

.supply[data-gone="true"] {
  opacity: 0;
}

.pair {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-5);
  gap: var(--space-3);
  border-radius: var(--round-pill);
  border: 2px solid var(--tray-rim);
  background: var(--tray);
  box-shadow: 0 3px 0 var(--tray-rim);
  cursor: pointer;
  transition: transform var(--step) ease, box-shadow var(--step) ease;
}

.pair:hover {
  transform: translateY(-4px);
  box-shadow: 0 3px 0 var(--tray-rim), 0 10px 22px var(--shade-soft);
}

.pair .thing {
  width: var(--pair-thing);
}

/* ---------- nothing but the numbers ---------- */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* the chain's own squeeze — a content-fitting metric, named where it
     lives, like pigment (DESIGN §8). What it MEASURES is the room, never
     the window (DESIGN §3): the band declares itself a size container, so
     cqw is what the voice and the hand really left the numbers. The
     window's share only ever looked right because the band happens to be
     four fifths of a phone and two thirds of a desk. The fraction is
     calibrated on the band as measured (316px on the phone, 986px on the
     desk) to redraw the chain the size it already was. */
  --squeeze: clamp(8px, 2.65cqw, 26px);
  gap: var(--squeeze);
}

.term {
  /* the term's own floor, the chain's second content-fitting metric,
     measured in the same room: two digits keep their standing whatever
     the band left, and no number on a phone is ever sized by a desk's
     proportion. Calibrated like the squeeze — the phone rests on the
     floor, the desk on the ceiling, exactly where the window's share used
     to leave them. */
  min-width: clamp(64px, 9.8cqw, 96px);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  font-size: var(--type-numeral);
  font-weight: 700;
  color: var(--count);
}

/* the growth, written between neighbours — laid hidden on arrival so its
   room is reserved (nothing moves on a living screen); the check lights it */
/* the mark RIDES THE GAP it measures: a zero-width anchor in the flow (the
   row keeps its rhythm — with the blank on a phone, an in-line chip broke
   the chain in two), and the fact floats above the gap wearing the stamp's
   frame — a sealed fact, same species as the total under a counted box. It
   pops in with a contained scale; absolute, so nothing else moves. */
.grow {
  position: relative;
  width: 0;
  min-width: 0;
  visibility: hidden;
}

.grow b {
  position: absolute;
  left: 0;
  top: 50%;
  min-width: 52px;
  padding: var(--space-1) var(--space-2);
  text-align: center;
  font-size: var(--type-answer);
  font-weight: 800;
  color: var(--count);
  background: var(--ground);
  border: 2px solid var(--count-soft);
  border-radius: var(--round-pill);
  opacity: 0;
  transform: translate(-50%, calc(-50% - 1.9em)) scale(0.6);
  transition: opacity var(--step) ease, transform var(--step) ease;
}

.grow[data-shown="true"] {
  visibility: visible;
}

.grow[data-shown="true"] b {
  opacity: 1;
  transform: translate(-50%, calc(-50% - 1.9em)) scale(1);
}

.term.blank {
  color: var(--count-soft);
  border-bottom: 4px dashed var(--count-soft);
}

/* The keypad writes here, not into a second display under the exercise.
   While armed, the missing term reads as a real input field in the chain. */
.term.blank[data-awaits="true"] {
  color: var(--count);
  border-color: var(--count);
  background: color-mix(in srgb, var(--count-soft) 16%, transparent);
  border-radius: var(--round-slab) var(--round-slab) 0 0;
}

/* A practice miss is repaired in the chain itself: the last known term is
   held, the shared step appears in the gap, and only then does the next term
   seal. The attempted value remains in the platform's comparison below. */
.chain[data-review] .term[data-review-source="true"] {
  color: var(--ink);
  background: color-mix(in srgb, var(--count-soft) 24%, transparent);
  border-radius: var(--round-pill);
}

.chain[data-review="resolved"] .term[data-resolved="true"] {
  color: var(--count);
  border-bottom: 4px solid var(--count);
  animation: review-term-land var(--calm) ease both;
}

@keyframes review-term-land {
  from {
    opacity: 0.45;
    transform: translateY(-8px) scale(0.9);
  }
}

/* the whole count in a row, every ending lit up — the trick, shown */
.pattern {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--air);
}

.pterm {
  font-size: var(--type-hero);
  font-weight: 800;
  color: var(--ink-soft);
}

.pterm b {
  color: var(--count);
  border-bottom: 4px solid var(--count-soft);
}


/* ---------- the written name (aula 5) ---------- */

/* the name as tiles: each part a slab of prose the eye can hold apart */
.namerow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack);
}

.nameword {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nameword .part {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--round-slab);
  border: 2px solid var(--tray-rim);
  background: var(--paper-bright);
  color: var(--ink);
  font-size: var(--type-title);
  font-weight: 700;
  transition: border-color var(--step) ease, color var(--step) ease,
    background var(--step) ease;
}

.nameword .hyphen {
  color: var(--ink-soft);
  font-size: var(--type-title);
  font-weight: 700;
}

/* the worked miss lights the name part by part in the count's ink */
.nameword .part[data-lit="true"] {
  border-color: var(--count-soft);
  background: var(--count-pale);
  color: var(--count);
}

/* the dictation slot doubles as replay — a live tool, not furniture */
.term[data-replay="true"] {
  cursor: pointer;
}


/* ---------- the long line (aula 6) ---------- */

/* the empty place: the line's own room, waiting in the count's ink. It
   is a SPAN of the platform's track, so the caret law reaches it — the
   dashed floor is what says "a number lives here and is missing" */
[data-skip-line-stop].blank {
  border-bottom: 3px dashed var(--count-soft);
  min-width: 30px;
  text-align: center;
}

/* the found place wears the win where the answer lives (the choice's own
   dressing, in the track's grammar) */
[data-skip-line-stop][data-won="true"] {
  background: var(--count-pale);
  border-radius: var(--round-slab);
  box-shadow: 0 0 0 3px var(--count-soft);
}