@incodetech/prizma-core-screens 0.1.0

package/src/ProcessingScreen.tsx

@@ -0,0 +1,97 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import { PrizmaScreenNav } from './ScreenNav';
+import type {
+  PrizmaScreenActionHandler,
+  PrizmaScreenChromeProps,
+  PrizmaScreenOverrides,
+} from './types';
+import './ScreenLayout.css';
+
+export type PrizmaProcessingStatus = 'loading' | 'success' | 'error' | 'warning';
+
+export interface PrizmaProcessingScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title'> ,
+    PrizmaScreenChromeProps {
+  /** `loading` renders the spinner slot; the rest render the status icon. */
+  status: PrizmaProcessingStatus;
+  /**
+   * An optional block between the logo nav and the content — a journey stepper.
+   * Video Selfie draws Core's `PrizmaStepper` on EVERY screen of the flow, not
+   * just its camera stages, and it is the only chrome that tells the steps
+   * apart; the archetypes had a slot on E alone, so the rest of the module shed
+   * it (owner-reported 2026-08-19). Takes a `ReactNode` so the module supplies
+   * Core's own component — no primitive invented, and both offsets live once in
+   * `ScreenLayout.css` (`.prizma-screen-layout__progress`). Omit it and nothing
+   * renders, so every existing consumer is byte-identical. DEVIATIONS #VS-4.
+   */
+  progress?: ReactNode;
+  /** H2 status line ("Processing…", "Verification complete"). */
+  title: string;
+  /** Optional supporting copy below the title. */
+  subtitle?: string;
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+  navLabel?: string;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Archetype C — Processing (GUIDELINES.md §6-C).
+ *
+ * This is the PURE case: a centered spinner or status mark with no CTA. As soon
+ * as a result screen needs a button, use `PrizmaResultScreen` — the missing CTA
+ * band here is what made three modules hand-build the same skeleton.
+ * Nav → fully centered column (icon/spinner + title via Core's PrizmaTitle
+ * slot) → tag pinned to the bottom. Used by every `*-uploading`,
+ * `*-processing`, `*-success` and `*-verified` screen.
+ */
+export const PrizmaProcessingScreen = forwardRef<HTMLDivElement, PrizmaProcessingScreenProps>(
+  (
+    {
+      progress,
+      status,
+      title,
+      subtitle,
+      verifiedLabel,
+      navLabel,
+      screenId,
+      showHeader = true,
+      showFooter = true,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaScreenShell ref={ref} {...shell}>
+      <PrizmaScreenNav reserved={!showHeader} logo={overrides?.logo} navLabel={navLabel} />
+      {progress ? (
+        <div className="prizma-screen-layout__progress">{progress}</div>
+      ) : null}
+      <div className="prizma-screen-layout__content prizma-screen-layout__content--centered">
+        <PrizmaTitle
+          variant="centered"
+          title={title}
+          showSubtitle={Boolean(subtitle)}
+          subtitle={subtitle}
+          icon={
+            status === 'loading' ? { type: 'spinner' } : { type: 'status', status }
+          }
+        />
+      </div>
+      {showFooter ? (
+        <div className="prizma-screen-layout__footer">
+          <PrizmaTag label={verifiedLabel} />
+        </div>
+      ) : null}
+    </PrizmaScreenShell>
+  ),
+);
+PrizmaProcessingScreen.displayName = 'PrizmaProcessingScreen';
+
+export default PrizmaProcessingScreen;

package/src/QualifiedSignatureAcceptScreen.tsx

@@ -0,0 +1,198 @@
+import React, { forwardRef } from 'react';
+import { PrizmaCardDocumentContainer } from '@incodetech/prizma-core-web/card';
+import { PrizmaCheckbox } from '@incodetech/prizma-core-web/checkbox';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  QualifiedSignatureAcceptState,
+  QualifiedSignatureAcceptVariant,
+  QualifiedSignatureStrings,
+  QualifiedSignatureTerm,
+} from './QualifiedSignatureStrings';
+import './ScreenLayout.css';
+import './QualifiedSignatureLayout.css';
+
+export interface QualifiedSignatureAcceptScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'ctaLabel'
+    | 'ctaDisabled'
+    | 'ctaLoading'
+    | 'ctaLoadingLabel'
+    | 'linkLabel'
+    | 'linkContent'
+    | 'verifiedLabel'
+    | 'children'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `accept` slice its `variant` names. */
+  strings: QualifiedSignatureStrings;
+  /** Which reading of the section to render. Default `accept`. */
+  variant?: QualifiedSignatureAcceptVariant;
+  /** Which purple state to render. Default `default`. */
+  state?: QualifiedSignatureAcceptState;
+  /** The consent clauses. Runtime data — the QTSP writes them, not the module. */
+  terms: QualifiedSignatureTerm[];
+  /** The document being signed, shown in the row above the clauses. Runtime
+   *  data from the upload step, so it stays out of `strings`. */
+  filename?: string;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Qualified Signature — accept the terms and sign, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * Figma: the purple `QSign.AcceptSign.{default,selectedCheckox,loadingsign}`
+ * sections in BOTH parent groups — the generic five-clause reading ("Accept and
+ * sign" / "Finish signing") and the partner two-clause one ("Review and sign" /
+ * "Sign" + the certificate-application link). Six purple states, one screen:
+ * they share an identical skeleton and differ only in clause set, copy, tick
+ * state and CTA treatment, which is exactly what §6-E means by "states are
+ * separate screens sharing the identical layout".
+ *
+ * WHY ARCHETYPE E AND NOT G. The middle is a stack of Core `PrizmaCheckbox`
+ * CONTROLS — real form inputs the signer must operate before the CTA unlocks —
+ * not a card/option list, and the screen's whole point is the three CTA
+ * treatments (disabled → enabled → in-flight) that archetype G has no slots for
+ * (`PrizmaListScreen` offers neither `ctaDisabled` nor `ctaLoading`; that gap is
+ * reported, not worked around). E owns both, plus the `linkContent` slot the
+ * partner variant's link needs. Measured, the two archetypes want the same
+ * rhythm here anyway: Figma's `middle container` is Title → Spacing/32 → the
+ * document row, which is `FormScreen.css`'s title → fields offset to the pixel
+ * (DEVIATIONS #PI-2), and the row → clause-stack gap is the field stack's own
+ * Spacing/16.
+ *
+ * Four things are deliberate:
+ *
+ * 1. The document row is Core's `PrizmaCardDocumentContainer` — the Figma layer
+ *    is literally an instance of `Card / Document Container`, filename plus a
+ *    tertiary-link action. Nothing is hand-rolled.
+ * 2. Each clause is Core's `PrizmaCheckbox size="L"` (the consent container),
+ *    fed `segments` so the fourth Incode clause carries BOTH its inline links —
+ *    "Terms of Use" and "Privacy Policy" — as Core's own `<a>`s. That is the
+ *    #PI-10 rule (a sentence carrying links is not one button) satisfied by a
+ *    Core API rather than by the foundation's inline recipe.
+ * 3. `loading` greys the clauses through Core's own `disabled` treatment
+ *    (`Surface/Neutral/50` container + disabled ink + inert links) and swaps the
+ *    CTA label for Core's spinner via `ctaLoading` — the spinner belongs to the
+ *    BUTTON, never to a control (DEVIATIONS #PI-5).
+ * 4. The partner link rides `linkContent`, not `linkLabel`, so it can grey with
+ *    the rest of the form on `loading` (archetype E's `linkLabel` has no
+ *    disabled path) while staying a distinct `secondary` action — the CURP
+ *    #CURP-2 idiom.
+ *
+ * The nav draws no close ✕: every purple section in this file puts one at the
+ * nav's right, and GUIDELINES §3 stands — the Figma files are the side that is
+ * wrong (standing ruling, DEVIATIONS #PI-9).
+ */
+export const QualifiedSignatureAcceptScreen = forwardRef<
+  HTMLDivElement,
+  QualifiedSignatureAcceptScreenProps
+>(
+  (
+    {
+      strings,
+      variant = 'accept',
+      state = 'default',
+      terms,
+      filename,
+      screenId = `qualified-signature-accept-${variant}-${state}`,
+      className,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy = variant === 'certificate' ? strings.accept.certificate : strings.accept.accept;
+
+    // Figma's three states as two axes: whether the clauses are ticked, and
+    // whether the signature is being created. `default` leaves the CTA in Core's
+    // disabled surface because nothing is accepted yet; `selected` releases it;
+    // `loading` makes the whole form inert.
+    const busy = state === 'loading';
+    const ticked = state !== 'default';
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        className={['qualified-signature-accept', className].filter(Boolean).join(' ')}
+        title={copy.title}
+        subtitle={copy.subtitle}
+        ctaLabel={copy.ctaLabel}
+        ctaDisabled={!ticked}
+        ctaLoading={busy}
+        ctaLoadingLabel={copy.ctaLoadingLabel}
+        /* The clause stack pans inside the column — the archetype owns this now
+           (`--scroll`), so the module declares no overflow of its own. #QS-1 */
+        scrollFields
+        linkContent={
+          copy.linkLabel ? (
+            <PrizmaButton
+              variant="tertiary-link"
+              size="L"
+              /* Figma greys the link while the signature is created. */
+              disabled={busy}
+              onClick={() => onAction?.({ type: 'secondary', screenId })}
+            >
+              {copy.linkLabel}
+            </PrizmaButton>
+          ) : undefined
+        }
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        {filename ? (
+          /* `Card / Document Container` — Core's own horizontal filename +
+             tertiary-action row. `actionDisabled` follows the clauses and the
+             link into Core's disabled treatment on `loading`, so nothing on the
+             frame stays tappable while the signature is created (Core gained the
+             prop 2026-08-19 for exactly this; the composed Button already had
+             the `--prizma-button-tertiary-text-disabled` path, the row just had
+             no way to reach it).
+
+             REPORTED DELTA: the generic `loadingsign` frame REMOVES the "View"
+             action outright while the partner's `loading` frame greys it. Two
+             Figma readings of one inert state; Core models inert as disabled,
+             so both take the greyed treatment and the removal is logged. */
+          <PrizmaCardDocumentContainer
+            filename={filename}
+            actionLabel={strings.accept.viewLabel}
+            actionDisabled={busy}
+            onAction={() => onAction?.({ type: 'tertiary', screenId })}
+          />
+        ) : null}
+        <div
+          className="qualified-signature-terms"
+          role="group"
+          aria-label={strings.accept.termsLabel}
+        >
+          {terms.map((term) => (
+            <PrizmaCheckbox
+              key={term.id}
+              size="L"
+              name={term.id}
+              value={term.id}
+              checked={ticked}
+              disabled={busy}
+              segments={term.segments}
+            />
+          ))}
+        </div>
+      </PrizmaFormScreen>
+    );
+  },
+);
+QualifiedSignatureAcceptScreen.displayName = 'QualifiedSignatureAcceptScreen';
+
+export default QualifiedSignatureAcceptScreen;

package/src/QualifiedSignatureDocumentScreen.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { PrizmaListScreen, type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  QualifiedSignatureDocumentVariant,
+  QualifiedSignatureStrings,
+} from './QualifiedSignatureStrings';
+import './ScreenLayout.css';
+import './QualifiedSignatureLayout.css';
+
+export interface QualifiedSignatureDocumentScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'glyph'
+    | 'children'
+    | 'listAlign'
+    | 'disclaimer'
+    | 'ctaLabel'
+    | 'secondaryCtaLabel'
+    | 'linkLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `document` slice its `variant` names. */
+  strings: QualifiedSignatureStrings;
+  /** Which full-surface document section to render. Default `document`. */
+  variant?: QualifiedSignatureDocumentVariant;
+  /**
+   * The document itself. HOST-supplied content, never module copy — the rendered
+   * contract page on `document` (an `<img>` / `<canvas>` of the PDF) and the
+   * certificate-application text on `terms`. Same slot contract the capture
+   * screens use for `camera` (GUIDELINES §10).
+   */
+  body?: ReactNode;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Qualified Signature — the two full-surface document screens, built on the List
+ * archetype (GUIDELINES.md §6-G, `PrizmaListScreen`).
+ *
+ * Figma:
+ * - `document` — `QSign.AcceptSign.viewdoc` (10196:67381 / the partner's
+ *   6120:34074): the contract behind the accept screen's "View" action. CONTENT
+ *   = nav 8→52 · a 342-wide page filling 68→660 · the Tag at 676.
+ * - `terms`    — `QSign.T&C` (11130:43690): the certificate application form
+ *   behind the partner variant's link. A left-aligned heading over a 13 575-tall
+ *   block of legal text WITH ITS OWN SCROLL INDICATOR — Figma is explicit that
+ *   this surface scrolls.
+ *
+ * Archetype G is the fit: its `__list` middle is "content filling the space
+ * between the title block and the CTA band", which is exactly what a document
+ * page is, and both sections carry no CTA at all so the band never renders. The
+ * body is allowed to scroll inside that middle — one module rule RELEASING an
+ * overflow constraint, declaring no spacing or size, the same idiom as CURP's
+ * taller-than-844 form (DEVIATIONS #CURP-1).
+ *
+ * THREE deltas from the frames, all reported rather than worked around:
+ * 1. Both sections draw a back chevron at the nav's left (and `terms` replaces
+ *    the logo row with a chevron + heading bar). GUIDELINES §3 stands: SDK
+ *    screens carry no dismiss or back affordance — the standing ruling of
+ *    DEVIATIONS #PI-9, which is not re-litigated per module.
+ * 2. `viewdoc` draws NO heading. GUIDELINES §4 is explicit that every screen has
+ *    exactly one H2, and archetype G has no title-less path, so the screen
+ *    carries one and the Figma frame is the side to change. (An archetype
+ *    request for an optional title — a pure content viewer — is logged.)
+ * 3. `terms` draws neither the logo nor the tag. The owner rule wins over Figma
+ *    for attribution chrome (#PI-8, #F-30, #F-34), so both variants keep the
+ *    header and the footer and nothing shifts between states.
+ *
+ * `terms` is LEFT-aligned, as Figma draws it: a centred heading over a
+ * left-aligned wall of legal text reads as a mistake. The alignment rides the
+ * sanctioned `overrides.align` path (types.ts) — nothing is re-styled here — and
+ * an explicit host override still wins. The #GEO-2 precedent.
+ */
+export const QualifiedSignatureDocumentScreen = forwardRef<
+  HTMLDivElement,
+  QualifiedSignatureDocumentScreenProps
+>(
+  (
+    {
+      strings,
+      variant = 'document',
+      body,
+      screenId = `qualified-signature-document-${variant}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy = variant === 'terms' ? strings.document.terms : strings.document.document;
+
+    // The legal wall is left-aligned in Figma; the contract page keeps the
+    // archetype's centred default. An explicit `overrides.align` still wins.
+    const alignedOverrides: PrizmaScreenOverrides = {
+      ...overrides,
+      align: overrides?.align ?? (variant === 'terms' ? 'left' : 'centered'),
+    };
+
+    return (
+      <PrizmaListScreen
+        ref={ref}
+        title={copy.title}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={alignedOverrides}
+        onAction={onAction}
+        {...shell}
+      >
+        <div className="qualified-signature-document">{body}</div>
+      </PrizmaListScreen>
+    );
+  },
+);
+QualifiedSignatureDocumentScreen.displayName = 'QualifiedSignatureDocumentScreen';
+
+export default QualifiedSignatureDocumentScreen;

package/src/QualifiedSignatureLayout.css

@@ -0,0 +1,206 @@
+/* Qualified Signature — module layout additions.
+ *
+ * ONLY what the foundation archetypes and Prizma Core do not already own.
+ * NOTHING here re-declares an archetype spacing rule: the content column, the
+ * 24px gutters, the title → fields Spacing/32 (`FormScreen.css`), the title →
+ * list Spacing/24 (`__list`), the review header → stage Spacing/32 and stage →
+ * CTA Spacing/24 (`__review-*`), the CTA-band recipe (`__band`, DEVIATIONS #8)
+ * and the anchored footer (#F-29) all stay the foundation's.
+ *
+ * Every rule below is one of exactly three kinds:
+ *   (a) CONTENT rhythm inside a slot the archetype hands over — the same
+ *       licence §6-G gives a Core card list ("the list keeps its own row
+ *       rhythm; the archetype supplies only the offset above it");
+ *   (b) a RELEASE of a Core/foundation constraint a purple section contradicts
+ *       — the idiom Phone Input's `width: auto` (#PI-1) and CURP's scrolling
+ *       field stack (#CURP-1) established;
+ *   (c) media CONTENT Core has no primitive for, rebuilt from Core's own
+ *       tokens, with the Core request recorded.
+ */
+
+/* ── (b) The consent stack is taller than the screen ─────────────────────────
+ * `QSign.AcceptSign.default` is a 1156-tall frame (the `selectedCheckox` one is
+ * 1160): five consent containers at ~120 each plus the document row push CONTENT
+ * far past the 654 a 390×844 reference gives it. Figma lets the page grow and
+ * the browser scroll; screens are authored at 390×844 and never reflow
+ * (DEVIATIONS #17), and archetype E's `.prizma-form-screen__fields` is
+ * `flex: 1; min-height: 0` with NO overflow behaviour — so the surplus is
+ * clipped by `ScreenShell`'s `overflow: hidden` and first paints over the CTA.
+ *
+ * The stack therefore scrolls INSIDE the column: the title, the CTA, the link
+ * and the anchored tag hold still while the clauses pan. It adds no padding, no
+ * gap and no size of its own. Identical to CURP's `.curp-generate--scroll`
+ * (DEVIATIONS #CURP-1) — this is the SECOND module to need it.
+ *
+ * FOUNDATION REQUEST (restated, now with two consumers): promote this to
+ * `FormScreen.css` as a `.prizma-form-screen__fields--scroll` variant driven by
+ * a `scrollFields` prop on `PrizmaFormScreen`. Every long-form module left in
+ * Wave 3 — eKYC, eKYB, address entry — hits the same wall.
+ */
+/* CLOSED: the scroll is now the archetype's `scrollFields` prop
+ * (`.prizma-form-screen__fields--scroll` in FormScreen.css), which also gives
+ * every row `flex-shrink: 0`. Keeping the rule here re-declared layout in a
+ * module file AND missed that fix, which collapsed the document row to 18px and
+ * clipped its View button (owner-reported 2026-08-19). DEVIATIONS #QS-1. */
+
+/* ── (a) Consent-clause rhythm ───────────────────────────────────────────────
+ * Figma stacks the `Checkbox` (size L / Container) instances at Spacing/4
+ * inside the accept screen's `bottom container`. Core ships the clause card
+ * itself (`PrizmaCheckbox size="L"` — tinted surface, 28px box, inline links)
+ * but no group wrapper, so the row rhythm is supplied here, exactly as a
+ * `PrizmaCardList` supplies its own. One token, no padding, no size.
+ *
+ * CORE REQUEST: a consent-group primitive (`PrizmaCheckboxGroup`) would own
+ * this gap and the group's `role="group"` naming.
+ */
+.qualified-signature-terms {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-4);
+}
+
+/* ── (c) Uploaded-file preview card ──────────────────────────────────────────
+ * `QSign.reviewDoc.default`'s `Document Container` — a VERTICAL card holding a
+ * page thumbnail over the filename. Core's `PrizmaCardDocumentContainer` shares
+ * the Figma name but is the HORIZONTAL filename + action row (used on the accept
+ * screen, where it IS the right component). Rebuilt 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 → name.
+ *
+ * CORE REQUEST (third module to need it — Document Capture's `confirmUpload`
+ * has a byte-equivalent copy, DEVIATIONS #DC-27): promote a
+ * `PrizmaCardFilePreview`. Two identical hand-builds were already one too many;
+ * three is the #DC-29 threshold that got the glyph slot promoted.
+ */
+.qualified-signature-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 draws `Artboard 1` at 113.25 × 150, a 3:4 page crop. Sized
+ * by ratio so it scales with the host and capped at the design width. */
+.qualified-signature-file-card__thumb {
+  position: relative;
+  flex: none;
+  width: 113px; /* hardcoded — Figma page-thumbnail width; absent from the token SOT (same class as 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);
+}
+
+.qualified-signature-file-card__thumb > img,
+.qualified-signature-file-card__thumb > svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.qualified-signature-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 card is inset inside the media stage — Figma centres the 246-wide
+ * container in the 342 column (48 each side). The spacing scale stops at 40, so
+ * the value is DERIVED from Spacing/24 rather than hardcoded. */
+.qualified-signature-review-file {
+  padding-inline: calc(var(--prizma-spacing-24) * 2);
+}
+
+/* ── (c) Standalone encrypted notice ─────────────────────────────────────────
+ * "All data is encrypted" sits beside the file card, not under a capture frame.
+ * Core owns that building block ONLY as a private part of `PrizmaIdCapture`, so
+ * it is rebuilt from the identical tokens (Spacing/8 block padding, Spacing/4
+ * gap, Body/M Regular, Text/Body/800). One literal: the 16px lock clamp —
+ * `IconLock` is designed at 24 only and the icon-size axis has no 16, the same
+ * clamp Core itself writes in `IdCapture.css`.
+ *
+ * CORE REQUEST (third consumer, DEVIATIONS #DC-26): extract
+ * `PrizmaEncryptedNotice`.
+ */
+.qualified-signature-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);
+}
+
+.qualified-signature-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;
+}
+
+/* ── (b) The document body scrolls inside the middle ─────────────────────────
+ * `QSign.AcceptSign.viewdoc` hands the middle a 592-tall contract page and
+ * `QSign.T&C` a 13575-tall block of legal text WITH ITS OWN SCROLL INDICATOR —
+ * Figma is explicit that this surface scrolls. Archetype G's `__list` middle
+ * flexes but does not scroll, so the body would be clipped by the shell.
+ *
+ * This releases that one constraint. It declares no padding, no gap and no size:
+ * the Spacing/24 above it is still the archetype's, the gutters are still the
+ * content column's, and the tag stays anchored. `overscroll-behavior` keeps a
+ * flick inside the document instead of panning the host page.
+ */
+.qualified-signature-document {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* The contract page is host-supplied media (an <img> / <canvas> of the rendered
+ * PDF, GUIDELINES §10's `cameraSurface` idiom) — it fills the column width and
+ * keeps its own aspect. */
+.qualified-signature-document > img,
+.qualified-signature-document > svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+/* Legal body copy inside the `terms` variant. Core has no long-form prose
+ * component (Body tokens exist, the block does not), so the paragraph binds the
+ * Body/M Regular scale directly — no new size, no new colour. */
+.qualified-signature-document__prose {
+  margin: 0;
+  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);
+  text-align: left;
+}