/* ══════════════════════════════════════════════════════════════════════
LENSPOV VISUAL DIGESTIBILITY LAYER (.article-wrap)
Teal #dc2626 + sky #d97706 port of the light system (matches the
Prescription Savings Finder tool). Same component class vocabulary
network-wide; per-article bespoke graphics add CONTENT, this provides
STYLE + motion + grids. Chassis port — canonized 2026-07-01.
var(--x, fallback) syntax so it is robust to overhaul-v3 token gaps.
══════════════════════════════════════════════════════════════════════ */
.article-wrap{--rx-a:#dc2626;--rx-b:#d97706}
/* hero illustration */
.article-wrap .lc-illus{max-width:560px;margin:1.7rem auto .7rem;display:block}
.article-wrap .lc-illus svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 26px rgba(220,38,38,.18))}
/* accent-bar headings */
.article-wrap h2{position:relative;padding-left:1.05rem}
.article-wrap h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;border-radius:3px;background:linear-gradient(180deg,var(--rx-a),var(--rx-b))}
/* lede */
.article-wrap .article-intro,.article-wrap p.lede{font-size:1.14rem;line-height:1.75;color:var(--text,#44403c)}
/* pull-quote */
.article-wrap .pq{margin:2.2rem 0;padding:.3rem 0 .3rem 1.5rem;border-left:4px solid var(--rx-a);font-family:var(--display,'Bricolage Grotesque',Georgia),serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,1.6rem);line-height:1.38;color:var(--dark,#1c1917);letter-spacing:-.01em}
.article-wrap .pq .hl{background:linear-gradient(90deg,var(--rx-a),var(--rx-b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.article-wrap .pq .src{display:block;margin-top:.55rem;font-family:var(--mono,monospace),monospace;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#74706d)}
/* concept split */
.article-wrap .lc-split{display:grid;grid-template-columns:1fr 1fr;margin:1.7rem 0;border:1px solid var(--border,#e7e5e4);border-radius:14px;overflow:hidden;background:#fff}
.article-wrap .lc-split figcaption{grid-column:1/-1;order:2;font-size:.79rem;color:var(--text-light,#78716c);line-height:1.55;padding:.85rem 1.2rem;background:var(--paper,#faf6ef);border-top:1px solid var(--border,#e7e5e4)}
.article-wrap .lc-split .pane{padding:1.3rem 1.35rem}
.article-wrap .lc-split .a{background:linear-gradient(160deg,#fef2f2,#fff)}
.article-wrap .lc-split .b{background:linear-gradient(160deg,#fffbeb,#fff);border-left:1px solid var(--border,#e7e5e4)}
.article-wrap .lc-split .ph{font-family:var(--mono,monospace),monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .2rem;font-weight:700}
.article-wrap .lc-split .a .ph{color:#991b1b}
.article-wrap .lc-split .b .ph{color:#b45309}
.article-wrap .lc-split .sub{font-size:.76rem;color:var(--text-light,#78716c);margin:0 0 .85rem}
.article-wrap .lc-split .chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.85rem}
.article-wrap .lc-split .chip{font-family:var(--mono,monospace),monospace;font-size:10px;color:var(--text,#44403c);background:#fff;border:1px solid var(--border,#e7e5e4);border-radius:5px;padding:.22rem .52rem}
.article-wrap .lc-split .big{font-family:var(--display,'Bricolage Grotesque',Georgia),serif;font-weight:800;font-size:1.16rem;margin:.1rem 0 .55rem;letter-spacing:-.02em}
.article-wrap .lc-split .a .big{color:#991b1b}
.article-wrap .lc-split .b .big{color:#b45309}
.article-wrap .lc-split .tags{margin:0;font-size:.84rem;color:var(--text,#44403c);line-height:1.85}
.article-wrap .lc-split .tags .t{display:flex;align-items:flex-start;gap:.45rem}
.article-wrap .lc-split .tags .t::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;margin-top:.5em}
.article-wrap .lc-split .a .tags .t::before{background:var(--rx-a)}
.article-wrap .lc-split .b .tags .t::before{background:var(--rx-b)}
/* key callout */
.article-wrap .key{display:flex;gap:.9rem;align-items:flex-start;margin:1.8rem 0;padding:1.05rem 1.2rem;background:linear-gradient(135deg,#fef2f2,#fffbeb);border:1px solid #fecaca;border-radius:13px}
.article-wrap .key .ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--rx-a),var(--rx-b));font-family:var(--display,'Bricolage Grotesque',Georgia),serif;font-weight:800;color:#fff;font-size:1rem}
.article-wrap .key .kt{margin:0;color:var(--text,#44403c);font-size:.94rem;line-height:1.62}
.article-wrap .key .kt b{color:var(--dark,#1c1917)}
/* screenshot frame */
.article-wrap .shot{margin:1.8rem 0;border:1px solid var(--border,#e7e5e4);border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 8px 28px rgba(24,24,27,.08)}
.article-wrap .shot .bar{display:flex;align-items:center;gap:.5rem;padding:.55rem .85rem;background:var(--paper,#faf6ef);border-bottom:1px solid var(--border,#e7e5e4)}
.article-wrap .shot .bar i{width:9px;height:9px;border-radius:50%;background:#d4d4d8;display:inline-block}
.article-wrap .shot .bar .u{margin-left:.6rem;font-family:var(--mono,monospace),monospace;font-size:11px;color:var(--muted,#74706d)}
.article-wrap .shot img{display:block;width:100%;height:auto}
.article-wrap .shot figcaption{font-size:.8rem;color:var(--text-light,#78716c);line-height:1.5;padding:.7rem .95rem;border-top:1px solid var(--border,#e7e5e4)}
/* data dashboard */
.article-wrap .crm-dash{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.9rem 0 .6rem}
.article-wrap .crm-dash .dcard{background:#fff;border:1px solid var(--border,#e7e5e4);border-radius:14px;padding:1.05rem 1.1rem 1.15rem;box-shadow:0 8px 24px rgba(24,24,27,.06);display:flex;flex-direction:column}
.article-wrap .crm-dash .dh{font-family:var(--mono,monospace),monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#74706d);margin:0 0 .7rem}
.article-wrap .crm-dash .dsub{font-size:.73rem;color:var(--text-light,#78716c);margin:.7rem 0 0;line-height:1.4}
.article-wrap .gauge{position:relative;width:104px;height:104px;margin:.1rem auto .1rem}
.article-wrap .gauge svg{transform:rotate(-90deg)}
.article-wrap .gauge .ring{fill:none;stroke:#fee2e2;stroke-width:10}
.article-wrap .gauge .prog{fill:none;stroke:url(#gaugeg);stroke-width:10;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;animation:gFill 1.9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes gFill{to{stroke-dashoffset:var(--goff,23)}}
.article-wrap .gauge .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.article-wrap .gauge .num b{font-family:var(--display,'Bricolage Grotesque',Georgia),serif;font-size:1.75rem;font-weight:800;color:#991b1b;line-height:1}
.article-wrap .gauge .num em{font-family:var(--mono,monospace),monospace;font-size:7.5px;letter-spacing:.12em;color:var(--muted,#74706d);text-transform:uppercase;font-style:normal;margin-top:.15rem}
.article-wrap .pbars{display:flex;flex-direction:column;gap:.5rem;padding:.55rem 0;flex:1;justify-content:center}
.article-wrap .pbar{height:13px;border-radius:7px;background:linear-gradient(90deg,var(--rx-a),var(--rx-b));transform-origin:left;transform:scaleX(0);animation:pGrow 1.3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pGrow{to{transform:scaleX(1)}}
.article-wrap .echips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem 0;flex:1;align-content:center}
.article-wrap .echip{font-family:var(--mono,monospace),monospace;font-size:10px;color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;padding:.26rem .55rem;display:flex;align-items:center;gap:.32rem;opacity:0;animation:eIn .5s ease forwards}
.article-wrap .echip::before{content:"";width:5px;height:5px;border-radius:50%;background:#22c55e;flex:none}
@keyframes eIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* verdict grid */
.article-wrap .verdict-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.9rem 0}
.article-wrap .vcard{background:#fff;border:1px solid var(--border,#e7e5e4);border-radius:13px;padding:1.1rem 1.15rem;border-top:3px solid var(--rx-a);transition:transform .2s,box-shadow .2s}
.article-wrap .vcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px -14px rgba(220,38,38,.4)}
.article-wrap .vcard.top{background:linear-gradient(160deg,#fef2f2,#fff)}
.article-wrap .vcard .vt{font-family:var(--mono,monospace),monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#74706d);margin-bottom:.4rem}
.article-wrap .vcard .vn{font-family:var(--display,'Bricolage Grotesque',Georgia),serif;font-weight:800;font-size:1.18rem;color:#991b1b;letter-spacing:-.02em;margin-bottom:.35rem}
.article-wrap .vcard .vd{font-size:.85rem;color:var(--text,#44403c);line-height:1.5}
/* scroll reveal */
.article-wrap .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.article-wrap .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.article-wrap .reveal{opacity:1;transform:none;transition:none}}
/* ── FLOATING CHAPTER-RAIL (scroll-spy TOC in the right whitespace) ── */
/* scrollbar-safe 2026-09-17: 172px assumed the gutter equals (100vw - 1180)/2, but 100vw INCLUDES
the scrollbar while the centred .article-wrap does not, so the rail sat about half a
scrollbar too far left and clipped the H1. Measured at a 1920px viewport: rail left
1535 against an article-wrap right edge of 1543, a 7px overlap on exactly one element.
196px = 172px rail + 24px of real gutter, which absorbs the scrollbar and leaves a gap. */
.rx-rail{position:fixed!important;top:50%!important;transform:translateY(-50%)!important;right:max(1.1rem,calc((100vw - 1180px)/2 - 196px))!important;left:auto!important;bottom:auto!important;width:172px!important;z-index:40;display:block!important;margin:0!important;font-family:var(--body,system-ui),sans-serif}
.rx-rail .rt{font-family:var(--mono,monospace),monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#74706d);margin:0 0 .7rem;padding-left:.85rem}
.rx-rail ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--border,#e7e5e4)}
.rx-rail li{margin:0}
.rx-rail a{display:block;padding:.28rem 0 .28rem .85rem;margin-left:-1px;border-left:2px solid transparent;font-size:.76rem;line-height:1.35;color:var(--text-light,#78716c);text-decoration:none;transition:color .16s,border-color .16s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rx-rail a:hover{color:var(--rx-a)}
.rx-rail a.on{color:var(--rx-a);border-left-color:var(--rx-a);font-weight:600}
/* RAIL HIDE RE-OUTRANKED 2026-09-16: the same defect BagEngine fixed on 2026-08-25 was live on 16 OTHER
properties, because that fix was applied to one instance instead of to the class.
`.rx-rail` above declares `display:block!important`, so the hide below outranked and the
floating chapter-rail NEVER HID. Measured in the live DOM 2026-09-16 on
rxgrab/articles/best-ed-telehealth-cost-per-dose-2026 at a 958px viewport: the rail sat at
left=753 right=925 and overlapped 10 elements INCLUDING THE H1, printing the table of
contents on top of the headline. Adding !important here hides it and the overlap goes to 0.
The rail is designed to live in the gutter outside a 1180px column, so below ~1524px it has
no gutter to live in and `right` falls back to its 1.1rem floor, i.e. on top of the article.
⭐ A media query cannot beat `!important` no matter how specific the breakpoint is. */
/* RAIL BREAKPOINT RAISED 1300 -> 1600, 2026-09-16: 1300px was measured WRONG, by me, earlier the same day.
The rail is 172px wide and pins itself 1.1rem from the right edge whenever its gutter
calc goes negative, i.e. whenever the viewport is narrower than about 1572px. Hiding it
only below 1300px therefore left a 300px band, 1301-1572, where it still printed itself
over the article. Measured live at 1424px on rxgrab GLP-1: rail at left=1219 against an
article right edge of 1271, overlapping 11 elements including the table of contents.
The gutter needed is 172 + 17.6 + a small gap, about 206px each side of a ~1180px column,
so the rail can only be shown from roughly 1592px up. Rounded to 1600. */
@media(max-width:1600px){.rx-rail{display:none!important}}
@media(max-width:760px){.article-wrap .crm-dash,.article-wrap .verdict-grid{grid-template-columns:1fr}}
@media(max-width:680px){.article-wrap .lc-split{grid-template-columns:1fr}.article-wrap .lc-split .b{border-left:0;border-top:1px solid var(--border,#e7e5e4)}}
/* drug-page price bars + eyebrow spacing (added 2026-07-01d) */
.article-tags .article-tag:not(:last-child){margin-right:.5rem}
.article-wrap .rxdbar rect.b{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;animation:rxdbarGrow .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rxdbarGrow{to{transform:scaleY(1)}}
.article-wrap .rxdbar text{font-family:'JetBrains Mono',monospace}
.article-wrap .lpbar rect.b{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;animation:lpbarGrow .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes lpbarGrow{to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.article-wrap .lpbar rect.b{animation:none;transform:none}}
.article-tags .article-tag:not(:last-child){margin-right:.5rem}
/* === RESPONSIVE TABLES (network heal 2026-07-30) === */
/* Wide comparison tables were pushing article pages into horizontal scroll on mobile (measured at
390px by lattice-core/scripts/render-audit.mjs). Give the table its own scroll container so the
PAGE never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse
and the table remains readable. Both rules are required; the first alone destroys the layout. */
table.data-table, table.pricing-table, table.capability-matrix, table.comparison-table,
.article-body table, main table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table.data-table > thead, table.data-table > tbody,
table.pricing-table > thead, table.pricing-table > tbody,
table.capability-matrix > thead, table.capability-matrix > tbody,
table.comparison-table > thead, table.comparison-table > tbody,
.article-body table > thead, .article-body table > tbody,
main table > thead, main table > tbody {
display: table;
width: 100%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
It also zeroes widths and defeats table-layout:fixed, because a display:block table has
no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
the declaration was not binding for them. The mobile branch below is byte-identical to the
2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
table.data-table > thead, table.data-table > tbody,
table.pricing-table > thead, table.pricing-table > tbody,
table.capability-matrix > thead, table.capability-matrix > tbody,
table.comparison-table > thead, table.comparison-table > tbody,
.article-body table > thead, .article-body table > tbody,
main table > thead, main table > tbody {
min-width: max-content;
}
}
/* === RESPONSIVE TABLES v2 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
the table stays readable. BOTH rules are required; the first alone destroys the layout.
Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
already been outrun once. */
table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
display: table;
width: 100%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
It also zeroes widths and defeats table-layout:fixed, because a display:block table has
no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
the declaration was not binding for them. The mobile branch below is byte-identical to the
2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
table > thead, table > tbody, table > tfoot {
min-width: max-content;
}
}
/* === RESPONSIVE TABLES v3 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
the table stays readable. BOTH rules are required; the first alone destroys the layout.
Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
already been outrun once. */
table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
display: table;
width: 100%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
It also zeroes widths and defeats table-layout:fixed, because a display:block table has
no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
the declaration was not binding for them. The mobile branch below is byte-identical to the
2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
table > thead, table > tbody, table > tfoot {
min-width: max-content;
}
}
/* Form controls must not outgrow their container either. The newsletter capture ships an email
input with an inline `min-width:200px`, which together with its padding and the Subscribe button
pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
max-width: 100%;
}
/* === RESPONSIVE TABLES v4 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
the table stays readable. BOTH rules are required; the first alone destroys the layout.
Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
already been outrun once. */
table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
display: table;
width: 100%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
It also zeroes widths and defeats table-layout:fixed, because a display:block table has
no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
the declaration was not binding for them. The mobile branch below is byte-identical to the
2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
table > thead, table > tbody, table > tfoot {
min-width: max-content;
}
}
/* Form controls must not outgrow their container either. The newsletter capture ships an email
input with an inline `min-width:200px`, which together with its padding and the Subscribe button
pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
max-width: 100%;
}
/* max-width alone does not reach this one. The email input carries an INLINE `min-width:200px`, and
an inline style beats a stylesheet rule, so the flex row stays wider than its parent and the page
keeps scrolling 5px. A min-width floor on a flex child is the standard cause of exactly this, and
`!important` is the only lever that reaches an inline declaration — used deliberately here and
scoped to one control rather than sprayed across the sheet. */
form input[type="email"] {
min-width: 0 !important;
}
/* === RESPONSIVE TABLES v5 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
the table stays readable. BOTH rules are required; the first alone destroys the layout.
Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
already been outrun once. */
table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
display: table;
width: 100%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
It also zeroes widths and defeats table-layout:fixed, because a display:block table has
no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
the declaration was not binding for them. The mobile branch below is byte-identical to the
2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
table > thead, table > tbody, table > tfoot {
min-width: max-content;
}
}
/* Form controls must not outgrow their container either. The newsletter capture ships an email
input with an inline `min-width:200px`, which together with its padding and the Subscribe button
pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
max-width: 100%;
}
/* max-width alone does not reach this one. The email input carries an INLINE `min-width:200px`, and
an inline style beats a stylesheet rule, so the flex row stays wider than its parent and the page
keeps scrolling 5px. A min-width floor on a flex child is the standard cause of exactly this, and
`!important` is the only lever that reaches an inline declaration — used deliberately here and
scoped to one control rather than sprayed across the sheet. */
form input[type="email"] {
min-width: 0 !important;
}
/* Long unbroken links. On LensPOV the widest element on four pages was an at 547-678px against
a 390px viewport: raw URLs used as citation link text, which have no spaces to wrap at, so the
browser lets them run past the edge and the whole page scrolls sideways. The U3 citation campaign
adds MORE external links, so this gets worse as the network gets better sourced unless it is
fixed at the stylesheet. */
a, code, kbd, samp {
overflow-wrap: anywhere;
word-break: break-word;
}
/* lattice:reading-progress */
/* Emitted on 345 pages across 13 properties, styled on 2, driven by 0 until 2026-08-27.
⭐ The markup travelled and the behaviour did not. Driver lives in site_engine.js. */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:100;pointer-events:none}
.reading-progress span{display:block;height:100%;width:0;background:var(--accent-fill,var(--accent,#4f46e5));transition:width .12s linear}
@media (prefers-reduced-motion: reduce){.reading-progress span{transition:none}}
/* ⛔⛔ A FIXED OVERLAY HAS NO GROUND BY CONSTRUCTION, SO IT MUST SUPPLY ITS OWN.
`.rx-rail` is `position:fixed` with a transparent background, so whatever the page happens to
put behind it becomes its ground. Found on Health Britannica /calculator/: the table of
contents rendered mid-brown over a dark forest photograph, present on screen and unreadable.
Measured across the fleet the same day: 12 properties carry the identical latent defect, which
only becomes visible where a page happens to put a dark hero behind the rail.
⭐⭐ EVERY OTHER CONTRAST FIX ASKS "WHAT IS THIS SITTING ON?". A fixed element has no stable
answer, because it sits on different things as the page scrolls and page to page, so the only
durable fix is for it to paint its own surface.
⚠️ Written against tokens with fallbacks so it ports unchanged, and deliberately a soft panel
rather than a hard card, because this is a quiet navigational aid that must not compete with
the content it indexes. */
.rx-rail{
background:color-mix(in srgb, var(--paper,#fafaf9) 92%, transparent);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
border:1px solid var(--border,#e5e5e5); border-radius:10px;
padding:.85rem .6rem .7rem; box-shadow:0 2px 14px rgba(0,0,0,.06);
}
/* === TABLE COLUMN ALIGNMENT (2026-09-23) === */
/* Overrides the RESPONSIVE TABLES heal above: it made thead and tbody two independent tables, so
headers drifted off their columns. One table on desktop; on phones the table scrolls in its own
box and thead/tbody share one anonymous table. See scripts/fix-table-column-alignment.mjs. */
table { display: table !important; width: 100% !important; }
table > thead, table > tbody, table > tfoot { display: table-row-group !important; width: auto !important; min-width: 0 !important; }
@media (max-width: 700px) {
table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}