/* src/components/jr/spelling/spelling.css — SJ2 Spelling.
   Transcribed from art-source/design-sj2-2026-09-12/screens/SJ2 Spelling.dc.html. Her geometry
   is inline there; every declaration below is moved out of her markup unchanged. Colours that
   depend on the state of a word or a night stay inline on the element, as her sc-for does.

   The 72px bar, the guide bubble and the wash are activity.css, shared with Maths and Homework.

   ONE THING ON THIS SCREEN IS NOT DRAWN BY HER: the letter keypad. Her Type mode is an
   <input type="text">, and no text field a child can reach ships in this app (CLAUDE.md, and
   it is a privacy rule before it is an interaction one). The keys below are built out of her
   own tile family: 64px, her 16px tile radius, her card cream, her 4px hard shadow. See
   docs/DECISIONS.md #73. */

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

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

/* ---------------------------------------------------------------- the big cards */
.jr-sp-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: 34px 40px;
}

.jr-sp-card-empty { padding: 40px 44px; }
.jr-sp-card-done { padding: 36px 40px; }

.jr-sp-tagrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }

.jr-sp-day {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sj-ink);
  background: var(--sj-sun);
  border-radius: var(--sj-r-pill);
  padding: 9px 20px;
}

.jr-sp-waiting {
  display: inline-flex;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sj-ink);
  background: var(--sj-stage);
  border: 1px solid var(--sj-line-warm);
  border-radius: var(--sj-r-pill);
  padding: 9px 20px;
  margin-bottom: 16px;
}

.jr-sp-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  color: var(--sj-green-ink);
  background: var(--sj-green-tint);
  border: 1px solid #c3dda9;
  border-radius: var(--sj-r-pill);
  padding: 8px 16px;
}

.jr-sp-title { margin: 0 0 12px; font-weight: 700; font-size: 50px; line-height: 1.05; letter-spacing: -.015em; color: var(--sj-ink); text-wrap: pretty; }
.jr-sp-title-empty { font-size: 52px; line-height: 1.06; margin-bottom: 14px; }

.jr-sp-blurb { margin: 0 0 14px; font-family: var(--sj-font-story); font-size: 23px; line-height: 1.45; color: var(--sj-ink); max-width: 48ch; text-wrap: pretty; }
.jr-sp-blurb-empty { margin-bottom: 28px; font-size: 25px; max-width: 44ch; }
.jr-sp-blurb-done { margin-bottom: 24px; font-size: 24px; max-width: 46ch; }

.jr-sp-carried {
  margin: 0 0 18px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border-radius: 16px;
  background: var(--sj-sun-tint);
  border: 1.5px solid #f6d98a;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #7a4a08;
  max-width: 52ch;
  text-wrap: pretty;
}

.jr-sp-carried-dot { flex: none; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--sj-sun-ink); display: block; }

/* Monday, the only night the whole list is on screen. */
.jr-sp-meet { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; margin-bottom: 22px; }

.jr-sp-meet-word {
  appearance: none;
  cursor: pointer;
  min-height: 62px;
  border-radius: 16px;
  background: var(--sj-sun-tint);
  border: 1.5px solid #f6d98a;
  box-shadow: 0 4px 0 #f6d98a;
  font-family: var(--sj-font-story);
  font-size: 25px;
  color: var(--sj-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.jr-sp-meet-word:active { transform: translateY(4px); box-shadow: none; }

/* The week so far, from Tuesday on. */
.jr-sp-week { background: var(--sj-stage); border: 1px solid var(--sj-line); border-radius: 20px; padding: 16px 20px; margin-bottom: 22px; }
.jr-sp-week-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.jr-sp-week-label { font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sj-ink); }
.jr-sp-week-count { font-weight: 600; font-size: 16px; color: var(--sj-green-ink); }
.jr-sp-nights { display: flex; gap: 9px; flex-wrap: wrap; }

.jr-sp-night {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  border-width: 1.5px;
  border-radius: var(--sj-r-pill);
  padding: 8px 15px;
}

.jr-sp-counts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }

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

