/* a11y.css — site-wide accessibility layer (WCAG 2.2 AA), linked on every public page after the theme layers, since
 * 2026-10-23. Every rule here is theme-neutral or carries its own per-theme values; nothing changes page content.
 *   1. Motion: reduced motion and the visitor's "Pause animations" stop every CSS animation and transition (2.2.2, 2.3.3)
 *   2. The Pause animations buttons (header icon, footer text)
 *   3. Skip link for pages whose own CSS has none (the legal pages, the splash)
 *   4. Header menus: Escape hides a hover-opened dropdown until the pointer leaves (1.4.13)
 *   5. In-text links are underlined, not marked by colour alone (1.4.1); nav, buttons and cards excepted
 *   6. Footer trademark notice
 * Paired with motion.js (the control) and nav.js (the header menus). */

/* ── 1. Motion ────────────────────────────────────────────────────────────────────────────────────
   One reset for both triggers. Loops end (their resting frame), entrance animations land on their last
   frame at once instead of freezing invisible, transitions snap. Pages keep their own reduced-motion
   designs too; this is the floor under them, so a loop added later can't slip through. motion.js pauses
   the Web Animations and SVG loops that CSS can't reach. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}
html[data-motion="paused"], html[data-motion="paused"] *, html[data-motion="paused"] *::before, html[data-motion="paused"] *::after {
  animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}

/* ── 2. Pause animations buttons ──────────────────────────────────────────────────────────────────
   Header: a 40px icon key beside Book a Demo (pause bars; a play triangle while paused). Its name is the
   visually hidden .mt-label, which motion.js keeps as "Pause animations" / "Play animations".
   Footer: the same control as text. */
