/*
 * The accessibility tool (a11y.js): the button and its panel, and what each option does to the page.
 * Loaded only while the tool is switched on in Settings. The options are classes on <html>:
 * data-a11y-text="1-3", a11y-spacing, a11y-font, a11y-contrast, a11y-links, a11y-still, a11y-cursor.
 * The tool itself (.a11y) is left out of every one of them, so it stays the same size and colour.
 */

/* ------------------------------------------------------------------ Button and panel */
.a11y { --a11y-accent: #1d4ed8; --a11y-ink: #fff; position: fixed; z-index: 1500; font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: normal; word-spacing: normal; }
.a11y[data-pos="bottom-right"] { right: 16px; bottom: 16px; }
.a11y[data-pos="bottom-left"] { left: 16px; bottom: 16px; }
.a11y[data-pos="top-right"] { right: 16px; top: calc(var(--adminbar-h, 0px) + 16px); }
.a11y[data-pos="top-left"] { left: 16px; top: calc(var(--adminbar-h, 0px) + 16px); }
.a11y-fab { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--a11y-accent); color: var(--a11y-ink); cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
.a11y-fab:hover { filter: brightness(1.1); }
.a11y-fab svg { width: 30px; height: 30px; fill: currentColor; }
.a11y :is(button, a):focus-visible { outline: 3px solid #000; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }

.a11y-panel { position: absolute; width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow-y: auto; padding: 16px; border: 1px solid #c9ced6; border-radius: 14px; background: #fff; color: #14181d; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.a11y-panel[hidden] { display: none; }
.a11y[data-pos^="bottom"] .a11y-panel { bottom: 64px; }
.a11y[data-pos^="top"] .a11y-panel { top: 64px; }
.a11y[data-pos$="right"] .a11y-panel { right: 0; }
.a11y[data-pos$="left"] .a11y-panel { left: 0; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.a11y-head h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: inherit; }
.a11y-close { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #eef0f3; color: #14181d; font-size: 22px; line-height: 1; cursor: pointer; }
.a11y-close:hover { background: #dde1e7; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-opt { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; border: 2px solid #c9ced6; border-radius: 10px; background: #fff; color: #14181d; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.a11y-opt:hover { border-color: var(--a11y-accent); }
.a11y-opt[aria-pressed="true"] { border-color: var(--a11y-accent); background: #eaf0ff; }
.a11y-opt .a11y-tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 2px solid #8a92a0; border-radius: 5px; font-size: 14px; line-height: 1; color: transparent; }
.a11y-opt[aria-pressed="true"] .a11y-tick { border-color: var(--a11y-accent); background: var(--a11y-accent); color: var(--a11y-ink); }
.a11y-size { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 2px solid #c9ced6; border-radius: 10px; }
.a11y-size > span { flex: 1; font-size: 15px; }
.a11y-size button { width: 40px; height: 40px; padding: 0; border: 2px solid #c9ced6; border-radius: 8px; background: #fff; color: #14181d; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
.a11y-size button:hover:not(:disabled) { border-color: var(--a11y-accent); }
.a11y-size button:disabled { opacity: .4; cursor: default; }
.a11y-size output { min-width: 3.2em; text-align: center; font-size: 15px; font-weight: 600; }
.a11y-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; }
.a11y-reset { padding: 8px 14px; border: 2px solid #14181d; border-radius: 10px; background: #14181d; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.a11y-reset:hover { background: #2a313a; }
.a11y-statement { font-size: 15px; color: #1d4ed8; text-decoration: underline; }
.a11y-note { margin: 10px 0 0; font-size: 13px; color: #4a5260; }

@media (max-width: 480px) {
  .a11y-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ Text size (the page is zoomed, so sizes set in px follow) */
html[data-a11y-text="1"] body > :not(.a11y, .lightbox, .pdfbox, .motion-toggle, script, style, link) { zoom: 1.15; }
html[data-a11y-text="2"] body > :not(.a11y, .lightbox, .pdfbox, .motion-toggle, script, style, link) { zoom: 1.3; }
html[data-a11y-text="3"] body > :not(.a11y, .lightbox, .pdfbox, .motion-toggle, script, style, link) { zoom: 1.5; }

/* ------------------------------------------------------------------ Text spacing (the amounts WCAG 1.4.12 asks pages to survive) */
html.a11y-spacing body :not(.a11y, .a11y *) { line-height: 1.8 !important; letter-spacing: .06em !important; word-spacing: .12em !important; }
html.a11y-spacing body p:not(.a11y *) { margin-bottom: 1.5em !important; }

/* ------------------------------------------------------------------ Readable font */
html.a11y-font body :not(.a11y, .a11y *, code, pre, pre *, svg, svg *) { font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif !important; }

/* ------------------------------------------------------------------ Underlined links */
html.a11y-links body a:not(.a11y *) { text-decoration: underline !important; text-underline-offset: .15em; }

/* ------------------------------------------------------------------ High contrast: white on black, yellow links; pictures and videos stay as they are */
html.a11y-contrast { color-scheme: dark; --bg: #000; --surface: #000; --text: #fff; --muted: #fff; --border: #fff; --accent: #ffe14d; --accent-ink: #000; --code-bg: #000; }
html.a11y-contrast body :not(.a11y, .a11y *, .b-bgvideo-shade, .b-slide-shade, img, video, iframe, picture, source) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.a11y-contrast body a:not(.a11y *),
html.a11y-contrast body a:not(.a11y *) * { color: #ffe14d !important; -webkit-text-fill-color: #ffe14d !important; }
html.a11y-contrast body :is(button, .b-button, input, textarea, select):not(.a11y *) { border: 2px solid #fff !important; }
html.a11y-contrast body :focus-visible:not(.a11y *) { outline: 3px solid #ffe14d !important; outline-offset: 2px; }
html.a11y-contrast body :is(.b-slide-shade, .b-bgvideo-shade) { background-color: rgba(0, 0, 0, .7) !important; }

/* ------------------------------------------------------------------ Stop animations */
html.a11y-still body :not(.a11y, .a11y *), html.a11y-still body :not(.a11y, .a11y *)::before, html.a11y-still body :not(.a11y, .a11y *)::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-still .fx-enter { opacity: 1 !important; }
html.a11y-still .b-marquee-track { width: auto; flex-wrap: wrap; justify-content: center; }
html.a11y-still .b-marquee-group[aria-hidden] { display: none; }
html.a11y-still .b-marquee.is-fade { -webkit-mask-image: none; mask-image: none; }

/* ------------------------------------------------------------------ Large cursor */
html.a11y-cursor, html.a11y-cursor body :not(.a11y, .a11y *) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-6.5 1.2 4 7.3-3.2 1.7-4-7.4L4 19z' fill='%23000' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important;
}
html.a11y-cursor body :is(a, button, summary, label, select, [role="button"], input[type="checkbox"], input[type="radio"]):not(.a11y, .a11y *) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.5a1.6 1.6 0 0 1 3.2 0V10l1.6-.4a1.6 1.6 0 0 1 2 1.1l.3.2a1.6 1.6 0 0 1 2 1.2l.4.1a1.6 1.6 0 0 1 1.5 1.8L19.5 19c-.4 2-2 3.3-4 3.3h-3.6c-1.4 0-2.4-.6-3.2-1.6L5 15.8a1.5 1.5 0 0 1 2.3-1.8L9 15.6z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 12 3, pointer !important;
}