/* Colony accessibility button: the settings it applies (data-a11y-* on <html>) and its own look. Phase 1, 2026-10-13. */

/* ---- a visible keyboard focus ring everywhere (WCAG 2.4.7) ---- */
:where(a[href], button, input, select, textarea, summary, [role="button"], [role="tab"], [role="menuitem"], [tabindex]):not([tabindex="-1"]):focus-visible {
    outline: 3px solid #0b5ed7 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px #fff !important;
}
@media (forced-colors: active) { :where(a[href], button, input, select, textarea):focus-visible { outline: 3px solid CanvasText !important; box-shadow: none !important; } }

/* ---- the settings ---- */
/* Text size scales everything that is sized in rem/em (Bootstrap and most of Colony). Parts still sized in px are converted in the gap-fix phase. */
html[data-a11y-text="1"] { font-size: 112.5%; }
html[data-a11y-text="2"] { font-size: 131.25%; }

html[data-a11y-links="1"] a:not(.colony-a11y__stmt) { text-decoration: underline !important; text-underline-offset: .15em; outline: 2px solid currentColor; outline-offset: 2px; font-weight: 700; }

html[data-a11y-font="1"] body,
html[data-a11y-font="1"] body *:not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not(.fa):not(i):not(svg):not(svg *) {
    font-family: Arial, Helvetica, "Segoe UI", sans-serif !important;
    letter-spacing: .02em;
    word-spacing: .08em;
}

html[data-a11y-motion="1"] *,
html[data-a11y-motion="1"] *::before,
html[data-a11y-motion="1"] *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* High contrast: black ground, white text, yellow links, white borders. Images, pictures, video, canvases (signature pads), svg charts and the button's own panel keep their colours,
   and so does anything marked data-a11y-keep (coloured status badges, image-backed blocks) together with what is inside it: such an element must carry its own readable colour pair. */
html[data-a11y-contrast="1"] body,
html[data-a11y-contrast="1"] body *:not(img):not(picture):not(svg):not(svg *):not(canvas):not(video):not([data-a11y-keep]):not([data-a11y-keep] *):not(.colony-a11y):not(.colony-a11y *) {
    background-color: #000 !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important;
}
html[data-a11y-contrast="1"] a:not(.colony-a11y *) { color: #ffe600 !important; }
html[data-a11y-contrast="1"] a:not(.colony-a11y *):visited { color: #ffb3ff !important; }
html[data-a11y-contrast="1"] button:not(.colony-a11y *),
html[data-a11y-contrast="1"] input:not(.colony-a11y *),
html[data-a11y-contrast="1"] select:not(.colony-a11y *),
html[data-a11y-contrast="1"] textarea:not(.colony-a11y *) { border: 2px solid #fff !important; }
html[data-a11y-contrast="1"] :focus-visible { outline: 3px solid #ffe600 !important; outline-offset: 2px !important; }

/* ---- the button and its panel ---- */
.colony-a11y { position: fixed; inset-block-end: 1rem; inset-inline-start: 1rem; z-index: 2147483000; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.4; }
.colony-a11y *, .colony-a11y *::before, .colony-a11y *::after { box-sizing: border-box; }
.colony-a11y__toggle { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; background: #0b5ed7; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.35); padding: 0; }
.colony-a11y__toggle:hover { background: #0a4fb3; }
.colony-a11y__toggle:focus-visible, .colony-a11y__panel button:focus-visible, .colony-a11y__panel a:focus-visible { outline: 3px solid #ffbf00; outline-offset: 2px; }
.colony-a11y__panel { position: absolute; inset-block-end: 58px; inset-inline-start: 0; width: min(18rem, calc(100vw - 2rem)); background: #fff; color: #111827; border: 2px solid #0b5ed7; border-radius: 12px; padding: .8rem; box-shadow: 0 8px 28px rgba(0,0,0,.35); display: grid; gap: .45rem; }
.colony-a11y__panel[hidden] { display: none; }
.colony-a11y__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.colony-a11y__head strong { font-size: 1.05rem; }
.colony-a11y__close { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #111827; min-width: 44px; min-height: 44px; }
.colony-a11y__label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .25rem; }
.colony-a11y__sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.colony-a11y__opt, .colony-a11y__reset { min-height: 44px; border: 2px solid #9ca3af; border-radius: 10px; background: #fff; color: #111827; font-weight: 700; font-size: .9rem; cursor: pointer; padding: .3rem .6rem; text-align: center; }
.colony-a11y__opt[aria-pressed="true"] { background: #0b5ed7; border-color: #0b5ed7; color: #fff; }
.colony-a11y__reset { border-color: #6b7280; }
.colony-a11y__stmt { color: #0b5ed7; font-weight: 700; text-align: center; padding: .4rem; }
.colony-a11y__note { margin: 0; font-size: .75rem; color: #4b5563; text-align: center; }
/* In the signed-in top navbar (the slot in _TopNavbar.cshtml): an icon button like its neighbours, and the panel drops down from under the bar so nothing is covered. */
.colony-a11y.colony-a11y--nav { position: static; z-index: auto; display: inline-flex; }
.colony-a11y--nav .colony-a11y__toggle { width: 40px; height: 40px; border: none; background: transparent; box-shadow: none; border-radius: 8px; }
.colony-a11y--nav .colony-a11y__toggle:hover { background: rgba(255,255,255,.14); }
.colony-a11y--nav .colony-a11y__panel { position: fixed; inset-block-start: calc(var(--navbar-h, 56px) + 6px); inset-block-end: auto; inset-inline-start: auto; inset-inline-end: .5rem; z-index: 2147483000; max-height: calc(100vh - var(--navbar-h, 56px) - 1rem); overflow-y: auto; }
@media print { .colony-a11y { display: none !important; } }