/* ── Site-wide mobile polish ─────────────────────────────────────────────
 * Loaded after every page-specific stylesheet so the rules below win on
 * equal specificity. Scope is intentionally narrow: cross-cutting iOS
 * Safari / mobile-Chrome platform quirks that bite every page. Per-page
 * mobile layout still lives in each page's own stylesheet.
 */

/* Tap-highlight + 300ms delay. Coarse-pointer media query keeps these off
 * desktop, where tap-highlight is irrelevant and touch-action would
 * suppress double-click-to-zoom in some contexts. */
@media (hover: none) and (pointer: coarse) {
	a,
	button,
	[role='button'],
	summary,
	input[type='submit'],
	input[type='button'],
	input[type='reset'] {
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}
	label,
	select,
	input[type='checkbox'],
	input[type='radio'] {
		-webkit-tap-highlight-color: transparent;
	}
}

/* Horizontal-scroll guard. A few px of off-by-one overflow on one child
 * shouldn't give the whole page a horizontal scrollbar on a phone.
 * overflow-x: clip is safer than overflow: hidden because it does not
 * also clamp vertical scrolling — and unlike hidden it cannot create a
 * new scroll container that breaks position: sticky higher in the tree. */
@media (max-width: 768px) {
	html,
	body {
		overflow-x: clip;
	}
}

/* iOS Safari zooms the viewport on focus when an input's computed
 * font-size is < 16px. Bump unstyled inputs/textareas/selects so that
 * tapping a search/email field doesn't punt the layout sideways. Pages
 * that intentionally use small inputs use class selectors with higher
 * specificity, so designed sizes still win where they matter. */
@media (max-width: 768px) {
	input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
	textarea,
	select {
		font-size: max(16px, 1em);
	}
}

/* Reusable safe-area utility for any fixed-bottom UI that doesn't already
 * handle the iPhone home indicator. Apply via class — no automatic
 * targeting, so existing layouts are untouched. */
@supports (padding: env(safe-area-inset-bottom)) {
	.mobile-safe-bottom {
		padding-bottom: env(safe-area-inset-bottom);
	}
	.mobile-safe-top {
		padding-top: env(safe-area-inset-top);
	}
}

/* ── Home-page specific mobile polish ──────────────────────────────────
 * Fixes that span across home.css / home-saas.css but are best kept here
 * so the load order guarantees they win on equal-specificity conflicts.
 */

@media (max-width: 768px) {
	/* Chapter rail navigation dots — only useful on wide viewports where the
	   user can see the section number without losing their place. On mobile
	   they float over content and are too small to tap reliably. */
	.h-chapter-rail {
		display: none !important;
	}

	/* Hero: on phones the sticky/margin-bottom trick (used for the parallax
	   text pin) causes a big blank gap.  The media query in home.css already
	   resets it to relative but misses some padding edge-cases. */
	.h-hero-text {
		padding-top: 1.5rem;
		padding-bottom: 2rem;
	}

	/* Title size: clamp already handles it but add a hard cap so it never
	   wraps oddly on 320-360px screens. */
	.h-title {
		font-size: clamp(2.6rem, 11vw, 4rem);
		letter-spacing: -0.03em;
	}

	.h-act-title {
		font-size: clamp(2rem, 8.5vw, 3.2rem);
	}

	/* Subtitle / lede: tighten line-height slightly on narrow screens */
	.h-subtitle {
		font-size: 1rem;
		line-height: 1.5;
	}

	.h-act-lede {
		font-size: 1rem;
		line-height: 1.5;
	}

	/* CTA row: stack on very small phones */
	.h-cta-row {
		gap: 0.65rem;
	}

	.h-btn-primary,
	.h-btn-ghost {
		min-height: 48px;
		padding: 0.9rem 1.4rem;
		font-size: 0.92rem;
	}

	/* Standards list: allow 2-per-line on tiny screens */
	.h-standards {
		gap: 0.5rem 0.9rem;
		font-size: 0.62rem;
	}

	/* Pillars: already single-column via home.css, add breathing room */
	.h-pillars {
		padding: 3rem 1.25rem;
	}

	.h-pillar p {
		font-size: 0.9rem;
	}

	/* Bento section */
	.h-bento-section {
		padding: 3rem 1rem;
	}

	.h-bento-body {
		padding: 1rem 1.2rem;
	}

	/* Dev section code block: allow horizontal scroll without breaking layout */
	.h-dev-pre {
		font-size: 0.74rem;
	}

	/* Final CTA section */
	.h-cta-section {
		padding: 3.5rem 1.25rem;
	}

	.h-cta-section h2 {
		font-size: clamp(2rem, 9vw, 3.2rem);
	}

	.h-cta-section p {
		font-size: 1rem;
	}

	.h-cta-row-center {
		flex-direction: column;
		align-items: stretch;
	}

	.h-cta-row-center .h-btn-primary,
	.h-cta-row-center .h-btn-ghost {
		text-align: center;
		justify-content: center;
	}

	/* Footer */
	.h-footer-horizon {
		padding: 2.5rem 1.25rem 1.25rem !important;
	}

	.h-footer-watermark {
		font-size: clamp(5rem, 18vw, 10rem);
	}
}

