@incodetech/prizma-core-screens 0.1.0

package/src/DocumentCaptureConfirmUploadScreen.tsx

@@ -0,0 +1,113 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { IconLock } from '@incodetech/prizma-core-icons';
+import { PrizmaReviewScreen, type PrizmaReviewScreenProps } from './ReviewScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  DocumentCaptureConfirmStage,
+  DocumentCaptureStrings,
+} from './DocumentCaptureStrings';
+import './ScreenLayout.css';
+import './DocumentCaptureLayout.css';
+
+export interface DocumentCaptureConfirmUploadScreenProps
+  extends Omit<
+    PrizmaReviewScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'successTitle'
+    | 'analyzingLabel'
+    | 'analyzingState'
+    | 'primaryLabel'
+    | 'secondaryLabel'
+    | 'verifiedLabel'
+    | 'children'
+    | 'stageClassName'
+    | 'stage'
+  > {
+  /** Module copy — this screen reads the `confirmUpload` slice. */
+  strings: DocumentCaptureStrings;
+  /** Which purple `documentCapture.confirmUpload.*` section to render. */
+  stage?: DocumentCaptureConfirmStage;
+  /** The uploaded file's name, shown under the page thumbnail. Not copy — it is
+   *  runtime data from the picker, so it stays out of `strings`. */
+  filename?: string;
+  /** Page-preview thumbnail (an <img>) rendered inside the card. */
+  thumbnail?: ReactNode;
+  /** Loading-bar progress on `analyzing`, 0–100. Figma draws it part-filled. */
+  progress?: number;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Document Capture — uploaded-file confirmation, built on the Review archetype
+ * (GUIDELINES.md §6-H, `PrizmaReviewScreen`).
+ *
+ * Figma: purple sections `documentCapture.confirmUpload.reviewFile` /
+ * `.analyzing` / `.success` — the same review skeleton as
+ * `DocumentCaptureConfirmImageScreen`, with the camera stage swapped for the
+ * uploaded file's preview card. The archetype owns the header, the flexing
+ * media stage, the Spacing/24 CTA offset and the anchored tag (DEVIATIONS
+ * #DC-22/24, now #REV-1); what stays module-side is the media itself — the
+ * vertical preview card and the standalone encrypted row, which have no Core
+ * counterpart (`PrizmaCardDocumentContainer` is a HORIZONTAL filename + action
+ * row, and Core's encrypted block ships only inside `PrizmaIdCapture`) —
+ * DEVIATIONS #DC-26, #DC-27 — plus the file-column inset.
+ *
+ * `documentCapture.upload.selectFromLibrary` / `.selectFromFiles` sit between
+ * the tutorial and this screen in the Figma flow, but they are the iOS Photos
+ * and Files apps — OS chrome, not Prizma surfaces (DEVIATIONS.md #DC-20).
+ */
+export const DocumentCaptureConfirmUploadScreen = forwardRef<
+  HTMLDivElement,
+  DocumentCaptureConfirmUploadScreenProps
+>(
+  (
+    {
+      strings,
+      stage = 'review',
+      filename,
+      thumbnail,
+      progress = 45,
+      screenId = `document-capture-confirm-upload-${stage}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaReviewScreen
+      ref={ref}
+      stage={stage}
+      title={strings.confirmUpload.title}
+      subtitle={strings.confirmUpload.subtitle}
+      successTitle={strings.confirmUpload.successTitle}
+      analyzingLabel={strings.confirmUpload.analyzingLabel}
+      analyzingState="uploading"
+      progress={progress}
+      stageClassName="document-capture-review-file"
+      primaryLabel={strings.confirmUpload.ctaLabel}
+      secondaryLabel={strings.confirmUpload.replaceLabel}
+      verifiedLabel={strings.verifiedLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      <div className="document-capture-file-card">
+        <span className="document-capture-file-card__thumb">{thumbnail}</span>
+        {filename ? <p className="document-capture-file-card__name">{filename}</p> : null}
+      </div>
+      {strings.encryptedLabel ? (
+        <p className="document-capture-encrypted">
+          <IconLock size="s" />
+          <span>{strings.encryptedLabel}</span>
+        </p>
+      ) : null}
+    </PrizmaReviewScreen>
+  ),
+);
+DocumentCaptureConfirmUploadScreen.displayName = 'DocumentCaptureConfirmUploadScreen';
+
+export default DocumentCaptureConfirmUploadScreen;

package/src/DocumentCaptureGenericErrorScreen.tsx

@@ -0,0 +1,82 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DocumentCaptureStrings } from './DocumentCaptureStrings';
+import './ScreenLayout.css';
+
+export interface DocumentCaptureGenericErrorScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'disclaimer' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `error` slice (+ shared labels). The
+   *  host passes the copy of the CURRENT verdict. */
+  strings: DocumentCaptureStrings;
+  /**
+   * `documentCapture.errors.genericErrorExhausted` — retries are used up: the
+   * status icon goes from warning to negative, the attempts line is dropped,
+   * and the CTA becomes the forward action instead of "Recapture document".
+   */
+  exhausted?: boolean;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Document Capture — generic error, built on the `PrizmaResultScreen` archetype
+ * (GUIDELINES.md §6-F). Figma: purple sections
+ * `documentCapture.errors.genericError` / `.genericErrorExhausted`.
+ *
+ * The two sections that DO keep the attribution chrome (nav + verified tag),
+ * alongside the tutorial and next-page families — DEVIATIONS.md #DC-22.
+ *
+ * Layout measured off the 390 sections and identical, to the pixel, to the Face
+ * Capture pilot's `resultError.*`: `top-nav/header` 8→52 · Title stretched
+ * 52→479 with its icon/heading/subtitle block vertically centered · CTA band
+ * 479→646. That centered block IS Core's `PrizmaTitle` (icon slot → Spacing/16
+ * → H2 → Spacing/12 → H5), and the band is the archetype's — this file used to
+ * repeat both by hand for want of a result template (the #FM-24 gap, now closed).
+ */
+export const DocumentCaptureGenericErrorScreen = forwardRef<
+  HTMLDivElement,
+  DocumentCaptureGenericErrorScreenProps
+>(
+  (
+    {
+      strings,
+      exhausted = false,
+      screenId = exhausted
+        ? 'document-capture-generic-error-exhausted'
+        : 'document-capture-generic-error',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    // Figma: the base section carries "N attempts remaining"; the exhausted
+    // section drops it (the subtitle says the limit is reached instead).
+    const attemptsLabel = exhausted ? undefined : strings.error.attemptsLabel;
+
+    return (
+      <PrizmaResultScreen
+        ref={ref}
+        status={exhausted ? 'error' : 'warning'}
+        title={strings.error.title}
+        subtitle={strings.error.description}
+        disclaimer={attemptsLabel}
+        ctaLabel={strings.error.ctaLabel}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      />
+    );
+  },
+);
+DocumentCaptureGenericErrorScreen.displayName = 'DocumentCaptureGenericErrorScreen';
+
+export default DocumentCaptureGenericErrorScreen;

package/src/DocumentCaptureIllustration.tsx

@@ -0,0 +1,153 @@
+import React, { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import './DocumentCaptureLayout.css';
+
+/**
+ * DocumentCaptureIllustration — the document centerpiece of the Document
+ * Capture tutorial / next-page screens.
+ *
+ * WHY IT LIVES IN THE MODULE LAYER: `prizma-core-web` ships
+ * `PrizmaIllustrationSelfie`, `…IdTutorial`, `…IdIntro`, `…IdFlip`,
+ * `…IdHint`, `…IdFeedback`, `…NfcScan`, `…NfcIssue`, `…Geolocation`,
+ * `…DigitalId` and `…Avatar` — there is NO document / proof-of-address
+ * illustration. GUIDELINES.md §10 is the standing asset rule for that gap
+ * ("Illustrations…: inline SVG React components (Figma-sourced), tintable via
+ * tokens/currentColor"), so the artwork is inlined here verbatim from the
+ * Figma export and every paint is bound to an existing illustration token —
+ * no primitive re-implemented, no hex hardcoded. Promotion to
+ * `PrizmaIllustrationDocument` is a Core request (DEVIATIONS.md #DC-21).
+ *
+ * Figma source: the `Illustrations` frame of the purple sections
+ * `documentCapture.tutorial.*` / `documentCapture.nextPage.*`
+ * (cbFXiChmJ8cWQDHwVghBqJ) — a 342 × 358 box (`aspect-[342/358]`, max 362 ×
+ * 378.94) holding four layers, whose positions are PERCENTAGES of that box and
+ * therefore identical across every purple variant (verified against
+ * `tutorial.default` 4095:26010 and `nextPage.optional` 4095:26026):
+ *
+ *   halo circle   d = 91.34% of the height, centered, top 4.19%
+ *   document page inset 9.05% / 20.37% / 16.97% / 20.12% (+ its Figma drop
+ *                 shadow, which bleeds −13.84% sideways and −9.31% / −11.97%)
+ *   text lines    inset 12.01% / 25.28% / 26.42% / 25.14%, opacity 0.5
+ *   capture frame aspect 177.81 / 230.04, top 8.38%, bottom 16.2%, centered —
+ *                 a 2px white outline just outside the page edge
+ *
+ * Those percentages are resolved to the 342 × 358 viewBox once, below, so the
+ * whole thing is ONE scalable SVG instead of four positioned layers.
+ *
+ * Paint mapping (exact values, pixel-diff 0):
+ *   #E5F0FF → Illustration/Surface/Halo      · #C6C8D2 → artwork/grey-96
+ *   white   → artwork/white
+ * The export also stacked a `fill="black" fill-opacity="0.01"` plate over the
+ * page — dropped on purpose: it is invisible (a 0.15%-of-a-channel shift) and
+ * black is absent from the illustration token set, so keeping it would have
+ * meant a hardcoded literal for no visual gain.
+ */
+export type PrizmaDocumentCaptureIllustrationProps = Omit<
+  ComponentPropsWithoutRef<'svg'>,
+  'viewBox' | 'children'
+>;
+
+export const DocumentCaptureIllustration = forwardRef<
+  SVGSVGElement,
+  PrizmaDocumentCaptureIllustrationProps
+>(({ className, ...rest }, ref) => (
+  <svg
+    ref={ref}
+    className={['document-capture-illustration', className ?? ''].filter(Boolean).join(' ')}
+    viewBox="0 0 342 358"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+    {...rest}
+  >
+    {/* Halo — Illustration/Surface/Halo, drawn in code (same as Core's
+        illustrations) so a rebrand of the token restyles it. */}
+    <circle cx="171" cy="178.5" r="163.5" fill="var(--prizma-illustration-surface-halo)" />
+
+    {/* Document page + its Figma drop shadow. The export's canvas is larger
+        than the page by exactly the blur bleed, so the nested <svg> is placed
+        at the bled rect and the page lands on its designed inset. */}
+    <svg
+      x="40.64"
+      y="7.75"
+      width="259.83"
+      height="321.15"
+      viewBox="0 0 221.387 273.626"
+      overflow="visible"
+    >
+      <g filter="url(#prizma-dc-ill-shadow)">
+        <path
+          d="M24 26C24 23.2386 26.2386 21 29 21H192.387C195.149 21 197.387 23.2386 197.387 26V241.626C197.387 244.387 195.149 246.626 192.387 246.626H29C26.2386 246.626 24 244.387 24 241.626V26Z"
+          fill="var(--prizma-illustration-artwork-white)"
+        />
+      </g>
+      <defs>
+        <filter
+          id="prizma-dc-ill-shadow"
+          x="0"
+          y="0"
+          width="221.387"
+          height="273.626"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="3" />
+          <feGaussianBlur stdDeviation="12" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+      </defs>
+    </svg>
+
+    {/* The page's placeholder text lines (Figma `documents / Vector`). */}
+    <svg
+      x="85.98"
+      y="42.996"
+      width="169.56"
+      height="220.42"
+      viewBox="0 0 144.456 187.768"
+      preserveAspectRatio="none"
+    >
+      <g opacity="0.5" fill="var(--prizma-illustration-artwork-grey-96)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.152148 23.4538C0.152148 22.9833 0.533578 22.6018 1.0041 22.6018H143.603C144.074 22.6018 144.455 22.9833 144.455 23.4538V26.0963C144.455 26.5669 144.074 26.9483 143.603 26.9483H1.0041C0.533582 26.9483 0.152148 26.5669 0.152148 26.0963V23.4538Z"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.152148 184.274C0.152148 183.803 0.533578 183.422 1.0041 183.422H143.603C144.074 183.422 144.455 183.803 144.455 184.274V186.916C144.455 187.387 144.074 187.768 143.603 187.768H1.0041C0.533582 187.768 0.152148 187.387 0.152148 186.916V184.274Z"
+        />
+        <path d="M0.152148 46.9252C0.152148 46.4546 0.533582 46.0732 1.0041 46.0732H57.5431C58.0136 46.0732 58.395 46.4546 58.395 46.9252V54.7835C58.395 55.254 58.0136 55.6355 57.5431 55.6355H1.0041C0.533582 55.6355 0.152148 55.254 0.152148 54.7835L0.152148 46.9252Z" />
+        <path d="M0.152108 65.1805C0.152108 64.71 0.533541 64.3286 1.00406 64.3286H57.543C58.0135 64.3286 58.395 64.71 58.395 65.1805V73.0389C58.395 73.5094 58.0136 73.8908 57.543 73.8908H1.00406C0.533541 73.8908 0.152108 73.5094 0.152108 73.0389L0.152108 65.1805Z" />
+        <path d="M0.13728 83.4351C0.145491 82.9647 0.533524 82.59 1.00397 82.5982L81.0017 83.9945C81.4722 84.0028 81.8469 84.3908 81.8387 84.8612L81.7015 92.7184C81.6933 93.1888 81.3053 93.5636 80.8348 93.5553L0.837091 92.159C0.366641 92.1508 -0.00807931 91.7627 0.000132428 91.2923L0.13728 83.4351Z" />
+        <path d="M0.13728 101.69C0.145491 101.22 0.533524 100.845 1.00397 100.854L24.5061 101.264C24.9765 101.272 25.3512 101.66 25.343 102.13L25.2362 108.249C25.228 108.72 24.84 109.094 24.3695 109.086L0.867432 108.676C0.396982 108.668 0.0222633 108.28 0.0304751 107.809L0.13728 101.69Z" />
+        <path d="M0.152148 1.72151C0.152148 1.25099 0.533582 0.869559 1.0041 0.869559H107.093C107.563 0.869559 107.945 1.25099 107.945 1.72151V10.4492C107.945 10.9197 107.563 11.3011 107.093 11.3011H1.0041C0.533581 11.3011 0.152148 10.9197 0.152148 10.4492V1.72151Z" />
+        <path d="M122.723 0.851954C122.723 0.381432 123.105 0 123.575 0H143.604C144.074 0 144.456 0.381433 144.456 0.851955V9.5796C144.456 10.0501 144.074 10.4316 143.604 10.4316H123.575C123.105 10.4316 122.723 10.0501 122.723 9.5796V0.851954Z" />
+      </g>
+    </svg>
+
+    {/* Capture-frame outline — Figma `frame-border`: 2px white, radius 7. */}
+    <rect
+      x="67.65"
+      y="31"
+      width="206.7"
+      height="268"
+      rx="7"
+      stroke="var(--prizma-illustration-artwork-white)"
+      strokeWidth="2"
+    />
+  </svg>
+));
+DocumentCaptureIllustration.displayName = 'DocumentCaptureIllustration';
+
+export default DocumentCaptureIllustration;

package/src/DocumentCaptureLayout.css

@@ -0,0 +1,226 @@
+/* Document Capture — module layout additions.
+ *
+ * ONLY what the foundation archetypes and Prizma Core do not already own.
+ * Every value is a token; the two unavoidable literals below carry an inline
+ * justification AND a numbered row in DEVIATIONS.md (Wave 2).
+ *
+ * Nothing here re-declares an archetype spacing rule: the content column, the
+ * 24px gutters, the CTA-band recipe (`__band`, DEVIATIONS #8), the no-nav
+ * status-bar reserve (`__content--no-nav`, #9) and the "capture stage adds no
+ * offset" rule (`__content--capture`, #12) all stay the foundation's.
+ */
+
+/* ── Camera stage top offset ─────────────────────────────────────────────────
+ * `documentCapture.capture.*` has NO logo nav (DEVIATIONS #DC-22) and its CONTENT
+ * frame starts at Spacing/16, not the Spacing/24 every other no-nav screen uses
+ * (measured: 54px System UI Top Bar → `center grouping container` y=16). Same
+ * `--pcs-status-bar` custom property as the foundation, so a host that draws
+ * its own chrome still overrides the reserve exactly once.
+ *
+ * ⚠ THIS RESERVE WENT MISSING AND CAME BACK — read before touching it.
+ * It used to hang off `.document-capture-content--camera`, a class this screen
+ * carried when it composed its own column. The screen was later rebuilt on the
+ * foundation's viewfinder (`.prizma-viewfinder__content`) to match
+ * IdCaptureStageScreen, and the class went with the old markup — but the rule
+ * stayed here, matching nothing. The reserve went with it: the viewfinder
+ * column declares `padding: 0 24 24`, so the title rendered at the very top of
+ * the shell, y+0, clipped by the notch (owner report 2026-09-03; measured
+ * title-to-shell gap 0px on Document Capture against 143px on ID Capture,
+ * which is only right because ITS stage draws a nav row and the nav carries the
+ * reserve — see ScreenNav.css).
+ *
+ * So it is scoped to the composition that actually ships. The 16 rather than
+ * the foundation's 24 is the measured number and the reason this rule is not
+ * just `__content--no-nav`; the Spacing/16 between the title block and the
+ * frame is `.prizma-viewfinder__intro`'s own padding-bottom, which the
+ * foundation already sets, so nothing re-declares it here.
+ */
+.document-capture-capture-screen .prizma-viewfinder__content {
+  padding-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-16));
+}
+
+/* Core's PoA stage is `height: 100%` so it fills whatever box the host gives
+ * it (IdCapture.css). Inside a flex column that has to be spelled out as a
+ * flex item, otherwise the percentage resolves against the whole content
+ * column and the Title / strip get squeezed. No spacing is added — the stage
+ * keeps owning its own frame ↔ encrypted-row geometry (DEVIATIONS #12). The
+ * camera screen and the confirm-image review both put the poa stage in a flex
+ * column, so both need it. */
+.document-capture-capture-screen .prizma-viewfinder__content > .prizma-id-capture,
+.document-capture-review-image > .prizma-id-capture {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* Capture stage → manual-capture strip: Spacing/12 (Figma `center grouping
+ * container` 550 − content 538). */
+.document-capture-capture-bar {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  margin-top: var(--prizma-spacing-12);
+}
+
+/* Removed: `.document-capture-band--pinned` (`margin-top: auto`). Its one
+ * consumer, `commonIssues`, is now the List archetype, whose `__list` middle
+ * flexes and pushes the band down on its own — DEVIATIONS #F-31.
+ */
+
+/* ── Review-stage media adapters (archetype H) ───────────────────────────────
+ * The review skeleton — header block, flexing media stage, stage → CTA Spacing/24
+ * and the analyzing flush — now lives in the foundation (`ScreenLayout.css`
+ * `.prizma-screen-layout__review-*`, consumed via `PrizmaReviewScreen`).
+ * DEVIATIONS #REV-1. Only what shapes THIS module's media stays here.
+ */
+
+/* Confirm-image review: the captured still keeps the same PoA frame the camera
+ * screen uses (its flex-item rule is shared above), and its encrypted row is
+ * re-tinted for the LIGHT review surface — Core paints it Text/Body/0 Static
+ * (white) for the dark camera stage; Figma draws Text/Body/800 (Primary) here.
+ * No Core file touched, no !important — DEVIATIONS #DC-25. */
+.document-capture-review-image .prizma-id-capture__encrypted {
+  color: var(--prizma-text-body-800-primary);
+}
+
+/* Confirm-upload review: the file-preview card is inset by 48 inside the media
+ * stage (Figma `Container` px-48 → the 246-wide card in the 342 column). The
+ * spacing scale stops at 40, so the value is DERIVED from Spacing/24. */
+.document-capture-review-file {
+  padding-inline: calc(var(--prizma-spacing-24) * 2);
+}
+
+/* ── Standalone encrypted notice ─────────────────────────────────────────────
+ * Core owns the "capture encrypted message" building block only as a private
+ * part of PrizmaIdCapture; the uploaded-file screens need it beside a card
+ * instead. Rebuilt here from the same tokens as
+ * `.prizma-id-capture__encrypted` (Spacing/8 block padding, Spacing/4 gap,
+ * Body/M Regular, 16px lock). `IconLock` is designed at 24 only, so — exactly
+ * as Core does in `IdCapture.css` — the glyph is clamped to the designed 16 in
+ * CSS; 16 is absent from the icon-size token axis (m=24, l=32, …).
+ * DEVIATIONS #DC-26.
+ */
+.document-capture-encrypted {
+  margin: 0;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--prizma-spacing-4);
+  padding-block: var(--prizma-spacing-8);
+  color: var(--prizma-text-body-800-primary);
+  font-family: var(--prizma-body-family);
+  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);
+  letter-spacing: var(--prizma-body-m-regular-letter-spacing);
+}
+
+.document-capture-encrypted > svg {
+  flex: none;
+  width: 16px; /* hardcoded — Icon/Lock is designed at 24 only and Figma draws 16; same clamp as Core's .prizma-id-capture__encrypted-icon (DEVIATIONS #DC-26) */
+  height: 16px;
+}
+
+/* ── Uploaded-file preview card ──────────────────────────────────────────────
+ * Figma `Document Container` of `confirmUpload.*`. Core's
+ * `PrizmaCardDocumentContainer` is the HORIZONTAL filename + action row — a
+ * different component with the same Figma name — so the vertical preview card
+ * is composed here from the same Card tokens (Surface/Neutral/50 on
+ * Border/Neutral/100 at Border/Radius/large, Spacing/32 block + Spacing/24
+ * inline padding, Spacing/24 thumbnail → info gap). DEVIATIONS #DC-27.
+ */
+.document-capture-file-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--prizma-spacing-24);
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--prizma-spacing-32) var(--prizma-spacing-24);
+  background: var(--prizma-surface-neutral-50);
+  border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+  border-radius: var(--prizma-border-radius-large);
+  overflow: hidden;
+}
+
+/* Thumbnail — Figma 120 × 160 (a 3:4 page crop). Sized by ratio off the card
+ * width so it scales with the host, capped at the design size. */
+.document-capture-file-card__thumb {
+  position: relative;
+  flex: none;
+  width: 120px; /* hardcoded — Figma page-thumbnail width; absent from the token SOT (DEVIATIONS #DC-27) */
+  aspect-ratio: 3 / 4;
+  max-width: 100%;
+  border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+  border-radius: var(--prizma-border-radius-small);
+  overflow: hidden;
+  background: var(--prizma-surface-neutral-0);
+}
+
+.document-capture-file-card__thumb > img,
+.document-capture-file-card__thumb > svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.document-capture-file-card__name {
+  margin: 0;
+  width: 100%;
+  overflow-wrap: break-word;
+  text-align: center;
+  color: var(--prizma-text-body-800-primary);
+  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);
+}
+
+/* The `analyzing` loading-bar block (164px centred cap) moved to the foundation
+ * with the rest of the review skeleton — `.prizma-screen-layout__review-loading`
+ * in ScreenLayout.css. DEVIATIONS #DC-28, #REV-1. */
+
+/* ── Illustration slot ───────────────────────────────────────────────────────
+ * The SVG carries the 342 × 358 viewBox, so `preserveAspectRatio` does the
+ * letterboxing: the slot only supplies the flexible box and the Figma
+ * max-width (362 → max-height 378.9 follows from the ratio, so it is never
+ * declared).
+ */
+.document-capture-illustration {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  max-width: 362px; /* hardcoded — Figma `Illustrations` max-width; absent from the token SOT (DEVIATIONS #DC-21) */
+}
+
+/* The non-status glyph slot that used to live here (`.document-capture-glyph`)
+ * is now the foundation's `__glyph` in `ScreenLayout.css` — DEVIATIONS #DC-29,
+ * closed: three modules had a byte-identical copy of it.
+ */
+
+/* ── Bottom-sheet overlay ────────────────────────────────────────────────────
+ * `tutorial.methodSelection*` layers Core's `PrizmaBottomSheetContent` over the
+ * tutorial. The safe presenter (`PrizmaBottomSheet`) portals to
+ * `document.body`, which would escape the 390 × 844 screen frame and the
+ * host's `transform: scale()` — so the screen owns the scrim, exactly as
+ * bottom-sheet.md §10.3 assigns it to "the consuming surface". The scrim drinks
+ * Core's own `Surface/Overlay` token; no animation, because a screen is one
+ * static spec state. DEVIATIONS #DC-30.
+ */
+.document-capture-sheet-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: var(--prizma-surface-overlay);
+}
+
+.document-capture-sheet-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+}