/* Spexial base — design tokens + dyslexia-friendly defaults
   Accessibility build blockers (council-binding):
   - WCAG AA 4.5:1 contrast · ≥44px targets · focus-visible · no flash >3Hz
   - prefers-reduced-motion honored · in-app Calm mode
   - tinted backgrounds · adjustable spacing · large type
*/
:root{
  /* palette — cream default (dyslexia-friendly), all pairs ≥4.5:1 */
  --bg:#faf5ea; --card:#fffdf7; --ink:#2b2b2b; --muted:#5b564c;
  --brand:#0d5e5e; --brand-ink:#ffffff; --brand-soft:#e2efee;
  --accent:#a34a17; --ok:#2e6b34; --ok-soft:#e3f2e4; --warn-soft:#fdeeee;
  --line:#e6ddc9; --shadow:0 2px 10px rgba(60,50,20,.08);
  --radius:16px; --target:56px; --font-scale:1;
  --letter-space:0.02em; --word-space:0.10em; --line-height:1.65;
  --fs-base:calc(19px * var(--font-scale));
  --t-fast:.18s; --t-med:.32s;
  --motion:1; /* 0 in calm mode */
}
body[data-tint="mint"]{--bg:#eef6ef;--card:#fbfefb;--line:#d9e7db;--muted:#4e5c50}
body[data-tint="white"]{--bg:#ffffff;--card:#ffffff;--line:#e4e4e4;--muted:#555}
body[data-tint="dark"]{--bg:#14202a;--card:#1c2b37;--ink:#eef4f8;--muted:#b6c4cf;--line:#2c3f4f;--brand:#7fd4c9;--brand-ink:#0f2a28;--brand-soft:#24404b;--accent:#ffb37d;--ok:#9fe0a8;--ok-soft:#1f3a2a;--warn-soft:#3a2225;--shadow:0 2px 10px rgba(0,0,0,.4)}
body[data-motion="calm"]{--motion:0}
body[data-tint="dark"] .btn-danger{color:#ffb37d;border-color:#ffb37d}
/* text-size setting → font scale (council: adjustable sizing is an accommodation) */
body[data-textsize="0.9"]{--font-scale:0.9}
body[data-textsize="1"]{--font-scale:1}
body[data-textsize="1.3"]{--font-scale:1.3}
body[data-textsize="1.6"]{--font-scale:1.6}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .breath-circle{animation:none!important}
}
html{font-size:var(--fs-base);-webkit-text-size-adjust:100%}
body{
  font-family:"Noto Sans","Noto Sans Arabic","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:var(--line-height);
  letter-spacing:var(--letter-space);word-spacing:var(--word-space);
  min-height:100vh;padding-bottom:76px;transition:background var(--t-med);
}
img,svg{max-width:100%}
button{font:inherit;letter-spacing:inherit;word-spacing:inherit;color:inherit}
h1,h2,h3{line-height:1.25;font-weight:800}
h1{font-size:1.65rem}h2{font-size:1.2rem}
a{color:var(--brand)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-60px;left:12px;background:var(--brand);color:var(--brand-ink);padding:12px 18px;border-radius:0 0 12px 12px;z-index:100;font-weight:700;text-decoration:none;transition:top var(--t-fast)}
.skip:focus{top:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--brand);color:var(--brand-ink)}

/* ---- safeguarding bar ---- */
.safebar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:8px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--card);
  border-top:2px solid var(--line);box-shadow:0 -2px 12px rgba(0,0,0,.06)}
.safe-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:var(--target);
  border-radius:14px;border:2px solid var(--line);background:var(--bg);font-size:.8rem;font-weight:700;padding:6px 8px;cursor:pointer}
