/* Display-preferences menu + fixed quick-action widgets (inc/accessibility.php).
   Plain CSS, unlayered, loaded after theme.css. Logical properties only.
   State arrives as data-odm-a11y-* attributes on <html> (assets/js/a11y-menu.js and the
   inline head script). Contrast themes re-point the Tailwind colour tokens
   (--color-*), never a CSS filter. See optimization/a11y/MENU.md for the known limits. */

:root {
  --odm-am-bg: #fff; --odm-am-fg: #0f172a; --odm-am-bd: #475569;
  --odm-am-on-bg: #e0e7ff; --odm-am-on-bd: #312e81; --odm-am-ring: #312e81;
  /* --odm-fixed-bottom-offset is the cookie banner height, set on <html> while it is open (worker T). Below 40rem the banner spans
     the width, so the trigger (start side) and the widget stack (end side) both lift; from 40rem it sits at the end corner only. */
  /* W11-003: the banner is capped at 60dvh and the widgets' inset-block-end is clamped to the viewport (see .odm-am__btn below). */
  --odm-am-off: calc(var(--odm-fixed-bottom-offset, 0px) + 1rem);
  --odm-am-off-end: calc(var(--odm-fixed-bottom-offset, 0px) + 1rem);
}
@media (min-width: 40rem) { :root { --odm-am-off: 1rem; } }
html[data-odm-a11y-contrast="dark"] {
  --odm-am-bg: #0b1120; --odm-am-fg: #f1f5f9; --odm-am-bd: #94a3b8;
  --odm-am-on-bg: #312e81; --odm-am-on-bd: #c7d2fe; --odm-am-ring: #fff; --odm-am-fb: #fff;
}
html[data-odm-a11y-contrast="high"] {
  --odm-am-bg: #000; --odm-am-fg: #fff; --odm-am-bd: #fff;
  --odm-am-on-bg: #ffe14d; --odm-am-on-bd: #ffe14d; --odm-am-ring: #fff; --odm-am-fb: #fff;
}

