/* Night patrol over Neo City: the app lives in the Sidekick's world after dark.
   Comic panels (white, thick ink outline, hard deep-blue offset shadow) sit over a
   navy sky, a lit skyline and neon glow. Gold = hero suit, cyan = pencil-tip energy,
   red = mask. body.senior (Years 5-6) flattens the playful touches: no emoji, no tilt. */

:root {
  --night: #141433;
  --night-top: #241a4f;
  --night-deep: #0c0d26;
  --ink: #131a30;
  --purple: #4f2759;
  --purple-mid: #7a4a8c;
  --purple-soft: #e6d4f0;
  --gold: #ffc233;
  --gold-deep: #d99a00;
  --gold-soft: #ffe9a8;
  --green-soft: #b8ecc7;
  --red: #a63a20;
  --red-bright: #e8434a;
  --pink: #f57fb5;
  --violet: #c77dff;
  --sky-text: #eef2ff;
  --sky-muted: #aab6da;
  --muted: #4a5570;
  --card: #ffffff;
  --radius: 20px;
  --border: 3px solid var(--ink);
  --pop-shadow: 5px 5px 0 var(--purple-mid);
  --font-display: "Bangers", "Impact", "Arial Black", sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-hand: "Patrick Hand", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html { background: var(--night); }

html, body {
  margin: 0;
  padding: 0;
  color: var(--sky-text);
  font-family: var(--font-body);
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

/* Sky: gradient, two star layers, crescent moon. Fixed pseudo-elements instead of
   background-attachment so iOS Safari does not repaint the scene on every scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='%23fff'/%3E%3Ccircle cx='64' cy='40' r='30' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='46' cy='50' r='32' fill='%23fff3c4' mask='url(%23m)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 24px 36px, #fff 1.1px, transparent 1.8px),
    radial-gradient(circle at 150px 96px, rgba(255, 255, 255, 0.85) 1px, transparent 1.7px),
    radial-gradient(circle at 236px 44px, #fff 0.8px, transparent 1.5px),
    radial-gradient(circle at 88px 196px, rgba(255, 255, 255, 0.7) 1px, transparent 1.7px),
    radial-gradient(circle at 256px 228px, #fff 0.9px, transparent 1.6px),
    radial-gradient(circle at 190px 160px, rgba(255, 255, 255, 0.6) 0.8px, transparent 1.4px),
    linear-gradient(180deg, var(--night-top) 0%, var(--night) 48%, #0f0f2b 100%);
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
  background-position: left 3% bottom calc(24vh + 6px), 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-size: 70px 70px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 100% 100%;
}

/* Neo City skyline with lit windows and neon signs, plus pink and cyan glow behind it. */
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(150px, 24vh, 280px);
  z-index: -1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%230c0d26'%3E%3Crect x='0' y='150' width='70' height='90'/%3E%3Crect x='60' y='110' width='50' height='130'/%3E%3Crect x='120' y='170' width='80' height='70'/%3E%3Crect x='190' y='80' width='60' height='160'/%3E%3Crect x='250' y='130' width='90' height='110'/%3E%3Crect x='330' y='60' width='40' height='180'/%3E%3Crect x='380' y='120' width='70' height='120'/%3E%3Crect x='440' y='160' width='110' height='80'/%3E%3Crect x='540' y='40' width='55' height='200'/%3E%3Crect x='600' y='100' width='80' height='140'/%3E%3Crect x='690' y='140' width='60' height='100'/%3E%3Crect x='740' y='70' width='45' height='170'/%3E%3Crect x='790' y='120' width='100' height='120'/%3E%3Crect x='880' y='90' width='50' height='150'/%3E%3Crect x='930' y='150' width='90' height='90'/%3E%3Crect x='1010' y='60' width='60' height='180'/%3E%3Crect x='1070' y='130' width='70' height='110'/%3E%3Crect x='1130' y='100' width='70' height='140'/%3E%3Crect x='348' y='30' width='4' height='30'/%3E%3Crect x='565' y='10' width='4' height='30'/%3E%3Crect x='1038' y='30' width='4' height='30'/%3E%3C/g%3E%3Cg fill='%23ffc233' opacity='.8'%3E%3Crect x='70' y='122' width='6' height='9'/%3E%3Crect x='84' y='122' width='6' height='9'/%3E%3Crect x='98' y='122' width='6' height='9'/%3E%3Crect x='70' y='142' width='6' height='9'/%3E%3Crect x='98' y='142' width='6' height='9'/%3E%3Crect x='200' y='104' width='6' height='9'/%3E%3Crect x='214' y='104' width='6' height='9'/%3E%3Crect x='228' y='104' width='6' height='9'/%3E%3Crect x='200' y='124' width='6' height='9'/%3E%3Crect x='228' y='144' width='6' height='9'/%3E%3Crect x='262' y='150' width='6' height='9'/%3E%3Crect x='282' y='150' width='6' height='9'/%3E%3Crect x='302' y='150' width='6' height='9'/%3E%3Crect x='322' y='150' width='6' height='9'/%3E%3Crect x='340' y='80' width='6' height='9'/%3E%3Crect x='350' y='104' width='6' height='9'/%3E%3Crect x='398' y='140' width='6' height='9'/%3E%3Crect x='418' y='140' width='6' height='9'/%3E%3Crect x='398' y='160' width='6' height='9'/%3E%3Crect x='552' y='62' width='6' height='9'/%3E%3Crect x='566' y='62' width='6' height='9'/%3E%3Crect x='552' y='84' width='6' height='9'/%3E%3Crect x='566' y='106' width='6' height='9'/%3E%3Crect x='552' y='128' width='6' height='9'/%3E%3Crect x='566' y='150' width='6' height='9'/%3E%3Crect x='612' y='120' width='6' height='9'/%3E%3Crect x='632' y='120' width='6' height='9'/%3E%3Crect x='652' y='120' width='6' height='9'/%3E%3Crect x='612' y='142' width='6' height='9'/%3E%3Crect x='652' y='164' width='6' height='9'/%3E%3Crect x='750' y='92' width='6' height='9'/%3E%3Crect x='762' y='114' width='6' height='9'/%3E%3Crect x='750' y='136' width='6' height='9'/%3E%3Crect x='804' y='146' width='6' height='9'/%3E%3Crect x='824' y='146' width='6' height='9'/%3E%3Crect x='844' y='166' width='6' height='9'/%3E%3Crect x='864' y='146' width='6' height='9'/%3E%3Crect x='890' y='112' width='6' height='9'/%3E%3Crect x='904' y='134' width='6' height='9'/%3E%3Crect x='1022' y='82' width='6' height='9'/%3E%3Crect x='1042' y='82' width='6' height='9'/%3E%3Crect x='1022' y='104' width='6' height='9'/%3E%3Crect x='1042' y='126' width='6' height='9'/%3E%3Crect x='1022' y='148' width='6' height='9'/%3E%3Crect x='1082' y='152' width='6' height='9'/%3E%3Crect x='1102' y='152' width='6' height='9'/%3E%3Crect x='1142' y='122' width='6' height='9'/%3E%3Crect x='1162' y='122' width='6' height='9'/%3E%3Crect x='1142' y='144' width='6' height='9'/%3E%3Crect x='1162' y='166' width='6' height='9'/%3E%3C/g%3E%3Cg fill='%23c77dff' opacity='.75'%3E%3Crect x='132' y='182' width='6' height='9'/%3E%3Crect x='152' y='182' width='6' height='9'/%3E%3Crect x='462' y='182' width='6' height='9'/%3E%3Crect x='482' y='182' width='6' height='9'/%3E%3Crect x='502' y='182' width='6' height='9'/%3E%3Crect x='702' y='162' width='6' height='9'/%3E%3Crect x='722' y='162' width='6' height='9'/%3E%3Crect x='942' y='172' width='6' height='9'/%3E%3Crect x='962' y='172' width='6' height='9'/%3E%3Crect x='982' y='172' width='6' height='9'/%3E%3C/g%3E%3Crect x='196' y='88' width='48' height='8' rx='2' fill='%23f57fb5' opacity='.95'/%3E%3Crect x='796' y='128' width='88' height='8' rx='2' fill='%23c77dff' opacity='.95'/%3E%3Crect x='545' y='46' width='45' height='6' rx='2' fill='%23ffc233' opacity='.95'/%3E%3Crect x='1016' y='66' width='48' height='6' rx='2' fill='%23f57fb5' opacity='.95'/%3E%3C/svg%3E"),
    radial-gradient(240px 130px at 20% 100%, rgba(245, 127, 181, 0.32), transparent 70%),
    radial-gradient(300px 150px at 70% 100%, rgba(199, 125, 255, 0.26), transparent 70%),
    radial-gradient(200px 110px at 92% 100%, rgba(255, 194, 51, 0.2), transparent 70%);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover, auto, auto, auto;
}

.mascot svg {
  width: 1.4em;
  height: 1.4em;
  vertical-align: -0.25em;
  margin-right: 0.1em;
}

#app {
  max-width: 760px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 24px 48px;
}

