@incodetech/prizma-core-screens 0.1.0

package/src/FaceMatchLayout.css

@@ -0,0 +1,264 @@
+/* Face Match — module layout additions.
+ *
+ * ONLY what the foundation archetypes do not already own. Every value is a
+ * token (or token arithmetic); each departure from GUIDELINES.md or from the
+ * module Figma carries a numbered row in DEVIATIONS.md (Wave 2 section).
+ *
+ * The foundation supplies everything else: the shell, the nav offset, the 24px
+ * content padding, the flex middle, the CTA band recipe and the footer tag
+ * (ScreenLayout.css). Nothing there is re-declared here.
+ */
+
+/* ── Face comparison cluster (faceMatch.comparison.*) ────────────────────────
+ * The module's one genuinely new composition: two or three captured portraits
+ * as circles, each with a label callout above it, that CONVERGE into a rosette
+ * in the `matching` state.
+ *
+ * Anatomy, measured off the purple 390 sections: photo circle 160, top row gap
+ * 15 → Spacing/16 (1px, within Figma's off-grid rounding), converged vertical
+ * offset 80.25 → `2 × Spacing/40` (0.25px, sub-pixel). The converged HORIZONTAL
+ * overlap is 44 and stays a literal — approximating it to 40 was a visible 4px
+ * error per seam. DEVIATIONS.md #FM-20, #FM-21.
+ *
+ * The circles themselves are HOST-supplied content (the same contract as
+ * `camera` on the capture screens): Core has no captured-photo primitive, so
+ * this layer only masks and positions what the host passes in — no Core
+ * primitive is re-implemented. DEVIATIONS.md #FM-22. */
+
+.face-match-cluster {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  /* The disc's diameter, named once. `--matching`'s rosette and `--animated`'s
+   * convergence both have to know it, and a second literal is a second thing to
+   * forget. Still a design literal, still DEVIATIONS #FM-22 — just not repeated. */
+  --face-match-photo: 160px;
+  /* Half the distance between two neighbouring discs: what one of them has to
+   * travel to reach the pair's centre line. */
+  --face-match-half-step: calc((var(--face-match-photo) + var(--prizma-spacing-16)) / 2);
+}
+
+.face-match-cluster__row {
+  position: relative; /* z-index stacking context for the overlap order */
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: var(--prizma-spacing-16); /* Figma 15 — nearest token (DEVIATIONS #FM-20) */
+}
+
+/* Paint order of the converged rosette, per the purple `matching` sections:
+ * the lower row sits above the top row, and within a row the first photo sits
+ * above the second. */
+.face-match-cluster__row + .face-match-cluster__row {
+  z-index: 2;
+}
+
+.face-match-cluster__face {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* label callout → photo. Figma draws 12px between the callout tail tip and
+   * the circle; Core's Tooltip owns the tail itself. */
+  gap: var(--prizma-spacing-12);
+}
+
+.face-match-cluster__row > .face-match-cluster__face:first-child {
+  z-index: 1;
+}
+
+/* The photo disc. 160×160 is geometry fixed by design (the same class of
+ * literal as the capture ring's proportions — GUIDELINES §2); no token exists
+ * for component geometry. DEVIATIONS.md #FM-22. */
+.face-match-cluster__photo {
+  flex-shrink: 0;
+  width: var(--face-match-photo);
+  height: var(--face-match-photo);
+  border-radius: var(--prizma-border-radius-full);
+  overflow: hidden;
+  background: var(--prizma-surface-neutral-100);
+}
+
+.face-match-cluster__photo > img,
+.face-match-cluster__photo > video,
+.face-match-cluster__photo > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Converged (`*.matching` / `*.threeFacesMatching`): the callouts are gone and
+ * the circles overlap.
+ *
+ * The horizontal overlap is a DESIGN LITERAL, not token arithmetic. Figma draws
+ * 44px; the spacing scale stops at 40, so `calc(-1 * Spacing/40)` would render a
+ * visibly wrong rosette (4px per seam). Geometry fixed by design and absent from
+ * the token set is hardcoded with justification — the same treatment as the
+ * 160px photo disc below and the capture ring proportions (GUIDELINES §2).
+ * DEVIATIONS.md #FM-20. */
+.face-match-cluster--matching .face-match-cluster__row {
+  gap: 0;
+}
+
+.face-match-cluster--matching .face-match-cluster__face + .face-match-cluster__face {
+  margin-left: -44px; /* hardcoded — Figma converged overlap; no token (verified absent) */
+}
+
+.face-match-cluster--matching .face-match-cluster__row + .face-match-cluster__row {
+  margin-top: calc(-2 * var(--prizma-spacing-40));
+}
+
+/* ── The comparison, moving (`phase` on FaceMatchComparisonScreen) ───────────
+ *
+ * Everything above draws the comparison STILL — the frames the Figma sections
+ * are, and what the Screens grid needs. This draws the same cluster MOVING,
+ * which is the thing Face Match actually is: the module has no camera and no
+ * control, so the animation is not decoration on top of the screen, it IS the
+ * screen. A still of it can only ever be a frame of the film.
+ *
+ * WHERE THE NUMBERS COME FROM. Not from a judgement call and not from the
+ * Figma sections (they carry no motion) — from the SHIPPED WEB SDK, which has
+ * animated this module since v1 and whose constants were never written into the
+ * token SOT. `ui/src/modules/face-match/animation.css`, read 2026-09-01:
+ *
+ *     ENTRANCE_DELAY 450 · ENTRANCE_DURATION 800 · TOOLTIP_DURATION 1600
+ *     ANIMATION_DELAY 2850 · ANIMATION_DURATION 800 · TRANSITION_DELAY 200
+ *     easing cubic-bezier(.25,.46,.45,.94)
+ *
+ * They are now `Face match/Motion/*` (core/tokens/tokens/components.json), so
+ * the SOT states what production does and a motion designer re-times the module
+ * by moving a token rather than by finding this file. DEVIATIONS #FM-26.
+ *
+ * WHY TRANSITIONS AND NOT KEYFRAMES, which is what the SDK uses. A keyframe
+ * runs once, on mount, and can never be replayed, stepped into or stepped back
+ * out of. The Lab's prototype mounts a screen ONCE for a whole run and steps its
+ * props (apps/core-lab/src/lab/prototype/types.ts), so a mount animation would
+ * play on arrival and then be gone — "Start over" would show a cluster that is
+ * simply already there. Re-expressed as three PHASES the host names, the same
+ * choreography plays forwards, backwards, from a seek and from a restart, and
+ * the export can photograph it at any instant. The timeline is identical:
+ *
+ *     phase="arriving"    the module has opened; the discs are still outside
+ *                         the screen.                                 hold 450
+ *     phase="comparing"   the discs travel in (800), and once they are seated
+ *                         the callouts name them (800, delayed 800). hold 1600
+ *     phase="converged"   the callouts leave (800), and then the discs run
+ *                         together into one and go with them (800,
+ *                         delayed 800), + the module's 200 beat.      hold 1800
+ *
+ * 450 + 1600 + 1800 = 3850ms to the verdict — the SDK's own figure.
+ *
+ * `--matching` (the static rosette) and `--animated` are mutually exclusive by
+ * construction: the screen emits one or the other, never both. The rosette is a
+ * FRAME OF THIS, caught partway through the last phase — which is why the
+ * moving version does not stop there. */
+
+.face-match-cluster--animated .face-match-cluster__face {
+  will-change: transform, opacity;
+  transition:
+    transform var(--prizma-face-match-motion-photo-entrance)
+      var(--prizma-face-match-motion-photo-easing),
+    opacity var(--prizma-face-match-motion-photo-entrance)
+      var(--prizma-face-match-motion-photo-easing);
+}
+
+/* The callouts are kept in the DOM in every phase — they have to be there to
+ * fade — so their box holds the cluster's height steady while they come and go.
+ * Half the cycle each way: the token names the whole life of the label. */
+.face-match-cluster--animated .face-match-cluster__label {
+  transition: opacity calc(var(--prizma-face-match-motion-label-cycle) / 2)
+    var(--prizma-motion-easing-linear);
+  /* Seated last: the discs arrive first, and only then are they named. */
+  transition-delay: var(--prizma-face-match-motion-photo-entrance);
+}
+
+/* ── phase="arriving" ────────────────────────────────────────────────────────
+ * Off the sides, and — for the third face — off the bottom. 200px is the SDK's
+ * own throw: far enough that a disc is fully outside a 390 screen, near enough
+ * that it does not read as flying. A design literal, like the disc itself. */
+
+.face-match-cluster--arriving .face-match-cluster__face,
+.face-match-cluster--arriving .face-match-cluster__label {
+  opacity: 0;
+}
+
+.face-match-cluster--arriving
+  .face-match-cluster__row:first-child
+  > .face-match-cluster__face:first-child {
+  transform: translateX(-200px);
+}
+
+.face-match-cluster--arriving
+  .face-match-cluster__row:first-child
+  > .face-match-cluster__face:last-child {
+  transform: translateX(200px);
+}
+
+/* The third face — the NFC portrait's selfie, or the second document's — comes
+ * up from below rather than in from a side, because there is no side left. */
+.face-match-cluster--arriving
+  .face-match-cluster__row
+  + .face-match-cluster__row
+  > .face-match-cluster__face {
+  transform: translateY(200px);
+}
+
+/* ── phase="converged" ───────────────────────────────────────────────────────
+ * Every disc onto ONE centre, fading as it goes. Not the 44px rosette: the
+ * rosette is where this passes THROUGH at about two thirds, and stopping there
+ * would be stopping the sentence in the middle. The discs are gone by the end,
+ * which is what lets the verdict take the screen without anything being cleared
+ * away first. */
+
+.face-match-cluster--converged .face-match-cluster__face {
+  opacity: 0;
+  /* The labels go first; the discs wait for them to finish before moving. */
+  transition-delay: calc(var(--prizma-face-match-motion-label-cycle) / 2);
+}
+
+.face-match-cluster--converged .face-match-cluster__label {
+  opacity: 0;
+  transition-delay: 0ms;
+}
+
+.face-match-cluster--converged
+  .face-match-cluster__row:first-child
+  > .face-match-cluster__face:first-child {
+  transform: translateX(var(--face-match-half-step));
+}
+
+.face-match-cluster--converged
+  .face-match-cluster__row:first-child
+  > .face-match-cluster__face:last-child {
+  transform: translateX(calc(-1 * var(--face-match-half-step)));
+}
+
+/* Up by exactly its own height, which is the row above's height too (same face
+ * anatomy) — so the third disc lands concentric with the other two without this
+ * file having to know how tall a callout is. */
+.face-match-cluster--converged
+  .face-match-cluster__row
+  + .face-match-cluster__row
+  > .face-match-cluster__face {
+  transform: translateY(-100%);
+}
+
+/* The one honest thing a reduced-motion block can do here: Face Match's whole
+ * screen is the movement, so there is nothing to keep — the discs simply are
+ * where the phase says they are, and the module still reads. */
+@media (prefers-reduced-motion: reduce) {
+  .face-match-cluster--animated .face-match-cluster__face,
+  .face-match-cluster--animated .face-match-cluster__label {
+    transition-duration: 1ms;
+    transition-delay: 0ms;
+  }
+}
+
+/* ── Removed: the verdict snackbar row ───────────────────────────────────────
+ * `.face-match-band__snackbar` positioned the pill inside the CTA band. The
+ * verdict screens now render the `PrizmaResultScreen` archetype and the pill
+ * rides its `children` slot, where the centred column supplies the gap —
+ * DEVIATIONS #F-33.
+ */