/* ---- fixed widgets: trigger (start), WhatsApp + back to top (end) ---- */
.odm-am__btn, .odm-am-fab {
  position: fixed; inset-block-end: min(calc(var(--odm-am-off) + var(--odm-am-cta, 0px)), calc(100dvh - 64px)); z-index: 50;
  box-sizing: border-box; inline-size: 48px; block-size: 48px; min-inline-size: 44px; min-block-size: 44px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 2px solid var(--odm-am-fb, #0f172a); border-radius: 9999px; cursor: pointer;
  background: #312e81; color: #fff; box-shadow: 0 6px 16px rgb(15 23 42 / .3); font-size: 1.25rem;
}
.odm-am__btn { inset-inline-start: 1rem; }
.odm-am-fabs { position: fixed; inset-inline-end: 1rem; inset-block-end: min(calc(var(--odm-am-off-end) + var(--odm-am-cta, 0px)), calc(100dvh - 124px)); z-index: 50; display: flex; flex-direction: column-reverse; gap: .75rem; }
.odm-am-fabs .odm-am-fab { position: static; }
.odm-am--cta { --odm-am-cta: 6rem; }
@media (min-width: 1024px) { .odm-am--cta { --odm-am-cta: 0px; } }
/* WhatsApp colours and the FAB focus rings live in source.css (worker T, W2-005). */
.odm-am-fab--top { background: #0f172a; color: #fff; }
.odm-am__btn:hover, .odm-am-fab--top:hover { background: #1e1b4b; }
.odm-am__btn:focus-visible, .odm-am__close:focus-visible, .odm-am__opt:focus-visible,
.odm-am__reset:focus-visible, .odm-am__link:focus-visible, .odm-am__seg label:has(input:focus-visible) {
  outline: 3px solid var(--odm-am-ring); outline-offset: 3px; box-shadow: 0 0 0 3px var(--odm-am-bg);
}
.odm-am__btn:focus-visible { box-shadow: 0 0 0 3px #fff; }
html[data-odm-a11y-contrast="dark"] .odm-am__btn:focus-visible, html[data-odm-a11y-contrast="high"] .odm-am__btn:focus-visible { box-shadow: 0 0 0 3px #000; }

/* ---- panel (native <dialog>, non-modal) ---- */
.odm-am__panel {
  position: fixed; margin: 0; z-index: 60; box-sizing: border-box;
  inset-inline: 1rem auto; inset-block: auto calc(var(--odm-am-off) + var(--odm-am-cta, 0px) + 48px + .5rem);
  inline-size: min(22rem, calc(100vw - 2rem)); max-block-size: calc(100dvh - var(--odm-am-off) - var(--odm-am-cta, 0px) - 48px - 1.5rem);
  overflow: auto; overscroll-behavior: contain; padding: 1rem;
  background: var(--odm-am-bg); color: var(--odm-am-fg); border: 2px solid var(--odm-am-bd); border-radius: .75rem;
  box-shadow: 0 12px 32px rgb(15 23 42 / .3); font-size: .9375rem; line-height: 1.4;
}
.odm-am__panel:not([open]) { display: none; }
.odm-am__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.odm-am__title { margin: 0; font-size: 1.125rem; font-weight: 700; color: inherit; }
.odm-am__note { margin: .5rem 0 .75rem; font-size: .875rem; }
.odm-am__group { margin: 0 0 .75rem; padding: 0; border: 0; min-inline-size: 0; display: grid; gap: .375rem; }
.odm-am__group > legend, .odm-am__legend { margin: 0 0 .375rem; padding: 0; font-weight: 700; font-size: .875rem; }
.odm-am__close, .odm-am__opt, .odm-am__reset, .odm-am__link, .odm-am__seg label {
  box-sizing: border-box; min-block-size: 44px; min-inline-size: 44px; font: inherit; color: inherit;
  background: transparent; border: 2px solid var(--odm-am-bd); border-radius: .5rem; cursor: pointer;
}
.odm-am__close { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.odm-am__opt { inline-size: 100%; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; text-align: start; font-weight: 600; }
.odm-am__opt::before { content: ""; flex: none; inline-size: 1.25rem; block-size: 1.25rem; border: 2px solid currentColor; border-radius: .25rem; box-sizing: border-box; }
.odm-am__opt[aria-pressed="true"]::before { content: "\2713" / ""; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; line-height: 1; }
.odm-am__opt[aria-pressed="true"], .odm-am__seg label:has(input:checked) { background: var(--odm-am-on-bg); border-color: var(--odm-am-on-bd); }
html:not([data-odm-a11y-contrast="high"]) .odm-am__opt[aria-pressed="true"], html:not([data-odm-a11y-contrast="high"]) .odm-am__seg label:has(input:checked) { color: var(--odm-am-fg); }
html[data-odm-a11y-contrast="high"] .odm-am__opt[aria-pressed="true"], html[data-odm-a11y-contrast="high"] .odm-am__seg label:has(input:checked) { color: #000; }
.odm-am__seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr)); gap: .375rem; }
.odm-am__seg label { position: relative; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.odm-am__seg input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.odm-am__reset { inline-size: 100%; margin-block-start: .25rem; padding: .5rem .75rem; font-weight: 700; }
.odm-am__link { display: flex; align-items: center; justify-content: center; margin-block-start: .5rem; padding: .5rem .75rem; text-decoration: underline; font-weight: 600; }
.odm-am__sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (forced-colors: active) {
  .odm-am__btn, .odm-am-fab, .odm-am__panel { border: 2px solid CanvasText; forced-color-adjust: auto; }
  .odm-am__opt[aria-pressed="true"], .odm-am__seg label:has(input:checked) { background: Highlight; color: HighlightText; border-color: Highlight; }
  .odm-am__btn:focus-visible, .odm-am-fab:focus-visible, .odm-am__opt:focus-visible, .odm-am__close:focus-visible,
  .odm-am__reset:focus-visible, .odm-am__link:focus-visible { outline: 3px solid Highlight; }
}
@media print { .odm-am, .odm-am-fabs { display: none; } }

/* ---- display preferences ---- */
html[data-odm-a11y-text="125"] { font-size: 125%; }
html[data-odm-a11y-text="150"] { font-size: 150%; }
html[data-odm-a11y-text="200"] { font-size: 200%; }
html[data-odm-a11y-spacing] body :where(*) { line-height: 1.5 !important; letter-spacing: .12em !important; word-spacing: .16em !important; }
html[data-odm-a11y-spacing] body p { margin-block-end: 2em !important; }
html[data-odm-a11y-underline] a:not(.odm-btn, .odm-btn-primary, .odm-btn-ghost, .odm-btn-dark) { text-decoration: underline !important; text-underline-offset: .2em; text-decoration-thickness: max(1px, .08em); }
html[data-odm-a11y-highlight] a:not(.odm-btn, .odm-btn-primary, .odm-btn-ghost, .odm-btn-dark) { background-color: #ffe14d !important; color: var(--odm-am-hl-fg, #111) !important; border-radius: 2px; }
/* everything inside a highlighted link (card titles, prices, "Learn more") takes the same foreground so the pair is always highlight bg + hl-fg */
html[data-odm-a11y-highlight] a:not(.odm-btn, .odm-btn-primary, .odm-btn-ghost, .odm-btn-dark) :where(*) { color: inherit !important; }
html[data-odm-a11y-font] { --font-sans: system-ui, -apple-system, "Segoe UI", Arial, var(--font-cjk), sans-serif; --font-display: var(--font-sans); --default-font-family: var(--font-sans); }
html[data-odm-a11y-motion], html[data-odm-a11y-motion] *, html[data-odm-a11y-motion] *::before, html[data-odm-a11y-motion] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-odm-a11y-focus] :focus-visible { outline: 3px solid #000 !important; outline-offset: 3px !important; box-shadow: 0 0 0 3px #fff !important; }
html[data-odm-a11y-focus][data-odm-a11y-contrast="dark"] :focus-visible, html[data-odm-a11y-focus][data-odm-a11y-contrast="high"] :focus-visible { outline-color: #fff !important; box-shadow: 0 0 0 3px #000 !important; }

/* ---- contrast themes: palette tokens. Generated from the --color-* values in theme.css (dark = luminance inversion that keeps every
   original contrast ratio; high = black, white and one yellow; light = darker muted greys). Regenerate if the Tailwind palette changes. ---- */
html[data-odm-a11y-contrast] body { background-color: var(--color-white); color: var(--color-slate-800); }
html[data-odm-a11y-contrast] { background-color: var(--color-white); }
html[data-odm-a11y-contrast="dark"] { color-scheme: dark; --color-amber-100:#201b06;--color-amber-200:#2c2405;--color-amber-300:#362f1b;--color-amber-400:#453a24;--color-amber-50:#171308;--color-amber-500:#654316;--color-amber-800:#e78453;--color-amber-900:#f19f78;--color-black:#fff;--color-blue-500:#0965e9;--color-brand-100:#1f2335;--color-brand-50:#191b24;--color-brand-600:#818cea;--color-brand-900:#bdc4fe;--color-cyan-100:#012022;--color-cyan-200:#0f282b;--color-cyan-300:#02353b;--color-cyan-700:#2592b3;--color-emerald-100:#052216;--color-emerald-200:#012e1e;--color-emerald-50:#0b1813;--color-emerald-500:#295d46;--color-emerald-700:#249a73;--color-emerald-800:#60b393;--color-indigo-100:#1f2335;--color-indigo-200:#292f54;--color-indigo-300:#363f84;--color-indigo-400:#5052ca;--color-indigo-50:#191b24;--color-indigo-500:#676deb;--color-indigo-600:#818cf8;--color-indigo-700:#9aa4e6;--color-indigo-800:#b0b9f0;--color-indigo-900:#c0c6ef;--color-red-400:#b7142b;--color-red-600:#fc2126;--color-rose-500:#ce2b4b;--color-rose-700:#f56573;--color-slate-100:#171a1d;--color-slate-200:#20242a;--color-slate-300:#2a323d;--color-slate-400:#48586d;--color-slate-50:#141516;--color-slate-500:#6e809b;--color-slate-600:#92a4be;--color-slate-700:#adc0db;--color-slate-800:#d2e2fd;--color-slate-900:#f4f7fd;--color-slate-950:#fff;--color-white:#0b1120; }
html[data-odm-a11y-contrast="high"] { color-scheme: dark; --color-amber-100:#141414;--color-amber-200:#333;--color-amber-300:#333;--color-amber-400:#333;--color-amber-50:#141414;--color-amber-500:#ffe14d;--color-amber-800:#ffe14d;--color-amber-900:#ffe14d;--color-black:#fff;--color-blue-500:#ffe14d;--color-brand-100:#141414;--color-brand-50:#141414;--color-brand-600:#ffe14d;--color-brand-900:#ffe14d;--color-cyan-100:#141414;--color-cyan-200:#333;--color-cyan-300:#333;--color-cyan-700:#ffe14d;--color-emerald-100:#141414;--color-emerald-200:#333;--color-emerald-50:#141414;--color-emerald-500:#ffe14d;--color-emerald-700:#ffe14d;--color-emerald-800:#ffe14d;--color-indigo-100:#141414;--color-indigo-200:#333;--color-indigo-300:#333;--color-indigo-400:#333;--color-indigo-50:#141414;--color-indigo-500:#ffe14d;--color-indigo-600:#ffe14d;--color-indigo-700:#ffe14d;--color-indigo-800:#ffe14d;--color-indigo-900:#ffe14d;--color-red-400:#ff9e94;--color-red-600:#ff9e94;--color-rose-500:#ff9e94;--color-rose-700:#ff9e94;--color-slate-100:#0d0d0d;--color-slate-200:#4d4d4d;--color-slate-300:#767676;--color-slate-400:#b3b3b3;--color-slate-50:#000;--color-slate-500:#e0e0e0;--color-slate-600:#fff;--color-slate-700:#fff;--color-slate-800:#fff;--color-slate-900:#fff;--color-slate-950:#fff;--color-white:#000; }
html[data-odm-a11y-contrast="light"] { color-scheme: light; --color-slate-300:#90a1b9;--color-slate-400:#45556c;--color-slate-500:#314158;--color-slate-600:#1d293d; }
/* light: dark bands keep their original light-on-dark greys */
html[data-odm-a11y-contrast="light"] :is(footer, .bg-slate-900, .bg-slate-950, .odm-card-dark) { --color-slate-300:#cad5e2;--color-slate-400:#90a1b9;--color-slate-500:#62748e;--color-slate-600:#45556c; }
/* high: text on the (now white) former dark bands must be dark */
html[data-odm-a11y-contrast="high"] :is(footer, .bg-slate-900, .bg-slate-950, .odm-card-dark) { --color-slate-300:#4d4d4d; --color-slate-400:#404040; --color-slate-500:#262626; }
/* W11-011: the footer is white in High and Dark, but the menu-link focus ring uses --color-indigo-500, which those themes
   point at yellow (High) or a mid indigo (Dark): 1.3:1 and 4.2:1 on white. Give the footer its own dark ring token. */
html[data-odm-a11y-contrast="high"] footer { --color-indigo-500:#000; --color-indigo-300:#000; }
html[data-odm-a11y-contrast="dark"] footer { --color-indigo-500:#312e81; --color-indigo-300:#312e81; }
html[data-odm-a11y-contrast="high"] a:not(.odm-btn, .odm-btn-primary, .odm-btn-ghost, .odm-btn-dark) { text-decoration: underline; }
/* highlight foreground in the contrast themes = that theme's own page background token (dark #0b1120, high #000), never lighter than the yellow pair needs; islands restore the tokens, so the value is fixed here, not read from --color-white */
html[data-odm-a11y-contrast="dark"] { --odm-am-hl-fg: #0b1120; }
html[data-odm-a11y-contrast="high"] { --odm-am-hl-fg: #000; }
/* inline background/colour styles in authored content (e.g. the Quick Answer callout) would keep a light fill under token text: take both from the tokens. Hand-designed islands are excluded. */
html:is([data-odm-a11y-contrast="dark"], [data-odm-a11y-contrast="high"]) .odm-prose :is([style*="background"], [style*="color:"], [style*="color :"]):not(:is(.odm-fast-track, .odm-addons, .odm-ao, .odm-home-ft) *) { color: var(--color-slate-800) !important; }
html:is([data-odm-a11y-contrast="dark"], [data-odm-a11y-contrast="high"]) .odm-prose [style*="background"]:not(:is(.odm-fast-track, .odm-addons, .odm-ao, .odm-home-ft) *) { background-color: var(--color-slate-100) !important; }
/* islands: components with their own hard-coded light design keep it (original tokens restored), so they stay AA but are not recoloured */
html:is([data-odm-a11y-contrast="dark"], [data-odm-a11y-contrast="high"]) :is(.odm-fast-track, .odm-addons, .odm-ao, .odm-home-ft) { color-scheme: light; --color-amber-100:#fef3c6;--color-amber-200:#fee685;--color-amber-300:#ffd230;--color-amber-400:#ffb900;--color-amber-50:#fffbeb;--color-amber-500:#fe9a00;--color-amber-800:#973c00;--color-amber-900:#7b3306;--color-black:#000;--color-blue-500:#2b7fff;--color-brand-100:#e0e7ff;--color-brand-50:#eef2ff;--color-brand-600:#4f46e5;--color-brand-900:#312e81;--color-cyan-100:#cefafe;--color-cyan-200:#a2f4fd;--color-cyan-300:#53eafd;--color-cyan-700:#007595;--color-cyan-900:#104e64;--color-emerald-100:#d0fae5;--color-emerald-200:#a4f4cf;--color-emerald-50:#ecfdf5;--color-emerald-500:#00bc7d;--color-emerald-700:#007a55;--color-emerald-800:#006045;--color-indigo-100:#e0e7ff;--color-indigo-200:#c6d2ff;--color-indigo-300:#a3b3ff;--color-indigo-400:#7c86ff;--color-indigo-50:#eef2ff;--color-indigo-500:#615fff;--color-indigo-600:#4f39f6;--color-indigo-700:#432dd7;--color-indigo-800:#372aac;--color-indigo-900:#312c85;--color-red-400:#ff6467;--color-red-600:#e7000b;--color-rose-500:#ff2056;--color-rose-700:#c70036;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cad5e2;--color-slate-400:#90a1b9;--color-slate-50:#f8fafc;--color-slate-500:#62748e;--color-slate-600:#45556c;--color-slate-700:#314158;--color-slate-800:#1d293d;--color-slate-900:#0f172b;--color-slate-950:#020618;--color-white:#fff; }
html:is([data-odm-a11y-contrast="dark"], [data-odm-a11y-contrast="high"]) :is(.odm-fast-track, .odm-addons, .odm-ao) { background-color: #fff; color: #17142e; }
html[data-odm-a11y-contrast="dark"] .ondigital-wizard { --lb-canvas:#0b1120; --lb-canvas-2:#0f172a; --lb-surface:#111a2e; --lb-surface-sunken:#0b1120; --lb-surface-tint:#16203a; --lb-violet-50:#1e1b4b; --lb-violet-100:#312e81; --lb-violet-200:#4338ca; --lb-violet-400:#a5b4fc; --lb-violet-600:#c7d2fe; --lb-violet-700:#a5b4fc; --lb-violet-900:#c7d2fe; --lb-positive:#34d399; --lb-positive-text:#6ee7b7; --lb-positive-bg:#064e3b; --lb-caution:#fbbf24; --lb-caution-bg:#451a03; --lb-negative:#fca5a5; --lb-negative-bg:#450a0a; --lb-text:#f1f5f9; --lb-text-secondary:#cbd5e1; --lb-text-tertiary:#a7b4c8; --lb-text-inverse:#0b1120; --lb-text-link:#a5b4fc; --lb-line:#334155; --lb-line-strong:#64748b; --lb-focus:#a5b4fc; }
html[data-odm-a11y-contrast="high"] .ondigital-wizard { --lb-canvas:#000; --lb-canvas-2:#000; --lb-surface:#000; --lb-surface-sunken:#0d0d0d; --lb-surface-tint:#141414; --lb-violet-50:#141414; --lb-violet-100:#1f1f1f; --lb-violet-200:#595959; --lb-violet-400:#ffe14d; --lb-violet-600:#ffe14d; --lb-violet-700:#ffe14d; --lb-violet-900:#ffe14d; --lb-positive:#5eead4; --lb-positive-text:#86efac; --lb-positive-bg:#052e16; --lb-caution:#ffe14d; --lb-caution-bg:#1a1400; --lb-negative:#ff9e94; --lb-negative-bg:#2a0505; --lb-text:#fff; --lb-text-secondary:#fff; --lb-text-tertiary:#e5e5e5; --lb-text-inverse:#000; --lb-text-link:#ffe14d; --lb-line:#8f8f8f; --lb-line-strong:#fff; --lb-focus:#fff; }
/* wizard: rules with a hard-coded white that sits on a token fill */
html:is([data-odm-a11y-contrast="dark"], [data-odm-a11y-contrast="high"]) :is(.lb-btn--primary, .lb-mark, .lb-toast, .lb-swatch[data-selected="true"] .lb-swatch__icon, .lb-swatch__check) { color: var(--lb-text-inverse); }
html:is([data-odm-a11y-contrast="dark"], [data-odm-a11y-contrast="high"]) .lb-counter__btn { background: var(--lb-surface); color: var(--lb-text); }