/* ════════════════════════════════════════════════════════════════
   צעדים קדימה — מערכת עיצוב לחינוך מיוחד
   עקרונות: צפוי ועקבי · מטרות לחיצה גדולות · ניגודיות גבוהה ·
   צבע = משמעות קבועה · אפשרות להפחית גירויים בכל רגע
════════════════════════════════════════════════════════════════ */
:root{
  --bg:#FFF8EC; --bg2:#FFF1DA; --card:#FFFFFF; --ink:#1F2A44; --ink2:#36415F; --mut:#5B6478; --line:#EADFC9;
  --blue:#4D7CFE; --blue-d:#2F5BE0; --mint:#2EC4A1; --mint-d:#16917A; --sun:#FFC83D; --orange:#FF9F45; --pink:#FF6B8B; --grape:#9B6DFF; --sky:#38BDF8;
  --good:#1C9C6E; --goodbg:#E2F7EE; --try:#B86E00; --trybg:#FFF1D6;
  --r1:14px; --r2:20px; --r3:28px; --r4:36px;
  --sh1:0 2px 0 rgba(31,42,68,.06),0 10px 24px -14px rgba(31,42,68,.25);
  --sh2:0 3px 0 rgba(31,42,68,.08),0 24px 40px -22px rgba(31,42,68,.35);
  --ease:cubic-bezier(.16,1,.3,1);
  --font:'Rubik','Heebo',Arial,sans-serif;
}
html{font-size:17px;-webkit-text-size-adjust:100%}
html.t1{font-size:19.5px} html.t2{font-size:22.5px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55;min-height:100vh;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
button,input{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img,svg{max-width:100%}
:focus-visible{outline:4px solid #1F2A44;outline-offset:3px;border-radius:12px;box-shadow:0 0 0 7px #FFC83D}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.emo{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--font);line-height:1}

/* ── מצבי נגישות ── */
html.sp body{letter-spacing:.035em;word-spacing:.14em;line-height:1.95}
html.calm body{--blue:#7C93D6;--mint:#6FB5A3;--sun:#E7C887;--orange:#E2B080;--pink:#DDA0AE;--grape:#A99BD3;--sky:#8DBBD6;--bg:#F7F4EE}
html.calm .calm-filter{filter:saturate(.55)}
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.hc body{--bg:#fff;--bg2:#fff;--card:#fff;--ink:#000;--ink2:#000;--mut:#111;--line:#000;--sh1:none;--sh2:none}
html.hc .hc-border,html.hc .card,html.hc .sp-sheet,html.hc button.opt,html.hc .chip{border:3px solid #000!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ── כפתורים ── */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;border-radius:999px;font-weight:700;font-size:1.05rem;background:var(--blue);color:#fff;box-shadow:0 4px 0 var(--blue-d),0 14px 24px -14px rgba(47,91,224,.8);transition:transform .2s var(--ease),box-shadow .2s}
.sp-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--blue-d)}
.sp-btn.big{min-height:64px;font-size:1.2rem;padding:0 32px}
.sp-btn.ghost{background:#fff;color:var(--ink);box-shadow:0 0 0 2px var(--line) inset}
.sp-btn.mint{background:var(--mint);box-shadow:0 4px 0 var(--mint-d),0 14px 24px -14px rgba(22,145,122,.8)}
.sp-btn[disabled]{background:#E7E1D4;color:#8C8473;box-shadow:none;cursor:not-allowed}
.icon-btn{width:56px;height:56px;border-radius:18px;display:inline-grid;place-items:center;background:#fff;box-shadow:var(--sh1),0 0 0 2px var(--line) inset;font-size:1.25rem;color:var(--ink);transition:transform .2s var(--ease)}
.icon-btn.on,.tool.on{background:var(--ink);color:#fff}
.tool{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:68px;height:62px;padding:0 10px;border-radius:18px;background:#fff;box-shadow:var(--sh1),0 0 0 2px var(--line) inset;font-weight:700;font-size:.74rem;color:var(--ink)}
.tool .e{font-size:1.45rem}
@media (hover:hover) and (pointer:fine){.sp-btn:hover,.icon-btn:hover,.tool:hover{transform:translateY(-2px)}}

/* ── הדמות ── */
.mascot{display:block;overflow:visible}
.mascot .m-eyes{transform-origin:80px 72px;animation:blink 5s infinite}
.mascot .m-wing-r{transform-origin:128px 92px;animation:wave 3.2s ease-in-out infinite}
.mascot.mini{width:44px;height:46px;flex:none}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes wave{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-14deg)}90%{transform:rotate(6deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── הודעה קופצת ── */
.sp-toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,30px);opacity:0;z-index:9000;display:flex;align-items:center;gap:12px;padding:10px 22px 10px 14px;border-radius:999px;background:#fff;box-shadow:var(--sh2),0 0 0 3px var(--mint) inset;font-weight:700;font-size:1.15rem;transition:all .35s var(--ease);pointer-events:none;max-width:92vw}
.sp-toast.try{box-shadow:var(--sh2),0 0 0 3px var(--sun) inset}
.sp-toast.on{opacity:1;transform:translate(-50%,0)}

/* ── קונפטי ── */
#sp-conf{position:fixed;inset:0;pointer-events:none;z-index:9500;overflow:hidden}
#sp-conf i{position:absolute;top:-20px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}

/* ── חלונות ── */
.sp-ov{position:fixed;inset:0;z-index:8000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(31,42,68,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .2s}
.sp-ov.on{opacity:1}
.sp-sheet{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--bg);border-radius:var(--r4);padding:22px;box-shadow:0 40px 90px -30px rgba(31,42,68,.6);transform:translateY(16px) scale(.98);transition:transform .35s var(--ease)}
.sp-ov.on .sp-sheet{transform:none}
.sp-sheet.sp-wide{width:min(900px,100%)}
.sp-sheet-h{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.sp-sheet-h h2{font-size:1.5rem;font-weight:800;line-height:1.2}
.sp-sheet-h p{color:var(--mut);font-size:.95rem}
.sp-ico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:1.7rem;background:color-mix(in srgb,var(--c) 18%,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 35%,transparent) inset;flex:none}
.sp-x{margin-inline-start:auto;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--line) inset;font-size:1.2rem;flex:none}

/* AAC */
.aac-strip{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r2);padding:10px 10px 10px 16px;box-shadow:0 0 0 2px var(--line) inset;margin-bottom:14px}
.aac-say{flex:1;font-weight:700;font-size:1.2rem}
.aac-g{margin-bottom:14px}
.aac-g h3{font-size:1rem;font-weight:800;color:var(--ink2);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.aac-g h3::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--c)}
.aac-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.aac-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:104px;padding:10px 6px;border-radius:var(--r2);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent) inset,var(--sh1);font-weight:700;font-size:.95rem;transition:transform .2s var(--ease)}
.aac-tile .e{font-size:2.4rem;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.aac-tile.on{background:color-mix(in srgb,var(--c) 18%,#fff);box-shadow:0 0 0 4px var(--c) inset}
@media (max-width:720px){.aac-grid{grid-template-columns:repeat(3,1fr)}}

/* פינת הרגעה */
.calm-sheet{background:linear-gradient(180deg,#EAF7F2,#F3F0FF)}
.calm-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.calm-tabs button{min-height:50px;padding:0 18px;border-radius:999px;background:#fff;font-weight:700;box-shadow:0 0 0 2px var(--line) inset}
.calm-tabs button.on{background:var(--ink);color:#fff}
.calm-pane{display:none;text-align:center;padding:6px 0 4px}
.calm-pane.on{display:block}
.breath{position:relative;height:300px;display:grid;place-items:center}
.breath-ball{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.2rem;background:radial-gradient(circle at 35% 30%,#8FE3CD,#2EC4A1);box-shadow:0 20px 50px -14px rgba(46,196,161,.8);animation:breathe 8s ease-in-out infinite}
.breath-ring{position:absolute;width:250px;height:250px;border-radius:50%;border:3px dashed rgba(46,196,161,.45)}
@keyframes breathe{0%,100%{transform:scale(.8)}50%{transform:scale(1.55)}}
.calm-note{color:var(--ink2);font-size:1.02rem;max-width:420px;margin:0 auto}
.count-row{display:flex;justify-content:center;gap:12px;margin:30px 0}
.count-n{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.8rem;font-weight:800;background:#fff;box-shadow:0 0 0 3px var(--line) inset;transition:all .4s var(--ease)}
.count-n.on{background:var(--mint);color:#fff;transform:scale(1.15);box-shadow:0 10px 24px -10px rgba(46,196,161,.9)}
.bubbles{position:relative;height:300px;border-radius:var(--r3);background:rgba(255,255,255,.55);overflow:hidden;margin-bottom:10px}
.bub{position:absolute;border-radius:50%;box-shadow:inset -4px -6px 12px rgba(0,0,0,.06),0 6px 14px -8px rgba(31,42,68,.3);animation:bob 6s ease-in-out infinite;transition:transform .25s,opacity .25s}
.bub.pop{transform:scale(1.5);opacity:0}
.calm-done{width:100%;margin-top:12px;background:var(--mint);box-shadow:0 4px 0 var(--mint-d)}

/* נגישות */
.a11y-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:var(--r2);background:#fff;margin-bottom:8px;box-shadow:0 0 0 2px var(--line) inset;min-height:64px}
.a11y-row > span{flex:1;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.a11y-row > span i{grid-row:span 2;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--bg2);color:var(--ink)}
.a11y-row b{font-weight:800}
.a11y-row small{color:var(--mut);font-size:.85rem;grid-column:2}
.a11y-row > span:not(:has(i)) b,.a11y-row > span:not(:has(i)) small{grid-column:1/-1}
.tgl{cursor:pointer}
.tgl input{position:absolute;opacity:0;width:1px;height:1px}
.tgl .sw{width:60px;height:34px;border-radius:999px;background:#D9D1C1;position:relative;transition:background .2s;flex:none}
.tgl .sw::after{content:"";position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
.tgl input:checked + .sw{background:var(--mint)}
.tgl input:checked + .sw::after{transform:translateX(-26px)}
.tgl input:focus-visible + .sw{outline:4px solid #1F2A44;outline-offset:3px}
.seg{display:flex;gap:6px;background:var(--bg2);padding:5px;border-radius:999px}
.seg button{width:52px;height:46px;border-radius:999px;font-weight:800}
.seg button.on{background:var(--ink);color:#fff}