@incodetech/prizma-core-screens 0.2.14 → 0.2.18

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/ScreenLayout.css

@@ -829,6 +829,197 @@
   }
 }
 
+/* ── Landscape phones: the stack keeps its order, the ring changes axis ──────
+ * WCAG 2.1 SC 1.3.4 Orientation (AA) asks every screen to work held sideways,
+ * and a phone held sideways is 375 to 440 tall (the phone catalog rotated:
+ * iPhone SE 667 x 375, the 844 x 390 reference, Large Android 915 x 412,
+ * Pro Max 956 x 440). Measured against the stacks the short-panel rules fit
+ * into 626: a capture screen needs ~557, a tutorial ~700. So two things give
+ * ground that no short panel asked for: the tutorial loses its illustration,
+ * and the capture screen turns its ring and its instruction side by side
+ * (FaceCaptureLayout.css). Everything else keeps the portrait order, title
+ * over copy over button, compacted (Camila, 2026-10-21: top-down, not side by
+ * side; the tag always centred; the button closer to the bottom).
+ *
+ * THE LINE is the shell's own shape, never the browser viewport (a 390 shell
+ * in a 1400 window is portrait): `orientation: landscape` with a 500 height
+ * cap. The cap keeps the rules off tablets, desktop windows and the iPhone
+ * Duo open full screen (626), which already have their own answers (#21,
+ * #VS-32, #F-37) and are wider than they are tall. 500 has slack above the
+ * 440 ceiling and under the 626 floor. Every rule below lives inside the one
+ * query, so outside it not one declaration exists and the portrait render is
+ * byte-identical. Exploration `face-capture-landscape` (Camila, 2026-10-20);
+ * the developer-facing list is LANDSCAPE.md. DEVIATIONS #F-39.
+ *
+ * What never changes, in either orientation: the H2, the CTA, the live
+ * instruction and where it lives (#12/#14), the status and verdict copy, and
+ * the tag's seat: bottom centre, Spacing/16 up, on every screen that has one. */
+@container pcs-screen ((orientation: landscape) and (max-height: 500px)) {
+  /* The status-bar reserve STAYS (`--pcs-status-bar`, 47 by default, the
+   * host's own value otherwise). Round 2 had zeroed it on the argument that an
+   * iPhone draws no status bar in landscape; Camila's QA of the canvas
+   * (2026-10-21) found the result screens' status mark sitting in the system
+   * bar's row (the Lab's pills at 25 to 35, Elena's landscape reference keeps
+   * a 54 bar), which no device would allow. The reserve is the one line every
+   * screen already respects in portrait, so it is kept rather than replaced
+   * by a landscape-only offset. The capture screens are unaffected: their nav
+   * is hidden below and the ring is placed on the panel's height. */
+
+  /* Capture screens drop the nav row entirely. It is already reserved and
+   * empty on a feed-open capture screen (the 2026-08-18 header rule), and a
+   * 335 ring plus the 56 row does not fit in 375. A client logo opt-in goes
+   * with it in landscape: there is no row to hold it. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__content--capture) > .prizma-screen-nav {
+    display: none;
+  }
+
+  /* …and the capture column stops reserving the footer under the ring: with
+   * the reserve the ring had 328 to sit in. (0,3,0), the reserve's own
+   * specificity, later in the file. FaceCaptureLayout.css says what happens
+   * to the tag there. */
+  .prizma-screen-shell .prizma-screen-layout__content.prizma-screen-layout__content--capture {
+    padding-bottom: 0;
+  }
+
+  /* ARCHETYPE A (tutorial). The illustration goes: it is the one element that
+   * carries no task information (step 1 of the order), and in landscape it is
+   * also the only one that cannot fit above a title block and a CTA at any
+   * size that still reads (Camila, 2026-10-21: "remove it to have more space,
+   * it's not adding essential information"). Its slot stays as the flexible
+   * 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.
+   * 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
+   * hidden art to match would vanish on the canvas. */
+  .prizma-screen-shell .prizma-screen-layout__content--tutorial {
+    /* The logo nav is gone in landscape (below), so the column reserves the
+     * status bar itself, Spacing/8 under it like the result screens. */
+    padding-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-8));
+    /* The column centres its children (the band below is the one that is
+     * narrower than the column). `align-items` on the parent rather than
+     * `align-self` or `margin-inline: auto` on the band: Core Lab's converter
+     * reads a flex container's alignment and ignores per-child margins and
+     * `align-self`, so the first take drew the 420 band at the left edge on
+     * the canvas while the browser centred it (Camila, 2026-10-21). */
+    align-items: center;
+  }
+
+  /* Every other child keeps the full column: `align-items: center` would
+   * otherwise shrink the title block to its content. */
+  .prizma-screen-layout__content--tutorial > :not(.prizma-screen-layout__band) {
+    width: 100%;
+  }
+
+  .prizma-screen-layout__content--tutorial > .prizma-screen-layout__flex > [class*='prizma-illustration-'] {
+    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
+   * the status bar came back (QA 2026-10-21). SE budget: nav 91, Spacing/16,
+   * title block 76, band 109, the tag's reserve 62: 354 of 375. */
+  .prizma-screen-shell .prizma-screen-layout__content--tutorial > .prizma-screen-layout__flex {
+    padding-block: 0;
+  }
+
+  /* The actions take Elena's landscape column: 420, centred (Core Lab
+   * recipes, landscape, read off the Document Capture reference 6701:8042).
+   * A CTA stretched across 796 reads as a bar, not a button; 420 is the
+   * Title's own max width, so the axis is one. The band's tag is anchored to
+   * the shell and already centres. */
+  /* (0,3,0) on purpose: Core Lab's device CSS caps `.prizma-screen-layout__band`
+   * at the panel's column with a (0,2,0) rule declared later, and at 844 that
+   * read as "no cap" on the canvas while the browser kept 420. */
+  .prizma-screen-shell .prizma-screen-layout__content--tutorial > .prizma-screen-layout__band {
+    width: 100%;
+    max-width: 420px; /* hardcoded — the actions column of Elena's landscape reference, equal to Core's Title max width */
+    gap: var(--prizma-spacing-8); /* Elena's first concession, the same rhythm as the result band below */
+  }
+
+  /* ARCHETYPE F (result with a CTA band). The logo nav goes instead of the
+   * status mark: the mark is the one thing that tells a warning from a
+   * failure, the logo is the client's presence and comes back on the next
+   * screen (Camila, 2026-10-21: remove the logo or the icon, keep the text,
+   * bring the button down). The title block centres in what is left above the
+   * band; the band keeps its portrait seat at the bottom, above the tag, with
+   * #F-37's compact rhythm already in force under 720. Measured on the SE:
+   * title block with its mark 153, band 101, the tag's reserve 62, Spacing/16:
+   * 332 in 375. The genericErrors family has no nav to begin with. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-nav {
+    display: none;
+  }
+
+  /* The title block sits at a FIXED offset under the status bar and the band
+   * at the bottom: Spacing/8 under the reserve clears the bar on both frames
+   * (mark at 55 with 47; Elena's bar ends at 54). Not `safe center`: the
+   * portrait column centres the title block in the free height, which on the
+   * SE left the mark 2.9 px inside the bar and 12.1 when the subtitle wrapped,
+   * and Core Lab's converter does not centre a column's children at all, so
+   * the canvas and the browser disagreed about where the mark was. A fixed
+   * seat is the same on both. SE budget, worst case (two-line subtitle):
+   * 55 + 132 + 16 + 109 + 62 = 374 of 375, with the band's gap conceded
+   * below. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__content {
+    padding-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-8));
+    justify-content: flex-start;
+  }
+
+  /* Same 420 column for the result band, centred. The band stays full width
+   * and centres its own rows (disclaimer, CTAs, extra content), each capped
+   * at 420: `align-items` on a flex column is what Core Lab's converter reads,
+   * while `margin-inline: auto` on the band, or `align-items` on the shell
+   * (whose anchored footer and tag it lays out by hand), centred in the
+   * browser and pinned the band left on the canvas (Camila, 2026-10-21).
+   * (0,3,0) for the same reason as the tutorial band above. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__band--result {
+    width: 100%;
+    align-items: center;
+    box-sizing: border-box;
+    /* Elena's first concession (Core Lab recipes, landscape): gaps 16 to 8
+     * before anything else goes. It is what keeps the two-line result stack
+     * inside the 375 SE under the restored status bar. */
+    gap: var(--prizma-spacing-8);
+  }
+
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__band--result > * {
+    width: 100%;
+    max-width: 420px; /* hardcoded — Elena's actions column, equal to Core's Title max width */
+  }
+
+  /* NO LOGO, NO TAG on any landscape screen (Camila, 2026-10-23: "they take
+   * up space that could be used by the content"). The nav row (the client
+   * logo's seat) and the verified tag go on every family; the capture screens
+   * had already dropped both. The columns that reserved the tag's 62 at the
+   * bottom keep Spacing/16 instead, and the result band sits Spacing/16 off
+   * the bottom; the capture column keeps its 0 so the ring's centre does not
+   * move. The status bar stays reserved by the columns themselves. */
+  .prizma-screen-shell > .prizma-screen-nav,
+  .prizma-screen-shell .prizma-screen-layout__footer,
+  .prizma-screen-shell .prizma-screen-layout__band__tag {
+    display: none;
+  }
+
+  .prizma-screen-shell:has(.prizma-screen-layout__band__tag) .prizma-screen-layout__content:not(.prizma-screen-layout__content--capture) {
+    padding-bottom: var(--prizma-spacing-16);
+  }
+
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__band--result {
+    margin-bottom: var(--prizma-spacing-16);
+  }
+
+  /* The band's disclaimer ("2 attempts remaining", "Stay still…") stays on
+   * one line: in the 420 column every disclaimer the module ships fits, and
+   * Core Lab's converter wrapped it to its first word otherwise (Camila,
+   * 2026-10-23: "remaining attempts should always be in one line"). */
+  .prizma-screen-layout__band .prizma-disclaimer__text {
+    white-space: nowrap;
+  }
+}
+
 /* ── Anchored-chrome layering ─────────────────────────────────────────────────
  * The camera HUD bands lift themselves to `z-index: 1` so their copy paints
  * above `PrizmaIdCapture`'s scrim (an absolutely positioned box-shadow that

package/dist/ScreenShell.css

@@ -25,6 +25,19 @@
    * layout paint` does both without forcing a composited layer the way
    * `transform` would. */
   contain: layout paint;