.screen { display: none; position: relative; }
.screen.active { display: block; animation: fade 0.3s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Comic action lettering: gold fill, ink outline, hard ink drop, soft gold glow. */
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.05;
  margin: 0.3em 0 0.25em;
  letter-spacing: 0.04em;
  color: var(--gold);
  -webkit-text-stroke: 1.2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink), 0 0 22px rgba(255, 194, 51, 0.3);
  text-wrap: balance;
}

h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  letter-spacing: 0.04em;
  color: var(--sky-text);
  text-shadow: 2px 2px 0 var(--ink);
  margin: 1.3em 0 0.5em;
}

.lead { font-size: 1.05rem; color: var(--sky-muted); margin-top: 0; }

/* Start-screen showpiece: emblem, outlined title, the giant glowing pencil, tagline. */
.title-lockup { text-align: center; margin: 18px 0 10px; }
.title-lockup h1 {
  display: inline-block;
  font-size: clamp(2.7rem, 9vw, 4.2rem);
  margin: 0;
  transform: rotate(-2deg);
}
.emblem svg {
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.14em;
  margin-right: 0.16em;
  filter: drop-shadow(2px 2px 0 var(--ink));
}
/* Nathan's hero artwork (white knocked out to transparent) stands in for the pencil underline. */
.hero-art {
  display: block;
  width: min(100%, 640px);
  height: auto;
  margin: 6px auto 0;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 20px rgba(199, 125, 255, 0.35));
}
.tagline {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: var(--violet);
  margin: 12px 0 0;
  transform: rotate(1.5deg);
  text-shadow: 2px 2px 0 var(--ink), 0 0 16px rgba(199, 125, 255, 0.65);
}
#screen-start .lead { text-align: center; margin-top: 18px; }

button, .file-btn {
  font: inherit;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  touch-action: manipulation;
}

.primary {
  font-family: var(--font-body);
  font-weight: 800;
  background: var(--gold);
  color: var(--ink);
  padding: 14px 26px;
  border: var(--border);
  box-shadow: 0 5px 0 var(--gold-deep);
  transition: filter 0.15s ease-out;
}
.primary:hover { filter: brightness(1.08); }
.primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--gold-deep); filter: none; }
.primary:disabled {
  background: #26305a;
  color: #9aa6cc;
  border-color: #3a4778;
  box-shadow: none;
}
.primary.big {
  display: block;
  width: 100%;
  padding: 16px 18px;
  margin-top: 30px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.65rem;
  letter-spacing: 0.05em;
  box-shadow: 0 6px 0 var(--gold-deep), 0 0 28px rgba(255, 194, 51, 0.35);
}
.primary.big:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--gold-deep); }
.primary.big:disabled { box-shadow: none; }

.secondary {
  font-family: var(--font-body);
  font-weight: 800;
  background: var(--card);
  color: var(--ink);
  padding: 14px 26px;
  border: var(--border);
  box-shadow: 0 5px 0 var(--purple-mid);
  transition: filter 0.15s ease-out;
}
.secondary:hover { filter: brightness(0.97); }
.secondary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--purple-mid); }
.secondary.big {
  display: block;
  width: 100%;
  padding: 16px 18px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  box-shadow: 0 6px 0 var(--purple-mid);
}
.secondary.big:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--purple-mid); }

