/* AiLabrix — accessibility controls of our own (B16 T16-5).
 *
 * The state is four classes on <html>, set by static/js/a11y-controls.js
 * before the first paint:
 *   a11y-text-lg / a11y-text-xl  root font size; the public pages size their
 *                                text in rem, so it scales with it. STATED
 *                                LIMIT: a declaration in px does not scale —
 *                                font-size in px, measured at a907a808 over the
 *                                11 page stylesheets: marketing-shell.css 2
 *                                (the research banner, 10-11px), landing.css 3,
 *                                login / compliance / contact / blog_index /
 *                                blog_article / pricing / trust / cookies /
 *                                privacy.css 0 each; and over the partials'
 *                                sheets: partials-_hero_anim.css 36 (the hero
 *                                product-tour mockup, a fixed-size picture),
 *                                partials-_marketing_footer.css and
 *                                partials-_cookie_consent.css 0.
 *   a11y-contrast                darker text and border tokens on :root (the
 *                                marketing and login token sets); every TEXT
 *                                token there is >= 7:1 on WHITE (WCAG AAA).
 *                                The same tokens are also drawn on DARK
 *                                surfaces (the footer, the trust / contact
 *                                cards), where darker means LOWER contrast, so
 *                                the rule is «never lowers a ratio»: the block
 *                                after it re-binds the text tokens drawn there
 *                                to LIGHT values on every dark surface of the
 *                                stylesheets the pages load, each >= 7:1 on
 *                                that surface (>= 4.5:1 and never below its OFF
 *                                ratio on the four surfaces where even white
 *                                cannot reach 7:1). The surfaces are found by a
 *                                structural scan in tests/test_a11y_controls.py
 *                                — a new dark surface without a re-binding is
 *                                red there.
 *   a11y-reduce-motion           what EVERY @media
 *                                (prefers-reduced-motion:reduce) block of the
 *                                pages' stylesheets applies, rule for rule and
 *                                in the same order, plus a universal stop of
 *                                every animation and transition: the class
 *                                does AT LEAST what the system setting does
 *                                (parity pinned over the whole set by the same
 *                                scan). On /login it does more: tpl/login.css
 *                                has no reduced-motion block, so the system
 *                                setting alone leaves its blobs, robot arms
 *                                and scan line moving; the class stops them.
 * `html.<class>` (0,1,1) outranks a page's `:root` / `html` (0,1,0 / 0,0,1)
 * whatever the load order.
 *
 * No inline anything: the panel is hidden by its own class, toggled with
 * classList. Colours of the panel itself are literal so it reads the same on
 * every page, whatever tokens the page defines. */

html.a11y-text-lg{font-size:112.5%}
html.a11y-text-xl{font-size:125%}

html.a11y-contrast{
  --teal:#164E63; --teal-lt:#155E75; --teal-dk:#083344;
  --black:#000000; --gray-900:#000000; --gray-700:#1E293B;
  --gray-500:#334155; --gray-400:#475569;
  --gray-200:#64748B; --border:#475569;
  --amber-text:#78350F;
}
/* Dark surfaces: re-bind the text tokens drawn ON them to light values.
 * Custom properties inherit, so one re-binding on the surface covers every
 * descendant (the footer e-mail and brand line, the link hovers, the ✓ of the
 * trust / contact cards). Only --teal-lt and --gray-400 are drawn as text on a
 * dark surface (measured on the ten rendered pages); --teal / --teal-dk /
 * --gray-700 PAINT surfaces and are never re-bound here (a re-binding on the
 * surface would repaint the surface itself).
 * A re-binding never repaints a background: a declaration on a surface S
 * feeds EVERY rule that paints the element S matches, not only S's own
 * (`.plan.featured button` paints the element `.plan button:hover` matches
 * with linear-gradient(--teal,--teal-lt)). Where any rule of the set that can
 * match S's element paints a background with a re-bound token, the tokens are
 * re-bound on S's descendants (`S *`) and S itself keeps the class's darkened
 * :root value. Pinned structurally in tests/test_a11y_controls.py. */
