/* ===========================================================
   Accessibility widget -- SHARED stylesheet (DESIGN_NOTES.md section 107).
   Loaded by every page (index.html plus all three docs/*.html pages) via
   <link rel="stylesheet" href="/a11y-widget.css"> in <head>, replacing what
   used to be four separate, hand-copied copies of this same block. That
   duplication is exactly how the docs pages ended up running a stale
   version of the widget, missing later fixes and the Privacy Policy/Terms
   of Service links -- see section 105/106/107's own write-up, and the
   admin's own explicit instruction to stop duplicating this code and load
   one shared version from every page instead.
   Ported from the HookEye app's own floating widget (same billeye-blue
   visual language, same toggles + text size + reset), rebuilt here in
   plain CSS/JS since this site has no React/build step of its own.
   Each .a11y-* class below is toggled on <html> by a11y-widget.js (the
   matching shared script). Universal selector + !important is used
   defensively (pages on this site have a handful of inline styles, e.g.
   style="margin-left:0" on two .lead elements on index.html) even though a
   static page doesn't have the app's react-native-web inline-style problem
   this exact pattern was first written for.
   Known, deliberate limitation carried over from the app's own version:
   .a11y-high-contrast touches color/background-color/border-color only,
   never background-image -- an earlier pass on the app also forced
   background-image:none and that broke gradient-background menus there,
   so it's deliberately left alone here too (several sections across this
   site use gradient backgrounds that must keep rendering). */
.a11y-high-contrast,
.a11y-high-contrast *{
  background-color:#000 !important;
  color:#fff !important;
  border-color:#fff !important;
}
.a11y-underline-links a{text-decoration:underline !important}
.a11y-highlight-links a{
  background-color:#fff176 !important;
  color:#10204a !important;
  text-decoration:underline !important;
  outline:2px solid #10204a !important;
  border-radius:2px;
}
.a11y-reduce-motion,.a11y-reduce-motion *{
  animation-duration:.001ms !important;
  animation-delay:0s !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}
.a11y-text-spacing,.a11y-text-spacing *{
  letter-spacing:.04em !important;
  word-spacing:.12em !important;
  line-height:1.6 !important;
}
.a11y-dyslexia-friendly,.a11y-dyslexia-friendly *{
  font-family:Verdana,Tahoma,'Segoe UI',Arial,sans-serif !important;
  letter-spacing:.02em !important;
}
/* Same base64-encoded 64x64 SVG data URI as the app's own fixed
   version (a raw/non-base64 SVG data URI is unreliable specifically
   for `cursor`, confirmed on the app -- see that fix's own notes). */
.a11y-enlarge-cursor,.a11y-enlarge-cursor *{
  cursor:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMyAybDE4IDgtNyAyLjJMMTIgMjF6IiBmaWxsPSJibGFjayIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=') 8 5,auto !important;
}

/* Text size: a whole-page zoom (CSS transform:scale), same approach
   and same reasoning as the app -- every page on this site mixes
   literal px sizes in its own stylesheet with no rem usage at all, so a
   root font-size change would do nothing; scaling the whole subtree
   uniformly is the only approach that actually works regardless of how
   any given element's size was declared. #a11y-widget itself is a
   sibling of #a11y-zoom-root, deliberately outside it (see
   a11y-widget.js), so the floating button that can turn this back off is
   never zoomed away with everything else (the exact bug the app's own
   text-size feature had and fixed -- see AccessibilityContext.tsx). Every
   page using this shared widget must wrap its own main content in
   <div id="a11y-zoom-root">...</div> for this one feature to work; every
   page on this site already does (carried over unchanged from before this
   refactor), since a11y-widget.js only injects the widget itself, not this
   wrapper -- it looks up #a11y-zoom-root by id and simply skips the zoom
   effect if a given page doesn't have it, rather than failing. */
#a11y-zoom-root{transform-origin:top center}

