/* Learning Gem - subject pages "Storybook" reskin (design slice 4,
   lg-v135). Visual layer only, loaded after shopskin-lg1.css.
   subj-lg1.js puts .lgsb-root and data-lgsb="<subject>" on the
   subject page's root and html.lg-subj on the document while -
   and only while - a subject page is the screen shown; every
   rule below is scoped to that pair, so no other screen can be
   touched (the dashboard, shop and welcome screen keep exactly
   their shipped look; their rules live under their own gates
   and cannot match here, and these cannot match there).

   The subject pages join the storybook world the same way the
   dashboard and the shop did: the deep-navy sky (painted over
   the app's own fixed background layer), page text lifted to
   the dashboard's light ink and muted text to its #aeb8e8, and
   treasure cards that stay LIGHT with dark text so activity
   names, descriptions and scores keep full contrast.

   Each subject keeps its own world colour as its accent, taken
   from the colours the app itself already paints that world
   with - the subject config the dashboard cards and these very
   headers wear (Gi in the bundle, the Social Studies entry
   pushed by more-LG3.js), which are also the landing islands'
   colours for Reading, Math and Science:
     Reading   rose    accent #e11d48, deep #be123c
     Math      blue    accent #2563eb, deep #1d4ed8
     Science   emerald accent #059669, deep #047857
     Social    orange  accent #ea580c, deep #9a3412
   (Social's landing island is teal, but its subject page,
   dashboard card and the app's own subject maps all wear the
   amber-orange family, so the page keeps the colours it
   already wears; nothing here invents a new colour.)
   The accent frames every activity card (a soft tinted border,
   a solid top strip, the icon chip's tint and ring, and the
   hover ring), and it deepens the type pill's text - the app's
   own pill shades for Science and Social sit near 3.5:1 on
   their pale grounds, under the 4.5:1 line this slice holds.

   The hero header keeps each subject's own artwork or gradient
   - that IS the world's identity - and gains the storybook
   furniture: a gold hairline under it (the dashboard/shop
   treatment) and a navy inset wash that sits the bright hero
   into the navy sky and keeps its white title, back link and
   sub line at 4.5:1 or better on every stop, the photo heroes
   included (modelled over a worst-case white photo pixel
   under the header's own dark overlay). Social Studies has
   no photo: its amber gradient (more-LG3's .lg-ss-grad) is
   deepened a shade within the same family for the same
   reason. The grade pill turns to the shop's dark glass with
   a gold rim, so its white text reads on any hero.

   There is no grade selector or filter on these pages to
   restyle: the grade comes from the child's profile, and the
   header's grade pill is display-only. Card states stay
   unmistakable - a finished activity shows its gems and
   "Score: N%", an unplayed one its green dot and "Ready to
   play"; neither line changes words, only the muted slate
   they share with the shop's treasure cards.

   No animation is added at all: the only motion on these
   pages remains the app's own (the cards' pop-in and hover
   lift, the ready dot's pulse), so there is nothing new to
   gate for reduced motion. Contrast is proven, not eyeballed:
   subj-test.js runs the cascade method over all twelve real
   stylesheets plus the runtime sheet that defines
   .lg-ss-grad, checks background-image winners as well as
   colours (the lg-v134 lesson), and verifies the dashboard,
   shop and landing winners are byte-identical without this
   sheet. No layout geometry, no behaviour: colour,
   background, border and shadow only. */

/* The sky and the page base: same recipe as the dashboard's
   and the shop's. */
html.lg-subj body { background-color: #0b1130; }
.lgsb-root { background-color: #0b1130; color: #eef1ff; }
html.lg-subj #root .lgsb-root > .fixed.inset-0.-z-10 > div:first-child {
  background:
    radial-gradient(1100px 520px at 10% -6%, rgba(124, 58, 237, .34), rgba(124, 58, 237, 0) 60%),
    radial-gradient(920px 500px at 96% 108%, rgba(13, 148, 136, .26), rgba(13, 148, 136, 0) 60%),
    linear-gradient(180deg, #0b1130 0%, #141c42 46%, #172554 100%) !important;
}

/* Each world's colours, as custom properties on the page root
   (see the header comment for where each value comes from).
   Every accent rule below reads these, so a card can only ever
   wear the colour of the subject on screen. */
html.lg-subj #root .lgsb-root[data-lgsb="reading"] {
  --lgsb-ac: #e11d48; --lgsb-deep: #be123c; --lgsb-tint: #fbe4e9; --lgsb-ring: #ee839a;
}
html.lg-subj #root .lgsb-root[data-lgsb="math"] {
  --lgsb-ac: #2563eb; --lgsb-deep: #1d4ed8; --lgsb-tint: #e5ecfd; --lgsb-ring: #87a9f4;
}
html.lg-subj #root .lgsb-root[data-lgsb="science"] {
  --lgsb-ac: #059669; --lgsb-deep: #047857; --lgsb-tint: #e1f2ed; --lgsb-ring: #75c5ac;
}
html.lg-subj #root .lgsb-root[data-lgsb="social"] {
  --lgsb-ac: #ea580c; --lgsb-deep: #9a3412; --lgsb-tint: #fcebe2; --lgsb-ring: #f3a379;
}

