/* src/components/jr/maths/maths.css — SJ2 Maths.
   Transcribed from art-source/design-sj2-2026-09-12/screens/SJ2 Maths.dc.html. Her geometry is
   carried inline there; every declaration below is moved out of her markup unchanged, so the
   pixels are hers. Colours that change with the state of a rod or a tile stay inline on the
   element, exactly as her sc-for does, because they are data rather than design.

   The activity bar is 72px and it is NOT the app chrome: Maths, Spelling and Homework are
   stops inside an evening, so they replace the 76px top bar and the 72px nav with one bar that
   has a way out on the left and the count on the right. That is how she draws all three. */

.jr-m { position: absolute; inset: 0; overflow: hidden; background: var(--sj-stage); }
.jr-m-spacer { flex: 1 1 auto; }

/* ---------------------------------------------------------------- panes */
.jr-m-pane { position: absolute; left: 0; right: 0; top: 72px; bottom: 0; box-sizing: border-box; }
.jr-m-pane-intro { padding: 44px 60px 40px; display: flex; gap: 36px; align-items: center; }
.jr-m-pane-teach { padding: 30px 44px; display: flex; gap: 26px; }
.jr-m-pane-work { padding: 24px 40px 26px; display: flex; gap: 22px; }
.jr-m-pane-done { padding: 44px 60px; display: flex; gap: 36px; align-items: center; }

/* ---------------------------------------------------------------- the intro card */
.jr-m-card {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  border-radius: 30px;
  box-shadow: 0 20px 46px rgba(35, 50, 44, .2);
  padding: 38px 42px;
}

.jr-m-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sj-card);
  background: var(--sj-sky);
  border-radius: var(--sj-r-pill);
  padding: 9px 20px;
  margin-bottom: 16px;
}

.jr-m-kicker-done { background: var(--sj-green); }

.jr-m-title {
  margin: 0 0 14px;
  font-weight: 700;
  font-size: 54px;
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--sj-ink);
  text-wrap: pretty;
}

.jr-m-title-done { font-size: 52px; }

.jr-m-blurb {
  margin: 0 0 26px;
  font-family: var(--sj-font-story);
  font-size: 24px;
  line-height: 1.45;
  color: var(--sj-ink);
  max-width: 46ch;
  text-wrap: pretty;
}

.jr-m-blurb-done { font-size: 25px; max-width: 44ch; }

.jr-m-chips { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.jr-m-chips-done { margin-bottom: 28px; }

.jr-m-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 18px;
  border-radius: var(--sj-r-pill);
  padding: 10px 18px;
}

