/* 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%; }
}