@incodetech/prizma-core-screens 0.2.18 → 0.2.20

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;

package/dist/RotateToPortraitScreen.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconMobile, IconRotatePhone } from '@incodetech/prizma-core-icons';
+import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
+import { PrizmaScreenShell } from './ScreenShell';
+import './ScreenLayout.css';
+import './RotateToPortraitScreen.css';
+/**
+ * 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 const RotateToPortraitScreen = forwardRef(({ strings, topEdge = 'left', screenId = 'rotate-to-portrait', overrides, 
+// No CTA here, so nothing ever fires it; destructured so it stays off
+// the shell's DOM node, like `screenId`.
+onAction, className, ...shell }, ref) => {
+    void screenId;
+    void onAction;
+    const left = overrides?.align === 'left';
+    return (_jsx(PrizmaScreenShell, { ref: ref, className: ['prizma-rotate-to-portrait', className].filter(Boolean).join(' '), ...shell, children: _jsxs("div", { className: "prizma-screen-layout__content prizma-screen-layout__content--centered prizma-screen-layout__content--no-nav prizma-rotate-to-portrait__content", children: [_jsx("span", { className: [
+                        'prizma-screen-layout__glyph',
+                        'prizma-screen-layout__glyph--neutral',
+                        left ? 'prizma-screen-layout__glyph--left' : '',
+                    ]
+                        .filter(Boolean)
+                        .join(' '), "aria-hidden": "true", children: _jsxs("span", { className: [
+                            'prizma-rotate-to-portrait__mark',
+                            topEdge === 'right' ? 'prizma-rotate-to-portrait__mark--top-right' : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' '), children: [_jsxs("span", { className: "prizma-rotate-to-portrait__turn", children: [_jsxs("svg", { className: "prizma-rotate-to-portrait__arc", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { className: "prizma-rotate-to-portrait__arc-path", pathLength: 100, d: "M -2.5 12 A 14.5 14.5 0 0 1 12 -2.5" }), _jsx("path", { className: "prizma-rotate-to-portrait__arc-head", d: "M 9.7 -4.9 L 12 -2.5 L 9.7 -0.1" })] }), _jsx(IconMobile, { className: "prizma-rotate-to-portrait__phone" })] }), _jsx(IconRotatePhone, { className: "prizma-rotate-to-portrait__static" })] }) }), _jsx("div", { className: "prizma-rotate-to-portrait__status", role: "status", "aria-live": "polite", children: _jsx(PrizmaTitle, { variant: left ? 'left' : 'centered', title: strings.title, showSubtitle: Boolean(strings.subtitle), subtitle: strings.subtitle, icon: { type: 'none' } }) })] }) }));
+});
+RotateToPortraitScreen.displayName = 'RotateToPortraitScreen';
+export default RotateToPortraitScreen;

package/dist/RotateToPortraitStrings.d.ts

@@ -0,0 +1,8 @@
+export interface RotateToPortraitStrings {
+    /** H2 — "Turn your phone upright". */
+    title: string;
+    /** H5 — "Hold it vertically to continue with your verification."
+     *  Optional: a host that only wants the headline omits it and the Title
+     *  renders alone, Core's own `showSubtitle` toggle. */
+    subtitle?: string;
+}

package/dist/RotateToPortraitStrings.js

@@ -0,0 +1,20 @@
+// Rotate to portrait — copy contract.
+//
+// NOT a module. The one prompt every capture module shows while the phone is
+// held sideways (Face Capture today; ID Capture, Document Capture and Video
+// Selfie as they adopt it). Capture screens stay portrait: this screen is one
+// step before them, shown while the phone is sideways, and the camera opens
+// once the phone is upright, so there is no button and no action in the contract
+// (Camila, 2026-11-03; the auditors' WCAG 2.1 SC 1.3.4 reading of 2026-10-26,
+// "essential" exception for the capture screens).
+//
+// The copy is module-agnostic on purpose: one sentence pair serves every
+// capture module, so a host writes it once. Same rule as every other contract
+// here: all copy via props, no hardcoded English (GUIDELINES.md §9).
+//
+// ⚠️ The English below the type is PROPOSED copy from the playground
+// (artefactos/playgrounds/2026-10-29__rotate-to-portrait-prompt). Before this
+// screen ships in the SDK the two strings must come from the SDK's own
+// localization tables; nothing here is hand-translated, and no language is
+// added to this file.
+export {};

package/dist/ScreenLayout.css