.ghost {
  background: transparent;
  color: var(--sky-text);
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: underline dotted var(--gold) 2px;
  text-underline-offset: 4px;
}
.ghost.small { padding: 12px 14px; font-size: 0.95rem; min-height: 44px; }
.error .ghost { color: var(--ink); text-decoration-color: var(--purple-mid); }

/* Two-colour focus ring (white ring, ink halo) so it shows on dark sky and white cards alike. */
button:focus-visible, .file-btn:focus-within, #transcript:focus-visible, a:focus-visible, input:focus-visible, [tabindex="-1"]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--ink);
}
/* Headings the app focuses for screen readers do not need a ring. */
h1[tabindex="-1"]:focus-visible, h2[tabindex="-1"]:focus-visible, h3[tabindex="-1"]:focus-visible, p[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
.scan-box :focus-visible, .scan-box .file-btn:focus-within, .error :focus-visible, dialog :focus-visible {
  outline-color: var(--ink);
}

.year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.year-btn {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.05em;
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  padding: 18px 0;
  color: var(--ink);
  box-shadow: var(--pop-shadow);
  transition: background-color 0.15s ease-out;
}
.year-btn:hover { background: var(--gold-soft); }
.year-btn.selected { background: var(--gold); box-shadow: 5px 5px 0 var(--gold-deep), 0 0 24px rgba(255, 194, 51, 0.4); }
.year-btn.selected::after {
  content: "\26A1\FE0F";
  position: absolute;
  top: -14px;
  right: -10px;
  font-size: 1.5rem;
  transform: rotate(12deg);
}

.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  background: var(--card);
  border: var(--border);
  border-radius: 999px;
  padding: 12px 18px;
  min-height: 44px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--purple-mid);
  transition: background-color 0.15s ease-out;
}
.chip:hover { background: var(--gold-soft); }
.chip.selected { background: var(--purple); color: #fff; }

.reminder {
  position: relative;
  background: var(--gold-soft);
  color: var(--ink);
  border: var(--border);
  border-radius: var(--radius);
  padding: 20px 22px 16px;
  margin: 26px 0 20px;
  box-shadow: var(--pop-shadow);
}
.reminder::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 28px;
  width: 96px;
  height: 26px;
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 4px;
  transform: rotate(-3deg);
}
.reminder-title {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  margin: 0 0 8px;
  color: var(--red);
}
.reminder ul { margin: 0; padding-left: 4px; list-style: none; }
.reminder li { margin: 8px 0; font-size: 1.05rem; }

/* Two ways in: take a fresh photo, or pick one already in the iPad's photo album. */
.first-photo[hidden] { display: none; }
.or-line {
  text-align: center;
  margin: 14px 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  color: var(--sky-text);
  text-transform: uppercase;
}

.file-btn { position: relative; overflow: hidden; display: inline-block; }
.file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.file-btn[hidden] { display: none; }

/* Pages taken so far (camera screen): thumbnails with rotate/remove, then add or send. */
.pages-box { margin-top: 20px; }
.pages-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--gold);
  margin: 0 0 12px;
  text-shadow: 2px 2px 0 var(--ink);
}
.pages-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.pages-list li {
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--pop-shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.pages-list img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: #fff;
}
.page-num { font-weight: 800; color: var(--ink); }
.page-tools { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.page-tools .ghost.small { color: var(--ink); text-decoration-color: var(--purple-mid); padding: 4px 8px; }
.pages-actions { flex-wrap: wrap; }
.pages-actions > * { flex: 1 1 200px; text-align: center; }
/* The two ways to add a page share a row; the go button keeps a full row of its own. */
.pages-actions .file-btn { flex: 1 1 160px; padding: 16px; font-size: 1.1rem; }
.pages-actions #btn-read { flex: 1 1 100%; margin-top: 8px; }
/* Clear space under the big buttons, so Back never touches "Read my writing". */
#btn-back-start { margin-top: 24px; }

#print-pages img { width: 100%; max-height: 45vh; object-fit: contain; object-position: top; margin-bottom: 8px; display: block; }

/* Give the typing screen the viewport width without overflowing a narrow parent. */
#app.review-wide {
  max-width: none;
  width: 100%;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
#screen-review.active { width: 100%; }

/* The typed copy: the whole piece (pages joined) full width, a plain document page that grows
   with the writing. */
.typed-box { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
/* A row with a ghost Back/Previous on the left and one big primary button that takes the rest. */
.step-actions { flex-wrap: wrap; align-items: stretch; }
.step-actions > * { margin-top: 0; }
.step-actions .ghost { flex: 0 1 auto; }
.step-actions .primary.big { flex: 1 1 260px; }
.step-actions [hidden] { display: none; }
.edit-hint { margin: 0; font-size: 0.95rem; color: var(--sky-muted); line-height: 1.4; }
.check-row { display: flex; align-items: center; gap: 14px; margin: 14px 0; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.check-row { min-height: 44px; }
/* Real checkboxes with a 44px tap area; the box itself is drawn smaller inside it. */
.check-row input, .mission-row input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: transparent center / 30px 30px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect x='2' y='2' width='26' height='26' rx='7' fill='%23fff' stroke='%23131a30' stroke-width='3'/%3E%3C/svg%3E");
  cursor: pointer;
}
.check-row input:checked, .mission-row input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect x='2' y='2' width='26' height='26' rx='7' fill='%23ffc233' stroke='%23131a30' stroke-width='3'/%3E%3Cpath d='M8 15.5l5 5 9-11' fill='none' stroke='%23131a30' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.check-row[hidden] { display: none; }
dialog .btn-row { margin-top: 18px; }
dialog .btn-row .ghost { color: var(--ink); text-decoration-color: var(--purple-mid); }

#transcript {
  display: block;
  width: 100%;
  min-height: 320px;
  border: var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--ink);
  box-shadow: var(--pop-shadow);
  resize: none;
  /* The box is grown to fit the writing by script. If that measurement is ever short (a font
     arriving late, say), the text scrolls instead of being silently cut off halfway. */
  overflow-y: auto;
  field-sizing: content;
  /* Match each rule to the Nunito text baseline, not the bottom of its line box.
     Repeat at the same 1.8em spacing as the text, including wrapped lines. */
  background-color: #fff;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.35em - 1px), #d8cfe7 calc(1.35em - 1px), #d8cfe7 1.35em, transparent 1.35em, transparent 1.8em);
  background-origin: content-box;
  background-attachment: local;
}
#transcript::placeholder { color: var(--muted); }

