/* Macy · the accessibility options. assets/js/a11y.js builds the button and the panel and puts the visitor's choices on
   <html> as data-a11y-* attributes before the page is drawn; this file is what each one does, and the look of the
   button and the panel. Loaded on every page after site.css (dev/chrome.mjs stamps both tags into the <head>).
   The options are an aid on top of the site's own accessibility work, not in place of it: with none of them on, this
   file changes nothing but the strip it keeps free at the foot of the page.
   Strict CSP, like site.css: no inline styles; the script sets one custom property (--a11y-lift). */

/* ---------- 1. text size: three steps up from normal. Reading text grows the most; buttons, menu links and the lead
   lines under a headline grow less; headlines, already large, grow the least. The phones' screens, the hero's notes
   and the top bar keep their size (site.css: --ts, --tsu, --tsd) ---------- */
html[data-a11y-text='1'] { --ts: 1.15; --tsu: 1.1; --tsd: 1.05; }
html[data-a11y-text='2'] { --ts: 1.3; --tsu: 1.2; --tsd: 1.1; }
html[data-a11y-text='3'] { --ts: 1.5; --tsu: 1.3; --tsd: 1.15; }

/* ---------- 2. readable spacing: more room between lines, letters, words and paragraphs of reading text. Headlines
   lose their tightening and get a little more room; decoration is left alone ---------- */
html[data-a11y-spacing] body { letter-spacing: .05em; word-spacing: .12em; }
html[data-a11y-spacing] :is(.hero-art, .pin, .nav-acts) { letter-spacing: normal; word-spacing: normal; }
html[data-a11y-spacing] :is(p, li, dd, summary, figcaption, label, .note span):not(:is(.hero-art, .pin) *) { line-height: 1.8 !important; }
html[data-a11y-spacing] :is(h1, h2, h3, .h2, .note b, .foot-brand .word, .foot-col .h, .a11y-title, legend, .booked, .polaroid figcaption, .doc caption):not(:is(.hero-art, .pin) *) { line-height: 1.3 !important; letter-spacing: .01em !important; }
html[data-a11y-spacing] .doc section { gap: 1.5em; }
html[data-a11y-spacing] .doc ul { gap: 1em; }
html[data-a11y-spacing] .qa .a p + p, html[data-a11y-spacing] .rules li p + p { margin-block-start: 1em; }
html[data-a11y-spacing] .cmp :is(td, th) { line-height: 1.8 !important; }

/* ---------- with a larger text or wider spacing, things get the room they need ---------- */
/* the menu folds behind its button at every width, exactly as it does on a narrow screen (the same rules as the
   max-width: 1200px block in site.css; dev/a11y-widget.mjs fails when the two drift apart) */
