/* ═══ פונטים ═══
     היו נטענים מ-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:#6b6254;   /* היה #736a5c = 4.32:1 על --paper-deep, מתחת ל-AA; עכשיו עובר גם שם */
    --gold:#c9962f; --gold-ink:#8a6512; --accent:#b5482e; --accent-deep:#8f3620; --green:#4e7d4e; --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}
  html,body{height:100%}
  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}
  /* #8a6512 ולא --gold: הזהב #c9962f על הנייר = 2.36:1, מתחת ל-AA גם לטקסט גדול. */
  .kicker{font-size:.72rem;letter-spacing:.22em;color:#8a6512;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:.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:.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:.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:.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:.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:.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)}}
  /* ===== 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 splash ===== */
  #boot{min-height:78vh;display:flex;align-items:center;justify-content:center}
  .boot-in{text-align:center}
  .boot-in .kicker{font-size:1.5rem;letter-spacing:.22em;margin-bottom:22px}
  .boot-ring{width:34px;height:34px;margin:0 auto 16px;border-radius:50%;
       border:3px solid var(--line);border-top-color:var(--gold);animation:bootSpin .9s linear infinite}
  @keyframes bootSpin{to{transform:rotate(360deg)}}
  #bootMsg{color:var(--ink-soft);font-size:.92rem}
  /* If the animation cannot run, the ring must still read as "working", not as a broken circle. */
  @media (prefers-reduced-motion:reduce){.boot-ring{animation:none;border-top-color:var(--line)}}
  .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:.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:.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}
  /* שורת אפשרות: הכפתור והרמקול כאחים בתוך עטיפה.
     ⚠ העטיפה אינה קישוט. `<button>` בתוך `<button>` אינו HTML חוקי, והדפדפן מפרק
     את העץ ומעיף את הפנימי החוצה · כלומר הרמקול היה נוחת מחוץ לאפשרות.
     `direction:ltr` על השורה, כמו על `.s-opt` עצמו: התוכן אנגלי, והרמקול נופל
     לקצה שאחרי המילה. `flex:1` על הכפתור הוא מה שמצמיד את ארבעת הרמקולים לאותו
     קו אנכי, כך שהעין לא רודפת אחריהם בין שורה לשורה.
     `align-items:stretch` ולא center · הרמקול מקבל את גובה האפשרות המלא, וזה גם
     יעד מגע גדול וגם שורה שלא נראית שבורה. */
  .s-optrow{display:flex;direction:ltr;align-items:stretch;gap:8px}
  .s-optrow .s-opt{flex:1;min-width:0}
  /* ⚠ 44 ולא 40. `.rev-say` נקבע ב-40 והנימוק שם כתוב, אבל במסך הזה כבר נמדד
     שהסף הוא 44 (`#sent .topbar .back`), ואין סיבה להכניס אליו יעד קטן יותר. */
  .s-say{flex:0 0 auto;min-width:44px;min-height:44px}
  .s-opt{direction:ltr;text-align:left;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:13px 16px;font-family:"Heebo",sans-serif;font-size:1rem;
    color:var(--ink);width:100%;transition:.15s}
  @media (hover:hover) and (pointer:fine){.s-opt:not(:disabled):hover{border-color:var(--gold)}}
  .s-opt:disabled{cursor:default}
  .s-opt.is-right{border-color:var(--green);background:#eef5ee;font-weight:700}
  .s-opt.is-wrong{border-color:var(--accent);background:#faeeeb}
  .s-opt .mk{float:left;margin-inline-start:8px;font-weight:700}
  .s-opt.is-right .mk{color:var(--green)}
  .s-opt.is-wrong .mk{color:var(--accent)}
  /* ההסבר. שלושה חלקים בסדר שנקבע: פירוש האפשרויות, תרגום המשפט, ואז הנימוק. */
  .s-exp{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);text-align:right}
  .s-exp h4{font-size:.7rem;letter-spacing:.12em;color:var(--gold-ink);font-weight:700;
    text-transform:uppercase;margin-bottom:7px}
  .s-exp section{margin-bottom:16px}
  .s-exp section:last-child{margin-bottom:0}
  /* אותה פריסה בדיוק כמו `.s-optrow`, ומאותה סיבה: רמקול על כל אחת מארבע שורות
     "המילים". `flex:1` על הטקסט מיישר את הרמקולים לקו אחד, וזה אותו קו שבו הם
     יושבים בשורות האפשרויות שמעל · כלומר הם לא זזים כשההסבר נפתח. */
  .s-g{display:flex;direction:ltr;align-items:center;gap:8px;
    text-align:left;font-size:.9rem;color:var(--ink-soft);padding:2px 0}
  .s-gt{flex:1;min-width:0}
  .s-g.key{color:var(--ink);font-weight:700}
  /* שורת המשפט באנגלית, מעל התרגום. `direction:ltr` על הבלוק ולא רק על ה-bdi,
     אחרת הנקודה בסוף המשפט נודדת לשמאלו במסך RTL. */
  .s-en{direction:ltr;text-align:left;font-size:1rem;line-height:1.6;margin-bottom:5px}
  /* ⚠ לא var(--green). אותה מדידה שכבר תועדה למעלה: הירוק הכללי #4e7d4e נותן 4.27:1
     על רקע הכרטיס, ומתחת לסף 4.5. טקסט מודגש ב-16px אינו "טקסט גדול" (הפטור מתחיל
     ב-18.66px מודגש), ולכן הפטור אינו חל כאן. #3f6a3f נמדד 5.58:1 ומאותה משפחה.
     החל גם על .s-tr b, שנשלח כבר עם הירוק החלש. */
  .s-en b, .s-tr b{color:#3f6a3f;font-weight:700}
  .s-tr{font-size:1rem;line-height:1.7}
  .s-why p{font-size:.94rem;line-height:1.65;margin-bottom:9px}
  .s-why p:last-child{margin-bottom:0}
  .s-why .vd{font-weight:700}
  .s-why .vd.bad{color:#b0462d}
  .s-why .vd.ok{color:#477247}
  .s-why code{direction:ltr;display:inline-block;font-family:"Heebo",sans-serif;font-weight:700;
    background:var(--paper-deep);border-radius:5px;padding:0 5px}
  .s-done{text-align:center;padding:6vh 0}
  .s-done .num{font-family:"Frank Ruhl Libre",serif;font-size:3.4rem;font-weight:700;color:var(--gold-ink)}
  .s-sum{font-size:.86rem;color:var(--ink-soft);margin-top:6px}

  /* QUIZ */
  .prog{height:6px;background:var(--paper-deep);border-radius:3px;overflow:hidden;margin-bottom:6px;box-shadow:var(--well)}
  .prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--accent));transition:.3s}
  .qmeta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--ink-soft);margin-bottom:20px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 24px;box-shadow:var(--lift-2);text-align:center}
  /* #8a6512 ולא --gold: הזהב על הכרטיס = 2.61:1, מתחת ל-AA. */
  .q-kind{font-size:.72rem;letter-spacing:.12em;color:#8a6512;font-weight:700;text-transform:uppercase;margin-bottom:14px}
  .q-text{font-family:"Frank Ruhl Libre",serif;font-size:clamp(1.4rem,4.6vw,1.9rem);font-weight:700;line-height:1.35}
  /* speaker sits beside the prompt, never inside it -- the prompt is also read by the
     print sheet and the exam, and it must stay pure text */
  .q-row{display:flex;align-items:flex-start;gap:10px}
  .q-row .q-text{flex:1;min-width:0}
  .say{flex:0 0 auto;background:transparent;border:1px solid var(--line);border-radius:10px;
    font-size:1.05rem;line-height:1;padding:8px 10px;color:var(--ink-soft);transition:.15s}
  @media (hover:hover) and (pointer:fine){.say:hover{border-color:var(--gold);color:var(--ink)}}
  .say.on{border-color:var(--gold);background:rgba(201,150,47,.12)}
  .say.hidden{display:none!important}
  .answer-input{width:100%;margin-top:22px;font-family:"Frank Ruhl Libre",serif;font-size:1.5rem;text-align:center;color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:14px;outline:none;transition:.2s}
  .answer-input:focus{border-color:var(--gold)}
  .answer-input:disabled{opacity:.75}
  .actions{display:flex;gap:10px;margin-top:16px}
  .actions .btn{flex:1}
  .reveal-meaning{margin-top:20px;font-family:"Frank Ruhl Libre",serif;font-size:1.3rem;line-height:1.45;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px;animation:rise .25s ease}
  .hint-btn{display:block;margin:14px auto 0;background:transparent;border:1px solid var(--line);color:#8a6512;font-family:"Heebo";font-weight:500;font-size:.88rem;padding:8px 18px;border-radius:999px}
  @media (hover:hover) and (pointer:fine){.hint-btn:hover{border-color:var(--gold);background:rgba(201,150,47,.08)}}
  .hint-box{margin-top:12px;font-family:"Frank Ruhl Libre",serif;font-size:1.05rem;background:rgba(201,150,47,.1);border:1px dashed var(--gold);border-radius:12px;padding:12px}
  .feedback{margin-top:14px;animation:rise .3s ease}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .verdict{font-family:"Frank Ruhl Libre",serif;font-size:1.35rem;font-weight:700}
  .verdict.ok{color:var(--green)} .verdict.no{color:var(--accent)}
  .assoc-bar .shr{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;
    color:var(--ink-soft);cursor:pointer;margin-inline-start:10px}
  .assoc-bar .shr.hidden{display:none!important}
  .assoc-peek{margin-top:8px;background:transparent;border:1px solid var(--line);
    border-radius:999px;padding:5px 12px;font-size:.76rem;color:var(--ink-soft);
    font-family:"Heebo";cursor:pointer}
  @media (hover:hover) and (pointer:fine){.assoc-peek:hover{border-color:var(--gold);color:var(--ink)}}
  .assoc-others{margin-top:9px;display:flex;flex-direction:column;gap:6px}
  .assoc-others.hidden{display:none!important}
  .assoc-others .oth{background:var(--paper-deep);border-radius:10px;padding:8px 11px;
    font-size:.82rem;line-height:1.5}
  .assoc-others .oth.empty{color:var(--ink-soft);background:transparent;padding:4px 0}
  .also{margin-top:8px;font-size:.85rem;color:var(--ink-soft)}
  /* פירוש שכבר נכתב מול פירוש שחסר. שתי מחלקות ולא אחת, כדי שהכלל ינצח את
     `.rev-w span{color:var(--ink-soft)}` בלי !important. */
  /* לא var(--green). הירוק הכללי #4e7d4e נמדד 4.27:1 על רקע הכרטיס #f6f1e7 · מתחת לסף
     4.5, והטקסט כאן קטן (0.8rem ברשימת הסיכום) ולכן פטור "טקסט גדול" אינו חל. #3f6a3f
     נמדד 5.58:1 ונשאר מאותה משפחת צבע. הצבע הזה נושא מידע ולכן חייב להיקרא. */
  .sns.got{color:#3f6a3f;font-weight:600}
  .snsep{opacity:.35;margin:0 5px}
  /* בולט מ-.also הרגיל: זו דרישה ולא הערת אגב, וזו הייתה הבקשה המפורשת. */
  .sense-need{color:var(--accent-deep);font-weight:600}
  .sense-intro{margin-top:5px;font-weight:400;color:var(--ink-soft);font-size:.8rem;line-height:1.6}
  .also b{color:var(--ink);font-weight:600}
  /* משפט הדוגמה: תווית · המשפט באנגלית · התרגום, שורה לכל אחד. המילה הנלמדת
     מודגשת בשני המשפטים, ולכן היא מוצגת ב-var(--ink) המלא ולא באפור של .also:
     אפור על אפור אינו הדגשה, וההדגשה כאן היא כל תפקיד השורה. */
  /* ⚠ יישור מפורש על הבלוק, ולא הסתמכות על ההורה: `.card` ממורכז ו-`.also` יורש ממנו,
     ולכן בלי הכלל הזה כל שורה קיבלה יישור אחר.
     הגרסה הקודמת יישרה כל שורה לתחילת השפה שלה · האנגלית לשמאל והעברית לימין. חגי ראה
     את התוצאה (12.8.2026) וקבע שהיא נראית מוזרה: שתי השורות נדחפות לקצוות מנוגדים,
     ובכרטיס צר הזוג נקרא כשני גושים נפרדים ולא כמשפט ותרגומו. שלוש השורות ממורכזות
     עכשיו על ציר אחד. `direction:ltr` נשאר על האנגלית · הוא קובע סדר תווים, לא יישור,
     ובלעדיו סימני הפיסוק בקצה המשפט קופצים למקום הלא נכון.
     ⚠ ניסוח ההערה: הגרסה הראשונה השתמשה במילה שהלקסיקון פוסל (`tests/47`), והבדיקה
     סורקת את **כל** הקובץ ולא רק טקסט ממשק. השער צודק, ולכן ההערה שונתה ולא השער. */
  .ex-sent{text-align:center}
  .ex-sent .ex-lbl{display:block;font-size:.68rem;letter-spacing:.1em;color:var(--gold-ink);
    font-weight:700;margin-bottom:3px}
  .ex-sent .ex-en{display:block;direction:ltr;text-align:center;margin-bottom:2px}
  .ex-sent .ex-he{display:block;text-align:center}
  .ex-sent b{color:var(--ink);font-weight:700}
  .reveal{margin-top:8px;font-size:1.05rem}
  .reveal b{font-family:"Frank Ruhl Libre",serif}
  .was-right{margin-top:12px;background:transparent;border:1px solid var(--line);color:var(--ink-soft);border-radius:999px;padding:7px 16px;font-family:"Heebo";font-size:.85rem}
  @media (hover:hover) and (pointer:fine){.was-right:hover{border-color:var(--green);color:var(--green)}}
  /* המצב המסומן. הכפתור הוא מתג ולא פעולה חד-כיוונית, ולכן הוא חייב להיראות שונה כשהוא
     דלוק · אחרת "לחץ לביטול" הוא הרמז היחיד שמשהו קרה. */
  .was-right.on{border-color:var(--green);color:var(--green);background:rgba(47,133,90,.08)}
  .assoc{margin-top:18px;text-align:right;border-top:1px dashed var(--line);padding-top:14px}
  .assoc label{display:block;font-weight:500;font-size:.86rem;color:var(--gold-ink);margin-bottom:7px}
  .assoc textarea{width:100%;font-family:"Heebo";font-size:1rem;color:var(--ink);background:rgba(201,150,47,.06);border:1px solid var(--line);border-radius:10px;padding:9px 12px;resize:vertical;outline:none;line-height:1.5}
  .assoc textarea:focus{border-color:var(--gold)}
  .assoc-bar{display:flex;align-items:center;gap:10px;margin-top:8px}
  .assoc-bar button{font-weight:700;font-size:.85rem;color:var(--ink);background:rgba(201,150,47,.18);border:1px solid var(--gold);border-radius:999px;padding:7px 18px}
  .assoc-bar .st{font-size:.82rem;color:var(--green);font-weight:500}
  .del-live{margin-top:16px;width:100%;background:transparent;border:1px dashed var(--accent);color:var(--accent);border-radius:12px;padding:10px;font-family:"Heebo";font-weight:500;font-size:.9rem}
  @media (hover:hover) and (pointer:fine){.del-live:hover{background:rgba(181,72,46,.07)}}

  /* RESULTS */
  .res-head{text-align:center}
  .score-num{font-family:"Frank Ruhl Libre",serif;font-size:4rem;font-weight:900;color:var(--accent);line-height:1}
  .score-of{color:var(--ink-soft);margin-bottom:8px}
  .miss-list{display:flex;flex-direction:column;gap:7px;margin-top:8px}
  .miss-row{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;gap:10px}
  .miss-row b{font-family:"Frank Ruhl Libre",serif;min-width:34%}
  .miss-row span{color:var(--ink-soft);font-size:.88rem}

  /* end-of-quiz review (correct verdicts per word) */
  .review-list{display:flex;flex-direction:column;gap:7px;max-height:440px;overflow:auto;margin-top:8px}
  .rev-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 13px}
  .rev-row.wrong{border-color:var(--accent);background:rgba(181,72,46,.05)}
  .rev-w{flex:1;min-width:0}
  .rev-w b{font-family:"Frank Ruhl Libre",serif;font-weight:700;font-size:1.02rem;display:block}
  .rev-w span{color:var(--ink-soft);font-size:.8rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rev-chip{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-family:"Heebo";font-weight:700;font-size:.82rem;transition:.15s;background:transparent}
  .rev-chip.ok{color:var(--green);border-color:var(--green);background:rgba(78,125,78,.09)}
  .rev-chip.no{color:var(--accent);border-color:var(--accent);background:rgba(181,72,46,.09)}
  /* ⚠ הניסוח הראשון היה padding:6px 9px, והוא נמדד ב-375px כ-41×29 · יעד מגע נמוך מהסף.
     הרמקול נשאר בגודל של .say, ומקבל רק מינימום מפורש כדי שהוא לא יתכווץ בשורה צפופה. */
  .rev-say{min-width:40px;min-height:40px}

  /* strength list */
  .strength-list{display:flex;flex-direction:column;gap:7px;max-height:360px;overflow:auto;margin-top:8px}
  .str-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 13px}
  .str-row.is-new{border-color:var(--gold);background:rgba(201,150,47,.06)}
  .str-w{min-width:36%}
  .str-w b{font-family:"Frank Ruhl Libre",serif;font-weight:700;font-size:1.02rem;display:block}
  .str-w span{color:var(--ink-soft);font-size:.8rem}
  .dots{display:inline-flex;gap:4px}
  .dots i{width:10px;height:10px;border-radius:50%;background:var(--paper-deep);border:1px solid var(--line)}
  .dots i.on{background:linear-gradient(180deg,var(--gold),var(--accent));border-color:transparent}
  .str-meter{flex:1;text-align:left}
  .str-meter em{display:block;font-style:normal;font-size:.7rem;color:var(--ink-soft);margin-top:4px}

  /* history trend */
  .trend{display:flex;gap:7px;align-items:flex-end;height:84px;margin-top:12px}
  .tbar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
  .tbar i{display:block;width:100%;max-width:30px;background:linear-gradient(180deg,var(--gold),var(--accent));border-radius:5px 5px 0 0;min-height:5px}
  .tbar em{font-style:normal;font-size:.64rem;color:var(--ink-soft)}

  /* manage */
  .manage-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto;margin-top:10px}
  .m-row{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 13px}
  .m-row input{width:18px;height:18px;accent-color:var(--accent);flex:0 0 auto}
  .m-row b{font-family:"Frank Ruhl Libre",serif;min-width:32%}
  .m-row span{color:var(--ink-soft);font-size:.82rem;flex:1}
  /* "ידעתי" · מצב שבאמצע בין מחיקה לתרגול, ולכן הוא נראה כמו מתג ולא כמו פעולה הרסנית.
     flex:0 0 auto כדי שהוא לא יידחס כשהפירוש ארוך; הפירוש הוא שמתקצר, לא הכפתור. */
  .m-known{flex:0 0 auto;background:none;border:1px solid var(--line);color:var(--ink-soft);
           border-radius:999px;padding:4px 11px;font-size:.75rem;font-family:inherit;cursor:pointer}
  .m-known.on{border-color:var(--green);color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent)}
  .m-row .u{font-size:.66rem;color:var(--gold-ink);background:rgba(201,150,47,.1);border-radius:6px;padding:2px 7px;flex:0 0 auto}
  /* grouped-by-unit manage list */
  .m-group{margin-bottom:8px}
  .m-head{display:flex;align-items:center;gap:10px;width:100%;text-align:start;cursor:pointer;
      background:var(--card);border:1px solid var(--line);border-radius:11px;padding:11px 14px;
      font-family:inherit;color:var(--ink)}
  @media (hover:hover) and (pointer:fine){.m-head:hover{border-color:var(--gold)}}
  .m-head i{font-style:normal;color:var(--gold-ink);font-size:.8rem;width:12px}
  .m-head b{font-family:"Frank Ruhl Libre",serif;font-size:1.02rem}
  .m-head span{margin-inline-start:auto;font-size:.78rem;color:var(--ink-soft)}
  .m-head em{font-style:normal;color:var(--accent)}
  .m-body{display:flex;flex-direction:column;gap:6px;padding:8px 0 4px}
  /* a deleted word is still listed -- this screen is the only way back for it */
  .m-row.is-gone{opacity:.62;border-style:dashed}
  .m-row.is-gone b{text-decoration:line-through}
  .m-undo{flex:0 0 auto;font-family:inherit;font-size:.74rem;cursor:pointer;color:var(--green);
      background:transparent;border:1px solid var(--line);border-radius:8px;padding:3px 9px}
  @media (hover:hover) and (pointer:fine){.m-undo:hover{border-color:var(--green)}}
  .search{width:100%;font-family:"Heebo";font-size:1rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 14px;outline:none;margin-top:8px}
  .search:focus{border-color:var(--gold)}
  .msg{margin-top:14px;text-align:center;font-size:.9rem;font-weight:500}
  .msg.ok{color:var(--green)} .msg.err{color:var(--accent)}
  .add-form{display:flex;flex-direction:column;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:14px}
  .add-form input{font-family:"Heebo";font-size:1rem;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none}
  .add-form input:focus{border-color:var(--gold)}

  /* round-size chooser */
  .ask{position:fixed;inset:0;z-index:60;background:rgba(44,38,32,.45);backdrop-filter:blur(3px);
       display:flex;align-items:center;justify-content:center;padding:20px;animation:rise .18s ease}
  .ask-box{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 22px;
       width:100%;max-width:360px;box-shadow:var(--shadow);text-align:center}
  .ask-box h3{font-family:"Frank Ruhl Libre",serif;font-size:1.35rem;font-weight:900}
  .ask-box p{color:var(--ink-soft);font-size:.82rem;margin-top:4px}
  .ask-opts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
  .ask-opts button{font-family:"Heebo";font-weight:700;font-size:1.05rem;padding:14px 8px;border-radius:12px;
       border:1px solid var(--line);background:var(--paper);color:var(--ink);transition:.15s}
  @media (hover:hover) and (pointer:fine){.ask-opts button:hover{border-color:var(--gold);transform:translateY(-2px)}}
  .ask-opts button.active{background:linear-gradient(180deg,var(--gold-ink),var(--accent));color:#fff;border-color:transparent}
  /* five options in a two-column grid leaves the last one stranded beside a hole.
     "everything" is the odd one out anyway, so it takes the full width. */
  .ask-opts button.wide{grid-column:1/-1;font-size:.98rem}
  /* "אחר" opens a field rather than a browser prompt(): prompt() is styled by the OS, breaks
     the RTL layout, and is silently blocked in a standalone PWA on some Androids. */
  .size-custom{display:flex;gap:9px;margin-top:10px}
  .size-custom.hidden{display:none!important}
  .size-custom input{flex:1;min-width:0;font-family:"Heebo";font-size:1.05rem;font-weight:700;
       text-align:center;padding:14px 8px;border-radius:12px;border:1px solid var(--line);
       background:var(--paper);color:var(--ink);outline:none}
  .size-custom input:focus{border-color:var(--gold)}
  /* the native spinner lands on the wrong side in RTL and is unusable with a thumb anyway */
  .size-custom input::-webkit-outer-spin-button,
  .size-custom input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .size-custom input{-moz-appearance:textfield}
  .size-custom button{font-family:"Heebo";font-weight:700;font-size:1rem;padding:14px 18px;
       border-radius:12px;border:1px solid transparent;cursor:pointer;
       background:linear-gradient(180deg,var(--gold-ink),var(--accent));color:#fff}
  /* Styled as a text link, but it is a button and gets tapped with a thumb. Measured at
     127×20 before min-height was added -- half a finger. Nine buttons inherit this rule, and
     one of them (#mailAskResend) is the only way out for somebody whose confirmation mail
     never arrived. The padding grows the hit area without changing how it looks. */
  .ask-cancel{margin-top:14px;background:transparent;border:none;color:var(--ink-soft);
       font-family:"Heebo";font-size:.85rem;text-decoration:underline;
       min-height:44px;padding:6px 12px}
  /* ===== finishing a unit =====
     Above everything, because it should not be possible to miss and there is nothing else to
     do at that moment. The canvas sits BEHIND the card and ignores pointer events, so the
     bursts read as happening in the room rather than on top of the message. */
  .cheer{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
       padding:24px;background:radial-gradient(120% 90% at 50% 0%,#fffdf7 0%,#f6efe0 55%,#efe4d0 100%);
       animation:cheerIn .3s ease both}
  .cheer.hidden{display:none!important}
  @keyframes cheerIn{from{opacity:0}to{opacity:1}}
  .cheer-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .cheer-box{position:relative;text-align:center;max-width:340px;width:100%;
       animation:cheerRise .5s cubic-bezier(.2,.9,.25,1) .08s both}
  @keyframes cheerRise{from{opacity:0;transform:translateY(16px) scale(.96)}
                       to{opacity:1;transform:none}}
  .cheer-ring{width:78px;height:78px;margin:0 auto 18px;border-radius:50%;
       display:flex;align-items:center;justify-content:center;
       background:linear-gradient(180deg,#5aa063,#3f7a4a);color:#fffdf8;font-size:2.1rem;
       box-shadow:0 10px 26px -10px rgba(63,122,74,.7),inset 0 1px 0 rgba(255,255,255,.4);
       animation:cheerPop .5s cubic-bezier(.2,1.5,.4,1) .18s both}
  @keyframes cheerPop{from{transform:scale(0)}to{transform:scale(1)}}
  .cheer-box h2{font-family:"Frank Ruhl Libre",serif;font-size:1.85rem;font-weight:900;
       color:var(--ink);line-height:1.2}
  .cheer-unit{margin-top:9px;font-size:.78rem;letter-spacing:.16em;color:var(--accent);
       font-weight:700}
  .cheer-sub{margin-top:12px;font-size:.95rem;line-height:1.7;color:var(--ink-soft)}
  .cheer-box .ask-go{margin-top:24px}
  @media(prefers-reduced-motion:reduce){
    .cheer,.cheer-box,.cheer-ring{animation:none}
  }

  /* the "check your mail" modal.
     Above #auth, which is z-index 70 -- every other .ask sits at 60 and opens over the app, but
     this one is the only modal that opens while the login screen is still covering the page. */
  #mailAsk{z-index:80}
  .mail-box{text-align:center}
  .mail-ico{font-size:2.6rem;line-height:1;margin-bottom:10px}
  .mail-box p{margin-top:9px;font-size:.9rem;line-height:1.65;color:var(--ink-soft)}
  .mail-box p b{color:var(--ink)}
  .mail-to{font-family:"Heebo";font-weight:700;font-size:1rem!important;color:var(--accent)!important;
       word-break:break-all;background:rgba(201,150,47,.1);border-radius:9px;padding:9px 10px}
  .mail-tip{font-size:.8rem!important;border-top:1px solid var(--line);padding-top:11px;margin-top:14px!important}
  .ask-go{margin-top:18px;width:100%;font-family:"Heebo";font-weight:700;font-size:1rem;
       padding:15px;border-radius:12px;border:0;cursor:pointer;color:#fffdf8;
       display:block;text-align:center;text-decoration:none;
       background:linear-gradient(180deg,var(--gold-ink),var(--accent));
       box-shadow:0 8px 18px -9px rgba(166,60,38,.6)}
  /* כפתור סגירה בפינה, כי חגי ביקש X מפורש להזמנת הוואטסאפ. inset-inline-end = שמאל ב-RTL,
     המיקום המקובל ל-X. min 44px כדי שהאצבע תפגע בו. */
  #waAsk .ask-box{position:relative}
  .ask-x{position:absolute;top:8px;inset-inline-end:10px;background:transparent;border:0;
       color:var(--ink-soft);font-size:1.1rem;line-height:1;cursor:pointer;
       min-width:44px;min-height:44px;border-radius:10px}
  @media (hover:hover) and (pointer:fine){.ask-x:hover{color:var(--ink)}}

  /* ===== auth · "ענבר": near-black walnut, a single amber glow, thin rules, generous air.
     Full-bleed so it escapes .wrap, and it owns its own dark palette regardless of the app's. ===== */
  /* Was near-black while every other screen is cream -- the first thing a visitor saw looked
     like a different product from the one they landed in. Same palette now, and the orange
     stopped being the only bright thing on a dark field, so it can go back to being an accent. */
  /* The page was one flat cream field, so nothing on it could sit forward of anything else.
     It now has a DIRECTION of light -- warm from the top-right, a cooler blush at the lower
     left -- and the form rests on a surface that is lit by it. Still cream; just no longer flat. */
  #auth{position:fixed;inset:0;z-index:70;overflow-y:auto;color:#2c2620;
       display:flex;flex-direction:column;justify-content:center;isolation:isolate;
       padding:max(34px,env(safe-area-inset-top)) 26px max(34px,env(safe-area-inset-bottom));
       background:
         radial-gradient(120% 80% at 88% -8%, rgba(214,164,74,.30), transparent 58%),
         radial-gradient(100% 70% at -10% 108%, rgba(184,96,68,.20), transparent 60%),
         linear-gradient(168deg,#fbf7ee 0%,#f4ecdd 52%,#efe5d3 100%)}
  #auth.hidden{display:none!important}
  .au-orb{position:absolute;width:min(620px,150vw);aspect-ratio:1;border-radius:50%;
       bottom:-42vh;inset-inline-end:-28vw;pointer-events:none;z-index:-1;filter:blur(60px);
       background:radial-gradient(circle,rgba(201,150,47,.20),transparent 62%)}
  /* The card. Two shadows, not one: a tight contact shadow that says it is TOUCHING the page,
     and a wide ambient one that says the light is far away. Both warm -- a grey shadow on cream
     reads as dirt. The inset top edge is the specular line: it is the single thing that makes
     a flat rectangle look like a lit physical surface. */
  .au-card{margin-top:26px;padding:6px 22px 22px;border-radius:22px;
       background:linear-gradient(170deg,rgba(255,253,249,.96),rgba(252,247,238,.9));
       border:1px solid rgba(255,255,255,.7);
       box-shadow:
         inset 0 1px 0 rgba(255,255,255,.95),
         inset 0 -1px 0 rgba(166,60,38,.05),
         0 1px 2px rgba(120,84,48,.10),
         0 10px 24px -12px rgba(120,84,48,.22),
         0 34px 60px -28px rgba(120,84,48,.30);
       backdrop-filter:blur(2px)}
  .au-drift{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
  .au-drift b{position:absolute;font-family:"Frank Ruhl Libre",serif;font-weight:700;
       white-space:nowrap;color:rgba(166,60,38,.09);animation:auRise linear infinite}
  @keyframes auRise{0%{transform:translateY(105%);opacity:0}14%{opacity:.5}
       70%{opacity:.5}100%{transform:translateY(-45%);opacity:0}}
  @media(prefers-reduced-motion:reduce){.au-drift b{animation:none;opacity:.5}}
  .au-inner{width:100%;max-width:392px;margin:0 auto}
  .au-mark{font-family:"Frank Ruhl Libre",serif;font-weight:400;font-size:.72rem;
       letter-spacing:.44em;color:#9a8d7c}
  .au-title{font-family:"Frank Ruhl Libre",serif;font-size:clamp(2rem,8vw,2.5rem);font-weight:400;
       line-height:1.06;margin-top:15px;letter-spacing:-.012em;text-wrap:balance}
  .au-title em{font-style:normal;color:#a63c26;font-weight:700}
  .au-sub{font-size:.84rem;line-height:1.68;margin-top:12px;color:#6f6558}
  /* A recessed track with one raised tab in it -- the same physics as the fields, so the whole
     card reads as a single lit object instead of a pile of unrelated treatments. */
  .au-tabs{display:flex;gap:4px;margin:16px 0 18px;padding:4px;border-radius:14px;
       background:rgba(232,222,203,.5);
       box-shadow:inset 0 2px 4px rgba(120,84,48,.11),inset 0 -1px 0 rgba(255,255,255,.7)}
  .au-tabs button{flex:1;border:0;background:transparent;font-family:"Heebo";font-weight:500;
       font-size:.86rem;padding:11px 0;color:#8d8274;border-radius:11px;
       transition:.2s;cursor:pointer}
  .au-tabs button.active{color:#2c2620;font-weight:700;background:#fffdf8;
       box-shadow:0 1px 1px rgba(120,84,48,.10),0 4px 10px -4px rgba(120,84,48,.28),
                  inset 0 1px 0 rgba(255,255,255,.95)}
  /* Signing in is the default, so the way IN for a new user has to stay visible on its own. */
  .au-tabs button.bright{color:#a63c26;font-weight:700}
  .au-tabs button.bright.active{color:#fffdf8;
       background:linear-gradient(180deg,#b8492e,#9d3520);
       box-shadow:0 1px 1px rgba(120,40,20,.2),0 6px 14px -5px rgba(166,60,38,.55),
                  inset 0 1px 0 rgba(255,255,255,.28)}
  .au-go.bright{background:linear-gradient(180deg,#b8492e,#9d3520);color:#fffdf8;font-weight:700;
    border-color:transparent;
    box-shadow:0 1px 1px rgba(120,40,20,.18),0 12px 26px -12px rgba(166,60,38,.65),
               inset 0 1px 0 rgba(255,255,255,.3)}
  @media (hover:hover) and (pointer:fine){.au-go.bright:hover{background:#8f3220}}
  .au-slider{display:none}
  #authForm{display:flex;flex-direction:column;gap:12px}
  .au-field{position:relative;display:block}
  .au-field.hidden{display:none!important}
  /* Recessed wells, not hairlines. An empty field under a 1px rule barely reads as somewhere
     you can type; carved into the card it is unmistakable, and the inset shadow is the same
     light source as the card's own -- so the depth is consistent rather than decorative. */
  .au-field input{width:100%;font-family:"Heebo";font-size:1.02rem;padding:20px 14px 9px;
       background:linear-gradient(180deg,rgba(238,229,213,.55),rgba(248,242,232,.35));
       border:1px solid rgba(196,180,152,.45);border-radius:13px;
       color:#2c2620;outline:none;text-align:right;transition:.2s;
       box-shadow:inset 0 2px 4px rgba(120,84,48,.11),inset 0 -1px 0 rgba(255,255,255,.75)}
  .au-field input:focus{border-color:#c07a52;
       background:linear-gradient(180deg,rgba(255,252,246,.9),rgba(253,248,240,.7));
       box-shadow:inset 0 2px 5px rgba(120,84,48,.08),0 0 0 3px rgba(201,150,47,.20)}
  .au-field span{position:absolute;inset-inline-start:14px;top:17px;font-size:.94rem;color:var(--ink-soft);
       pointer-events:none;transition:.16s cubic-bezier(.2,.8,.2,1);transform-origin:right top}
  .au-field input:focus + span,.au-field input:not(:placeholder-shown) + span{
       top:3px;transform:scale(.72)}
  .au-field input:focus + span{color:#a63c26}
  .au-go{margin-top:9px;border:1px solid rgba(201,150,47,.75);color:#7d5718;border-radius:13px;
       background:linear-gradient(180deg,rgba(255,251,242,.95),rgba(246,235,214,.9));
       font-family:"Heebo";font-weight:600;font-size:1rem;padding:17px;letter-spacing:.09em;
       cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:.22s;
       box-shadow:0 1px 1px rgba(120,84,48,.10),0 8px 18px -10px rgba(120,84,48,.4),
                  inset 0 1px 0 rgba(255,255,255,.9)}
  .au-go i{font-style:normal;transition:.22s}
  /* was background:#c9962f -- white on gold is 2.62:1, the exact failure line 51 already documents
     and fixed for .btn-primary. #7d5718 is this button's own resting text colour, so hover now
     inverts the button into a colour it already wears: 6.36:1. */
  @media (hover:hover) and (pointer:fine){.au-go:hover{background:#7d5718;color:#fffdf8}}
  @media (hover:hover) and (pointer:fine){.au-go:hover i{transform:translateX(-5px)}}
  .au-go:disabled{opacity:.5;cursor:not-allowed}
  .au-link{background:transparent;border:0;color:var(--ink-soft);font-family:"Heebo";font-size:.8rem;
       text-decoration:underline;cursor:pointer;margin-top:5px}
  .au-legal{margin-top:14px;font-size:.78rem;line-height:1.6;color:var(--ink-soft);text-align:center}
  /* הודעת הפרטיות של טופס ההרשמה (ס' 11 לחוק הגנת הפרטיות, תיקון 13). עדינה בכוונה:
     קטנה, בצבע רך, בלי מסגרת · היא מיידעת ולא עוצרת. מוצגת רק בלשונית ההרשמה. */
  .au-priv{margin:2px 0 10px;font-size:.72rem;line-height:1.65;color:var(--ink-soft);text-align:right}
  .au-priv a{color:var(--ink-soft)}
  .au-legal a,.acc-legal a{color:var(--ink-soft)}
  .acc-legal{margin-top:26px;font-size:.8rem;line-height:1.7;color:var(--ink-soft)}
  /* הצהרת הגיל. align-items:flex-start כדי שהתיבה תיצמד לשורה הראשונה אם הטקסט נשבר,
     ולא תרחף באמצע. 20px ו-min-height:44px כי זו תיבה שנלחצת באגודל · הכפתורים במסכי
     ה-ask נמדדו 20 פיקסלים בדפדפן אמיתי, וזה חצי אצבע. */
  .au-check{display:flex;align-items:flex-start;gap:9px;margin-top:14px;min-height:44px;
       font-size:.82rem;line-height:1.5;color:#6b6155;cursor:pointer;text-align:right}
  .au-check input{width:20px;height:20px;margin:2px 0 0;flex:0 0 auto;accent-color:#b5651d;cursor:pointer}
  .au-check input[aria-invalid="true"]{outline:2px solid #a63c26;outline-offset:2px}
  .au-msg{margin-top:16px;font-size:.88rem;line-height:1.55;text-align:center}
  .au-msg.err{color:#a63c26} .au-msg.ok{color:#3f6b4a}
  .au-msg.hidden{display:none!important}

  /* ⛔ נמדד בבדק בית 3: בלי שם משתמש ה-<b> הפנימי ריק, ומה שנשאר הוא הריפוד
     בלבד · 22×14 פיקסלים. זה כפתור לכל דבר (onclick למסך החשבון, aria-label
     "החשבון שלי"), ואין שום לוגיקה שמסתירה אותו כשהוא ריק. הרצפה היא WCAG
     2.5.8 (AA). כשיש שם הכפתור כבר גדול בהרבה, ולכן זה אינו נראה במצב הרגיל.
     אותו שיקול בדיוק כמו ההערה על 37 הפיקסלים כמה שורות מכאן. */
  .user-badge{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.82rem;
       color:var(--ink-soft);min-width:24px;min-height:24px;
       background:transparent;border:1px solid transparent;border-radius:10px;padding:6px 10px;
       cursor:pointer;font-family:inherit}
  @media (hover:hover) and (pointer:fine){.user-badge:hover{border-color:var(--line);color:var(--ink)}}
  /* 37 פיקסלים נמדדו בדפדפן · מתחת לאצבע. .seg מעצב סרגלים שיושבים בתוך מסך תרגול
     ונלחצים פעם אחת; זה סרגל ניווט שנלחץ הלוך ושוב. */
  .acc-seg{margin:18px auto 4px;max-width:520px}
  .acc-seg button{min-height:44px}
  /* !important כי .pbtn מגדיר display:flex, ומחלקה שמסתירה חייבת לגבור עליו. הכלל
     נפרד מ-.hidden בכוונה: accProg ו-accAdmin מוסתרים מסיבות משלהם, ולשונית שהייתה
     מסירה את .hidden הייתה חושפת פאנל בקרה למי שאינו אדמין. */
  .tab-off{display:none !important}
  /* ציון דרך בכרטיס הסיום. צבע חם ולא ירוק · ירוק כבר שייך ל"בשליטה" בפס שמעליו,
     ושני ירוקים באותו כרטיס קוראים כאותו דבר. */
  .up-mile{margin-top:12px;padding:9px 12px;border-radius:12px;text-align:center;
       background:rgba(181,101,29,.10);border:1px solid rgba(181,101,29,.28);
       font-size:.86rem;line-height:1.5;color:var(--ink)}
  /* כרטיס המילה. גובה מינימלי קבוע כדי שחשיפת הפירוש לא תקפיץ את כל מסך הבית
     מתחתיו · קפיצה כזו גורמת ללחוץ בטעות על מה שהיה שם קודם. */
  .wcard{position:relative;margin:14px auto 0;max-width:520px;padding:14px 16px 13px;border-radius:18px;
       background:var(--card);border:1px solid var(--line);text-align:center;min-height:156px;
       display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  /* 44 ולא 34: זה נלחץ באגודל, ומטרה קטנה בפינה מייצרת החטאות לתוך הכרטיס עצמו. */
  .wc-x{position:absolute;top:0;inset-inline-end:0;width:44px;height:44px;
       background:transparent;border:0;border-radius:50%;font-size:.8rem;line-height:1;
       color:var(--ink-soft);opacity:.55;cursor:pointer}
  @media (hover:hover) and (pointer:fine){.wc-x:hover{opacity:1;background:var(--line)}}
  .wc-kicker{font-size:.66rem;letter-spacing:2px;color:var(--ink-soft);margin-bottom:6px}
  .wc-term{font-size:1.3rem;font-weight:700;line-height:1.35;margin-bottom:11px;color:var(--ink)}
  /* הרמקול נעוץ לשמאל למעלה כמו בתרגול (‏inset-inline-end ב-RTL הוא שמאל, בדיוק כמו
     ב-.wc-x מעליו). נעוץ ולא flex: עם flex:1 המילה נדחקה ימינה בחצי רוחב הכפתור וחדלה
     להיות ממורכזת מול הכותרת וכפתור "גלה את הפירוש" · נמדד. הריפוד הסימטרי שומר על
     המרכוז וגם מונע ממילה ארוכה לרוץ מתחת לכפתור. */
  .wc-row{position:relative;width:100%;padding-inline:45px;margin-bottom:11px}
  .wc-row .wc-term{margin-bottom:0}
  /* 20% קטן מהרמקול שבמסכי התרגול: שם הוא לצד השאלה והוא הפעולה, כאן הוא כפתור משני
     בכרטיס תצוגה. הערכים הם 0.8 מהמקור, כולל הפינה. */
  .wc-row .say{position:absolute;inset-inline-end:0;top:0;
    font-size:.84rem;padding:6px 8px;border-radius:8px}
  .wc-reveal{background:transparent;border:1px dashed var(--line);border-radius:12px;
       min-height:44px;padding:8px 18px;font-family:"Heebo";font-size:.84rem;
       color:var(--ink-soft);cursor:pointer}
  @media (hover:hover) and (pointer:fine){.wc-reveal:hover{border-color:var(--accent);color:var(--ink)}}
  .wc-mean{font-size:.92rem;line-height:1.55;color:var(--ink);margin-bottom:11px}
  .wc-acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
  /* wc-prac ולא wc-go · ראו את ההערה ב-#wcActs. שם מחלקה שחוזר פעמיים בגיליון אחד
     נפתר לטובת האחרון, וזה מה שהפך את הכפתור הזה לעיגול. */
  .wc-prac,.wc-alt{white-space:nowrap;flex:0 0 auto}
  .wc-prac{background:var(--accent);color:#fff;border:0;border-radius:12px;min-height:44px;
       padding:10px 16px;font-family:"Heebo";font-size:.85rem;cursor:pointer}
  .wc-alt{background:transparent;border:1px solid var(--line);border-radius:12px;min-height:44px;
       padding:10px 14px;font-family:"Heebo";font-size:.85rem;color:var(--ink-soft);cursor:pointer}
  /* התג של "הבאה בתור". position:relative על האריח כדי שהתג ייצמד אליו, ו-overflow
     גלוי כדי שלא ייחתך. הצבע הוא accent ולא ירוק: זו הצעה, לא הישג. */
  .tile{position:relative}
  .tile.next{border-color:var(--accent)}
  .tile-tag{position:absolute;top:-9px;inset-inline-start:50%;transform:translateX(50%);
       background:var(--accent);color:#fff;font-size:.62rem;line-height:1;white-space:nowrap;
       padding:4px 8px;border-radius:999px;font-family:"Heebo";letter-spacing:.2px}
  /* משתמשת דיווחה שלא ידעה שיש הגדרות בכלל, כי הדרך היחידה פנימה הייתה ללחוץ על השם
     שלה. שם אינו נראה כמו כפתור. הגלגל נוסף לצדו ולא במקומו: מי שכבר למד את הדרך
     הישנה לא מאבד אותה. 44 פיקסלים כי זה נלחץ באגודל. */
  .gear-btn{background:transparent;border:1px solid transparent;border-radius:10px;
       min-width:44px;min-height:44px;font-size:1.05rem;line-height:1;color:var(--ink-soft);
       cursor:pointer;margin-inline-start:4px}
  @media (hover:hover) and (pointer:fine){.gear-btn:hover{border-color:var(--line);color:var(--ink)}}
  /* account screen */
  .acc-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
       padding:4px 16px;margin-bottom:22px}
  .acc-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
       padding:13px 0;border-bottom:1px solid var(--line);font-size:.9rem}
  .acc-row:last-child{border-bottom:none}
  .acc-row span{color:var(--ink-soft)}
  .acc-row b{font-weight:600;text-align:start;direction:ltr;unicode-bidi:plaintext}
  .acc-h{font-family:"Frank Ruhl Libre",serif;font-size:1.05rem;margin:26px 0 10px;color:var(--ink)}
  /* the destructive action must not look like the two ordinary ones above it */
  .pbtn.danger-tile{border-color:#d8a99c}
  .pbtn.danger-tile .tx b{color:#a33f28}
  .acc-soon{margin-top:26px;font-size:.8rem;line-height:1.7;color:var(--ink-soft)}
  .user-badge b{color:var(--ink)}

  /* admin */
  .adm-row{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
       margin-bottom:8px}
  .adm-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .adm-top b{font-family:"Frank Ruhl Libre",serif;font-size:1.05rem}
  .adm-top .mail{color:var(--ink-soft);font-size:.82rem;direction:ltr}
  .adm-tag{font-size:.62rem;letter-spacing:.06em;background:var(--accent);color:#fff;
       border-radius:5px;padding:2px 6px;font-weight:700}
  /* open-report counter on the "בקרה" button. Sits inline rather than floating over the corner:
     the topbar buttons are small and a corner dot would clip on narrow phones. */
  .adm-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
       padding:0 5px;margin-inline-start:6px;border-radius:999px;background:#b5482e;color:#fff;
       font-size:.68rem;font-weight:800;line-height:1;vertical-align:middle;
       animation:badgePulse 1.7s ease-out 3}
  /* The pulse animates only the outer ring, never scale or opacity. A scale-in entrance froze at
     scale(0) when the badge was appended while its screen was still display:none -- an invisible
     counter is worse than no counter, so the resting state must not depend on the animation. */
  @keyframes badgePulse{0%{box-shadow:0 0 0 0 rgba(181,72,46,.55)}
       70%{box-shadow:0 0 0 9px rgba(181,72,46,0)}100%{box-shadow:0 0 0 0 rgba(181,72,46,0)}}
  @media (prefers-reduced-motion:reduce){.adm-badge{animation:none}}
  .adm-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:.76rem;color:var(--ink-soft);margin-top:6px}
  .adm-meta i{font-style:normal;color:var(--ink);font-weight:600}
  .adm-sub{margin-top:8px;display:inline-block;font-size:.72rem;padding:2px 9px;border-radius:999px;
    border:1px solid var(--line);color:var(--ink-soft)}
  .adm-sub.ok{border-color:#4e7d4e;color:#3f6b4a}
  .adm-sub.due{border-color:var(--accent);color:var(--accent)}
  .adm-sub.off{border-color:var(--line);color:var(--ink-soft)}
  .adm-acts{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px}
  /* המענה למדווח · פעולה חיובית, ולכן ירוק ולא האדום של .danger. הוא מופיע רק על
     דיווח שכבר סומן "טופל", ושם הוא הצעד הבא ולא אזהרה. */
  .adm-acts button.adm-reply{border-color:rgba(78,125,78,.5);color:var(--green)}
  @media (hover:hover) and (pointer:fine){.adm-acts button.adm-reply:hover{border-color:var(--green);background:rgba(78,125,78,.08)}}
  .adm-acts button.danger{border-color:rgba(181,72,46,.45);color:var(--accent)}
  @media (hover:hover) and (pointer:fine){.adm-acts button.danger:hover{border-color:var(--accent);background:rgba(181,72,46,.07)}}
  .adm-acts button{background:transparent;border:1px solid var(--line);border-radius:999px;
       padding:5px 13px;font-family:"Heebo";font-size:.78rem;color:var(--ink-soft)}
  @media (hover:hover) and (pointer:fine){.adm-acts button:hover{border-color:var(--gold);color:var(--ink)}}
  /* admin toolbar -- search / sort / filter */
  /* ===== progress, one ring per language =====
     The ring carries three quantities at once: the filled arc is what is solid, the paler arc
     behind it is everything met, and the track is the rest. Reading a percentage and a
     breakdown off the same shape is the point -- two numbers side by side do not say which
     language is ahead, and a shape does it before you read a digit. */
  .acc-prog{margin:6px 0 22px}
  .acc-prog.hidden{display:none!important}
  .lp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  @media(max-width:330px){.lp-grid{grid-template-columns:1fr}}
  .lp-card{display:block;width:100%;text-align:center;cursor:pointer;
       background:var(--card);border:1px solid var(--line);border-radius:16px;
       padding:16px 10px 13px;font-family:inherit;transition:.2s;
       box-shadow:0 1px 2px rgba(120,84,48,.06)}
  @media (hover:hover) and (pointer:fine){.lp-card:hover{transform:translateY(-2px);border-color:var(--gold)}}
  /* the language you are actually in */
  .lp-card.on{border-color:var(--accent);
       background:linear-gradient(180deg,#fffdf8,#fdf5ec);
       box-shadow:0 1px 2px rgba(120,84,48,.08),0 10px 22px -14px rgba(166,60,38,.5)}
  .lp-ring{position:relative;width:112px;height:112px;margin:0 auto}
  .lp-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
  .lp-ring circle{fill:none;stroke-width:11;stroke-linecap:round}
  .lp-bg{stroke:var(--paper-deep)}
  .lp-met{stroke:var(--gold);opacity:.45;transition:stroke-dasharray .7s cubic-bezier(.2,.8,.2,1)}
  .lp-sol{stroke:#4e8d55;transition:stroke-dasharray .7s cubic-bezier(.2,.8,.2,1) .1s}
  .lp-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
       justify-content:center;pointer-events:none}
  .lp-mid b{font-family:"Frank Ruhl Libre",serif;font-size:1.75rem;font-weight:900;
       color:var(--ink);line-height:1}
  .lp-mid b i{font-style:normal;font-size:.85rem;color:var(--ink-soft);margin-inline-start:1px}
  .lp-mid span{margin-top:2px;font-size:.74rem;color:var(--ink-soft)}
  .lp-legend{margin-top:11px;display:flex;flex-direction:column;gap:3px;
       font-size:.72rem;color:var(--ink-soft)}
  .lp-legend span{display:flex;align-items:center;gap:5px;justify-content:center}
  .lp-legend i{width:8px;height:8px;border-radius:50%;flex:none}
  .lp-legend i.s{background:#4e8d55}
  .lp-legend i.w{background:var(--gold)}
  .lp-legend i.n{background:var(--paper-deep);border:1px solid var(--line)}
  .lp-foot{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);
       font-size:.68rem;color:#a2968a}
  /* the streak, under both -- it belongs to the person, not to a language */
  .lp-streak{margin-top:10px;display:flex;align-items:center;gap:10px;
       background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
  .lp-streak b{font-family:"Frank Ruhl Libre",serif;font-size:1.5rem;font-weight:900;
       color:var(--ink);line-height:1}
  .lp-streak>span{font-size:.74rem;color:var(--ink-soft)}
  .lp-week{margin-inline-start:auto;display:flex;gap:4px}
  .lp-week i{width:17px;height:26px;border-radius:6px;background:var(--paper-deep);
       display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px}
  .lp-week i.on{background:linear-gradient(180deg,var(--gold),var(--accent))}
  .lp-week i.today{outline:2px solid var(--accent);outline-offset:1px}
  .lp-week em{font-style:normal;font-size:.56rem;color:var(--ink-soft)}
  .lp-week i.on em{color:#fffdf8}
  /* the top request, as the top action.
     ⭐ נבנה מחדש 21.8.2026, והכול נמדד באפליקציה החיה ב-375px לפני ואחרי:
     · הכותרת הקבועה הוצגה ב-17.92px משקל 900 והמספר המשתנה ב-13.12px משקל 400.
       מה שזהה בכל כניסה היה גדול ב-37% מהסיבה היחידה ללחוץ. המספר הוא הכותרת עכשיו.
     · העיגול היה 38px מלא · פי 2.3 מסה מהכותרת שהוא מצביע עליה. הפך לחץ דק.
     · הגרדיאנט מדד 1.15:1 מקצה לקצה, מתחת לסף שבו העין מבחינה בהפרש. ירד.
     · שני כפתורים זהים = אין ראשי. רק העליון מקבל קצה זהב.
     · 80px ⇒ 66px לכל אחד.
     ⛔ ולמה .wc-go נשאר בשמו: הוא מוגדר גם ליד #wcActs, ומחלקה חדשה בשם דומה
        יורשת את העיגול ונשברת. זה כבר קרה ל-wcPractice. */
  .weak-cta{position:relative;display:grid;grid-template-columns:auto 1fr auto;
       align-items:center;column-gap:14px;width:100%;min-height:64px;
       margin:12px 0 0;padding:12px 16px;border-radius:14px;cursor:pointer;
       text-align:start;line-height:1.35;
       border:1px solid var(--line);background:var(--card);
       box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(120,84,48,.07);
       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)}
  .weak-cta.hidden{display:none!important}
  /* המספר · Frank Ruhl Libre משקל 500, משקל שהגופן נושא ומעולם לא היה בשימוש */
  .wc-n{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:2.1rem;
       line-height:1;letter-spacing:-.02em;color:var(--accent-deep);
       font-variant-numeric:tabular-nums;min-width:1.7em;text-align:center}
  .wc-tx{min-width:0}
  .wc-tx b{display:block;font-family:"Heebo",sans-serif;font-size:.98rem;
       font-weight:600;color:var(--ink);line-height:1.3}
  .wc-tx span{display:block;margin-top:2px;font-size:.78rem;color:var(--ink-soft);line-height:1.4}
  .wc-go{flex:none;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;
       font-style:normal;font-size:1.05rem;line-height:1;color:var(--accent);opacity:.5;
       transition:transform .2s cubic-bezier(.215,.61,.355,1),opacity .2s}
  /* ⛔ inset-inline-start ולא end · ב-RTL הקצה הקורא הוא הימני, ו-end מחזיר את השמאלי */
  #homeWeak{border-color:rgba(181,72,46,.34)}
  #homeWeak::before{content:"";position:absolute;inset-block:12px;inset-inline-start:0;
       width:3px;border-radius:0 3px 3px 0;
       background:linear-gradient(180deg,var(--gold),var(--accent))}
  #homeAcquired .wc-n{font-size:1.6rem;color:var(--ink-soft)}
  /* ⭐ תגובת לחיצה · לא היה בגיליון אף כלל :active, וכל 42 כללי ההצבעה יושבים
     מאחורי hover:hover שאינו נורה בטלפון לעולם. 90ms הוא בתוך חלון 80-150. */
  .weak-cta:active{transform:scale(.985)}
  .weak-cta:active .wc-go{transform:translateX(-3px);opacity:1}
  /* ⛔ כלל אחד לכל @media, ולא שניים בבלוק אחד · השער ב-tests/61 מוודא שהטקסט
     שלפני כל כלל :hover נגמר בדיוק בסייג, ולכן כלל שני באותו בלוק נספר כלא־מסויג.
     זו התבנית בכל 42 הכללים האחרים בגיליון. */
  @media (hover:hover) and (pointer:fine){.weak-cta:hover{box-shadow: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)}}
  @media (hover:hover) and (pointer:fine){.weak-cta:hover .wc-go{transform:translateX(-3px);opacity:1}}
  @media (prefers-reduced-motion:reduce){
    .weak-cta:active{transform:none;background:var(--paper-deep)}
    .wc-go{transition:none}}
  /* the morning glance -- five numbers, above the list, before any scrolling */
  .adm-glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;
       margin:2px 0 14px}
  .adm-g{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--lift-1);
       padding:12px 10px;text-align:center}
  .adm-g b{display:block;font-family:"Frank Ruhl Libre",serif;font-size:1.6rem;
       font-weight:900;color:var(--ink);line-height:1.1}
  .adm-g span{display:block;margin-top:4px;font-size:.74rem;color:var(--ink-soft);line-height:1.4}
  .adm-g i{display:block;margin-top:2px;font-size:.66rem;color:#a2968a;font-style:normal}
  /* the only one that is bad news when it is high */
  .adm-g.warn{border-color:rgba(166,60,38,.4);background:#fff8f4}
  .adm-g.warn b{color:var(--accent)}
  .adm-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:2px 0 10px}
  .adm-tools input.adm-search,.adm-tools select{background:var(--card);border:1px solid var(--line);
       border-radius:999px;padding:8px 13px;font-family:"Heebo";color:var(--ink);min-width:0}
  .adm-tools input.adm-search{flex:1 1 200px;font-size:.86rem}
  .adm-tools input.adm-search::placeholder{color:var(--ink-soft)}
  .adm-tools select{flex:1 1 132px;font-size:.79rem;color:var(--ink-soft)}
  .adm-tools input.adm-search:focus,.adm-tools select:focus{outline:none;border-color:var(--gold);color:var(--ink)}
  .adm-count{font-size:.82rem;color:var(--ink-soft);margin-bottom:10px}
  .adm-count b{color:var(--accent);font-weight:700}
  @media (max-width:480px){ .adm-tools input.adm-search{flex-basis:100%} }

  /* level test */
  .lv-opts{display:flex;flex-direction:column;gap:9px;margin-top:22px}
  .lv-opts button{font-family:"Heebo";font-size:1.02rem;font-weight:500;text-align:right;
       background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
       transition:.13s;color:var(--ink)}
  /* דיווח משתמשת (5.8.2026): "ברגע שבחרתי תשובה, בשאלה הבאה אותו ריבוע נשאר מסומן קצת".
     זה לא שריד מצב · lvRender כותב innerHTML מחדש, כך שהכפתורים נהרסים ונבנים, ושום
     מחלקה או פוקוס אינם שורדים. מה ששורד הוא ה-:hover עצמו: במסך מגע הדפדפן משאיר
     hover על מה שנמצא מתחת לאצבע, והכפתור החדש שנבנה באותו מקום יורש אותו. התוצאה היא
     מסגרת זהב והרמה על אפשרות אחת בלבד · בדיוק "מסומן קצת".
     hover:hover ו-pointer:fine ביחד: המדיה הזאת נכונה גם למכשירים היברידיים (מסך מגע
     עם עכבר), שבהם hover:hover לבדו עדיין מחזיר אמת באצבע.
     חל גם על מבחן היחידה · #exOpts נושא את אותה מחלקה. */
  @media (hover:hover) and (pointer:fine){
    .lv-opts button:hover{border-color:var(--gold);transform:translateY(-1px)}
  }
  .lv-opts button:disabled{opacity:.55;transform:none}
  .lv-opts button.right{background:rgba(78,125,78,.14);border-color:var(--green);font-weight:700}
  .lv-opts button.wrong{background:rgba(181,72,46,.12);border-color:var(--accent)}
  .lv-dunno{display:block;margin:14px auto 0;background:transparent;border:1px solid var(--line);
       color:var(--ink-soft);border-radius:999px;padding:8px 20px;font-family:"Heebo";font-size:.88rem}
  @media (hover:hover) and (pointer:fine){.lv-dunno:hover{border-color:var(--ink-soft);color:var(--ink)}}
  .lv-badge{font-family:"Frank Ruhl Libre",serif;font-size:3.4rem;font-weight:900;color:var(--accent);
       line-height:1;letter-spacing:.02em}
  .lv-bands{display:flex;flex-direction:column;gap:7px;margin-top:24px}
  .lv-band{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);
       border-radius:11px;padding:10px 14px}
  .lv-band b{font-family:"Cascadia Mono",Consolas,monospace;font-size:.86rem;width:26px;flex:0 0 auto}
  .lv-band .bar{flex:1;height:8px;background:var(--paper-deep);border-radius:4px;overflow:hidden}
  .lv-band .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--accent))}
  .lv-band .pc{font-family:"Cascadia Mono",Consolas,monospace;font-size:.82rem;color:var(--ink-soft);
       width:42px;text-align:left;flex:0 0 auto}
  .lv-band .lbl{font-size:.78rem;color:var(--ink-soft);width:78px;flex:0 0 auto}
  .lv-offer{background:var(--card);border:1px solid var(--gold);border-radius:14px;padding:16px 18px;margin-top:20px}
  .lv-offer p{font-size:.92rem;line-height:1.55}

  /* build tag -- always know which version you're looking at */
  /* בלי opacity וזהב כהה: השקיפות הפילה את --ink-soft אל 2.84, והזהב על נייר הוא 1.81. */
  .build-tag{text-align:center;margin-top:22px;font-size:.68rem;color:var(--ink-soft);
       font-family:"Cascadia Mono",Consolas,monospace;letter-spacing:.04em}
  .build-tag b{font-weight:600;color:#8a6512}
  .build-tag .stale{color:var(--accent);font-weight:700}

  /* install call-to-action -- a real button, not an underlined hint that reads like an error */
  /* UNIT EXAM */
  .ex-parts{display:flex;flex-direction:column;gap:8px;margin-top:20px}
  .ex-part{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:11px 14px;font-size:.86rem}
  .ex-part b{font-family:"Cascadia Mono",Consolas,monospace;color:var(--accent);flex:0 0 auto}
  .ex-part span{color:var(--ink-soft);font-size:.8rem}
  .ex-fb{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
  .ex-fb .v{font-weight:700}
  .ex-fb .v.ok{color:var(--green)} .ex-fb .v.no{color:var(--accent)}
  .ex-fb .rv{font-size:.9rem;color:var(--ink-soft);margin-top:5px}
  .ex-break{display:flex;flex-direction:column;gap:7px;margin-top:22px}
  .ex-row{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:10px 14px;font-size:.86rem}
  .ex-row .nm{flex:1} .ex-row .sc{font-family:"Cascadia Mono",Consolas,monospace;font-size:.84rem;color:var(--ink-soft)}
  .ex-miss{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;
    margin-bottom:7px;font-size:.9rem}
  .ex-miss b{color:var(--accent)}
  .ex-miss .yours{font-size:.78rem;color:var(--ink-soft)}
  .ex-hist{font-size:.78rem;color:var(--ink-soft);margin-top:9px;text-align:center}

  /* PRINT SHEET -- invisible on screen, the whole page when printing */
  #sheet{display:none}
  /* Ctrl+P from anywhere used to print a blank page: the print rule hides the whole app and
     shows #sheet, which is empty until a worksheet is built. */
  @media print{
    #sheet:empty::after{content:"כדי להדפיס דף מבחן, פתח יחידה ולחץ \"דף מבחן להדפסה\".";
      display:block;padding:40px;font-size:14px;text-align:center;color:#444}
    #sizeAsk,#sheetAsk{display:none!important}

    /* Everything the app draws is irrelevant on paper; only the sheet prints. */
    body>.wrap,#auth,#installAsk,#fbFab,#fbAsk,.toast{display:none!important}
    body{background:#fff;color:#000;padding:0}
    #sheet{display:block!important;font-family:"Heebo",sans-serif;font-size:11pt;line-height:1.6}
    #sheet .sh-page{page-break-after:always;padding:14mm 12mm}
    #sheet .sh-page:last-child{page-break-after:auto}
    #sheet h1{font-family:"Frank Ruhl Libre",serif;font-size:17pt;margin-bottom:2mm}
    #sheet .sh-meta{font-size:9.5pt;color:#444;border-bottom:1.5pt solid #000;padding-bottom:3mm;margin-bottom:5mm}
    #sheet .sh-fill{display:flex;gap:8mm;font-size:10pt;margin-bottom:6mm}
    #sheet .sh-fill span{flex:1;border-bottom:.8pt solid #000;padding-bottom:1mm}
    #sheet .sh-inst{font-size:9.5pt;background:#f2f2f2;padding:3mm 4mm;margin-bottom:6mm;border-radius:2mm}
    #sheet ol{padding-inline-start:9mm}
    /* Two columns only where the answer is one short word. A Hebrew definition needs the
       full width of the page to be writable, so those sheets stay single-column. */
    #sheet ol.two{columns:2;column-gap:9mm}
    #sheet ol.two li{break-inside:avoid}
    #sheet ol li{margin-bottom:5.5mm;page-break-inside:avoid}
    #sheet .sh-q{font-weight:700}
    #sheet .sh-q.ltr{direction:ltr;display:inline-block;text-align:left}
    #sheet .sh-line{display:block;border-bottom:.8pt dotted #555;height:6mm;margin-top:1mm}
    #sheet .sh-key{columns:2;column-gap:10mm;font-size:10pt}
    #sheet .sh-key div{break-inside:avoid;margin-bottom:2mm}
    #sheet .sh-key b{font-weight:700}
    #sheet .sh-foot{margin-top:6mm;font-size:8.5pt;color:#666;text-align:center}
  }

  /* ===== INTRO =====
     The landing page was a wall of eight identical grey boxes. It is the first thing a stranger
     sees and it had to earn the next tap, so it now reads as a printed page that is being set:
     the rule draws itself, the count runs up, the cards arrive one after another. Slow and
     small on purpose -- this is a study tool, not a launch page. Every motion is opt-out via
     prefers-reduced-motion, and every colour is already in the palette. */
  #intro{position:relative;overflow-x:clip}
  #intro::before{content:"";position:absolute;inset-block:-40px 40%;inset-inline:calc(50% - 50vw);z-index:-1;pointer-events:none;
    background:
      radial-gradient(60% 45% at 50% 0%, rgba(201,150,47,.13), transparent 70%),
      radial-gradient(40% 30% at 12% 18%, rgba(181,72,46,.07), transparent 70%);
    animation:wash 14s ease-in-out infinite alternate}
  @keyframes wash{ from{opacity:.75;transform:translateY(0)} to{opacity:1;transform:translateY(-10px)} }

  .in-rise{opacity:0;animation:rise .7s cubic-bezier(.22,.8,.3,1) forwards}
  /* Two independent safety nets, because the CTA lives under this rule. `@supports`
     covers a browser that cannot run the animation at all; `.anim-done` is set from JS
     after 1.5s and covers an animation that exists but never advances. */
  @supports not (animation-name:rise){ .in-rise{opacity:1} }
  #intro.anim-done .in-rise{opacity:1}
  /* the intro reuses the shared `rise` keyframes defined above -- a second definition
     here silently overrode them for every other screen that animates in. */

  #intro .w-title em{position:relative;font-style:normal;color:var(--accent)}
  #intro .w-title em::after{content:"";position:absolute;inset-inline:0;bottom:.06em;height:.09em;
    border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--accent));
    transform:scaleX(0);transform-origin:right;animation:draw .9s .55s cubic-bezier(.22,.8,.3,1) forwards}
  @keyframes draw{ to{transform:scaleX(1)} }

  .in-stat{display:flex;align-items:baseline;justify-content:center;gap:9px;margin-top:16px}
  .in-stat b{font-family:"Frank Ruhl Libre",serif;font-size:clamp(2.4rem,11vw,3.4rem);font-weight:900;
    line-height:1;letter-spacing:-.03em;
    background:linear-gradient(100deg,var(--accent),var(--gold) 70%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    font-variant-numeric:tabular-nums}
  .in-stat span{font-size:.9rem;color:var(--ink-soft)}

  .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
  @media (max-width:430px){ .feat-grid{grid-template-columns:1fr} }
  .feat{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);
    border-radius:14px;padding:14px 16px 14px 15px;display:flex;gap:11px;align-items:flex-start;
    transition:transform .25s cubic-bezier(.22,.8,.3,1), box-shadow .25s, border-color .25s}
  /* a gold edge that grows from the top on hover -- the reading edge in RTL is the right one.
     ⛔ תוקן 21.8.2026: הקוד כתב `inset-inline-end` בזמן שההערה מעליו אומרת "הקצה
     הימני". נמדד בדפדפן תחת `direction:rtl` · `inset-inline-end` מחזיר את הקצה
     ה**שמאלי** ו-`inset-inline-start` את הימני. הפס ישב הפוך מהכוונה הכתובה. */
  .feat::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;
    background:linear-gradient(180deg,var(--gold),var(--accent));
    transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.22,.8,.3,1)}
  @media (hover:hover) and (pointer:fine){.feat:hover{transform:translateY(-3px);border-color:#d8c8a8;box-shadow:var(--shadow)}}
  @media (hover:hover) and (pointer:fine){.feat:hover::before{transform:scaleY(1)}}
  .feat i{flex:0 0 1.6rem;font-style:normal;font-size:1.15rem;line-height:1.35;opacity:.9}
  .feat div{display:flex;flex-direction:column;gap:3px;min-width:0}
  .feat b{font-family:"Frank Ruhl Libre",serif;font-size:1rem;font-weight:700}
  .feat span{font-size:.79rem;color:var(--ink-soft);line-height:1.5}

  /* the CTA breathes rather than pulses: a shadow that swells, no size change, so nothing jumps */
  #introTry{position:relative;animation:breathe 3.6s ease-in-out 1.4s infinite}
  /* side by side: neither is the main action -- the primary button above is -- and stacking two
     more full-width buttons under it makes the page read as three equal choices */
  .exam-row{cursor:pointer}
  .exam-row input{font-family:"Heebo";font-size:.86rem;border:1px solid var(--line);
       border-radius:9px;padding:7px 9px;background:var(--paper);color:var(--ink);
       flex:none;max-width:150px}
  /* the countdown on the home screen */
  .exam-pill{display:flex;align-items:center;gap:9px;margin:12px 0 2px;padding:12px 15px;
       border-radius:14px;border:1px solid rgba(166,60,38,.25);
       background:linear-gradient(135deg,#fffdf8,#fdf2e9);
       box-shadow:0 1px 2px rgba(120,84,48,.07)}
  .exam-pill.hidden{display:none!important}
  /* שלושת המספרים הם שלושה חלקים של אותה עובדה, ולכן הם באותו גודל. קודם הראשון הוצג
     ב-1.6rem והשניים האחרים ב-.82rem · מה שנקרא כמספר ענק עם שורת טקסט קטנה שבורה לצדו,
     ומשך את תשומת הלב לימים שנותרו במקום לעבודה שנותרה. ההדגשה נשארה · בעובי ובצבע. */
  .exam-pill span{font-size:.86rem;color:var(--ink-soft);line-height:1.6}
  .exam-pill em{font-style:normal;color:var(--accent);font-weight:800}
  /* שורת ציון הדרך (examTip) יושבת מתחת למספרים ולא לצדם.
     ⚠ `min-width:100%` ולא `flex-basis:100%`. הגרסה הראשונה השתמשה ב-flex-basis,
     ונמדד בדפדפן שהיא לא שברה שורה בכלל: flex-shrink הוא 1 כברירת מחדל, ולכן הפריט
     התכווץ והתיישב לצד המספרים · שתי עמודות שכל אחת נשברת בתוך עצמה, וזה נקרא כטקסט
     מעורבב. min-width אינו ניתן לכיווץ, ולכן הוא באמת דוחף לשורה חדשה.
     שקטה מהמספרים בכוונה: זו הערת דרך, לא נתון. */
  .exam-pill{flex-wrap:wrap}
  .exam-pill .pill-tip{min-width:100%;font-size:.8rem;opacity:.85;margin-top:-2px}
  .exam-pill.exam-past{cursor:pointer}
  /* בלי opacity: ‏0.9 על --ink-soft מוריד את הניגודיות מ-4.5 ל-3.87 ומפיל AA. */
  .w-note{margin-top:9px;font-size:.78rem;color:var(--ink-soft)}
  .in-two{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
  .in-two .btn{width:100%;padding-inline:6px}
  @media(max-width:340px){.in-two{grid-template-columns:1fr}}
  @keyframes breathe{
    0%,100%{box-shadow:0 8px 22px -12px rgba(181,72,46,.55)}
    50%    {box-shadow:0 14px 34px -12px rgba(181,72,46,.8)}
  }
  @media (prefers-reduced-motion:reduce){
    #intro::before,.in-rise,#intro .w-title em::after,#introTry{animation:none}
    .in-rise{opacity:1}
    #intro .w-title em::after{transform:scaleX(1)}
    .feat{transition:none}
  }
  /* a new build is ready but the moment was wrong -- one tap, no hunting for a reload button */
  .upd-bar{position:fixed;inset-inline:0;bottom:0;z-index:200;border:0;width:100%;
    background:linear-gradient(180deg,var(--gold-ink),var(--accent));color:#fff;
    font-family:"Heebo",sans-serif;font-weight:700;font-size:.92rem;
    padding:13px 16px calc(13px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -12px rgba(90,60,20,.55);animation:updIn .35s cubic-bezier(.22,.8,.3,1)}
  @keyframes updIn{ from{transform:translateY(100%)} to{transform:none} }
  @media (prefers-reduced-motion:reduce){ .upd-bar{animation:none} }

  /* STORAGE-FULL BAR -- stays until a write succeeds, unlike the toast it replaces */
  .stg-bar{position:fixed;inset-inline:0;bottom:0;z-index:210;width:100%;
    background:#8c3a24;color:#fff;font-family:"Heebo",sans-serif;font-size:.86rem;
    line-height:1.55;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -12px rgba(60,20,10,.6)}
  .stg-bar.hidden{display:none!important}

  /* PREVIEW BAR */
  /* #3a2205 ולא לבן: לבן על הזהב = 2.66:1. אותו צמד כהה-על-זהב כמו כפתור המייל. */
  .pv-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:10px;
    background:var(--gold);color:#3a2205;padding:8px 14px;border-radius:0 0 12px 12px;
    font-size:.78rem;box-shadow:var(--shadow)}
  .pv-bar.hidden{display:none!important}
  .pv-bar span{flex:1}
  .pv-bar button{background:#fff;color:var(--ink);border:0;border-radius:999px;
    padding:5px 13px;font-size:.76rem;font-family:"Heebo";cursor:pointer}
  /* DASHBOARD -- the streak stands alone; everything else lives inside its own language card,
     so the two languages are never averaged into one number. */
  .dash-streak{display:flex;align-items:center;gap:16px;background:var(--card);
    border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:14px}
  .ds-left{display:flex;align-items:baseline;gap:7px;flex:0 0 auto}
  .ds-fire{font-size:1.15rem;line-height:1}
  .ds-left b{font-family:"Frank Ruhl Libre",serif;font-size:1.9rem;font-weight:900;line-height:1}
  .ds-lbl{font-size:.72rem;color:var(--ink-soft)}
  /* seven bars = the last seven days; a filled bar is a day you practised */
  .ds-week{display:flex;gap:5px;flex:1;min-width:0}
  .ds-week i{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-style:normal}
  .ds-week i::before{content:"";display:block;width:100%;height:7px;border-radius:4px;
    background:var(--paper-deep)}
  .ds-week i.on::before{background:linear-gradient(90deg,var(--gold),var(--accent))}
  .ds-week i em{font-style:normal;font-size:.6rem;color:var(--ink-soft);line-height:1}
  .ds-week i.now em{color:var(--accent);font-weight:700}
  /* ספירה לסיום התקופה החינמית. פס ולא כרטיס: הוא נמצא מעל בחירת השפה, כלומר על המסלול
     של כל כניסה, ולכן הוא חייב להימסר במבט אחד ולא לתפוס את מקום התוכן.
     הזהב ולא האדום · זו תזכורת לתאריך, לא שגיאה. */
  /* הגרדיאנט הוא זה של הכפתור הראשי (.ask-go) ולא צבע חדש: הפס אמור למשוך את העין,
     אבל אלמנט בצבע שאינו קיים בשום מקום אחר נקרא כפרסומת שהודבקה על האפליקציה.
     המידות קטנות ב-8% מהגרסה הראשונה, לבקשת חגי · 11/16 → 10/15, והטיפוגרפיה יחד איתן. */
  .paybar{display:flex;align-items:baseline;gap:9px;justify-content:center;flex-wrap:wrap;
       position:relative;overflow:hidden;
       margin-top:16px;padding:10px 15px;border-radius:13px;
       background:linear-gradient(135deg,var(--gold),#f6b12a);
       border:0;color:#3a2205;
       box-shadow:0 6px 16px -8px rgba(166,60,38,.75);
       animation:payBreath 2.8s ease-in-out infinite}
  .paybar.hidden{display:none!important}
  /* טקסט כהה על זהב בוהק, ולא לבן. הגרסה הראשונה כאן הייתה לבן על גרדיאנט זהב→טרהקוטה,
     ונמדד יחס ניגודיות 2.62 בקצה הזהב · מתחת לסף. זה בדיוק הלקח שכבר נלמד במייל
     התזכורת: "בוהק שאי אפשר לקרוא אינו בוהק". הזוג הנוכחי נמדד 5.59 בקצה הגרוע. */
  .paybar b{font-family:"Frank Ruhl Libre",serif;font-weight:900;font-size:1.03rem;
       color:#3a2205;animation:payBeat 2.8s ease-in-out infinite}
  .paybar span{font-size:.75rem;color:rgba(58,34,5,.78)}
  /* ברק שעובר לאט. ::after ולא אלמנט נוסף, כדי שלא ייכנס לעץ הנגישות · הפס נושא
     role="status", וקורא מסך אמור לשמוע את הטקסט בלבד. */
  .paybar::after{content:'';position:absolute;top:0;bottom:0;width:38%;
       background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
       transform:skewX(-18deg);animation:paySheen 4.6s ease-in-out infinite;pointer-events:none}
  @keyframes payBreath{0%,100%{box-shadow:0 6px 16px -8px rgba(166,60,38,.75)}
                       50%   {box-shadow:0 8px 22px -8px rgba(166,60,38,.95)}}
  @keyframes payBeat  {0%,100%{transform:scale(1)} 50%{transform:scale(1.07)}}
  @keyframes paySheen {0%{inset-inline-start:-45%} 55%,100%{inset-inline-start:115%}}
  /* מי שביקש מהמערכת פחות תנועה מקבל את הפס בלי אף אנימציה. הכיתוב אינו משתנה,
     ולכן שום מידע אינו אובד. */
  @media (prefers-reduced-motion: reduce){
    .paybar,.paybar b{animation:none}
    .paybar::after{display:none}
  }
  .install-cta{display:flex;align-items:center;gap:13px;width:100%;margin-top:20px;
       background:var(--card);border:1px solid var(--gold);border-radius:16px;padding:14px 16px;
       text-align:right;transition:.18s;box-shadow:var(--shadow);font-family:"Heebo";
       text-decoration:none;color:inherit}
  @media (hover:hover) and (pointer:fine){.install-cta:hover{transform:translateY(-2px);background:rgba(201,150,47,.07)}}
  .install-cta.hidden{display:none!important}
  .install-cta .ic{font-size:1.5rem;line-height:1;flex:0 0 auto}
  .install-cta .tx{flex:1;display:flex;flex-direction:column;gap:1px}
  .install-cta .tx b{font-family:"Frank Ruhl Libre",serif;font-size:1.02rem;font-weight:700;color:var(--ink)}
  .install-cta .tx em{font-style:normal;font-size:.76rem;color:var(--ink-soft)}
  .install-cta .ar{color:var(--gold-ink);font-size:1.1rem;flex:0 0 auto;transition:.18s}
  @media (hover:hover) and (pointer:fine){.install-cta:hover .ar{transform:translateX(-4px)}}

  /* bug report -- a small persistent affordance; MVP users need it one tap away */
  /* lifted while the update bar is up -- the bar used to sit directly on top of it */
  body.has-upd .fb-fab{bottom:calc(74px + env(safe-area-inset-bottom))}
  .fb-fab{position:fixed;inset-inline-start:16px;bottom:calc(16px + env(safe-area-inset-bottom));
       z-index:55;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
       background:var(--card);box-shadow:var(--shadow);font-size:1.28rem;line-height:1;
       display:flex;align-items:center;justify-content:center;transition:.18s;padding:0}
  @media (hover:hover) and (pointer:fine){.fb-fab:hover{transform:translateY(-3px) rotate(-8deg);border-color:var(--gold)}}
  .fb-fab.hidden{display:none!important}
  .fb-box{max-width:400px;text-align:right}
  .fb-box h3{text-align:center}
  .fb-box p{text-align:center}
  .fb-kinds{display:flex;gap:7px;margin-top:16px}
  .fb-kinds button{flex:1;font-family:"Heebo";font-size:.82rem;font-weight:700;padding:9px 4px;
       border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);transition:.15s}
  .fb-kinds button.active{background:linear-gradient(180deg,var(--gold-ink),var(--accent));
       color:#fff;border-color:transparent}
  #fbBody{width:100%;margin-top:11px;font-family:"Heebo";font-size:.98rem;line-height:1.55;
       background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px;
       outline:none;resize:vertical;color:var(--ink);text-align:right}
  #fbBody:focus{border-color:var(--gold)}
  /* Was a monospace LTR block that looked like a console. It is now one quiet Hebrew line -- 
     the same information is still sent, it just no longer asks the reporter to parse it. */
  .fb-ctx{margin-top:10px;font-size:.74rem;color:var(--ink-soft);line-height:1.6;
       text-align:center;opacity:.8}

  /* install-to-home-screen */
  .install-box{max-width:380px}
  .inst-icon{font-size:2.6rem;line-height:1;margin-bottom:6px}
  .install-box h3{font-size:1.3rem}
  .install-box p{color:var(--ink-soft);font-size:.88rem;margin-top:6px;line-height:1.5}
  #instAuto{margin-top:18px}
  .inst-steps{list-style:none;text-align:right;margin-top:16px;display:flex;
       flex-direction:column;gap:10px}
  .inst-steps li{display:flex;align-items:center;gap:10px;font-size:.92rem;
       background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
  .inst-steps li span{flex:0 0 auto;width:23px;height:23px;border-radius:50%;
       background:linear-gradient(180deg,var(--gold-ink),var(--accent));color:#fff;font-weight:700;
       font-size:.78rem;display:flex;align-items:center;justify-content:center}
  .inst-steps li b{font-weight:700}
  .inst-manual{margin-top:14px;background:var(--paper);border:1px dashed var(--gold);
       border-radius:12px;padding:12px;font-size:.88rem}

  /* toast */
  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 20px;border-radius:999px;font-size:.9rem;box-shadow:var(--shadow);z-index:50;opacity:0;transition:.25s;pointer-events:none}
  .toast.show{opacity:1}