/* ===========================================================================
 * rush-app.css — /app/, the RUSH app page (1.31.10, owner 2026-11-08).
 *
 * Loads on /app/ only, after rush-r3-routes.css (functions.php
 * rush_canna_enqueue_app_page()). It builds on the r3 ink hero (the slab, the
 * gold hairline, the outline ghost), the r3 scenes, and the shared badge pair
 * (rush-chrome.css .rush-badges). Role tokens only; the few literals (the
 * device body, the app's white screen, the code's paper, the app tile's black)
 * are annotated `fixed`. Every image has its box before it loads, so nothing
 * moves at load. Gold is a mark here: the hairline, one word per heading, the
 * numbers, the one CTA.
 * ======================================================================== */

/* ═══ Hero ════════════════════════════════════════════════════════════════ */
.rush-app-hero { --plate-w: 44vw; align-items: center; }
.rush-app-hero-in { display: grid; gap: clamp(36px, 6vw, 64px); align-items: center; padding-block: clamp(28px, 5vh, 64px) clamp(44px, 8vh, 88px); }
.rush-app-copy { min-width: 0; }
.rush-app-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.rush-app-tile { display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 13px; background: #000; /* fixed: the app icon's black */ box-shadow: 0 0 0 1px var(--t-line-strong); }
/* The app's own icon mark: the gold circle-R on black (the stores show the same; the dock's Shop glyph). */
.rush-app-tile img { display: block; width: 40px; height: 40px; }
/* The routes sheet zeroes p, h1 and figure margins at (0,1,1) (.rush-route-main p, ...), so this sheet's own
 * margins on them carry .rush-route-main. The h1 sits on the kicker row with none (as reviewed); the lede gets 12px. */
.rush-app-h1 > .rush-display-xxl { font-size: clamp(2.75rem, 14vw, 6.5rem); line-height: 0.88; }
.rush-route-main .rush-app-lede { max-width: 30ch; margin-top: 12px; color: var(--t-fg); font-size: clamp(18px, 1.9vw, 22px); }
.rush-app-get { margin-top: 28px; }
.rush-app-get .rush-app-badges { --rush-badge-h: 48px; }
/* An Android phone: Google Play alone (the inline script in rush-route.php marks the row before
 * it paints). Elsewhere both, App Store first: Apple asks for its badge first in a lineup. */
.rush-app-badges[data-rush-os="android"] .rush-badge--ios { display: none; }
.rush-route-main .rush-app-note { margin: 14px 0 0; /* the badges' 12px clear space: about 21px from art to glyph, measured */ max-width: 46ch; font-size: 14px; line-height: 1.45; color: var(--t-fg-2); }

/* The QR code: desktop only (a phone is already where the badges lead). */
.rush-app-qr { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
	.rush-app-qr { display: flex; align-items: center; gap: 18px; width: fit-content; max-width: 470px; margin-top: 24px; padding: 12px 20px 12px 12px; border: 1px solid var(--t-line); border-radius: 16px; }
	.rush-app-qr img { display: block; flex: none; width: 128px; height: 128px; border-radius: 8px; background: #fff; /* fixed: the code's own paper, on both themes */ }
	.rush-app-qr p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--t-fg-2); }
	.rush-app-qr strong { display: block; margin-bottom: 2px; color: var(--t-fg); font-weight: 800; }
}

/* The phone: a plain device body (not an Apple product image) holding the listing's screen. */
.rush-app-phone { --w: 240px; position: relative; flex: none; width: var(--w); margin: 0; padding: calc(var(--w) * 0.034); border-radius: calc(var(--w) * 0.16); background: #0b0b0a; /* fixed: the device body, both themes */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), /* fixed: the body's edge */ 0 32px 64px -30px rgba(0, 0, 0, 0.55); /* fixed: the device's drop shadow, any surface */ }
.rush-app-phone img { display: block; width: 100%; height: auto; aspect-ratio: 1094 / 2186; border-radius: calc(var(--w) * 0.125); background: #fff; /* fixed: the app's own white screen */ }
.rush-app-hero-phone { position: relative; display: flex; justify-content: center; }
.rush-app-phone--hero { --w: min(68vw, 300px); }
/* A gold mark behind the hero phone: one 30-degree blade, the house cut. */
.rush-app-hero-phone::before { content: ""; position: absolute; z-index: -1; top: 8%; bottom: 8%; left: 50%; width: min(48vw, 220px); background: var(--t-gold); clip-path: polygon(34% 0, 100% 0, 66% 100%, 0 100%); transform: translateX(-12%); opacity: 0.9; pointer-events: none; }
@media (min-width: 1024px) {
	.rush-app-hero-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
	/* The copy column is at its narrowest where the grid starts: 9.4vw keeps "RUSH app." about
	 * 40px inside it at 1024 (a 17px scrollbar included), and reaches 104px from 1107px. */
	.rush-app-h1 > .rush-display-xxl { font-size: min(6.5rem, 9.4vw); }
	.rush-app-phone--hero { --w: 300px; }
	.rush-app-hero-phone::before { width: 240px; }
}
@media (min-width: 1440px) {
	.rush-app-phone--hero { --w: 330px; }
}

/* ═══ Inside the app ═════════════════════════════════════════════════════ */
.rush-app-feats-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; margin: 0; padding: 0; list-style: none; }
.rush-app-feat { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin: 0; }
.rush-app-feat .rush-app-phone { --w: min(calc(50vw - 40px), 220px); align-self: center; margin-bottom: 22px; }
.rush-app-feat-title { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: clamp(17px, 2vw, 21px); font-weight: 900; line-height: 1.1; text-transform: uppercase; letter-spacing: -0.005em; color: var(--t-fg); }
.rush-app-feat-n { flex: none; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--t-gold-text); }
.rush-route-main .rush-app-feat-text { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--t-fg-2); }
@media (min-width: 640px) {
	.rush-app-feats-list { gap: 48px 24px; }
}
@media (min-width: 1024px) {
	.rush-app-feats-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
	.rush-app-feat:nth-child(even) { margin-top: 64px; } /* the row steps: a staggered line of phones */
}

/* ═══ Order online ═══════════════════════════════════════════════════════ */
.rush-app-web-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.rush-app-web .rush-display-l { max-width: 12ch; }
.rush-app-web .rush-lede { max-width: 40ch; }

@media (prefers-reduced-motion: reduce) {
	.rush-app-hero-phone::before { transition: none; }
}