/**
* The accessibility panel, in a file that travels.
*
* Three sites, three sets of design tokens: gpt uses --paper and --ink and
* --green-ink, patran uses --paper and --rule and --solved, activo uses --bg
* and --line and --brand. So every colour here is read through a var() with a
* fallback, and each site sets --a11y-accent to whatever its own accent is.
* Nothing below needs to know which site it is on.
*/
/* ── accessibility preferences ─────────────────────────────────────────────
Display settings a reader may want that the browser does not gather in one
place. Everything here is a class on or a custom property; nothing
rewrites the document. An overlay that injects ARIA to "fix" semantics for
a screen-reader user usually breaks them instead, which is the whole reason
that category of widget is objected to. */
:root{--a11y-text:1;--a11y-line:1;--a11y-space:0px}
html.a11y-text body{font-size:calc(17px * var(--a11y-text))}
html.a11y-line body,html.a11y-line p,html.a11y-line li,html.a11y-line dd{
line-height:calc(1.75 * var(--a11y-line))}
html.a11y-line h1,html.a11y-line h2,html.a11y-line h3{line-height:calc(1.2 * var(--a11y-line))}
html.a11y-space p,html.a11y-space li,html.a11y-space dd,html.a11y-space dt,
html.a11y-space h1,html.a11y-space h2,html.a11y-space h3{letter-spacing:var(--a11y-space)}
/* High contrast rewrites the tokens rather than the rules, so it reaches
every component at once. All three sites' names are listed: a site that does
not define one simply ignores it. */
html.a11y-contrast{
--paper:#fff;--paper-2:#fff;--paper-3:#F2F2F2;--card:#fff;--sunk:#F2F2F2;
--bg:#fff;--bg-2:#fff;--bg-3:#F2F2F2;--fill:#F2F2F2;
--ink:#000;--ink-2:#000;--ink-3:#2B2B2B;
--line:#000;--line-2:#000;--line-3:#000;--rule:#000;--rule-2:#000;--dark-rule:#000;
--green-ink:#00562B;--solved-ink:#00443A;--brand-ink:#00209E;--brand-lt:#F2F2F2;--brand-050:#F2F2F2}
html.a11y-contrast body{background:#fff;color:#000}
html.a11y-contrast a{text-decoration:underline}
html.a11y-contrast img{filter:contrast(1.15)}
/* The inversion runs on the root and is undone on media, so a photograph does
not come back as its own negative. */
html.a11y-invert{filter:invert(1) hue-rotate(180deg);background:#fff}
html.a11y-invert img,html.a11y-invert video,html.a11y-invert iframe,
html.a11y-invert .badge img,html.a11y-invert .av__g svg{filter:invert(1) hue-rotate(180deg)}
html.a11y-links a{text-decoration:underline!important;text-underline-offset:3px;
text-decoration-thickness:2px;text-decoration-skip-ink:none;
background:color-mix(in oklab,var(--a11y-accent, var(--green, var(--solved, var(--brand, #2FBF6C)))) 16%,transparent);
border-radius:3px;padding:.05em .18em;box-decoration-break:clone}
/* Chrome links already read as controls: they keep the underline but lose the
tint, which would otherwise sit behind a pill that has its own fill. */
html.a11y-links .badge a,html.a11y-links .hdr__cta,html.a11y-links .go,
html.a11y-links .nav a,html.a11y-links .crumbs a,html.a11y-links .skip{
background:none;padding:0}
/* The wordmark is a picture of a name, not a link in running text. Underlining
it changes what the brand looks like and tells the reader nothing. */
html.a11y-links .mark,html.a11y-links .logo,html.a11y-links [class*=logo]{
background:none;padding:0;text-decoration:none!important}
/* The panel styles the page; it does not style itself. Scoped to links inside
it: the trigger is a button, so the tint was never going to reach it, and
naming it here only stripped the dark background it is drawn with — a white
icon on nothing, which is what the operator saw. */
html.a11y-links .a11y a{background:none;padding:0;text-decoration:none!important}
html.a11y-heads .a11y h1,html.a11y-heads .a11y h2,html.a11y-heads .a11y h3{
outline:0;background:none}
html.a11y-heads h1,html.a11y-heads h2,html.a11y-heads h3{
outline:2px solid var(--a11y-accent, var(--green-ink, var(--solved-ink, var(--brand-ink, #1F7A4D))));outline-offset:8px;border-radius:6px;
background:color-mix(in oklab,var(--a11y-accent, var(--green, var(--solved, var(--brand, #2FBF6C)))) 9%,transparent)}
html.a11y-readable body,html.a11y-readable h1,html.a11y-readable h2,html.a11y-readable h3{
font-family:'IBM Plex Sans Hebrew',Arial,system-ui,sans-serif!important;
font-variant-ligatures:none;word-spacing:.06em}
html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml;utf8,\
") 5 2,auto!important}
html.a11y-cursor a,html.a11y-cursor button,html.a11y-cursor summary,html.a11y-cursor label,
html.a11y-cursor [role=button],html.a11y-cursor input[type=range]{
cursor:url("data:image/svg+xml;utf8,\
") 10 2,pointer!important}
.a11y__open{position:fixed;inset-inline-start:18px;bottom:18px;z-index:70;
width:52px;height:52px;border-radius:50%;border:1px solid var(--a11y-line, var(--line, var(--rule, #E3E3DD)));
background:var(--ink, #131311);color:var(--a11y-bg, var(--paper, var(--bg, #fff)));display:grid;place-items:center;cursor:pointer;
box-shadow:0 10px 30px -12px rgba(19,19,17,.6);transition:transform .2s ease}
.a11y__open:hover{transform:scale(1.06)}
.a11y__open svg{width:26px;height:26px}
/* The panel is hidden with the hidden attribute, and the rule below sets
display:flex — an author declaration, which beats the browser's own
[hidden]{display:none} in the UA sheet. On gpt that was masked by a site-wide
[hidden]{display:none!important}; activo and patran have no such rule, so the
panel rendered open on every page without anybody touching it. A stylesheet
meant to travel cannot assume the host site has that rule. */
.a11y[hidden]{display:none!important}
.a11y{position:fixed;inset-inline-start:18px;bottom:80px;z-index:71;width:min(330px,calc(100vw - 36px));
max-height:min(78vh,640px);overflow:auto;background:var(--a11y-card, var(--card, var(--paper-2, var(--bg-2, #fff))));border:1px solid var(--a11y-line, var(--line, var(--rule, #E3E3DD)));
border-radius:22px;padding:18px;box-shadow:0 30px 70px -30px rgba(19,19,17,.55);
display:flex;flex-direction:column;gap:16px}
.a11y__top{display:flex;align-items:center;justify-content:space-between}
.a11y__top b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.a11y__x{width:32px;height:32px;border-radius:50%;border:1px solid var(--a11y-line, var(--line, var(--rule, #E3E3DD)));
background:var(--a11y-card, var(--card, var(--paper-2, var(--bg-2, #fff))));color:var(--ink-2, #555);font:inherit;font-size:13px;cursor:pointer}
.a11y__x:hover{background:var(--a11y-sunk, var(--sunk, var(--paper-3, var(--bg-3, #F1F1EF))));color:var(--ink, #131311)}
.a11y__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.a11y__t{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 4px;
border:1px solid var(--a11y-line, var(--line, var(--rule, #E3E3DD)));border-radius:14px;background:var(--a11y-card, var(--card, var(--paper-2, var(--bg-2, #fff))));color:var(--ink, #131311);
font:inherit;font-size:11px;font-weight:600;line-height:1.2;text-align:center;cursor:pointer;
min-height:78px;transition:border-color .15s ease,background .15s ease}
/* "הדגשת קישורים" is the longest label and was the only one wrapping; the
others get the same two-line box so the row keeps one baseline. */
.a11y__t span{display:block;min-height:2.4em;display:flex;align-items:center;text-align:center}
.a11y__t svg{width:20px;height:20px;flex:none}
.a11y__t:hover{border-color:var(--ink, #131311)}
.a11y__t[aria-pressed="true"]{background:var(--ink, #131311);color:var(--a11y-bg, var(--paper, var(--bg, #fff)));border-color:var(--ink, #131311)}
.a11y__s{display:flex;flex-direction:column;gap:7px}
.a11y__s label{display:flex;justify-content:space-between;align-items:baseline;
font-size:13px;font-weight:600;color:var(--ink-2, #555)}
.a11y__s output{font-family:var(--mono, ui-monospace, monospace);font-size:12px;color:var(--ink-3, #777);direction:ltr}
.a11y__s input[type=range]{width:100%;accent-color:var(--a11y-accent, var(--green-ink, var(--solved-ink, var(--brand-ink, #1F7A4D))));height:24px}
.a11y__foot{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--a11y-line, var(--line, var(--rule, #E3E3DD)))}
.a11y__reset{padding:11px;border-radius:12px;border:1px solid var(--a11y-line, var(--line, var(--rule, #E3E3DD)));background:var(--a11y-card, var(--card, var(--paper-2, var(--bg-2, #fff))));
color:var(--ink, #131311);font:inherit;font-size:14px;font-weight:600;cursor:pointer;min-height:44px}
.a11y__reset:hover{background:var(--a11y-sunk, var(--sunk, var(--paper-3, var(--bg-3, #F1F1EF))))}
.a11y__doc{text-align:center;font-size:13px;color:var(--ink-3, #777);padding:6px}
.a11y__doc:hover{color:var(--a11y-accent, var(--green-ink, var(--solved-ink, var(--brand-ink, #1F7A4D))))}
.a11y__open:focus-visible,.a11y button:focus-visible,.a11y a:focus-visible,
.a11y input:focus-visible{outline:3px solid var(--a11y-accent, var(--green, var(--solved, var(--brand, #2FBF6C))));outline-offset:2px}
@media(max-width:520px){.a11y{inset-inline:12px;width:auto}}
@media print{.a11y,.a11y__open{display:none}}