/* One power-up shows at a time: the card that appears settles in once, gently. Movement only, so
   the text never fades (and never dips below its contrast) while it lands. */
.screen.active .power-card { animation: settle 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes settle {
  from { transform: translateY(14px); }
}

/* The bottom bar is fixed to the screen. A transform on a parent would pin it to that parent
   instead, so this screen fades in without one. */
#screen-feedback.active { animation-name: fade-plain; padding-bottom: calc(var(--bar-h, 170px) + 24px); }
@keyframes fade-plain { from { opacity: 0; } to { opacity: 1; } }

.fb-heading { margin: 34px 0 4px; }
.fb-lead { margin: 0 0 14px; }

/* Feedback comes one part at a time: a step bar up top, one slide showing, Back and Next below. */
.fb-slide { display: none; }
.fb-slide.active { display: block; }
.fb-slide .fb-heading { margin-top: 10px; }
/* All four steps sit on one line: slimmer chips, and on narrow screens only the current step
   keeps its name. */
/* Chips never shrink below their words (they used to squash on iPad: 763px needed, 712px
   given); if a screen is still too narrow they wrap rather than squeeze. */
.fb-steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 18px; }
.fb-step {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 6px 13px 6px 6px;
  min-width: 44px;
  white-space: nowrap;
  border-radius: 999px;
  background: transparent;
  color: var(--sky-muted);
  border: 2px solid rgba(170, 182, 218, 0.45);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.8rem;
  min-height: 44px;
}
.fb-step-num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
}
.fb-step.is-done { color: var(--sky-text); border-color: var(--purple-mid); }
.fb-step.is-done .fb-step-num { background: var(--purple-mid); color: #fff; }
.fb-step.is-current { background: var(--gold); color: var(--ink); border-color: var(--gold); box-shadow: 0 3px 0 var(--gold-deep); }
.fb-step.is-current .fb-step-num { background: var(--ink); color: var(--gold); }
.fb-lead + .practice-card, .practice-card[hidden] + .practice-card { margin-top: 0; }

/* Sidekick clips are framed like comic panels, with still posters for reduced motion. */
.stage {
  margin: 4px 0 18px;
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #1a1233;
  box-shadow: var(--pop-shadow);
}
.stage-art, .stage-video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* Power-up: the golden aura spills out of the panel and onto the heading. */
/* On the Power-ups slide the art is a short banner, so the first card starts in the first screen. */
/* The whole hero shows, head to boots: the full picture, smaller and centred, so the first
   power-up still starts on the first screen. */
.stage-banner { width: min(100%, 420px); margin: 4px auto 14px; }
.stage-banner .stage-video { height: auto; aspect-ratio: 16 / 10; object-fit: contain; }
.stage-power { box-shadow: 5px 5px 0 var(--gold-deep), 0 0 44px rgba(255, 194, 51, 0.45); }
.fb-slide[data-slide="power"] .fb-heading { text-shadow: 3px 3px 0 var(--ink), 0 0 22px rgba(255, 194, 51, 0.75); }
/* Mission complete: the finish line, lit like the power-up heading. */
.fb-slide[data-slide="finish"] .fb-heading { text-shadow: 3px 3px 0 var(--ink), 0 0 22px rgba(255, 194, 51, 0.75); }
.mission-card {
  background: var(--card);
  color: var(--ink);
  border: var(--border);
  border-radius: var(--radius);
  padding: 18px 22px 20px;
  margin: 18px 0 22px;
  box-shadow: 5px 5px 0 var(--gold-deep), 0 0 34px rgba(255, 194, 51, 0.3);
}
.mission-title { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.04em; color: var(--purple); margin: 0 0 8px; }
.mission-hint { margin: 0 0 8px; color: var(--muted); font-size: 1rem; }
.mission-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mission-item + .mission-item { border-top: 2px dashed rgba(19, 26, 48, 0.18); padding-top: 6px; }
.mission-row { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; cursor: pointer; font-size: 1.05rem; line-height: 1.5; }
.mission-text { display: block; min-width: 0; padding-top: 8px; }
.mission-label { display: block; font-weight: 800; color: var(--purple); }
.mission-row input:checked + .mission-text .mission-label::after { content: " \2713"; }
.mission-part { display: block; }

/* Trial survey (?trial=1): three questions, three big faces each. A picked face turns gold. */
.survey-questions { display: grid; gap: 18px; margin-top: 6px; }
.survey-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.survey-question { padding: 0; margin-bottom: 8px; font-weight: 800; font-size: 1.1rem; line-height: 1.4; color: var(--purple); }
.survey-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.survey-choice {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 72px; padding: 8px 6px;
  background: var(--card); color: var(--ink);
  border: var(--border); border-radius: 16px; box-shadow: 3px 3px 0 var(--purple-mid);
  font-family: var(--font-body); font-weight: 800; font-size: 1rem;
  cursor: pointer;
}
.survey-emoji { font-size: 2rem; line-height: 1; }
.survey-choice[aria-pressed="true"] { background: var(--gold); box-shadow: 3px 3px 0 var(--gold-deep); }
.survey-choice:disabled { cursor: default; }
.survey-choice:disabled:not([aria-pressed="true"]) { opacity: 0.45; }
.survey-thanks { margin: 12px 0 0; font-weight: 800; font-size: 1.1rem; color: var(--purple); }
.mission-line { font-style: italic; font-weight: 700; }
/* The small Mission check box on each page: tick the job there, as soon as it is done. */
.job-check:empty { display: none; }
.job-check {
  margin-top: 14px;
  padding: 8px 14px 6px;
  background: var(--gold-soft);
  color: var(--ink);
  border: 2px dashed var(--gold-deep);
  border-radius: 14px;
}
#words-check .job-check { margin-top: 18px; border: var(--border); border-style: dashed; }
.job-check-title { margin: 0; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--purple); }
.job-check-text { display: block; font-weight: 700; }
#btn-done { margin-top: 24px; }
/* Round 2: "Snap my writing again" on Mission complete, and the "What got better" screen. */
.retake { margin-top: 26px; }
.retake[hidden], .retake-done[hidden] { display: none; }
.retake-lead { margin: 0 0 10px; }
.retake .secondary.big { width: 100%; }
.retake-done { margin: 26px 0 0; font-size: 1.15rem; font-weight: 800; color: var(--gold); text-align: center; }
.round-note { color: var(--gold); font-weight: 700; margin-bottom: 14px; }
.round-note[hidden] { display: none; }
.cheer-card {
  background: var(--card);
  color: var(--ink);
  border: var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: 5px 5px 0 var(--gold-deep), 0 0 44px rgba(255, 194, 51, 0.35);
  margin-top: 18px;
}
.cheer { margin: 0; font-family: var(--font-hand); font-size: 1.45rem; line-height: 1.5; }
.cheer q, .next-tip q { font-weight: 800; }
.levelup-heading { font-size: 1.5rem; }
#wins-box[hidden], #next-box[hidden] { display: none; }
.wins { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.win {
  background: var(--green-soft);
  color: var(--ink);
  border: var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 4px 4px 0 var(--purple-mid);
  line-height: 1.5;
}
.win-what { display: block; font-size: 1.1rem; }
.win-evidence { margin: 4px 0 0; }
.win-label { font-weight: 800; }
.win-evidence q { font-style: italic; }
.win-empty { background: var(--gold-soft); font-size: 1.1rem; }
.next-tip { margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--sky-text); }
#screen-levelup .btn-finish, #btn-retake-again { margin-top: 28px; width: 100%; }
#btn-retake-again[hidden] { display: none; }
.levelup-back { margin-top: 18px; justify-content: center; }
.levelup-back .ghost { min-height: 44px; }
.mission-save { margin-top: 0; }
/* The loose lines low on Mission complete get a dark halo so the city lights behind stay quiet. */
.mission-save, .export-photos, .retake-lead, .retake-done { text-shadow: 0 0 4px var(--night-deep), 0 0 10px var(--night-deep), 0 0 18px var(--night-deep); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Tap-to-listen: quiet by design, a small outlined pill that only lights up while playing
   (idle, loading, playing shows Stop). */
.listen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  color: var(--muted);
  border: 1.5px solid rgba(19, 26, 48, 0.28);
  border-radius: 999px;
  padding: 6px 14px;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: none;
  white-space: nowrap;
}
.listen:hover { color: var(--ink); border-color: var(--ink); }
.listen[data-state="loading"] { opacity: 0.6; }
.listen[data-state="playing"] { background: var(--gold-soft); color: var(--ink); border-color: var(--gold-deep); }
/* Where a Listen button sits on a card: empty (Years 4-6) it takes no room. */
.listen-slot { margin: 8px 0 4px; }
.listen-slot:empty { display: none; }
.title-row .listen-slot { margin: 0; }
.power-card > .listen-slot { margin: 0 0 10px; }
/* On the dark sky (camera screen) the pill goes light so it can still be found. */
.screen-listen .listen { color: var(--sky-muted); border-color: rgba(170, 182, 218, 0.45); }
.screen-listen .listen:hover { color: var(--sky-text); border-color: var(--sky-text); }
.title-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.title-row .practice-title { margin: 0; }
.title-row + ul { margin-top: 10px; }
.power-head .listen { margin-left: auto; }

