is not a normal element: the UA sets its own `font` shorthand
* (`400 13.3333px Arial` in Chrome) and its own `padding: 1px 6px`, and
* NEITHER inherits from the viewer. Measured on the live demo: every button
* in this viewer reported `font-family: Arial` while the overlay itself
* reported the design's `Inter, InterVariable, …` stack — so rule 1.6's
* "Tap to unmute" label and the rail's counts were rendering in Arial, at
* the design's sizes but not its face.
*
* `font: inherit` FIRST, so each rule's own explicit size/weight below still
* wins on source order. `padding: 0` because a glyph-only control's box is
* its tap target and the UA's 6px side padding silently shrinks the content
* area (a 40px close disc was laying out its 22px glyph in 28px of content
* box). `appearance: none` because iOS Safari otherwise paints its own
* control chrome over the disc.
*
* Deliberately repeated per rule rather than hoisted into a
* `.sbi-qs-overlay button` reset: that selector has HIGHER specificity
* (0,1,1) than the single-class rules here (0,1,0), so it would override the
* paddings those rules set on purpose — the mute chip's `0 7px`, the pill's
* `0 13px 0 11px`. Flat specificity is what keeps this predictable. */
font: inherit;
-webkit-appearance: none;
appearance: none;
padding: 0;
position: relative;
box-sizing: border-box;
width: 44px;
height: 44px;
border-radius: 50%;
border: 0;
/* Rule 1.4's one circular-control paint, shared with close. */
background: rgba(255, 255, 255, 0.16);
color: #fff;
cursor: pointer;
pointer-events: auto;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: background 150ms ease, transform 150ms ease, opacity 150ms ease;
}
.sbi-qs-nav-prev svg,
.sbi-qs-nav-next svg {
width: 24px;
height: 24px;
}
.sbi-qs-nav-prev:hover,
.sbi-qs-nav-next:hover,
.sbi-qs-nav-prev:focus-visible,
.sbi-qs-nav-next:focus-visible {
background: rgba(255, 255, 255, 0.28);
outline: 0;
}
.sbi-qs-nav-prev:active,
.sbi-qs-nav-next:active {
transform: scale(0.94);
}
.sbi-qs-nav-prev:focus-visible,
.sbi-qs-nav-next:focus-visible {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}
.sbi-qs-nav-prev:disabled,
.sbi-qs-nav-next:disabled {
opacity: 0.3;
cursor: default;
transform: none;
}
/* ── Bottom scrim (rule IG-1) ────────────────────────────────────────────── *
* 42% of the frame's height, inside the frame, under the bottom row. There is
* deliberately NO top scrim: the top row carries its own text-shadow instead
* (see .sbi-qs-top), because a second gradient up there would fight the
* frame's clean top edge that removing the wordmark created.
*/
.sbi-qs-scrim {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 42%;
z-index: 1;
background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}
/* ── Rail column (rule 1.3) ──────────────────────────────────────────────── *
* Base = touch: an in-frame absolute overlay at the frame's bottom-right,
* shrink-wrapped to its content (`right: 10px` is the design's IG inset).
* Desktop (capability block) = a 44px-wide column OUTSIDE the frame, 16px to
* its right, bottom-aligned with the frame.
*
* ── SESSION-LEVEL: one column, an overlay child (SMASH-1851) ───────────────
* It used to be a child of `.sbi-qs-post` — one column per slide, inside the
* track — which is how it got its travel for free: the track's transform
* carried it. Measured on 6.13.0.6, that made the active rail sweep the FULL
* SLIDE HEIGHT on every navigation (900px at 1440x900, 844px at 390x844) while
* the top row and the chevrons held perfectly still. Asmita, 2026-09-10: "keep
* them in place and update them without them going up and down with the video
* (we do this with TikTok)."
*
* This does NOT reverse the rule ratified 2026-08-27 ("the rail travels with
* the reel"). That rule is about the DRAG, where a pinned rail leaves reel N's
* stats over reel N+1's incoming video for the whole gesture — and the drag
* follow survives, now as an explicit transform (see `transition-property`
* below and setRailTravel() in the JS) rather than as an inherited one. What
* goes is travel on the COMMIT, which is exactly what TikTok does: its one rail
* element takes the live drag delta and lands at rest in the same paint that
* swaps its content (`chromeTravelStyle`, SwipeView.jsx).
*
* The RESTING GEOMETRY is unchanged by the move, and the reason is checkable
* rather than hopeful: `.sbi-qs-post` is `height: 100vh/100dvh` and
* `.sbi-qs-overlay` is `position: fixed; inset: 0`, so the old and the new
* containing blocks are the same box and these insets resolve identically
* against either. Measured at both viewports before and after — zero delta.
*
* The one thing the move inherits rather than fixes: on a phone the overlay's
* `inset: 0` and the post's `100dvh` can disagree by the browser chrome's
* height on engines where a fixed box resolves against the LARGE viewport. That
* is the same reference `.sbi-qs-framechrome` (also session-level, also
* `bottom: 0` against the overlay) has always used, so this introduces no new
* risk class — but it does mean the rail's bottom clearance is one of the
* things only a real device can settle. Flagged for the iPhone pass, not
* papered over.
*
* Base = touch: an in-frame absolute overlay at the frame's bottom-right
* (`right: 10px` is the design's IG inset). Desktop (capability block) = a 44px
* column OUTSIDE the frame, 16px to its right, bottom-aligned with it. It could
* not be a child of `.sbi-qs-framechrome` instead, which would otherwise be the
* tidier home: that box carries `overflow: hidden` so the 2px progress bar can
* sit flush on the frame's rounded bottom edge, and on desktop the rail is
* outside the frame, so it would be clipped away entirely.
*
* z-index 5, up from the 2 it carried inside the post. Inside a slide it only
* had to beat the gesture layer's 1 within the viewport's own stacking context;
* at overlay level it is a sibling of `.sbi-qs-framechrome` (3) and shares its
* visual column with `.sbi-qs-nav` (5), so it takes the chevrons' level. Below
* close (6) and the coach overlay (9), which both deliberately paint over
* everything.
*
* The 44px width is the reference's `.sc-railcol`; the action stack inside it
* shrink-wraps to ~29px and centres, which is why his `.sc-rail` measures
* 28.9px inside a 44px column.
*/
.sbi-qs-railcol {
position: absolute;
right: 10px;
bottom: 0;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
/* Only the DURATION is written from JS (setRailTravel), so the easing and
* the property list stay declarative and in one place. `transform` alone,
* never `all`: the duration is toggled between 0ms and 320ms on every drag
* frame, and `all` would drag every other animatable property into that. */
transition-property: transform;
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
transition-duration: 0ms;
/* §6.3: the column is inert; each rail item opts back in. */
pointer-events: none;
}
/* An all-empty rail hides the COLUMN, not just its items — see updateRail().
* `display: flex` above is an AUTHOR declaration and therefore beats `hidden`'s
* UA rule, so without this the attribute would hide nothing at all. The column
* must genuinely leave layout: its 18px of bottom padding is dead space for the
* dismiss and tap-to-pause carve-outs, and a laid-out empty column would keep
* carving a live region out of the backdrop for a post that has no rail. */
.sbi-qs-railcol[hidden] {
display: none;
}
.sbi-qs-rail {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding-bottom: 18px;
padding-bottom: max(18px, var(--sbi-qs-safe-bottom, env(safe-area-inset-bottom, 0px)));
pointer-events: none;
}
/* ── Rail items (rules IG-2, IG-3) ───────────────────────────────────────── *
* BARE GLYPHS — no discs. Rule IG-2, and it is the one place the IG skin
* departs from "all circular buttons share one style": TikTok's rail glyphs sit
* in translucent circles, Instagram's do not, because Instagram's own Reels
* player renders them bare. A drop-shadow does the contrast work a disc would
* otherwise do.
*
* SEMANTICS differ per item and are NOT interchangeable (rule IG-3):
* like — a READOUT, not a control. `` with an exact-figure
* label, `cursor: default`, and the hover transform suppressed.
* There is no logged-in visitor inside an embedded feed, so a heart
* styled like Instagram's tappable heart would promise something the
* UI cannot deliver.
* comment — a LINK to the post, where commenting genuinely works.
* share — a real : Web Share, then clipboard + toast, then a toast
* carrying the URL. The only genuine in-page action in the rail.
* view — touch only; the desktop CTA pill's counterpart.
*
* Instagram exposes NO share count, so the share glyph carries none — and
* "absent" is not "zero" anywhere in this cluster (a non-business account
* reports no metrics at all).
*
* Each item is a shrink-wrapped column, NEVER a full-width flex child. That is
* the ratified "never a full-width chrome strip" rule: a stretched item becomes
* an opaque dead strip across the thumb zone that eats tap-to-pause and swipe
* both — §6.3's fourth recurrence.
*/
.sbi-qs-act {
/* ── The UA's form-control defaults, refused explicitly ──────────────────
* A is not a normal element: the UA sets its own `font` shorthand
* (`400 13.3333px Arial` in Chrome) and its own `padding: 1px 6px`, and
* NEITHER inherits from the viewer. Measured on the live demo: every button
* in this viewer reported `font-family: Arial` while the overlay itself
* reported the design's `Inter, InterVariable, …` stack — so rule 1.6's
* "Tap to unmute" label and the rail's counts were rendering in Arial, at
* the design's sizes but not its face.
*
* `font: inherit` FIRST, so each rule's own explicit size/weight below still
* wins on source order. `padding: 0` because a glyph-only control's box is
* its tap target and the UA's 6px side padding silently shrinks the content
* area (a 40px close disc was laying out its 22px glyph in 28px of content
* box). `appearance: none` because iOS Safari otherwise paints its own
* control chrome over the disc.
*
* Deliberately repeated per rule rather than hoisted into a
* `.sbi-qs-overlay button` reset: that selector has HIGHER specificity
* (0,1,1) than the single-class rules here (0,1,0), so it would override the
* paddings those rules set on purpose — the mute chip's `0 7px`, the pill's
* `0 13px 0 11px`. Flat specificity is what keeps this predictable. */
font: inherit;
-webkit-appearance: none;
appearance: none;
position: relative; /* the ::before hit-target box below */
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
margin: 0;
padding: 0;
border: 0;
background: none;
color: #fff;
text-decoration: none;
cursor: pointer;
pointer-events: auto;
/* Bare glyphs over arbitrary video need their own contrast guard. */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
transition: transform 120ms ease;
}
.sbi-qs-act svg {
width: 28px;
height: 28px;
flex: 0 0 auto;
}
/* ── 44px hit targets for BARE glyphs (see .sbi-qs-close::before) ────────────
* A rail item is a shrink-wrapped flex column, so its WIDTH is whichever child
* is wider: the glyph (26px desktop, 28px touch) or the count text. For a
* one-digit count the text is ~7.8px, so the item is exactly as wide as the
* glyph — and that is the whole defect this rule used to have. It stated the
* ring as an INSET PAIR (`left`/`right: -8px`), which makes the ring's width a
* value DERIVED from the item's: 28 + 16 = 44 on touch, but 26 + 16 = **42** on
* desktop, two short of the convention. A floor expressed as a relative inset
* is not a floor, it is an arithmetic coincidence that holds for one glyph size.
*
* So the horizontal axis is stated ABSOLUTELY: a fixed 44px box centred on the
* item (`left: 50%` + `margin-left: -22px`), which is the same 44px whatever the
* glyph measures and whatever figure Instagram returns. It resolves flush to the
* rail COLUMN — the space the design already reserves for these controls — so a
* grown item still cannot reach out over the video: on desktop the column is
* 44px and the item is centred in it, so the ring lands exactly on the column's
* two edges rather than 1px inside them.
*
* The VERTICAL axis keeps the ±1px insets, because the item is 43px (desktop) /
* 45px (touch) tall and the derived 45/47px already clears 44 — shrinking it to
* a flat 44 would REMOVE reachable area. `min-height` states the floor anyway,
* so this axis cannot silently sink the way the other one did if the count row
* ever stops being rendered. It does not fire at either current viewport; when a
* min-height clamps a box that pins both `top` and `bottom`, the box is
* over-constrained and grows downward from `top`, into the gap below.
*
* Adjacent items still cannot overlap: the growth is horizontal, and the ±1px
* of vertical growth against an 18px (desktop) / 20px (touch) gap leaves ~15px
* / ~17px of genuinely dead space between two rings — which is what keeps a tap
* in the gap landing on the carve-out instead of on a control.
*
* `.sbi-qs-act-like` gets it too, even though it is a readout rather than a
* control: it carries `role="img"` with a label, and an AT user targeting it
* should not have a smaller target than the items either side of it. */
.sbi-qs-act::before {
content: '';
position: absolute;
top: -1px;
bottom: -1px;
min-height: 44px;
left: 50%;
width: 44px;
margin-left: -22px;
}
.sbi-qs-act-count,
.sbi-qs-act-label {
/* `block` + min-height so an EMPTY count still reserves its row — an empty
* inline element generates no line box, which would pull the share glyph
* 17px up toward its neighbour. See buildRailItem() for why the row is
* always rendered. */
display: block;
min-height: 12px;
font-size: 12px;
font-weight: 600;
line-height: 12px;
/* Tabular figures so a count changing between slides doesn't shift the
* glyph above it. */
font-variant-numeric: tabular-nums;
}
.sbi-qs-act:hover {
color: #fff;
text-decoration: none;
transform: scale(1.06);
}
.sbi-qs-act:active {
transform: scale(0.94);
}
.sbi-qs-act:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
border-radius: 4px;
}
/* ── `hidden` must actually hide (SMASH-1851) ───────────────────────────────
* The rail's items are built once and shown or hidden per slide, so `hidden` is
* now load-bearing rather than decorative. `.sbi-qs-act` sets `display: flex`
* above, and an AUTHOR declaration beats the UA's `[hidden] { display: none }`
* — so the attribute on its own would hide NOTHING: a post with no like figure
* would render an empty heart, and a post with no permalink would render a
* comment glyph linking nowhere.
*
* Two independent conditions decide an item's visibility and they must not be
* folded into one mechanism: DATA (this post has no figure / no permalink) is
* `hidden`, written from JS; VIEWPORT (`.sbi-qs-act-view` is desktop-only) is
* the capability query at the end of this file. Either one alone hides.
*
* `[hidden]` is (0,2,0) so it also wins over the capability block's
* `.sbi-qs-act-view` (0,1,0) regardless of order — both resolve to `none`, so
* the outcome is the same either way, but the specificity is why this rule does
* not need to live below that block. */
.sbi-qs-act[hidden] {
display: none;
}
/* The readout. Hover/active feedback is suppressed rather than merely
* unstyled — a transform on hover is itself an affordance claim. */
.sbi-qs-act-like {
cursor: default;
}
.sbi-qs-act-like:hover,
.sbi-qs-act-like:active {
transform: none;
}
/* ── Bottom row (rules IG-4, IG-5) ───────────────────────────────────────── *
* In-frame, frame-anchored, replacing the old chrome band that hugged the stage
* from OUTSIDE it. Author row, then a ONE-LINE caption.
*
* `padding-right` is a SEPARATE LONGHAND and must stay one: it clears the rail
* on touch (where the rail is inside the frame) and drops back to the plain
* inset on desktop (where the rail is outside). Folding it into the shorthand
* also breaks the geometry suite, which parses that shorthand's values.
*
* Pins `bottom` ONLY, never `top` as well. An absolutely-positioned box with
* both pinned resolves to the full containing block on Safari 15.4-16.3 when a
* `fit-content` height is unsupported — a full-frame band over the gesture
* layer eating every vertical swipe. Bottom-anchored chrome pins bottom.
*/
.sbi-qs-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
box-sizing: border-box;
padding: 0 16px 16px 16px;
padding-bottom: max(16px, var(--sbi-qs-safe-bottom, env(safe-area-inset-bottom, 0px)));
padding-right: 76px;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 14px;
line-height: 18.2px;
/* The gesture layer owns this whole band by default; only the genuine
* controls inside opt back in.
*
* Rex review (SMASH-1851), blocking finding, and the reason there is no
* `> *` rule here: a blanket opt-in used to live on the predecessor of this
* element on the theory that its children have nothing clickable inside
* them. That missed that pointer-events needs no click handler to do damage
* — this is a COLUMN flex container with the default `align-items: stretch`,
* so a blanket rule turns the author row and the caption into opaque,
* FULL-WIDTH bands sitting in the mobile thumb zone on every slide,
* silently swallowing tap-to-toggle (bound to the gesture layer, never
* reached) and touch-swipe navigation both. Spec §6.3 names this exact case.
* The fix is per-control opt-in, and the author row and Follow pill below
* additionally carry `align-self: flex-start` so they shrink-wrap. */
pointer-events: none;
}
/* ── Author row (rule IG-4) ──────────────────────────────────────────────── */
.sbi-qs-authorrow {
display: flex;
align-items: center;
gap: 10px;
/* Shrink-wrapped, not stretched — see .sbi-qs-bottom. */
align-self: flex-start;
min-width: 0;
max-width: 100%;
}
.sbi-qs-author {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
color: #fff;
text-decoration: none;
pointer-events: auto;
}
.sbi-qs-author:hover .sbi-qs-handle-text,
.sbi-qs-author:focus-visible .sbi-qs-handle-text {
text-decoration: underline;
text-underline-offset: 3px;
}
.sbi-qs-author:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
border-radius: 4px;
}
.sbi-qs-avatar {
box-sizing: border-box;
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
background: #262626;
}
/* Fallback when the post carries no usable avatar URL (rule IG-4): the
* reference's initial-letter gradient disc. The hue is derived from the handle
* so the same account always gets the same disc, rather than a colour that
* changes between slides. */
.sbi-qs-avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
color: #fff;
background-image: linear-gradient(135deg, hsl(var(--sbi-qs-avatar-hue, 212) 70% 58%), hsl(calc(var(--sbi-qs-avatar-hue, 212) + 50) 65% 38%));
}
.sbi-qs-handle {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
font-size: 14px;
font-weight: 600;
line-height: 18.2px;
}
.sbi-qs-handle-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sbi-qs-verified {
width: 14px;
height: 14px;
flex: 0 0 auto;
}
/* Outline pill, NOT Instagram's filled blue — the design's own treatment, and
* the same shape TikTok fills solid red. Aman's stated rationale is CTA
* density: "our users might appreciate having CTA almost everywhere". */
.sbi-qs-follow {
position: relative; /* the ::before hit-target band below */
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
padding: 0 12px;
margin-left: 2px;
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 8px;
background: transparent;
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none;
flex: 0 0 auto;
pointer-events: auto;
transition: background 150ms ease;
}
/* 28px tall by design (rule IG-4); the band below takes the reachable box to
* 44px without moving the outline. Vertical only — the pill sits in a row with
* the author link 2px to its left, so a horizontal expansion would overlap it. */
.sbi-qs-follow::before {
content: '';
position: absolute;
top: -8px;
right: 0;
bottom: -8px;
left: 0;
border-radius: 8px;
}
.sbi-qs-follow:hover,
.sbi-qs-follow:focus-visible {
background: rgba(255, 255, 255, 0.12);
color: #fff;
text-decoration: none;
outline: 0;
}
.sbi-qs-follow:focus-visible {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7);
}
/* ── Caption (rules IG-4, IG-5) ──────────────────────────────────────────── *
* ONE line, clamped with `nowrap` + ellipsis, with a "more" control revealed
* only on MEASURED overflow. Down from three lines — the design's call.
*
* §6.1's expander contract, all four parts, and each one encodes a defect that
* has shipped:
* - the caption TEXT is never tappable; only the shrink-wrapped more/less
* button is interactive. The reference puts `role="button" tabindex="0"` on
* the caption BLOCK, so its centre hit-test lands on the text node — spec
* §4.1 item 7. We keep his visual treatment exactly and move the role onto
* the button that already looks like the control.
* - revealed only on measured overflow (scrollWidth vs clientWidth).
* - expansion NEVER survives a slide change.
* - the expanded block is CAPPED and owns its own scroll surface; wheel and
* touch inside it must not navigate the track. Uncapped, a 2.5k-char
* caption measures 782px in his desktop build and escapes the frame top by
* 463px, silently clipped — text lost with no indication.
*
* The CAP is a line count, not a viewport fraction, and that is a deliberate
* deviation from rule IG-5's "≈26% of frame height": 12 lines at the design's
* own 18.2px line-height is 218.4px, which is 24.7% of the 884px desktop frame
* and 25.9% of the 844px mobile frame — inside a percentage point of his figure
* at BOTH reference viewports, while introducing no viewport unit at all. A
* percentage would not work: this element's containing block is bottom-anchored
* with an auto height, so a percentage max-height resolves to `none`. Giving it
* a definite height would mean pinning both `top` and `bottom`, which is the
* named Safari full-band hazard above.
*/
.sbi-qs-caption {
margin: 0;
display: flex;
align-items: baseline;
gap: 6px;
font-size: 14px;
line-height: 18.2px;
/* Deliberately NOT opted back into pointer events — the text must never be
* tappable. Only .sbi-qs-caption-more opts in. */
pointer-events: none;
}
.sbi-qs-caption-text {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sbi-qs-caption-more {
/* ── The UA's form-control defaults, refused explicitly ──────────────────
* A is not a normal element: the UA sets its own `font` shorthand
* (`400 13.3333px Arial` in Chrome) and its own `padding: 1px 6px`, and
* NEITHER inherits from the viewer. Measured on the live demo: every button
* in this viewer reported `font-family: Arial` while the overlay itself
* reported the design's `Inter, InterVariable, …` stack — so rule 1.6's
* "Tap to unmute" label and the rail's counts were rendering in Arial, at
* the design's sizes but not its face.
*
* `font: inherit` FIRST, so each rule's own explicit size/weight below still
* wins on source order. `padding: 0` because a glyph-only control's box is
* its tap target and the UA's 6px side padding silently shrinks the content
* area (a 40px close disc was laying out its 22px glyph in 28px of content
* box). `appearance: none` because iOS Safari otherwise paints its own
* control chrome over the disc.
*
* Deliberately repeated per rule rather than hoisted into a
* `.sbi-qs-overlay button` reset: that selector has HIGHER specificity
* (0,1,1) than the single-class rules here (0,1,0), so it would override the
* paddings those rules set on purpose — the mute chip's `0 7px`, the pill's
* `0 13px 0 11px`. Flat specificity is what keeps this predictable. */
font: inherit;
-webkit-appearance: none;
appearance: none;
/* §6.3 explicit opt-in: this button IS the control, and the only one. */
pointer-events: auto;
position: relative;
flex: 0 0 auto;
display: none;
margin: 0;
padding: 0;
border: 0;
background: none;
color: #a8a8a8;
font-size: 14px;
font-weight: 400;
line-height: 18.2px;
cursor: pointer;
}
/* The 44px hit target, WITHOUT the layout cost. The design's visible control is
* 33.9 x 18.2 — below this file's 44px control convention, a gap the survey has
* carried as an advisory since 2026-08-19. Padding would fix the target and
* break the design: this row is measured at 18.2px tall and the bottom row at
* 76.2px, so a 44px-tall button grows the whole block by 26px and pushes the
* author row up off its mark.
*
* A positioned pseudo-element takes no part in layout but IS hit-tested, and a
* hit on it resolves to its originating element — so elementFromPoint over this
* region returns the button, which is exactly what §6.3's proof asks for. The
* visible box stays the design's; only the reachable box grows.
*
* Insets are asymmetric on purpose: 13px above and below the 18.2px text gives
* 44.2px, and the horizontal 6px stops short of the caption text so the grown
* target cannot start swallowing taps meant for the gesture layer. */
.sbi-qs-caption-more::before {
content: '';
position: absolute;
top: -13px;
right: -6px;
bottom: -13px;
left: -6px;
}
.sbi-qs-caption-has-more .sbi-qs-caption-more {
display: inline-block;
}
.sbi-qs-caption-more:hover {
color: #fff;
}
.sbi-qs-caption-more:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
border-radius: 4px;
}
.sbi-qs-caption-expanded {
align-items: flex-end;
}
.sbi-qs-caption-expanded .sbi-qs-caption-text {
/* Caption text is set via textContent, never innerHTML (§12) — a caption's
* literal `