/* Reading tools: the round button at the bottom left and its panel, on every page.
   The same tools as tyekesmedia.com (text size, contrast, underlined links, less motion, a
   plain font, a big pointer, a reading line), in Six-IR's light look. a11y.js sets the
   classes on <html> before the page draws, so nothing flashes. */

/* The button and the panel */
.a11y-fab {
  position: fixed; left: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); z-index: 30;
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ink-900); color: var(--text-inverse); box-shadow: var(--sh-pop);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
/* A thin spectrum ring, the Tyeke's Media mark of the button */
.a11y-fab::before {
  content: ''; position: absolute; inset: -2px; border-radius: 50%; padding: 2px; background: var(--spectrum);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.a11y-fab:hover { background: var(--ink-700); transform: scale(1.05); }
.a11y-fab svg { width: 24px; height: 24px; }
.a11y-fab:focus-visible { outline-offset: 4px; border-radius: 50%; }

.a11y-panel {
  position: fixed; left: var(--s-4); bottom: calc(var(--s-4) + 60px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  width: 340px; max-width: calc(100vw - 2 * var(--s-4)); max-height: min(78dvh, 640px); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--sh-pop);
  font: 400 var(--fs-sm)/1.4 var(--font-body);
}
.a11y-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-4); }
.a11y-head h2 { margin: var(--s-1) 0 0; font: 600 var(--fs-xl)/var(--lh-snug) var(--font-display); letter-spacing: -0.015em; }
.a11y-close {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); font-size: var(--fs-xl); line-height: 1;
}
.a11y-close:hover { background: var(--surface-sunk); }
.a11y-sizes { margin-bottom: var(--s-4); }
.a11y-seg { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.a11y-seg button {
  flex: 1; min-height: 44px; padding: 0 var(--s-1); border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); font: 600 var(--fs-md)/1 var(--font-body);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.a11y-seg button:nth-child(2) { font-size: var(--fs-lg); }
.a11y-seg button:nth-child(3) { font-size: var(--fs-xl); }
.a11y-seg button:hover { border-color: var(--ink-900); }
.a11y-seg button[aria-pressed='true'] { background: var(--ink-900); border-color: var(--ink-900); color: var(--text-inverse); }
.a11y-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
}
.a11y-row h3 { margin: 0 0 2px; font-size: var(--fs-sm); font-weight: 600; }
.a11y-row p { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
/* The switch: grey track, ink when on */
.a11y-switch {
  flex: none; position: relative; width: 46px; height: 26px; padding: 0; border: 1px solid var(--ink-300); border-radius: var(--r-pill);
  background: var(--paper-200); transition: background var(--t-fast), border-color var(--t-fast);
}
.a11y-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--sh-raise); transition: transform var(--t-fast) var(--ease-out);
}
.a11y-switch[aria-checked='true'] { background: var(--ink-900); border-color: var(--ink-900); }
.a11y-switch[aria-checked='true']::after { transform: translateX(20px); }
.a11y-reset { width: 100%; margin-top: var(--s-2); }
.a11y-line {
  position: fixed; left: 0; right: 0; top: 0; z-index: 49; height: 2.4em; pointer-events: none; display: none;
  background: color-mix(in srgb, var(--tm-violet) 8%, transparent); border-block: 2px solid var(--accent);
}
@media (max-width: 600px) {
  .a11y-fab { left: var(--s-3); bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
  .a11y-panel { left: var(--s-3); right: var(--s-3); width: auto; max-width: none; bottom: calc(var(--s-3) + 56px + env(safe-area-inset-bottom, 0px)); }
}
/* On the resizer and batch pages the button sits in the bottom bar, beside the status line */
.dock.has-a11y { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.dock.has-a11y > :not(.dock__status):not(.a11y-fab) { grid-column: 1 / -1; }
.dock .a11y-fab { position: relative; left: auto; bottom: auto; z-index: auto; width: 40px; height: 40px; box-shadow: none; }
.dock .a11y-fab svg { width: 22px; height: 22px; }
.a11y-panel--dock { left: auto; right: var(--s-4); bottom: var(--s-4); }
/* On a full-screen step (the finished file) the button sits in its top bar, at the right;
   a step without one gets the button floating in its corner */
.a11y-fab.a11y-fab--top { position: relative; left: auto; bottom: auto; z-index: auto; flex: none; width: 40px; height: 40px; box-shadow: none; }
.a11y-fab--top svg { width: 22px; height: 22px; }
.result__top:has(.a11y-fab) .result__step { margin-left: auto; text-align: right; }
.a11y-fab.a11y-fab--over { position: fixed; left: var(--s-4); right: auto; bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); z-index: 5; width: 44px; height: 44px; box-shadow: var(--sh-pop); }
/* The keyboard way in: hidden like the page's skip link until it has focus */
.a11y-skip { border: 0; font: 600 var(--fs-sm)/1.4 var(--font-body); cursor: pointer; }
.a11y-skip:focus { top: var(--s-3); }
@media (max-width: 600px) { .a11y-panel--dock { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); } }
@media print { .a11y-fab, .a11y-panel, .a11y-line { display: none !important; } }

