/* ShopNeuro app stylesheet: ADDITIONS ONLY to the landing's src/styles.css (ADR 0003).
Served at /assets/app.css, after /assets/styles.css, on pages whose body has class="app".
Every selector carries an app-* class or is scoped under body.app (the .app class), and :root declares
only --app-* tokens. No landing token or class is redefined: under .app the app adds only states the
landing lacks, such as .btn:disabled. test/app-ui.test.ts checks every rule.
Design: docs/design/v2, variant A "Arrival" (approved by the owner on 2026-09-27). System: system.md; screens:
screens.md. A's own parts are variant-a.css under the names of system.md 0.1 (va-* classes are app-* classes,
--va-* tokens are --app-* ones); the rest is screens/screens.css. The wave 4 components (drop 2) bring their
rules with their tickets. */
/* ------------------------------------------------------------------ tokens */
:root {
/* Colour (system.md 1.2; contrast measured, WCAG 2.x). A's --va-muted, --va-control, --va-accent, --va-link,
--va-soft, --va-error and --va-error-line in brackets. */
--app-ink-muted: #5f6b72; /* [--va-muted] tertiary text on light. 5.5:1 on white, 5.0 on --bg, 4.7 on --surface-2 */
--app-control-border: #838e94; /* [--va-control] field, radio and tile boundary. 3.35:1 on white, 3.07 on --bg */
--app-teal-on-dark: #7fd3de; /* [--va-accent] icons, accents, the checked plan and the focus ring on the stage */
--app-link-on-dark: #9fe0e8; /* [--va-link] text actions on the stage. 6.9:1 or more over the mesh */
--app-soft-on-dark: #b9cbd1; /* [--va-soft] secondary text on the stage. 5.7:1 or more over the mesh */
--app-error-on-dark: #ffb4a3; /* [--va-error] error text on the stage. 7.2:1 or more over the mesh */
--app-error-line-on-dark: #ff8f7a; /* [--va-error-line] the command's invalid ring on the stage */
--app-teal-ink: #0b6574; /* links, text actions and info text on light. 6.7:1 on white, 5.7 on --teal-soft */
--app-good-ink: #17704a; /* success text. 6.1:1 on white, 5.3 on --good-soft */
--app-bad-ink: #a63a26; /* error text, invalid borders. 6.5:1 on white, 5.4 on --bad-soft */
--app-mid-ink: #8a5a12; /* warning text. 5.9:1 on white, 5.2 on --mid-soft */
/* Type (system.md 1.3; the landing's --fs-body, --fs-small, --fs-lead and --fs-eyebrow stay) */
--app-fs-stage: clamp(2.25rem, 4.4vw, 3.5rem); /* [.va-title] the title on the stage, 36 px on phones */
--app-fs-band: clamp(2rem, 3.2vw, 2.5rem); /* the title on a band (Account) */
--app-fs-card-title: 1.375rem; /* 22 px: the card's heading, 20 px on phones */
--app-fs-section: 1.125rem; /* 18 px: section headings, legends, alert titles */
--app-fs-caption: .8125rem; /* 13 px: step states, "Detected", the command's label */
/* Spacing (4 px base): the gap of a stack */
--app-space-4: 16px;
/* Layout */
--app-bar-h: 68px; /* [.va-bar-inner] the top bar; 60 px on phones */
--app-w-head: 880px; /* [.va-main] the centred head on the stage */
--app-w-flow: 760px; /* [.va-command] the command, the store row and the preflight card */
--app-w-auth: 440px; /* auth and verification cards */
--app-w-form: 600px; /* longer forms (Enterprise) */
--app-w-settings: 980px; /* settings rows on paper */
--app-rise: 96px; /* how far the stage's dark runs behind the rising card; 64 px on phones */
/* Controls and surfaces */
--app-control-h: 52px; /* fields, selects, full-width form buttons [phone .va-go] */
--app-control-h-sm: 40px; /* = landing .btn-sm */
--app-radius-control: 14px; /* [phone .va-input] fields, selects, panels */
--app-radius-card: 22px; /* the white card [phone .va-urlbar, landing .scanner] */
--app-shadow-card: 0 0 0 1px rgba(11, 26, 34, .05), 0 32px 80px -32px rgba(4, 18, 27, .55);
--app-ring: 0 0 0 1px var(--teal), 0 0 0 5px rgba(14, 124, 143, .16); /* [phone .va-input focus] fields on white */
}
/* ------------------------------------------------------------ utilities */
.app-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.app-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-i-dot { fill: currentColor; stroke: none; }
.app-muted { color: var(--app-ink-muted); }
.app-secondary { color: var(--ink-2); }
.app-secondary b { color: var(--ink); font-weight: 600; }
.app-small { font-size: var(--fs-small); }
.app-stack { display: grid; gap: var(--app-space-4); align-content: start; }
.app-link { color: var(--app-teal-ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.app-link:hover { text-decoration-thickness: 2px; }
/* The landing pads the page bottom on phones for its sticky call to action. App pages have no such bar.
The one allowed override of a landing rule, until landing follow-up L11 scopes that padding (amendment A3). */
@media (max-width: 760px) { body.app { padding-bottom: 0; } }
/* Long unbroken strings, such as email addresses, store domains and URLs, wrap instead of widening cards and
strips (amendment A4). overflow-wrap is inherited, so this one rule covers every app element; the landing sets
none. Flex and grid children that show a user-provided string may also shrink below their longest word. */
body.app { overflow-wrap: anywhere; }
/* Text shown verbatim (emails, domains, URLs; ui/verbatim.tsx, the fields that take them, and a failure's title and
explanation, which carry the domain in the server's words): no contextual alternates, which in Inter draw an "x"
between two digits as "×". The fields' own rule below sets `font: inherit`, which resets them, so the fields are
named here with a more specific selector (e.g. the store domains text area, the tracking link's field). */
.app-verbatim, .app-command-field input, .app-input[type='email'], .app-input.app-verbatim, .app-textarea.app-verbatim { font-variant-ligatures: no-contextual; }
/* ------------------------------------------------------------------ the stage */
/* A's stage: the landing hero's dark mesh as a still frame of its own shader (/assets/mesh.webp, 12 KB),
darkened for AA text. It fades in once on arrival; reduced motion skips it (the landing's rule).
The stage clips what reaches past it (the mesh, and the paper .app-rise::before paints below the card) with
`overflow: clip`, which makes no scroll container: with `hidden`, following an in-page link (an error summary's)
scrolled the stage itself, and the title and the summary above could not be scrolled back. `hidden` stays first
for browsers without `clip`. */
.app-stage { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; background: var(--dark); color: var(--on-dark); overflow: hidden; overflow: clip; }
.app-stage :focus-visible { outline-color: var(--app-teal-on-dark); }
.app-stage-mesh { position: absolute; inset: 0; z-index: -1; background: url(/assets/mesh.webp) 38% 30% / cover no-repeat, var(--dark); animation: app-arrive 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.app-stage-mesh::before { content: ''; position: absolute; inset: 0; background:
radial-gradient(58% 46% at 50% 46%, rgba(4, 18, 27, .5), rgba(4, 18, 27, 0) 100%),
linear-gradient(180deg, rgba(4, 18, 27, .74) 0%, rgba(4, 18, 27, .5) 30%, rgba(4, 18, 27, .56) 62%, rgba(4, 18, 27, .9) 100%); }
.app-stage-mesh::after { content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml;utf8,"); }
@keyframes app-arrive { from { opacity: 0; } }
/* T2 and T3 keep the idle screen's mesh size (one viewport), so the top of every page looks like the arrival. The
preflight island switches from T1 to T2 in the browser, so its stage is matched by its content too. */
.app-stage-flow .app-stage-mesh, .app-stage-band .app-stage-mesh, .app-stage:has(.app-flow) .app-stage-mesh { bottom: auto; height: 100svh; }
/* ----------------------------------------------------- email verification notice */
/* A slim strip at the very top of the stage: seen first, never between the title and the command. "Resend
verification email" posts a form, and a