@incodetech/prizma-core-screens 0.2.14 → 0.2.20

package/dist/DigitalIdProvidersDocumentSelectionScreen.d.ts

@@ -22,9 +22,9 @@ export interface DigitalIdProvidersDocumentSelectionScreenProps extends Omit<Pri
  * Figma: `Document Chooser` (27753:8099) and the full list (27703:4895).
  *
  * Two of Core's card lists, each under a section label, after a "Viewing
- * options for" country line with Core's flag. Every row is Core's; the
- * providers carry Core's generic `digital-id-web` card icon until their logos
- * arrive from the backend catalog (DEVIATIONS #DIP-1), and the Identity Card
+ * options for" country line with Core's flag. Every row is Core's; a
+ * provider leads with its logo from the backend catalog, or Core's generic
+ * `digital-id-web` card icon when it has none (DEVIATIONS #DIP-1), and the Identity Card
  * row has no second line, which Core's row cannot draw (#DIP-3).
  */
 export declare const DigitalIdProvidersDocumentSelectionScreen: React.ForwardRefExoticComponent<DigitalIdProvidersDocumentSelectionScreenProps & React.RefAttributes<HTMLDivElement>>;

package/dist/DigitalIdProvidersDocumentSelectionScreen.js

@@ -12,9 +12,9 @@ import './DigitalIdProvidersLayout.css';
  * Figma: `Document Chooser` (27753:8099) and the full list (27703:4895).
  *
  * Two of Core's card lists, each under a section label, after a "Viewing
- * options for" country line with Core's flag. Every row is Core's; the
- * providers carry Core's generic `digital-id-web` card icon until their logos
- * arrive from the backend catalog (DEVIATIONS #DIP-1), and the Identity Card
+ * options for" country line with Core's flag. Every row is Core's; a
+ * provider leads with its logo from the backend catalog, or Core's generic
+ * `digital-id-web` card icon when it has none (DEVIATIONS #DIP-1), and the Identity Card
  * row has no second line, which Core's row cannot draw (#DIP-3).
  */
 export const DigitalIdProvidersDocumentSelectionScreen = forwardRef(({ strings, providerCount, onOptionSelect, screenId = 'digital-id-providers-document-selection', overrides, onAction, ...shell }, ref) => {
@@ -29,6 +29,7 @@ export const DigitalIdProvidersDocumentSelectionScreen = forwardRef(({ strings,
                                 { icon: 'passport', title: copy.passportLabel, onClick: () => choose({ kind: 'passport' }) },
                             ] })] }), _jsxs("section", { className: "digital-id-providers-section", children: [_jsx("p", { className: "digital-id-providers-section__label", children: copy.providersSectionLabel }), _jsx(PrizmaCardListVerificationOptions, { items: providers.map(provider => ({
                                 icon: 'digital-id-web',
+                                logo: provider.logo,
                                 title: provider.label,
                                 onClick: () => choose({ kind: 'provider', providerId: provider.id }),
                             })) })] })] }) }));

package/dist/DigitalIdProvidersLayout.css

@@ -45,15 +45,3 @@
   line-height: var(--prizma-body-m-regular-line-height);
   letter-spacing: var(--prizma-body-m-regular-letter-spacing);
 }
-
-/* Redirecting — the spinner and its copy sit at the middle of the screen.
- * With the header hidden, archetype C still reserves the nav row above the
- * content and centres the column in what is left, so the block lands ~63px
- * low. Mirroring that reserve below — status bar, the nav's gap and height,
- * the column's own top padding (ScreenNav.css, ScreenLayout.css) — balances
- * it on the shell's midline. */
-.digital-id-providers-redirect .prizma-screen-layout__content--centered {
-  padding-bottom: calc(
-    var(--pcs-status-bar, 47px) + var(--prizma-spacing-12) + 44px + var(--prizma-spacing-24)
-  );
-}

package/dist/DigitalIdProvidersRedirectScreen.d.ts

@@ -3,7 +3,6 @@ import { type PrizmaProcessingScreenProps } from './ProcessingScreen';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
 import type { DigitalIdProvidersStrings } from './DigitalIdProvidersStrings';
 import './ScreenLayout.css';