/* Text size: the type tokens are in px, so each step scales them. */
html[data-a11y-text] {
  --fs-2xs: calc(11px * var(--a11y-k)); --fs-xs: calc(12px * var(--a11y-k)); --fs-sm: calc(14px * var(--a11y-k));
  --fs-md: calc(16px * var(--a11y-k)); --fs-lg: calc(18px * var(--a11y-k)); --fs-xl: calc(22px * var(--a11y-k));
  --fs-2xl: calc(28px * var(--a11y-k)); --fs-3xl: calc(clamp(32px, 5vw, 44px) * var(--a11y-k)); --fs-4xl: calc(clamp(40px, 8vw, 84px) * var(--a11y-k));
}
html[data-a11y-text='1'] { --a11y-k: 1.125; }
html[data-a11y-text='2'] { --a11y-k: 1.25; }
/* On a phone the tallest headline stays inside the screen at the biggest step, and the
   header keeps its normal size so the links still fit on one line. */
@media (max-width: 600px) {
  html[data-a11y-text] { --fs-4xl: min(calc(clamp(40px, 8vw, 84px) * var(--a11y-k)), 12.5vw); }
  html[data-a11y-text] .topbar { --fs-xs: 12px; --fs-sm: 14px; --fs-lg: 18px; }
}
/* Bigger or wider type may wrap where it was kept on one line */
html:is([data-a11y-text], .a11y-readable) .tile__size { white-space: normal; }
html:is([data-a11y-text], .a11y-readable) .tile__name { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: break-word; }
/* At the biggest text the settings column (a phone's width, or the 400 px side panel) has
   room for one size tile per row, so the names keep to two lines */
html[data-a11y-text='2'] #presets .grid { grid-template-columns: minmax(0, 1fr); }
html:is([data-a11y-text], .a11y-readable) .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-block: var(--s-2); }
html:is([data-a11y-text], .a11y-readable) .plan { min-width: 0; }
html:is([data-a11y-text], .a11y-readable) .plan .btn { width: auto; }

/* High contrast: darker secondary text and lines, on day and night screens. Only colours
   change, never a filter, so photos and previews show their true colours. */
html.a11y-contrast {
  --text-muted: #262C55; --text-disabled: #4A5072; --line: #4A5072; --focus: #0B0D1F;
  --text-inverse-muted: #D6DCF5; --tm-mist-dark: #D6DCF5;
  --night-line: rgba(200, 215, 255, .45); --night-line-2: rgba(220, 230, 255, .7);
}
html.a11y-contrast :focus-visible { outline-width: 3px; }

/* Underline links */
html.a11y-underline a:not(.btn):not(.brand) { text-decoration: underline !important; text-underline-offset: 3px; }

/* Reduce motion: no animations, transitions or smooth scrolling. reel.js also stops the
   landing page's demos and shows each finished state. */
html.a11y-reduce { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; --t-develop: 0ms; }
html.a11y-reduce *, html.a11y-reduce *::before, html.a11y-reduce *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html.a11y-reduce .wipe { --p: 50%; }
html.a11y-reduce .wipe__line { opacity: 1; }