html:is([data-a11y-text], [data-a11y-spacing]) .burger { display: grid; }
html:is([data-a11y-text], [data-a11y-spacing]) .links { position: absolute; inset-block-start: 100%; inset-inline: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 12px var(--gut) 24px; background-color: var(--paper); box-shadow: 0 1px 0 var(--line), 0 24px 40px -20px rgba(16, 48, 43, .25); max-block-size: calc(100svh - 72px); overflow: auto; }
html:is([data-a11y-text], [data-a11y-spacing]) .links.open { display: flex; }
html:is([data-a11y-text], [data-a11y-spacing]) .links > a { padding: 16px 4px; border-radius: 0; border-block-end: 1px solid var(--line); font-size: calc(19px * var(--tsu)); }
html:is([data-a11y-text], [data-a11y-spacing]) .markets { flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; }
html:is([data-a11y-text], [data-a11y-spacing]) .markets-h { display: block; margin-inline-end: 4px; font-weight: 700; font-size: calc(16px * var(--tsu)); color: var(--ink2); }
html:is([data-a11y-text], [data-a11y-spacing]) .markets a { padding: 10px 16px; font-size: calc(17px * var(--tsu)); box-shadow: inset 0 0 0 1.5px var(--line2); }
html:is([data-a11y-text], [data-a11y-spacing]) .menu-ctas { display: grid; gap: 12px; margin-block-start: 20px; }
html:is([data-a11y-text], [data-a11y-spacing]) .menu-ctas .btn { inline-size: 100%; }
/* a long line may wrap instead of running out of its box */
html:is([data-a11y-text], [data-a11y-spacing]) .btn:not(.nav-call) { white-space: normal; text-align: start; line-height: 1.15; padding-block: 10px; }
html:is([data-a11y-text], [data-a11y-spacing]) .links > a { white-space: normal; }
html:is([data-a11y-text], [data-a11y-spacing]) :is(h1, h2, h3, .h2, .note b, summary, caption, th, td, .kicker, .a11y-panel) { overflow-wrap: anywhere; }
html:is([data-a11y-text], [data-a11y-spacing]) .status-pill { white-space: normal; max-inline-size: calc(100% - 96px); padding-block: 8px; text-align: start; line-height: 1.25; }
html:is([data-a11y-text], [data-a11y-spacing]) .two { grid-template-columns: minmax(0, 1fr); }
html:is([data-a11y-text], [data-a11y-spacing]) .call-form .notice a { white-space: normal; }
/* the sample call's caption sits under the paper instead of on its bottom edge, so two lines of it fit */
html:is([data-a11y-text], [data-a11y-spacing]) .polaroid { padding-block-end: 16px; }
html:is([data-a11y-text], [data-a11y-spacing]) .polaroid figcaption { position: static; margin-block-start: 14px; padding-inline: 6px; }
html:is([data-a11y-text='2'], [data-a11y-text='3']) .toc ol { columns: 1; }
/* the hero's lines keep to the width they were designed for (their own limits are counted in letters, which grow with
   the text), so they never run under the note beside the phone */
html:is([data-a11y-text], [data-a11y-spacing]) .hero-copy :is(.lead, .fine, .trial, .trust) { max-inline-size: min(100%, 36rem); }
/* the first screen keeps its button in view: on a phone the hero gives up some air above and between its lines */
@media (max-width: 860px) {
  html:is([data-a11y-text], [data-a11y-spacing]) .hero { padding-block-start: 20px; }
  html:is([data-a11y-text], [data-a11y-spacing]) .hero-copy { gap: 14px; }
}

/* ---------- 3. high contrast: black on white, solid lines instead of tints and soft shadows. Every color the site
   takes from a variable follows; the few written out by hand are set here ---------- */
