/* Accessibility layer shared by every page: skip link, visible focus, the user's own display settings. */
.skip {
  position: absolute; inset-inline-start: 8px; top: -80px; z-index: 1000;
  background: #0E1A2B; color: #fff; padding: 12px 18px; border-radius: 0 0 8px 8px;
  font: 600 17px "Assistant", "Noto Sans Arabic", system-ui, sans-serif; text-decoration: none;
}
.skip:focus { top: 0; outline: 3px solid #FFD84D; outline-offset: 0; }

:focus-visible { outline: 3px solid var(--mark, #0A7A5F); outline-offset: 3px; }
main:focus { outline: none; }

/* the user's text size: every font size of the page is multiplied by --tz (set by the toolbar); layout stays */

html:root[data-hc="1"] {
  --paper: #000; --card: #000; --ink: #fff; --ink-soft: #fff; --line: #fff;
  --mark: #FFE600; --mark-soft: #000; --redline: #FF9C9C; --shadow: none;
}
html:root[data-hc="1"] body { background: #000; color: #fff; }
html:root[data-hc="1"] .btn { background: #FFE600; color: #000; border: 2px solid #fff; }
html:root[data-hc="1"] .btn.ghost { background: #000; color: #fff; border: 2px solid #fff; }
html:root[data-hc="1"] .drop, html:root[data-hc="1"] .tool, html:root[data-hc="1"] .grid3 > div { border-color: #fff; }
html:root[data-hc="1"] a { color: #FFE600; }
html[data-ul="1"] a { text-decoration: underline !important; text-underline-offset: 3px; }
html[data-rf="1"] body, html[data-rf="1"] h1, html[data-rf="1"] h2, html[data-rf="1"] h3, html[data-rf="1"] .brand,
html[data-rf="1"] .sheet { font-family: Arial, "Noto Sans Arabic", Tahoma, sans-serif !important; letter-spacing: .01em; }

/* the toolbar */
.a11y-btn {
  position: fixed; inset-inline-start: 14px; bottom: 14px; z-index: 900;
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
  background: #0A5FB0; color: #fff; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.a11y-btn svg { width: 30px; height: 30px; fill: currentColor; }
.a11y-panel {
  position: fixed; inset-inline-start: 14px; bottom: 76px; z-index: 900; width: min(320px, calc(100vw - 28px));
  background: #fff; color: #0E1A2B; border: 2px solid #0E1A2B; border-radius: 12px; padding: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.4); font: 500 17px/1.5 "Assistant", "Noto Sans Arabic", system-ui, sans-serif;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font: 700 19px/1.3 "Assistant", "Noto Sans Arabic", system-ui, sans-serif; margin: 0 0 10px; }
.a11y-panel .row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.a11y-panel button {
  flex: 1 1 auto; min-height: 44px; padding: 8px 12px; border-radius: 8px; border: 2px solid #0E1A2B; background: #fff;
  color: #0E1A2B; font: 600 16px "Assistant", "Noto Sans Arabic", system-ui, sans-serif; cursor: pointer;
}
.a11y-panel button[aria-pressed="true"] { background: #0E1A2B; color: #fff; }
.a11y-panel a { color: #0A5FB0; font-weight: 600; }
.a11y-panel .reset { border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .skip { transition: none; } }

/* the secondary button keeps the page's text colour in dark mode too (the main button's dark-on-green rule must not reach it) */
.btn.ghost, :root:not([data-theme="light"]) .btn.ghost, [data-theme="dark"] .btn.ghost { color: var(--ink); }
html:root[data-hc="1"] .a11y-panel a { color: #0A3A78; }

/* the visible call to action inside the drop zone (the whole zone is the button; this only says so) */
.drop .pick { display: inline-block; margin-top: 14px; padding: 9px 22px; border-radius: 8px; background: var(--mark); color: #fff;
  font-weight: 700; font-size: 17px; }
:root:not([data-theme="light"]) .drop .pick, [data-theme="dark"] .drop .pick { color: #07281F; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .drop .pick { color: #fff; } }
html:root[data-hc="1"] .drop .pick { background: #FFE600; color: #000; }

/* the link in the footer that opens the panel, and the panel when it opens from there */
.a11y-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.a11y-panel.low { bottom: 14px; }