/* ProConnect — public-website accessibility options (first-party).
   Loaded only by the public marketing/legal pages. Two halves:
     1. the launcher + panel component (.pc-a11y);
     2. the preference states it toggles on <html> (pc-a11y-contrast / -links / -motion,
        and --pc-a11y-text, consumed by each page's own font sizes).
   Component colours map onto whichever token family the host page has: the landing's
   (--surface / --silver / --cobalt / --hair) or the shared app stylesheet's
   (--bg-surface / --text-primary / --accent / --border-color). The names do not collide. */

.pc-a11y {
  --pa-bg: var(--surface, var(--bg-surface, #ffffff));
  --pa-text: var(--silver, var(--text-primary, #111731));
  --pa-text-2: var(--silver-2, var(--text-secondary, #465072));
  --pa-line: var(--hair-2, var(--border-input, #cbd5ec));
  --pa-soft: var(--raise, var(--bg-elevated, #f6f8fe));
  --pa-accent: var(--cobalt, var(--accent, #2f52e0));
  --pa-on-accent: var(--on-cobalt, #ffffff);
  --pa-link: var(--accent-text, var(--cobalt, var(--accent, #2f52e0))); /* text-sized accent: must clear 4.5:1 */
  --pa-scale: var(--pc-a11y-text, 1);
  font-family: 'Assistant', system-ui, sans-serif;
  color: var(--pa-text);
}
.pc-a11y *, .pc-a11y *::before, .pc-a11y *::after { box-sizing: border-box; }

/* ── launcher ─────────────────────────────────────────────────────────── */
.pc-a11y-launcher {
  position: fixed; z-index: 150;
  inset-block-end: max(18px, env(safe-area-inset-bottom));
  inset-inline-end: 18px;
  width: 46px; height: 46px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  color: var(--pa-accent);
  background: color-mix(in srgb, var(--pa-bg) 92%, transparent);
  border: 1px solid var(--pa-line);
  box-shadow: 0 10px 30px -14px rgba(5, 12, 40, .45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.pc-a11y-launcher:hover { border-color: var(--pa-accent); transform: translateY(-1px); }
html.dark .pc-a11y { --pa-link: var(--cobalt-bright); }
.pc-a11y.is-open .pc-a11y-launcher { color: var(--pa-on-accent); background: var(--pa-accent); border-color: var(--pa-accent); }
.pc-a11y-launcher:focus-visible,
.pc-a11y button:focus-visible,
.pc-a11y a:focus-visible,
.pc-a11y-title:focus-visible { outline: 2px solid var(--pa-accent); outline-offset: 3px; }
.pc-a11y-title:focus:not(:focus-visible) { outline: none; }
.pc-a11y-switch:has(input:focus-visible) { outline: 2px solid var(--pa-accent); outline-offset: 2px; border-color: var(--pa-accent); }

/* ── panel ────────────────────────────────────────────────────────────── */
.pc-a11y-panel {
  position: fixed; z-index: 151;
  inset-block-end: calc(max(18px, env(safe-area-inset-bottom)) + 56px);
  inset-inline-end: 18px;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - 110px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 16px;
  border-radius: 16px;
  background: var(--pa-bg);
  border: 1px solid var(--pa-line);
  box-shadow: 0 30px 70px -30px rgba(5, 12, 40, .55);
  font-size: calc(15px * var(--pa-scale));
  line-height: 1.45;
}
.pc-a11y-panel[hidden] { display: none; }
.pc-a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -16px -16px 12px; padding: 16px 16px 10px;
  position: sticky; top: -16px; z-index: 1; background: var(--pa-bg); } /* Close stays reachable however tall the panel gets */
.pc-a11y-title { margin: 0; font-family: 'Heebo', 'Assistant', system-ui, sans-serif; font-weight: 700;
  font-size: calc(17px * var(--pa-scale)); letter-spacing: -.01em; color: var(--pa-text); border-radius: 6px; }
.pc-a11y-close {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px;
  font: inherit; font-size: calc(13.5px * var(--pa-scale)); color: var(--pa-text-2);
  background: transparent; border: 1px solid var(--pa-line); border-radius: 10px; cursor: pointer;
}
.pc-a11y-close:hover { color: var(--pa-text); border-color: var(--pa-accent); }

.pc-a11y-group { padding: 12px; border: 1px solid var(--pa-line); border-radius: 12px; background: var(--pa-soft); }
.pc-a11y-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pc-a11y-label { font-weight: 600; color: var(--pa-text); }
.pc-a11y-size-now { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: calc(13px * var(--pa-scale)); color: var(--pa-text-2); direction: ltr; unicode-bidi: isolate; }
.pc-a11y-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pc-a11y-step {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 10px;
  font: inherit; font-weight: 600; color: var(--pa-text);
  background: var(--pa-bg); border: 1px solid var(--pa-line); border-radius: 10px; cursor: pointer;
}
.pc-a11y-step:hover:not([aria-disabled="true"]) { border-color: var(--pa-accent); color: var(--pa-accent); }
.pc-a11y-glyph { font-family: 'Heebo', system-ui, sans-serif; font-weight: 800; font-size: .85em; direction: ltr; unicode-bidi: isolate; }
.pc-a11y-glyph-lg { font-size: 1.05em; }
.pc-a11y-text-reset {
  margin-top: 8px; padding: 6px 2px; min-height: 32px; font: inherit; font-size: calc(13.5px * var(--pa-scale));
  color: var(--pa-link); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.pc-a11y [aria-disabled="true"] { opacity: .5; cursor: default; }

.pc-a11y-switch {
  display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; min-height: 56px;
  border: 1px solid var(--pa-line); border-radius: 12px; cursor: pointer; position: relative;
}
.pc-a11y-switch:hover { border-color: var(--pa-accent); }
/* The real control is the native checkbox (role=switch); it stays in the accessibility
   tree and keyboard order, visually replaced by the track. */
.pc-a11y-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pc-a11y-switch input:disabled { cursor: default; }
.pc-a11y-switch-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-a11y-switch-name { font-weight: 600; color: var(--pa-text); }
.pc-a11y-hint { font-size: calc(13px * var(--pa-scale)); color: var(--pa-text-2); }
.pc-a11y-track {
  flex: none; width: 42px; height: 24px; border-radius: 999px; position: relative;
  background: var(--pa-soft); border: 1.5px solid var(--pa-line); transition: background-color .2s, border-color .2s;
}
.pc-a11y-thumb {
  position: absolute; top: 2.5px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--pa-text-2); transition: inset-inline-start .2s, background-color .2s;
}
.pc-a11y-switch input:checked ~ .pc-a11y-track { background: var(--pa-accent); border-color: var(--pa-accent); }
.pc-a11y-switch input:checked ~ .pc-a11y-track .pc-a11y-thumb { inset-inline-start: 20px; background: var(--pa-on-accent); }
.pc-a11y-switch input:disabled ~ .pc-a11y-track { opacity: .6; }

.pc-a11y-foot { margin-top: 14px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.pc-a11y-reset {
  min-height: 44px; padding: 8px 12px; font: inherit; font-weight: 600; color: var(--pa-text);
  background: transparent; border: 1px solid var(--pa-line); border-radius: 10px; cursor: pointer;
}
.pc-a11y-reset:hover { border-color: var(--pa-accent); color: var(--pa-accent); }
.pc-a11y-note { margin: 2px 0 0; font-size: calc(12.5px * var(--pa-scale)); color: var(--pa-text-2); }
.pc-a11y-statement { align-self: flex-start; font-size: calc(13.5px * var(--pa-scale)); color: var(--pa-link); text-decoration: underline; text-underline-offset: 3px; }
.pc-a11y-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 480px) {
  .pc-a11y-launcher { inset-inline-end: 14px; width: 44px; height: 44px; }
  .pc-a11y-panel { inset-inline: 12px; width: auto; max-height: calc(100dvh - 96px); }
}

/* ── preference: emphasise links ──────────────────────────────────────── */
html.pc-a11y-links a:not(.skip-link) {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: .22em !important;
  text-decoration-skip-ink: auto;
}

/* ── preference: reduce motion (the OS setting is honoured separately, always) ── */
html.pc-a11y-motion { scroll-behavior: auto !important; }
html.pc-a11y-motion *, html.pc-a11y-motion *::before, html.pc-a11y-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  .pc-a11y *, .pc-a11y-launcher { transition: none !important; }
}

/* ── preference: high contrast — real tokens, never a filter ───────────── */
/* Landing (html.dark = dark theme; otherwise light). The legal pages carry data-theme and get their own blocks below,
   so these must not match them (they did: the panel went white-on-pale in dark contrast). */
html.pc-a11y-contrast:not(.dark):not([data-theme]) {
  --void:#FFFFFF; --void-2:#FFFFFF; --surface:#FFFFFF; --raise:#F2F4FA;
  --hair:#3B4366; --hair-2:#1D2340;
  --silver:#000000; --silver-2:#141A33; --mute:#262D4A;
  --cobalt:#1533B5; --cobalt-bright:#1533B5; --ice:#1533B5;
  --cobalt-glow:transparent; --cobalt-soft:rgba(21,51,181,.08);
  --wa:#0A6534; --wa-2:#0A6534; --wa-glow:transparent; --wa-bubble:#0A5A2F; --wa-bubble-2:#0A5A2F;
  --amber:#6B4300; --amber-soft:rgba(107,67,0,.08);
  --on-cobalt:#FFFFFF; --scrim:transparent;
}
html.pc-a11y-contrast.dark:not([data-theme]) {
  --void:#000000; --void-2:#000000; --surface:#000000; --raise:#0B0F1E;
  --hair:#A3ACCF; --hair-2:#D3D9F0;
  --silver:#FFFFFF; --silver-2:#F1F4FC; --mute:#D6DCF1;
  --cobalt:#A6B9FF; --cobalt-bright:#BFCDFF; --ice:#BFCDFF;
  --cobalt-glow:transparent; --cobalt-soft:rgba(166,185,255,.10);
  --wa:#5BEA97; --wa-2:#5BEA97; --wa-glow:transparent; --wa-bubble:#0A5A2F; --wa-bubble-2:#0A5A2F;
  --amber:#FFCF73; --amber-soft:rgba(255,207,115,.10);
  --on-cobalt:#000000; --scrim:transparent;
}
/* Decorative layers that sit behind text are removed; glass becomes solid. */
html.pc-a11y-contrast .cosmos::before,
html.pc-a11y-contrast .grain,
html.pc-a11y-contrast #field,
html.pc-a11y-contrast .hero-scrim,
html.pc-a11y-contrast .signal .halo { display: none !important; }
html.pc-a11y-contrast .nav { background: var(--void) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom-color: var(--hair) !important; }
html.pc-a11y-contrast .tl-card,
html.pc-a11y-contrast .plan,
html.pc-a11y-contrast .chip,
html.pc-a11y-contrast .tok,
html.pc-a11y-contrast .signal .tag { background: var(--surface) !important; backdrop-filter: none !important; border-color: var(--hair) !important; }
html.pc-a11y-contrast .accent { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--cobalt) !important; }
html.pc-a11y-contrast .cta { box-shadow: none !important; outline: 2px solid transparent; }
html.pc-a11y-contrast .ghost { border-color: var(--silver) !important; }
html.pc-a11y-contrast .tl-ghost { -webkit-text-stroke-color: var(--hair) !important; }
html.pc-a11y-contrast a:focus-visible, html.pc-a11y-contrast button:focus-visible { outline-width: 3px !important; }

/* Legal pages (shared stylesheet tokens, data-theme on <html>). */
html.pc-a11y-contrast[data-theme="dark"] {
  --bg-app:#000000; --bg-base:#000000; --bg-surface:#000000; --bg-elevated:#0B0F1E; --bg-hover:#151A2E;
  --border-color:#C9D0EA; --border-input:#C9D0EA;
  --text-primary:#FFFFFF; --text-secondary:#F1F4FC; --text-muted:#D6DCF1;
  --accent:#A6B9FF; --accent-hover:#BFCDFF; --accent-text:#A6B9FF; --accent-solid:#A6B9FF; --shadow-card:none; --on-cobalt:#000000;
}
html.pc-a11y-contrast[data-theme="light"],
html.pc-a11y-contrast[data-theme="cream"] {
  --bg-app:#FFFFFF; --bg-base:#FFFFFF; --bg-surface:#FFFFFF; --bg-elevated:#F2F4FA; --bg-hover:#E8ECF8;
  --border-color:#1D2340; --border-input:#1D2340;
  --text-primary:#000000; --text-secondary:#141A33; --text-muted:#262D4A;
  --accent:#1533B5; --accent-hover:#0F2690; --accent-text:#1533B5; --accent-solid:#1533B5; --shadow-card:none;
}
html.pc-a11y-contrast[data-theme="dark"] .page-lang-switcher .lang-toggle-btn.lang-btn-active { color:#000000 !important; box-shadow:none !important; }