/* Public site: full screen width and small corners on pill shapes (2026-10-23, staging).
   Owner's request: production's site exactly as it is, with only (1) the content filling the screen width
   (same side padding; running text keeps its own reading widths), (2) every pill shape given a small 6px
   corner (circles stay circles), (3) every page opening at the top (site.js). Loaded last on the 24 public
   pages only; the portals never load it. Remove the line and a page is production's again.
   Record: docs/backend/site-fullwidth-2026-10-23.md. */

/* 2. Pills: every rule that draws a pill uses this token (buttons, eyebrows, badges, chips, tabs, chat). */
:root { --r-pill: 6px; }

/* 1. Full width: the page container spans the window, with its existing side padding. */
.wrap { max-width: none; }
/* Production's own narrower columns stay as they are: the inner page heroes keep their centred 56rem column. */
.wrap.page-hero__in { max-width: 56rem; }
/* The team photo (home and About) would grow past 1,100px wide and 1,400px tall on very wide screens; beside its
   text it keeps about the size it has at 1440px, centred in its half. Stacked (850px and below) it is production's. */
@media (min-width: 851px) { .split > .photo { width: 100%; max-width: 36rem; justify-self: center; } }

/* 4. The floating "Ask AA" button never sits on words (owner approval 2026-10-23). Once content reached the right edge
   it covered words at rest (About's heading at 2560px, Pricing's "Hourly services" card at 1920px, and passing card
   text on 12-15% of resting positions from 1280px up); production already did at 768px and 1024px. site.js checks
   each time the page comes to rest and adds .chatbot--shown only where nothing is under the button; elsewhere it
   fades out and lets clicks through. It stays in the tab order, and an open chat or a focused button always shows.
   Browsers without :has() ignore the rule (the button shows as before).
   It fades in over 0.2s and out over 0.1s, so it is gone within a tenth of a second of stepping aside (r3). */
.chatbot { transition: opacity .2s ease; }
.js .chatbot:not(.chatbot--shown):not(:focus-within):has(> .chatbot__panel[hidden]) { opacity: 0; pointer-events: none; }
.js .chatbot:not(.chatbot--shown) { transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) { .chatbot, .js .chatbot:not(.chatbot--shown) { transition: none; } }