#a11y-widget{position:fixed;bottom:20px;left:20px;z-index:999999;font-family:Inter,"Segoe UI",Arial,sans-serif}
#a11y-btn{width:52px;height:52px;border-radius:26px;background:#3c7cff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);padding:0}
#a11y-btn:hover{opacity:.9}
/* Mobile overflow fix (Cowork session, Oct 2026), ported from the app's
   own AccessibilityWidget.web.tsx fix (DESIGN_NOTES.md section 102/103) --
   this panel had no height cap and no internal scroll, so on a short
   mobile viewport the panel's header (title + close button) and first
   row of tiles could be pushed off the top of the screen, unreachable,
   with nothing to scroll (an absolutely/fixed-positioned element isn't
   part of normal page flow/scroll).
   #a11y-panel gets display:flex + flex-direction:column + a max-height
   cap (was: a plain block with no cap at all). .a11y-panel-header gets
   flex-shrink:0 (never compressed), .a11y-panel-body gets overflow-y:auto
   + min-height:0 (so it can actually shrink below its own content
   height, instead of the browser's default auto min-height blocking
   that) with NO flex-grow/flex-basis override -- its height only gets
   forced down from its natural size when the panel's own max-height cap
   is genuinely hit, which is exactly the one case that needs scrolling,
   and overflow-y:auto then provides it.
   Second bug, found testing this exact file on the real page with its
   real floating button in place: capping max-height to "100vh - 40" only
   accounts for #a11y-widget's own bottom:20 anchor plus a matching top
   gap -- it ignores that #a11y-btn (52px tall) and this panel's own
   margin-bottom:10px still sit BELOW the panel in the same fixed-position
   stack. When the panel is near its max-height, the whole stack (panel +
   10 + 52 = +62px beyond the panel's own height) no longer fits in
   "100vh - 40", and since the stack is anchored from the BOTTOM
   (bottom:20 on #a11y-widget), the overflow pushes the panel's TOP above
   the viewport instead -- same symptom as the original bug report, one
   level up. Fixed with max(240px, calc(100vh - 102px)): 102 = 20 (bottom
   anchor) + 62 (button + gap) + 20 (a matching top margin so the panel
   never touches the very top edge either). The app's own
   AccessibilityWidget.web.tsx has the exact same fix applied.
   Third bug (DESIGN_NOTES.md section 106): on Chrome for Android
   specifically, after opening/closing the panel a few times, the two
   newest links (Privacy Policy/Terms of Service) stopped appearing at
   all, even scrolled all the way to the bottom. Chrome for Android's
   address bar and bottom toolbar show/hide dynamically as the page is
   scrolled or interacted with, and plain `vh` does not reliably track
   that -- it can be computed against a taller "every bar hidden"
   viewport than what is actually visible at that moment, so the
   max-height cap above could let the panel's bottom content extend past
   the real, currently-visible screen even though it is still "on-page"
   by the numbers. Fixed with the modern `dvh` (dynamic viewport height)
   unit, which tracks the actual visible area live -- added as a SECOND
   max-height declaration right after the vh-based one (not a
   replacement): an older browser that does not recognize `dvh` simply
   fails to parse that one declaration and keeps the `vh` value already
   set above it; a modern one parses it fine and it wins, being later in
   the cascade at equal specificity. Same pattern applied to max-width's
   own vw-based cap, for the same reason.
   Fourth bug (section 107, this file's own reason for existing): this
   whole widget used to be copy-pasted into every page separately, and
   the three docs/*.html pages were never updated along with index.html,
   so clicking Privacy Policy/Terms of Service from the widget would open
   a page running an entirely different, older widget missing all of the
   above -- not a rendering bug at all, just four unsynchronized copies
   of the same code. Fixed by this file existing: one shared stylesheet
   (this one) and one shared script (a11y-widget.js), loaded by every
   page, so there is only one copy left to go stale. */
#a11y-panel{display:none;flex-direction:column;margin-bottom:10px;width:340px;max-width:calc(100vw - 40px);max-height:max(240px, calc(100vh - 102px));max-width:calc(100dvw - 40px);max-height:max(240px, calc(100dvh - 102px));background:#fff;border-radius:14px;overflow:hidden;border:2px solid #3c7cff;box-shadow:0 4px 10px rgba(0,0,0,.25)}
#a11y-panel.open{display:flex}
.a11y-panel-header{display:flex;align-items:center;justify-content:space-between;background:#3c7cff;color:#fff;padding:12px 16px;font-weight:700;font-size:16px;flex-shrink:0}
.a11y-panel-header button{background:none;border:0;color:#fff;font-size:16px;cursor:pointer;line-height:1}
.a11y-panel-body{padding:14px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;min-height:0}
.a11y-grid{display:flex;flex-wrap:wrap;gap:10px}
.a11y-tile{flex-grow:1;flex-basis:45%;height:92px;border-radius:12px;border:1.5px solid #3c7cff;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 6px;cursor:pointer;position:relative;color:#3c7cff;font-size:12px;font-weight:600;text-align:center;font-family:inherit}
.a11y-tile.active{background:#3c7cff;color:#fff}
.a11y-tile:disabled{opacity:.4;cursor:default}
.a11y-tile svg{stroke:currentColor}
.a11y-tile .a11y-df{font-size:20px;font-weight:800}
.a11y-badge{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:9px;background:#fff;border:1.5px solid #3c7cff;color:#3c7cff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.a11y-glyph{color:#fff;display:inline-flex;align-items:baseline;gap:1px}
.a11y-glyph .a11y-sign{font-size:18px;font-weight:800}
.a11y-glyph .a11y-t{font-size:26px;font-weight:700;font-family:Georgia,serif}
.a11y-reset{display:flex;align-items:center;justify-content:center;padding:10px;border:1.5px solid #3c7cff;border-radius:10px;margin-top:4px;background:#fff;color:#3c7cff;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.a11y-statement-link{text-decoration:none}