/* SaySoKids shared styles
   Loaded by every page before its own inline <style>, so a page can still
   override anything here. Holds the design tokens plus the four components
   that used to be copy-pasted into all 19 files: the site nav, the site
   footer, the "?" help card, and the grown-up lock. */

:root{
  --bg:#FFF9F2; --ink:#2B2A38; --muted:#736E7D;
  --teal:#1C766B; --teal-d:#145A52;
  --blue:#2A6FB8;
  --coral:#CC4028; --coral-d:#9E2E1A;
  --sunny:#FBC23D; --sunny-d:#E0A21C;
  --green:#8DC63F; --purple:#8E6FD0;
  --card:#FFFFFF; --line:#EFE6DA; --groove:#ECE6F7;
}

/* ---------- focus + skip link ---------- */
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--teal);color:#fff;
  font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:15px;padding:12px 18px;
  border-radius:0 0 12px 0;text-decoration:none;}
.skip-link:focus{left:0;}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ---------- shared site nav + footer (content pages) ---------- */
.sitenav{position:sticky;top:0;z-index:20;background:rgba(255,249,242,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;}
.sitenav .nav-logo img{height:34px;width:auto;display:block;}
.sitenav .nav-links{display:flex;gap:4px;flex-wrap:wrap;align-items:center;justify-content:flex-end;}
.sitenav .nav-links a{font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;color:var(--muted);
  text-decoration:none;padding:7px 10px;border-radius:10px;white-space:nowrap;}
.sitenav .nav-links a:hover{color:var(--ink);background:rgba(43,42,56,.05);}
.sitenav .nav-links a.on{color:var(--teal);background:#E9F8F5;}
.sitenav .nav-links a:focus-visible,.sitenav .nav-logo:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.site-footer{border-top:1px solid var(--line);margin-top:40px;padding:26px 20px;text-align:center;
  color:var(--muted);font-weight:600;font-size:13px;line-height:1.7;font-family:'Nunito',sans-serif;}
.site-footer p{margin:6px 0;}
.site-footer .foot-links{font-weight:800;}
.site-footer a{color:var(--muted);text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}
@media (max-width:560px){
  .sitenav{padding:8px 12px;}
  .sitenav .nav-links a{padding:6px 7px;font-size:13px;}
  .sitenav .nav-logo img{height:30px;}
}

/* ---------- help card ("?" on every tool) ---------- */
.help-scrim{position:fixed;inset:0;background:rgba(43,42,56,.45);display:none;z-index:60;
  align-items:center;justify-content:center;padding:20px;}
.help-scrim.open{display:flex;}
.help-card{background:#fff;border-radius:22px;max-width:430px;width:100%;max-height:88vh;
  overflow-y:auto;padding:24px 22px 18px;box-shadow:0 20px 60px rgba(0,0,0,.25);
  font-family:'Nunito',system-ui,sans-serif;}
.help-card h2{font-weight:800;margin:0 0 8px;font-size:23px;color:var(--ink);}
.help-card .what{font-size:16px;color:var(--ink);font-weight:600;margin:0 0 14px;line-height:1.5;}
.help-card ol{margin:0 0 14px;padding-left:22px;}
.help-card li{font-size:15px;color:#5b5667;margin-bottom:8px;line-height:1.45;}
.help-card .tip{background:#FFF7E4;border-radius:12px;padding:11px 13px;font-size:14px;
  font-weight:700;color:#7a611c;margin-bottom:16px;}
.help-card .coach{background:#F7F4EE;border-radius:14px;padding:13px 15px;margin-bottom:14px;}
.help-card .coach .ch{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:1px;
  color:var(--muted);margin-bottom:8px;}
.help-card .coach p{margin:0 0 7px;font-size:14px;color:#4f4a59;line-height:1.45;}
.help-card .coach p:last-child{margin-bottom:0;}
.help-card .coach b{color:var(--ink);}
.help-card .gotit{width:100%;border:none;border-radius:16px;background:var(--teal);color:#fff;
  font-weight:800;font-size:17px;padding:14px;cursor:pointer;font-family:'Nunito',sans-serif;
  box-shadow:0 4px 0 var(--teal-d);}
.help-card .gotit:active{transform:translateY(2px);box-shadow:0 2px 0 var(--teal-d);}

/* gear "look at me" pulse, until a grown-up has opened settings once */
@keyframes gearpulse{
  0%{box-shadow:0 2px 0 var(--line),0 0 0 0 rgba(28,118,107,.5);}
  70%{box-shadow:0 2px 0 var(--line),0 0 0 13px rgba(28,118,107,0);}
  100%{box-shadow:0 2px 0 var(--line),0 0 0 0 rgba(28,118,107,0);}
}
.gear.pulse{animation:gearpulse 1.8s ease-out infinite;}

/* ---------- grown-up lock ---------- */
.lock-scrim{position:fixed;inset:0;background:rgba(43,42,56,.5);display:none;z-index:70;
  align-items:center;justify-content:center;padding:20px;}
.lock-scrim.open{display:flex;}
.lock-card{background:#fff;border-radius:22px;max-width:340px;width:100%;padding:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);text-align:center;
  font-family:'Nunito',system-ui,sans-serif;}
.lock-title{font-weight:800;font-size:20px;margin-bottom:4px;color:var(--ink);}
.lock-sub{color:var(--muted);font-size:13px;margin:0 0 12px;line-height:1.4;}
.lock-q{font-size:22px;font-weight:800;margin:4px 0 12px;color:var(--ink);}
.lock-in{width:150px;text-align:center;font-size:24px;font-weight:800;padding:10px;
  border:2px solid var(--line);border-radius:12px;font-family:'Nunito',sans-serif;color:var(--ink);}
.lock-msg{min-height:18px;color:#C0341A;font-weight:700;font-size:13px;margin:8px 0;}
.lock-btns{display:flex;gap:10px;margin-top:6px;}
.lock-btn{flex:1;border:none;border-radius:12px;padding:12px;font-weight:800;
  font-family:'Nunito',sans-serif;font-size:15px;cursor:pointer;background:var(--teal);color:#fff;
  box-shadow:0 3px 0 var(--teal-d);}
.lock-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--teal-d);}
.lock-btn.ghost{background:#fff;color:var(--ink);box-shadow:0 3px 0 var(--line);}

/* ---------- storage warning (shown if the device refuses to save) ---------- */
.ssk-storage-warn{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:90;max-width:min(420px,92vw);
  background:#FFF3CD;border:2px solid #E0A21C;border-radius:14px;padding:12px 14px;
  font-family:'Nunito',system-ui,sans-serif;font-size:13.5px;font-weight:700;color:#6B4E00;
  box-shadow:0 8px 24px rgba(0,0,0,.18);line-height:1.45;display:flex;gap:10px;align-items:flex-start;}
.ssk-storage-warn button{flex:0 0 auto;border:none;background:transparent;font-size:18px;
  line-height:1;cursor:pointer;color:#6B4E00;padding:0 2px;}

@media (prefers-reduced-motion: reduce){
  .gear.pulse{animation:none;}
  .help-card .gotit:active,.lock-btn:active{transform:none;}
}