/* ── Mobile safety layer — applied sitewide 2026-04-19 ───────────────────────
Prevents the "page shifts left" bug when an element exceeds viewport width.
Also covers common pain points:
• horizontal overflow (html/body clipped, max-width enforced)
• tap-target size (buttons/links too small on small screens)
• table overflow (wide tables scroll horizontally inside their parent
instead of pushing the whole page sideways)
• modal close-buttons stay visible via position:fixed on narrow screens
Included in every production page via tag. Cheap, cacheable. */
html {
/* Reserve space for the scrollbar so opening a modal (which sets
body.style.overflow='hidden') doesn't shift the page left by scrollbar
width on desktop Chrome/Edge. Ignored by mobile browsers (no scrollbar). */
scrollbar-gutter: stable;
/* Do NOT set overflow-x on html. On iOS Safari, any overflow-x value other
than 'visible' on html (hidden, clip, auto, scroll) can disable pinch-to-zoom
AND can hijack horizontal scroll gestures that should reach inner containers
(e.g. `.table-scroll` on admin-scrape-log). 2026-04-19 regression recovery:
after applying overflow-x:hidden then overflow-x:clip here, user reported
losing both zoom and in-table horizontal scroll. Leaving html alone. */
}
body {
/* Clip only the body. Prevents a single rogue-wide element from pushing the
whole page sideways, but leaves html's viewport handling untouched so
pinch-zoom still works on mobile and inner scroll containers still receive
horizontal gestures. If this ever re-breaks zoom, delete this line and
find the specific rogue-wide element instead. */
overflow-x: clip;
}
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, svg { max-width: 100%; }
/* Don't force `max-width:100%` on tables — conflicts with pages that set
`min-width: 1100px` on tables inside `.table-scroll` wrappers (the inner-scroll
pattern used by admin-scrape-log). The wrappers handle overflow themselves.
Only target `
` (code blocks) here. */
pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Mobile-only admin back-link. Each admin-*.html page includes a
← Admin at the top of .
On mobile, that link becomes a fixed pill at top-left so the user can always
return to the admin dashboard. On desktop, hidden (sidebar nav is visible). */
.mobile-back-link { display: none; }
@media (max-width: 900px) {
.mobile-back-link {
display: inline-flex;
align-items: center;
position: fixed;
top: max(10px, env(safe-area-inset-top, 10px));
left: 10px;
z-index: 1001;
background: var(--bg2, #131d2e);
border: 1px solid var(--border, #263044);
border-radius: 8px;
padding: 7px 12px;
font-size: 13px;
font-weight: 500;
color: var(--text, #deeeff);
text-decoration: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.mobile-back-link:active { background: var(--bg3, #1a2640); }
/* Reserve top padding so fixed back-link doesn't cover page content. */
body.has-mobile-back-nav { padding-top: 48px; }
}
/* Mobile-only polish */
@media (max-width: 600px) {
/* Tap targets: Apple/Google both recommend 44×44 min. */
button, .btn, .nav-item, a.btn, input[type="submit"], input[type="button"] {
min-height: 38px;
}
input, select, textarea { font-size: 16px; /* prevents iOS auto-zoom on focus */ }
/* Modal close buttons fixed to top-right so they're always reachable even
when the modal content scrolls or pushes the header off-screen. */
.modal-close, .close-btn, .close-x {
position: fixed !important;
top: max(10px, env(safe-area-inset-top));
right: 10px;
z-index: 1000;
}
}