@@ -889,7 +889,10 @@
    * middle, so the band keeps sitting at the bottom of the column, above the
    * tag, where the portrait has it; the title block stays under the logo nav.
    * Measured on the SE (375): nav 56, title block 77, disclaimer and CTA 105,
-   * the tag's reserve 62, Spacing/16 twice: 316, so the disclaimer stays too.
+   * the tag's reserve 62, Spacing/16 twice: 316. The disclaimer fit, and
+   * stayed until 2026-11-03, when Camila took it off the landscape tutorial
+   * as well (below): with the art gone the line between the subtitle and the
+   * CTA read as a second subtitle, and the task is in the title block.
    * Addressed by the archetype's own `--tutorial` class (TutorialScreen.tsx),
    * not by `:has()` on the illustration slot: Core Lab's converter drops
    * hidden subtrees before the scene is laid out, so a rule that needed the
@@ -917,6 +920,12 @@
     display: none;
   }
 
+  /* The disclaimer goes with the art (Camila, 2026-11-03): title, subtitle,
+   * CTA. Portrait keeps it; outside the query this rule does not exist. */
+  .prizma-screen-layout__content--tutorial > .prizma-screen-layout__band > .prizma-disclaimer {
+    display: none;
+  }
+
   /* The slot that held the art keeps only its flexible height, not its
    * Spacing/16 padding above and below: with the illustration gone those 32
    * are empty, and on the SE they were what pushed the CTA onto the tag once

package/dist/index.d.ts

@@ -166,6 +166,8 @@ export { type LoadersStrings, type LoadersVariant, type LoadersCopy } from './Lo
 export { LoaderScreen, type LoaderScreenProps } from './LoaderScreen';
 export { type ErrorScreensStrings, type ErrorScreensVariant, type ErrorScreensCopy, } from './ErrorScreensStrings';
 export { ErrorScreensScreen, type ErrorScreensScreenProps } from './ErrorScreensScreen';
+export { type RotateToPortraitStrings } from './RotateToPortraitStrings';
+export { RotateToPortraitScreen, type RotateToPortraitScreenProps, type RotateToPortraitTopEdge, } from './RotateToPortraitScreen';
 export { type DemoScreensStrings, type DemoScreensLanguage, type DemoScreensOption, } from './DemoScreensStrings';
 export { DemoScreensConfigScreen, type DemoScreensConfigScreenProps, type DemoScreensConfigState, } from './DemoScreensConfigScreen';
 export { DemoScreensTermsScreen, type DemoScreensTermsScreenProps, } from './DemoScreensTermsScreen';

package/dist/index.js

@@ -145,6 +145,7 @@ export { PermissionsAllowScreen, } from './PermissionsAllowScreen';
 export { PermissionsBrowserStepsScreen, } from './PermissionsBrowserStepsScreen';
 export { LoaderScreen } from './LoaderScreen';
 export { ErrorScreensScreen } from './ErrorScreensScreen';
+export { RotateToPortraitScreen, } from './RotateToPortraitScreen';
 export { DemoScreensConfigScreen, } from './DemoScreensConfigScreen';
 export { DemoScreensTermsScreen, } from './DemoScreensTermsScreen';
 export { DemoScreensLaunchScreen, } from './DemoScreensLaunchScreen';

package/dist/styles.css

@@ -31,6 +31,7 @@
 @import './PhoneInputLayout.css';
 @import './QualifiedSignatureLayout.css';
 @import './ReusabilityLayout.css';
+@import './RotateToPortraitScreen.css';
 @import './ScreenLayout.css';
 @import './ScreenNav.css';
 @import './ScreenShell.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/prizma-core-screens",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "description": "Prizma Design System — SDK module screens: composed, responsive, brand-themeable React screens built from @incodetech/prizma-core-web.",
   "license": "UNLICENSED",
   "type": "module",
@@ -665,6 +665,11 @@
       "types": "./dist/ReviewScreen.d.ts",
       "import": "./dist/ReviewScreen.js"
     },
+    "./rotate-to-portrait-screen": {
+      "source": "./src/RotateToPortraitScreen.tsx",
+      "types": "./dist/RotateToPortraitScreen.d.ts",
+      "import": "./dist/RotateToPortraitScreen.js"
+    },
     "./screen-nav": {
       "source": "./src/ScreenNav.tsx",
       "types": "./dist/ScreenNav.d.ts",
@@ -795,6 +800,7 @@
     "./phone-input-layout.css": "./dist/PhoneInputLayout.css",
     "./qualified-signature-layout.css": "./dist/QualifiedSignatureLayout.css",
     "./reusability-layout.css": "./dist/ReusabilityLayout.css",
+    "./rotate-to-portrait-screen.css": "./dist/RotateToPortraitScreen.css",
     "./screen-layout.css": "./dist/ScreenLayout.css",
     "./screen-nav.css": "./dist/ScreenNav.css",
     "./screen-shell.css": "./dist/ScreenShell.css",
@@ -841,8 +847,8 @@
   },
   "dependencies": {
     "@incodetech/prizma-core-icons": "^0.4.0",
-    "@incodetech/prizma-core-tokens": "^0.17.0",
-    "@incodetech/prizma-core-web": "^0.17.0"
+    "@incodetech/prizma-core-tokens": "^0.18.0",
+    "@incodetech/prizma-core-web": "^0.18.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",

package/src/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/src/RotateToPortraitScreen.tsx

@@ -0,0 +1,162 @@
+import React, { forwardRef } from 'react';
+import { IconMobile, IconRotatePhone } from '@incodetech/prizma-core-icons';
+import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
+import { PrizmaScreenShell, 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 const RotateToPortraitScreen = forwardRef<HTMLDivElement, RotateToPortraitScreenProps>(
+  (
+    {
+      strings,
+      topEdge = 'left',
+      screenId = 'rotate-to-portrait',
+      overrides,
+      // No CTA here, so nothing ever fires it; destructured so it stays off
+      // the shell's DOM node, like `screenId`.
+      onAction,
+      className,
+      ...shell
+    },
+    ref,
+  ) => {
+    void screenId;
+    void onAction;
+    const left = overrides?.align === 'left';
+    return (
+      <PrizmaScreenShell
+        ref={ref}
+        className={['prizma-rotate-to-portrait', className].filter(Boolean).join(' ')}
+        {...shell}
+      >
+        {/* No nav row at all: the prompt never shows a client logo (the
+            landscape rule of 2026-10-23), so the column carries the status-bar
+            reserve itself through the foundation's `--no-nav` class, the way
+            the genericErrors family does (DEVIATIONS #9). */}
+        <div className="prizma-screen-layout__content prizma-screen-layout__content--centered prizma-screen-layout__content--no-nav prizma-rotate-to-portrait__content">
+          <span
+            className={[
+              'prizma-screen-layout__glyph',
+              'prizma-screen-layout__glyph--neutral',
+              left ? 'prizma-screen-layout__glyph--left' : '',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            aria-hidden="true"
+          >
+            <span
+              className={[
+                'prizma-rotate-to-portrait__mark',
+                topEdge === 'right' ? 'prizma-rotate-to-portrait__mark--top-right' : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              {/* Variant A: the turn. The arc is the one drawn addition, a
+                  stroke at the bank's weight on the bank's 24 grid; the phone
+                  is Core's `mobile` icon untouched, rotated by CSS. */}
+              <span className="prizma-rotate-to-portrait__turn">
+                <svg
+                  className="prizma-rotate-to-portrait__arc"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    className="prizma-rotate-to-portrait__arc-path"
+                    pathLength={100}
+                    d="M -2.5 12 A 14.5 14.5 0 0 1 12 -2.5"
+                  />
+                  <path
+                    className="prizma-rotate-to-portrait__arc-head"
+                    d="M 9.7 -4.9 L 12 -2.5 L 9.7 -0.1"
+                  />
+                </svg>
+                <IconMobile className="prizma-rotate-to-portrait__phone" />
+              </span>
+              {/* Variant C: what A degrades to under reduced motion. */}
+              <IconRotatePhone className="prizma-rotate-to-portrait__static" />
+            </span>
+          </span>
+          {/* Core's Title sets `role="status"` itself only for the spinner
+              shape, and its own `role` attribute lands after the spread, so a
+              wrapper carries the live region here. Full width so the Title
+              centres in it exactly as it would in the column. */}
+          <div className="prizma-rotate-to-portrait__status" role="status" aria-live="polite">
+            <PrizmaTitle
+              variant={left ? 'left' : 'centered'}
+              title={strings.title}
+              showSubtitle={Boolean(strings.subtitle)}
+              subtitle={strings.subtitle}
+              icon={{ type: 'none' }}
+            />
+          </div>
+        </div>
+      </PrizmaScreenShell>
+    );
+  },
+);
+RotateToPortraitScreen.displayName = 'RotateToPortraitScreen';
+
+export default RotateToPortraitScreen;

package/src/RotateToPortraitStrings.ts

@@ -0,0 +1,28 @@
+// Rotate to portrait — copy contract.
+//
+// NOT a module. The one prompt every capture module shows while the phone is
+// held sideways (Face Capture today; ID Capture, Document Capture and Video
+// Selfie as they adopt it). Capture screens stay portrait: this screen is one
+// step before them, shown while the phone is sideways, and the camera opens
+// once the phone is upright, so there is no button and no action in the contract
+// (Camila, 2026-11-03; the auditors' WCAG 2.1 SC 1.3.4 reading of 2026-10-26,
+// "essential" exception for the capture screens).
+//
+// The copy is module-agnostic on purpose: one sentence pair serves every
+// capture module, so a host writes it once. Same rule as every other contract
+// here: all copy via props, no hardcoded English (GUIDELINES.md §9).
+//
+// ⚠️ The English below the type is PROPOSED copy from the playground
+// (artefactos/playgrounds/2026-10-29__rotate-to-portrait-prompt). Before this
+// screen ships in the SDK the two strings must come from the SDK's own
+// localization tables; nothing here is hand-translated, and no language is
+// added to this file.
+
+export interface RotateToPortraitStrings {
+  /** H2 — "Turn your phone upright". */
+  title: string;
+  /** H5 — "Hold it vertically to continue with your verification."
+   *  Optional: a host that only wants the headline omits it and the Title
+   *  renders alone, Core's own `showSubtitle` toggle. */
+  subtitle?: string;
+}

package/src/ScreenLayout.css

@@ -889,7 +889,10 @@
    * middle, so the band keeps sitting at the bottom of the column, above the
    * tag, where the portrait has it; the title block stays under the logo nav.
    * Measured on the SE (375): nav 56, title block 77, disclaimer and CTA 105,
-   * the tag's reserve 62, Spacing/16 twice: 316, so the disclaimer stays too.
+   * the tag's reserve 62, Spacing/16 twice: 316. The disclaimer fit, and
+   * stayed until 2026-11-03, when Camila took it off the landscape tutorial
+   * as well (below): with the art gone the line between the subtitle and the
+   * CTA read as a second subtitle, and the task is in the title block.
    * Addressed by the archetype's own `--tutorial` class (TutorialScreen.tsx),
    * not by `:has()` on the illustration slot: Core Lab's converter drops
    * hidden subtrees before the scene is laid out, so a rule that needed the
@@ -917,6 +920,12 @@
     display: none;
   }
 
