/* Mobile usability overrides (2026-10-05, mobile-usability-1005).
   Loaded right after the sealed theme CSS (dist/main.min.css), which stays byte-identical to live.
   Every rule that changes existing layout is inside the 819px query the theme itself uses for its
   mobile branch, so desktop rendering is unchanged. Before/after evidence: the merge request. */

/* Compare in-page navigation (.cp-gc__jump top + under results, .cp-gc__side-results per side) is new
   markup. Hidden on desktop, where both setups and the results sit side by side. */
.cp-gc__jump,
.cp-gc__side-results { display: none; }

@media only screen and (max-width: 819px) {
	/* S1. The carried masthead forces a 600px (tall) / 350px (short) picture, so the first tool control
	   started below the first phone screen, and break-all split titles mid-word ("COMPA|RE"). */
	.cp-header__masthead--tall img { min-height: 240px; }
	.cp-header__masthead--short img { min-height: 170px; }
	.cp-header__masthead-text { padding-top: 84px; }

	/* Round 2, D1. The top bar was 90px tall at top:25px over the masthead on every page. Use the 60px
	   layout the bar already switches to once the page scrolls (.l-sticky), so nothing new is invented. */
	.cp-header__nav-wrapper { height: 3.75rem; top: 12px; }
	.cp-header__nav-wrapper .cp-header__logo { padding: 0.5625rem 0.3125rem; }
	.cp-header__nav-wrapper .cp-header__logo > img { height: 2.75rem; }
	.cp-header__nav-wrapper .cp-header__logo--slot { height: 3rem; width: 3rem; }
	.cp-header__nav-wrapper .cp-header__logo--slot img { width: 2.5rem; height: 2.5rem; }
	.cp-header__nav-wrapper .cp-header__nav-toggle--icon { margin: 0 0 0.1875rem; }

	/* Round 2, D2. 60px top margin plus a 130px title row whose heading ends at 90px. Only these six
	   boxes carry the 60px margin; boxes with no margin are left alone. The ad slots are not touched
	   (body.banners-hidden still governs them). */
	.cp-bis-calculator__inner,
	.cp-gear-compare__inner,
	.cp-gear-picker__inner,
	.cp-gear-table__inner { margin-top: 1.5rem; }
	.cp-inventory-select__inner,
	.cp-blog__inner { margin-top: 1.5rem; }
	.l-content-box__title { min-height: 96px; }
	.l-content-box .cp-search { margin-top: 12px; }
	.cp-header__masthead-text--title {
		font-size: 1.625rem;
		line-height: 1.875rem;
		word-break: normal;
		overflow-wrap: break-word;
		hyphens: manual;
	}
	.cp-header__masthead-text--subtitle { font-size: 1.125rem !important; }

	/* S1. On tool and guide pages the H1 sits in the 60px parchment banner and inherits the global 36px
	   h1 size, so it ran to 2-3 lines and out of the banner. Use the banner's own h2 size. */
	.l-scroll-heading h1,
	.l-scroll-heading-2 h1 { font-size: 1.125rem; line-height: 1.15; margin: 0; }

	/* S3. Text inputs under 16px make iOS Safari zoom the page on focus. */
	.cp-dps-calc .cp-dps-picker__head input.cp-dps-picker__search,
	#bgf-rsn,
	.cp-bgf select,
	#skill-rsn,
	.cp-bis-slayer .cp-bis-slayer__number,
	.osrsbis-ask .osrsbis-ask__ta,
	#ac-rsn,
	#facetSort,
	#gear-title,
	#drop-boss-filter { font-size: 16px; }
	/* (The slayer number and the tool-report textarea are styled again by later inline <style> blocks of
	   equal specificity, so the one-class form above lost; these two-class forms win.) */

	/* S3. Real rendered touch targets that measured under 44px. */
	.cp-dps-calc .cp-dps-picker__row { min-height: 44px; }
	/* The picker is 300px (max 100vw - 32px) but dps-calc.js clamps it inside .cp-dps-dollwrap, which is
	   only 256px wide at 320px, so its right edge ran 5px past the screen. Cap it to the wrap (its
	   containing block) less the 4px margins the clamp keeps on each side. */
	.cp-dps-calc .cp-dps-picker { max-width: calc(100% - 8px); }
	/* An input's flex min-width is its intrinsic size, so at 16px it refused to shrink and pushed the
	   match count ("1 match", "Top 50 of 394") past the picker's right border. Let the input give way. */
	.cp-dps-calc .cp-dps-picker__head input.cp-dps-picker__search { flex: 1 1 auto; min-width: 0; width: 0; }
	.cp-dps-calc .cp-dps-picker__head .cp-dps-picker__sort { flex: 0 0 auto; }
	.cp-bgf .cp-bgf__style,
	.cp-bgf .cp-bgf__pin { min-height: 44px; }
	/* .cp-bgf__cyc-btn is deliberately NOT enlarged: boss-gear-finder-ui.js packs prev/next/reset inside
	   the 64px cell so they cannot overlap a neighbouring slot's controls (measured wrong-slot taps). */

	/* The finder's one-column grid is `1fr`, whose minimum is the content's min-content width, so the
	   panel was wider than a 320-375px phone (pre-existing: right edge 376px on live) and 16px inputs
	   widened it further. body{overflow-x:clip} hid the overflow rather than preventing it. */
	.cp-bgf__grid { grid-template-columns: minmax(0, 1fr); }
	.cp-bgf__grid > * { min-width: 0; }
	.cp-gear-compare .select2-container--default .select2-selection--single { height: 44px; }
	.cp-gear-compare .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; }
	.cp-gear-compare .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }

	/* Compare: Setup A / Setup B / Results jump links. Targets clear the 60px sticky header. */
	.cp-gc__jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 0 1rem; }
	.cp-gc__jump--back { margin: 1rem 0 0; }
	.cp-gc__jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.875rem; }
	.cp-gc__side, .cp-gc__diff { scroll-margin-top: 76px; }
	.cp-gc__side-results { display: block; margin: 0.25rem 0 0.75rem; text-align: center; }
	.cp-gc__side-results a { display: inline-flex; align-items: center; min-height: 44px; }

	/* Round 2, D3 (CI-104). The live-chat launcher (62px, fixed 26px from the right and bottom) covered the
	   right end of the finder's sticky result bar. Keep the bar's content clear of it. The widget is not changed. */
	.cp-bgf .cp-bgf__mbar { padding-right: 96px; }

	/* Round 2, D4. Gear table: the style column and the slot scroller sat side by side, pushing the scroller
	   103px past the screen. Stack them (DOM order: styles, then the table). The scroller scrolls inside. */
	.cp-gear-table .cp-content.grid { flex-wrap: wrap; }
	.cp-gear-table .col-4-5 { min-width: 0; }

	/* Round 2, D5. Changelog lines ran past the screen. */
	.cp-changelog__entry > * { min-width: 0; }
	.cp-changelog__text { overflow-wrap: anywhere; }
	.cp-changelog__text .cp-changelog__link { white-space: normal; }

	/* Round 2, D6. Wide article media: images fit, tables scroll sideways inside the column. */
	.cp-blog__post-content img,
	.cp-blog__post-content picture { display: block; max-width: 100%; height: auto; }
	.cp-blog__post-content picture img { max-width: 100% !important; height: auto !important; }
	.cp-mscroll { max-width: 100%; overflow-x: auto; }
	.cp-blog__post-content [class*="GleamEmbed"] { min-width: 0 !important; max-width: 100%; }
	.cp-bis-slots .cp-bis-slots__wrap { overflow-x: auto; }
	.cp-mscroll:focus-visible,
	.cp-bis-slots__wrap:focus-visible { outline: 2px solid #412619; outline-offset: 2px; }

	/* Round 2, D9/D10. Standalone links and buttons under the 24px minimum target height. */
	.cp-community .cp-community__link { display: inline-flex; align-items: center; min-height: 24px; }
	.cp-dps-calc .cp-dps-budget__ckpt { min-height: 24px; }

	/* Round 2, D11-D13. Containment at 320px: the gear-guide card grid's 320px track minimum, the skill plan
	   row, and the item page grid (whose 1fr track grew to its longest line). */
	/* min(320px, 100%) keeps the guides' own auto-fit columns on wider phones and tablets. */
	.cp-style-gear .cp-style-gear__cards,
	.cp-slayer-gear .cp-slayer-gear__unlocks { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
	.cp-style-gear .cp-style-gear__card,
	.cp-slayer-gear .cp-slayer-gear__unlock { min-width: 0; }
	.cp-guides-index .cp-guides-index__skillcell { min-width: 0; }
	@media (max-width: 760px) { .cp-guides-index .cp-guides-index__skillgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
	.cp-skill-plan-steps li > * { min-width: 0; overflow-wrap: anywhere; }
	.wrap > .layout > * { min-width: 0; }
	/* An inline `main{margin:0 auto}` turns off grid stretch, so main sized to its longest line. */
	.wrap > .layout > main { margin-left: 0; margin-right: 0; }
}