-padding offset) with the main text's .reading-grid. That shared containing box is what keeps the comparison panel's columns aligned with the main text's columns at every breakpoint. • <500px: position:sticky, block layout, panel hosts its own .reading-grid (which owns its 7-column Stage D template via §27 of edition_text.css) • ≥500px: position:sticky inside article.passage-container's CSS grid, display:grid with grid-template-columns:subgrid so it inherits the parent grid tracks exactly Sticky works here because neither

nor article.passage-container create a scroll container —

explicitly uses overflow:visible (see main.css §4 comment) and , scope overflow-x:clip without turning themselves into scroll containers. Do not introduce overflow:auto/hidden on

or article.passage-container: it will silently scope this sticky to that ancestor's height instead of the viewport and break the panel (see commit 75f30b3 for the prior regression). #comparison-panel is also the scroll container at all viewport sizes (overflow-y:auto, max-height:40vh) — this keeps a single scroll target for JS. */ #comparison-panel { position: sticky; bottom: 0; max-height: 40vh; /* overflow-x must be clip, not visible: per CSS spec, if one axis is auto/scroll and the other is visible, the visible axis is silently promoted to auto, turning this panel into a horizontal scroll container. Safari honours that promotion strictly; rotated witness-sigil content then yields a phantom horizontal scrollbar (first reported on Bx.P.23). clip keeps Y scrollable while hard-clipping any X overflow with no scroll affordance. */ overflow-x: clip; overflow-y: auto; /* Prevent iOS scroll chaining: when the panel reaches its scroll limit, further drag must not bubble up to rubber-band the page, because the window scroll handler would interpret the bounce-back as scroll-up and reveal the hidden bottom toolbar. */ overscroll-behavior: contain; padding-top: 4px; background-color: var(--compare-panel-bg); border-top: 2px solid var(--color-border-strong); display: none; z-index: 200; /* comparison-panel tier */ } #comparison-panel.shown { display: block; } /* Full-bleed at mobile widths:

has padding: 0 var(--main-pad-x) at <900px, and article.passage-container adds a further 7px (via --article-pad-x) at Stage B and C. Both insets must be absorbed by negative margin for the panel's border-top and bg fill to reach the viewport edges. Matching padding keeps the inner content (and subgrid tracks, at ≥500) aligned where they were. --main-pad-x is declared on

