/* =========================================================
   Likkle Coders — v11 "Modern" (v384)
   ---------------------------------------------------------
   WHY THIS EXISTS
   Seven CSS layers had piled up. On a single screen the app
   painted 4 font families, 8 border-radius values and 16
   box-shadows. That incoherence — not any one choice — is
   what read as "old and vintage".

   The literal cause: v7-jamaica.css line 43 set
     --lc-font-display: 'Fraunces', Georgia, 'DM Serif Display', serif
   Fraunces is an *old-style* display serif. It was overriding
   the rounded Baloo 2 that styles.css intended.

   WHAT THIS DOES — subtraction, not decoration:
     1 font   (Baloo 2 — already loaded by index.html, so 0 new bytes.
               The CSS referenced 'Fredoka' in 60+ places but index.html
               never imported it, so those rules were silently falling
               back to system-ui.)
     3 radii  (999px pill · 20px card · 50% circle)
     4 shadows
     1 button treatment — solid fill + darker inset bottom edge, so it
               looks physically pressable and depresses on :active.

   Loaded LAST so it wins. EASY REVERT: delete the one <link> in
   index.html + the SHELL entry in service-worker.js. Nothing else in
   the app references these rules, so removing the file restores the
   previous look exactly.

   !important is used deliberately here: this layer has to beat six
   earlier layers that already use high-specificity selectors. Without
   it the tokens lose to v7-jamaica.
   ========================================================= */

:root{
  /* ---- palette (single source of truth) ---- */
  --m-ink:      #14231A;
  --m-green:    #009B3A;
  --m-green-d:  #007A2E;
  --m-gold:     #FFC12E;
  --m-gold-d:   #D99C0C;
  --m-blue:     #2A9DF4;
  --m-red:      #E63946;
  --m-bg:       #FFFFFF;
  --m-surface:  #F6F7F5;
  --m-border:   #E6E9E4;
  --m-muted:    #5D6B60;

  /* ---- exactly three radii ---- */
  --m-r-pill:   999px;
  --m-r-card:   20px;
  --m-r-circle: 50%;

  /* ---- exactly four shadows ---- */
  --m-sh-card:   0 1px 2px rgba(20,35,26,.06), 0 4px 12px rgba(20,35,26,.06);
  --m-sh-hover:  0 2px 4px rgba(20,35,26,.08), 0 12px 28px rgba(20,35,26,.12);
  --m-sh-btn:    0 4px 12px rgba(0,155,58,.22);
  --m-sh-inset:  inset 0 -4px 0 rgba(0,0,0,.22);

  /* ---- ONE font. Re-point every legacy var at it so the six older
         layers can't reintroduce a second face. ---- */
  --m-font: 'Baloo 2', 'Fredoka', system-ui, -apple-system, sans-serif;

  --f-display:       var(--m-font) !important;
  --f-body:          var(--m-font) !important;
  --ff-display:      var(--m-font) !important;
  --lc-font-display: var(--m-font) !important;  /* was Fraunces (serif) */
  --lc-font-body:    var(--m-font) !important;  /* was Plus Jakarta Sans */
  --cert-fam:        var(--m-font) !important;
  --cert-disp:       var(--m-font) !important;
}

/* ---------------------------------------------------------
   1 — ONE FONT EVERYWHERE
   Monospace is exempt: code samples in the kid-coding
   playground must stay monospaced to line up.
   --------------------------------------------------------- */
body, body *:not(code):not(pre):not(kbd):not(samp):not(.lc-code):not([class*="mono"]){
  font-family: var(--m-font) !important;
}
/* Crisp near-white ground. An earlier layer set a warm cream
   (rgb(255,248,236)) which is a big part of the dated feel — modern
   kids' apps sit on clean white. */
