/* Storyleap — shared chrome: menu bar, mobile drawer, phonics pill.
   Spacing follows the same 8-point scale as the pages. Self-contained so the
   dark trial/admin pages and the light kids pages both get a usable menu. */
:root{
  --slc-s1:8px; --slc-s2:16px; --slc-s3:24px; --slc-s4:32px; --slc-s5:40px;
  --slc-ink:#1D1A38; --slc-sun:#FFC02E; --slc-sun-ink:#6B4A00; --slc-coral:#FF6A57;
  --slc-tap:48px;
}

/* ------------------------------------------------------------------ the bar
   Only injected on pages without their own nav. */
.sl-bar{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:var(--slc-s2);
  padding:var(--slc-s2) var(--slc-s3);
  padding-top:max(var(--slc-s2),env(safe-area-inset-top));
  background:rgba(255,249,240,.86);backdrop-filter:blur(12px);
  border-bottom:2px solid rgba(29,26,56,.07)}
.sl-brand{display:flex;align-items:center;gap:var(--slc-s1);text-decoration:none;
  font-family:"Baloo 2",Nunito,system-ui,sans-serif;font-weight:800;font-size:20px;color:var(--slc-ink)}
.sl-brand i{width:var(--slc-s4);height:var(--slc-s4);border-radius:var(--slc-s2);display:grid;
  place-items:center;color:#fff;font-style:normal;font-size:17px;
  background:linear-gradient(140deg,var(--slc-coral),var(--slc-sun))}
.sl-barlinks{display:none;gap:var(--slc-s3);font-family:Nunito,system-ui,sans-serif;font-weight:700;font-size:15px}
.sl-barlinks a{color:#4A4570;text-decoration:none}
.sl-barlinks a:hover{color:var(--slc-ink)}
.sl-cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:var(--slc-s1) var(--slc-s3);border-radius:999px;text-decoration:none;
  font-family:"Baloo 2",Nunito,system-ui,sans-serif;font-weight:800;font-size:16px;
  background:var(--slc-sun);color:var(--slc-sun-ink);box-shadow:0 var(--slc-s1) 0 #D89A00}
/* Pages we inject a bar into need room for it. */
.sl-has-bar body{padding-top:72px}
@media (min-width:980px){.sl-barlinks{display:flex}}

/* --------------------------------------------------------------- the burger
   Phones/tablets only. Sits opposite the brand, clear of any page CTA. */
.sl-burger{position:fixed;z-index:70;top:max(var(--slc-s1),env(safe-area-inset-top));right:var(--slc-s1);
  width:var(--slc-tap);height:var(--slc-tap);display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  background:rgba(255,249,240,.92);border:2px solid rgba(29,26,56,.10);
  border-radius:var(--slc-s2);cursor:pointer;box-shadow:0 4px 0 rgba(29,26,56,.10)}
.sl-burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--slc-ink);
  transition:transform .25s ease,opacity .2s ease}
.sl-menu-open .sl-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sl-menu-open .sl-burger span:nth-child(2){opacity:0}
.sl-menu-open .sl-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:979px){.sl-burger{display:flex}}

/* ---------------------------------------------------------------- drawer */
.sl-scrim{position:fixed;inset:0;z-index:65;background:rgba(29,26,56,.48);backdrop-filter:blur(2px)}
.sl-drawer{position:fixed;z-index:66;top:0;right:0;height:100%;width:min(320px,86vw);
  transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.9,.3,1);
  background:#FFF9F0;box-shadow:-8px 0 40px rgba(29,26,56,.24);
  padding:calc(var(--slc-s5) + env(safe-area-inset-top)) var(--slc-s3) var(--slc-s4);
  overflow-y:auto}
.sl-menu-open .sl-drawer{transform:none}
.sl-drawer-in{display:grid;gap:var(--slc-s1)}
.sl-drawer-in a{display:flex;align-items:center;min-height:var(--slc-tap);
  padding:var(--slc-s1) var(--slc-s2);border-radius:var(--slc-s2);text-decoration:none;
  font-family:"Baloo 2",Nunito,system-ui,sans-serif;font-weight:800;font-size:19px;color:var(--slc-ink)}
.sl-drawer-in a:hover{background:rgba(29,26,56,.05)}
.sl-drawer-in .sl-cta{margin-top:var(--slc-s3);justify-content:center;font-size:18px}
@media (min-width:980px){.sl-drawer,.sl-scrim{display:none}}

/* ------------------------------------------------------------ phonics pill */
.sl-audio-pill{position:fixed;z-index:60;right:var(--slc-s3);
  bottom:calc(var(--slc-s3) + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:var(--slc-s1);min-height:var(--slc-tap);
  padding:0 var(--slc-s3);cursor:pointer;
  font-family:"Space Mono",ui-monospace,monospace;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,249,240,.92);color:#4A4570;
  border:2px solid rgba(29,26,56,.12);border-radius:999px;
  box-shadow:0 var(--slc-s1) 0 rgba(29,26,56,.10);backdrop-filter:blur(10px)}
.sl-audio-pill[aria-pressed="true"]{background:var(--slc-sun);color:var(--slc-sun-ink);
  border-color:rgba(0,0,0,.08);box-shadow:0 var(--slc-s1) 0 #D89A00}
.sl-audio-pill:active{transform:translateY(3px);box-shadow:0 4px 0 rgba(29,26,56,.10)}
@media (prefers-reduced-motion:reduce){.sl-drawer,.sl-burger span{transition:none}}

.sl-brand i{display:none}