.safe-btn .safe-txt{font-size:.72rem}
.safe-btn:active{transform:scale(.97)}
.safe-help{border-color:#d8b4a0}
.safe-break{border-color:#bcd6c0}
.safe-mid{display:flex;align-items:center;gap:4px;font-weight:800;font-size:1.05rem;padding:0 8px;min-width:74px;justify-content:center}
.safe-star{font-size:1.15rem}

/* ---- panes ---- */
.screen{min-height:100vh}
.pane{display:block;padding:26px 18px 90px;animation:fadein calc(var(--t-med) * var(--motion)) ease}
.pane[hidden]{display:none}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pane-inner{max-width:640px;margin:0 auto}
.pane-wide{max-width:760px;margin:0 auto}
.kicker{color:var(--brand);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;margin-bottom:6px}
.lead{color:var(--muted);font-size:1.02rem;margin:10px 0 18px}
.fine{font-size:.8rem;color:var(--muted);margin-top:16px}
.hint{font-size:.85rem;color:var(--muted)}
.demo-note{background:var(--brand-soft);border-radius:10px;padding:8px 12px;display:inline-block;margin-bottom:10px}

/* ---- onboarding flow nav ---- */
.steps-nav{display:flex;gap:12px;justify-content:space-between;margin-top:26px;flex-wrap:wrap}
.steps-nav.center{justify-content:center}
.btn-back{flex:0 1 auto}

/* ---- forms ---- */
.field{border:2px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;background:var(--card)}
legend{font-weight:800;padding:0 8px;font-size:.95rem}
.lbl{display:block;font-weight:700;margin:8px 0 6px;font-size:.9rem}
.inp{width:100%;min-height:var(--target);border:2px solid var(--line);border-radius:12px;background:var(--bg);
  padding:12px 14px;font-size:1.2rem;letter-spacing:.06em}
.inp:focus{border-color:var(--brand)}
/* dialpad */
.dialpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;max-width:340px}
.key{min-height:64px;border-radius:14px;border:2px solid var(--line);background:var(--card);
  font-size:1.5rem;font-weight:800;cursor:pointer;transition:transform var(--t-fast)}
.key:active{transform:scale(.94)}
.key-del{background:var(--warn-soft)}
.key-ok{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
/* otp */
.otp-row{display:flex;gap:12px;justify-content:center;margin:8px 0}
.otp{width:64px;height:72px;text-align:center;font-size:2rem;border:2px solid var(--line);border-radius:14px;background:var(--bg)}
.otp:focus{border-color:var(--brand)}

/* ---- promise list ---- */
.promise{list-style:none;display:grid;gap:12px;margin:16px 0}
.promise li{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:14px;font-weight:600}
.yesno{display:flex;gap:12px;flex-wrap:wrap}

/* ---- avatars & nicknames ---- */
.avatars{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:12px;margin-top:8px}
.avatar-ch{aspect-ratio:1;min-height:76px;border-radius:16px;border:3px solid var(--line);background:var(--card);
  font-size:2.4rem;display:grid;place-items:center;cursor:pointer;transition:transform var(--t-fast)}
.avatar-ch[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);transform:scale(1.06)}
.nick-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* ---- pin dots ---- */
.pin-dots{display:flex;gap:14px;justify-content:center;margin:6px 0 4px}
.pin-dot{width:22px;height:22px;border-radius:50%;border:3px solid var(--line)}
.pin-dot.on{background:var(--brand);border-color:var(--brand)}

/* ---- assent faces ---- */
.assent-row{display:flex;gap:14px;justify-content:center;margin:22px 0}
.face{flex:1;max-width:170px;min-height:150px;border-radius:20px;border:3px solid var(--line);background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-weight:800;font-size:1.05rem}
.face-emo{font-size:3.2rem;line-height:1}
.face:active{transform:scale(.96)}
.face-mid{border-color:var(--line)}
.face-no{border-color:#d8b4a0}

/* ---- settings ---- */
.set-group{display:grid;gap:14px}
.set-card{border:2px solid var(--line);border-radius:var(--radius);background:var(--card);padding:14px}
.set-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;align-items:center}

/* ---- meet roshni ---- */
.roshni{font-size:4rem;text-align:center;margin-bottom:6px;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
body[data-motion="calm"] .roshni{animation:none}
.meet-game{margin-top:20px}

/* ---- home ---- */
.home-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.home-who{display:flex;align-items:center;gap:12px}
.home-avatar{width:58px;height:58px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;font-size:2rem}
.home-hi{font-weight:800;font-size:1.1rem}
.home-sub{color:var(--muted);font-size:.88rem}
.lesson-list{display:grid;gap:14px}
.lesson{display:flex;align-items:center;gap:14px;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  padding:16px;cursor:pointer;text-align:start;min-height:84px;transition:transform var(--t-fast)}
.lesson:active{transform:scale(.98)}
.lesson .emo{font-size:2.2rem}
.lesson .t{font-weight:800;font-size:1.02rem}
.lesson .s{color:var(--muted);font-size:.85rem}
.lesson .go{margin-inline-start:auto;font-size:1.4rem;color:var(--brand)}
.lesson.done{border-color:var(--ok)}
.lesson .tick{font-size:1.3rem;color:var(--ok)}
.home-foot{margin-top:22px;display:flex;justify-content:center}

/* ---- exercise ---- */
.ex-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ex-progress{font-weight:800;color:var(--muted)}
.ex-title{text-align:center;font-size:1.3rem;margin:6px auto 4px}
.ex-media .hint{text-align:left}
.ex-media p.ex-word{text-align:center}
.ex-media{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center;margin:12px 0}
.ex-word{font-size:4rem;font-weight:800;letter-spacing:.08em}
.ex-word .w{padding:2px 4px;border-radius:8px;transition:background var(--t-fast)}
.ex-word .w.now{background:var(--brand);color:var(--brand-ink)}
.ex-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:14px 0}
.ch{min-height:96px;border-radius:16px;border:3px solid var(--line);background:var(--card);
  font-size:1.6rem;font-weight:800;padding:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ch .ch-sub{font-size:.8rem;color:var(--muted);font-weight:600}
.ch:active{transform:scale(.96)}
.ch.right{border-color:var(--ok);background:var(--ok-soft)}
.ch.gently{animation:wiggle .5s ease}
@keyframes wiggle{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
body[data-motion="calm"] .ch.gently{animation:none;border-color:var(--accent)}
.ex-feedback{text-align:center;min-height:34px;font-weight:800;font-size:1.05rem}
.ex-media .hint,.grown-card .hint{text-align:left}
.ex-feedback.ok{color:var(--ok)}
.ex-feedback.try{color:var(--accent)}
.ex-controls{display:flex;gap:12px;justify-content:center;margin-top:10px;flex-wrap:wrap}

/* ---- celebrate ---- */
.done-inner{text-align:center}
.done-star{font-size:5rem;animation:pop .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
body[data-motion="calm"] .done-star{animation:none}

/* ---- grownups ---- */
.grown-card{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.grown-stats{display:grid;gap:8px;margin-top:8px}
.grow-row{display:flex;justify-content:space-between;font-size:.95rem}
.grow-row b{color:var(--brand)}

/* ---- overlays ---- */
.overlay{position:fixed;inset:0;z-index:90;background:rgba(15,25,30,.55);display:grid;place-items:center;padding:20px;backdrop-filter:blur(2px)}
.overlay[hidden]{display:none}
.overlay-card{background:var(--card);border-radius:22px;padding:28px 22px;max-width:420px;width:100%;text-align:center;box-shadow:var(--shadow)}
.overlay-card h2{margin-bottom:8px}
.overlay-card .btn{margin-top:8px}
.overlay-card .btn + .btn{margin-inline-start:8px}
.breath{margin:18px auto;width:150px;height:150px;display:grid;place-items:center}
.breath-circle{width:110px;height:110px;border-radius:50%;background:var(--brand-soft);border:4px solid var(--brand);
  animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.75)}50%{transform:scale(1.15)}}
.help-choices{display:grid;gap:10px;margin:16px 0}
.help-ch{min-height:var(--target);border-radius:14px;border:2px solid var(--line);background:var(--bg);
  font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;text-align:start}
.help-ch span[aria-hidden]{font-size:1.6rem}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:12px 20px;border-radius:999px;font-weight:700;z-index:99;max-width:90%;text-align:center;box-shadow:var(--shadow)}
.toast[hidden]{display:none}

@media(min-width:720px){
  .pane{padding-top:44px}
  .assent-row{max-width:640px;margin-inline:auto}
}