.jr-m-chip-ten { color: var(--sj-sky-ink); background: var(--sj-teal-tint); border: 1px solid #c7e3f3; }
.jr-m-chip-one { color: var(--sj-sun-ink); background: var(--sj-sun-tint); border: 1px solid #f6d98a; }
.jr-m-chip-plain { gap: 9px; color: var(--sj-ink); background: var(--sj-stage); border: 1px solid var(--sj-line-warm); }
.jr-m-chip-green { gap: 9px; font-size: 19px; color: var(--sj-green-ink); background: var(--sj-green-tint); border: 1px solid #c3dda9; }
.jr-m-chip-star { gap: 9px; font-size: 19px; color: var(--sj-ink); background: var(--sj-sun-tint); border: 1px solid #f6d98a; }

.jr-m-swatch-ten { width: 14px; height: 38px; border-radius: 4px; background: var(--sj-sky); border: 1px solid var(--sj-sky-ink); display: block; }
.jr-m-swatch-one { width: 18px; height: 18px; border-radius: 4px; background: var(--sj-sun); border: 1px solid #d89f12; display: block; }

/* The big orange "Watch me do one first". Her own two-line CTA, 84px tall. */
.jr-m-watch {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  border: none;
  cursor: pointer;
  min-height: 84px;
  padding: 0 26px;
  border-radius: 22px;
  background: var(--sj-orange);
  box-shadow: 0 5px 0 var(--sj-orange-deep), 0 12px 24px rgba(181, 69, 10, .2);
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  margin-bottom: 14px;
}

.jr-m-watch:active { transform: translateY(5px); box-shadow: 0 0 0 var(--sj-orange-deep); }

.jr-m-watch-disc {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 253, 248, .24);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jr-m-watch-text { flex: 1 1 auto; min-width: 0; }
.jr-m-watch-head { display: block; font-weight: 600; font-size: 26px; color: var(--sj-card); line-height: 1.1; }
.jr-m-watch-sub { display: block; font-size: 17px; font-weight: 600; color: var(--sj-card); margin-top: 2px; }

.jr-m-know {
  appearance: none;
  cursor: pointer;
  min-height: 56px;
  padding: 0 22px;
  border-radius: 16px;
  background: var(--sj-card);
  border: 1.5px solid var(--sj-line);
  box-shadow: 0 4px 0 var(--sj-line);
  font-weight: 600;
  font-size: 19px;
  color: var(--sj-ink);
}

.jr-m-know:active { transform: translateY(4px); box-shadow: none; }

/* ---------------------------------------------------------------- the guide column */
/* The bubble, the tail and the figure are activity.css; this is only the column they sit in. */
.jr-m-guide { flex: 0 0 360px; display: flex; flex-direction: column; gap: 14px; align-items: center; }

/* ---------------------------------------------------------------- Numi's turn */
.jr-m-teach-card {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(35, 50, 44, .18);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.jr-m-teach-head { display: flex; align-items: baseline; gap: 16px; }
.jr-m-teach-label { font-weight: 600; font-size: 14px; letter-spacing: .13em; text-transform: uppercase; color: #a8492a; }
.jr-m-teach-sum { font-weight: 700; font-size: 44px; color: var(--sj-ink); letter-spacing: -.01em; }

.jr-m-teach-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 26px; align-items: stretch; justify-content: center; }
.jr-m-teach-rows { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; }

.jr-m-teach-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: 16px; border-width: 1.5px; border-style: solid; }

.jr-m-teach-n {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--sj-card);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jr-m-teach-text { margin: 0; font-family: var(--sj-font-story); font-size: 22px; line-height: 1.4; color: var(--sj-ink); text-wrap: pretty; }

.jr-m-teach-model {
  flex: 0 0 380px;
  align-self: center;
  background: var(--sj-stage);
  border: 1px solid var(--sj-line);
  border-radius: 20px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jr-m-teach-model-label { font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sj-ink); }
.jr-m-teach-tens { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; }
/* `position: relative` so the strike rule inside can sit over it (DECISIONS #118). */
.jr-m-teach-ten { position: relative; width: 16px; height: 72px; border-radius: 4px; border-width: 1px; border-style: solid; display: block; }
.jr-m-teach-ones { display: flex; gap: 5px; flex-wrap: wrap; }
.jr-m-teach-one { position: relative; width: 20px; height: 20px; border-radius: 4px; border-width: 1px; border-style: solid; display: block; }

.jr-m-teach-actions { display: flex; gap: 14px; align-items: center; }

.jr-m-next {
  appearance: none;
  border: none;
  cursor: pointer;
  min-height: 66px;
  padding: 0 30px;
  border-radius: 18px;
  background: var(--sj-orange);
  color: var(--sj-card);
  font-weight: 700;
  font-size: 22px;
  box-shadow: 0 5px 0 var(--sj-orange-deep);
}

.jr-m-next:active { transform: translateY(5px); box-shadow: none; }

.jr-m-again {
  appearance: none;
  cursor: pointer;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 16px;
  background: var(--sj-card);
  border: 1.5px solid var(--sj-line);
  font-weight: 500;
  font-size: 18px;
  color: var(--sj-ink);
}

/* ---------------------------------------------------------------- the work pane */
.jr-m-work-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.jr-m-sumcard {
  flex: none;
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(35, 50, 44, .16);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.jr-m-qlabel {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sj-sky-ink);
  background: var(--sj-teal-tint);
  border: 1px solid #c7e3f3;
  border-radius: var(--sj-r-pill);
  padding: 9px 16px;
}

.jr-m-sum { font-weight: 700; font-size: 58px; color: var(--sj-ink); letter-spacing: -.01em; line-height: 1; }

.jr-m-break {
  appearance: none;
  cursor: pointer;
  min-height: 54px;
  padding: 0 20px;
  border-radius: 16px;
  background: var(--sj-teal-tint);
  border: 1.5px solid #c7e3f3;
  font-weight: 600;
  font-size: 18px;
  color: var(--sj-sky-ink);
  display: flex;
  align-items: center;
  gap: 10px;
}

.jr-m-break:active { transform: translateY(2px); }

.jr-m-broken {
  font-weight: 600;
  font-size: 17px;
  color: var(--sj-green-ink);
  background: var(--sj-green-tint);
  border: 1px solid #c3dda9;
  border-radius: var(--sj-r-pill);
  padding: 10px 18px;
}

/* Her note, kept because it is the reason the card is flex:none:
   "The rods card hugs its own content. It used to take flex:1 and centre inside, so on a 940
   frame it absorbed every spare pixel in the column and carried a tall empty band above and
   below the rods. The slack now sits OUTSIDE the card, between the diagram and the tiles,
   where empty space reads as breathing room rather than a hole in a bordered box." */
.jr-m-rods {
  flex: none;
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(35, 50, 44, .16);
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jr-m-rods-row { flex: none; display: flex; gap: 28px; align-items: flex-start; }
.jr-m-rods-col { flex: 1 1 auto; min-width: 0; }

.jr-m-rods-label { display: block; font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.jr-m-rods-label-ten { color: var(--sj-sky-ink); }
.jr-m-rods-label-one { color: var(--sj-sun-ink); }

.jr-m-tens { display: flex; gap: 7px; flex-wrap: wrap; align-items: flex-end; }
.jr-m-ten { position: relative; width: 22px; height: 96px; border-radius: 5px; border-width: 1.5px; border-style: solid; display: block; }
.jr-m-ones { display: flex; gap: 6px; flex-wrap: wrap; max-width: 330px; }
.jr-m-one { position: relative; width: 26px; height: 26px; border-radius: 5px; border-width: 1.5px; border-style: solid; display: block; }

/* A struck block is one being taken away. Grey out and a rule through it, never red on it. */
.jr-m-strike-ten { position: absolute; left: -6px; right: -6px; top: 50%; height: 3px; background: var(--sj-orange-deep); transform: rotate(-70deg); display: block; }
.jr-m-strike-one { position: absolute; left: -4px; right: -4px; top: 50%; height: 3px; background: var(--sj-orange-deep); transform: rotate(-45deg); display: block; }

.jr-m-rodnote { margin: 14px 0 0; font-family: var(--sj-font-story); font-size: 21px; line-height: 1.4; color: var(--sj-ink); text-wrap: pretty; }

.jr-m-slack { flex: 1 1 auto; min-height: 10px; }

/* Her note: "The sum sits at the top of the frame and the tiles at the bottom, so the question
   has to be asked again next to the answers." */
.jr-m-ask { flex: none; margin: 0; font-weight: 600; font-size: 22px; color: var(--sj-ink); }

.jr-m-tiles { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.jr-m-tile {
  appearance: none;
  cursor: pointer;
  min-height: 88px;
  border-radius: 20px;
  background: var(--sj-card);
  border: 2.5px solid var(--sj-line);
  box-shadow: 0 5px 0 var(--sj-line);
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 40px;
  color: var(--sj-ink);
  transition: transform 120ms cubic-bezier(.2, .75, .25, 1);
}

.jr-m-tile:active { transform: translateY(5px); box-shadow: none; }

/* A tile that was not it is grey and dashed. NEVER red: her own line, and CLAUDE.md's. */
.jr-m-tile-picked {
  background: var(--sj-stage);
  border-color: var(--sj-ink);
  border-style: dashed;
  box-shadow: 0 5px 0 var(--sj-line-warm);
}

/* ---------------------------------------------------------------- the right column */
.jr-m-side { flex: 0 0 372px; display: flex; flex-direction: column; gap: 14px; }

.jr-m-pad {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(35, 50, 44, .12);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jr-m-pad-label { font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sj-ink); }

.jr-m-pad-surface {
  flex: 1 1 auto;
  min-height: 220px;
  border-radius: 14px;
  border: 1px dashed #d6cdb9;
  background: repeating-linear-gradient(180deg, transparent 0 46px, var(--sj-line) 46px 47px);
  position: relative;
}

.jr-m-pad-note { font-size: 15px; font-weight: 500; color: var(--sj-ink); }

.jr-m-stuck {
  appearance: none;
  cursor: pointer;
  min-height: 60px;
  padding: 0 20px;
  border-radius: 16px;
  background: var(--sj-card);
  border: 1.5px solid #f3c9b8;
  box-shadow: 0 4px 0 #f3c9b8;
  font-weight: 600;
  font-size: 19px;
  color: #a8492a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.jr-m-stuck:active { transform: translateY(4px); box-shadow: none; }

/* ---------------------------------------------------------------- the close */
.jr-m-misses {
  background: var(--sj-stage);
  border: 1px solid var(--sj-line);
  border-radius: 20px;
  padding: 18px 22px;
  margin-bottom: 28px;
}

.jr-m-misses-label { margin: 0 0 8px; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sj-ink); }
.jr-m-misses-list { margin: 0; font-weight: 600; font-size: 24px; color: var(--sj-ink); }
.jr-m-misses-note { margin: 6px 0 0; font-size: 17px; font-weight: 500; color: var(--sj-ink); }

.jr-m-back {
  appearance: none;
  border: none;
  cursor: pointer;
  min-height: 78px;
  padding: 0 40px;
  border-radius: 22px;
  background: var(--sj-orange);
  color: var(--sj-card);
  font-weight: 700;
  font-size: 26px;
  box-shadow: 0 5px 0 var(--sj-orange-deep);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.jr-m-back:active { transform: translateY(5px); box-shadow: none; }

/* ---------------------------------------------------------------- nothing waiting
   The retry deck with an empty pile (DECISIONS #136). Her stage is untouched: this is the
   intro card's own geometry with the quiet kicker SJ2 Homework already uses for an honest
   empty ("Nothing to do"), and the two buttons are the pair SJ2 Spelling draws under "No
   words have come in yet" (a 74px orange primary and a 74px quiet secondary), so both clear
   the 64px floor and neither is a new shape. */
.jr-m-pane-none { padding: 60px; display: flex; gap: 36px; align-items: center; }
.jr-m-card-none { padding: 40px 44px; }

.jr-m-kicker-none {
  color: var(--sj-ink);
  background: var(--sj-stage);
  border: 1px solid var(--sj-line-warm);
}

.jr-m-title-none { font-size: 50px; line-height: 1.06; }
.jr-m-blurb-none { font-size: 25px; max-width: 44ch; margin-bottom: 0; }

.jr-m-none-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

.jr-m-none-go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 0 34px;
  border-radius: 20px;
  background: var(--sj-orange);
  color: var(--sj-card);
  font-weight: 700;
  font-size: 23px;
  box-shadow: 0 5px 0 var(--sj-orange-deep);
  text-decoration: none;
}

.jr-m-none-go:active { transform: translateY(5px); box-shadow: none; }

.jr-m-none-back {
  appearance: none;
  cursor: pointer;
  min-height: 74px;
  padding: 0 28px;
  border-radius: 20px;
  background: var(--sj-card);
  border: 1.5px solid var(--sj-line);
  box-shadow: 0 4px 0 var(--sj-line);
  font-weight: 600;
  font-size: 21px;
  color: var(--sj-ink);
}

.jr-m-none-back:active { transform: translateY(4px); box-shadow: none; }