+  /* The disclaimer goes with the art (Camila, 2026-11-03): title, subtitle,
+   * CTA. Portrait keeps it; outside the query this rule does not exist. */
+  .prizma-screen-layout__content--tutorial > .prizma-screen-layout__band > .prizma-disclaimer {
+    display: none;
+  }
+
   /* The slot that held the art keeps only its flexible height, not its
    * Spacing/16 padding above and below: with the illustration gone those 32
    * are empty, and on the SE they were what pushed the CTA onto the tag once

package/src/index.ts

@@ -690,6 +690,17 @@ export {
 } from './ErrorScreensStrings';
 export { ErrorScreensScreen, type ErrorScreensScreenProps } from './ErrorScreensScreen';
 
+// Rotate to portrait — the one prompt every capture module shows while the
+// phone is held sideways; capture screens stay portrait (Camila, 2026-11-03).
+// Not in the generic Figma file: born in the playground
+// `artefactos/playgrounds/2026-10-29__rotate-to-portrait-prompt`. DEVIATIONS #F-42.
+export { type RotateToPortraitStrings } from './RotateToPortraitStrings';
+export {
+  RotateToPortraitScreen,
+  type RotateToPortraitScreenProps,
+  type RotateToPortraitTopEdge,
+} from './RotateToPortraitScreen';
+
 // Demo screens — the end screen; the start screen is owner-owned and pending.
 export {
   type DemoScreensStrings,

package/src/styles.css

@@ -31,6 +31,7 @@
 @import './PhoneInputLayout.css';
 @import './QualifiedSignatureLayout.css';
 @import './ReusabilityLayout.css';
+@import './RotateToPortraitScreen.css';
 @import './ScreenLayout.css';
 @import './ScreenNav.css';
 @import './ScreenShell.css';