+  /* And it is the WINDOW Core's presenters size their overlays to. The Modal
+   * and Bottom sheet presenters draw their scrim `position: fixed` with
+   * `height: var(--prizma-overlay-height, 100dvh)` and pin the panel to the
+   * scrim's bottom, so a host whose fixed children land inside a box smaller
+   * than the viewport has to say so. Unsaid, the scrim inside this shell was
+   * the browser's height and the sheet sat at the browser's bottom edge, below
+   * the frame: on the closed iPhone Duo (678) Qualified Signature's certificate
+   * popups showed only the sheet's title peeking in at the bottom, on the open
+   * panel (626) nothing but scrim (measured 2026-10-29). 100% of the shell is
+   * the window, whatever the panel; on a real device the shell IS the viewport
+   * and the value reads the same. DEVIATIONS #F-41. */
+  --prizma-overlay-top: 0px;
+  --prizma-overlay-height: 100%;
 }
 
 /* Camera viewfinder screens — always a dark stage regardless of theme.

package/dist/TutorialScreen.js

@@ -19,6 +19,6 @@ import './ScreenLayout.css';
  * `PrizmaButtonGroup` would put 12 between the slots but cannot forward
  * `loadingLabel`, which the loading tutorials need — DEVIATIONS #F-32.
  */
