/* assets/a11y.css: accessibility pass, WCAG 2.2 Level AA (27 Sep 2026; README section 11.7). Hand-written (not generated),
   loaded on every page after type.css (sitegen/shell.py A11Y_CSS; only brand.css, colours and logo sizes, comes after it).
   Every rule only changes what happens when something would otherwise be hidden, cut off or drawn on top of other text:
   bigger text spacing (1.4.12), zoom (1.4.10) or keyboard focus behind a bar that stays on screen (2.4.11). At normal
   settings the owner's v3 look does not change, except where words were already cut off or ran past their box (listed in
   the README).
   Header rules are NOT here: they live in sitegen/header.py (HEADER_CSS_APPEND), because header.py treats any header class
   named in assets/*.css as a clash and renames it. Nothing in d12/, page-types/, menus/ or assets/types/ changes. */

/* ---------------------------------------------------------------- 1. step-by-step pages: focus stays clear of Back / Next */
/* How it works, About, Privacy, Terms, Accessibility on phones: Back / Next is sticky just above the Call / Book bar. The
   page keeps that much room at the bottom when it scrolls a focused link into view. site.js writes the bar's real height
   into --sb-stnav (it grows with text spacing); 72px is the usual height. */
@media (max-width: 720px) {
  html.pt-js:has(.pt-st__nav) { scroll-padding-bottom: calc(var(--sb-stnav, 72px) + 16px + env(safe-area-inset-bottom)); }
  html.pt-js.sb-mbar-on:has(.pt-st__nav) { scroll-padding-bottom: calc(76px + var(--sb-stnav, 72px) + 16px + env(safe-area-inset-bottom)); }
}
/* short screens (landscape phones, 200-400% zoom): Back / Next stays under the part instead of on top of it */
@media (max-width: 720px) and (max-height: 560px) {
  html.pt-js .pt-st__nav { position: static; padding: 12px 0 0; background: none; }
  html.pt-js:has(.pt-st__nav), html.pt-js.sb-mbar-on:has(.pt-st__nav) { scroll-padding-bottom: calc(69px + 16px + env(safe-area-inset-bottom)); }
}
/* the Back / Next labels wrap inside their button instead of running past its edge (at 320px "Next: Estimates" started 7px
   outside the blue button; with text spacing "Next: At home" needed 149px in a 132px button). On phones the buttons use
   8px side padding and an 8px gap (were 12 / 10), so the labels that fitted on one line at 390px still do. */
.pt-st__nav .btn { white-space: normal; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 720px) { .pt-st__nav .btn { padding-left: 8px; padding-right: 8px; gap: 8px; } }

/* ---------------------------------------------------------------- 2. client bar (signed-in pages) */
/* Wider screens: when the items do not fit (text spacing, zoom, a longer word), site.js adds sb-fit1..3 one at a time:
   1 hides the small icons, 2 moves the p3 items and Sign out into More (the same as the 1140px layout), 3 also moves
   My estimates (the 1023px layout). Sign out is never drawn on top of the list again. */
/* the bar never grows wider than the screen (it did by 4px at 1141px and by 64px at 721px with text spacing: sideways scroll);
   anything that does not fit now overflows inside the row, where site.js sees it */
.cbar__clip { min-width: 0; }
@media (min-width: 721px) {
  .cbar.sb-fit1 .cbar__list .cbar__link .i, .cbar.sb-fit1 .cbar__out .i { display: none; }
  .cbar.sb-fit2 .cbar__list .cb-p3, .cbar.sb-fit2 .cbar__out { display: none; }
  .cbar.sb-fit2 .cbar__morewrap { display: block; }
  .cbar.sb-fit3 .cbar__list .cb-p2 { display: none; }
  .cbar.sb-fit3 .cbar__menu .cm-p2 { display: block; }
}
/* Phones: four fixed cells. When a label would stick out of its cell (text spacing, 400% zoom), site.js adds sb-wrap and the
   labels wrap inside their cells (the bar grows a little) instead of spilling. At normal settings nothing changes. */
@media (max-width: 720px) {
  .cbar.sb-wrap .cbar__in { height: auto; min-height: var(--cbar-h); }
  .cbar.sb-wrap .cbar__next, .cbar.sb-wrap .cbar__link, .cbar.sb-wrap .cbar__more { height: auto; min-height: 44px; white-space: normal; text-align: center; overflow-wrap: anywhere; }
  .cbar.sb-wrap .cbar__link { flex-wrap: wrap; row-gap: 2px; }
  .cbar.sb-wrap .cbar__lab { min-width: 0; }
}

/* ---------------------------------------------------------------- 3. names under swatches and tiles wrap (never cut) */
/* hardware colours (Samples page, product pages): a long one-word name ("Butterscotch") wraps inside its 84 / 72px item */
.sb-hw__name { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
/* sample and colour tiles: the full name shows (was cut with "…" at 320px / 400% zoom and with text spacing) */
.pt-fab__name, .pt-fab__col, .pt-fab__lvl { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- 4. window picker captions (Gallery, Inspiration) */
/* the caption under each photo was cut after two lines; its words are not shown anywhere else on the card */
@media (min-width: 721px) {
  .pt-wph__cap span { display: block; overflow: visible; -webkit-line-clamp: unset; }
}

/* ---------------------------------------------------------------- 5. installation time chips (Book installation) */
.sb-t [data-sb-chips] .chip { white-space: normal; text-align: center; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- 6. Samples, phone Filters sheet: focus clear of its title bar */
/* The sheet's title bar ("Filters" and Close) stays at the top while the sheet scrolls. When Tab loops from "Show N samples"
   back to Close and on to the first chips, the sheet scrolled them in right under that bar: fully hidden (WCAG 2.4.11;
   re-check 27 Sep 2026). The sheet keeps the bar's height free when it scrolls a focused control into view: the bar is
   69px (85px with WCAG text spacing), so 96px leaves a small gap in both cases. */
@media (max-width: 720px) {
  .sb-sp__filters { scroll-padding-top: 96px; }
}

/* ---------------------------------------------------------------- 7. Finder (Blackout & sleep): focus moves on with "Reduce motion" on */
/* After Next, the finder moves focus to the next question, and after "See my picks" to "Our picks for you" (finder.js).
   With the phone's or computer's "Reduce motion" setting on, d12 gives every property a 0.01ms transition, so the step being
   shown was still "hidden" at the moment focus moved there: focus stayed on Next, then fell back to the page when Next went
   away with the picks (WCAG 2.4.3; re-check 27 Sep 2026). Only with Reduce motion on, the finder's steps show at once, so
   focus lands where it should. Nothing changes for anyone else. */
@media (prefers-reduced-motion: reduce) {
  .pt-finder .pt-q, .pt-finder .pt-q *, .pt-finder .pt-res, .pt-finder .pt-res * { transition: none !important; }
}

/* ---------------------------------------------------------------- 8. Build a blind, wider screens: focus clear of Back / Next */
/* From 721px, Back / Next stays stuck to the bottom of the screen while the builder is on it (84px). Round 7 made the slim
   "Help me choose at the consultation" rows (48px) the Tab stop of a part once chosen, and at 820×1180 Tab put the Top row
   right under the bar: fully hidden (WCAG 2.4.11; round 7 re-check, 27 Sep 2026). The page keeps the bar's height free when
   it scrolls a focused control into view (phones already keep 88px, site.css). */
@media (min-width: 721px) {
  html:has(.t-builder [data-builder]) { scroll-padding-bottom: 100px; }
}