/* Accessibility panel and optional reading preferences. The site is usable without them. */

/* Text size: every size in site.css is rem-based, so the root size scales the whole page. */
html[data-a11y-size="100"] { font-size: 100%; }
html[data-a11y-size="115"] { font-size: 115%; }
html[data-a11y-size="130"] { font-size: 130%; }
html[data-a11y-size="150"] { font-size: 150%; }
html[data-a11y-size="175"] { font-size: 175%; }
html[data-a11y-size="200"] { font-size: 200%; }

/* Launcher */
#a11y-toggle {
  position: fixed; z-index: 60; left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 20px rgba(16, 17, 20, .14); cursor: pointer;
  transition: transform .2s var(--ease);
}
#a11y-toggle:hover { transform: scale(1.05); }
#a11y-toggle svg { width: 22px; height: 22px; }
body.menu-open { overflow: hidden; }
body.menu-open #a11y-toggle { display: none; }
/* The chat widget sets display inline with !important; visibility still hides it and its shadow tree. */
body.menu-open [data-reso-widget] { visibility: hidden !important; }

/* Panel */
#a11y-panel {
  position: fixed; inset: auto auto max(78px, calc(env(safe-area-inset-bottom) + 70px)) max(20px, env(safe-area-inset-left));
  width: min(380px, 100vw - 32px); max-height: calc(100dvh - 100px); margin: 0; padding: 22px; overflow: auto; overscroll-behavior: contain;
  border: 0; border-radius: 24px; background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 80px rgba(16, 17, 20, .28); line-height: 1.5;
}
#a11y-panel::backdrop { background: rgba(8, 9, 11, .2); }
.a11y-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a11y-heading h2 { font-size: 1.1875rem; letter-spacing: -.015em; }
#a11y-panel [data-a11y-close] { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--chip); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
#a11y-panel > p:not(.a11y-note) { margin-top: 4px; font-size: .875rem; color: var(--muted); }

