/* Responsive corrections that are not the mobile nav (T10).
*
* Rule 1: none of this is edited into the bundle. Stage 3 copies this file,
* stage 5 injects the last in , so every rule here lands after the
* stylesheet it corrects and survives the next zip untouched.
*
* Each block below names the bundle rule it corrects and the width band the
* defect lives in. Nothing widens its own blast radius: no rule here applies at
* a width where the bundle is already correct.
*/
/* -------------------------------------------------- request-a-quote overflow
*
* assets/request-v1.css:91-93, @media(max-width:900px), sets
* padding: 15px max(24px, calc((100vw - min(100% - 48px, 1320px)) / 2))
* on .request-route-grid-v2 > a. Inside the grid, `100%` is the parent's width,
* so `min(100% - 48px, 1320px)` subtracts 48px that the tile then adds back as
* horizontal padding, and each tile renders exactly 48px wider than its parent.
* Measured at 768px: scrollWidth 816 against innerWidth 768, on three tiles.
*
* The bundle's own max-width:650px rule already resets this to a flat 20px,
* which is why phones are clean and the bug band is 651-900px only. This is
* that same reset, applied across the whole band the broken rule covers, so the
* two rules agree instead of disagreeing at 651px.
*/
@media(max-width:900px){
.request-route-grid-v2>a{padding-left:20px;padding-right:20px}
}
/* --------------------------------------------- document download gate, mobile
*
* assets/document-download-gate-v1.css gives the modal's close control a 34px
* box. It is the only way out of a full-screen overlay on a phone other than
* the Escape key, which a phone does not have. 44px is the floor.
*
* The card's h2 clears the close button with a 42px right margin, which is not
* enough once the button is 44px wide at right:17px, so the margin moves with
* it. Both are scoped to the widths where the modal is full-screen; the desktop
* modal is untouched.
*/
@media(max-width:980px){
.doc-gate-close-v1{width:44px;height:44px;right:13px;top:11px;font-size:22px}
.doc-gate-card-v1 h2{margin-right:58px}
/* The gate's own submit and its inputs are the primary action of the page on
mobile. The bundle ships them at 41.5px and 39.4px; both round up to the
40px floor rather than being left a hair under it. */
.doc-gate-submit-v1{min-height:44px}
.doc-gate-form-v1 input{min-height:44px}
}
/* ------------------------------------------------------- short landscape (390)
*
* At 844x390 the modal card is already capped at calc(100vh - 44px) and scrolls
* internally, so the submit button stays reachable. What does not survive is the
* 22px outer padding plus a 44px cap on a 390px screen: the card gets 346px and
* the form is 446px tall, so the live-contact row falls below the card's own
* fold. Tightening the outer padding buys back the rows without changing the
* modal on any viewport a phone in portrait or a tablet will ever report.
*/
@media(max-height:430px) and (min-width:640px){
.doc-gate-v1{padding:10px}
.doc-gate-card-v1{max-height:calc(100vh - 20px);padding:20px}
.doc-gate-card-v1 h2{font-size:23px;margin-top:7px}
.doc-gate-deck-v1{margin-bottom:14px}
}
/* ------------------------------------- the reduced-motion home page, on phones
*
* assets/v093.css:498, @media(prefers-reduced-motion:reduce), replaces the
* scroll-driven supply chain track with a static two-column grid:
* .trace-motion93-track{grid-template-columns:1fr 1fr;transform:none!important}
* It carries no width qualification and it is declared AFTER the max-width:819px
* block that lays the same track out in a single column, so on a phone the
* reduced-motion path wins and asks for two 235px columns inside a 360px screen.
* Measured at 360x800 with reduced motion: documentElement.scrollWidth 508
* against innerWidth 360, and the page will not scroll sideways to reach the
* clipped half, so cards 02 and 04 are simply gone.
*
* Reduce Motion is an accessibility setting, not an edge case, and this is the
* page every visitor lands on. The fix is the bundle's own mobile intent: one
* column below 820px, whether or not motion is reduced.
*/
@media(prefers-reduced-motion:reduce) and (max-width:819px){
.trace-motion93-track{grid-template-columns:1fr}
}
/* ------------------------------- the document centre between 981px and 1416px
*
* assets/document-download-gate-v1.css:22, @media(min-width:981px), gives the
* document table five fixed minimums:
* minmax(340px,2fr) minmax(180px,.82fr) minmax(180px,.82fr)
* minmax(170px,.78fr) minmax(190px,.86fr), column-gap 18px
* which is 1060px of columns plus 72px of gaps plus 40px of table padding, so
* the work column cannot be narrower than 1172px. .docs-tool-v1 puts it beside a
* 245px filter rail in a `245px 1fr` grid, and a 1fr track's automatic minimum
* is its min-content, so the whole tool demands 1417px no matter how narrow the
* screen is. Measured: scrollWidth 1417 at 1024, at 1180 and at 1280 - every
* tablet-landscape and small-laptop width there is. The right-hand column of
* that table is the Download action, so on an iPad in landscape the button that
* releases the document sits off the side of a page that will not scroll.
*
* Below 981px the bundle uses a fluid template that fits. This restores it for
* the band where the fixed one does not, and adds the min-width:0 that lets the
* 1fr track shrink at all. Above 1416px the fixed layout fits and is untouched.
*/
@media(min-width:981px) and (max-width:1416px){
.docs-tool-v1{grid-template-columns:245px minmax(0,1fr)}
.docs-work-v1{min-width:0}
.docs-row-v1{grid-template-columns:minmax(220px,1.7fr) .72fr .58fr .78fr 124px}
}
/* -------------------------------------- the about page between 981px and 1099px
*
* assets/about-v1.css:49 sets .about-roles-grid-v1 to
* minmax(300px,.7fr) minmax(620px,1.3fr) with a 90px gap
* which cannot render narrower than 1010px. The page stacks it at 980px and
* below, and the shell is 48px narrower than the viewport, so between 981px and
* about 1033px the grid pushes past the right edge: measured 1034px of content
* in a 1024px viewport. The minimums are what break; the proportions are the
* design, so only the minimums go.
*/
@media(min-width:981px) and (max-width:1099px){
.about-roles-grid-v1{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
}
/* ------------------------------------------------- tap targets, phone and tablet
*
* At 320px the bundle renders 37 interactive elements under 40px tall on the
* home page alone. They are not one problem, they are two, and only one of them
* is a defect:
*
* A CONTROL - a button, a form field, or a link drawn as a button - is pressed
* deliberately, usually once, and a miss costs the visitor the action. Those
* are fixed here. The worst of them is the document table's own download
* button at 14.3px, which is the control that releases the document a buyer
* came for.
*
* A TEXT LINK inside a list or a paragraph is typography. Padding the footer's
* link columns to 44px would make the footer three times taller and change the
* approved design on every page, which this migration does not do (v4 matches
* the bundle; improvements batch into v5). Those are recorded, not changed:
* tools/fixtures/responsive-accepted.json names every one of them and why, and
* the gate fails on any small target NOT in that list.
*
* Everything below is scoped to 980px and under. Desktop sizing is untouched.
*/
@media(max-width:980px){
/* The document centre: the download action, the row's request link, the filter
rail and the search field. */
.docs-download-action-v1{min-height:44px}
.docs-row-v1:not(.head)>a{min-height:44px;align-items:center}
.docs-filter-group-v1 button{min-height:44px}
.docs-search-v1 input{min-height:44px}
/* The quote form. Its fields and its submit ship 1px under the floor. */
.request-form-v1 input,
.request-form-v1 select,
.request-submit-v1{min-height:44px}
/* Links drawn as buttons, wherever the bundle draws one. */
.btn,
.about-btn-v1,
.product-cta93,
.hero-quote-link93,
.qs-review-supply-primary-v6,
.footer93-actions a,
.resources-hero-actions-v1 a,
/* Three that were pinned as text links and are not. Each is drawn as a tile -
border, padding, flex, bold - and the last is the plainest evidence there
is: .qs-review-supply-foot-v6 holds a PAIR of buttons, the filled primary
already corrected above at 44px and its outlined twin left pinned at 38.3px.
The five .quality93-matrix-row links are the home page's evidence row -
View specification, View sample COA, View SDS / TDS, Review certificates,
Review traceability - which is what a pharmacopoeia buyer taps on a phone,
and they sat 1.4px under a floor this same block raises the quote form's
inputs to from 39.4px. */
.quality93-matrix-row > a,
.article-related-v1 a,
.qs-review-supply-foot-v6 a{
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
}
/* The salt chemistry switcher on /products/nicotine-salts/. Its radios are
1px behind a clip-path and the labels are the real targets, at 31px. Found
only once the gate started measuring every page rather than one product
page per type. */
.salt-variant-tabs93 label{
min-height:44px;
display:inline-flex;
align-items:center;
}
/* Chip and pager controls. The quantity chips carry their 32px minimum from
`.product-detail93 .hero-quantity-option93`, so a single-class selector
would lose to it on specificity and change nothing. */
.hero-quantity93 .hero-quantity-option93,
.archive-pager-controls-v3 button{min-height:44px}
}
/* ============================================================================
* Found by the corrected clipped-text rule (review R1).
*
* The first version of that rule only looked at text a clipping box owned as
* direct child text nodes, so the ordinary `
`
* shape never raised anything. Four defects were sitting behind it, on pages the
* gate was already measuring. Each is diagnosed to the bundle rule that causes
* it, and each fix restores an intent the bundle already has rather than
* inventing a layout.
* ==========================================================================*/
/* ------------------------------------ the product hero, 761px to 900px
*
* Three things are true at once and only together do they break:
* assets/v093.css:180 .product-hero-v08{grid-template-columns:130px 1fr .78fr!important}
* assets/dense.css:100 @media(max-width:900px) hides .product-identity-rail
* the packshot figure is grid-column:1/-1, so it spans all three tracks
* With the rail display:none, the title is auto-placed into track 1 - the 130px
* rail track - while 600px of the row sits empty. The `!important` on the base
* template means the bundle's own responsive resets at max-width:1000px and
* max-width:700px both lose to it, so nothing ever puts it back.
*
* Measured on ALL SIX product pages at 768px: the h1 renders 62px wide with a
* 164px min-content, so "Pure Nicotine USP / Ph. Eur." breaks one word per line
* down a 130px column. Below 761px the bundle's own !important reset collapses
* the hero to one column and it is fine; at 950px the rail returns and the title
* gets its real track. Between the two, every product page is broken on iPad
* portrait and in phone landscape.
*
* The fix is the bundle's own single-column hero, applied to the band where the
* rail is hidden. Nothing else changes: the figure already spans the full row.
*/
@media(min-width:761px) and (max-width:900px){
.product-hero-v08{grid-template-columns:1fr!important}
}
/* ------------------------------------ the resources hero never collapsed
*
* assets/resources-v1.css:60, @media(max-width:980px), sets
* `.resources-hero-grid-v1{grid-template-columns:1fr}`. It has never applied:
* assets/resources-v2.css:4 declares `.resources-v1 .resources-hero-grid-v1`
* with two classes and no media query, and specificity beats source order.
*
* So the hero stays two columns all the way down. Measured: at 320px the second
* column is 38px wide, and the decorative library panel inside it renders as a
* 36px slice of sheared words - "RES LIB", "Ar & ins". At desktop the same panel
* clips its stacked cards on purpose, which is why the rule below is scoped to
* the band where the panel has no room rather than to the panel itself.
*/
@media(max-width:980px){
.resources-v1 .resources-hero-grid-v1{grid-template-columns:1fr;gap:28px}
}
/* ------------------------------------ the resources cards, a one-letter typo
*
* assets/resources-v1.css:63, @media(max-width:700px), collapses the article
* cards to one column - but it is written `.resource-feature-grid-v1` and the
* element is `.resources-feature-grid-v1`. The three-column base rule at line 21
* spells it with the s and matches; both responsive rules spell it without and
* match nothing. The grid is three columns at every width there is.
*
* Measured at 320px: three 87px cards, each clipping 51-79px, headlines sliced
* mid-word with no ellipsis - "How to Choos a Nicotin Supplic 7 Questi to Ask
* Befor You Buy". Every article headline on the page, on every phone.
*
* This is the bundle's own rule, spelled the way the markup spells it.
*/
@media(max-width:700px){
.resources-feature-grid-v1{grid-template-columns:1fr;grid-auto-rows:250px}
}
/* ------------------------------------ the applications route map that overflows
*
* assets/applications-hero-clean-v1.css scales the 755px-wide map in steps -
* scale(.76) below 1081px, scale(.88) below 1321px, unscaled above - while the
* column it sits in grows continuously. At the bottom of each step the map is
* wider than its column and the hero's overflow:hidden cuts the right-hand list
* off: the product families the map exists to point at.
*
* Measured right-edge overflow: 72px at 821, 66px at 834 (iPad Air portrait,
* in Set A), 33px at 900, gone by 966; then 35px at 1081, gone by 1151; then 6px
* at 1321, gone by 1333.
*
* Below 966 no scale that fits leaves a legible label - it would need scale(.50),
* putting the 18px labels at 9px - so the map is hidden there, which is exactly
* what the bundle already does below 821 and what R-45 accepted: the text content
* carries the meaning and the map is an illustration of it. NOTE FOR THE LAUNCH
* NOTE: this moves that accepted threshold from 820 to 966, so iPad portrait now
* sees the text rather than a sliced map.
*
* The two upper windows keep the smaller scale until the larger one fits.
*/
@media(max-width:965px){
.application-map-wrap-v1{display:none!important}
}
@media(min-width:1081px) and (max-width:1150px){
.application-map-v1{transform:translate(-50%,-50%) scale(.76)!important}
}
@media(min-width:1321px) and (max-width:1332px){
.application-map-v1{transform:translate(-50%,-50%) scale(.88)!important}
}
/* ------------------------------------- markdown tables above the 720px band
*
* assets/article-system-v1.css gives `.article-content-v1 table` the scroll
* treatment it needs -- display:block, overflow-x:auto, white-space:nowrap --
* but only inside @media(max-width:720px). Above that the table is display:table
* again, so a table whose min-content width exceeds the article column pushes
* the whole page sideways instead of scrolling inside itself.
*
* The bundle shipped no markdown tables, so the gap never showed. content/blog
* does ship them, and the 2026-08-20 content pass added more.
*
* Measured on /blog/eu-tpd3-...: page scrollWidth 776 against innerWidth 768 at
* iPad portrait, the table 537px wide inside a 505px column. The band is 721-768
* exactly -- clean at 720 where the bundle rule starts, clean by 800 where the
* column has grown past the table.
*
* Scoped to min-width:721px rather than to 721-799, because the band's upper
* edge is a property of one table's content, not of the layout: a wider table in
* a future post would overflow at a width a fixed band does not cover. It is
* inert where the bundle is already correct -- measured at 1440 the widest table
* is 760px in a 760px column both with and without this rule, unchanged.
*
* white-space:nowrap is deliberately NOT carried up here. On a phone it stops
* cells wrapping to one word per line; on a tablet the column is wide enough
* that wrapped cells read better than a longer scroll.
*/
@media(min-width:721px){
.article-content-v1 table{display:block;overflow-x:auto;max-width:100%}
}
/* ----------------------------------- long unbreakable tokens on small phones
*
* Regulatory prose carries identifiers that contain no spaces and no hyphens the
* browser will break on -- EU-CEG field names like
* E-Cigarette_Nicotine_Dose/Uptake_File, 38 characters. Underscores are not
* break opportunities, so the token sets the column's min-content width and the
* page scrolls sideways.
*
* Measured on /blog/austria-...: page scrollWidth 360 against innerWidth 320,
* the reaching 360px in a 286px column. Clean from 360 up, so the band
* is the smallest phones only.
*
* break-word rather than anywhere: it breaks a word only when that word would
* otherwise overflow, and unlike `anywhere` it does not change min-content
* sizing, so no flex or grid track elsewhere in the article resizes because of
* it. Normal prose is untouched.
*/
@media(max-width:720px){
.article-content-v1{overflow-wrap:break-word}
}
/* ------------------------------------ documents table: ragged column edges
*
* Every .docs-row-v1 is its OWN grid, and the ACTION track is `auto` in all three
* of the table's templates (resources-v1.css:54 and its 980 / 700 media blocks).
* So that track is sized by the row's own action: "Download redacted" measures
* 117px, "Request" measures 81px. The 36px difference comes out of the free space
* the fr tracks divide, so PRODUCT / SCOPE, TYPE and ACCESS land at a different x
* on a Request row than on a Download row and the table reads as if rows were
* randomly indented.
*
* Measured on the live page: at 1280 each column has two left edges (646/672,
* 817/855, 959/1006) and at 1000 two others (520/546, 638/676, 737/784). This is
* NOT a text-align problem. The values are start-aligned already; an earlier
* revision of this block asserted a centring rule in resources-v1.css that does
* not exist there, and the text-align it shipped was a no-op.
*
* Pinning ACTION to a fixed 124px (117px widest content plus headroom for a
* fallback face) leaves identical free space on every row, so one template
* resolves to one set of column edges. The action itself is unaffected: it is
* already justify-self:end / text-align:right / white-space:nowrap in
* document-download-gate-v1.css, so it never stretched into its track anyway.
*
* Below 701px the row is `1fr auto`, a single text column against the left edge,
* so a per-row action width cannot pull anything out of line and it stays auto.
*/
@media(min-width:1417px){
.docs-row-v1{grid-template-columns:minmax(280px,1.7fr) .72fr .58fr .78fr 124px}
}
@media(min-width:701px) and (max-width:980px){
.docs-row-v1{grid-template-columns:minmax(220px,1.3fr) .6fr .72fr 124px}
}