.practice-card {
  background: var(--gold-soft);
  color: var(--ink);
  border: var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--pop-shadow);
  margin-top: 30px;
}
.practice-card[hidden] { display: none; }
.practice-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}
#practice-words {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
#practice-words li {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 1.15rem;
  line-height: 1.4;
}
#practice-words li strong { font-weight: 800; }
#practice-words li .wrote { display: block; font-size: 0.85rem; color: var(--muted); }
.practice-tip {
  margin: 14px 0 0;
  font-size: 1.05rem;
  line-height: 1.5;
}
.practice-tip::before { content: "\1F4A1 "; }
body.senior .practice-tip::before { content: ""; }
.practice-note {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.boost-card { background: var(--card); }
.boost-caption { margin: 4px 0 14px; }
#boost-swaps {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.boost-swap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 1.1rem; line-height: 1.5; }
.boost-from { font-weight: 800; font-size: 1.2rem; }
.boost-from::after { content: " \2192"; color: var(--purple-mid); }
/* The synonym ladder: four rungs, each a step up, so the growing tint says "stronger". */
.synonym-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: rung; }
.rung {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 12px 6px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 700;
  background: #fff;
}
.rung::before {
  counter-increment: rung;
  content: counter(rung);
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 800;
}
.rung-2 { background: var(--gold-soft); }
.rung-3 { background: var(--gold); }
.rung-4 { background: var(--purple-soft); border-color: var(--purple); font-weight: 800; }
#boost-example {
  margin-top: 12px;
  border-top: 2px dashed var(--ink);
  padding-top: 12px;
}
#boost-example[hidden] { display: none; }
.boost-line { margin: 6px 0; font-size: 1.05rem; line-height: 1.5; }
.boost-label { font-weight: 800; }

/* Synonym challenge: three of the child's words, a box and a Check button under each. */
.boost-challenge { margin-top: 16px; border-top: 2px dashed var(--ink); padding-top: 14px; }
.boost-challenge[hidden] { display: none; }
.challenge-title { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.04em; color: var(--purple); margin: 0 0 6px; }
.challenge-lead { margin: 0 0 14px; font-size: 1rem; line-height: 1.5; }
.challenge-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.challenge-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--gold-soft);
}
.challenge-item.is-yes { background: var(--green-soft); }
.challenge-item.is-close { background: var(--gold-soft); }
.challenge-item.is-no { background: var(--purple-soft); }
.challenge-label { font-size: 0.95rem; line-height: 1.4; }
.challenge-label strong { display: block; font-size: 1.2rem; font-weight: 800; }
.challenge-context { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--muted); }
.challenge-context q { font-style: italic; color: var(--ink); }
.challenge-context strong { font-weight: 800; color: var(--purple); }
.challenge-input {
  width: 100%;
  min-height: 48px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
}
.challenge-check { padding: 10px 14px; font-size: 1rem; min-height: 44px; }
.challenge-check:disabled { opacity: 0.6; }
.challenge-result { margin: 0; font-size: 0.95rem; line-height: 1.45; }
.challenge-result[hidden] { display: none; }
/* An empty spelling result stays in the page for VoiceOver; cancel its flex gap so nothing shows. */
.spelling-item .challenge-result:empty { margin-top: -8px; }
@media (max-width: 560px) { .challenge-list { grid-template-columns: 1fr; } }