html[data-a11y-contrast] {
  --paper: #ffffff; --paper2: #ffffff; --paper3: #e9e9e9; --white: #ffffff;
  --ink: #000000; --ink2: #000000; --line: #000000; --line2: #000000;
  --hl: #ffe500; --red: #a3001b;
  --focus: 0 0 0 3px #ffffff, 0 0 0 6px #000000;
  --paper-shadow: 0 0 0 2px #000000;
}
html[data-a11y-contrast] .nav { background-color: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 2px 0 #000000; }
html[data-a11y-contrast] .btn:hover { background-color: #000000; }
html[data-a11y-contrast] .btn.line:hover { background-color: #ffffff; }
html[data-a11y-contrast] :is(.tldr, .script .line, .plan.main) { box-shadow: inset 0 0 0 2px #000000; }
html[data-a11y-contrast] .script .line.m small { color: #ffffff; }
@media (max-width: 860px) { html[data-a11y-contrast] .step .card { background-color: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 2px #000000; } }
html[data-a11y-contrast] :is(.foot-brand p, .foot-contact li, .foot-col a, .foot-col .linkish, .foot-bottom, .foot-legal a) { color: #ffffff; }
html[data-a11y-contrast] .foot-col a[aria-current] { color: #ffe500; text-decoration: underline; text-underline-offset: 4px; }
html[data-a11y-contrast] .foot-bottom { border-block-start-color: #ffffff; }
html[data-a11y-contrast] .foot :focus-visible { box-shadow: 0 0 0 3px #000000, 0 0 0 6px #ffe500; }
html[data-a11y-contrast] .err { color: #8a0016; }
html[data-a11y-contrast] .form-alert { background-color: #ffffff; box-shadow: inset 0 0 0 2px #8a0016; color: #8a0016; }
html[data-a11y-contrast] .field input::placeholder { color: #333333; }
html[data-a11y-contrast] .form-foot::before { background-image: none; }
html[data-a11y-contrast] .sheet { background-color: rgba(0, 0, 0, .7); }
html[data-a11y-contrast] .cc { box-shadow: 0 0 0 2px #000000; }
html[data-a11y-contrast] .calc-wait { color: #ffffff; }
html[data-a11y-contrast] .voice-msg { color: #8a0016; }
html[data-a11y-contrast] .plan.alt { box-shadow: inset 0 0 0 2px #000000; }

/* ---------- 4. highlight links: every link is underlined and outlined; in the text of a page it also gets the
   highlighter behind it ---------- */
html[data-a11y-links] a[href] { text-decoration: underline !important; text-decoration-thickness: .1em !important; text-underline-offset: .22em; outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
html[data-a11y-links] main a[href]:not(.btn) { background-color: var(--hl); color: var(--ink); }
html[data-a11y-links] a.btn { outline-color: var(--ink); outline-offset: 3px; }
html[data-a11y-links] .foot a.btn { outline-color: var(--paper); }

/* ---------- 5. stop animations: what the site already does for a device set to reduce motion, switched on by hand.
   Nothing animates or eases, the page does not glide to an anchor, and the notes and the phones stop following the
   scroll (site.js stops moving them; --p is held at rest here even against a value it wrote a moment ago) ---------- */
html[data-a11y-motion='off'] { scroll-behavior: auto !important; }
html[data-a11y-motion='off'] *, html[data-a11y-motion='off'] *::before, html[data-a11y-motion='off'] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
html[data-a11y-motion='off'] :is(.drift, .flow-tilt) { --p: 0 !important; }
html[data-a11y-motion='off'] .drift { translate: none; rotate: var(--r, 0deg); }

/* ---------- the button: fixed to the bottom corner, the universal access symbol on the site's ink, with a paper ring
   so that it shows on the dark footer too. It sits under the top bar's layer, so the open menu is painted over it.
   --a11y-lift is how far a11y.js has moved it up to stay clear of a main button, a footer link, the cookie question or
   the call's status. While the call form is open over the page (html.locked) it is put away with the rest of the page ---------- */
.a11y { position: fixed; z-index: 25; inset-inline-end: calc(12px + env(safe-area-inset-right)); inset-block-end: calc(12px + env(safe-area-inset-bottom)); translate: 0 calc(-1 * var(--a11y-lift, 0px)); }
.a11y[data-open] { z-index: 45; }
html.locked .a11y { display: none; }
.a11y-btn { display: grid; place-items: center; inline-size: 48px; block-size: 48px; padding: 0; border: 0; border-radius: 50%; background-color: var(--ink); color: var(--paper); box-shadow: 0 0 0 2px var(--paper), 0 10px 24px -8px rgba(16, 48, 43, .6); cursor: pointer; }
.a11y-btn svg { inline-size: 31px; block-size: 31px; }
.a11y-btn:not([aria-expanded='true']):hover { background-color: #0a2420; }
html[data-a11y-contrast] .a11y-btn:not([aria-expanded='true']):hover { background-color: #000000; }
.a11y-btn[aria-expanded='true'] { background-color: var(--hl); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 10px 24px -8px rgba(16, 48, 43, .6); }

/* ---------- the panel: opens above the button, never wider or taller than the screen, and scrolls inside when a
   short screen or a large text needs it. Its own text follows the text size it sets ---------- */
.a11y-panel { position: absolute; inset-block-end: calc(100% + 10px); inset-inline-end: 0; display: grid; gap: 10px; inline-size: min(344px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-block-size: calc(100vh - 94px - var(--a11y-lift, 0px)); max-block-size: calc(100dvh - 94px - var(--a11y-lift, 0px)); overflow: auto; overscroll-behavior: contain; padding: 16px; border-radius: var(--r-card); background-color: var(--paper); color: var(--ink); box-shadow: 0 0 0 1.5px var(--line2), 0 26px 60px -20px rgba(16, 48, 43, .55); font: 400 calc(15.5px * var(--ts))/1.4 var(--body); }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a11y-title { font: var(--dw) calc(21px * var(--tsd))/1.15 var(--display); letter-spacing: -.014em; }
.a11y-x { flex: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; margin-block: -8px; margin-inline: 0 -8px; padding: 0; border: 0; border-radius: var(--r-btn); background: none; color: var(--ink); cursor: pointer; }
.a11y-x svg { inline-size: 22px; block-size: 22px; }
.a11y-group { display: grid; gap: 8px; }
.a11y-label { font-weight: 700; }
.a11y-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.a11y-sizes button, .a11y-sw, .a11y-reset { border: 0; border-radius: var(--r-btn); background-color: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line2); font: 700 calc(15px * var(--ts))/1.25 var(--body); cursor: pointer; }
.a11y-sizes button { min-block-size: 46px; padding: 6px 2px; overflow-wrap: anywhere; }
.a11y-sizes button[aria-pressed='true'] { background-color: var(--ink); color: var(--paper); box-shadow: none; }
.a11y-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; inline-size: 100%; min-block-size: 50px; padding: 8px 12px 8px 14px; text-align: start; }
.a11y-state { flex: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: calc(13.5px * var(--ts)); }
.a11y-track { position: relative; inline-size: 44px; block-size: 26px; border-radius: 99px; background-color: var(--white); box-shadow: inset 0 0 0 2px var(--ink); }
.a11y-track::after { content: ''; position: absolute; inset-block-start: 5px; inset-inline-start: 5px; inline-size: 16px; block-size: 16px; border-radius: 50%; background-color: var(--ink); transition: translate .18s var(--ease); }
.a11y-sw[aria-checked='true'] .a11y-track { background-color: var(--ink); }
.a11y-sw[aria-checked='true'] .a11y-track::after { background-color: var(--hl); translate: 18px 0; }
.a11y-sw[aria-disabled='true'] { cursor: default; }
.a11y-note { font-size: calc(14px * var(--ts)); }
.a11y-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-block-start: 2px; }
.a11y-reset { min-block-size: 44px; padding: 6px 18px; }
.a11y-foot a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ink); font-weight: 700; text-underline-offset: 4px; }
html:is([data-a11y-text], [data-a11y-spacing]) .a11y-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@keyframes a11y-in { from { opacity: 0; translate: 0 8px; } }
/* the panel's own small entrance respects the device's setting and the "stop animations" option */
@media (prefers-reduced-motion: no-preference) { html:not([data-a11y-motion]) .a11y-panel:not([hidden]) { animation: a11y-in .2s var(--ease); } }
/* focus: a paper, ink and paper ring, so it shows on the page and on the dark footer alike (last, so nothing above hides it) */
.a11y-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink), 0 0 0 8px var(--paper); }
.a11y-panel :is(button, a):focus-visible { outline: none; border-radius: var(--r-btn); box-shadow: var(--focus); }
.a11y-sizes button[aria-pressed='true']:focus-visible { box-shadow: var(--focus); }

/* ---------- the foot of the page keeps a strip free for the button, wherever the page's side margin is too narrow to
   hold it (only where the options exist: a11y.js marks the page) ---------- */
@media (max-width: 1279px) { html[data-a11y] .foot { padding-block-end: calc(76px + env(safe-area-inset-bottom)); } }