/* Student concepts F, G, H. Loaded after app-base.css (brand tokens, top bar, buttons).
   All animation lives under .motion, which student.js only sets when the person has not asked
   for reduced motion and has not switched motion off. */

:root {
  /* Core: indigo (--brand), plum (--hero), sun, cream (junior only). Meanings are fixed:
     sun = your next move or a reward, mint = done, sky = people and information,
     lilac = the AI helper, coral = gentle attention (never red for children). */
  --sun: #ffd166;
  --mint: #8fe3c3;
  --sky: #9bd6ff;
  --coral: #ff9f8a;
  --lilac: #d9d3ff;
  --tint-sun: #fff0c2;
  --tint-mint: #d3f3e5;
  --tint-sky: #d6edff;
  --tint-lilac: #e4dfff;
  --tint-coral: #ffddd4;
  --brand-fixed: #5650b4;
  --fixed-ink: #22263d;
}
.s-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px 160px;
}
.s-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 36px;
}
.s-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--btn-r);
  border: 1px solid var(--ink2);
  background: var(--tile);
  color: var(--ink);
  font: 600 15px var(--sans);
  cursor: pointer;
}
.s-toggle .knob {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background: var(--line);
}
.s-toggle .knob::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tile);
  border: 2px solid var(--ink2);
  box-sizing: border-box;
}
.s-toggle[aria-pressed='true'] .knob {
  background: var(--brand);
}
.s-toggle[aria-pressed='true'] .knob::after {
  left: 19px;
  border-color: var(--brand);
}
.s-toggle[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.ico-s {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ico-s.xl {
  width: 52px;
  height: 52px;
}
.ico-s.lg {
  width: 36px;
  height: 36px;
}
.ico-s.sm {
  width: 20px;
  height: 20px;
}

/* ---------- Hero ---------- */
.s-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  margin-top: 36px;
  padding: 44px;
  border-radius: 28px;
  background: var(--hero);
  color: var(--on-hero);
}
@media (max-width: 720px) {
  .s-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px;
  }
}
/* Indigo for Grades 1 to 8; the deeper plum is kept for Grades 9 to 12 */
[data-band='early'] .s-hero,
[data-band='mid'] .s-hero {
  --hero: var(--brand-fixed);
  --on-hero: #ffffff;
  --on-hero2: #ece9ff;
}
.s-hero .hello {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--on-hero2);
}
.s-hero .huge {
  margin: 8px 0 0;
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.s-hero .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 20px;
  color: var(--on-hero2);
  font-size: 18px;
  font-weight: 600;
}
.s-hero .meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.s-hero .go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin-top: 28px;
  padding: 0 32px;
  border: 0;
  border-radius: 20px;
  background: var(--sun);
  color: var(--fixed-ink);
  font: 800 20px var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.s-hero .go[aria-disabled='true'] {
  background: var(--on-hero2);
  cursor: not-allowed;
}

/* ---------- Mascot: the brand bookmark with a face ---------- */
.bookie {
  display: block;
  width: 168px;
  height: 196px;
  margin: 0 auto;
  transform: rotate(-3deg);
}
.bookie svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.bookie .b-body {
  fill: var(--brand);
}
.bookie .b-spine {
  fill: rgba(0, 0, 0, 0.18);
}
.bookie .b-ribbon {
  fill: var(--sun);
}
.bookie .b-white {
  fill: #ffffff;
}
.bookie .b-pupil {
  fill: var(--fixed-ink);
}
.bookie .b-cheek {
  fill: #ff94ad;
}
/* The indigo body needs a light stage when it sits on an indigo hero */
.s-hero .bookie {
  position: relative;
}
.s-hero .bookie::before {
  content: '';
  position: absolute;
  inset: -4% -14%;
  border-radius: 50%;
  background: var(--tint-lilac);
}
.s-hero .bookie svg {
  position: relative;
}
.bookie .b-line {
  fill: none;
  stroke: var(--fixed-ink);
  stroke-width: 4;
  stroke-linecap: round;
}
.bookie .b-open {
  fill: var(--fixed-ink);
}
.bookie .m-cheer,
.bookie .m-think {
  display: none;
}
.bookie[data-mood='cheer'] .m-happy,
.bookie[data-mood='think'] .m-happy {
  display: none;
}
.bookie[data-mood='cheer'] .m-cheer,
.bookie[data-mood='think'] .m-think {
  display: inline;
}
.bookie.sm {
  width: 96px;
  height: 112px;
}