/* Power-ups: the improvement cards. Quote, model (named as a sentence type), task. */
.power-ups { display: flex; flex-direction: column; gap: 18px; }
.power-card {
  background: var(--card);
  color: var(--ink);
  border: var(--border);
  border-left: 10px solid var(--violet);
  border-radius: 16px;
  padding: 16px 20px 18px;
  box-shadow: var(--pop-shadow);
}
.power-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 2px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--purple);
}
.power-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  color: var(--purple);
}
.power-area {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: var(--purple-soft);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.power-why { margin: 0 0 14px; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.power-label { font-weight: 800; }
/* The three steps, numbered the way the child works: find the line, use the strategy, do this. */
.power-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.step { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; counter-increment: step; }
.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--gold);
  border: 2px solid var(--ink);
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}
.step-body { min-width: 0; padding-top: 6px; }
.step-label { margin: 0 0 6px; font-weight: 800; font-size: 1.05rem; line-height: 1.4; }
.step-line {
  display: block;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  padding: 8px 12px;
  background: var(--gold-soft);
  border: 2px solid var(--ink);
  border-radius: 10px;
}
.step-rule { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.5; }
.step-example {
  margin: 0;
  padding: 10px 12px;
  background: #f4f0fa;
  border: 2px solid var(--purple-mid);
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.5;
  display: grid;
  gap: 2px;
}
.ex-arrow { color: var(--purple); font-weight: 800; }
.ex-before, .ex-after { white-space: pre-line; overflow-wrap: anywhere; }
.step-more { margin-top: 6px; font-size: 0.95rem; color: var(--muted); }
.step-more summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 800; color: var(--purple); }
.step-more p { margin: 2px 0 0; line-height: 1.5; }
.st-example { color: var(--muted); }
.step-task {
  margin: 0;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.5;
  background: var(--gold-soft);
  border: 2px dashed var(--purple-mid);
  border-radius: 10px;
}
body.senior .power-title { font-size: 1.35rem; }

/* Your hero powers: the strengths, each quoting the child's writing, with its skill chip. */
.powers-card {
  background: var(--green-soft);
  color: var(--ink);
  border: var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 0 22px;
  box-shadow: var(--pop-shadow);
}
.powers-card[hidden] { display: none; }
.powers-card .visual-caption { margin-bottom: 4px; }
/* One shared column for the skill chips (the widest chip sets it, via subgrid), so every
   line of praise starts at the same place. Narrow screens stack the chip above its line. */
.powers-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 14px; }
.power-item {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px;
  align-items: start;
  padding: 10px 0;
  border-top: 2px dashed rgba(19, 26, 48, 0.18);
}
@supports (grid-template-columns: subgrid) { .power-item { grid-template-columns: subgrid; } }
.power-item:first-child { border-top: 0; padding-top: 4px; }
.power-item .power-area { justify-self: start; display: inline-flex; align-items: center; background: #fff; min-height: 44px; min-width: 44px; cursor: pointer; font-family: var(--font-body); }
.power-text { margin: 0; font-size: 1.05rem; line-height: 1.5; padding-top: 2px; }
.power-text .quote { font-style: italic; font-weight: 700; color: var(--purple); }
@media (max-width: 560px) {
  .powers-list, .power-item { grid-template-columns: minmax(0, 1fr); }
  .power-item { gap: 6px; }
}

/* Revise it: the child's own go at the move, checked on the spot. */
.revise { margin-top: 14px; padding-top: 12px; border-top: 2px dashed #d9cbe6; }
.revise-label { display: block; font-weight: 800; margin-bottom: 8px; }
.revise-input {
  display: block;
  width: 100%;
  min-height: 72px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  resize: vertical;
  field-sizing: content;
}
.revise-input:focus-visible { outline: 3px solid var(--purple-mid); outline-offset: 2px; }
.revise-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.revise-check { padding: 10px 18px; font-size: 1rem; min-height: 44px; }
.revise-check:disabled { opacity: 0.6; }
.revise-result {
  margin-top: 12px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1.5;
}
.revise-result[hidden] { display: none; }
.revise-result.is-nailed { background: var(--green-soft); }
.revise-result.is-nearly { background: var(--gold-soft); }
.revise-result.is-notyet { background: var(--purple-soft); }
.revise-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.revise-head .listen.compact { margin-top: 0; }
.revise-verdict {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--purple);
}
.revise-line { margin: 6px 0 0; }
body.senior .revise-verdict { font-size: 1.1rem; }

/* The check-up: one compact card per area, colour-coded by status. */
.criteria-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) { .criteria-grid { grid-template-columns: 1fr; } }
.crit-card {
  background: var(--card);
  color: var(--ink);
  border: var(--border);
  border-radius: 16px;
  padding: 14px 16px 16px;
  box-shadow: 4px 4px 0 var(--purple-mid);
}
/* Whole-card tint by status, like the app's other comic panels. */
.crit-card.is-strength { background: var(--green-soft); }
.crit-card.is-steady { background: var(--gold-soft); }
.crit-card.is-next { background: var(--purple-soft); }
.crit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.crit-label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--purple);
}
.crit-sub { margin: 0; font-size: 0.9rem; color: var(--muted); }
.crit-status {
  flex: none;
  font-size: 0.85rem;
  font-weight: 800;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.crit-status { background: #fff; }
.crit-line { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; }
.crit-link {
  display: block;
  margin-top: 10px;
  background: var(--gold-soft);
  color: var(--ink);
  border: 2px dashed var(--purple-mid);
  border-radius: 12px;
  padding: 8px 12px;
  min-height: 44px;
  font-weight: 800;
  font-size: 0.95rem;
  text-align: left;
}
body.senior .crit-label { font-size: 1.1rem; }

.btn-row { display: flex; gap: 16px; margin-top: 32px; }
.btn-row button { flex: 1; padding: 16px; font-size: 1.1rem; }

/* Sits on its own dark panel: low on the page it can scroll over the lit city skyline. */
.privacy-note {
  font-family: var(--font-hand);
  text-align: center;
  color: var(--sky-text);
  font-size: 1.1rem;
  margin-top: 28px;
  padding: 12px 16px;
  background: rgba(12, 13, 38, 0.9);
  border: 1px solid rgba(238, 242, 255, 0.18);
  border-radius: 14px;
}
.privacy-note a, .privacy-link { color: var(--sky-text); text-decoration: underline dotted var(--gold) 2px; text-underline-offset: 3px; }
.privacy-line { margin: 14px 0 6px; font-size: 1rem; color: var(--sky-muted); line-height: 1.5; }
.screen-listen { margin: 4px 0 10px; }
.screen-listen:empty { display: none; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.export-photos { margin: 22px 0 0; }

/* Power-ups end with a nudge back to the book, and round 2 starts from the camera screen. */
.pencil-card {
  background: var(--gold-soft);
  color: var(--ink);
  border: var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-top: 24px;
  box-shadow: var(--pop-shadow);
}
.pencil-card p { margin: 0; line-height: 1.5; font-size: 1.1rem; }
.pencil-title { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.04em; color: var(--purple); margin-bottom: 6px !important; }

/* Warning before a shared iPad clears itself. */
.idle {
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--ink);
  border: var(--border);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 800;
  z-index: 20;
  max-width: min(92vw, 560px);
}
.idle[hidden] { display: none; }
.idle p { margin: 0; }

/* The adult-facing privacy page. */
.doc { max-width: 760px; margin: 0 auto; padding: 24px 20px 60px; line-height: 1.6; }
.doc h2 { margin-top: 30px; }
.doc a { color: var(--gold); }
.doc .draft { background: var(--gold-soft); color: var(--ink); border: var(--border); border-radius: 14px; padding: 12px 16px; font-weight: 700; }

/* Thinking: the pencil tip charges up. */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 51, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  z-index: 50;
}
.overlay[hidden] { display: none; }
.overlay p {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  color: var(--sky-text);
  text-shadow: 2px 2px 0 var(--ink);
  margin: 0;
  text-align: center;
  padding: 0 24px;
}
.spinner {
  width: 58px;
  height: 58px;
  border: 6px solid rgba(199, 125, 255, 0.22);
  border-top-color: var(--violet);
  border-radius: 50%;
  box-shadow: 0 0 26px rgba(199, 125, 255, 0.45);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Long AI waits: a row of power blocks that charge up left to right. */
.overlay.with-bar .spinner { display: none; }
.load-bar {
  display: flex;
  gap: 6px;
  width: min(440px, 82vw);
  padding: 7px;
  border: 3px solid var(--gold);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 22px rgba(255, 194, 51, 0.25);
}
.load-bar[hidden] { display: none; }
.load-block {
  flex: 1;
  height: 26px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
}
.load-block.on {
  background: var(--gold);
  box-shadow: inset 0 -5px 0 var(--gold-deep), 0 0 12px rgba(255, 194, 51, 0.55);
  animation: block-in 0.28s ease-out;
}
@keyframes block-in {
  from { transform: scaleY(0.4); opacity: 0.3; }
  to { transform: none; opacity: 1; }
}

.error {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--red-bright);
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 90vw;
  z-index: 60;
  box-shadow: 5px 5px 0 var(--red-bright);
}
.on-feedback .error { bottom: calc(var(--bar-h, 170px) + 16px); }
.error[hidden] { display: none; }
.error p { margin: 0; }

dialog {
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--purple-mid);
  padding: 26px;
  width: min(420px, 90vw);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
}
dialog h2 { margin-top: 0; color: var(--ink); text-shadow: none; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em; font-size: 1.7rem; transform: none; }
dialog .lead { color: var(--muted); }
dialog::backdrop { background: rgba(10, 17, 40, 0.72); }