.a11y-appearance { display: grid; gap: 10px; margin-top: 18px; padding: 16px 0; border-block: 1px solid var(--line); }
.a11y-appearance strong { display: block; font-size: .875rem; }
.a11y-appearance [data-theme-current] { display: block; font-size: .8125rem; color: var(--muted); }
.theme-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--chip); }
.theme-switch button { min-height: 38px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: .875rem; font-weight: 600; cursor: pointer; }
.theme-switch button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.a11y-text-controls { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 6px; align-items: center; margin-top: 16px; }
.a11y-text-controls > span { grid-column: 1 / -1; font-size: .875rem; font-weight: 600; }
.a11y-text-controls button, .a11y-options button, .a11y-reset {
  min-height: 44px; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--chip); color: var(--ink);
  font-size: .875rem; font-weight: 600; cursor: pointer; overflow-wrap: anywhere;
}
.a11y-text-controls button:disabled { opacity: .4; cursor: default; }
.a11y-text-controls #a11y-text-size { display: grid; place-items: center; font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.a11y-text-controls [data-text-size="reset"] { grid-column: 1 / -1; }
.a11y-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.a11y-options button { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.a11y-options button::after { content: ""; flex: none; width: 30px; height: 18px; border-radius: 9px; background: var(--line-2); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s; }
.a11y-options button[aria-pressed="true"] { background: color-mix(in srgb, var(--pos) 14%, var(--chip)); }
.a11y-options button[aria-pressed="true"]::after { background: var(--pos) radial-gradient(circle at 70% 50%, #fff 0 5px, transparent 5.5px); }
.a11y-options button[aria-pressed="false"]::after { background: #8a8c93 radial-gradient(circle at 30% 50%, #fff 0 5px, transparent 5.5px); }
.a11y-reset { width: 100%; margin-top: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.a11y-note { margin-top: 14px; font-size: .8125rem; color: var(--muted); }
.a11y-note a { color: var(--ink); }

/* Optional preferences */
html[data-a11y-links="true"] a:not(.button):not(.brand):not(.nav-download) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; }
html[data-a11y-font="true"] :is(body, button, input, select, h1, h2, h3, h4, .brand, .price) { font-family: Verdana, Arial, Helvetica, sans-serif !important; letter-spacing: normal !important; }
html[data-a11y-spacing="true"] :is(p, li, summary, dd, .lede) { line-height: 1.9 !important; letter-spacing: .02em !important; word-spacing: .1em !important; }
html[data-a11y-spacing="true"] :is(h1, h2, h3) { line-height: 1.3 !important; letter-spacing: 0 !important; }
html[data-a11y-motion="true"] *, html[data-a11y-motion="true"] *::before, html[data-a11y-motion="true"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-a11y-motion="true"] { scroll-behavior: auto !important; }
html[data-a11y-motion="true"] .dev--fold { --fold: 18deg; }
.reading-guide { position: fixed; z-index: 55; left: 0; right: 0; height: 4px; margin-top: -2px; background: #f5a524; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }
.reading-guide[hidden] { display: none; }
/* A pointer-following guide has nothing to follow on touch screens. */
@media (hover: none) and (pointer: coarse) { [data-a11y-option="guide"] { display: none !important; } }

/* High contrast changes the page colors only; app screenshots keep their real colors. */
html[data-a11y-contrast="true"] {
  --bg: #ffffff; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #ffffff;
  --ink: #000000; --ink-2: #000000; --muted: #1a1a1a; --faint: #1a1a1a;
  --line: #000000; --line-2: #000000; --chip: #ececec; --btn: #000000; --btn-ink: #ffffff; --btn-hover: #000000; --pos: #005c2e; --neg: #a40000; --focus: #000000;
  --glow-warm: transparent; --glow-cool: transparent; --glow-soft: transparent;
}
html[data-a11y-contrast="true"][data-theme="dark"] {
  --bg: #000000; --bg-2: #000000; --surface: #000000; --surface-2: #000000;
  --ink: #ffffff; --ink-2: #ffffff; --muted: #f0f0f0; --faint: #f0f0f0;
  --line: #ffffff; --line-2: #ffffff; --chip: #262626; --btn: #ffffff; --btn-ink: #000000; --btn-hover: #ffffff; --pos: #6ff0a9; --neg: #ff9e96; --focus: #ffffff;
}
html[data-a11y-contrast="true"] :is(.why-card, .price-card, .feature-card, .support-card, .steps article, .concept-map, .forecast-card, .decision-grid article, .detail-points > div, .notice, #a11y-panel) { box-shadow: inset 0 0 0 2px var(--ink) !important; }
html[data-a11y-contrast="true"] .site-header { background: var(--bg); }

/* Large text: let dense layouts reflow into one column and use the diagrams' text equivalents. */
html:is([data-a11y-size="150"], [data-a11y-size="175"], [data-a11y-size="200"]) :is(.why-grid, .detail-points, .steps, .support-grid, .question-examples, .pricing-grid, .decision-grid, .editorial-grid, .footer-top) { grid-template-columns: minmax(0, 1fr); }
html:is([data-a11y-size="150"], [data-a11y-size="175"], [data-a11y-size="200"]) :is(.tour-panel, .visual-story, .page-hero--visual, .split-section, .faq-section, .forecast-section, .forecast-story, .watch-story, .download-section, .duo-story, .section-head) { grid-template-columns: minmax(0, 1fr); }
html:is([data-a11y-size="150"], [data-a11y-size="175"], [data-a11y-size="200"]) :is(h1, h2, h3, p, li, a, summary, figcaption) { overflow-wrap: anywhere; }
html:is([data-a11y-size="150"], [data-a11y-size="175"], [data-a11y-size="200"]) .concept-diagram { display: none !important; }
html:is([data-a11y-size="150"], [data-a11y-size="175"], [data-a11y-size="200"]) .concept-map .concept-nodes { position: static !important; width: auto !important; height: auto !important; margin: 12px 0 0 !important; padding-left: 1.3em !important; overflow: visible !important; clip: auto !important; white-space: normal !important; }
html:is([data-a11y-size="150"], [data-a11y-size="175"], [data-a11y-size="200"]) .site-header { position: relative; }
html:is([data-a11y-size="150"], [data-a11y-size="175"], [data-a11y-size="200"]) .nav-wrap { height: auto; min-height: 58px; flex-wrap: wrap; padding-block: 10px; }
html:is([data-a11y-size="150"], [data-a11y-size="175"], [data-a11y-size="200"]) #main-nav:not(.is-open) { flex-wrap: wrap; }
html:is([data-a11y-size="150"], [data-a11y-size="175"], [data-a11y-size="200"]) :is(.price, .forecast-top output) { flex-wrap: wrap; overflow-wrap: anywhere; }
html:is([data-a11y-size="175"], [data-a11y-size="200"]) .a11y-options { grid-template-columns: minmax(0, 1fr); }
html:is([data-a11y-size="175"], [data-a11y-size="200"]) .plan-badge { position: static; transform: none; width: fit-content; margin-bottom: 14px; white-space: normal; }

@media (max-width: 760px) {
  #a11y-toggle { left: 14px; bottom: max(14px, env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  #a11y-panel { left: 12px; bottom: max(66px, calc(env(safe-area-inset-bottom) + 60px)); padding: 18px; border-radius: 20px; max-height: calc(100dvh - 86px); }
}
@media (forced-colors: active) {
  #a11y-toggle, #a11y-panel, .a11y-options button, .a11y-text-controls button, .theme-switch button { border: 1px solid ButtonText; }
  .a11y-options button[aria-pressed="true"], .theme-switch button[aria-checked="true"] { outline: 2px solid Highlight; }
  .reading-guide { background: Highlight; }
}