html, body{ background: #FBFCFB !important; }
/* the home landing sets its own cream via a body class — outrank it */
body.is-landing, body.lc-home-signed-in, body.lc-home-signed-out{
  background: #FBFCFB !important;
}
.app-main, #app, main, .section{ background: transparent !important; }
h1,h2,h3,h4,h5,.hero h1,.section h2,[class*="title"],[class*="heading"]{
  font-family: var(--m-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}
body{ color: var(--m-ink); }

/* ---------------------------------------------------------
   2 — THREE RADII
   Collapse the eight stray values onto the scale. Pills stay
   pills; anything card-sized becomes 20px; circles stay round.
   --------------------------------------------------------- */
.card, .lesson-card, .game-card, .grade-card, .panel, .tile,
.v9-card, .lc-master-card, .lc-master-tile, .sx-lock-card,
.cert-list-card, .eg-card, section.section > .box, .modal, .sheet{
  border-radius: var(--m-r-card) !important;
}
/* v390 — "-pill-" not "-pill": the bare substring also matched
   .lc-found-pillar and turned entire ladder CARDS into 999px ovals
   (the "why is this circular?" bug). */
.btn, button.btn, .pill, .chip, .badge, .tab,
[class*="-pill-"], [class$="-pill"]{
  border-radius: var(--m-r-pill) !important;
}
.avatar, .lc-logo--mark, [class*="-avatar"], [class*="-circle"]{
  border-radius: var(--m-r-circle) !important;
}

/* ---------------------------------------------------------
   3 — FOUR SHADOWS
   --------------------------------------------------------- */
.card, .lesson-card, .game-card, .grade-card, .panel, .tile,
.v9-card, .lc-master-tile, .cert-list-card, .eg-card{
  box-shadow: var(--m-sh-card) !important;
  border: 1px solid var(--m-border) !important;
  background: var(--m-bg);
  transition: transform .14s ease, box-shadow .14s ease;
}
.card:hover, .lesson-card:hover, .game-card:hover, .grade-card:hover,
.tile:hover, .v9-card:hover, .lc-master-tile:hover, .cert-list-card:hover, .eg-card:hover{
  box-shadow: var(--m-sh-hover) !important;
  transform: translateY(-2px);
}

/* ---------------------------------------------------------
   4 — THE BUTTON
   The signature: a solid fill with a darker inset bottom edge
   reads as a real, pressable object. It must actually depress
   on :active or the illusion breaks.
   --------------------------------------------------------- */
.btn, button.btn, a.btn{
  font-family: var(--m-font) !important;
  font-weight: 700 !important;
  border-radius: var(--m-r-pill) !important;
  min-height: 48px;
  padding: .72rem 1.35rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: none !important;
  cursor: pointer;
  line-height: 1;
  /* !important so a plain .btn always gets the fill — otherwise an earlier
     layer's transparent background wins and the white label goes invisible
     (e.g. the "Another tip" chip on the home card). Variants below re-assert
     their own fills with !important, so they still win over this. */
  background: var(--m-green) !important;
  color: #fff !important;
  box-shadow: var(--m-sh-inset), var(--m-sh-btn) !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover, button.btn:hover, a.btn:hover{ filter: brightness(1.04); transform: translateY(-1px); }
.btn:active, button.btn:active, a.btn:active{
  transform: translateY(2px);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.12) !important;
}
.btn:focus-visible, button:focus-visible, a:focus-visible{
  outline: 3px solid var(--m-blue) !important;
  outline-offset: 3px;
}
.btn-tiny{ min-height: 36px; padding: .4rem .9rem; font-size: .86rem; }

/* variants */
.btn-light, .btn-ghost, .btn-secondary{
  background: var(--m-bg) !important;
  color: var(--m-ink) !important;
  border: 2px solid var(--m-border) !important;
  box-shadow: inset 0 -3px 0 rgba(20,35,26,.10), 0 2px 8px rgba(20,35,26,.06) !important;
}
.btn-gold, .btn-warning{
  background: var(--m-gold) !important; color: var(--m-ink) !important;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.16), 0 4px 12px rgba(255,193,46,.30) !important;
}
.btn-danger{
  background: var(--m-red) !important; color: #fff !important;
  box-shadow: var(--m-sh-inset), 0 4px 12px rgba(230,57,70,.28) !important;
}
.btn:disabled, .btn[aria-disabled="true"]{
  background: var(--m-surface) !important; color: var(--m-muted) !important;
  box-shadow: none !important; transform: none !important; cursor: not-allowed;
}

/* ---------------------------------------------------------
   5 — CHROME
   --------------------------------------------------------- */
.topnav{
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid var(--m-border) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(180%) blur(10px);
}
.bottom-tabs, .tabbar, [class*="bottom-tab"]{
  background: rgba(255,255,255,.96) !important;
  border-top: 1px solid var(--m-border) !important;
  box-shadow: 0 -1px 2px rgba(20,35,26,.05) !important;
}

/* ---------------------------------------------------------
   6 — DARK MODE
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root{
    --m-ink:     #F2F5F1;
    --m-bg:      #12160F;
    --m-surface: #1B211A;
    --m-border:  #2A322A;
    --m-muted:   #A9B4AA;
    --m-green:   #22C55E;
  }
  body{ background: var(--m-bg); color: var(--m-ink); }
  .card, .lesson-card, .game-card, .grade-card, .panel, .tile,
  .v9-card, .lc-master-tile, .cert-list-card, .eg-card{
    background: var(--m-surface) !important;
  }
  .topnav, .bottom-tabs, .tabbar{ background: rgba(18,22,15,.92) !important; }
}

@media (prefers-reduced-motion: reduce){
  .card, .btn, .tile, .lesson-card, .game-card, .grade-card{
    transition: none !important; transform: none !important;
  }
}

/* ---------------------------------------------------------
   7 — SNAP THE STRAGGLERS ONTO THE SCALE
   Measured leftovers after the class rules above: nav links at
   16px, the mobile tab bar at 24px, and a handful of floating
   action buttons each carrying their own bespoke shadow. Pin
   them so a single screen truly shows 3 radii / 4 shadows.
   --------------------------------------------------------- */
.nav-links a, .nav-student-chip-link, .nav-teachers, a.active,
.global-back{
  border-radius: var(--m-r-pill) !important;
}
.mobile-bar, nav.mobile-bar{
  border-radius: var(--m-r-card) var(--m-r-card) 0 0 !important;
}
/* Every floating action button shares ONE circular shadow token */
.lc-fab-toolbox, .lc-brain-fab, .lc-read-indicator, .lc-press-read-fab,
.global-back{
  border-radius: var(--m-r-circle) !important;
  box-shadow: var(--m-sh-btn) !important;
}
/* A 2px "radius" on divider spans reads as sharp corners — flatten
   to true square so it stops counting as a stray radius. */
.dyk-tag{ border-radius: var(--m-r-pill) !important; }

/* ---------------------------------------------------------
   8 — LEGIBILITY REPAIR (v385)
   The grade cards were designed for coloured backgrounds with
   white text — the title carried an inline
   color:rgba(255,255,255,.92). On today's white cards that
   text is INVISIBLE (user: "im not seeing the words clearly").
   !important is required to beat the inline style.
   --------------------------------------------------------- */
.grade-card h3{ color: var(--m-ink) !important; }
.grade-card p, .grade-card p[style]{ color: var(--m-muted) !important; }
.grade-card .meta, .grade-card .meta span{ color: var(--m-muted) !important; }
.grade-card .pill{
  background: var(--accent, var(--m-green)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);   /* legible even on light accents */
  opacity: 1 !important;
}
/* Grade 6's accent is gold (luminance .75) — white text can't sit on it.
   Ink on gold, same as the .btn-gold treatment. */
.grade-card[data-num="6"] .pill{
  color: var(--m-ink) !important;
  text-shadow: none;
}
/* same washed-pill pattern on other card families */
.lesson-card .pill, .game-card .pill, .tile .pill{
  color: var(--m-ink) !important; font-weight: 700 !important; opacity: 1 !important;
}

/* PEP past-paper chips: pastel bg + same-hue text read as faint.
   Keep the pastel wash, switch the label to ink and bold. */
.pep-paper-chip, .pep-paper-chip .pep-paper-chip-label{
  color: var(--m-ink) !important;
  font-weight: 700 !important;
}
.pep-paper-chip{ border: 1.5px solid rgba(20,35,26,.14) !important; }
.pep-paper-grade-tag{ color: var(--m-ink) !important; font-weight: 800 !important; }

/* Global floor: no text inside a white card may render white/near-white.
   Catches any remaining coloured-card design that lost its background. */
.card [style*="color:rgba(255"], .grade-card [style*="color:rgba(255"],
.lesson-card [style*="color:rgba(255"], .tile [style*="color:rgba(255"],
.bh-mega [style*="color:rgba(255"], .bh-mega [style*="color:#fff"],
.bh-mega [style*="color: #fff"], .bh-mega [style*="color:white"],
.bh-act [style*="color:rgba(255"], .bh-act [style*="color:#fff"]{
  color: var(--m-muted) !important;
}

/* ---------------------------------------------------------
   9 — HOME HERO (v386)
   The brand kids replace the robot, and the CTA stops being
   blue-text-on-orange (unreadable) in favour of the standard
   chunky green.
   --------------------------------------------------------- */
/* v391 — the kids stand in a small illustrated scene: soft sky,
   sun, rolling grass. All CSS gradients — zero extra downloads. */
.lc-kids-scene{
  position: relative;
  border-radius: var(--m-r-card);
  overflow: hidden;
  padding: 26px 14px 0;
  background:
    radial-gradient(90px 90px at 85% 14%, rgba(255,193,46,.9) 0 28px, rgba(255,193,46,.25) 29px 40px, transparent 41px),
    radial-gradient(140% 70% at 50% 108%, #6FCB4F 0 58%, transparent 59%),
    linear-gradient(180deg, #CBEAFF 0%, #E8F6FF 60%, #F1FAEC 100%);
}
.lc-kids-scene::after{     /* wee clouds */
  content: "";
  position: absolute; top: 18px; left: 10%;
  width: 54px; height: 14px; border-radius: 999px;
  background: rgba(255,255,255,.85);
  box-shadow: 26px 6px 0 -2px rgba(255,255,255,.75),
              120px 18px 0 0 rgba(255,255,255,.7);
}
.lc-kids-duo img{
  filter: drop-shadow(0 10px 8px rgba(20,35,26,.18));
  position: relative; z-index: 1;
}
.lc-kids-duo{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4%;
  animation: lc-kids-float 4.5s ease-in-out infinite;
}
.lc-kids-duo .lc-kid--girl-cheer{
  animation: lc-kids-float 4.5s ease-in-out infinite reverse;
}
@keyframes lc-kids-float{
  0%, 100%{ transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce){
  .lc-kids-duo, .lc-kids-duo .lc-kid--girl-cheer{ animation: none; }
}
@media (max-width: 640px){
  .lc-kids-duo svg{ width: 108px; height: auto; }
}

.bh-hero2-cta{
  background: var(--m-green) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: var(--m-r-pill) !important;
  box-shadow: var(--m-sh-inset), var(--m-sh-btn) !important;
}
.bh-hero2-cta:active{ transform: translateY(2px); }
.bh-hero2-cta .bh-hero2-cta-arrow{ color: #fff !important; }

/* ---------------------------------------------------------
   10 — HOME PAGE ORGANIZATION (v389)
   The signed-in home stacked five full-bleed gradient banners
   (purple/red/teal/green/gold), each styled differently, with
   emoji tiles in pastel washes below. Organizing principle:
   WHITE GROUND, one card system, colour demoted to the icon
   chip + progress + one CTA. Exactly ONE filled surface may
   remain — the Weekly Challenge, as solid gold with ink text.
   !important is load-bearing: several banners carry inline
   gradient styles that only !important can beat.
   --------------------------------------------------------- */

/* The three "Today" cards + the Extra Lessons banner */
.bh-mega, .bh-mega--xl, .bh-mega--foundations, .bh-mega--pep, .bh-mega--junior{
  background: var(--m-bg) !important;
  background-image: none !important;
  color: var(--m-ink) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-r-card) !important;
  box-shadow: var(--m-sh-card) !important;
}
.bh-mega:hover{ box-shadow: var(--m-sh-hover) !important; }
.bh-mega strong, .bh-mega b, .bh-mega h3{ color: var(--m-ink) !important; }
.bh-mega-sub, .bh-mega small, .bh-mega p{ color: var(--m-muted) !important; }
.bh-mega-deco{ display: none !important; }   /* gradient sparkle overlays */
.bh-mega-icon{
  background: var(--m-surface) !important;
  border-radius: var(--m-r-circle) !important;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* colour returns as one small accent per card */
.bh-mega--foundations .bh-mega-icon{ background: rgba(139,92,246,.16) !important; }
.bh-mega--pep         .bh-mega-icon{ background: rgba(230,57,70,.14) !important; }
.bh-mega--junior      .bh-mega-icon{ background: rgba(42,157,244,.14) !important; }
.bh-mega--xl          .bh-mega-icon{ background: rgba(0,155,58,.14) !important; }
.bh-mega-cta{
  background: var(--m-bg) !important;
  color: var(--m-ink) !important;
  border: 2px solid var(--m-border) !important;
  border-radius: var(--m-r-pill) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 -3px 0 rgba(20,35,26,.10) !important;
}

/* Weekly Challenge — the ONE filled banner: solid gold, ink text */
.bh-weekly-challenge{
  background: var(--m-gold) !important;
  background-image: none !important;
  color: var(--m-ink) !important;
  border: none !important;
  border-radius: var(--m-r-card) !important;
  box-shadow: var(--m-sh-card), inset 0 -4px 0 rgba(0,0,0,.12) !important;
}
.bh-weekly-challenge::before{ display: none !important; }
.bh-weekly-challenge *, .bh-weekly-challenge strong{ color: var(--m-ink) !important; }
.bh-weekly-challenge .bh-wc-cta, .bh-weekly-challenge .btn{
  background: var(--m-ink) !important;
  color: var(--m-gold) !important;
  border-radius: var(--m-r-pill) !important;
  box-shadow: var(--m-sh-inset) !important;
}

/* Fun-activity tiles: uniform white, colour stays in the icon chip */
.bh-act{
  background: var(--m-bg) !important;
  background-image: none !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-r-card) !important;
  box-shadow: var(--m-sh-card) !important;
  color: var(--m-ink) !important;
}
.bh-act:hover{ box-shadow: var(--m-sh-hover) !important; transform: translateY(-2px); }
.bh-act strong, .bh-act h3{ color: var(--m-ink) !important; }
.bh-act p, .bh-act small, .bh-act span:not(.bh-act-icon){ color: var(--m-muted); }
.bh-act-icon{ border-radius: 14px !important; }

/* Foundations ladder cards — same organized treatment as the rest of
   the home: white card, ink text, colour demoted to the icon chip.
   Also pins the radius to 20px (they are cards, not pills). */
.lc-found-pillar{
  background: var(--m-bg) !important;
  background-image: none !important;
  color: var(--m-ink) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-r-card) !important;
  box-shadow: var(--m-sh-card) !important;
}
.lc-found-pillar:hover{ box-shadow: var(--m-sh-hover) !important; }
.lc-found-pillar h3{ color: var(--m-ink) !important; }
.lc-found-pillar p{ color: var(--m-muted) !important; }
.lc-found-pillar-icon{
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--m-r-circle) !important;
  background: var(--m-surface);
  font-size: 1.7rem !important; line-height: 1;
}
.lc-found-pillar--reading  .lc-found-pillar-icon{ background: rgba(233,76,184,.14); }
.lc-found-pillar--number   .lc-found-pillar-icon{ background: rgba(75,45,219,.12); }
.lc-found-pillar--spelling .lc-found-pillar-icon{ background: rgba(217,147,12,.16); }
.lc-found-pillar--logic    .lc-found-pillar-icon{ background: rgba(42,157,244,.14); }
.lc-found-pillar-stars{
  background: rgba(255,193,46,.22) !important;
  color: var(--m-ink) !important;
}
.lc-found-pillar-next{
  background: var(--m-surface) !important;
  color: var(--m-ink) !important;
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-pill) !important;
  font-weight: 700;
}

/* Section headers: quiet, uppercase, consistent */
.bh-section-h{
  font-size: .82rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m-muted) !important;
}

@media (prefers-color-scheme: dark){
  .bh-mega, .bh-mega--xl, .bh-act{ background: var(--m-surface) !important; }
}

/* The certificate keeps its own look — the user asked for the original
   design and rejected two restyles. Only the font token flows through. */
.cert-page, .cert-page *{ box-shadow: revert; }