/* Years 5-6: same system, quieter voice. */
body.senior .h-emoji { display: none; }
body.senior .title-lockup h1,
body.senior .tagline { transform: none; }
body.senior .reminder-title { font-family: var(--font-body); font-size: 1.1rem; font-weight: 800; color: var(--ink); }
body.senior .reminder::before { display: none; }
body.senior .privacy-note { font-family: var(--font-body); font-size: 0.95rem; }
body.senior .year-btn.selected::after { content: ""; }

@media (prefers-reduced-motion: reduce) {
  .screen.active { animation: none; }
  .screen.active .power-card, #screen-feedback.active { animation: none; }
  .spinner { animation-duration: 2s; }
  .load-block.on { animation: none; }
  .primary:active, .secondary:active { transform: none; }
}

#print-doc { display: none; }

@media print {
  #app, .overlay, .error { display: none !important; }
  body::before, body::after { display: none; }
  html, body { background: #fff; color: #000; }
  #print-doc {
    display: block;
    font-family: Georgia, serif;
    color: #000;
  }
  #print-doc h1 { font-size: 20pt; margin-bottom: 2pt; font-family: Georgia, serif; color: #000; -webkit-text-stroke: 0; text-shadow: none; letter-spacing: 0; }
  #print-doc h2 { font-size: 13pt; margin: 12pt 0 4pt; border-bottom: 1px solid #999; font-family: Georgia, serif; color: #000; text-shadow: none; letter-spacing: 0; }
  #print-doc img { max-width: 100%; max-height: 40vh; }
  #print-doc pre { white-space: pre-wrap; font-family: Georgia, serif; font-size: 11pt; line-height: 1.5; }
  #print-doc ul { margin: 4pt 0; }
  #print-doc li, #print-doc p { font-size: 11pt; line-height: 1.5; }
}