/* ---------- Trail ---------- */
.s-title {
  margin: 56px 0 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.trail-wrap {
  position: relative;
  margin-top: 28px;
  padding: 36px 28px 28px;
  border-radius: 24px;
  background: var(--tile);
}
.trail {
  position: relative;
}
.rail {
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 31px;
  height: 10px;
  border-radius: 5px;
  background: var(--line);
}
.rail .fill {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  border-radius: 5px;
  background: var(--brand);
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nodes {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.node {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
}
.node .dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid var(--line);
  background: var(--tile);
  color: var(--ink2);
}
.node .st-badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--tile);
  background: var(--line);
  color: var(--ink);
}
.node.done .dot {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-blue);
}
.node.done .st-badge {
  background: var(--mint);
  color: var(--fixed-ink);
}
.node.now .dot {
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 0 8px var(--tint);
}
.node.now .st-badge {
  background: var(--brand);
  color: var(--on-blue);
}
.node.later .dot {
  border-style: dashed;
}
.node .word {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink2);
}
.flagend {
  color: var(--ink2);
}
.trail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin-top: 28px;
}

/* ---------- Big icon picks ---------- */
.picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 168px;
  padding: 24px 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--tile);
  color: var(--ink);
  font: 800 20px var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.pick .ico {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: var(--d, var(--tint-lilac));
  color: var(--brand-fixed);
}
.pick .detail {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.pick .count {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 15px;
  background: var(--brand-fixed);
  color: #ffffff;
  font: 700 15px var(--sans);
}
/* One saturated tile per screen: the thing to do now */
.pick.m-next {
  background: var(--sun);
  border-color: var(--sun);
  color: var(--fixed-ink);
}
.pick.m-next .ico {
  background: rgba(255, 255, 255, 0.7);
}
.pick.m-done {
  --d: var(--tint-mint);
}
.pick.m-info {
  --d: var(--tint-sky);
}
.pick.m-ai {
  --d: var(--tint-lilac);
}
.pick.m-reward {
  --d: var(--tint-sun);
}
.pick.m-plain {
  --d: var(--tint);
}
.pick.m-next .count {
  background: var(--fixed-ink);
}

/* Reading aid */
.listen {
  display: none;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--tint);
  color: var(--brand);
  cursor: pointer;
}
.listen.on {
  display: inline-grid;
}

/* ---------- Stars ---------- */
.stars {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.stars li {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--tile);
  color: var(--line);
}
.stars li.on {
  background: var(--sun);
  color: var(--fixed-ink);
}
.stars li.on svg {
  fill: currentColor;
}

/* ---------- Questions with picture answers ---------- */
.q-card {
  margin-top: 32px;
  padding: 36px;
  border-radius: 28px;
  background: var(--tile);
}
.q-card .q {
  margin: 0;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  line-height: 1.15;
}
.q-top {
  display: flex;
  gap: 16px;
  align-items: center;
}
.opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.opt {
  position: relative;
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 24px 20px 20px;
  border: 4px solid var(--line);
  border-radius: 24px;
  background: var(--tile);
  color: var(--ink);
  font: 800 28px var(--sans);
  cursor: pointer;
}
.opt .fbar {
  width: 100%;
}
.opt[aria-pressed='true'] {
  border-color: var(--brand);
}
.opt.ok {
  border-color: var(--ok);
  background: var(--mint);
  color: var(--fixed-ink);
}
.opt .tick {
  position: absolute;
  top: -14px;
  right: -14px;
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ok);
  color: #ffffff;
}
.opt.ok .tick {
  display: grid;
}
.fbar {
  position: relative;
  height: 44px;
  border: 3px solid var(--fixed-ink);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}
.fbar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--sun);
}
.fbar::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, var(--fixed-ink) 3px, transparent 3px);
  background-size: calc(100% / var(--n, 2)) 100%;
}
.hintline {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  margin-top: 24px;
  font-size: 18px;
  font-weight: 600;
}
.hintline .ico-s {
  color: var(--brand);
}
.hintline[hidden] {
  display: none;
}