.motion-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 999px; cursor: pointer;
  color: inherit; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .24);
  font: inherit; line-height: 1;
}
.motion-toggle:hover { border-color: currentColor; }
.motion-toggle:focus-visible, .motion-toggle-text:focus-visible { outline: 2px solid var(--tm-accent, #FFB020); outline-offset: 3px; }
.motion-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.motion-toggle .mt-play { display: none; fill: currentColor; stroke-width: 1.4; }
.motion-toggle[data-state="paused"] .mt-pause, .motion-toggle[data-state="reduced"] .mt-pause { display: none; }
.motion-toggle[data-state="paused"] .mt-play, .motion-toggle[data-state="reduced"] .mt-play { display: inline; }
.motion-toggle[aria-disabled="true"], .motion-toggle-text[aria-disabled="true"] { cursor: default; opacity: .75; }
.mt-sr, .a11y-sr {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}
nav.site .motion-toggle { color: #fff; }
/* Light pages (hidden Day / Cloud themes): a dark hairline. */
html[data-final="light"] .motion-toggle, html[data-final="cloud"]:not([data-cloud="dark"]) .motion-toggle, html[data-theme="light"] .motion-toggle {
  color: #0B1622; background: #fff; border-color: rgba(11, 22, 34, .2);
}
/* Telemetry: the console key of the Login button. */
html[data-final="telemetry"] .motion-toggle { border-radius: 6px; background: #111316; border-color: #353B44; }
html[data-final="telemetry"] .motion-toggle:hover { border-color: var(--tm-accent, #FFB020); }
/* The pre-launch splash (coming-soon.html) draws its own light bar. */
header.bar .motion-toggle { flex: none; background: transparent; border-color: var(--line-3, #C9C6C0); color: var(--ink, #16181A); border-radius: 6px; }
header.bar .motion-toggle:hover { border-color: currentColor; }
@media (max-width: 380px) { .motion-toggle { width: 36px; height: 36px; } }

.motion-toggle-text {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 0; min-height: 24px; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .2em;
}
.motion-toggle-text:hover { text-decoration-thickness: 2px; }
.motion-toggle-text svg { width: 12px; height: 12px; fill: currentColor; }

/* ── 3. Skip link ───────────────────────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: 8px; top: -200px; z-index: 2147483000;
  padding: 10px 16px; border-radius: 6px; background: #111316; color: #fff; border: 1px solid #353B44;
  font: 600 14px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif; text-decoration: underline;
}
.skip-link:focus { top: 8px; outline: 2px solid var(--tm-accent, #FFB020); outline-offset: 2px; }

/* ── 4. Header menus ──────────────────────────────────────────────────────────────────────────────
   A dropdown opened by hovering can be dismissed with Escape without moving the pointer (nav.js adds
   .dd-hush to its wrapper until the pointer leaves). One opened by click/Enter (.open) closes for real. */
.site-dropdown-wrap.dd-hush .site-dropdown:not(.open),
nav.site .dd-wrap.dd-hush .dd-pop:not(.open) { opacity: 0 !important; visibility: hidden !important; }

/* ── 5. In-text links ─────────────────────────────────────────────────────────────────────────────
   Links inside running text (paragraphs, list items, definitions, table cells, FAQ answers, legal
   documents) carry an underline; colour alone isn't enough (WCAG 1.4.1). Navigation, buttons, cards,
   chips and tabs keep their own look, and so does a link that wraps a component (an icon, a heading, a
   card's blocks) rather than words. Some pages painted a 1px underline with a background gradient in the
   Studio adapter; those are switched off below so a link never shows two lines. */
main :is(p, li, dd, td, blockquote, figcaption) a:not(:is(nav, header, footer, [role="navigation"], [role="tablist"], .tabstrip, .toc, .crumb, .cp-toc, .cp-crumbs, .md-side, .md-crumbs) a):not([class*="btn"]):not([class*="card"]):not([class*="cta"]):not([class*="chip"]):not([class*="pill"]):not([class*="tab"]):not([role="button"]):not([role="tab"]):not(.cp-link):not([class*="-link"]):not(.flex):not(.inline-flex):not(.block):not(.grid):not(.md-go):not(.md-row):not(:has(svg, img, i, small, div, p, ul, ol, h2, h3, h4, h5, h6, [aria-hidden="true"])) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
main :is(p, li, dd, td, blockquote, figcaption) a:not(:is(nav, header, footer, [role="navigation"], [role="tablist"], .tabstrip, .toc, .crumb, .cp-toc, .cp-crumbs, .md-side, .md-crumbs) a):not([class*="btn"]):not([class*="card"]):not([class*="cta"]):not([class*="chip"]):not([class*="pill"]):not([class*="tab"]):not([role="button"]):not([role="tab"]):not(.cp-link):not([class*="-link"]):not(.flex):not(.inline-flex):not(.block):not(.grid):not(.md-go):not(.md-row):not(:has(svg, img, i, small, div, p, ul, ol, h2, h3, h4, h5, h6, [aria-hidden="true"])):hover {
  text-decoration-thickness: 2px;
}
html[data-theme="studio"]:is([data-studio-page="terms"], [data-studio-page="privacy"], [data-studio-page="dpa"], [data-studio-page="data-retention"], [data-studio-page="cookie-policy"], [data-studio-page="acceptable-use"]) main .doc :is(p, li) a,
html[data-theme="studio"][data-studio-page="contact"] main p > a.text-brand-blue { background-image: none; }

/* ── 6. Footer trademark notice ───────────────────────────────────────────────────────────────── */
.site-tm-note { margin: 16px 0 0; font-size: 12px; line-height: 1.6; text-align: center; }
@media (min-width: 768px) { .site-tm-note { text-align: left; } }
footer.site .site-tm-note { max-width: 1440px; margin: 16px auto 0; padding: 0 24px; color: var(--g400, #9ca3af); text-align: left; box-sizing: border-box; }
footer.foot .site-tm-note { margin-top: 10px; text-align: center; }

@media print { .motion-toggle, .motion-toggle-text, .skip-link { display: none !important; } }