/* Readable font: a plain, wide typeface everywhere (numbers keep the mono face) */
html.a11y-readable {
  --font-display: Verdana, 'Segoe UI', Arial, sans-serif; --font-body: Verdana, 'Segoe UI', Arial, sans-serif;
  --tracking-display: 0;
}
html.a11y-readable body * { letter-spacing: normal !important; font-style: normal !important; }

/* Large cursor: each kind of pointer in a big version, so dragging, resizing, the erase
   brush and typing still show what they do. Disabled controls keep the "not allowed" sign. */
html.a11y-cursor { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><path d='M8 4 L8 38 L17 29 L23 42 L29 39 L23 27 L37 27 Z' fill='white' stroke='black' stroke-width='2.5' stroke-linejoin='round'/></svg>") 8 4, auto; }
html.a11y-cursor :is(a[href], button, summary, label, select, [role='switch'], [role='tab'], input:is([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='submit'], [type='button']), .drop__pick, .swatch, .swatch--pick input, .pick, .check, .switch, .switch input, .link, .account__head, .swap-pick, .sheet-bar__actions label):not(:disabled):not([aria-disabled='true']) {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><g fill='white' stroke='black' stroke-width='2.5' stroke-linejoin='round'><path d='M15 25 V7 a3 3 0 0 1 6 0 V18 a3 3 0 0 1 6 0 V20 a3 3 0 0 1 6 0 V22 a3 3 0 0 1 6 0 V32 c0 6 -4 10 -10 10 H22 c-4 0 -6 -2 -8 -5 L6 28 a3 3 0 0 1 5 -4 Z'/></g></svg>") 18 3, pointer;
}
html.a11y-cursor :is(input:not([type]), input:is([type='text'], [type='email'], [type='password'], [type='search'], [type='number'], [type='url'], [type='tel']), textarea, [contenteditable='true']):not(:disabled) {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><path d='M15 5 H29 M22 5 V39 M15 39 H29' fill='none' stroke='white' stroke-width='8' stroke-linecap='round'/><path d='M15 5 H29 M22 5 V39 M15 39 H29' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>") 22 22, text;
}
html.a11y-cursor .crop__box, html.a11y-cursor .crop__box.is-dragging {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><g fill='white' stroke='black' stroke-width='2.5' stroke-linejoin='round'><path d='M22 2 L30 10 H25 V19 H34 V14 L42 22 L34 30 V25 H25 V34 H30 L22 42 L14 34 H19 V25 H10 V30 L2 22 L10 14 V19 H19 V10 H14 Z'/></g></svg>") 22 22, move;
}
html.a11y-cursor .crop__corner:is([data-corner='nw'], [data-corner='se']) {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><g fill='white' stroke='black' stroke-width='2.5' stroke-linejoin='round'><path transform='rotate(45 22 22)' d='M2 22 L11 13 V18 H33 V13 L42 22 L33 31 V26 H11 V31 Z'/></g></svg>") 22 22, nwse-resize;
}
html.a11y-cursor .crop__corner:is([data-corner='ne'], [data-corner='sw']) {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><g fill='white' stroke='black' stroke-width='2.5' stroke-linejoin='round'><path transform='rotate(-45 22 22)' d='M2 22 L11 13 V18 H33 V13 L42 22 L33 31 V26 H11 V31 Z'/></g></svg>") 22 22, nesw-resize;
}
html.a11y-cursor .brush__mask {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><path d='M22 3 V41 M3 22 H41' stroke='white' stroke-width='7' stroke-linecap='round'/><path d='M22 3 V41 M3 22 H41' stroke='black' stroke-width='2.5' stroke-linecap='round'/><circle cx='22' cy='22' r='9' fill='none' stroke='white' stroke-width='6'/><circle cx='22' cy='22' r='9' fill='none' stroke='black' stroke-width='2.5'/></svg>") 22 22, crosshair;
}

/* Reading guide */
html.a11y-guide .a11y-line { display: block; }