/* Very small phones (≤ 380px) — tighten further */
@media (max-width: 380px) {
	.h-title {
		font-size: clamp(2.2rem, 12vw, 3rem);
	}

	.h-cta-row {
		flex-direction: column;
		align-items: stretch;
	}

	.h-btn-primary,
	.h-btn-ghost {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* ── Safe-area insets for fixed/sticky UI ──────────────────────────────
 * Applied globally so every page benefits. Modals and drawers that sit
 * at the viewport edge need padding-bottom to clear the iPhone home
 * indicator and Android navigation bar.
 */
@supports (padding: env(safe-area-inset-bottom)) {
	/* Modals anchored to full viewport height */
	.modal-content,
	.plugin-modal,
	.avatar-modal-side,
	.auth-form-wrap {
		padding-bottom: max(24px, env(safe-area-inset-bottom));
	}

	/* Toast / snackbar that sits at bottom-center */
	.agent-deploy-toast,
	.status-toast,
	.toast {
		bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 1rem));
	}

	/* Sticky bottom nav / tab bars */
	.nav-bottom,
	.bottom-bar,
	.mobile-tab-bar {
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* Auth shell on very small iPhones */
	@media (max-width: 860px) {
		body:has(.shell) {
			padding-bottom: env(safe-area-inset-bottom);
		}
	}
}

/* ── 360px — very small Android phones ────────────────────────────────
 * Galaxy A series, Moto G, etc. sit at 360px.
 */
@media (max-width: 360px) {
	/* Marketplace: force single column so cards don't shrink below usable size */
	.market-grid {
		grid-template-columns: 1fr !important;
	}

	/* Create page: full-bleed cards */
	.card-grid {
		grid-template-columns: 1fr !important;
		max-width: none !important;
		padding: 0;
	}

	/* Auth: let the avatar panel compress more */
	.panel {
		min-height: 160px !important;
	}
	.agent-avatar {
		width: 140px !important;
		height: 140px !important;
	}

	/* Nav: shrink wordmark gap */
	.wordmark-logo {
		width: 18px;
		height: 18px;
	}
}

/* ── PWA standalone mode ────────────────────────────────────────────────
 * When installed as a PWA (no browser chrome), compensate for the absence
 * of the browser status bar and adjust top-anchored sticky headers.
 */
@media (display-mode: standalone) {
	/* Give the topmost sticky header extra top padding for the status bar area */
	header:first-of-type,
	.nav-top,
	.market-topbar,
	.agent-page-header {
		padding-top: max(0.75rem, env(safe-area-inset-top));
	}

	/* Bottom of scrollable main content — clear the home indicator */
	main,
	.stage,
	.market-main {
		padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
	}

	/* Hide browser-specific UI hints that don't apply in standalone */
	.h-scroll-hint {
		display: none;
	}
}

/* ── Marketplace mobile polish ─────────────────────────────────────────
 * Supplements marketplace.css at breakpoints it doesn't cover.
 */
@media (max-width: 480px) {
	/* Modal: full-screen bottom sheet on phones */
	.avatar-modal {
		position: fixed !important;
		inset: 0 !important;
		max-height: 100dvh !important;
		border-radius: 0 !important;
		grid-template-columns: 1fr !important;
		grid-template-rows: 48vw 1fr !important;
	}

	.avatar-modal-side {
		max-height: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Topbar: stack filter row below search on very narrow screens */
	.market-filter-chips {
		gap: 6px;
	}
	.market-filter-chip {
		font-size: 0.72rem;
		padding: 5px 10px;
	}
}

/* ── Create page mobile polish ─────────────────────────────────────────
 */
@media (max-width: 700px) {
	/* Upload drop zone: increase height so it's easier to tap */
	.upload-zone,
	[class*='drop-zone'] {
		min-height: 140px;
	}

	/* Card CTAs: full tap width */
	.create-card {
		-webkit-tap-highlight-color: transparent;
	}
}

/* ── Auth / login mobile polish ────────────────────────────────────────
 */
@media (max-width: 480px) {
	/* Sign-in form: use full available height */
	.shell {
		border-radius: 0;
		min-height: 100dvh;
	}

	/* Wallet connect button row: stack if too many */
	.wallet-list,
	.wallet-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ── Scroll behaviour ──────────────────────────────────────────────────
 * Smooth momentum scroll on iOS for overflow containers.
 */
@media (hover: none) and (pointer: coarse) {
	[style*='overflow: auto'],
	[style*='overflow-y: auto'],
	[style*='overflow-y: scroll'],
	.scrollable,
	.avatar-modal-side,
	.market-main,
	.agent-chat-history {
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
	}
}