package/src/FaceMatchResultScreen.tsx

@@ -0,0 +1,117 @@
+import React, { forwardRef } from 'react';
+import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  FaceMatchLivenessVerdict,
+  FaceMatchResultStatus,
+  FaceMatchStrings,
+} from './FaceMatchStrings';
+import './ScreenLayout.css';
+
+export interface FaceMatchResultScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'children' | 'bandContent' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `matched` / `notMatched` / `liveness`
+   *  slices (+ shared labels). */
+  strings: FaceMatchStrings;
+  /** `matched` → the purple `faceMatch.success.*` family (positive status icon);
+   *  `notMatched` → `faceMatch.error.*` (negative). Default `'matched'`. */
+  status?: FaceMatchResultStatus;
+  /**
+   * The `*.livenessSuccess` / `*.livenessFailed` halves of both families. When
+   * set, Figma adds the liveness subtitle under the title and a verdict Snackbar
+   * above the CTA; the plain `matched` / `notMatched` sections carry neither.
+   */
+  liveness?: FaceMatchLivenessVerdict;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Face Match — match verdict, built on the `PrizmaResultScreen` archetype
+ * (GUIDELINES.md §6-F). Figma: ALL SIX purple result sections —
+ * `faceMatch.success.{matched,livenessSuccess,livenessFailed}` and
+ * `faceMatch.error.{notMatched,livenessSuccess,livenessFailed}` — which share
+ * one identical layout and differ only by status icon, copy and the presence of
+ * the verdict Snackbar. One screen, six variants; splitting it into a success
+ * and an error component would be pure duplication.
+ *
+ * Layout measured off the purple 390 sections (CONTENT frame, 650 tall):
+ * nav 0→44 · Title vertically centered in the flexible middle · CTA band at the
+ * bottom, Button 56 + Spacing/16 + Tag. The centered block is exactly Core's
+ * `PrizmaTitle` (icon slot → Spacing/16 → H2 → Spacing/12 → H5), so nothing is
+ * re-implemented; the screen only chooses the status and supplies copy.
+ *
+ * This file used to compose the foundation shell by hand (143 lines) because no
+ * archetype offered a centered status block WITH a CTA band — the gap reported as
+ * DEVIATIONS #FM-24, now closed by `PrizmaResultScreen`. The verdict pill rides
+ * in the archetype's `bandContent` slot, so it sits INSIDE the CTA band rather
+ * than immediately above the CTA where Figma draws it (#F-33).
+ *
+ * The status marks are Core's outline bank icons via `PrizmaTitle.icon`; the
+ * module Figma still draws two-tone filled discs (DEVIATIONS.md #15, unchanged
+ * from Wave 1). The verdict pill is Core's `PrizmaSnackbar`, which always
+ * carries its state glyph — Figma's pill has none (DEVIATIONS.md #FM-23).
+ */
+export const FaceMatchResultScreen = forwardRef<HTMLDivElement, FaceMatchResultScreenProps>(
+  (
+    {
+      strings,
+      status = 'matched',
+      liveness,
+      screenId = liveness
+        ? `face-match-${status === 'matched' ? 'matched' : 'not-matched'}-liveness-${liveness}`
+        : status === 'matched'
+        ? 'face-match-matched'
+        : 'face-match-not-matched',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const result = status === 'matched' ? strings.matched : strings.notMatched;
+    // Figma gives the subtitle ONLY to the two liveness halves of each family;
+    // the plain `matched` / `notMatched` sections are title-only. Gated here (the
+    // same way Face Capture gates its attempts line on `exhausted`) so a host
+    // whose locale pack always carries the line still renders both designs.
+    const description = liveness ? strings.liveness.description : undefined;
+
+    return (
+      <PrizmaResultScreen
+        ref={ref}
+        status={status === 'matched' ? 'success' : 'error'}
+        title={result.title}
+        subtitle={description}
+        ctaLabel={result.ctaLabel}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        // Figma puts the verdict pill INSIDE the CTA band, Spacing/32 above the
+        // button — the band's own 16 plus the slot's 16 (FM-23).
+        bandContent={
+          liveness ? (
+            <PrizmaSnackbar
+              state={liveness === 'success' ? 'success' : 'error'}
+              contentResizing="hug"
+            >
+              {liveness === 'success'
+                ? strings.liveness.successLabel
+                : strings.liveness.failedLabel}
+            </PrizmaSnackbar>
+          ) : null
+        }
+        {...shell}
+      />
+    );
+  },
+);
+FaceMatchResultScreen.displayName = 'FaceMatchResultScreen';
+
+export default FaceMatchResultScreen;

package/src/FaceMatchStrings.ts

@@ -0,0 +1,95 @@
+// Face Match module — copy contract.
+//
+// Every Face Match screen receives the SAME `strings: FaceMatchStrings` object
+// (rule: all copy via props, no hardcoded English — GUIDELINES.md §9). The
+// object is the module's locale pack: one instance drives the whole flow, which
+// is what the FlowPlayer steps through. Sample copy lives only in previews /
+// host apps.
+//
+// Authoritative screen list: the PURPLE parent sections of the Face Match Figma
+// file (BXeJ6Q3TXahJVWEt8QoMVA, page 18:19332) — four sections, 12 variants:
+//   faceMatch.comparison         initialState · matching · nfc ·
+//                                firstAndSecondID · threeFacesMatching
+//   faceMatch.comparisonCompact  matching
+//   faceMatch.error              notMatched · livenessSuccess · livenessFailed
+//   faceMatch.success            matched · livenessSuccess · livenessFailed
+//
+// Face Match ships NO tutorial and NO capture stage of its own: the selfie and
+// the document images arrive from the modules upstream (Face Capture / ID
+// Capture / NFC). That is why no Face Capture screen is reused here — see
+// DEVIATIONS.md #FM-24.
+
+/**
+ * Which purple `faceMatch.comparison.*` photo set to render.
+ * - `selfieId`         — 2 photos: the selfie and the ID portrait.
+ * - `nfc`              — 3 photos: the chip portrait + the ID portrait on the
+ *                        top row, the selfie below.
+ * - `firstAndSecondID` — 3 photos: two ID portraits on the top row, the selfie
+ *                        below. Same layout as `nfc`; only the labels differ.
+ */
+export type FaceMatchComparisonVariant = 'selfieId' | 'nfc' | 'firstAndSecondID';
+
+/** The two result families: `faceMatch.success.*` and `faceMatch.error.*`. */
+export type FaceMatchResultStatus = 'matched' | 'notMatched';
+
+/** The `*.livenessSuccess` / `*.livenessFailed` halves of both result families. */
+export type FaceMatchLivenessVerdict = 'success' | 'failed';
+
+/** Title + CTA of one result family. Both families share the SAME layout, so
+ *  they are variants of one screen (FaceMatchResultScreen), not two screens. */
+export interface FaceMatchResultStrings {
+  /** H2 status line ("Matched!" / "Faces do not match"). */
+  title: string;
+  /** CTA label ("Continue"). */
+  ctaLabel: string;
+}
+
+export interface FaceMatchStrings {
+  /** Accessible name for the logo nav region (i18n — no baked-in English). */
+  navLabel?: string;
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+
+  /** faceMatch.comparison.* — one H2 for all five sections, plus the tooltip
+   *  labels the variants swap above each photo. */
+  comparison: {
+    /** H2 ("Verifying identity") — identical across the five sections. */
+    title: string;
+    /** Label above the captured selfie. Used by every variant. */
+    selfieLabel: string;
+    /** Label above the ID portrait (`selfieId` and `nfc`). */
+    idLabel: string;
+    /** `nfc` only — the portrait read off the document chip. */
+    nfcLabel?: string;
+    /** `firstAndSecondID` only — first document. */
+    firstIdLabel?: string;
+    /** `firstAndSecondID` only — second document. */
+    secondIdLabel?: string;
+  };
+
+  /** faceMatch.comparisonCompact.matching — the photo-less matching state. */
+  comparisonCompact: {
+    /** H2 ("Checking your photos"). */
+    title: string;
+    /** H5 below it ("This may take a few seconds"). */
+    description?: string;
+  };
+
+  /** faceMatch.success.* */
+  matched: FaceMatchResultStrings;
+  /** faceMatch.error.* */
+  notMatched: FaceMatchResultStrings;
+
+  /** The liveness verdict slice — the `*.livenessSuccess` / `*.livenessFailed`
+   *  variants of BOTH result families. Figma gives those (and only those) a
+   *  subtitle and a verdict Snackbar above the CTA, which is why the subtitle
+   *  belongs to this slice rather than to `matched` / `notMatched`. */
+  liveness: {
+    /** H5 below the result title ("User already exists"). */
+    description?: string;
+    /** Snackbar copy on `*.livenessSuccess` ("Liveness success"). */
+    successLabel: string;
+    /** Snackbar copy on `*.livenessFailed` ("Liveness failed"). */
+    failedLabel: string;
+  };
+}

package/src/FormScreen.css

@@ -0,0 +1,78 @@
+/* FormScreen — Archetype E field stack (GUIDELINES.md §6-E).
+ *
+ * Title block → field stack is Spacing/32, measured off Phone Input's purple
+ * sections (the `middle container` of every `phoneNumber.verify.*` /
+ * `phoneNumber.OTP.*` frame draws a flat 32 between the Title and
+ * `Input / Combined`). The archetype shipped Spacing/24 from the Studio-era
+ * guidelines before any module consumed it; Phone Input is the first real
+ * consumer, so the value is corrected here — in the ONE place it exists —
+ * rather than overridden per module. DEVIATIONS #PI-2.
+ */
+
+/* The two offsets are token-driven custom properties so a module whose purple
+ * section draws a different rhythm can SELECT another step of the spacing scale
+ * instead of re-declaring a value in its own stylesheet (the forbidden
+ * per-module override). The fallbacks are the measured Phone Input values, so
+ * every existing Form consumer is byte-identical.
+ *
+ * Data Sharing Consent is the first module to move them: `User Consent`
+ * (27151:321) draws a flat Spacing/24 down the whole middle column — title
+ * 0→28, disclosure at y=52 (24 below), disclosure ends 304, first consent card
+ * at 328 (24) — and the tall variant (29645:5306) repeats 24 between every
+ * card (459 → 557 → 655, each 74 tall). DEVIATIONS #DSC-1. */
+.prizma-form-screen__fields {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pfs-fields-gap, var(--prizma-spacing-16));
+  padding-top: var(--pfs-fields-offset, var(--prizma-spacing-32));
+}
+
+/* ── Scrolling field stack ───────────────────────────────────────────────────
+ * Screens are authored at 390×844 and never reflow (DEVIATIONS #17), but some
+ * Form sections draw a middle column taller than the frame and let it pan:
+ * CURP's six labelled fields, Data Sharing Consent's disclosure + N consent
+ * cards, and the long-form / signature / eKYB sections. Without an overflow
+ * behaviour the surplus is silently clipped by `ScreenShell`'s
+ * `overflow: hidden` and paints over the sibling CTA on the way out.
+ *
+ * Five modules hand-rolled this rule in their own stylesheets; it belongs here
+ * once, driven by `scrollFields` on `PrizmaFormScreen`.
+ *
+ * The `margin-bottom` is the frame's own breathing room, and it is what makes
+ * the cut read as a cut: `29645:5306` clips the column at y=698 and starts the
+ * CTA band there with 16px of internal padding, so the sliced consent card is
+ * followed by clear surface before the button rather than the button appearing
+ * painted on the card's cut edge. It is a MARGIN, not padding — padding-bottom
+ * sits inside a scroll container's padding box and never moves the clip edge. */
+.prizma-form-screen__fields--scroll {
+  overflow-y: auto;
+  margin-bottom: var(--prizma-spacing-16);
+}
+
+/* Rows in a scrolling stack keep their intrinsic height. A flex item defaults to
+ * `flex-shrink: 1`, so once the stack overflows the column SQUASHES every child
+ * that has no explicit floor — Qualified Signature's document row collapsed from
+ * 74px to 18px and, because `PrizmaCardDocumentContainer` is `overflow: hidden`,
+ * its 56px View button was clipped away entirely (owner-reported 2026-08-19).
+ * The identical row rendered correctly on the non-scrolling screens, which is
+ * what made it look like a Card bug rather than a layout one.
+ *
+ * Fixed here, for every child, rather than in Core: the flaw is the scroll
+ * container's, and it applies to any row a module puts in one (cards, fields,
+ * consent rows) — not just this component. DEVIATIONS #QS-1. */
+.prizma-form-screen__fields--scroll > * {
+  flex-shrink: 0;
+}
+
+/* CTA column: primary, then the optional tertiary link below it. Core's
+ * `PrizmaButtonGroup` owns this primary → tertiary rhythm at Spacing/12, so the
+ * same value is used here rather than a new one (the archetype composes two
+ * Buttons directly because the group cannot forward `loadingLabel` — the open
+ * Core request logged in DEVIATIONS #F-32). */
+.prizma-form-screen__cta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-12);
+}