/* ===================================================================
   AIWine — LEARN design identity  (U18 · "learn as you grow")
   A bright, playful, curious skin for the youngest audience. Learn keeps
   its rich bespoke sections (learn-v2/v3/v4 own all the interactive
   components) — this sheet is a LENS SKIN only: it re-maps the shared
   accent tokens to Learn's palette and swaps the display face, so every
   existing var(--claret)/Cormorant heading picks up the Learn look
   automatically. Same low-risk pattern as discover.css (ONE nav system,
   re-skinned — see CLAUDE.md "Lens theming rule").

   Identity vs the other flights:
     · Cellar   — claret + brass, Cormorant serif (refined, 35+)
     · Discover — vineyard green + coral, Space Grotesk (trendy, 18+)
     · Learn    — honey gold + grape purple, Fredoka (playful, U18)
   Loaded ONLY on the Learn page, LAST, so it wins the cascade.
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

/* ---- palette + type tokens (scoped to the lens) ------------------- */
[data-experience="learn"]{
  --flight-accent:#C49A3A;      /* matches the bottom flight switcher (Learn) */
  /* re-skin the shared accents → honey gold (primary) */
  --claret:#B07A16;             /* deep honey — white text passes AA */
  --claret-deep:#8A5E10;
  --brass:#C49A3A;              /* bright gold accent */
  --brass-soft:#E7C877;
  --brass-ink:#7A5810;
  /* Learn's own tokens */
  --l-gold:#C49A3A; --l-gold-deep:#A67C24;
  --l-honey:#B07A16; --l-honey-deep:#8A5E10;
  --l-pop:#8E44AD;              /* grape-purple pop — the playful energy accent */
  --l-pop-deep:#6C3483;
  --l-pop-soft:#EBD9F2;
  --l-ink:#241C10;              /* warm near-black */
  --l-play:'Fredoka','Manrope',system-ui,sans-serif;
}

/* ---- display face: friendly rounded Fredoka instead of Cormorant ---
   Target the generic heading tags AND the bespoke Learn display classes
   (learn-v4 hard-codes Cormorant on these spans, so name them). */
[data-experience="learn"] h1,
[data-experience="learn"] h2,
[data-experience="learn"] h3,
[data-experience="learn"] h4,
[data-experience="learn"] .bt,
[data-experience="learn"] .band-n,
[data-experience="learn"] .wc-n,
[data-experience="learn"] .home-intro h1,
[data-experience="learn"] .whub-head .bt,
[data-experience="learn"] .soil-detail h5,
[data-experience="learn"] .blend-verdict .vword,
[data-experience="learn"] .wx-card h4,
[data-experience="learn"] .wx-final .title,
[data-experience="learn"] .pass-id h4,
[data-experience="learn"] .pass-sub,
[data-experience="learn"] .season-card h4,
[data-experience="learn"] .gloss-detail .gw,
[data-experience="learn"] .mcard .back .nm,
[data-experience="learn"] .gcard .back .w{
  font-family:var(--l-play) !important;
  font-weight:600 !important;
  letter-spacing:-0.01em !important;
}

/* keep the big score numeral playful too */
[data-experience="learn"] .wx-final .score{ font-family:var(--l-play) !important; font-weight:700 !important; }

/* em inside headings: cellar uses coloured serif-italic; Learn uses a
   solid grape-purple pop, upright — reads fun, not editorial. */
[data-experience="learn"] h1 em,
[data-experience="learn"] h2 em,
[data-experience="learn"] h3 em,
[data-experience="learn"] .home-intro h1 em{
  font-style:normal !important;
  color:var(--l-pop) !important;
}

/* nav lockup — playful gold suffix, level with AIWine's baseline */
[data-experience="learn"] .lnav-in{ align-items:baseline; }
[data-experience="learn"] .lnav .mark .sfx{
  font-family:var(--l-play);
  font-weight:600;
  font-size:13px;
  align-self:baseline;
  color:var(--l-gold);
}

/* ---- buttons & pills: chunky, friendly, full-round --------------- */
[data-experience="learn"] .resume-btn,
[data-experience="learn"] .pagenav button,
[data-experience="learn"] .pass-btn,
[data-experience="learn"] #grow .seg button,
[data-experience="learn"] .wx-next .btn,
[data-experience="learn"] .btn{
  border-radius:999px !important;
  font-family:var(--l-play);
  font-weight:600 !important;
  letter-spacing:0.01em;
}

/* ---- rounder, softer surfaces (playful) -------------------------- */
[data-experience="learn"] .whub-card,
[data-experience="learn"] .soil-detail,
[data-experience="learn"] .wx-card,
[data-experience="learn"] .gloss-detail,
[data-experience="learn"] .season-card,
[data-experience="learn"] .path-map,
[data-experience="learn"] .wx-meter{ border-radius:20px !important; }

/* ---- purple pop accents where the eye lands ---------------------- */
[data-experience="learn"] .home-intro .kick{ color:var(--l-honey-deep); }
[data-experience="learn"] .home-intro .kick::before{ background:var(--l-gold); }
[data-experience="learn"] ::selection{ background:var(--l-pop-soft); color:var(--l-pop-deep); }
[data-experience="learn"] a{ text-underline-offset:3px; }

/* progress + chapter fills → honey→purple sweep (playful energy) */
[data-experience="learn"] .scroll-progress i{
  background:linear-gradient(90deg, var(--l-gold), var(--l-pop)) !important;
}

/* ---- home vineyard: keep the world bands from jumping ------------
   The band chip-row was hover-revealed (max-height 0→60px), which grew
   the hovered band and reflowed its neighbours. Show the chips at all
   times so every band keeps a constant height — stable, no jump. */
[data-experience="learn"] .band-chips{
  max-height:none !important;
  opacity:1 !important;
  margin-top:9px;
}
[data-experience="learn"] .band:hover{ filter:brightness(1.05); box-shadow:inset 0 0 0 2px rgba(255,255,255,.22); }