@incodetech/prizma-core-screens 0.1.0

package/src/VideoSelfieFlipCameraScreen.tsx

@@ -0,0 +1,88 @@
+import React, { forwardRef } from 'react';
+import { IconCameraFlip } from '@incodetech/prizma-core-icons';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { VideoSelfieStrings } from './VideoSelfieStrings';
+import './ScreenLayout.css';
+
+export interface VideoSelfieFlipCameraScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'children' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `flipCamera` slice. */
+  strings: VideoSelfieStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Video Selfie — the camera-swap interstitial, built on the Result archetype
+ * (GUIDELINES.md §6-F). Figma: purple section `video selfie - flip camera
+ * 7.0 - switch to front`.
+ *
+ * The sibling of the flip-ID screen and deliberately its opposite: the camera
+ * is still open, so the section is drawn on the DARK surface with white copy.
+ * The archetype takes `theme="dark"` straight from `PrizmaScreenShell` — the
+ * same switch `DocumentCaptureCaptureScreen` uses — so the Title and every
+ * other token-bound child flips THROUGH the design system rather than around it
+ * (DEVIATIONS #DC-32). No hardcoded white anywhere.
+ *
+ * The mark is the canonical bank's `IconCameraFlip` in the archetype's own
+ * `glyph` slot (`PrizmaTitle.icon` only accepts status | spinner | none —
+ * DEVIATIONS #10), wrapped in the foundation's `__glyph` class so no module CSS
+ * is needed for it. No CTA and no verified tag: the section draws neither.
+ *
+ * Figma also draws the journey stepper at the top of this section. Archetype F
+ * has no slot for it and this module does not hand-roll one — reported.
+ */
+export const VideoSelfieFlipCameraScreen = forwardRef<
+  HTMLDivElement,
+  VideoSelfieFlipCameraScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'video-selfie-flip-camera',
+      /* A camera screen (dark, feed open, stepper drawn) — the chrome
+         contract drops the LOGO and keeps the footer (#VS-15). */
+      showHeader = false,
+      showFooter = true,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaResultScreen
+      ref={ref}
+      theme="dark"
+      showHeader={showHeader}
+      showFooter={showFooter}
+      glyph={
+        <span
+          className={[
+            'prizma-screen-layout__glyph',
+            'prizma-screen-layout__glyph--neutral',
+            overrides?.align === 'left' ? 'prizma-screen-layout__glyph--left' : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          <IconCameraFlip size="l" />
+        </span>
+      }
+      title={strings.flipCamera.title}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+VideoSelfieFlipCameraScreen.displayName = 'VideoSelfieFlipCameraScreen';
+
+export default VideoSelfieFlipCameraScreen;

package/src/VideoSelfieFlipIdScreen.tsx

@@ -0,0 +1,74 @@
+import React, { forwardRef } from 'react';
+import { PrizmaIllustrationIdFlip } from '@incodetech/prizma-core-web/illustration-id-flip';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { VideoSelfieStrings } from './VideoSelfieStrings';
+import './ScreenLayout.css';
+
+export interface VideoSelfieFlipIdScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'children' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `flipId` slice. */
+  strings: VideoSelfieStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Video Selfie — the flip interstitial between the two document sides, built on
+ * the Result archetype (GUIDELINES.md §6-F). Figma: purple section
+ * `video selfie - flip id 4.0 - default`.
+ *
+ * The module's shortest screen and the one moment the camera closes: a bare H2
+ * over the spinning-card artwork, no logo, no CTA (the flow advances itself),
+ * no verified tag and — alone among the camera-adjacent sections — no stepper.
+ * The archetype covers it exactly: `status="none"` for the bare title, the
+ * artwork in `children`, no `ctaLabel` so no band renders, `showHeader={true}`
+ * to drop the logo while still reserving the nav row so the offsets match every
+ * other screen (owner rule 2026-08-18), and `showFooter={true}` — the chrome is constant (#PI-8/#F-34) — because the
+ * section draws no tag.
+ *
+ * The artwork is Core's `PrizmaIllustrationIdFlip` in its `interstitial`
+ * variant — the card spinning inside the static circular arrows, exactly what
+ * this moment was designed for. Never redrawn here (§7, §10). Identical
+ * treatment to `IdCaptureFlipScreen`, which is the point: the same beat looks
+ * the same in every module.
+ */
+export const VideoSelfieFlipIdScreen = forwardRef<
+  HTMLDivElement,
+  VideoSelfieFlipIdScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'video-selfie-flip-id',
+      showHeader = true,
+      showFooter = true,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaResultScreen
+      ref={ref}
+      showHeader={showHeader}
+      showFooter={showFooter}
+      title={strings.flipId.title}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      <PrizmaIllustrationIdFlip variant="interstitial" />
+    </PrizmaResultScreen>
+  ),
+);
+VideoSelfieFlipIdScreen.displayName = 'VideoSelfieFlipIdScreen';
+
+export default VideoSelfieFlipIdScreen;

package/src/VideoSelfieIdCaptureScreen.tsx

@@ -0,0 +1,213 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import {
+  PrizmaIdCapture,
+  type PrizmaIdCaptureState,
+} from '@incodetech/prizma-core-web/id-capture';
+import { PrizmaLoadingSpinner } from '@incodetech/prizma-core-web/loading-spinner';
+import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
+import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  VideoSelfieDocumentType,
+    VideoSelfieIdErrorSeverity,
+  VideoSelfieIdSide,
+  VideoSelfieStrings,
+} from './VideoSelfieStrings';
+import './ScreenLayout.css';
+import './ViewfinderScreen.css';
+import './VideoSelfieLayout.css';
+
+/** Which purple stage section to render (groups 3, 5 and 6). */
+export type VideoSelfieIdCaptureState =
+  | 'default'
+  | 'shown'
+  | 'processing'
+  | 'allGood'
+  | 'error';
+
+/** Purple stage state → Core `PrizmaIdCapture` state. The frame border, the
+ *  analyzing sweep, the scrim and the encrypted row are ALL Core's. */
+const CAPTURE_STATE: Record<VideoSelfieIdCaptureState, PrizmaIdCaptureState> = {
+  default: 'empty',
+  shown: 'filled',
+  processing: 'analyzing',
+  allGood: 'success',
+  error: 'error',
+};
+
+/** Which beat of the seven-step journey each side occupies — front is step 2
+ *  (the microphone grant is step 1), back is step 3. */
+const STEP: Record<VideoSelfieIdSide, 2 | 3> = { front: 2, back: 3 };
+
+export interface VideoSelfieIdCaptureScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+  /** Module copy — this screen reads the `idCapture` slice (+ shared labels). */
+  strings: VideoSelfieStrings;
+  /** Which face of the document. Drives the stepper beat only — the frame
+   *  geometry is identical (Figma draws no title on these sections). */
+  side?: VideoSelfieIdSide;
+  /** Which document the journey collects — Core `PrizmaIdCapture.type` and the
+   *  Stepper's own `documentType`. Default `id`. */
+  documentType?: VideoSelfieDocumentType;
+  /** Which purple stage section to render. Default `default`. */
+  state?: VideoSelfieIdCaptureState;
+  /** Whether the rejection invites a retry (`6.1`/`6.3`) or is terminal
+   *  (`6.2`/`6.4`). Read only when `state="error"`. */
+  errorSeverity?: VideoSelfieIdErrorSeverity;
+  /** Live camera feed (<video>) or sample still (<img>) behind the frame. */
+  camera?: ReactNode;
+  /** The captured document still, for the states Core draws one in. */
+  still?: ReactNode;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Video Selfie — the document stage (Archetype D, GUIDELINES.md §6-D; always
+ * dark). ONE screen for TWELVE purple sections: `id capture front 3.0–3.3`,
+ * `id capture back 5.0–5.3` and every `id capture … errors 6.1–6.4` variant.
+ * They are `side` × `state` × `errorSeverity` variants of Core's
+ * `PrizmaIdCapture`, which is exactly how the component is axed.
+ *
+ * Composed like `IdCaptureStageScreen` / `DocumentCaptureCaptureScreen`: the
+ * feed runs full-bleed on `.prizma-viewfinder__surface` and
+ * `mode="overlay" scrim` cuts a transparent window through the veil, so Core
+ * owns the window, the tokenized scrim, the four border treatments, the
+ * analyzing sweep and the encrypted row. None of it is re-implemented (§7).
+ *
+ * Two things this module's Figma does that the foundation does not model, both
+ * reported rather than silently reshaped:
+ *
+ * - **The journey stepper.** Every camera section draws Core's `PrizmaStepper`
+ *   in the band the logo nav normally occupies, and it is the ONLY difference
+ *   between `3.0` and `5.0` — drop it and the front and back defaults render
+ *   identically. No archetype has a slot for it. This screen owns its whole
+ *   composition (archetype D is a recipe, not a component), so the band lives
+ *   in `VideoSelfieLayout.css` and carries the foundation's own
+ *   `--pcs-status-bar` reserve — no new number. The archetype-based screens of
+ *   this module ship WITHOUT the stepper rather than growing a second copy.
+ *
+ * - **The status card.** Figma floats a dark rounded card OVER the document
+ *   ("Processing…", "All good!", "Name verification failed, try again"). Core
+ *   ships no such container, and inventing one is forbidden (rule 1), so the
+ *   message rides in the band UNDER the frame using Core's own parts — the
+ *   `PrizmaLoadingSpinner` for the in-flight beat and `PrizmaSnackbar`
+ *   (`success` / `error`) for the verdicts. Core's frame border already carries
+ *   the verdict colour, so nothing is lost but the overlap.
+ *
+ * No logo and NO encrypted row (the verified tag IS kept — capture screens drop only the logo, #VS-3): all twenty-four sections draw
+ * nothing at all between the bottom of the document frame and the bottom of the
+ * screen (GUIDELINES §1 — follow the module's section, not the default). Core's
+ * `showEncryptedLabel` is therefore pinned `false`: it is a `PrizmaIdCapture`
+ * default that other modules' Figma does draw, and leaving it on painted a lock
+ * + "All data is encrypted" row on every state of this stage. The label was
+ * dropped from `VideoSelfieStrings` with it — no other screen in the module
+ * reads one.
+ */
+export const VideoSelfieIdCaptureScreen = forwardRef<
+  HTMLDivElement,
+  VideoSelfieIdCaptureScreenProps
+>(
+  (
+    {
+      strings,
+      side = 'front',
+      documentType = 'id',
+      state = 'default',
+      errorSeverity = 'tryAgain',
+      camera,
+      still,
+      screenId = `video-selfie-id-capture-${side}-${state}`,
+      overrides,
+      onAction,
+      className,
+      ...shell
+    },
+    ref,
+  ) => {
+    const errorLabel = strings.idCapture.errors[errorSeverity];
+
+    return (
+      <PrizmaScreenShell ref={ref} dark className={className} {...shell}>
+        <div className="prizma-viewfinder__surface">{camera}</div>
+        <div className="video-selfie-stepper">
+          <PrizmaStepper
+            steps={7}
+            currentState={STEP[side]}
+            documentType={documentType}
+            completedValueText={strings.stepperCompletedLabel}
+          />
+        </div>
+        <div
+          className={[
+            'prizma-viewfinder__content',
+            overrides?.align === 'left' ? 'prizma-viewfinder__content--left' : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          <div className="video-selfie-band" />
+          <PrizmaIdCapture
+            type={documentType}
+            state={CAPTURE_STATE[state]}
+            isVertical
+            mode="overlay"
+            scrim
+            showEncryptedLabel={false}
+            still={still}
+          />
+          {/* Centred ON the frame, not below it — `3.2`/`5.2` put the spinner
+              and its caption over the document (DEVIATIONS #VS-7). */}
+          {state === 'processing' ? (
+            <div className="video-selfie-stage-status">
+              <PrizmaLoadingSpinner
+                showTitle
+                titleText={strings.idCapture.processingLabel}
+                loadingLabel={strings.idCapture.processingLabel}
+              />
+            </div>
+          ) : null}
+          {/* `3.3`/`5.3` and every `6.x` draw the verdict in the SAME dark card,
+              centred on the document, as `3.2`/`5.2` draw the spinner — three
+              identical Figma treatments had become two different ones once the
+              spinner moved (owner QA 2026-08-19). DEVIATIONS #VS-13. */}
+          {state === 'allGood' || state === 'error' ? (
+            <div className="video-selfie-stage-status">
+              {state === 'allGood' ? (
+                <PrizmaSnackbar state="success" role="status">
+                  {strings.idCapture.successLabel}
+                </PrizmaSnackbar>
+              ) : (
+                /* NOT `isMultiline`: that modifier switches the row to
+                 `align-items: flex-start` so an icon anchors to the top of
+                 WRAPPED text. The rejection copy renders on ONE line, so it
+                 only pushed the icon 6.9px below the text centre
+                 (owner-reported 2026-08-19: "the text is not even aligned to
+                 the icon"). CORE REQUEST: have the Snackbar follow actual
+                 wrapping rather than a prop the caller has to predict.
+                 DEVIATIONS #VS-9. */
+                <PrizmaSnackbar state="error" role="alert">
+                  {errorLabel}
+                </PrizmaSnackbar>
+              )}
+            </div>
+          ) : null}
+        </div>
+        {/* Capture screens keep the FOOTER and drop only the logo — the chrome
+            contract in types.ts, and the same treatment `IdCaptureStageScreen`
+            gives its camera stage. The tag had been dropped entirely here, so
+            the attribution vanished on the module's densest screens
+            (owner-reported 2026-08-19). DEVIATIONS #VS-3. */}
+        <div className="prizma-screen-layout__footer">
+          <PrizmaTag label={strings.verifiedLabel} />
+        </div>
+      </PrizmaScreenShell>
+    );
+  },
+);
+VideoSelfieIdCaptureScreen.displayName = 'VideoSelfieIdCaptureScreen';
+
+export default VideoSelfieIdCaptureScreen;

package/src/VideoSelfieLayout.css

@@ -0,0 +1,259 @@
+/* Video Selfie — module layout additions.
+ *
+ * ONLY what the foundation archetypes do not already own, and nothing that
+ * re-declares an archetype offset. Every value is a token; each departure from
+ * GUIDELINES.md is reported back to the owner (see the module's screen files
+ * and the agent's `archetypeGaps` report).
+ *
+ * The module's structural discovery is that EVERY camera screen in the flow —
+ * the two document stages, the liveness ring, the two spoken steps and two of
+ * the generic errors — draws Core's `PrizmaStepper` in the band the logo nav
+ * normally occupies. No archetype has a slot for it (reported), so the three
+ * screens whose whole composition this module owns (the document stage and the
+ * spoken step) carry the band here.
+ */
+
+/* ── Journey stepper band ────────────────────────────────────────────────────
+ * Figma draws the Stepper as the first thing under the OS status bar — no logo
+ * row above it (`top content` frame, y=54, the Stepper 342 wide at x=24 on
+ * every section). The status-bar reserve is NOT a new number: it is the
+ * foundation's own `--pcs-status-bar` custom property, the same one
+ * `ScreenNav.css` and `ScreenLayout.css`'s `--no-nav` variant read, so a host
+ * that draws its own chrome still overrides it in one place.
+ *
+ * The horizontal inset is the content column's own Spacing/24 gutter — these
+ * screens have no `.prizma-screen-layout__content` wrapper (they are camera
+ * surfaces), so the band carries the same gutter Core's stage sits in.
+ *
+ * REPORTED: archetypes B (Capture), C (Processing), F (Result) and G (List)
+ * need a `stepper` slot in their nav band so the rest of the module's screens
+ * can draw it too. Nothing is worked around here — those screens ship WITHOUT
+ * the stepper rather than hand-rolling a second copy of this band. */
+.video-selfie-stepper {
+  flex-shrink: 0;
+  /* Above PrizmaIdCapture's overlay scrim, which is an absolutely positioned
+   * box-shadow that would otherwise paint over this non-positioned sibling —
+   * the same reason `IdCaptureLayout.css` lifts its bands. */
+  position: relative;
+  /* z-index 2, not 1: PrizmaIdCapture's HUD bands ALSO lift themselves to 1, so
+   * at the same level DOM order decided and the scrim painted over the stepper
+   * (owner-reported 2026-08-19: "the stepper is not correctly visible and looks
+   * hidden, probably it's behind the overlay"). 2 is the anchored-chrome layer
+   * ScreenLayout.css already reserves for the tag and shutter, which must sit
+   * above the scrim for exactly the same reason. DEVIATIONS #VS-2. */
+  z-index: 2;
+  margin-top: var(--pcs-status-bar, 47px);
+  padding-inline: var(--prizma-spacing-24);
+}
+
+/* ── The flexible bands around a camera stage ────────────────────────────────
+ * Pure flex distribution — NO padding, NO margin, no spacing token at all. The
+ * band exists so the HUD copy (the recording indicator, the stage's status
+ * message) sits in the air the stage leaves, instead of the module inventing an
+ * offset the archetype layer would otherwise own. */
+.video-selfie-band {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Recording indicator (10.1 / 11.1 / 11.3 / 11.5) ─────────────────────────
+ * A sound-wave glyph over the "Recording…" HUD line. The glyph ink is Core's
+ * own Static camera ink — the token `PrizmaCaptureManual` uses for the shutter
+ * — so it survives on the always-dark camera surface. The copy itself is the
+ * foundation's `.prizma-viewfinder__title`; nothing about it is re-declared. */
+.video-selfie-recording {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--prizma-spacing-16);
+  color: var(--prizma-icon-neutral-50-static);
+}
+
+/* ── The spoken-step card (groups 10 and 11) ─────────────────────────────────
+ * Figma layers Core's Modal over the live camera (`modal-light` instance). The
+ * safe presenter portals to `document.body`, which would escape the 390×844
+ * screen frame and the host's `transform: scale()`, so the screen owns the
+ * scrim and the panel and Core owns the card — the recipe Document Capture's
+ * method sheet already established (DEVIATIONS #DC-30). */
+.video-selfie-sheet-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background: var(--prizma-surface-overlay);
+}
+
+.video-selfie-sheet-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+  padding: var(--prizma-spacing-16);
+}
+
+/* The confirmation dialog (10.4) is a true centred modal over a dimmed screen,
+ * not a bottom-anchored card. */
+.video-selfie-sheet-panel--centered {
+  top: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* The card's verdict mark (10.3 / 11.x success). The glyph itself is the
+ * canonical bank icon Core's own `PrizmaTitle` uses for `status: success`
+ * (`IconStatusPositive` at Title/Icon/Size); only the INK is set here, because
+ * Core's per-status tint lives on `.prizma-title__status-icon--success` and
+ * `PrizmaModalContent` has no status slot to inherit it from. Same treatment
+ * `IdCaptureLayout.css` gives the camera stage's nav icon. */
+.video-selfie-sheet-status {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  color: var(--prizma-icon-status-positive);
+}
+
+.video-selfie-sheet-status > svg {
+  display: block;
+  width: var(--prizma-title-icon-size);
+  height: var(--prizma-title-icon-size);
+}
+
+/* ── The OS settings walk-through (2.5) ──────────────────────────────────────
+ * Two labelled sections inside archetype G's list slot: a numbered step list
+ * and a plain note. CONTENT typography only — the offset above the block is
+ * the archetype's `__list` Spacing/24 and is not touched. */
+.video-selfie-steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-16);
+  width: 100%;
+  text-align: start;
+}
+
+.video-selfie-steps__heading {
+  margin: 0;
+  font-family: var(--prizma-headline-family);
+  font-size: var(--prizma-headline-h5-font-size);
+  font-weight: var(--prizma-headline-h5-font-weight);
+  line-height: var(--prizma-headline-h5-line-height);
+  letter-spacing: var(--prizma-headline-h5-letter-spacing);
+  color: var(--prizma-text-body-800-primary);
+}
+
+.video-selfie-steps__note {
+  margin: 0;
+  font-size: var(--prizma-body-m-regular-font-size);
+  font-weight: var(--prizma-body-m-regular-font-weight);
+  line-height: var(--prizma-body-m-regular-line-height);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+/* ── The captured document inside the vertical frame ─────────────────────────
+ * Groups 3 and 5 draw the ID UPRIGHT in a portrait frame: the card is rotated a
+ * quarter turn so its long edge runs down the screen, exactly as `3.2` and
+ * `5.2` show it (the licence's text reads bottom-to-top).
+ *
+ * The sample scans are landscape (328×202). Dropped into a portrait frame with
+ * Core's `object-fit: cover` they scaled 4.2× to fill the height and lost their
+ * sides — the band of static the owner reported (2026-08-19: "horizontal and
+ * zoomed in to fit height, when it should be 90 degrees to fit the frame").
+ * Rotating instead of cropping keeps the whole document legible.
+ *
+ * `width`/`height` are swapped BEFORE the rotation because a rotated element
+ * still lays out on its pre-transform box: the image is sized to the frame's
+ * height × width, then turned, so it lands exactly frame-sized. No literal —
+ * both are percentages of whatever box Core gives it. DEVIATIONS #VS-6.
+ */
+/* The captured document is landscape (a card scan); the VERTICAL frame is
+ * portrait. `object-fit: cover` cropped its sides away and blew it up 4.2× —
+ * the band of static the owner reported. Figma turns the card a quarter turn
+ * instead, so the whole document stays legible with its text running up the
+ * side, exactly as `3.2` / `5.2` draw it.
+ *
+ * The image is sized to the frame's height × width BEFORE the turn, because a
+ * rotated element still lays out on its pre-transform box — so after the 90°
+ * it lands exactly frame-sized. Both values are percentages of whatever box
+ * Core gives it, so nothing is hardcoded. DEVIATIONS #VS-6. */
+.prizma-id-capture--vertical .prizma-id-capture__still {
+  /* A size container, so the image can be measured against the frame's OWN
+     box — `cqh`/`cqw` below are the only way to swap width and height without
+     writing either number down. The frame has definite dimensions, which is
+     what `container-type: size` requires. */
+  container-type: size;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}
+
+.prizma-id-capture--vertical .prizma-id-capture__still > img {
+  /* Swapped on purpose: the image is laid out at the frame's HEIGHT × WIDTH,
+     then turned a quarter, so it lands exactly frame-sized. */
+  width: 100cqh;
+  height: 100cqw;
+  max-width: none;
+  object-fit: cover;
+  transform: rotate(90deg);
+  transform-origin: center;
+}
+
+
+/* ── Stage status, centred ON the frame ──────────────────────────────────────
+ * `3.2` / `5.2` centre the spinner and its "Processing…" caption OVER the
+ * document, on the dark rounded container the design uses for stage status —
+ * not below the frame, where it sat (owner-reported 2026-08-19: "the processing
+ * loader looks broken in the bottom of the capture screen, it should be in the
+ * middle"). Absolutely positioned against the viewfinder content so the frame
+ * and the bands keep their own flex distribution untouched. DEVIATIONS #VS-7.
+ */
+.video-selfie-stage-status {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.video-selfie-stage-status > * {
+  padding: var(--prizma-spacing-16) var(--prizma-spacing-24);
+  border-radius: var(--prizma-border-radius-medium);
+  background: var(--prizma-surface-neutral-900-80-static);
+}
+
+/* ── Tutorial step rows ──────────────────────────────────────────────────────
+ * The <ul> Core's `PrizmaList` would normally supply. Composed here only
+ * because the wrapper's icon variants cap at six rows and the tutorial draws
+ * seven (#VS-8); the gap is the variant's OWN Spacing/12 — nothing new.
+ */
+.video-selfie-tutorial-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: var(--prizma-spacing-12);
+}
+
+/* Step rows — the <ol> `PrizmaList` would supply, composed here only because
+ * the wrapper has no variant reaching Core's plain `number` squircle (#VS-16).
+ * The gap is the icon family's own Spacing/12; nothing new is declared. */
+.video-selfie-steps__rows {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: var(--prizma-spacing-12);
+}