/* =========================================================================== Round 6 · R1 — persistent support control --------------------------------------------------------------------------- Companion to inc/round6-support.php and assets/js/round6-support.js. THE ONE MEASUREMENT THIS WHOLE SHEET RESTS ON The docked tab's visible width is 16px, set once in --r6s-tab and used only in the docking transform. Against that, here is every inline-padding floor this theme ships, audited across all of style.css and assets/css/*.css: .wrap padding-inline: clamp(20px, 5vw, 56px) -> 20 .pharma-rail-viewport padding-inline: clamp(18px, 3.4vw, 44px) -> 18 phone gutter --mobile-gutter: clamp(20px, 5.5vw, 24px) -> 20 The tightest is 18px, so no content box on this site can come closer than 18px to the viewport's right edge, at any width. 16 < 18. The docked control therefore cannot overlap content at ANY viewport width — not because a screenshot looked fine, but because the two numbers cannot cross. Round 5's failure was a 164x52 pill at the bottom-right corner covering 86% of a wishlist button; the equivalent number here, in the resting state, is zero by construction. If a future edit lowers any of those floors below 16px, THIS is the guarantee that breaks, which is why the audit lives here and not in a report someone has to go and find. The only chrome that is allowed nearer than 16px — the mix-box tray (round4-box.css, right: clamp(12px, 2.4vw, 26px)) and the lightbox close button (round4-media.css, right: clamp(12px, 3vw, 28px)) — both sit at a HIGHER z-index than this control (220 and 260 against 170), so they paint over the tab and take its clicks rather than the other way round. The script docks for both as well; the layering is the second, independent line. WHY IT IS EDGE-ATTACHED AND NOT A FLOATING CIRCLE Round 5's B8 finding: a floating circular widget pinned to a corner is the universal signifier of an OPEN live chat, and this channel is not open. A tab welded to the viewport edge (square right corners, no drop shadow when docked) reads as chrome. (Round 7 added a QR card that this tab minimises to; it lives in round7-support.css and is opened only by the script.) WHY IT SITS IN THE LOWER-RIGHT AND NOT IN THE CORNER ITSELF The bottom-right corner is already occupied on this site: the compare tray (mobile.css, min-height 72px), the mix-box tray (round4-box.css, --p3box-h), the toast, and on a handset the browser's own chrome and home indicator. So the control is lifted clear of all of them and the lift is derived from the trays' own measured heights rather than guessed — see --r6s-floor below. MOTION Transform and opacity only, --ease, no bounce. Nothing here animates a layout property: the two states are one `translateX` apart, which is why the control can cross-fade between them without ever reflowing the page. ========================================================================= */ .r6s { /* --- the contract ------------------------------------------------- */ --r6s-tab: 16px; /* docked visible width, < 18px */ --r6s-panel: 236px; /* labelled body width (R7: + the "+" button) */ /* Resting height above the viewport bottom. clamp() so a short phone viewport does not push the control into the middle of the page and a tall desktop one does not strand it halfway up. */ --r6s-lift: clamp(96px, 17vh, 180px); /* Raised only while another piece of bottom chrome is on screen. 0 by default so nothing moves on a page that has no tray. */ --r6s-floor: 0px; position: fixed; /* 170 sits above .grain (150) and all page content, and below every overlay that is allowed to own the screen: compare tray 180, backdrop 190, cart drawer 200, filter sheet 205, search 210, box tray 220, toast 220, lightbox 260, skip link 500. The script docks for those anyway; this ordering is the belt to that braces. Round 6 Lane C's ambient field is a fixed canvas at z-index 0, so this control is unambiguously above it. */ z-index: 170; right: env(safe-area-inset-right, 0px); bottom: calc(max(var(--r6s-lift), var(--r6s-floor)) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: stretch; width: max-content; max-width: calc(100vw - 12px); min-height: 76px; /* #59677C, not --line-strong. --line-strong (#2b3a50) measures 1.79:1 against the page and fails WCAG 1.4.11's 3:1 for a control boundary; #59677C measures 3.58:1 and is the same boundary Round 5 already adopted for the checkout and lab-report controls, so this introduces no new value. */ border: 1px solid #59677C; border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); /* OPAQUE on purpose. Round 5's lesson: an engine can declare backdrop-filter and never composite it, and Round 6 puts a moving 3D field behind every route. Legibility here does not depend on either. */ background: var(--panel); color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent; /* Docked is the resting state, the no-JS state and the state PHP prints. */ transform: translateX(calc(100% - var(--r6s-tab))); transition: transform 260ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease); } /* Round 7: the root used to be the link itself, and a blanket `.r6s * { pointer-events: none }` made it one target. The root is now a plain wrapper holding a link (or a label) AND a real