/* Pattern Painter. Colours come from brand.css and are never redeclared here.

   Filled squares are brand navy with white numerals, because the pattern has
   to read across the whole chart from the back of a classroom. Gold is the
   accent that says "this is you" — the glow as a square lands, the chosen
   step, the star on a step already finished. Sized so every tap target stays
   comfortably larger than a fingertip on a tablet. */

/* ---- choosing what to count by ---- */

.chooser {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-bottom: 1.75rem;
}

.group h2 {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-soft);
}

.steps { display: flex; gap: 0.5rem; }

.step {
  width: 3.1rem;
  height: 3.1rem;
  border: 2px solid var(--edge);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--navy-ink);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  transition: transform 0.1s, border-color 0.15s, background 0.15s;
}

.step:hover { border-color: var(--gold); }
.step:active { transform: scale(0.94); }

.step.current {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
  box-shadow: inset 0 -4px 0 var(--gold-bright);
}

.step.done::after {
  content: "★";
  position: absolute;
  top: -0.5rem;
  right: -0.4rem;
  font-size: 0.95rem;
  color: var(--gold);
  text-shadow: 0 0 3px var(--paper);
}

.step.current.done::after { color: var(--gold-bright); }

/* ---- the chart ---- */

.board {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  align-items: flex-start;
}

.chart {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.3rem;
  width: min(100%, 34rem);
  flex: 1 1 22rem;
}

.cell {
  aspect-ratio: 1;
  border: 1px solid var(--edge);
  border-radius: 0.4rem;
  background: var(--card);
  color: var(--ink-soft);
  font: inherit;
  font-family: var(--face-num);
  font-variant-numeric: tabular-nums;
  font-size: clamp(0.7rem, 1.9vw, 1rem);
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cell:hover { border-color: var(--gold); }

.cell.hit {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
  font-weight: 700;
}

.cell.landed { animation: land 0.3s ease-out; }

.cell.wrong {
  animation: shake 0.3s ease-in-out;
  border-color: var(--wrong);
  color: var(--wrong);
}

@keyframes land {
  0% { transform: scale(1.35); box-shadow: 0 0 0 0.55rem var(--gold-bright); }
  100% { transform: scale(1); box-shadow: none; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-0.2rem); }
  75% { transform: translateX(0.2rem); }
}

/* ---- the readout beside the chart ---- */

.side { flex: 1 1 15rem; max-width: 24rem; }

.tally {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy-ink);
  min-height: 2.3rem;
}

.trail {
  margin: 0.2rem 0 1.1rem;
  color: var(--ink-soft);
  min-height: 3rem;
  word-spacing: 0.15rem;
  font-variant-numeric: tabular-nums;
}

.controls { display: flex; gap: 0.6rem; margin-bottom: 1.3rem; }

.ghost {
  border: 2px solid var(--edge);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
}

.ghost:hover { border-color: var(--gold); color: var(--gold-ink); }

.pattern {
  background: var(--card);
  border: 1px solid var(--edge);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--lift);
}

.pattern h2 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--navy-ink); }
.pattern .shape { margin: 0 0 0.5rem; font-weight: 700; }
.pattern .why { margin: 0 0 0.95rem; color: var(--ink-soft); }

.times { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.times td { padding: 0.08rem 0.22rem; text-align: right; color: var(--ink-soft); }
.times td:last-child { font-weight: 700; color: var(--navy-ink); }

.note { margin-top: 1.1rem; font-size: 0.85rem; color: var(--wrong); }

/* ---- phones ----

   The chart must stay ten columns wide: the whole point is that adding 9 moves
   one row down and one column left, and that only reads on a ten-wide grid. So
   the columns cannot be reduced, and the only way to give a fingertip more to
   aim at is to take the page gutter back and tighten the gaps. That moves the
   cells from 30px to about 37px at 390px wide.

   Measured with app/_diag.html, which pins a real viewport width in an iframe
   and reports every tap target under 40px. */

@media (max-width: 30rem) {
  .chart {
    gap: 2px;
    width: calc(100% + 2 * var(--gutter));
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding: 0 2px;
  }

  .cell {
    border-radius: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
  }

  .cell.hit { font-weight: 800; }

  .step { width: 3.4rem; height: 3.4rem; }

  .controls .ghost { flex: 1 1 0; padding: 0.7rem 0.5rem; }
}