/* Accessibility: the quick menu (js/a11y.js), the skip link, high contrast, underlined links, and colour fixes so
   text meets WCAG 2.0 AA contrast (4.5:1) as IS 5568 requires. Loaded last so it wins over earlier styles. */

/* ---------- contrast fixes ---------- */
:root { --chip-dim: 74%; --ok-text: #146b3f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chip-dim: 100%; --ok-text: var(--ok); } }
:root[data-theme="dark"] { --chip-dim: 100%; --ok-text: var(--ok); }
/* level chips: light text on the level colour, darkened in the light theme so it reads */
.lv-chip { background: color-mix(in srgb, var(--lv, var(--accent)) var(--chip-dim), #000); }
.pill.ok { color: var(--ok-text); }
/* badges not yet earned: the icon fades, the text stays readable */
.badge-item:not(.got) { opacity: 1; }
.badge-item:not(.got) .badge-icon { opacity: 1; color: var(--muted); filter: grayscale(1); border-style: dashed; }
.cert-meta { color: var(--muted); }
.bk-tabs button .num { opacity: 1; }

/* ---------- skip link ---------- */
.skip-link { position: fixed; inset-inline-start: 12px; top: -60px; z-index: 1000; padding: .6em 1em; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------- quick menu ---------- */
.a11y-btn { position: fixed; inset-inline-start: 14px; bottom: 14px; z-index: 900; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--surface); background: #1f3fb0; color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
.a11y-btn svg { width: 28px; height: 28px; }
.a11y-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a11y-menu { position: fixed; inset-inline-start: 14px; bottom: 70px; z-index: 901; width: min(300px, calc(100vw - 28px)); max-height: calc(100vh - 100px); overflow: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 16px; padding: 14px; display: grid; gap: 8px;
  box-shadow: 0 12px 40px rgb(0 0 0 / .25); }
.a11y-menu[hidden] { display: none; }
.a11y-head { display: flex; justify-content: space-between; align-items: center; }
.a11y-head h2 { margin: 0; font-size: 1.1rem; }
.a11y-menu button { font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--rule); border-radius: 10px; padding: .5em .8em; cursor: pointer; text-align: start; }
.a11y-menu button:disabled { opacity: .45; cursor: default; }
.a11y-menu button:focus-visible, .a11y-menu a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.a11y-x { padding: .2em .55em !important; }
.a11y-size { display: flex; align-items: center; gap: 8px; }
.a11y-size span { flex: 1; }
.a11y-size button { min-width: 3em; text-align: center; font-weight: 700; }
.a11y-opt[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.a11y-opt[aria-pressed="true"]::after { content: ' ✓'; }
.a11y-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 6px; border-top: 1px solid var(--rule); font-size: .9rem; }
.a11y-foot a { color: var(--accent); }
html.in-lesson .a11y-btn { opacity: .6; }
html.in-lesson .a11y-btn:hover, html.in-lesson .a11y-btn:focus-visible { opacity: 1; }
@media print { .a11y-btn, .a11y-menu, .skip-link { display: none; } }

/* ---------- high contrast ---------- */
html.a11y-contrast { --muted: var(--ink); --rule: var(--ink); --hairline: var(--ink); }
html.a11y-contrast body { background: var(--bg) !important; }
html.a11y-contrast .btn, html.a11y-contrast button, html.a11y-contrast input, html.a11y-contrast select, html.a11y-contrast textarea { border: 2px solid var(--ink) !important; }
html.a11y-contrast .muted, html.a11y-contrast .small { color: var(--ink) !important; opacity: 1 !important; }
html.a11y-contrast img:not([alt=""]) { filter: contrast(1.1); }

/* ---------- underlined links ---------- */
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; }
html.a11y-links a:hover, html.a11y-links a:focus { background: #ffe066; color: #000 !important; }