-export const PrizmaTutorialScreen = forwardRef(({ progress, title, subtitle, disclaimer, ctaLabel, ctaLoading = false, ctaLoadingLabel, secondaryCtaLabel, linkLabel, verifiedLabel, illustration, overlay, navLabel, screenId, showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, children: [_jsx(PrizmaScreenNav, { reserved: !showHeader, logo: overrides?.logo, navLabel: navLabel }), progress ? (_jsx("div", { className: "prizma-screen-layout__progress", children: progress })) : null, _jsxs("div", { className: "prizma-screen-layout__content", children: [_jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: title, showSubtitle: Boolean(subtitle), subtitle: subtitle }), _jsx("div", { className: "prizma-screen-layout__flex", children: illustration }), _jsxs("div", { className: "prizma-screen-layout__band", children: [disclaimer ? _jsx(PrizmaDisclaimer, { text: disclaimer }) : null, secondaryCtaLabel ? (_jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: secondaryCtaLabel })) : null, ctaLabel ? (_jsx(PrizmaButton, { variant: "primary", size: "L", loading: ctaLoading, loadingLabel: ctaLoadingLabel, onClick: () => onAction?.({ type: 'cta', screenId }), children: ctaLabel })) : null, linkLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: linkLabel })) : null, showFooter ? (_jsx("div", { className: "prizma-screen-layout__band__tag", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })] }), overlay] })));
+export const PrizmaTutorialScreen = forwardRef(({ progress, title, subtitle, disclaimer, ctaLabel, ctaLoading = false, ctaLoadingLabel, secondaryCtaLabel, linkLabel, verifiedLabel, illustration, overlay, navLabel, screenId, showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, children: [_jsx(PrizmaScreenNav, { reserved: !showHeader, logo: overrides?.logo, navLabel: navLabel }), progress ? (_jsx("div", { className: "prizma-screen-layout__progress", children: progress })) : null, _jsxs("div", { className: "prizma-screen-layout__content prizma-screen-layout__content--tutorial", children: [_jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: title, showSubtitle: Boolean(subtitle), subtitle: subtitle }), _jsx("div", { className: "prizma-screen-layout__flex", children: illustration }), _jsxs("div", { className: "prizma-screen-layout__band", children: [disclaimer ? _jsx(PrizmaDisclaimer, { text: disclaimer }) : null, secondaryCtaLabel ? (_jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: secondaryCtaLabel })) : null, ctaLabel ? (_jsx(PrizmaButton, { variant: "primary", size: "L", loading: ctaLoading, loadingLabel: ctaLoadingLabel, onClick: () => onAction?.({ type: 'cta', screenId }), children: ctaLabel })) : null, linkLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: linkLabel })) : null, showFooter ? (_jsx("div", { className: "prizma-screen-layout__band__tag", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })] }), overlay] })));
 PrizmaTutorialScreen.displayName = 'PrizmaTutorialScreen';
 export default PrizmaTutorialScreen;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/prizma-core-screens",
-  "version": "0.2.14",
+  "version": "0.2.18",
   "description": "Prizma Design System — SDK module screens: composed, responsive, brand-themeable React screens built from @incodetech/prizma-core-web.",
   "license": "UNLICENSED",
   "type": "module",
@@ -841,8 +841,8 @@
   },
   "dependencies": {
     "@incodetech/prizma-core-icons": "^0.4.0",
-    "@incodetech/prizma-core-tokens": "^0.16.0",
-    "@incodetech/prizma-core-web": "^0.16.0"
+    "@incodetech/prizma-core-tokens": "^0.17.0",
+    "@incodetech/prizma-core-web": "^0.17.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",