/* The hero header: its own subject artwork/gradient stays;
   what it gains is the gold hairline and soft shadow the
   dashboard and shop headers wear, plus a navy inset wash
   (painted by the inset shadow over the background, under
   the text) that blends the bright hero into the sky and
   holds the white text at full contrast. The back link and
   the sub line drop their dimming - on a hero, white earns
   its place at full strength. */
html.lg-subj #root .lgsb-root > header {
  border-bottom: 2px solid rgba(245, 183, 0, .45);
  box-shadow: inset 0 0 0 2000px rgba(10, 14, 38, .32), 0 6px 22px rgba(3, 6, 20, .4);
}
/* Social Studies' gradient lives in a runtime rule with
   !important (.lg-ss-grad in more-LG3.js); the deepened
   stops are restated here with the gate's specificity. */
html.lg-subj #root .lgsb-root[data-lgsb="social"] > header {
  background-image: linear-gradient(to bottom right, #b45309, #9a3412) !important;
}
html.lg-subj #root .lgsb-root > header h1 { font-family: 'Fredoka', 'Nunito', sans-serif; }
html.lg-subj #root .lgsb-root > header button[data-testid="button-back"] { opacity: 1; }
html.lg-subj #root .lgsb-root > header p.opacity-80 { opacity: 1; }
/* The grade pill: dark glass with a gold rim (the shop's
   balance-pill treatment), so its white grade line reads on
   every hero, photo or gradient. */
html.lg-subj #root .lgsb-root > header p.bg-white\/20 {
  background-color: rgba(9, 13, 36, .45);
  border: 1px solid rgba(245, 183, 0, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* Muted text on the navy, lifted exactly as the dashboard
   lifts it - this reaches the empty-grade state's muted line
   and nothing inside the light cards (their own rule below
   outranks this one inside a card). */
html.lg-subj #root .lgsb-root main .text-muted-foreground { color: #aeb8e8; }

/* Treasure cards, in the world's frame. Every activity card
   takes the warm paper gradient and the dashboard violet ink
   of the shop's cards; its border softens to the world's
   tinted ring colour, a solid strip of the world's accent
   runs across its top (an inset shadow, so nothing moves),
   and its hover ring is the accent itself. The per-type
   pastel gradients the cards wear today fall away - the type
   is still named, in words, on the pill. */
html.lg-subj #root .lgsb-root main [data-testid^="card-activity-"] {
  color: #37305e;
  background-color: #fff8e1;
  background-image: linear-gradient(180deg, #fffdf7 0%, #fff3d6 100%);
  border-color: var(--lgsb-ring);
  box-shadow: inset 0 4px 0 0 var(--lgsb-ac), 0 8px 20px rgba(3, 6, 20, .35);
}
html.lg-subj #root .lgsb-root main [data-testid^="card-activity-"]:hover {
  box-shadow: inset 0 4px 0 0 var(--lgsb-ac), 0 0 0 2px var(--lgsb-ac), 0 14px 28px rgba(3, 6, 20, .45);
}
/* Muted text inside cards: the shop's dark slate on the
   treasure gradient - descriptions, the "Score: N%" line and
   "Ready to play" all share it, as they shared one muted
   colour before. */
html.lg-subj #root .lgsb-root main [data-testid^="card-activity-"] .text-muted-foreground { color: #5b5885; }
/* The icon chip: a tile of the world's tint, ringed in the
   world's soft colour, so the activity's picture sits in its
   world's frame. */
html.lg-subj #root .lgsb-root main [data-testid^="card-activity-"] .bg-white\/80 {
  background-color: var(--lgsb-tint);
  box-shadow: inset 0 0 0 2px var(--lgsb-ring), 0 1px 2px rgba(3, 6, 20, .15);
}
/* The type pill: the world's tint behind its deep shade -
   the same pairing the landing name plates use (a world's
   deep colour under its name), and the fix for the two pills
   whose app shades sat under 4.5:1. */
html.lg-subj #root .lgsb-root main [data-testid^="card-activity-"] span.rounded-full {
  background-color: var(--lgsb-tint);
  color: var(--lgsb-deep);
}