.jr-sp-count-sun { color: var(--sj-sun-ink); background: var(--sj-sun-tint); border: 1px solid #f6d98a; }
.jr-sp-count-plain { color: var(--sj-ink); background: var(--sj-stage); border: 1px solid var(--sj-line-warm); }

/* The big start button. Orange is the action being asked for; at the weekend nothing is asked,
   so the same button offers in cream rather than instructing in orange. Hers. */
.jr-sp-start {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  cursor: pointer;
  min-height: 82px;
  padding: 0 26px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
}

.jr-sp-start:active { transform: translateY(5px); box-shadow: 0 0 0 var(--sj-orange-deep); }
.jr-sp-start-disc { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.jr-sp-start-text { flex: 1 1 auto; min-width: 0; }
.jr-sp-start-head { display: block; font-weight: 600; font-size: 26px; line-height: 1.1; }
.jr-sp-start-sub { display: block; font-size: 17px; font-weight: 600; margin-top: 2px; }

.jr-sp-empty-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.jr-sp-ask {
  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-sp-ask:active { transform: translateY(5px); box-shadow: none; }

.jr-sp-later {
  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-sp-later:active { transform: translateY(4px); box-shadow: none; }

/* ---------------------------------------------------------------- the guide column */
.jr-sp-guide { flex: 0 0 340px; display: flex; flex-direction: column; gap: 14px; align-items: center; }

.jr-sp-lexi-lone {
  flex: none;
  width: 250px;
  height: 250px;
  display: block;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: drop-shadow(0 12px 18px rgba(35, 50, 44, .16));
}

/* ---------------------------------------------------------------- the work pane */
.jr-sp-work {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(35, 50, 44, .16);
  padding: 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jr-sp-stages { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.jr-sp-stage {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--sj-r-pill);
  border-width: 1px;
  border-style: solid;
  padding: 7px 14px;
}

.jr-sp-status { font-weight: 600; font-size: 15px; }

/* Hear it, say it, read it: one big speaker and the prompt. */
.jr-sp-listen {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 20px;
  background: var(--sj-stage);
  border: 1px solid var(--sj-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 26px;
}

.jr-sp-speaker {
  position: relative;
  appearance: none;
  border: 2px solid #f6d98a;
  cursor: pointer;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--sj-sun-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jr-sp-speaker:active { transform: scale(.96); }

/* Her ring pulse. It is a RING that grows and goes; the growth is the transform and the going
   is the part that has to fade, the same shape of exception as the lesson screens' star pop.
   Named in tools/audit/rules_audit.mjs. */
.jr-sp-pulse {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid var(--sj-sun);
  animation: sj-sp-pulse 1.9s ease-out infinite;
  display: block;
}

.jr-sp-prompt { margin: 0; font-weight: 700; font-size: 36px; color: var(--sj-ink); text-align: center; text-wrap: pretty; }
.jr-sp-word { margin: 0; font-family: var(--sj-font-story); font-size: 62px; letter-spacing: .06em; color: var(--sj-ink); }
.jr-sp-word-wrong { border-bottom: 4px dashed var(--sj-sun-ink); padding-bottom: 6px; }
.jr-sp-dots { display: flex; align-items: center; gap: 10px; }
.jr-sp-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--sj-card); border: 2px dashed var(--sj-sun-ink); display: block; }
.jr-sp-hint { margin: 0; font-family: var(--sj-font-story); font-size: 21px; color: var(--sj-ink); text-align: center; max-width: 44ch; text-wrap: pretty; }

/* Write it. */
.jr-sp-write {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  border-radius: 20px;
  background: #fefdf8;
  border: 1px solid var(--sj-line);
  padding: 38px 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jr-sp-write-label { position: absolute; left: 22px; top: 13px; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sj-ink); }
.jr-sp-copy { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; }
.jr-sp-copy-kicker { font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--sj-green-ink); }
.jr-sp-copy-word { font-family: var(--sj-font-story); font-size: 46px; letter-spacing: .06em; color: var(--sj-ink); padding-bottom: 4px; }

.jr-sp-surface { flex: 1 1 auto; min-height: 196px; position: relative; }

.jr-sp-typed { flex: 1 1 auto; min-height: 196px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.jr-sp-cells { display: flex; gap: 9px; }

.jr-sp-cell {
  width: 58px;
  height: 74px;
  border-radius: 14px;
  border-width: 2px;
  border-style: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sj-font-story);
  font-size: 40px;
  color: var(--sj-ink);
}

/* ---- the letter keypad: the app's own, because no text field a child can reach ships ----
   Alphabetical, not QWERTY: a child who is learning to spell hunts a letter by the alphabet,
   and QWERTY is a layout for hands that already type. 64px keys, which clears the child-control
   floor that her 44px chrome does not. */
.jr-sp-keys { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.jr-sp-keyrow { display: flex; gap: 8px; }

.jr-sp-key {
  appearance: none;
  cursor: pointer;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--sj-card);
  border: 1.5px solid var(--sj-line);
  box-shadow: 0 4px 0 var(--sj-line);
  font-family: var(--sj-font-story);
  font-size: 26px;
  color: var(--sj-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.jr-sp-key:active { transform: translateY(4px); box-shadow: none; }
.jr-sp-key-wide { width: 84px; background: var(--sj-stage); }

.jr-sp-chiprow { flex: none; display: flex; justify-content: center; }

.jr-sp-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: var(--sj-r-pill);
  padding: 9px 18px;
  font-size: 17px;
  font-weight: 600;
  border-width: 1px;
  border-style: solid;
}

/* ---------------------------------------------------------------- the work bottom bar */
.jr-sp-actions { flex: none; display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid #f0ebe0; }

.jr-sp-secondary {
  appearance: none;
  cursor: pointer;
  min-height: 56px;
  padding: 0 20px;
  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: 18px;
  color: var(--sj-ink);
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.jr-sp-primary {
  appearance: none;
  border: none;
  cursor: pointer;
  min-height: 66px;
  padding: 0 32px;
  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);
  display: flex;
  align-items: center;
  gap: 12px;
}

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

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

.jr-sp-rail {
  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-sp-rail-head { display: flex; align-items: baseline; gap: 8px; }
.jr-sp-rail-title { font-weight: 600; font-size: 16px; color: var(--sj-ink); }
.jr-sp-rail-count { font-weight: 600; font-size: 14px; color: var(--sj-green-ink); }
.jr-sp-rail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.jr-sp-rail-row { display: flex; align-items: center; gap: 8px; min-height: 26px; }

.jr-sp-rail-box {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sj-card);
}

.jr-sp-rail-shaky { width: 7px; height: 7px; border-radius: 50%; background: #7a4a08; display: block; }
.jr-sp-rail-word { font-family: var(--sj-font-story); font-size: 17px; color: var(--sj-ink); }
.jr-sp-rail-dots { display: flex; align-items: center; gap: 4px; }
.jr-sp-rail-dot { width: 9px; height: 9px; border-radius: 50%; border-width: 1.5px; border-style: solid; box-sizing: border-box; display: block; }
.jr-sp-rail-rest { font-size: 13px; font-weight: 500; color: var(--sj-ink); }
.jr-sp-rail-note { margin: auto 0 0; padding-top: 10px; border-top: 1px solid #f0ebe0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--sj-ink); text-wrap: pretty; }

/* ---------------------------------------------------------------- the close */
.jr-sp-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-green);
  border-radius: var(--sj-r-pill);
  padding: 9px 20px;
  margin-bottom: 16px;
}

.jr-sp-done-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }

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

.jr-sp-done-green { color: var(--sj-green-ink); background: var(--sj-green-tint); border: 1px solid #c3dda9; }
.jr-sp-done-star { color: var(--sj-ink); background: var(--sj-sun-tint); border: 1px solid #f6d98a; }
.jr-sp-done-next { font-weight: 500; color: var(--sj-ink); background: var(--sj-stage); border: 1px solid var(--sj-line-warm); }

.jr-sp-misses { background: var(--sj-stage); border: 1px solid var(--sj-line); border-radius: 20px; padding: 16px 20px; margin-bottom: 24px; }
.jr-sp-misses-label { margin: 0 0 10px; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sj-ink); }
.jr-sp-miss-rows { display: flex; flex-direction: column; gap: 8px; }
.jr-sp-miss-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.jr-sp-miss-word { font-family: var(--sj-font-story); font-size: 25px; color: var(--sj-ink); }
.jr-sp-miss-why { font-size: 16px; font-weight: 500; color: var(--sj-ink); }
.jr-sp-misses-note { margin: 10px 0 0; font-size: 16px; font-weight: 500; color: var(--sj-ink); }

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

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

/* ---------------------------------------------------------------- animation */
@keyframes sj-sp-pulse {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.25); opacity: 0; }
}

/* ---------------------------------------------------------------- the Write / Type toggle */
/* Her pixels exactly as they were when they lived inline on the element (DECISIONS #122). The
   only change is that they have a name now, so the auditor can see the pair and name them as a
   sub-floor exception instead of missing them entirely. */
.jr-sp-mode {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff9e9;
  border: 1px solid #eadfc9;
  border-radius: 999px;
  padding: 4px;
}
.jr-sp-mode-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  color: #13251f;
  background: transparent;
  box-shadow: none;
}
.jr-sp-mode-btn-on {
  background: #fffdf6;
  box-shadow: 0 2px 6px rgba(35, 50, 44, .12);
}