/* KidStudy inside the apps for children (Reading, Maths, Science): each app wears its
   subject colour, and titles and main buttons use the brand font. These pages have no
   site header or footer, only the app's own bar, whose Kobi button goes home.
   Loaded after the app's own stylesheet. */

body.reader { --subject: var(--ks-reading); --subject-dark: #17804a; --subject-soft: #e3f4ea; }
body.maths { --subject: var(--ks-maths); --subject-dark: #6a3fc4; --subject-soft: #efe9fb; }
body.science { --subject: var(--ks-science); --subject-dark: #0b7f7f; --subject-soft: #e0f4f4; }
/* The subjects that share the Science lesson engine (body class "science <subject>"). */
body.science.geography { --subject: var(--ks-geography); --subject-dark: #9a4321; --subject-soft: #f8e9e1; }
body.science.coding { --subject: var(--ks-coding); --subject-dark: #1f6fae; --subject-soft: #e3f0fa; }
body.science.health { --subject: var(--ks-health); --subject-dark: #b8325f; --subject-soft: #fbe6ee; }
body.science.history { --subject: var(--ks-history); --subject-dark: #72572d; --subject-soft: #f3ece0; }
body.science.music { --subject: var(--ks-music); --subject-dark: #9c2a86; --subject-soft: #f8e5f4; }

/* ---- The app's top bar ---- */

.bar {
  position: relative;
  border-bottom: 0;
  box-shadow: inset 0 -4px var(--subject), 0 2px 6px rgb(29 36 51 / 0.06);
}
/* Maths and Science titles are the app's name or a topic: brand type in the subject colour.
   Reading keeps book print in its bar, because there the title is the book the child reads. */
body.maths .bar-title, body.science .bar-title { color: var(--subject-dark); font-family: var(--ks-brand-font); font-weight: 600; }
.round:not(.primary):not(.spacer):not([href="./"]) { border-color: color-mix(in srgb, var(--subject) 30%, #e4dfd4); }

/* ---- Main buttons and the things that are "on" ---- */

.big.primary, .round.primary { background: var(--subject-dark); border-color: var(--subject-dark); }
.big { font-family: var(--ks-brand-font); font-weight: 600; letter-spacing: 0.01em; }
.level-tab[aria-selected="true"], .year-tab[aria-selected="true"], .shelf-switch button[aria-pressed="true"] { background: var(--subject-dark); border-color: var(--subject-dark); }
.level-tab, .year-tab { font-family: var(--ks-brand-font); font-weight: 600; }
.dot.on { background: var(--subject); }

/* Cards on the app's home screen get the subject's colour as a thin top edge. */
.topic-card, .lesson-card { box-shadow: inset 0 4px var(--subject), 0 1px 2px rgb(29 36 51 / 0.08), 0 8px 24px rgb(29 36 51 / 0.1); }
.topic-name, .lesson-title { color: var(--ink, #1d2433); }
.level-name { color: var(--subject-dark); }
.level-chip { border-color: color-mix(in srgb, var(--subject) 35%, #e4dfd4); }

/* Three shelves (Stories, Science, Phonics) need a row of their own under the bar's
   buttons on an upright iPad, as they already have on a phone. */
@media (max-width: 900px) {
  .bar:has(.shelf-switch) { flex-wrap: wrap; row-gap: 8px; }
  .bar:has(.shelf-switch) .round.spacer { display: none; }
  .bar:has(.shelf-switch) > .round:first-child { margin-right: auto; }
  .bar .shelf-switch { order: 1; flex: 1 1 100%; }
}

/* ---- Every tap answers (js/science/feedback.js), in every app for children ---- */

/* The way on, once a step is done: it breathes so the child sees it, and a hand
   bounces over it (pointAt) so a child who can't read knows to tap it. */
.primary.ready { animation: ready 1.4s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--subject, #2f5fb3) 30%, transparent); } }
.point { position: relative; overflow: visible; }
.point > .hand {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  z-index: 2;
  font: 40px/1 var(--emoji, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif);
  translate: -50% 0;
  pointer-events: none;
  filter: drop-shadow(0 3px 3px rgb(29 36 51 / 0.25));
  animation: hand-bob 0.8s ease-in-out infinite;
}
@keyframes hand-bob { 50% { transform: translateY(-12px); } }

/* Words that light up as the voice reads them (reader/ui.js litText). Each word is as tall
   as its line, so the words of two lines never overlap, even with a tight line height. */
.lit-word { display: inline-block; border-radius: 0.2em; transition: background-color 0.1s; }
.lit-word.now { background: var(--now, #c8dafb); box-shadow: inset 0 -0.07em var(--accent, #2f5fb3); }

/* The tap effects: drawn over everything, never in the way of a finger. */
.tap-fx { position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: hidden; }
.tap-fx > span { position: absolute; }
.fx-ring { border: 5px solid #fff; border-radius: 50%; box-shadow: 0 0 12px rgb(255 255 255 / 0.6); }
.fx-dot { width: 12px; height: 12px; border-radius: 50%; }
.fx-star { width: 20px; height: 20px; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.fx-confetti { width: 10px; height: 16px; border-radius: 2px; }
.fx-hand { z-index: 2; left: 0; top: 0; font: 54px/1 var(--emoji, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif); filter: drop-shadow(0 4px 4px rgb(29 36 51 / 0.3)); }
.fx-ghost { left: 0; top: 0; font: 56px/1 var(--emoji, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif); filter: drop-shadow(0 6px 8px rgb(29 36 51 / 0.25)); }

@media (max-width: 600px), (max-height: 500px) {
  .point > .hand { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .primary.ready, .point > .hand { animation: none; }
}