-import './DigitalIdProvidersLayout.css';
 export interface DigitalIdProvidersRedirectScreenProps extends Omit<PrizmaProcessingScreenProps, 'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'> {
     /** Module copy — this screen reads the `redirecting` slice. */
     strings: DigitalIdProvidersStrings;
@@ -17,8 +16,8 @@ export interface DigitalIdProvidersRedirectScreenProps extends Omit<PrizmaProces
  * archetype (GUIDELINES.md §6-C). Figma: the `1-18-1-id-hold-on` instance in
  * the web full flow (27707:9281), with the module's own copy. The Web SDK's
  * `digitalIdRedirect` phases `loading` and `redirecting` both look like this.
- * The block is centred on the whole screen, not below the hidden nav's
- * reserved row (DigitalIdProvidersLayout.css).
+ * Built like Core's other processing screens: the archetype as-is, with the
+ * logo nav and the footer tag (DEVIATIONS #DIP-9).
  */
 export declare const DigitalIdProvidersRedirectScreen: React.ForwardRefExoticComponent<DigitalIdProvidersRedirectScreenProps & React.RefAttributes<HTMLDivElement>>;
 export default DigitalIdProvidersRedirectScreen;

package/dist/DigitalIdProvidersRedirectScreen.js

@@ -3,16 +3,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { PrizmaProcessingScreen } from './ProcessingScreen';
 import './ScreenLayout.css';
-import './DigitalIdProvidersLayout.css';
 /**
  * Digital ID Providers — "Redirecting for verification…", the wait before the
  * browser leaves for the provider's site, on the `PrizmaProcessingScreen`
  * archetype (GUIDELINES.md §6-C). Figma: the `1-18-1-id-hold-on` instance in
  * the web full flow (27707:9281), with the module's own copy. The Web SDK's
  * `digitalIdRedirect` phases `loading` and `redirecting` both look like this.
- * The block is centred on the whole screen, not below the hidden nav's
- * reserved row (DigitalIdProvidersLayout.css).
+ * Built like Core's other processing screens: the archetype as-is, with the
+ * logo nav and the footer tag (DEVIATIONS #DIP-9).
  */
-export const DigitalIdProvidersRedirectScreen = forwardRef(({ strings, screenId = 'digital-id-providers-redirecting', showHeader = false, showFooter = false, overrides, onAction, className, ...shell }, ref) => (_jsx(PrizmaProcessingScreen, { ref: ref, status: "loading", title: strings.redirecting.title, subtitle: strings.redirecting.subtitle, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, showHeader: showHeader, showFooter: showFooter, screenId: screenId, overrides: overrides, onAction: onAction, className: ['digital-id-providers-redirect', className].filter(Boolean).join(' '), ...shell })));
+export const DigitalIdProvidersRedirectScreen = forwardRef(({ strings, screenId = 'digital-id-providers-redirecting', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaProcessingScreen, { ref: ref, status: "loading", title: strings.redirecting.title, subtitle: strings.redirecting.subtitle, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
 DigitalIdProvidersRedirectScreen.displayName = 'DigitalIdProvidersRedirectScreen';
 export default DigitalIdProvidersRedirectScreen;

package/dist/DigitalIdProvidersStrings.d.ts

@@ -5,6 +5,10 @@ export interface DigitalIdProvidersOption {
     id: string;
     /** "iDIN", "itsme", "CA DMV Wallet"… */
     label: string;
+    /** The provider's logo tile (an image URL), from the backend catalog.
+     *  Absent → Core's generic `digital-id-web` card icon. Samples ship under
+     *  `samples/digital-id-providers/`. */
+    logo?: string;
 }
 /** What the person picked: a physical document, or a provider by its id. */
 export type DigitalIdProvidersSelection = {

package/dist/FaceCaptureLayout.css

@@ -50,6 +50,156 @@
   }
 }
 
+/* ── Landscape phones: the ring holds its 335, the stack changes axis ────────
+ * The capture half of ScreenLayout.css's landscape block (#F-39). A phone
+ * held sideways is 375 to 440 tall and the portrait stack needs ~557 (nav,
+ * Spacing/40, the 335 ring, Spacing/32, instruction, footer): on the 844 x
+ * 390 frame the ring ran 48 past the bottom of the panel, the instruction and
+ * the shutter were below the frame entirely and the bottom-anchored tag drew
+ * across the ring (measured on the Core Lab canvas, 2026-10-20). The ring is
+ * not what gives ground (#20, Camila 2026-10-14) and nothing stacked under it
+ * can fit, so the component's column becomes two ZONES side by side: the ring
+ * at the left, vertically centred, the instruction beside it filling the rest,
+ * and on the manual screen the shutter at the right edge. 375 − 335 leaves 20 of air
+ * above and below the ring on the shortest phone, so it fits at full size.
+ *
+ * The instruction stays INSIDE `PrizmaSelfieCapture` (#12/#14): the root
+ * changes axis, the way #20 already re-seats its padding and gap from this
+ * file, and no copy leaves the component. Three decisions:
+ *
+ * · The ring is pinned to the LEFT edge, not centred with its neighbours, so
+ *   it is in the same place on every live state (auto has an instruction
+ *   beside it, manual an instruction and a shutter); once it has dissolved
+ *   into the spinner or the verdict mark there is nothing beside it and the
+ *   stage centres: a ring that moves as the
+ *   step advances is the glitch #VS-24 exists for. The uploading / processing
+ *   spinner therefore dissolves in the ring's own seat at the left, with the
+ *   right zone empty for the second it lasts.
+ * · The instruction takes whatever width is left and centres in it. On the
+ *   844 panel that is 437; on the 667 SE it is 172 beside a shutter, which
+ *   wraps the manual line to five lines of H4 (104 tall) inside a 375 panel.
+ * · The SHUTTER sits at the right edge, where the thumb is on a phone held
+ *   sideways: the same seat every native camera app gives it in landscape.
+ *   Beside the ring would put it under the user's palm.
+ *
+ * The content column stops reserving the footer under the ring
+ * (ScreenLayout.css's block): with the reserve the ring had 328 to sit in;
+ * the tag itself goes, see below. The "Need more time" notice sits on the
+ * right zone's rail. Outside the query not one declaration
+ * exists. DEVIATIONS #F-39. */
+@container pcs-screen ((orientation: landscape) and (max-height: 500px)) {
+  /* The root becomes the frame the zones are anchored in. Anchored, not a
+   * flex row: Core Lab's scene engine centres the IN-FLOW children of a row
+   * as a group and draws the stage from its own pinned box, which put the
+   * instruction across the ring on the canvas while the browser drew it
+   * right. Anchored boxes are the one layout the engine reproduces exactly
+   * (the tag, the capture strip and the notice already rely on it), and the
+   * browser lays them out the same way, so the canvas IS the SDK. */
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture {
+    position: relative;
+    display: block;
+    width: 100%;
+    max-width: none;
+    height: 100%;
+    padding: 0;
+    /* The ring's measure, stated once: Core's own Capture / Selfie frame width
+     * (SelfieCapture.css caps the ROOT at 335 and the stage takes 100% of it;
+     * with the root now the full width the cap moves to the stage, same
+     * number, same source). A host that must fit the ring between its own
+     * bars overrides this one property (Core Lab does, `[data-pcs-safe]`). */
+    --pcs-ring: 335px; /* hardcoded — Core's Capture / Selfie frame width; not a token */
+    /* The instruction's box beside the ring: 320 at most (the width a two-line
+     * H4 instruction takes), less when the column has less, and on manual
+     * capture less the shutter's 112 rail at the right edge. */
+    --pcs-instruction: min(320px, calc(100% - var(--pcs-ring) - var(--prizma-spacing-24)));
+    /* Ring, Spacing/24, instruction: ONE pair, centred on the column. Round 2
+     * pinned the ring at the left edge and let the instruction float in the
+     * middle of whatever was left, which at 844 put the words 230 from the
+     * ring (Camila, 2026-10-23: "the face frame looks too separate from the
+     * feedback"). Still anchored boxes, not a flex row, for the canvas. */
+    --pcs-pair: calc(var(--pcs-ring) + var(--prizma-spacing-24) + var(--pcs-instruction));
+    --pcs-pair-left: calc((100% - var(--pcs-pair)) / 2);
+  }
+
+  /* Manual capture: the pair centres in what is left of the shutter's rail. */
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture:has(> .prizma-selfie-capture__shutter) {
+    --pcs-instruction: min(320px, calc(100% - var(--pcs-ring) - var(--prizma-spacing-24) - var(--prizma-icon-size-3xl) - 2 * var(--prizma-spacing-24)));
+    --pcs-pair-left: calc((100% - var(--prizma-icon-size-3xl) - 2 * var(--prizma-spacing-24) - var(--pcs-pair)) / 2);
+  }
+
+  /* The ring: the pair's left edge, centred on the panel's height. */
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture > .prizma-selfie-capture__stage {
+    position: absolute;
+    left: var(--pcs-pair-left);
+    top: calc(50% - var(--pcs-ring) / 2);
+    width: var(--pcs-ring);
+    height: var(--pcs-ring); /* the same measure, stated outright so an engine without aspect-ratio draws the square */
+    max-width: none;
+  }
+
+  /* A stage with nothing beside it centres: uploading, processing and the
+   * success verdict have dissolved the ring into a spinner or a mark and
+   * carry no instruction, no shutter, so there is no second zone to hold
+   * (Camila, 2026-10-21: "it has space to be in the centre, so it should").
+   * The live capture states keep the ring at the left so it never moves
+   * between them; the dissolve is the one step where the stage changes
+   * anyway. */
+  .prizma-screen-layout__content--capture
+    > .prizma-selfie-capture:not(
+      :has(> .prizma-selfie-capture__feedback, > .prizma-selfie-capture__shutter, > .prizma-selfie-capture__status)
+    )
+    > .prizma-selfie-capture__stage {
+    left: calc(50% - var(--pcs-ring) / 2);
+  }
+
+  /* The instruction (and overlay mode's status band): Spacing/24 right of the
+   * ring, in its own box, vertically centred on the ring's axis, the words
+   * starting at the box's left edge so they read as the ring's caption rather
+   * than as a second column. */
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture > .prizma-selfie-capture__status,
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture > .prizma-selfie-capture__feedback {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: calc(var(--pcs-pair-left) + var(--pcs-ring) + var(--prizma-spacing-24));
+    width: var(--pcs-instruction);
+    right: auto;
+    margin: 0;
+    max-width: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: start;
+  }
+
+  /* The shutter: right edge, centred on the panel's height. 64 is the strip's
+   * own measure (`--pcs-capture-chrome-space` reserves the same token). */
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture > .prizma-selfie-capture__shutter {
+    position: absolute;
+    right: 0;
+    top: calc(50% - var(--prizma-icon-size-3xl) / 2);
+    width: var(--prizma-icon-size-3xl);
+    max-width: none;
+  }
+
+  /* The verified tag goes on landscape capture screens (Camila, 2026-10-21:
+   * "somewhere at the bottom or not at all"). Bottom centre, its one seat, is
+   * where the ring's lower edge is: on the SE the ring spans 20 to 355 and the
+   * tag 329 to 359. Moving the ring off centre to clear it would put the ring
+   * in a different place on this screen than on the uploading one, and a
+   * feed-open capture screen already drops the client logo for the same
+   * reason (dense, 2026-08-18): the tag comes back on the very next screen. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__content--capture) .prizma-screen-layout__footer {
+    display: none;
+  }
+
+  /* The notice keeps the rail the tag used to reserve, in the right zone. */
+  .prizma-screen-shell .prizma-screen-layout__capture-notice {
+    left: 50%;
+    bottom: var(--prizma-spacing-16);
+  }
+}
+
 /* ── Big panels: the ring grows to the column and the stack moves down ───────
  * The mirror of the block above, and the capture counterpart of the tutorial's
  * #F-36. On the 768 × 1024 iPad the column widens to 468 but the stack kept

package/dist/FormScreen.css

@@ -91,6 +91,41 @@
   flex-shrink: 0;
 }
 
+/* ── Short panels: a field stack that does not fit pans ──────────────────────
+ * The same decision archetype G's list took in #F-38, for archetype E. The
+ * stack is `flex: 1; min-height: 0`, so on a short panel it shrinks to what
+ * the title block and the CTA leave, and its rows, which keep their height,
+ * run straight on under the anchored CTA: on the closed iPhone Duo (678,
+ * measured 2026-10-29, the day the Duo presets opened to every module) eKYC's
+ * "Enter your details" drew Continue across its Date of Birth field and the
+ * empty-fields error painted its "This field is required" over the verified
+ * tag; Advanced Signature's accept screen lost its third required checkbox
+ * entirely on the open panel (626) while "Finish signing" showed enabled.
+ * The archetype already owns the answer as `scrollFields` (`--scroll`), opted
+ * into by the screens that know they are long (CURP, the consents, eKYB,
+ * the long forms, OCR review); a short panel is the same situation decided
+ * by the panel rather than the screen, so under 720 every stack takes the
+ * variant's declarations: the rows pan, Spacing/16 of air stays above the
+ * CTA, no scrollbar is drawn, and the title, the CTA and the tag hold still.
+ * Rows keep their intrinsic height for the same reason the variant's do
+ * (#QS-1). `--end` keeps hanging its rows off the bottom when they fit.
+ * Outside the query not one declaration exists. DEVIATIONS #F-40. */
+@container pcs-screen (max-height: 720px) {
+  .prizma-form-screen__fields {
+    overflow-y: auto;
+    margin-bottom: var(--prizma-spacing-16);
+    scrollbar-width: none;
+  }
+
+  .prizma-form-screen__fields::-webkit-scrollbar {
+    display: none;
+  }
+
+  .prizma-form-screen__fields > * {
+    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

package/dist/IdCaptureLayout.css

@@ -312,3 +312,66 @@
 .id-capture-on-surface .prizma-id-capture__encrypted {
   color: var(--prizma-text-body-800-primary);
 }
+
+/* ── Short panels: the verdict still shrinks, the manual stage keeps its caption
+ * Two more rows for the 720 line (SHORT-PANELS.md), found the day the iPhone
+ * Duo presets opened to every module (2026-10-29), both on the open panel
+ * (626) and neither at 678 or above.
+ *
+ * (a) The result screens with a captured still (every error verdict, the
+ * success verdicts, Classification) run on archetype F, whose column pans
+ * under 720 (#F-37). The still is Core's `PrizmaIdCapture` in its filled
+ * state: 342 wide, its height from the variant's aspect, the encrypted row
+ * under it. At 626 the stack is 21 to 39px too tall, so the column panned and
+ * the still lost its bottom border and its caption, or the caption was
+ * squashed to a sliver (the row is a flex child with no floor). Step 1 of the
+ * order of concessions, the same mechanism as the vertical stage frame above:
+ * the still is the one part of the column that gives up height, its aspect
+ * ratio narrows the width to match, every other child keeps its height, and
+ * the caption stays a full row. With room to spare the still never shrinks.
+ * DEVIATIONS #IDC-33.
+ *
+ * (b) On the manual stages the strip carries the numbered tooltip above the
+ * shutter (`PrizmaCaptureManual`, absolute, `bottom: 100%` of the strip).
+ * The viewfinder column reserves the strip's footprint
+ * (`--pcs-capture-chrome-space`, ScreenLayout.css) but not the tooltip's, so
+ * on a panel short enough for the frame to sit flush on that reserve the
+ * tooltip landed on the "All data is encrypted" row under the frame. When the
+ * strip has a tooltip, the column reserves it too: the multiline Tooltip's
+ * two lines plus its Spacing/16 padding, plus the zone's Spacing/8 gap. The
+ * shortfall goes where this stylesheet already sends it, the frame. At 844
+ * the bottom band has that much slack and the frame would not move, but the
+ * rule is gated with the rest so the reference stays byte-identical.
+ * DEVIATIONS #IDC-34. */
+@container pcs-screen (max-height: 720px) {
+  .id-capture-on-surface .prizma-screen-layout__content--centered > :not(.prizma-id-capture) {
+    flex-shrink: 0;
+  }
+  .id-capture-on-surface .prizma-screen-layout__content--centered > .prizma-id-capture {
+    flex: 0 1 auto;
+    min-height: 0;
+  }
+  .id-capture-on-surface .prizma-screen-layout__content--centered > .prizma-id-capture > :not(.prizma-id-capture__frame) {
+    flex-shrink: 0;
+  }
+  .id-capture-on-surface .prizma-screen-layout__content--centered > .prizma-id-capture > .prizma-id-capture__frame {
+    flex: 0 1 auto;
+    min-height: 0;
+    width: auto;
+    max-width: 100%;
+    /* The still's natural height at the column's width (the column is capped
+     * at 390 on any panel, less its two Spacing/24 gutters), so with room to
+     * spare nothing changes and under pressure it is the first to give. */
+    flex-basis: calc((min(100cqw, 390px) - 2 * var(--prizma-spacing-24)) * 220 / 350);
+  }
+  .id-capture-on-surface .prizma-screen-layout__content--centered > .prizma-id-capture--passport > .prizma-id-capture__frame {
+    flex-basis: calc((min(100cqw, 390px) - 2 * var(--prizma-spacing-24)) * 254 / 350);
+  }
+
+  .prizma-screen-shell:has(.prizma-screen-layout__capture-strip .prizma-capture-manual__tooltip-zone) .prizma-viewfinder__content {
+    padding-bottom: calc(
+      var(--pcs-capture-chrome-space) + var(--prizma-spacing-8) +
+        2 * var(--prizma-tooltip-m-line-height) + 2 * var(--prizma-spacing-16)
+    );
+  }
+}

package/dist/RotateToPortraitScreen.css

@@ -0,0 +1,162 @@
+/* Rotate to portrait — the prompt a capture screen shows on a phone held
+ * sideways (RotateToPortraitScreen.tsx, DEVIATIONS #F-42).
+ *
+ * ONLY what the foundation does not already own. The column, its centring,
+ * the glyph slot and its ink, the Title's own 16 / 12 rhythm and 420 cap all
+ * come from `ScreenLayout.css` and Core's Title. What is new here is the
+ * glyph's motion and the landscape seat of the column. Every value is a token
+ * except the bank's stroke weight, which is stated once and said so.
+ */
+
+/* ── The live region wrapper ─────────────────────────────────────────────────
+ * Full width so Core's Title centres inside it exactly as it would as a direct
+ * child of the centred column (the Title is `width: 100%` capped at its own
+ * Title/Max-width and centres with `margin-inline: auto`). */
+.prizma-rotate-to-portrait__status {
+  width: 100%;
+}
+
+/* ── The mark: Title/Icon/Size, the status mark's box ────────────────────────
+ * Sits inside the foundation's `__glyph` row, which centres it and sets the
+ * ink (`__glyph--neutral` → Icon/Neutral/800). Two layers share the box: the
+ * turn (variant A) and the static icon (variant C), one shown at a time. */
+.prizma-rotate-to-portrait__mark {
+  position: relative;
+  display: block;
+  width: var(--prizma-title-icon-size);
+  height: var(--prizma-title-icon-size);
+}
+
+.prizma-rotate-to-portrait__turn {
+  position: absolute;
+  inset: 0;
+  display: block;
+}
+
+/* The arc layer and Core's `mobile` icon fill the box; the arc runs past the
+ * 24 grid on two sides (its radius is the phone's half diagonal plus the
+ * stroke), so the layer must not clip. The bank icon ships `width="24"`
+ * attributes; CSS sizes it to the box, as `__glyph > svg` does for the
+ * Wi-Fi mark. */
+.prizma-rotate-to-portrait__turn > svg {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+/* The phone turns about its own centre (the icon's 12,12). At rest it is the
+ * way the phone is held: top edge to the left, −90. */
+.prizma-rotate-to-portrait__phone {
+  transform-origin: 50% 50%;
+  transform: rotate(-90deg);
+  animation: prizma-rotate-to-portrait-turn var(--prizma-motion-duration-loop) linear infinite;
+}
+
+/* The arc the top edge travels, and the arrowhead where it lands. Drawn at
+ * the bank's own outline weight on the bank's 24 grid, so at Title/Icon/Size
+ * it reads as one stroke with the phone. Always the icon's own colour, never
+ * faded in or out (Camila, 2026-11-03: a colour that fades while the phone
+ * turns, and an arrowhead whose ink arrives late, is not the design). The arc
+ * is REVEALED by its dash, not by opacity; what is not drawn yet is hidden
+ * with `visibility`, which steps and never fades, and also hides the round
+ * cap a fully offset dash would otherwise show as a dot at the path's end. */
+.prizma-rotate-to-portrait__arc-path,
+.prizma-rotate-to-portrait__arc-head {
+  stroke: currentColor;
+  stroke-width: 1.8; /* hardcoded — the icon bank's outline stroke on its 24 grid (core/icons/bank); not a token */
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  visibility: hidden;
+}
+
+.prizma-rotate-to-portrait__arc-path {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: prizma-rotate-to-portrait-arc var(--prizma-motion-duration-loop) linear infinite;
+}
+
+.prizma-rotate-to-portrait__arc-head {
+  animation: prizma-rotate-to-portrait-head var(--prizma-motion-duration-loop) linear infinite;
+}
+
+/* Held the other way (top edge to the right, +90): the phone starts there and
+ * the arc mirrors about the box's centre, so the glyph turns the way the
+ * person has to. */
+.prizma-rotate-to-portrait__mark--top-right .prizma-rotate-to-portrait__phone {
+  transform: rotate(90deg);
+  animation-name: prizma-rotate-to-portrait-turn-from-right;
+}
+
+.prizma-rotate-to-portrait__mark--top-right .prizma-rotate-to-portrait__arc {
+  transform: scaleX(-1);
+}
+
+/* One cycle is Motion/Duration/Loop (3200, the ID tutorial illustration's
+ * loop): hold at the held angle, turn on Easing/Standard while the arc draws
+ * under it, hold upright with the arrowhead on, then start again on a cut.
+ * Nothing fades: the phone keeps its ink the whole way, the arc appears as it
+ * is drawn and the arrowhead the moment the arc reaches it (Camila,
+ * 2026-11-03). The turn's percentages are the playground's, measured as the
+ * read Camila picked (round 2, 2026-10-29); the fade-out that used to mask
+ * the loop's reset is gone with the rest of the fades. */
+@keyframes prizma-rotate-to-portrait-turn {
+  0%, 15% { transform: rotate(-90deg); animation-timing-function: var(--prizma-motion-easing-standard); }
+  55%, 100% { transform: rotate(0deg); }
+}
+
+@keyframes prizma-rotate-to-portrait-turn-from-right {
+  0%, 15% { transform: rotate(90deg); animation-timing-function: var(--prizma-motion-easing-standard); }
+  55%, 100% { transform: rotate(0deg); }
+}
+
+@keyframes prizma-rotate-to-portrait-arc {
+  0%, 14.9% { stroke-dashoffset: 100; visibility: hidden; }
+  15% { stroke-dashoffset: 100; visibility: visible; animation-timing-function: var(--prizma-motion-easing-standard); }
+  55%, 100% { stroke-dashoffset: 0; visibility: visible; }
+}
+
+@keyframes prizma-rotate-to-portrait-head {
+  0%, 54.9% { visibility: hidden; }
+  55%, 100% { visibility: visible; }
+}
+
+/* ── Reduced motion: variant C ───────────────────────────────────────────────
+ * Core's static `rotate-phone` bank icon says the same thing without moving.
+ * Same media query every Core component with motion uses (Button, Capture
+ * manual, the ID feedback illustration). The static icon is a direct child of
+ * the mark, sized to the box like the turn. */
+.prizma-rotate-to-portrait__static {
+  display: none;
+  width: 100%;
+  height: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .prizma-rotate-to-portrait__turn {
+    display: none;
+  }
+
+  .prizma-rotate-to-portrait__static {
+    display: block;
+  }
+}
+
+/* ── Landscape phones: the column's seat ─────────────────────────────────────
+ * The same line as every landscape rule (#F-39, LANDSCAPE.md). In portrait the
+ * column wears the foundation's `--no-nav` reserve (status bar + Spacing/24)
+ * and nothing is declared here. Sideways, the column takes the seat the
+ * result and tutorial columns take: Spacing/8 under the status-bar reserve
+ * (47 by default, the host's value otherwise) and Spacing/16 off the bottom,
+ * the playground's measured values. The Title then centres in what is left:
+ * glyph 40, Spacing/16, H2 28, Spacing/12, two lines of H5 37 = 133 in the
+ * 375 SE's 304. (0,2,0) so it outranks `--no-nav`'s own (0,1,0) regardless of
+ * import order. Outside the query not one declaration exists. */
+@container pcs-screen ((orientation: landscape) and (max-height: 500px)) {
+  .prizma-screen-shell .prizma-rotate-to-portrait__content {
+    padding-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-8));
+    padding-bottom: var(--prizma-spacing-16);
+  }
+}

package/dist/RotateToPortraitScreen.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import { type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { RotateToPortraitStrings } from './RotateToPortraitStrings';
+import './ScreenLayout.css';
+import './RotateToPortraitScreen.css';
+/**
+ * Where the phone's TOP edge points while it is held sideways. The SDK reads
+ * the device angle (−90 or +90) and the glyph turns the phone back upright
+ * from that side, so it always turns the way the person has to; the arc
+ * beside it mirrors with it (playground DECISION.md, round 2).
+ */
+export type RotateToPortraitTopEdge = 'left' | 'right';
+export interface RotateToPortraitScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+    /** The prompt's copy. Shared by every capture module, see the contract. */
+    strings: RotateToPortraitStrings;
+    /** Which side the phone's top edge is on. Default `left`. */
+    topEdge?: RotateToPortraitTopEdge;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    /** Accepted for parity with every other screen; this one has no action.
+     *  Turning the phone is the action, and the camera reopens on its own. */
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Rotate to portrait — the prompt a capture screen shows on a phone held
+ * sideways. Shared by every capture module; Face Capture is the first consumer.
+ *
+ * Capture screens ALWAYS stay portrait (Camila, 2026-11-03). While the person
+ * is on one (every `capturing-*` state, the extend-time offer, manual) and the
+ * phone is held sideways, the SDK closes the camera and shows this screen in
+ * its place; the camera reopens on its own when the phone is upright again.
+ * This is the "essential" exception of WCAG 2.1 SC 1.3.4 Orientation the
+ * accessibility auditors agreed to on 2026-10-26 (precedent: Bicycle Health
+ * accepted portrait-only capture). The sideways capture layout in
+ * `FaceCaptureLayout.css` (#F-39) stays as the longer-term full-compliance
+ * track and is never reached while this screen is shown.
+ *
+ * Anatomy: archetype C (Processing, GUIDELINES.md §6-C) under the landscape
+ * rules of `LANDSCAPE.md`: no logo nav, no verified tag, the status-bar
+ * reserve kept, the Title centred in what is left of the height, Core's own
+ * 420 max. Camera closed, so it is an ordinary screen on the app theme, like
+ * uploading (the 2026-08-18 rule): no theme pin. The screen is only ever shown
+ * in a landscape shell, but it renders the same centred stack in the portrait
+ * reference frame, which is how Latest designs shows every screen in its grid,
+ * so nothing here hides outside the landscape query.
+ *
+ * The glyph is variant A of the playground
+ * (`artefactos/playgrounds/2026-10-29__rotate-to-portrait-prompt`): Core's
+ * `mobile` bank icon turning about its centre from the way the phone is held
+ * to upright, with the arc its top edge travels drawn beside it and the
+ * arrowhead landing where the top ends up, at Title/Icon/Size (40, the status
+ * mark's box), Icon/Neutral/800, on Core's loop duration and standard easing.
+ * It rides the foundation's `__glyph` slot above the Title, the same seat the
+ * Wi-Fi mark takes on every noConnection screen (DEVIATIONS #10), because
+ * Core's `PrizmaTitle.icon` allowlist is `status | spinner | none`. Under
+ * `prefers-reduced-motion: reduce` it is Core's static `rotate-phone` icon
+ * (variant C). The glyph is decorative; the Title is a polite live region so
+ * a screen reader hears the headline when the prompt appears.
+ *
+ * No button: turning the phone is the action. DEVIATIONS #F-42.
+ */
+export declare const RotateToPortraitScreen: React.ForwardRefExoticComponent<RotateToPortraitScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default RotateToPortraitScreen;