/* ---------- Celebration ---------- */
.stage {
  position: relative;
}
.burst {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.burst span {
  position: absolute;
  opacity: 0;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  background: var(--c, var(--sun));
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%);
}
.cheer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 16px;
  background: var(--mint);
  color: var(--fixed-ink);
  font-weight: 800;
}
.cheer[hidden] {
  display: none;
}

/* ---------- Grade bands (concept F) ---------- */
[data-band='early'] .pick {
  min-height: 208px;
  font-size: 24px;
}
[data-band='early'] .pick .ico {
  width: 96px;
  height: 96px;
}
[data-band='early'] .pick .ico svg {
  width: 56px;
  height: 56px;
}
[data-band='early'] .detail {
  display: none;
}
[data-band='early'] .node .word {
  font-size: 18px;
}
[data-band='early'] .node .dot {
  width: 88px;
  height: 88px;
}
[data-band='early'] .rail {
  top: 39px;
}
/* About 2 cm (104 pt on an iPad) for what a child taps, as NN/g advises for young children */
[data-band='early'] .listen {
  width: 104px;
  height: 104px;
}
[data-band='early'] .s-hero .go {
  min-height: 104px;
  font-size: 24px;
}
[data-band='early'] .trail-actions .btn {
  min-height: 104px;
  padding-inline: 32px;
  font-size: 22px;
}
[data-band='early'] .s-hero .huge {
  font-size: clamp(40px, 7vw, 64px);
}
[data-band='late'] .bookie {
  display: none;
}
[data-band='late'] .s-hero {
  grid-template-columns: minmax(0, 1fr);
}
[data-band='late'] .pick {
  flex-direction: row;
  justify-content: flex-start;
  gap: 16px;
  min-height: 104px;
  padding: 16px 20px;
  background: var(--tile);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 18px;
  text-align: left;
}
[data-band='late'] .pick .ico {
  background: var(--tint);
  color: var(--brand);
  width: 56px;
  height: 56px;
  border-radius: 16px;
}
[data-band='late'] .pick.m-next .ico {
  background: var(--sun);
  color: var(--fixed-ink);
}
[data-band='late'] .pick .detail {
  color: var(--ink2);
}
[data-band='late'] .pick .count {
  top: 12px;
}
[data-band='late'] .picks {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Registered so the progress ring can animate smoothly */
@property --v {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* ---------- Motion ---------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  70% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ring {
  0% {
    box-shadow: 0 0 0 0 var(--tint);
  }
  70% {
    box-shadow: 0 0 0 18px transparent;
  }
  100% {
    box-shadow: 0 0 0 8px var(--tint);
  }
}
@keyframes shake {
  0%,
  100% {
    transform: none;
  }
  25% {
    transform: translateX(-8px);
  }
  75% {
    transform: translateX(8px);
  }
}
@keyframes burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.4) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) scale(1.1) rotate(200deg);
  }
}
@keyframes wave {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  30% {
    transform: rotate(5deg) translateY(-6px);
  }
  60% {
    transform: rotate(-8deg) translateY(-2px);
  }
}
@keyframes jump {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(3deg) translateY(-22px);
  }
}
@keyframes blink {
  0%,
  94%,
  100% {
    transform: scaleY(1);
  }
  97% {
    transform: scaleY(0.1);
  }
}
.motion .rise {
  animation: rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.motion .panel:not([hidden]) {
  animation: panelIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.motion .tap {
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.18s ease;
}
@media (hover: hover) {
  .motion .tap:hover {
    transform: translateY(-4px);
  }
}
.motion .tap:active {
  transform: scale(0.96);
}
.motion .stars li.on {
  animation: pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 120ms);
}
.motion .node.now .dot {
  animation: ring 2.4s ease-out 3;
}
.motion .node.done .dot {
  animation: pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.motion .bookie {
  animation: wave 1.1s ease-in-out 0.3s 1;
}
.motion .bookie.jump {
  animation: jump 0.7s cubic-bezier(0.3, 0.9, 0.3, 1) 1;
}
.motion .bookie .eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 6s infinite;
}
.motion .opt.try {
  animation: shake 0.45s ease-in-out 1;
}
.motion .burst.go span {
  animation: burst 0.95s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.motion .cheer:not([hidden]) {
  animation: pop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.motion .tick {
  animation: pop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ---------- Junior theme (G): warm, large, light only ---------- */
.t-junior {
  --bg: #fff6e3;
  --tile: #ffffff;
  --ink: #22263d;
  --ink2: #55596e;
  --line: #e6d9bd;
  --brand: #5650b4;
  --on-blue: #ffffff;
  --tint: #ece9ff;
  --hero: #5650b4;
  --on-hero: #ffffff;
  --on-hero2: #ece9ff;
  --ok: #1d6f4e;
  --seg: #f1e5c8;
  --seg-on: #ffffff;
  --hover: #fff1d0;
  font-size: 22px;
  color-scheme: light;
}
.t-junior .s-page {
  max-width: 980px;
}
.t-junior .pick {
  min-height: 220px;
  font-size: 26px;
  border-radius: 32px;
}
.t-junior .pick .ico {
  width: 104px;
  height: 104px;
  border-radius: 30px;
}
.t-junior .pick .ico svg {
  width: 60px;
  height: 60px;
}
.t-junior .bookie {
  width: 200px;
  height: 232px;
}
.t-junior .listen {
  width: 104px;
  height: 104px;
}
.t-junior .listen svg {
  width: 48px;
  height: 48px;
}
.t-junior .s-toggle {
  min-height: 104px;
  padding: 0 28px;
  font-size: 20px;
}
.t-junior .s-hero {
  border-radius: 36px;
  padding: 40px;
}
.t-junior .s-hero .huge {
  font-size: clamp(40px, 8vw, 68px);
}
.t-junior .s-hero .go {
  min-height: 104px;
  padding: 0 44px;
  font-size: 30px;
  border-radius: 28px;
}
.btn-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 104px;
  padding: 0 40px;
  border: 0;
  border-radius: 28px;
  background: var(--brand);
  color: #ffffff;
  font: 800 28px var(--sans);
  cursor: pointer;
}
.btn-big.sun {
  background: var(--sun);
  color: var(--fixed-ink);
}
.btn-big.soft {
  background: var(--tint);
  color: var(--brand);
}
.tray {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 460px;
  margin: 32px auto 0;
}
.cookie {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 160px;
  border: 6px solid #b98351;
  border-radius: 50%;
  background-color: #f3dcb7;
  background-image:
    radial-gradient(circle at 28% 30%, #8a5a34 0 7px, transparent 8px),
    radial-gradient(circle at 68% 26%, #8a5a34 0 6px, transparent 7px),
    radial-gradient(circle at 74% 66%, #8a5a34 0 7px, transparent 8px),
    radial-gradient(circle at 30% 72%, #8a5a34 0 6px, transparent 7px);
  color: var(--fixed-ink);
  cursor: pointer;
}
.cookie .ico-s {
  opacity: 0;
}
.cookie[aria-pressed='true'] {
  background-color: var(--sun);
  background-image: none;
  border-color: #d19b00;
}
.cookie[aria-pressed='true'] .ico-s {
  opacity: 1;
}
.cookie.try {
  border-color: var(--coral);
}
.motion .cookie {
  transition: background 0.2s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.motion .cookie[aria-pressed='true'] {
  transform: scale(1.05);
}
.motion .cookie.try {
  animation: shake 0.45s ease-in-out 1;
}
.dots-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}
.dots-row b {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sun);
  border: 3px solid var(--fixed-ink);
}
.dots-row b.off {
  background: transparent;
  border-style: dashed;
}
.t-junior .panel {
  padding-bottom: 24px;
}
.dock {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 640px;
  margin: 48px auto 0;
  padding: 10px;
  border-radius: 36px;
  background: var(--tile);
  border: 3px solid var(--line);
}
.dock .tab {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 104px;
  padding: 10px 4px;
  border: 0;
  border-radius: 28px;
  background: transparent;
  color: var(--ink2);
  font: 800 16px var(--sans);
  cursor: pointer;
}
.dock .tab[aria-selected='true'] {
  background: var(--brand);
  color: #ffffff;
}
.motion .dock .tab {
  transition: background 0.25s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.motion .dock .tab[aria-selected='true'] {
  transform: translateY(-4px);
}
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.sticker {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 32px;
  color: var(--fixed-ink);
}
.sticker.c-sun {
  background: var(--sun);
}
.sticker.c-mint {
  background: var(--mint);
}
.sticker.c-sky {
  background: var(--sky);
}
.sticker.locked {
  background: var(--tile);
  border: 4px dashed var(--line);
  color: var(--ink2);
}
.motion .sticker.fresh {
  animation: pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.help-choices {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}
.help-choices .btn-big {
  justify-content: flex-start;
  min-height: 104px;
}
.grownup {
  margin-top: 56px;
  text-align: center;
  font-size: 14px;
}
.grownup a {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  color: var(--ink2);
}

/* ---------- Senior theme (H): calm, compact, keyboard-friendly ---------- */
.t-senior .s-page {
  max-width: 1200px;
}
.t-senior .tile {
  border-radius: 14px;
}
.rowgrid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  margin-top: 32px;
}
@media (max-width: 880px) {
  .rowgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.panelbox {
  padding: 28px;
  border-radius: 14px;
  background: var(--tile);
  border: 1px solid var(--line);
}
.panelbox h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.panelbox h2 + * {
  margin-top: 20px;
}
.agenda {
  margin: 0;
  padding: 0;
  list-style: none;
}
.agenda li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 80px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.agenda li:first-child {
  border-top: 0;
}
.agenda .when {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink2);
}
.agenda .what {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}
.agenda .what .ico-s {
  color: var(--brand);
}
.agenda .sub {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink2);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1.5px solid currentColor;
  font-size: 13px;
  font-weight: 700;
}
.pill.late {
  color: var(--bad);
}
.pill.ok {
  color: var(--ok);
}
.pill.next {
  color: var(--brand);
}
.ringbox {
  display: flex;
  gap: 24px;
  align-items: center;
}
.ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--v, 0) * 1%), var(--line) 0);
  font-size: 26px;
  font-weight: 800;
}
.ring::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--tile);
}
.ring span {
  position: relative;
}
.motion .ring {
  transition: --v 0.8s ease;
}
.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.checklist label {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 52px;
  font-size: 16px;
  cursor: pointer;
}
.checklist input {
  width: 22px;
  height: 22px;
  accent-color: var(--brand);
}
.checklist input:checked + span {
  color: var(--ink2);
  text-decoration: line-through;
}
.work {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.work textarea {
  width: 100%;
  min-height: 140px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 ui-monospace, 'SF Mono', Menlo, monospace;
}
.feedback {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--tint);
  font-size: 16px;
  line-height: 1.6;
}
.feedback[hidden] {
  display: none;
}
.motion .feedback:not([hidden]) {
  animation: rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.timer {
  font-size: 44px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.keys {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink2);
}
kbd {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--tile);
  font: 600 12px ui-monospace, Menlo, monospace;
}
.chat {
  display: grid;
  gap: 20px;
}
.bubble {
  max-width: 560px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
}
.bubble.me {
  justify-self: end;
  background: var(--tint);
}
.bubble .who {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink2);
}

