/* ═══ פונטים ═══ היו נטענים מ-Google. ההערה שעמדה כאן קודם תיארה תיקון crossorigin שנועד לאפשר ל-service worker לשמור אותם · אבל sw.js דוחה כל בקשה חוצת-מקור בשני שערים נפרדים (origin שונה, ו-type!=='basic'), ולכן הפונטים מעולם לא נשמרו והממשק נפל לפונט מערכת בכל פתיחה אופליין. באפליקציה שמבטיחה עבודה אופליין. עכשיו הם same-origin ונכנסים ל-cache בלי לגעת ב-fetch handler בכלל. שישה קבצים, 152KB. פחות ממה שנראה, משתי סיבות: · שניהם פונטים משתנים · קובץ אחד נושא את כל טווח המשקלים. Google הגישה בדיוק את אותו קובץ לכל אחד מהמשקלים שביקשנו; 24 הצהרות היו 8 קבצים ייחודיים. · Heebo 300 ו-Frank Ruhl Libre 500 נטענו ולא היו בשימוש באף כלל CSS. לא ירדו. בונוס מהטווח הרציף: font-weight:600 בכפתור ההתחברות (‏.au-tabs) נטען היום כ-700 כי 600 לא הוזמן מעולם. עכשיו הוא מקבל 600 אמיתי. math ו-symbols של Heebo לא ירדו · סימני מתמטיקה, אין להם תו באפליקציה. */ @font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:400 900;font-display:swap; src:url(fonts/frank-ruhl-libre-hebrew.woff2) format('woff2'); unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;} @font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:400 900;font-display:swap; src:url(fonts/frank-ruhl-libre-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:400 900;font-display:swap; src:url(fonts/frank-ruhl-libre-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Heebo';font-style:normal;font-weight:400 700;font-display:swap; src:url(fonts/heebo-hebrew.woff2) format('woff2'); unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;} @font-face{font-family:'Heebo';font-style:normal;font-weight:400 700;font-display:swap; src:url(fonts/heebo-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Heebo';font-style:normal;font-weight:400 700;font-display:swap; src:url(fonts/heebo-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} :root{ --paper:#f6f1e7; --paper-deep:#efe7d6; --card:#fffdf8; --ink:#2c2620; --ink-soft:#5e564a; /* היה #736a5c = 4.32:1 על --paper-deep, מתחת ל-AA; עכשיו עובר גם שם */ --gold:#c9962f; --gold-ink:#76560f; --accent:#b5482e; --accent-deep:#8f3620; --green:#437147; --line:#e3d8c4; --shadow:0 10px 30px -14px rgba(90,60,20,.4); /* ===== עומק · נוסף 21.8.2026 ===== ⭐ המודל לא הומצא כאן. מסך ההתחברות כבר החזיק אותו במלואו · כיוון אור אחד, קו ספקולרי פנימי, ושקעים אמיתיים · והוא היה כלוא שם. שאר האפליקציה קיבלה טוקן אחד (--shadow, 13 שימושים) ועוד 27 צללים ייחודיים בלי כיוון אור משותף, ולכן הכרטיסים נקראו כמודבקים ולא כמונחים. ⛔ חם בלבד. צל אפור על שמנת נקרא כלכלוך · זה כתוב בהערה במסך ההתחברות. ⭐ הקו הלבן הפנימי הוא מה שעושה את העבודה: הוא ההבדל בין מלבן לבין משטח מואר, והוא עולה אפס. */ --lift-1:inset 0 1px 0 rgba(255,255,255,.90), 0 1px 2px rgba(120,84,48,.07); --lift-2:inset 0 1px 0 rgba(255,255,255,.92), 0 1px 2px rgba(120,84,48,.09), 0 8px 18px -12px rgba(120,84,48,.28); /* ⭐ ההפך ממורם · שקוע. שתי רמות (מורם מול שקוע) נקראות עמוק יותר משלוש רמות של מורם, וזה החצי שלא היה בשימוש בשום מקום מחוץ למסך ההתחברות. */ --well:inset 0 2px 4px rgba(120,84,48,.11), inset 0 -1px 0 rgba(255,255,255,.70); } *{box-sizing:border-box;margin:0;padding:0} /* ⭐ 21.9.2026 · board308 חלק 1: היה height:100% על שניהם, ולכן הקופסה של ה-body עצמו (וכל רקע שמצויר עליה, כולל הילות המסכים) נעצרת בגובה החלון (100% = viewport) ולא גדלה עם התוכן שגולש מתחתיה. בעמוד שגובהו האמיתי גדול מהחלון (רוב המסכים) הרקע נחתך בדיוק בשולי המסך הראשון, וכל מה שמתחתיו חוזר לנייר חלק. min-height נותן לקופסה רצפה של גובה המסך אבל מרשה לה לגדול איתו, כמו שכל שאר האתר כבר מניח שהיא עושה. */ html,body{min-height:100%} /* ⭐ 2.10.2026 · screens-fix · «רקע שנגמר בקו לפני הקצה הימני» (צילומי ספארי): אלמנט רחב מהמסך (המייל המלא בכפתור השם בבית) מרחיב את הדף, וספארי מצייר את הרקע רק לרוחב החלון המקורי. הדף לא יכול להתרחב הצידה, וכל מה שגולש נחתך בקצה ולא מושך את הרקע. clip אחרי hidden: דפדפן ישן שאינו מכיר clip נשאר עם hidden. */ html{overflow-x:hidden;overflow-x:clip} body{ font-family:"Heebo",sans-serif;background:var(--paper);color:var(--ink); line-height:1.5;-webkit-tap-highlight-color:transparent; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* ===== תגובת לחיצה · נוסף 21.8.2026 ===== ⛔ הליקוי, מדוד: בגיליון היו **אפס** כללי `:active`, מול **42** כללי `:hover` שכולם יושבים מאחורי `@media (hover:hover) and (pointer:fine)` · שאילתה שאינה נכונה בשום טלפון. יחד עם `-webkit-tap-highlight-color:transparent` בשורה 60, שמבטל גם את המשוב של הדפדפן עצמו, התוצאה היא ש**שום לחיצה בטלפון לא ייצרה תגובה ויזואלית**. רוב הלומדים כאן על טלפון. ⭐ 90ms נמצא בתוך חלון 80-150 שהמדריך קובע למשוב לחיצה. ⭐ `transform` בלבד ולא `translateY` או `padding`: הוא אינו משנה פריסה, ולכן שכן אינו זז כשלוחצים · זה מה שהופך משוב לתחושה ולא לקפיצה. */ .btn,.pbtn,.tile,.big-tile,.lang-card,.lp-card,.install-cta,.seg button,.s-opt, .lv-opts button,.ask-opts button,.fb-kinds button,.m-head, .rev-chip,.cw,.wc-prac,.wc-alt,.wc-reveal,.hint-btn,.was-right{ transition:transform .09s cubic-bezier(.25,.46,.45,.94), box-shadow .2s cubic-bezier(.215,.61,.355,1), border-color .2s cubic-bezier(.215,.61,.355,1), background-color .2s cubic-bezier(.215,.61,.355,1)} .btn:not(:disabled):active,.pbtn:not(:disabled):active,.tile:active,.big-tile:active, .lang-card:active,.lp-card:active,.install-cta:active,.seg button:active, .s-opt:not(:disabled):active,.lv-opts button:not(:disabled):active, .ask-opts button:not(:disabled):active,.fb-kinds button:active, .m-head:active,.rev-chip:active,.cw:active, .wc-prac:active,.wc-alt:active,.wc-reveal:active,.hint-btn:active,.was-right:active{ transform:scale(.978)} @media (prefers-reduced-motion:reduce){ .btn:active,.pbtn:active,.tile:active,.big-tile:active,.lang-card:active, .lp-card:active,.install-cta:active,.seg button:active,.s-opt:active, .lv-opts button:active,.ask-opts button:active,.fb-kinds button:active, .m-head:active,.rev-chip:active,.cw:active, .wc-prac:active,.wc-alt:active,.wc-reveal:active,.hint-btn:active,.was-right:active{ transform:none;background-color:var(--paper-deep)}} /* ⭐ גרעין נייר · ~400 בתים, data URI, אלפא בלבד ובלי שום צבע חדש. האסתטיקה היא נייר חם ולא היה לה שום מרקם · זה הדבר היחיד כאן שנותן לרקע גוף. z-index:-1 ו-pointer-events:none · הוא אינו יכול לחסום לחיצה. ⚠ #auth יושב ב-z-index:70 ולכן ממילא מעליו. */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")} .wrap{max-width:640px;margin:0 auto;padding:22px 18px 60px} /* ספארי באייפון, כשהאפליקציה פתוחה כאתר ולא כאפליקציה מותקנת. שורת הכתובת התחתונה של ספארי מרחפת מעל התוכן ואינה נכללת ב-env(safe-area-inset-bottom) כשהיא מוצגת, ולכן 60px מלמטה לא הספיקו: הכפתור התחתון בתרגול · "הבא ←" · נחתך בדיוק על ידה. דווח על ידי משתמש (5.8.2026). המחלקה נקבעת ב-JS (isIOS && !isStandalone) ולא רק ב-@media (display-mode: browser), כי אותה שאילתה אינה נתמכת בגרסאות iOS ישנות · ושם בדיוק הבעיה חיה. ההוספה היא לגובה הגלילה בלבד: כך הגבול התחתון של הדף הוא מה שמסתתר מאחורי שורת הכתובת, ולא הכפתור. */ body.ios-web .wrap{padding-bottom:calc(60px + 68px)} .hidden{display:none!important} /* For text that only a screen reader should get. NOT display:none and NOT visibility:hidden -- both of those remove the node from the accessibility tree, which would make a live region announce nothing at all. The clip-rect technique keeps it in the tree at zero visual size. */ .sr-only{position:absolute!important;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} h1,h2,h3{font-family:"Frank Ruhl Libre",serif} /* #76560f (הערך של --gold-ink, הוכהה מ-#8a6512 ב-2.10) ולא --gold: הזהב #c9962f על הנייר = 2.36:1, מתחת ל-AA גם לטקסט גדול. */ .kicker{font-size:.72rem;letter-spacing:.22em;color:#76560f;font-weight:700;text-transform:uppercase} .rule{height:2px;background:linear-gradient(90deg,var(--gold),transparent);margin:10px 0 20px;border-radius:2px} button{font-family:inherit;cursor:pointer} /* top bar */ .topbar{display:flex;align-items:center;gap:10px;margin-bottom:12px} .topbar .back{background:transparent;border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-weight:500;color:var(--ink-soft)} @media (hover:hover) and (pointer:fine){.topbar .back:hover{border-color:var(--ink-soft);color:var(--ink)}} .topbar .sp{flex:1} .brand{font-family:"Frank Ruhl Libre",serif;font-weight:900;font-size:1.15rem} /* buttons */ .btn{font-family:"Heebo";font-weight:700;font-size:1rem;border:none;border-radius:14px;padding:15px 22px;transition:transform .18s,scale .18s,opacity .18s,color .18s,background-color .18s,border-color .18s,box-shadow .18s,fill .18s,stroke .18s,filter .18s} .btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:#fff;box-shadow:var(--shadow)} /* not gold→rust: white on gold measured 2.66:1, below AA */ @media (hover:hover) and (pointer:fine){.btn-primary:hover{transform:translateY(-2px)}} .btn-primary:disabled{opacity:.45;transform:none;box-shadow:none;cursor:not-allowed} .btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink-soft)} @media (hover:hover) and (pointer:fine){.btn-ghost:hover{border-color:var(--ink-soft);color:var(--ink)}} .btn-danger{background:var(--accent);color:#fff} .btn-block{display:block;width:100%} .row{display:flex;gap:10px} .row>*{flex:1} /* segmented direction control */ .seg{display:flex;gap:6px;background:var(--paper-deep);border:1px solid var(--line);border-radius:12px;padding:5px} .seg button{flex:1;border:none;background:transparent;color:var(--ink-soft);font-family:"Heebo";font-weight:700;font-size:.82rem;padding:9px 5px;border-radius:8px;transition:transform .15s,scale .15s,opacity .15s,color .15s,background-color .15s,border-color .15s,box-shadow .15s,fill .15s,stroke .15s,filter .15s} .seg button.active{background:linear-gradient(180deg,var(--gold-ink),var(--accent));color:#fff;box-shadow:var(--shadow)} /* WELCOME */ #welcome{padding-top:6vh} .welcome-head{text-align:center;margin-bottom:30px} .w-title{font-size:clamp(2rem,7vw,2.9rem);font-weight:900;line-height:1.15;margin-top:4px} .w-sub{color:var(--ink-soft);font-size:.95rem;margin-top:8px} .lang-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:420px){.lang-cards{grid-template-columns:1fr}} .lang-card{ background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 16px 16px; text-align:start;transition:transform .18s,scale .18s,opacity .18s,color .18s,background-color .18s,border-color .18s,box-shadow .18s,fill .18s,stroke .18s,filter .18s;box-shadow:var(--shadow);position:relative;overflow:hidden; } .lang-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--gold),var(--accent))} .lang-card.en::before{background:linear-gradient(90deg,#4e7d4e,#2f6f8f)} @media (hover:hover) and (pointer:fine){.lang-card:hover{transform:translateY(-4px);border-color:var(--gold)}} @media (hover:hover) and (pointer:fine){.lang-card.en:hover{border-color:#2f6f8f}} .lang-flag{font-size:1.6rem;line-height:1} .lang-card h2{font-size:1.35rem;font-weight:900} .lc-head{display:flex;align-items:center;gap:9px;margin-bottom:12px} .lc-head h2{flex:1;text-align:start} .lc-pct{font-family:"Cascadia Mono",Consolas,monospace;font-size:1.05rem;color:var(--accent)} .lang-card.en .lc-pct{color:#2f6f8f} .lc-nums{display:flex;align-items:baseline;gap:12px;margin-top:10px; font-size:.72rem;color:var(--ink-soft)} .lc-nums b{font-family:"Frank Ruhl Libre",serif;font-size:1.15rem;font-weight:900; color:var(--ink);margin-inline-end:3px} .lc-of{margin-inline-start:auto} .lang-prog{height:6px;border-radius:3px;background:var(--paper-deep);margin-top:8px;overflow:hidden;box-shadow:var(--well)} .lang-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--accent));transition:transform .4s,scale .4s,opacity .4s,color .4s,background-color .4s,border-color .4s,box-shadow .4s,fill .4s,stroke .4s,filter .4s} .lang-card.en .lang-prog i{background:linear-gradient(90deg,#4e7d4e,#2f6f8f)} .w-foot{text-align:center;color:var(--ink-soft);font-size:.72rem;margin-top:26px} /* HOME */ .home-head{text-align:center;margin-bottom:6px} .home-head h1{font-size:clamp(1.9rem,6vw,2.6rem);font-weight:900} .home-head p{color:var(--ink-soft);font-size:.92rem} .totalpill{display:inline-block;margin-top:8px;background:var(--paper-deep);border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-size:.8rem;color:var(--ink-soft)} .section-t{font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--ink-soft);margin:24px 4px 12px;text-transform:uppercase} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px} .tile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 12px 14px;text-align:center;transition:transform .15s,scale .15s,opacity .15s,color .15s,background-color .15s,border-color .15s,box-shadow .15s,fill .15s,stroke .15s,filter .15s;overflow:hidden} @media (hover:hover) and (pointer:fine){.tile:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow)}} .tile .num{font-family:"Frank Ruhl Libre",serif;font-size:1.9rem;font-weight:900;line-height:1} .tile .lbl{font-size:.72rem;color:var(--ink-soft);margin-top:3px} .tile .mini{margin-top:10px;height:6px;border-radius:3px;background:var(--paper-deep);overflow:hidden;display:flex} .tile .mini i{height:100%} .tile .mini .s{background:var(--green)} .tile .mini .w{background:var(--accent)} .tile .mini .n{background:var(--gold)} /* fourth segment: words skipped after the level test. Without it the bar summed to (total-skipped)/total and a unit read 44% empty at B1, 76% at C1 -- for a learner who had done nothing wrong. */ .tile .mini .k{background:var(--line)} .big-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px} .big-tile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;text-align:right;transition:transform .15s,scale .15s,opacity .15s,color .15s,background-color .15s,border-color .15s,box-shadow .15s,fill .15s,stroke .15s,filter .15s} @media (hover:hover) and (pointer:fine){.big-tile:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow)}} .big-tile .emoji{font-size:1.5rem} .big-tile h3{font-size:1.05rem;margin-top:6px} .big-tile p{font-size:.78rem;color:var(--ink-soft)} /* SCOPE screen */ .scope-head h1{font-size:clamp(1.7rem,5vw,2.2rem);font-weight:900} .donut-wrap{display:flex;align-items:center;gap:20px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;margin:18px 0} .donut{width:120px;height:120px;border-radius:50%;flex:0 0 auto;position:relative} .donut::after{content:"";position:absolute;inset:16px;background:var(--card);border-radius:50%} .donut .ck{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1} .donut .ck b{font-family:"Frank Ruhl Libre",serif;font-size:1.6rem;font-weight:900;line-height:1} .donut .ck span{font-size:.66rem;color:var(--ink-soft)} .legend{flex:1;display:flex;flex-direction:column;gap:9px} .legend div{display:flex;align-items:center;gap:8px;font-size:.86rem} .legend i{width:12px;height:12px;border-radius:3px;flex:0 0 auto} .legend .s{background:var(--green)} .legend .w{background:var(--accent)} .legend .n{background:var(--gold)} /* דילגתי · words removed from the queue by the level test, not learned here. Deliberately the flattest colour in the legend: it is a state, not an achievement. */ .legend .k{background:var(--line);border:1px solid var(--ink-soft)} /* ===== word cloud on the stats screen ===== The old list gave every word the same weight, so the twelve words that keep beating you looked exactly like the six hundred you got right first time. Size and colour carry the struggle score, so the eye lands on the work before the reader has read anything. */ .cloud{display:flex;flex-wrap:wrap;gap:7px 9px;align-items:baseline;margin:4px 0 6px} .cw{display:inline-flex;align-items:baseline;gap:5px;border-radius:9px;padding:3px 9px; border:1px solid transparent;cursor:pointer;line-height:1.5;font-family:inherit; background:transparent;transition:transform .12s ease,border-color .12s ease} @media (hover:hover) and (pointer:fine){.cw:hover{transform:translateY(-2px)}} .cw em{font-style:normal;font-size:.66em;opacity:.6;font-variant-numeric:tabular-nums} .cw.t3{font-size:1.62rem;font-weight:800;color:#a33f28;background:rgba(181,72,46,.10);border-color:rgba(181,72,46,.34)} .cw.t2{font-size:1.24rem;font-weight:700;color:#8a6220;background:rgba(201,150,47,.10);border-color:rgba(201,150,47,.30)} .cw.t1{font-size:1.02rem;font-weight:600;color:var(--ink)} .cw.t0{font-size:.86rem;font-weight:500;color:var(--ink-soft)} .cw-meaning{width:100%;font-size:.82rem;color:var(--ink-soft);margin:-2px 0 6px;padding-inline-start:4px} .cloud-note{font-size:.8rem;color:var(--ink-soft);line-height:1.7;margin:0 0 10px} .quiet-line{background:var(--card);border:1px solid var(--line);border-radius:12px; padding:12px 14px;font-size:.88rem;color:var(--ink-soft);box-shadow:var(--lift-1)} .quiet-line b{color:var(--ink);font-weight:700} /* ===== מסך הסטטיסטיקה · נבנה מחדש 21.8.2026 ===== "לא משנה כמה הוא צדק · משנה במה הוא טעה ומה הוא לא יודע" (חגי). הגרף ירד: .trend גבוה 84px והתווית אוכלת 19, ולכן כל אחוז מ-77 ומעלה צייר עמודה זהה · שבע מתוך שמונה עמודות יצאו 64.66px. שתי המחלקות שנשארו בגיליון (.trend/.tbar, .cloud/.cw) אינן בשימוש עוד במסך הזה. */ .nx{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line); border-radius:14px;padding:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(120,84,48,.07)} /* ⛔ inset-inline-start · ב-RTL זה הקצה הימני, וזה הקצה הקורא */ .nx::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px; background:linear-gradient(180deg,var(--gold),var(--accent))} .nx-line{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:1.4rem; line-height:1.3;letter-spacing:-.015em;margin-bottom:14px} .nx-line em{font-style:normal;color:var(--accent-deep);font-variant-numeric:tabular-nums} .statebar{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--paper-deep); box-shadow:inset 0 2px 4px rgba(120,84,48,.11),inset 0 -1px 0 rgba(255,255,255,.7)} .statebar i{display:block;height:100%} .sb-a{background:var(--green)} .sb-b{background:var(--accent)} .sb-c{background:var(--paper-deep);box-shadow:inset 0 0 0 1px var(--line)} .sb-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px; font-size:.78rem;color:var(--ink-soft)} .sb-legend span{display:inline-flex;align-items:center;gap:6px} .sb-legend .dot{width:9px;height:9px;border-radius:3px;flex:none} .nx .btn{margin-top:14px} /* הרשימה · שורה אחת לכל מילה, ציר אחד, ומידת נגיעה שעוברת את 44 */ .wlist{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(120,84,48,.07)} .wrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:12px; width:100%;min-height:56px;padding:11px 14px;border:0;border-bottom:1px solid var(--line); background:none;font:inherit;text-align:start;cursor:pointer;color:var(--ink); transition:transform .09s cubic-bezier(.25,.46,.45,.94),background-color .2s} .wrow:last-child{border-bottom:0} .wrow:active{transform:scale(.99);background:var(--paper-deep)} .wbar{width:3px;align-self:stretch;border-radius:99px;margin-block:2px} .b0{background:#ddab86} .b1{background:#cf7a56} .b2{background:var(--accent)} .b3{background:var(--accent-deep)} .ww{min-width:0} .ww b{display:block;font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:1.28rem; color:var(--ink);line-height:1.25} .ww span{display:block;margin-top:1px;font-size:.74rem;color:var(--ink-soft)} .wn{font-size:.78rem;font-weight:600;white-space:nowrap;padding:5px 10px;border-radius:99px; background:#f4e6e1;color:var(--accent-deep);font-variant-numeric:tabular-nums} .wrow[aria-expanded="true"] .wn{background:var(--accent-deep);color:#fffdf8} .wmean{padding:0 14px 13px;margin-top:-4px;font-size:.88rem;color:var(--ink-soft); line-height:1.55;border-bottom:1px solid var(--line)} .wmore{display:block;width:100%;min-height:48px;padding:12px;border:0; border-top:1px solid var(--line);background:none;font:inherit;font-size:.82rem; font-weight:600;color:var(--accent-deep);cursor:pointer; transition:transform .09s cubic-bezier(.25,.46,.45,.94),background-color .2s} .wmore:active{transform:scale(.99);background:var(--paper-deep)} @media (prefers-reduced-motion:reduce){ .wrow:active,.wmore:active{transform:none;background:var(--paper-deep)}} /* ===== 21.9.2026 · קליפת ראש הסטטיסטיקה: יושרה לקובץ המאושר ===== ביקורת/עיצוב-9.9/מסך-הסטטיסטיקה.html · top (back+brand) ו-head (קיצור scope + h1) במקום topbar/scope-head/rule הישנים (index.html), בדיוק כמו #account: אותו מבנה ואותם ערכים (#account כבר תואם את משפחת הקבצים המאושרים של 9.9-10.9). --display/ --body/--ease מוגדרים כאן מחדש כי אינם גלובליים, כמו בכל מסך אחר בקו הזה. בלי אנימציית rise: #account המקביל גם לא נושא אותה, ולא הומצאה כאן מחדש. */ #stats{--display:"Frank Ruhl Libre","David Libre",serif; --body:"Heebo","Arial Hebrew",Arial,sans-serif; --ease:cubic-bezier(.23,1,.32,1);} /* ⭐ 25.9 · שער עיצוב: הבמה (body) של #stats, בדיוק כמו #add/#manage (שורה ~720) — הגופן המלא והזוהר הדקורטיבי של הקובץ המאושר, מוצמד ל-body רק כש-#stats גלוי, כדי שלא לגעת במסכים אחרים. body:has() כבר קיים בקובץ הזה בדיוק בשביל זה. */ body:has(#stats:not(.hidden)){ font-family:"Heebo","Arial Hebrew",Arial,sans-serif;font-size:17px;line-height:1.55; background-image:radial-gradient(340px 300px at 88% 40px,rgba(201,150,47,.30),transparent 70%),radial-gradient(320px 320px at 4% 420px,rgba(181,72,46,.22),transparent 70%),radial-gradient(340px 320px at 96% 800px,rgba(201,150,47,.24),transparent 70%),radial-gradient(320px 320px at 6% 1180px,rgba(181,72,46,.18),transparent 70%),radial-gradient(340px 320px at 94% 1560px,rgba(201,150,47,.22),transparent 70%); background-repeat:no-repeat} #stats .top{display:flex;align-items:center;justify-content:space-between;padding:16px 0 6px} #stats .back{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:11px;color:var(--ink);font-size:14px;font-weight:500;cursor:pointer;padding:7px 13px 7px 9px} #stats .back svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} /* ⭐ 25.9 · #stats .brand היה חסר, ולכן נפל לברירת המחדל הגלובלית (.brand: משקל 900, בלי צבע) במקום לקו המשותף שכל שאר המסכים עם top+brand כבר נושאים (#account/#add/#home/#pay: var(--display), משקל 700, var(--accent)) — זו הייתה השמטה, לא כוונה. */ #stats .brand{font-family:var(--display);font-weight:700;font-size:20px;color:var(--accent)} /* ⭐ 25.9 · אותו באג שכבר תוקן ב-#admin (24.9, ההערה למטה ליד #admin .ltr): «800+» הוצג הפוך כי .ltr במשקל המשותף לא מסוקף למסך הזה. הקובץ המאושר נושא direction:ltr ישירות בתוך .brand שלו (עצמאי); כאן, כמו בכל מסך אחר עם top+brand, הכיוון בא מהמחלקה .ltr שעל אותו div. */ #stats .ltr{direction:ltr;unicode-bidi:isolate} #stats .head{text-align:center;margin:14px 0 0} #stats .head .k{font-size:12px;letter-spacing:.2em;color:var(--ink-soft);font-weight:500;margin:0 0 6px} #stats .head h1{font-family:var(--display);font-weight:700;font-size:32px;margin:0;line-height:1.15} /* ===== 18.9.2026 · שלושת המספרים, הכפתור לחלשות, ופירוט לפי יחידה ===== הכרעת חגי (מסך הסטטיסטיקה, אפשרות ⓐ) · יושבים מעל "מה עכשיו" הקיים למעלה, ולא במקומו. ⭐ 21.9.2026 · המידות (ריפוד, גודל גופן, letter-spacing) יושרו לקובץ המאושר עצמו ולא לקו הבית: .tile נשאר .lg משותף (זכוכית גרסה ב "כמו אפל", 20.9 — לא שוחזרה הזכוכית הישנה של הקובץ, כי גרסה ב חלה על כל מסך, ראו LG-SYSTEM למעלה בקובץ), אבל המספר הגדול חזר לדיו כברירת מחדל (לא accent): דגשים.md §2 — "טקסט תמיד שחור... ערכים: דיו", האדום מותר רק על מה שאינו טקסט (וגם כך מציג הקובץ המאושר את .tile .n שלו, בלי צבע מוגדר). מוגדרים כאן מחדש תחת #stats במפורש, ולא הורחב הסלקטור המשותף של #home, כדי שהשינוי הזה לא יזיז פיקסל אחד במסך הבית או בחשבון — ציר הזוגות של שער העיצוב בודק רק אותם. כפילות מכוונת. */ #stats .tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:20px 0 0} #stats .tiles .tile{border-radius:16px;padding:14px 8px 13px;color:var(--ink)} #stats .tiles .tile{border:0;text-align:center;transition:none} /* ביטול ירושה מ-.tile המשותפת, כמו #home */ #stats .tiles .tile:active{transform:none} #stats .tiles .tile .n{font-family:var(--display);font-weight:700;font-size:32px;letter-spacing:-.01em; line-height:1;display:block;font-variant-numeric:tabular-nums} #stats .tiles .tile .l{font-size:12.5px;color:var(--ink-soft);display:block;margin-top:5px;line-height:1.35} /* ⭐ 25.9 · אייקון הזכוכית ונקודות ימי-התרגול, שהוצהרו extras «לא מומש בסבב הזה» — מומשו, בדיוק כמו הקובץ המאושר (.tile .ic/.pips), מסוקף ל-#stats כמו כל שאר הכללים למעלה. */ #stats .tiles .tile .ic{width:24px;height:24px;margin:0 auto 6px;display:block} #stats .tiles .tile .ic.st{stroke:var(--accent);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round} #stats .tiles .tile .pips{display:flex;gap:3px;margin-top:10px} #stats .tiles .tile .pips i{flex:1;height:5px;border-radius:3px;background:var(--line)} #stats .tiles .tile .pips i.on{background:var(--accent)} /* ⭐ 25.9 · שער עיצוב: "פירוט לפי יחידה" ו"מה עכשיו" עוברים ל-.sec/h2 כמו בקובץ המאושר (וכמו #results .sec h2 שכבר קיים) במקום .section-t הגנרי (תווית קטנה, ALL-CAPS) — כותרת מרכזית בגופן התצוגה, בדיוק פעמיים, רק כאן. .section-t עצמו (הכיתוב "המילים שטעית בהן" למטה, מחוץ ל-.sec) לא נגעתי בו: הוא לא בקובץ המאושר. */ #stats .sec{margin:28px 0 0} #statsUnitHeading,#statsNowHeading{font-family:var(--display);font-weight:700;font-size:19px; margin:0 0 10px;text-align:center;color:var(--ink);letter-spacing:normal;text-transform:none} #stats .unit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} #stats .unit-grid .unit{border:0;border-radius:14px;padding:14px 14px 12px;text-align:start; cursor:pointer;color:var(--ink)} #stats .unit-grid .unit b{font-family:var(--display);font-weight:700;font-size:20px; display:block;position:relative;z-index:1} #stats .unit-grid .unit span{font-size:12px;color:var(--ink-soft);display:block;margin-top:2px; position:relative;z-index:1} #stats .unit-grid .unit .p{height:4px;border-radius:2px;background:rgba(44,38,32,.12); margin-top:10px;overflow:hidden;position:relative;z-index:1} #stats .unit-grid .unit .p i{display:block;height:100%;background:var(--pc,var(--accent))} /* ⭐ 25.9 · שתי כרטיסיות "מה עכשיו" (מילים שטרם תרגלת, ימים למבחן) — אותו רכיב .row בדיוק כמו בקובץ המאושר (עיגול אייקון + מספר מודגש + טקסט). מוגדר תחת #stats במפורש ולא מרחיב את .row/.grid המשותפים (המשמשים גם #results ואחרים), כדי לא להזיז פיקסל במסך אחר. */ #stats .row{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px; background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 10px; margin-top:8px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 24px -20px rgba(44,38,32,.35)} #stats .row .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(181,72,46,.13)} #stats .row .ic svg{width:19px;height:19px;stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} #stats .row .t{text-align:center;font-size:15.5px;line-height:1.35;color:var(--ink)} #stats .row .t b{font-family:var(--display);font-weight:700;font-size:18px;margin-inline-end:3px;font-variant-numeric:tabular-nums} /* אותו חץ, אותה התנהגות hover, כמו #results/#level .btn .arr */ #stats .btn .arr{display:inline-block;margin-inline-start:6px;transition:transform .3s var(--ease)} @media (hover:hover) and (pointer:fine){#stats .btn:hover .arr{transform:translateX(-4px)}} @media (prefers-reduced-motion:reduce){ #stats .btn .arr{transition:none} @media (hover:hover) and (pointer:fine){#stats .btn:hover .arr{transform:none}} } /* ===== end-of-round unit progress ===== The round score alone says nothing about where you are. This puts the round back inside the unit it came from, which is the difference between "I answered 20" and "I am 86% through". */ .up-card{background:var(--card);border:1px solid var(--line);border-radius:16px; padding:16px 18px;margin:18px 0 6px} .up-top{display:flex;align-items:baseline;gap:8px;margin-bottom:4px} .up-top b{font-family:"Frank Ruhl Libre",serif;font-size:1.12rem} .up-top span{margin-inline-start:auto;font-size:.82rem;color:var(--ink-soft)} .up-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--paper-deep);box-shadow:var(--well); margin:12px 0 10px} .up-bar i{height:100%;transition:width .8s cubic-bezier(.22,.8,.3,1)} .up-bar .s{background:linear-gradient(180deg,#6fae72,#4e8d55)} .up-bar .w{background:linear-gradient(180deg,#e0a63f,#c9962f)} .up-bar .n{background:var(--paper-deep)} .up-bar .k{background:var(--line)} .up-keys{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--ink-soft)} .up-keys i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-inline-end:5px} .up-keys b{color:var(--ink);font-weight:700} .up-gain{margin-top:12px;font-size:.9rem;color:#3f6b4a;background:rgba(111,174,114,.12); border-radius:10px;padding:9px 12px;line-height:1.6} .up-done{margin-top:12px;font-size:.95rem;color:#8a6220;background:rgba(201,150,47,.14); border-radius:10px;padding:11px 13px;line-height:1.6;font-weight:600} /* ═════════════════════════════════════════════════════════════════════════ BOOT-9.9:START · מסך הטעינה · העתקה של הקובץ המאושר · 22.9.2026 ═════════════════════════════════════════════════════════════════════════ מקור: ביקורת/עיצוב-9.9/מסך-הטעינה.html (אושר 9.9 18:05). ספר אדום מדפדף, חמישה דפים ושתי ערימות, «800+» מעל ו«תכף מתחילים» מתחת עם נקודת זהב מהבהבת. מחליף את .boot-ring (הטבעת המסתובבת עם «רגע…» / «מחזיר אותך פנימה…»). ה-CSS מילה במילה ובאותם שמות מחלקות. ⚠ הקובץ הייעודי ולא הספר של ערכת הרכיבים (.lg-book בבלוק KIT-9.9 למטה): שם הספר קטן ב-25% (180×126 ו-164×104 מול 225×158 ו-205×130 כאן, והקווים בדפים כל 7px מול 9px). ההכרעה של 9.9 18:05 היא «הכל הוגדל ב-25%», ולכן המקור הוא הקובץ. KIT-9.9 נשאר כמו שהוא. ⛔ איך זה לא נוגע במסך אחר: כל כלל נעול תחת #boot, כי .brand ,.msg ,.stage ו-.book הם שמות משותפים. ה-:root של הקובץ יושב על #boot, וה-body שלו (שתי ההילות, רשת בגובה המסך) חל רק כשמסך הטעינה פתוח. דפדפן בלי :has() מקבל את הספר על הנייר השטוח, בלי מירכוז לגובה. */ #boot{--paper:#f6f1e7;--card:#fffdf8;--ink:#2c2620;--ink-soft:#5e564a;--gold:#c9962f;--accent:#b5482e;--accent-deep:#8f3620;--line:#e3d8c4; --display:"Frank Ruhl Libre","David Libre",serif;--body:"Heebo","Arial Hebrew",Arial,sans-serif; color:var(--ink);font-family:var(--body);line-height:normal} /* line-height: ה-body של הקובץ אינו קובע, והאפליקציה קובעת 1.5 */ body:has(#boot:not(.hidden)){ font-family:"Heebo","Arial Hebrew",Arial,sans-serif;line-height:normal; background-image:radial-gradient(60vw 40vh at 85% -5%,rgba(201,150,47,.18),transparent 70%),radial-gradient(50vw 40vh at 5% 45%,rgba(181,72,46,.14),transparent 70%);background-repeat:no-repeat} /* הדף · בקובץ ה-body הוא רשת בגובה המסך והבמה ממורכזת בה. באפליקציה #boot יושב בתוך .wrap המשותף (ריפוד 22/18/60, רוחב 640), ולכן .wrap מתאפס ומרכז רק כשמסך הטעינה פתוח, ו-#boot עצמו אינו יוצר קופסה: .stage היא הילד הממורכז, כמו בקובץ. */ .wrap:has(>#boot:not(.hidden)){padding:0;max-width:none;min-height:100vh;display:grid;place-items:center} #boot:not(.hidden){display:contents} #boot .stage{text-align:center;padding:40px 20px} #boot .brand{font-family:var(--display);font-weight:700;font-size:35px;color:var(--accent);margin:0 0 42px;direction:ltr} #boot .scene{width:225px;height:158px;display:grid;place-items:center;perspective:900px;perspective-origin:50% 30%;margin:0 auto} #boot .book{position:relative;width:205px;height:130px;transform:rotateX(52deg) rotateZ(-4deg);transform-style:preserve-3d} #boot .book .cover{position:absolute;inset:0;background:var(--accent);border-radius:5px;box-shadow:0 14px 22px -8px rgba(44,38,32,.5),inset 0 0 0 3px var(--accent-deep);transform:translateZ(-3px)} #boot .book .stack{position:absolute;top:8px;bottom:8px;width:calc(50% - 10px);background:var(--card);background-image:repeating-linear-gradient(var(--line) 0 1.5px,transparent 1.5px 9px);background-size:68% 58%;background-repeat:no-repeat;background-position:center;border-radius:2px;transform:translateZ(0)} #boot .book .stack.r{right:8px;box-shadow:inset -2px 0 0 rgba(44,38,32,.05),1px 1px 0 var(--line),2px 2px 0 var(--card),3px 3px 0 var(--line),4px 4px 0 var(--card),5px 5px 0 var(--line)} #boot .book .stack.l{left:8px;box-shadow:inset 2px 0 0 rgba(44,38,32,.05),-1px 1px 0 var(--line),-2px 2px 0 var(--card),-3px 3px 0 var(--line),-4px 4px 0 var(--card),-5px 5px 0 var(--line)} #boot .book .leaf{position:absolute;top:8px;bottom:8px;left:50%;width:calc(50% - 10px);background:var(--card);background-image:repeating-linear-gradient(var(--line) 0 1.5px,transparent 1.5px 9px);background-size:68% 58%;background-repeat:no-repeat;background-position:center;border-radius:0 2px 2px 0;transform-origin:0 50%;transform-style:preserve-3d;backface-visibility:visible;animation:leaf 3s infinite;animation-delay:var(--d,0s);transform:translateZ(var(--z,.1px));will-change:transform,opacity} #boot .book .leaf::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(44,38,32,.22),rgba(44,38,32,.04) 60%,transparent);opacity:0;animation:shade 3s cubic-bezier(.45,0,.55,1) infinite;animation-delay:var(--d,0s)} @keyframes leaf{0%{rotate:y 0deg;opacity:1;animation-timing-function:cubic-bezier(.5,.05,.55,.95)}60%{rotate:y -180deg;opacity:1}60.2%{rotate:y -180deg;opacity:0}99.8%{rotate:y -180deg;opacity:0}100%{rotate:y 0deg;opacity:0}} @keyframes shade{0%{opacity:0}30%{opacity:1}60%,100%{opacity:0}} #boot .msg{margin:38px 0 0;font-size:26px;color:var(--ink-soft)} #boot .msg{font-weight:400} /* ביטול ירושה מ-.msg המשותפת (500): בקובץ אין לה משקל משלה */ #boot .msg::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-inline-start:8px;animation:blink 1s infinite;vertical-align:middle} @keyframes blink{50%{opacity:.2}} #boot .alt{margin:8px 0 0;font-size:12px;color:var(--ink-soft);opacity:.7} /* בקובץ, בלי רכיב שנושא אותה */ @media (prefers-reduced-motion:reduce){#boot .book .leaf,#boot .book .leaf::after,#boot .msg::after{animation:none!important}} /* BOOT-9.9:END */ .legend b{margin-right:auto;font-weight:700} .scope-prog{margin:2px 2px 14px;font-size:.88rem;color:var(--ink-soft);line-height:1.6} .scope-prog b{color:var(--ink);font-weight:700} .practice-btns{display:flex;flex-direction:column;gap:11px} .pbtn{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 18px;text-align:right;transition:transform .15s,scale .15s,opacity .15s,color .15s,background-color .15s,border-color .15s,box-shadow .15s,fill .15s,stroke .15s,filter .15s;width:100%} @media (hover:hover) and (pointer:fine){.pbtn:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)}} .pbtn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .pbtn .ic{font-size:1.4rem;flex:0 0 auto} .pbtn .tx{flex:1} .pbtn .tx b{display:block;font-family:"Frank Ruhl Libre",serif;font-size:1.08rem} .pbtn .tx span{font-size:.78rem;color:var(--ink-soft)} .pbtn .cnt{background:var(--paper-deep);border-radius:999px;padding:3px 11px;font-weight:700;font-size:.85rem;flex:0 0 auto} /* SENTENCE COMPLETION · השלמת משפטים המשפט עצמו באנגלית ולכן ltr, ההסבר עברית ולכן rtl. שני הכיוונים באותו כרטיס. ⚠ המשפט מיושר לשמאל ולא ממורכז: משפט בן שתי שורות שממורכז נקרא כשיר, והעין מאבדת את תחילת השורה השנייה. */ .s-sent{direction:ltr;text-align:left;font-family:"Frank Ruhl Libre",serif; font-size:clamp(1.05rem,3.4vw,1.3rem);line-height:1.7;margin-bottom:20px} .s-sent .bl{color:var(--accent);font-weight:700;letter-spacing:.06em} /* ═══ מילה שאפשר להקיש עליה לפירוש ═══ ⛔ כל מילה במשפט לחיצה, ולא רק אלה שיש להן פירוש · הקשה על מילה שאין לה ערך מחזירה תשובה מפורשת ולא שתיקה. */ /* ⛔ היה `padding:0 1px` · הכפתורים יצאו בגובה 28.6px, ומילים כמו `a` ברוחב 10.2px · מתחת ל-24×24 של WCAG 2.5.8, וחריג המרווח אינו חל כי המרווח בין כפתורים סמוכים הוא 4px. ⭐ הריפוד האנכי אינו משנה את פריסת השורה · `line-height` של המשפט גדול ממנו ממילא, ו-`margin` שלילי מחזיר את הרווח האופקי שנוסף. */ .s-w{font:inherit;color:inherit;background:none;border:0;cursor:pointer; padding:7px 4px;margin:0 -3px;min-width:24px; border-radius:4px;transition:background .12s} /* ⛔ היה כאן קו מקווקו מתחת למילים שיש להן פירוש. חגי פסל אותו (27.8.2026): הוא מלכלך את המשפט, ומסמן ללומד מראש אילו מילים "חשובות". ⭐ המשפט נראה כמו טקסט רגיל · ההיזון היחיד הוא בהקשה עצמה, וזה עובד רק אם **לכל** מילה יש תשובה. ראה sentence-completion/sent-lex.js. */ /* ⛔ היו `.22` ו-`.28` · נמדד 1.22:1 ו-1.28:1 מול 3:1 שדורש WCAG 1.4.11 למחוון מצב לא-טקסטואלי. ⚠ ו-`-webkit-tap-highlight-color:transparent` על ה-body מבטל גם את הדגשת המגע של מערכת ההפעלה · אין רשת ביטחון. ⭐ מסגרת ולא רק רקע · על רקע בהיר, שינוי רוויה לבדו אינו מגיע ל-3:1. */ .s-w:active{background:rgba(166,60,38,.16);box-shadow:inset 0 0 0 1px var(--accent)} .s-w.on{background:rgba(166,60,38,.14);box-shadow:inset 0 0 0 1.5px var(--accent)} @media (hover:hover) and (pointer:fine){.s-w:hover{background:rgba(201,150,47,.20)}} /* ⛔ הריפוד היה `11px 38px 11px 14px` · 38px שמורים ב**ימין**, בזמן ש-`inset-inline-end` ב-RTL מציב את ה-✕ ב**שמאל**. נמדד: 10.7% מהפירושים נכתבו מתחת לכפתור ב-375px, ו-`elementFromPoint` במרכזו החזיר את הכפתור. ⭐ `padding-inline-end` פותר בלי לדעת מה הכיוון · ואין מה לזכור. */ .s-gloss{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px; margin-top:12px;padding:11px 14px;padding-inline-end:46px;border-radius:12px; background:var(--paper-deep);border:1px solid var(--line);text-align:right} .s-gloss.hidden{display:none!important} .s-gloss-w{font-family:"Frank Ruhl Libre",serif;font-weight:700;font-size:1.02rem; color:var(--accent-deep)} .s-gloss-m{font-size:.9rem;color:var(--ink)} .s-gloss-m.none{color:var(--ink-soft);font-size:.82rem} .s-gloss-x{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%); width:30px;height:30px;border:0;background:none;color:var(--ink-soft); font-size:.9rem;cursor:pointer;border-radius:50%} .s-len{display:flex;align-items:center;gap:12px;margin-bottom:16px} .s-len-l{flex:0 0 auto;font-size:.82rem;font-weight:700;color:var(--ink-soft)} .s-len .seg{flex:1} .s-hint{margin-top:9px;font-size:.72rem;color:var(--ink-soft);text-align:center} .s-hint.hidden{display:none!important} /* ═══ הבוחן הקצר ═══ */ .sq-box{max-width:400px} .sq-term{font-family:"Frank Ruhl Libre",serif;font-size:1.7rem;font-weight:900; margin-top:6px;color:var(--ink)} .sq-opts{display:grid;gap:8px;margin-top:16px} .sq-opts button{font-family:"Heebo";font-size:.95rem;font-weight:500;padding:13px 14px; border-radius:12px;border:1px solid var(--line);background:var(--paper); color:var(--ink);text-align:right;transition:transform .15s,scale .15s,opacity .15s,color .15s,background-color .15s,border-color .15s,box-shadow .15s,fill .15s,stroke .15s,filter .15s;line-height:1.4} @media (hover:hover) and (pointer:fine){ .sq-opts button:not(:disabled):hover{border-color:var(--gold);transform:translateY(-2px)}} .sq-opts button.is-right{border-color:var(--green);background:rgba(78,125,78,.12);font-weight:700} .sq-opts button.is-wrong{border-color:var(--accent);background:rgba(181,72,46,.1)} .sq-opts button .mk{margin-inline-start:6px;font-weight:900} /* מספור החסרים בפריט זוג. שני `___` זהים והאפשרות היא "align + differ", כלומר הסדר קובע · והמספר אומר מה לאיפה בלי מילים. */ .s-sent .bl sup{font-size:.62em;font-weight:700;vertical-align:super;margin-inline-start:1px} /* ⚠ יעד המגע של "✕ יציאה" נמדד ב-38px, מתחת למינימום 44. `.topbar .back` הוא מחלקה משותפת ל-16 מסכים, ולכן התיקון ממוקד לשני המסכים שנוספו כאן ולא גורף: שינוי גלובלי היה מזיז פריסה בכל האפליקציה. הפער בשאר המסכים קדם לשינוי הזה. */ /* ⛔ המסך העברי יורש CSS שנכתב למשפט אנגלי (direction:ltr). בעברית זה דוחף את הקו התחתון לקצה הלא נכון ומעיף את הנקודה הסופית לצד ההפוך · נמדד על 23 משפטים שפותחים ב-___ ועל הנקודה בכל 150. הכללים כאן מחזירים RTL. */ #conn .s-sent{direction:rtl;text-align:right} #conn .s-optrow{direction:rtl} #conn .s-opt{direction:rtl;text-align:right} #conn .s-opt .mk{float:right} #conn .s-g{direction:rtl;text-align:right} #sent .topbar .back, #mode .topbar .back, #conn .topbar .back{min-height:44px} .s-opts{display:flex;flex-direction:column;gap:9px} /* שורת אפשרות: הכפתור והרמקול כאחים בתוך עטיפה. ⚠ העטיפה אינה קישוט. `