/* ============================================================
   MANYJets mobile stage — MOBILE_PLAN.md §2 (Phase 1) + Phases 2-3.

   Desktop guarantee: with a fine pointer (any window width) or a
   coarse-pointer device >= 980px wide, NOTHING in this file changes
   rendering — #stage carries no transform at rest (html.mj-scaled is
   only added by the bootstrap when the gate engages), and every other
   rule is gated on (pointer: coarse) / (hover: none).

   Kill switch: html.mj-nomobile (set by ?nomobile=1, cleared by
   ?nomobile=0) disables everything below except the bare stage scale.
   ============================================================ */

/* Deterministic font sizing in both normal and nomobile modes: the new
   viewport meta would otherwise change Android font-boosting heuristics
   relative to the old no-meta page. Outside any media query on purpose. */
html {
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

#stage {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--stage-w, 100vw);
	height: var(--stage-h, 100vh);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	text-align: center;
}
/* mj-scaled is added ONLY when the gate engages (coarse pointer AND
   clientWidth < 980). At rest no transform property exists at all —
   even scale(1) would create a containing block / stacking context
   and change position:fixed descendants' anchoring. */
html.mj-scaled #stage {
	-webkit-transform: scale(var(--stage-s, 1));
	transform: scale(var(--stage-s, 1));
}

/* ----------------------------------------------------------------
   Phase 2 — touch feedback twins. Resting states never change; each
   rule replays the identical visual of its :hover twin. The sprite
   twins carry !important ONLY because the base rules' background
   shorthand does (index.html #share-twitter/#share-facebook/#world-time)
   — without it the twins lose the cascade and never render.
   (Amended !important law, MOBILE_PLAN.md §5.)
   iOS only applies :active during touch while a touch listener is
   registered — stage.js installs a permanent no-op one.
   ---------------------------------------------------------------- */
@media (hover: none) {
	html:not(.mj-nomobile) .navigation-menu-image:active {
		opacity: 1;
	}
	html:not(.mj-nomobile) #share-twitter:active {
		background-position: -16px -16px !important;
	}
	html:not(.mj-nomobile) #share-facebook:active {
		background-position: -0px -16px !important;
	}
	html:not(.mj-nomobile) #world-time:active {
		background-position: -0px -16px !important;
	}
}

/* Slogan neon replay (plan 2.5): stage.js holds .mj-neon on the existing
   anchor for one full 1.5s cycle on touchstart (a bare :active would show
   ~150ms of the ramp — far weaker than the sustained desktop hover).
   Identical neon2 keyframes (defined in index.html) and opacity as the
   desktop hover. The class is only ever added by stage.js on coarse-pointer
   devices, so no media query is needed; desktop selectors stay untouched. */
html:not(.mj-nomobile) .slogan span:nth-child(1) a.mj-neon {
	-webkit-animation: neon2 1.5s ease-in-out infinite alternate;
	-moz-animation: neon2 1.5s ease-in-out infinite alternate;
	animation: neon2 1.5s ease-in-out infinite alternate;
	opacity: 1;
}

/* ----------------------------------------------------------------
   Phase 2 — invisible hit zones (plan 2.3). Vertical extent is exactly
   44 device px at any scale s: per-side inset (16px - 44px/s)/2 in
   stage px (negative = outward). Horizontal extents are midpoint-
   bounded against neighbours — the bottom bar's 4-70px gaps make true
   non-overlapping 44px targets geometrically impossible (respacing is
   owner decision D12, default OFF). Sprite art is never resized, so
   background-position math is never at risk. Zero rendered change.
   ---------------------------------------------------------------- */
@media (pointer: coarse) {
	html:not(.mj-nomobile) #share-twitter,
	html:not(.mj-nomobile) #share-facebook {
		position: relative;
	}
	html:not(.mj-nomobile) #world-time {
		position: relative;
		/* the base rule's overflow:hidden would clip the ::after to the
		   16px box and silently no-op the clock's hit zone (plan 2.3a);
		   visually inert — the element is an empty 16x16 sprite div */
		overflow: visible;
	}
	html:not(.mj-nomobile) #share-twitter::after,
	html:not(.mj-nomobile) #share-facebook::after,
	html:not(.mj-nomobile) #world-time::after {
		content: '';
		position: absolute;
		top: calc((16px - 44px / var(--stage-s, 1)) / 2);
		bottom: calc((16px - 44px / var(--stage-s, 1)) / 2);
	}
	/* Horizontal midpoint bounds (stage px). Measured gaps in the bottom
	   bar: mute|world-time ~4px, world-time|facebook ~74px (70px inline
	   margin), facebook|twitter ~4px, twitter|screen-edge = its own 26px
	   inline padding (the ::after resolves against the padding box). */
	html:not(.mj-nomobile) #world-time::after {
		left: -2px;
		right: -35px;
	}
	html:not(.mj-nomobile) #share-facebook::after {
		left: -35px;
		right: -2px;
	}
	html:not(.mj-nomobile) #share-twitter::after {
		left: -2px;
		right: 0;
	}
	/* The decorative SHARE label (.navigation-bottom-text, absolute, later in
	   DOM order) overlaps the left strip of the clock's enlarged zone and
	   would win hit-testing there. It has no handlers — clicks on it already
	   do nothing today — so releasing its hit-testing is behavior-inert and
	   makes the full clock zone tappable. Touch-only via this gate. */
	html:not(.mj-nomobile) .navigation-bottom-text {
		pointer-events: none;
	}
	/* Mute hit-zone label (plan 2.4): injected and positioned by stage.js
	   (the checkbox draws its icon via :before content:url() and cannot be
	   resized; a label click natively forwards activation to #mute, which
	   fires the existing jQuery handler -> same bell + fade path).
	   Transparent — zero rendered change. */
	html:not(.mj-nomobile) #mute-hit {
		position: absolute;
		cursor: pointer;
		background: transparent;
	}
}

/* ----------------------------------------------------------------
   Phase 3 — panels as scroll containers + full-height panels (D2).
   Static stylesheet overrides only: media queries CAN override these
   (only jQuery-animated inline values are off-limits, and panel
   height/overflow are never animated — fades touch display/opacity).
   iOS Safari expands iframes to their content height regardless of
   CSS, so the PANEL is the scroll container; the counter-scaled,
   content-height iframe scrolls inside it. Engaged (scaled) + coarse
   only — desktop iframes keep height:100% and panels keep 584px.
   ---------------------------------------------------------------- */
@media (pointer: coarse) {
	html.mj-scaled:not(.mj-nomobile) .quote,
	html.mj-scaled:not(.mj-nomobile) .careers,
	html.mj-scaled:not(.mj-nomobile) .contact {
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* D2 (promoted to requirement): at phone scales a 584-stage-px panel
	   is ~234 device px tall — the datepicker/autocomplete cannot open
	   un-clipped. Mirror .contact's existing full-height formula. */
	html.mj-scaled:not(.mj-nomobile) .quote,
	html.mj-scaled:not(.mj-nomobile) .careers {
		height: calc(var(--stage-h, 100vh) - 130px);
	}
}