/* At-a-glance feedback: one segment per writing skill, exact editing counts. */
.strength-card { background: #fff; color: var(--ink); border: var(--border); border-radius: 16px; padding: 22px; margin: 0 0 28px; box-shadow: var(--pop-shadow); }
.visual-caption { margin: 6px 0 20px; color: var(--muted); font-size: .95rem; }
/* One chip per skill; the dot carries the colour, the tap opens the explanation. */
.skill-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 3px 3px 0 var(--purple-mid);
  transition: background-color 0.15s ease-out;
}
.skill-chip:hover { background: var(--gold-soft); }
.skill-chip.is-open { background: var(--gold); box-shadow: 3px 3px 0 var(--gold-deep); }
.skill-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink); flex: none; }
.skill-chip.strength .skill-dot, .legend-strength::before { background: #26805b; }
.skill-chip.steady .skill-dot, .legend-steady::before { background: #5298ba; }
.skill-chip.next_step .skill-dot, .legend-next_step::before { background: #dfa52b; }
.skill-chip.not_assessed .skill-dot, .legend-not_assessed::before { background: #fff; border: 2px dashed #626477; box-sizing: border-box; }
.strength-summary { font-weight: 800; font-size: 1.18rem; margin: 14px 0 10px; }
.strength-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: .85rem; margin-top: 12px; color: var(--muted); }
.strength-legend span { display: inline-flex; align-items: center; gap: 6px; }
.strength-legend span::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
/* The tapped skill, tinted by how it went: what it means, then what the sidekick saw. */
.skill-detail { margin-top: 14px; padding: 14px 16px 12px; border: 2px solid var(--ink); border-radius: 14px; }
.skill-detail[hidden] { display: none; }
.skill-detail.is-strength { background: var(--green-soft); }
.skill-detail.is-steady { background: var(--gold-soft); }
.skill-detail.is-next { background: var(--purple-soft); }
.skill-detail.is-unassessed { background: #f1f2f6; }
.skill-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.skill-detail-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: 0.04em; color: var(--purple); }
.skill-detail-what { margin: 8px 0 0; font-weight: 800; font-size: 1.05rem; line-height: 1.5; }
.skill-detail-how { margin: 4px 0 0; font-size: 1rem; line-height: 1.5; }
.skill-detail-how[hidden] { display: none; }
.skill-detail-line { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; }
.skill-detail-line[hidden] { display: none; }
.skill-detail-close { color: var(--ink); text-decoration-color: var(--purple-mid); margin-top: 6px; padding-left: 0; }
.strength-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #dcdce5; }
.strength-notes p { margin: 0; }
.strength-notes span { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 4px; }
.strength-note-btn {
  background: transparent;
  color: var(--ink);
  padding: 4px 0;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 800;
  text-align: left;
  text-decoration: underline dotted var(--purple-mid) 2px;
  text-underline-offset: 4px;
  border-radius: 6px;
}
.strength-note-btn:disabled { text-decoration: none; cursor: default; }
#practice-words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#practice-words li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 8px; border: 1px solid #d8cc9f; border-radius: 14px; font-size: 1rem; }
.editing-symbol { color: #594273; font-weight: 800; font-size: .95rem; }
.editing-ring { display: grid; place-items: center; width: 88px; height: 88px; border: 7px solid #d4a13b; border-radius: 50%; font-weight: 800; font-size: 2rem; background: #fffaf0; }
.editing-clear .editing-ring { border-color: #26805b; background: #f0faf4; }
.editing-caption { color: var(--muted); font-size: .8rem; }
/* Back / Next / Finish: a bar fixed to the bottom of the feedback screen. */
.slide-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  margin: 0;
  padding: 12px max(24px, calc((100vw - 712px) / 2)) calc(12px + env(safe-area-inset-bottom));
  gap: 8px 14px;
  align-items: center;
  background: var(--night);
  border-top: 3px solid var(--gold);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}
.slide-nav .primary.big { padding: 12px 16px; font-size: 1.5rem; }
.slide-nav .ghost { min-height: 44px; }
@media (max-width: 520px) {
  .slide-nav { padding-left: 16px; padding-right: 16px; }
  .slide-nav { gap: 4px 12px; padding-top: 10px; }
  .slide-nav .primary.big { order: -1; flex: 1 1 100%; padding: 10px 14px; font-size: 1.3rem; }
  .slide-nav .ghost { flex: 1 1 0; padding: 6px 8px; white-space: nowrap; }
  .strength-card { padding: 18px; }
  #practice-words { gap: 7px; }
  #practice-words li { padding: 12px 3px; font-size: .78rem; }
  .editing-ring { width: 64px; height: 64px; border-width: 5px; font-size: 1.65rem; }
  .editing-caption { font-size: .72rem; }
  #practice-card { padding: 18px 12px; }
}

/* First slide: "What you did well", then "Your next focus", then (Years 5-6) the skill grid on request. */
.power-item span.power-area { cursor: default; }
.powers-empty { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.5; }
.powers-empty[hidden] { display: none; }
.focus-card {
  background: var(--purple-soft);
  color: var(--ink);
  border: var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 0 22px;
  box-shadow: var(--pop-shadow);
}
.focus-card[hidden] { display: none; }
.focus-text { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; line-height: 1.5; }
.focus-task { margin: 0 0 14px; font-size: 1.05rem; line-height: 1.5; }
.focus-card .secondary[hidden] { display: none; }
.skills-toggle { display: block; margin: 0 0 18px; }
.skills-toggle[hidden] { display: none; }
.strength-card[hidden] { display: none; }
.strength-summary[hidden] { display: none; }

/* How to change your book, in four short steps. */
.pencil-card .pencil-steps { margin: 10px 0 0; padding-left: 1.4rem; line-height: 1.5; font-size: 1.1rem; }
.pencil-card .pencil-steps li { margin: 6px 0; }

/* Years 1-3: say the new sentence out loud before writing it. */
.step-say { margin: 8px 0 0; font-weight: 700; font-size: 1.05rem; line-height: 1.5; }

/* Years 1-2 editing: two roomy boxes, each with its how-to-hunt tip. */
#practice-words.editing-junior { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.editing-tip { color: var(--ink); font-size: 1rem; line-height: 1.45; font-weight: 600; }

@media (max-width: 640px) {
  .fb-step:not(.is-current) { padding: 6px; justify-content: center; }
  .fb-step:not(.is-current) .fb-step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Editing card: spelling words (same boxes as the synonym challenge) and the punctuation rows. */
.spelling-block { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 2px dashed var(--ink); }
.spelling-block[hidden] { display: none; }
.spelling-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.spelling-list[hidden] { display: none; }
.spelling-item { background: #fff; }
.spelling-item .challenge-label strong { color: var(--ink); }
.spell-mark { background: var(--gold); color: var(--ink); font-weight: 800; padding: 0 2px; border-radius: 4px; }
.spell-answer { font-weight: 800; font-size: 1.1rem; }
#practice-words.editing-junior li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 560px) { .spelling-list { grid-template-columns: 1fr; } }
.spelling-block .challenge-title { margin-top: 14px; }