html.a11y-contrast .mk-lang-menu button.on,
html.a11y-contrast .mk-footer,
html.a11y-contrast .mk-foot-langs button,
html.a11y-contrast .mk-foot-langs button.on,
html.a11y-contrast .skip,
html.a11y-contrast .mk-lang-menu button[aria-current="true"],
html.a11y-contrast .lang-menu button[aria-current="true"],
html.a11y-contrast .u-bg-linear-gradient-135deg-dc2626-b91c1c:not(#\9),
html.a11y-contrast .u-bg-linear-gradient-135deg-gray-600-gray-700:not(#\9),
html.a11y-contrast .u-bg-red:not(#\9),
html.a11y-contrast .u-bg-rgba-15-23-42-55:not(#\9),
html.a11y-contrast .u-bg-teal:not(#\9),
html.a11y-contrast .cta-btn,
html.a11y-contrast .cta-btn:hover,
html.a11y-contrast .eyebrow .pulse,
html.a11y-contrast .eyebrow .pulse::after,
html.a11y-contrast .nl-card,
html.a11y-contrast .hero .ctas a:hover *,
html.a11y-contrast .play-badge,
html.a11y-contrast .vid-toggle,
html.a11y-contrast .vid-toggle:hover,
html.a11y-contrast .stats,
html.a11y-contrast .lab-exec-node,
html.a11y-contrast .lab-flow-pkt.p2,
html.a11y-contrast .lab-legend-dot *,
html.a11y-contrast .cta-band,
html.a11y-contrast .cur-dot,
html.a11y-contrast .lang-sel button.active,
html.a11y-contrast .cert-dot,
html.a11y-contrast .hero .badge .pulse,
html.a11y-contrast .plan .ribbon,
html.a11y-contrast .plan button:hover *,
html.a11y-contrast .alt .btn:hover,
html.a11y-contrast .pillar .ph .num,
html.a11y-contrast .subprocessors th,
html.a11y-contrast .sp-icon:hover,
html.a11y-contrast .request-card *{
  --teal-lt:#ECFEFF; --gray-400:#F8FAFC;
}
html.a11y-contrast p a,
html.a11y-contrast li a{text-decoration:underline;text-underline-offset:2px}
/* The skip link (background --teal, darkened by the class) keeps its white
 * text on hover and focus: a page's `a:hover{color:var(--teal-dk)}` (0,1,1)
 * beats `.skip{color:#fff}`, and dark teal on darker teal falls to 1.47.
 * `:not(#\9)` lifts the rule over any page rule without an id. */
html.a11y-contrast .skip:not(#\9):hover,
html.a11y-contrast .skip:not(#\9):focus,
html.a11y-contrast .skip:not(#\9):focus-visible{color:#fff}

html.a11y-reduce-motion .mk-nav-dd.open,
html.a11y-reduce-motion .research-banner .dot,
html.a11y-reduce-motion .mk-nav-trig svg,
html.a11y-reduce-motion .mk-lang-btn svg{animation:none!important;transition:none!important}
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}
html.a11y-reduce-motion{scroll-behavior:auto!important}
/* The pages' own reduced-motion blocks, mirrored rule for rule, each block in
 * its own order (the universal rules of landing / pricing / contact are the
 * one above). */
/* tpl/landing.css */
html.a11y-reduce-motion .play-badge::before{animation:none}
html.a11y-reduce-motion .ai-card-tag::before{animation:none}
html.a11y-reduce-motion .diag-loop .loop-arrow,
html.a11y-reduce-motion .diag-dual .flow-beam{animation:none}
html.a11y-reduce-motion .diag-loop .tick-check{animation:none}
html.a11y-reduce-motion .lab-flow-pkt{animation:none;display:none}
html.a11y-reduce-motion .reveal{opacity:1;transform:none}
html.a11y-reduce-motion .mockup{transform:none!important}
/* tpl/partials-_hero_anim.css — scene 1 shown, the others hidden */
html.a11y-reduce-motion .scene{animation:none;opacity:0}
html.a11y-reduce-motion .scene-1{opacity:1}
html.a11y-reduce-motion .br-bar .path span{animation:none;opacity:0}
html.a11y-reduce-motion .br-bar .path span:nth-child(1){opacity:1}
html.a11y-reduce-motion .br-bar .live i,
html.a11y-reduce-motion .agentrow .top .tag i,
html.a11y-reduce-motion .agentrow .a .st.run i,
html.a11y-reduce-motion .tbl .pill.run::before{animation:none}

/* ── the control ─────────────────────────────────────────────────────────── */

.a11y-ctl{display:none}
html.a11y-ready .a11y-ctl{display:block;position:fixed;left:16px;bottom:16px;z-index:9000;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.4}

.a11y-ctl-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;border:2px solid #FFFFFF;background:#155E75;color:#FFFFFF;cursor:pointer;
  box-shadow:0 4px 14px rgba(15,23,42,.25);padding:0}
.a11y-ctl-toggle:hover{background:#164E63}
.a11y-ctl-icon{display:block;width:24px;height:24px}

.a11y-ctl-panel{position:absolute;left:0;bottom:56px;min-width:240px;max-width:min(320px,calc(100vw - 32px));
  background:#FFFFFF;color:#0F172A;border:1px solid #475569;border-radius:12px;
  box-shadow:0 18px 40px -10px rgba(15,23,42,.30);padding:12px 14px;
  display:flex;flex-direction:column;gap:8px}
.a11y-ctl-panel.is-closed{display:none}

.a11y-ctl-title{margin:0;font-weight:700;font-size:.95rem}
.a11y-ctl-row{display:flex;flex-direction:column;gap:4px}
.a11y-ctl-h{font-size:.85rem;font-weight:600}
.a11y-ctl-seg{display:flex;gap:4px}
.a11y-ctl-seg .a11y-ctl-btn{flex:1 1 0}

.a11y-ctl-btn{font:inherit;font-size:.875rem;min-height:36px;padding:6px 10px;border-radius:8px;
  border:1px solid #475569;background:#FFFFFF;color:#0F172A;cursor:pointer;text-align:left}
.a11y-ctl-seg .a11y-ctl-btn{text-align:center}
.a11y-ctl-btn:hover{background:#F1F5F9}
.a11y-ctl-btn[aria-pressed="true"]{background:#155E75;border-color:#155E75;color:#FFFFFF}
.a11y-ctl-switch[aria-pressed="true"]::after{content:" \2713"}
.a11y-ctl-reset{border-style:dashed}
.a11y-ctl-note{margin:0;font-size:.75rem;color:#334155}

.a11y-ctl-toggle:focus-visible,
.a11y-ctl-btn:focus-visible{outline:3px solid #B45309;outline-offset:2px}