in main.css §15; --article-pad-x on article.passage-container in edition_text.css §26 and §26b. Both are registered as typed so the token is resolved at the declaration site. At <500 the article has no inline padding, so --article-pad-x falls back to its registered initial-value of 0px. */ @media (max-width: 899px) /* < --bp-desktop */ { #comparison-panel { --compare-full-bleed: calc(var(--main-pad-x, 1ex) + var(--article-pad-x, 0px)); margin-inline: calc(-1 * var(--compare-full-bleed)); padding-inline: var(--compare-full-bleed); } } /* Hide footer when comparison panel is open so the sticky panel remains pinned to viewport bottom even at the document's end. */ body:has(#comparison-panel.shown) footer { display: none; } /* §2b Subgrid sharing at ≥ 500px ────────────────────────────────────────── */ /* At ≥500px article.passage-container becomes a CSS grid owner, so the panel switches from block layout to a subgrid child sharing column tracks with the parent grid (see edition_text.css §4a). At <500px article.passage-container is still block, so the panel stays block and hosts its own 7-column .reading-grid via §27 Stage D rules. */ @media (min-width: 500px) /* --bp-phone */ { #comparison-panel { grid-column: 1 / -1; } #comparison-panel.shown { display: grid; grid-template-columns: subgrid; } #compare-container { display: contents; } #compare-container .reading-grid { grid-column: 1 / -1; grid-template-columns: subgrid; } #comparison-panel > .scroll-fade, #compare-container > .witness-notfound, #compare-container > .panel-loading { grid-column: 1 / -1; } } /* ── §3 Scroll-fade ──────────────────────────────────────────────────────── */ /* Base styles in main.css §13b. Set --scroll-fade-bg to the panel background so the gradient fades into the right colour. TODO: Replace JS with CSS @container scroll-state(scrollable: bottom) once Chrome's implementation stabilizes. */ #comparison-panel { --scroll-fade-bg: var(--compare-panel-bg); } /* ── §4 Compare container ────────────────────────────────────────────────── */ /* Scroll is handled by #comparison-panel at all sizes; #compare-container must NOT create its own scroll context (no overflow-y, no max-height). */ #compare-container { width: 100%; max-width: var(--content-max-width); margin-left: auto; margin-right: auto; position: relative; padding: 0; box-sizing: border-box; overflow-x: clip; } /* ── §5 Close button ─────────────────────────────────────────────────────── */ /* Sticky so it stays visible as the panel's own content scrolls. Mobile (<500px): float:right keeps it at top-right before the grid context. ≥500px: panel is a subgrid; grid-column/justify-self place it top-right. In both cases position:sticky top:4px keeps it pinned within the panel's own scroll container (#comparison-panel has overflow-y:auto). */ #comparison-panel .close-button { display: flex; align-items: center; justify-content: center; position: sticky; top: 4px; float: right; /* keeps it in the top-right without a grid context */ margin-right: 4px; margin-bottom: -28px; /* cancel height so content starts behind button */ z-index: 10; width: 28px; height: 28px; font-size: 18px; line-height: 1; color: light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6)); } @media (min-width: 500px) /* --bp-phone */ { #comparison-panel .close-button { /* In the subgrid, float has no effect — use grid placement instead. */ grid-column: 1 / -1; justify-self: end; align-self: start; float: none; /* position: sticky; top: 4px inherited from base rule. */ } } #comparison-panel .close-button:hover { text-decoration: none; color: var(--color-link); border-radius: 5px; background-color: light-dark(rgba(169, 169, 169, 0.25), rgba(80, 80, 80, 0.25)); } /* ── §6 Not-found witness placeholder ────────────────────────────────────── */ #compare-container .witness-notfound { grid-column: 1 / -1; font-style: italic; color: var(--color-text-muted); } /* Sigil label in linenum-col for witnesses with no matching line. Visible at ≥650px where witness-sigil-panel is display:none. */ #compare-container .witness-notfound-label { font-style: italic; color: var(--color-text-muted); } /* ── §7 Line numbering overrides ─────────────────────────────────────────── */ /* Match the comparison panel's background so the linenum column blends. */ #compare-container .linenum-col { background-color: var(--compare-panel-bg); min-height: 100%; } /* Show Athlone number alongside local number at desktop (≥ 900px). index-linenum is display:none globally; .comparison-mode enables it for main text, and #comparison-panel is now inside .comparison-mode (main). */ #compare-container .index-linenum { display: inline; } /* Below desktop, hide Athlone number to keep line numbers compact. */ @media (max-width: 899px) /* < --bp-desktop */ { #compare-container .index-linenum { display: none; } } /* At wide desktop, show all comparison linenumbers for cross-reference. */ @media (min-width: 900px) /* --bp-desktop */ { #compare-container span.linenumber.hidden { display: inline-block; color: var(--color-text-faint); } } #compare-container span.linenumber:hover { overflow: visible; color: inherit; } /* Adjacent-match lines (context lines not in the base text) */ span.linenumber.adjacentMatch { font-style: italic; } /* Active line highlighting */ span.linenumber.active-line { font-weight: bold; color: inherit; } /* ── §8 Left-marg overflow ───────────────────────────────────────────────── */ /* Reduce hanging indent — the comparison panel's narrow marg columns can't afford the 1.5em padding the main text uses. */ #compare-container .marginalia-left { overflow: hidden; padding-left: 0.25em; text-indent: 0; } #compare-container .marginalia-right { padding-left: calc(1ex + 0.25em); text-indent: 0; } /* ── §9 Right-ind / close-button overlap fix ─────────────────────────────── */ /* The right-ind indicator at grid-row 1 would naturally overlap the close button. We shift it left by 22px (just enough to clear the close button's left edge, placing the arrow ~5px from it) and add matching padding-right to the linetext so text characters don't flow under the shifted arrow. 22px is the minimum: the arrow is 11px wide, centered in a 32px cell, so its left edge is at cell-right - 32 + 10.5 = cell-right - 21.5. 27px is a compromise: enough gap to the close button while keeping the wrapping breakpoint as wide as possible. */ @media (max-width: 499px) /* < --bp-phone */ { #compare-container .linetext[style*="grid-row: 1"] { padding-right: 27px; } #compare-container .marg-ind-right[style*="grid-row: 1"] { transform: translateX(-27px); } } /* ── §10 Links ──────────────────────────────────────────────────────────── */ a.compare-link { text-decoration: none !important; color: inherit !important; } a.cross-link { color: inherit; }