/* a11y.css — שכבת נגישות (ת"י 5568 AA) משותפת לכל האפליקציות. נטען אחרי styles.css.
   ניגודיות נבדקה ב-tools/contrast.js: כל טקסט ≥ 4.5:1 מול הרקעים שעליהם הוא מופיע. */

/* ---- ניגודיות: שלושה טוקנים שנפלו מתחת ל-4.5:1 ---- */
:root{--ink-faint:#5E6B78; --amber:#8A5F06; --green:#1A7058}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink-faint:#8B98A6; --amber:#E3B44C; --green:#4FC39F}}
:root[data-theme="dark"]{--ink-faint:#8B98A6; --amber:#E3B44C; --green:#4FC39F}
.u6{--uc:#8A5F06}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .u6{--uc:#E3B44C}}
:root[data-theme="dark"] .u6{--uc:#E3B44C}

/* ---- טקסט לקורא מסך בלבד ---- */
.sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; inset-inline-start:8px; top:-60px; z-index:100; background:var(--pen); color:#fff; padding:8px 14px; border-radius:5px; font-weight:700; text-decoration:none}
.skip:focus{top:8px}

/* ---- פוקוס נראה על כל רכיב שאפשר להפעיל ---- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
[tabindex]:focus-visible,svg#nl:focus-visible{outline:3px solid var(--pen); outline-offset:3px; border-radius:4px}
input.ans:focus-visible{outline:3px solid var(--pen); outline-offset:2px}
.qtext:focus,#rh:focus{outline:none}
.qtext:focus-visible,#rh:focus-visible{outline:2px dashed var(--pen); outline-offset:4px}

/* ---- כותרות שהפכו לרמות נכונות (h2 שאלה, h3 יחידה ומשוב) — אותו מראה כמו קודם ---- */
h2.qtext{font-family:var(--body); letter-spacing:0}
.uh{margin:0; font:inherit}
.uinfo .ut{display:block; margin:0; font-size:17.5px; font-weight:700; line-height:1.25; color:var(--ink); font-family:var(--body)}
.uinfo .um{font-size:12.5px; color:var(--ink-faint); font-family:var(--num)}
.fb h3{margin:0 0 5px; font-size:16px; font-weight:700}
.fb.ok h3{color:var(--green)} .fb.no h3{color:var(--red)}
.wrongs h3{font-size:14px; color:var(--ink-faint); margin:0 0 10px; font-family:var(--body)}
.wrongs .wexp{color:var(--ink-faint)}
.res h2{font-family:var(--display); font-size:26px; margin:0 0 8px}
.hint{font-size:14px; color:var(--ink-faint); text-align:center; margin:4px 0 0}

/* ---- משמעות שאינה בצבע בלבד ---- */
.mk{font-weight:900; margin-inline-start:auto; font-size:20px; line-height:1}
.opt.good .mk,.cmp .good .mk{color:var(--green)} .opt.bad .mk{color:var(--red)}
.pick .mk{font-size:22px}
.pick.good .mk{color:var(--green)} .pick.bad .mk{color:var(--red)}
.opt.bad,.pick.bad,.cmp button.bad{border-style:dashed}
.chip2.good::before{content:"✓ "} .chip2.bad::before{content:"✗ "} .chip2.miss::before{content:"○ "}
.chip2.bad{border-style:dashed}
/* נקודות ההתקדמות: שגויה מקווקווה, הנוכחית מוגבהת */
.dot.no{background:repeating-linear-gradient(135deg,var(--red) 0 3px,transparent 3px 5px); outline:1px solid var(--red)}
.dot.now{height:10px; margin-top:-2px}
.dot.ok{background:var(--green)}

/* ---- כפתורי טקסט וקישורים ---- */
.linkbtn{font:inherit; font-size:13.5px; color:var(--pen); background:none; border:0; padding:6px 2px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.reprow{margin-top:14px; text-align:start}

/* ---- ישר המספרים במקלדת ---- */
svg#nl[role="slider"]{cursor:pointer}

/* ---- הגדלה ל-200%: שום רכיב לא יוצא מהמסך ---- */
.artwrap,.lineWrap,.passage,.nonlin,.entext{max-width:100%; overflow-x:auto}
.nonlin table,.ptab,.dtab{max-width:100%}
.opt .ov{min-width:0; overflow-wrap:anywhere}
img,svg{max-width:100%}
@media (max-width:420px){.cmp button{width:64px}}

@media (prefers-reduced-motion:reduce){*{animation:none!important; scroll-behavior:auto!important}}