/* ---------- Reading comfort for detail text ----------
   Body text 1.6 line height, details 14px or more, 8px between a title and its detail,
   16px between paragraphs, lines about 80 characters. */
.s-page,
.i-wrap {
  line-height: 1.6;
}
.s-hero .hello,
.s-hero .meta {
  line-height: 1.5;
}
.panelbox p {
  font-size: 14px;
  line-height: 1.6;
}
.ringbox p {
  max-width: 52ch;
}
.note {
  font-size: 16px;
}

/* Slide Over on iPad is 320 wide: trim padding and let grid children shrink */
.rowgrid > * {
  min-width: 0;
}
@media (max-width: 560px) {
  .t-junior .s-page {
    padding-inline: 16px;
  }
  .t-junior .dock {
    gap: 6px;
    padding: 8px;
  }
}
/* Slide Over and phones: two columns keep every tab 104 px wide, and the tray shrinks to fit */
@media (max-width: 420px) {
  .t-junior .dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
  }
  .cookie {
    min-height: 0;
  }
  .q-card {
    padding: 20px;
  }
  .q-top {
    flex-wrap: wrap;
  }
}
@media (max-width: 480px) {
  .s-page {
    padding: 0 16px 160px;
  }
  .agenda li {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}
@media (max-width: 400px) {
  .trail-wrap {
    padding: 28px 8px 20px;
  }
  .node .dot,
  [data-band='early'] .node .dot {
    width: 56px;
    height: 56px;
  }
  .rail,
  [data-band='early'] .rail {
    top: 23px;
  }
  .node,
  [data-band='early'] .node .word {
    font-size: 14px;
  }
}