@incodetech/prizma-core-screens 0.2.4 → 0.2.12

package/dist/VideoSelfieLayout.css

@@ -13,6 +13,14 @@
  * spoken step) carry the band here.
  */
 
+/* The air above the stepper band, named once because TWO rules depend on it:
+ * the band's own offset and the ring's, which counts down from Figma's y=188.
+ * Scoped to a shell that actually carries the band, so no other module's
+ * screen inherits a property it never reads. */
+.prizma-screen-shell:has(> .video-selfie-stepper) {
+  --vs-top-reserve: max(var(--pcs-status-bar, 47px), var(--prizma-spacing-24));
+}
+
 /* ── Journey stepper band ────────────────────────────────────────────────────
  * Figma draws the Stepper as the first thing under the OS status bar — no logo
  * row above it (`top content` frame, y=54, the Stepper 342 wide at x=24 on
@@ -42,7 +50,14 @@
    * ScreenLayout.css already reserves for the tag and shutter, which must sit
    * above the scrim for exactly the same reason. DEVIATIONS #VS-2. */
   z-index: 2;
-  margin-top: var(--pcs-status-bar, 47px);
+  /* Clear the OS status bar, and NEVER sit flush against the top edge. A host
+   * that draws no phone chrome sets `--pcs-status-bar: 0px` — Core Lab's
+   * desktop panel does — and the band then started at pixel zero, hard against
+   * the browser bar (Camila, 2026-10-09: "the stepper is way too high and
+   * touches the screen border"). The floor is the content column's own
+   * Spacing/24 gutter, the same air every other screen has above its first
+   * block; on a phone the 47 reserve is larger and nothing moves. */
+  margin-top: var(--vs-top-reserve, var(--pcs-status-bar, 47px));
   padding-inline: var(--prizma-spacing-24);
 }
 
@@ -63,6 +78,183 @@
   z-index: 1;
 }
 
+/* A band carrying the coaching bubble keeps the bubble's own height; the frame
+ * below is what gives ground on a short screen.
+ *
+ * `.video-selfie-band` is `flex: 1; min-height: 0`, so on a 360 × 640 panel the
+ * flex column took the whole shortfall out of THIS band: it collapsed to zero
+ * and the bubble — which is still painted — overflowed it in both directions,
+ * across the stepper above and the document frame below (Camila, 2026-10-07).
+ * `IdCaptureLayout.css` already names the rule for this exact column: the frame
+ * is the one part that shrinks, the band above it keeps its content height. Same
+ * rule, this module's class. */
+.video-selfie-band:has(> .video-selfie-feedback) {
+  flex: 0 0 auto;
+  min-height: min-content;
+}
+
+/* …and the band UNDER the document stage never gives up the footer's own
+ * footprint, so the frame stops above the verified tag instead of sliding under
+ * it. `ScreenLayout.css` reserves `--pcs-footer-space` on
+ * `.prizma-screen-layout__content`; these are camera surfaces with no content
+ * column, so the reserve has to be claimed here, and claiming it as the BAND's
+ * minimum rather than as padding on the viewfinder is what keeps the reference
+ * untouched: at 390 the band is already ~100 tall, so a 72 floor is a no-op and
+ * the frame stays exactly where Figma centres it (y 172–627 of a 91–708 content
+ * area). On a 640-tall panel the floor binds, and the frame — the one part of
+ * this column that may get smaller (owner, 2026-08-18) — gives the height back
+ * through Core's own `flex-basis`, its aspect narrowing it to match. */
+.video-selfie-stage + .video-selfie-band {
+  min-height: var(--pcs-footer-space);
+}
+
+/* ── The camera owns the window; only the HUD is a column ────────────────────
+ * The five camera screens carry `data-pcs-overlay="window"` on their shell.
+ * That attribute is the screens package's contract with a host that FRAMES a
+ * screen — Core Lab's desktop panel, which otherwise lays every screen inside
+ * the 800 x 840 white card Elena's eKYB frames draw. A form belongs in that
+ * card. A camera does not: boxed into it, the feed and its scrim were a narrow
+ * strip with white either side of them on a 1440 panel, the desktop version of
+ * the "phone pasted onto the tablet" her 2026-10-02 call already fixed for the
+ * tablet (Camila, 2026-10-08). `PermissionsAskScreen` set the same attribute
+ * first, for its dialog's dim.
+ *
+ * NOT fixed here: Face Capture's, ID Capture's and Document Capture's camera
+ * stages sit in the same card for the same reason. The rule reads as theirs
+ * too, but their screens have not been looked at on the panel — reported. */
+
+/* ── The HUD stays in a column when the panel is wider than the reference ─────
+ * On a panel wider than 390 the camera feed and its scrim are full-bleed — that
+ * is what a camera does on a real device, and what the Lab's laid-out
+ * breakpoints draw (`bleed`, convert.ts). The copy over the feed is NOT: left to
+ * `width: 100%` the stepper ran the full 720 of a tablet and the coaching bubble
+ * with it, which reads as a stretched phone rather than a tablet (Camila,
+ * 2026-10-07).
+ *
+ * `--pcs-column` is the host's own property for this — the same contract as
+ * `--pcs-status-bar` — and it is already what `ScreenLayout`'s content and band
+ * read on a device panel: 390 on a phone, 468 on a tablet or desktop one. Here
+ * the two Spacing/24 gutters come off it, because these bands sit INSIDE
+ * `.prizma-viewfinder__content`'s own padding, so the result is exactly the
+ * content width the reference has (342 at 390, 420 on a tablet). Unset — a plain
+ * 390 screen, any SDK host — the calc resolves to 342 and nothing moves. */
+.video-selfie-stepper > *,
+.video-selfie-feedback,
+.video-selfie-recording,
+.video-selfie-turn {
+  max-width: calc(var(--pcs-column, 390px) - 2 * var(--prizma-spacing-24));
+  margin-inline: auto;
+}
+
+/* ── The face ring sits in the SAME place on every screen ────────────────────
+ * Figma puts `ring-uploading` at (27, 188) on every frame that draws it —
+ * `8.x`, `9.x`, the four head turns and the wave — and never moves it. Left
+ * to the flex band the ring drifted instead, because what sits UNDER it
+ * changes from screen to screen: an instruction on `8.0`, a spinner and a
+ * label on `8.1`, an arrow chip plus a line on the turns, nothing at all
+ * behind the wave's card. Centring a taller stack pushes the ring up
+ * (measured 150 / 165 / 185 across three screens where the frames say 188),
+ * and a capture window that moves between steps reads as a glitch.
+ *
+ * So the ring band is TOP-aligned and the offset is named once. 188 is
+ * Figma's; 84 is where the content column starts here (the status-bar reserve
+ * plus the 37 stepper band); 40 is Core's own padding above the stage inside
+ * `PrizmaSelfieCapture`. What is left is the air this rule owns. Everything
+ * under the ring then flows below it, which is what the frames draw.
+ * DEVIATIONS #VS-24. */
+.video-selfie-band--ring {
+  justify-content: flex-start;
+  /* 188 is Figma's, and on a panel SHORTER than the 844 the frames are drawn
+   * against it is read proportionally: 154 at 693, 143 at 640. The reference
+   * and anything taller keep the literal 188, which is what `min()` guarantees.
+   * Fixed, it was 29% of a 640 panel — the ring plus its status block ran up to
+   * 67px past the fold (Camila, 2026-10-07), and the air above a ring is the
+   * first thing that should give. */
+  padding-top: max(
+    0px,
+    calc(
+      min(188px, 100cqh * 188 / 844) - var(--vs-top-reserve, var(--pcs-status-bar, 47px)) -
+        37px - var(--prizma-spacing-40)
+    )
+  );
+}
+
+/* ── On a LANDSCAPE window the ring centres instead ──────────────────────────
+ * 188 is a portrait measurement: it is 22% down an 844 phone, and the capture
+ * block reads as sitting near the top with the instruction under it. Down a
+ * 1440 x 820 browser window the same offset leaves the whole bottom half empty
+ * and the composition reads as a phone screen pinned to the top of a desktop
+ * page (Camila, 2026-10-09).
+ *
+ * #VS-24's rule survives intact, and it is the reason this is an OFFSET and not
+ * `justify-content: center`. The rule is that the ring does not move BETWEEN
+ * screens — a capture window that jumps as the step advances reads as a glitch
+ * — and the stack under the ring is a different height on every one of them (an
+ * instruction here, a spinner and a label there, an arrow chip on the turns).
+ * Centring that stack would move the ring again, which is the exact bug #VS-24
+ * was written for. Centring the RING instead depends on two numbers only: the
+ * shell's height and Core's own 335 capture box. Every ring screen lands in the
+ * same place, and the copy flows below it as before. */
+@container pcs-screen (min-aspect-ratio: 1 / 1) {
+  .video-selfie-band--ring {
+    padding-top: max(
+      0px,
+      calc(
+        (100cqh - 335px) / 2 - var(--vs-top-reserve, var(--pcs-status-bar, 47px)) - 37px -
+          var(--prizma-spacing-40)
+      )
+    );
+  }
+}
+
+/* ── …and on a short panel the ring itself gives ground ──────────────────────
+ * Scaling the offset is not enough at 640: the stack below the ring is a title
+ * and a subtitle on the verdict beats ("Selfie not captured, try again") and an
+ * arrow plus an instruction on the turns, and all of it is content height the
+ * band cannot take back.
+ *
+ * So the RING shrinks, exactly the way `IdCaptureLayout.css` already lets the
+ * document frame shrink and for the same stated reason — the capture window may
+ * get smaller, that is not a constraint (owner, 2026-08-18). Core's stage is
+ * `width: 100%; aspect-ratio: 1`, so giving it a flex basis of its own width and
+ * letting the column take the shortfall out of its HEIGHT makes the aspect
+ * narrow it back: still a circle, still centred, just smaller. Everything inside
+ * it is already proportional (the ring is an SVG on a 335 viewBox, the
+ * silhouette is in %), so nothing else has to be told.
+ *
+ * 87.7cqw is Core's own capture width (`min(87.7cqw, 335px)` — 335 of the 390
+ * reference); it is named here only because a flex basis cannot read it off the
+ * element it is sizing. Outside the query not one of these declarations exists,
+ * so the reference stage is untouched. */
+@container pcs-screen (max-height: 720px) {
+  .prizma-viewfinder__content:has(> .video-selfie-band--ring) {
+    min-height: 0;
+  }
+
+  .video-selfie-band--ring {
+    min-height: 0;
+  }
+
+  .video-selfie-band--ring > .prizma-selfie-capture {
+    flex: 0 1 auto;
+    min-height: 0;
+  }
+
+  .video-selfie-band--ring .prizma-selfie-capture__stage {
+    flex: 0 1 auto;
+    min-height: 0;
+    width: auto;
+    max-width: 100%;
+    flex-basis: min(335px, 87.7cqw);
+  }
+
+  /* The copy under the ring keeps its own height — the ring is what shrinks. */
+  .video-selfie-band--ring > .prizma-selfie-capture > :not(.prizma-selfie-capture__stage),
+  .video-selfie-band--ring > .video-selfie-turn {
+    flex-shrink: 0;
+  }
+}
+
 /* ── Recording indicator (10.1 / 11.1 / 11.3 / 11.5) ─────────────────────────
  * A sound-wave glyph over the "Recording…" HUD line. The glyph ink is Core's
  * own Static camera ink — the token `PrizmaCaptureManual` uses for the shutter
@@ -96,6 +288,20 @@
   bottom: 0;
   z-index: 3;
   padding: var(--prizma-spacing-16);
+  /* The SCRIM is full-bleed; the card is not. On a panel wider than the
+   * reference the panel keeps the host's column (`--pcs-column`, see the HUD
+   * block above) and centres, so the card stays a card instead of a 720-wide
+   * strip. Its own Spacing/16 inset is untouched, which is what keeps the
+   * reference rendering byte-identical: at 390 the column IS the panel. */
+  max-width: var(--pcs-column, none);
+  margin-inline: auto;
+}
+
+/* Core's Modal caps itself too, so on a tablet's 468 column the card has room
+ * to spare inside the panel and was landing flush left. Centre it, same as the
+ * coaching bubble. */
+.video-selfie-sheet-panel > * {
+  margin-inline: auto;
 }
 
 /* The confirmation dialog (10.4) is a true centred modal over a dimmed screen,
@@ -106,6 +312,33 @@
   align-items: center;
 }
 
+/* The two verdict cards (`10.2` processing, `10.3` success) carry no buttons,
+ * so their content stack is two rows where the prompt's is three — left alone
+ * they came out ~70px shorter and the sheet jumped as the step advanced. The
+ * owner's call (2026-09-30) is that every card in the step is the same size,
+ * so the card takes the prompt's measure and centres its content in it.
+ *
+ * 184 is Figma's own `modal-light` height on `10.0` / `10.1`, which is what
+ * the prompt renders at; it is the module's geometry, not a token, and it is
+ * a MINIMUM — the card still grows if a translation needs more room.
+ * DEVIATIONS #VS-25. */
+/* ⚠ The card, not the wrapper, has to do the centring. `height: 100%` on the
+ * wrapper resolved to `auto` — Core's `.prizma-modal` is not a flex container
+ * and its height is content-driven, so a percentage height had nothing to
+ * measure against and the block stayed pinned to the top (owner, 2026-09-30:
+ * "these are aligned to the top instead of centered"). Making the CARD the
+ * flex column is what actually distributes the extra height. */
+.video-selfie-sheet-panel--status .prizma-modal {
+  min-height: 184px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.video-selfie-sheet-panel--status .prizma-modal__title {
+  text-align: center;
+}
+
 /* The card's verdict mark (10.3 / 11.x success). The glyph itself is the
  * canonical bank icon Core's own `PrizmaTitle` uses for `status: success`
  * (`IconStatusPositive` at Title/Icon/Size); only the INK is set here, because
@@ -125,6 +358,36 @@
   height: var(--prizma-title-icon-size);
 }
 
+/* ── The tutorial's seven rows on a short panel ──────────────────────────────
+ * The promise list fits the 844 reference to the pixel — measured 497 of the
+ * 497 the column leaves — so on a 693 or 640 panel the last two rows painted
+ * through the CTA and the verified tag (Camila, 2026-10-07).
+ *
+ * The concession is the one archetype G already ships and this module already
+ * uses on its Android settings walk-through: the ROWS pan, the title, the CTA
+ * band and the anchored tag hold still (`__list--scroll`, ScreenLayout.css).
+ * It is applied here, under a container query, rather than through the
+ * `scrollList` prop, because that variant also adds a Spacing/16 margin below
+ * the list — on the reference that is 16 of the 497 the rows need, so the prop
+ * would start clipping the very screen it is meant to leave alone.
+ *
+ * 720 is the same line the live cues use: the reference is 844, and anything
+ * at 640 or 693 is a short panel. */
+@container pcs-screen (max-height: 720px) {
+  .video-selfie-tutorial .prizma-screen-layout__list {
+    overflow-y: auto;
+    /* `__list--scroll`'s own Spacing/16, so the row the clip cuts through is not
+       flush against the CTA. Inside the query it costs the reference nothing. */
+    margin-bottom: var(--prizma-spacing-16);
+  }
+
+  /* Rows keep their intrinsic height instead of being squeezed — the reason
+     `__list--scroll` carries the same declaration. */
+  .video-selfie-tutorial .prizma-screen-layout__list > * {
+    flex-shrink: 0;
+  }
+}
+
 /* ── The OS settings walk-through (2.5) ──────────────────────────────────────
  * Two labelled sections inside archetype G's list slot: a numbered step list
  * and a plain note. CONTENT typography only — the offset above the block is
@@ -155,10 +418,49 @@
   color: var(--prizma-text-body-500-secondary);
 }
 
+/* ── The document frame's own measure ────────────────────────────────────────
+ * `3.x` / `5.x` / `6.x` all draw `ID Capture Frame` at **286 × 455**, centred
+ * in the 390 column (52 either side) — and they keep that measure on every
+ * device section in the file: 320, 368, 390, 430 and the 892-wide Pixel Fold
+ * all show the same 286-wide frame, only the air around it changes.
+ *
+ * Core's `PrizmaIdCapture` is `width: 100%` + `aspect-ratio: 288/456`, so left
+ * alone it takes the whole content column: 342 × 541 at 390, which ran the
+ * frame down into the verified tag (owner-reported in the 320 sweep,
+ * 2026-09-28, and the reason the stage read broken at every width, 2026-09-30).
+ *
+ * So the MODULE caps it, exactly as the frames do. `min()` keeps the cap from
+ * turning into a floor: on a column narrower than the frame it gives ground
+ * instead of spilling, which is what the 320 sections show. The aspect ratio
+ * stays Core's. DEVIATIONS #VS-18. */
+.video-selfie-stage {
+  /* Figma geometry, not a token: `ID Capture Frame` is 286 wide on every
+     device section of this module. */
+  width: min(286px, 100%);
+  /* The viewfinder column stretches its children, so a child that names its
+     own width lands flush LEFT — which put the frame 16px off the phone's
+     centre line while the status card floating on it stayed centred. */
+  margin-inline: auto;
+}
+
+/* `IdCaptureLayout.css` gives every vertical stage inside a viewfinder a
+ * `flex-basis` of "the full column over the aspect", so the frame can give up
+ * height on a short screen and the aspect then narrows it back (Camila,
+ * 2026-09-28). That machinery is right and stays — it just has to start from
+ * THIS module's capped width, not the whole column: fed 342 it computed a
+ * 541-tall frame and then clamped the width back to 286, which is how the
+ * stage ended up 286 × 541 instead of 286 × 455 and grew into the verified
+ * tag. Same formula, capped input. */
+.prizma-viewfinder__content
+  > .video-selfie-stage.prizma-id-capture--vertical:not(.prizma-id-capture--poa)
+  .prizma-id-capture__frame {
+  flex-basis: calc(min(286px, 100cqw - 2 * var(--prizma-spacing-24)) * 456 / 288);
+}
+
 /* ── The captured document inside the vertical frame ─────────────────────────
  * Groups 3 and 5 draw the ID UPRIGHT in a portrait frame: the card is rotated a
- * quarter turn so its long edge runs down the screen, exactly as `3.2` and
- * `5.2` show it (the licence's text reads bottom-to-top).
+ * quarter turn so its long edge runs down the screen, exactly as `3.1`/`3.2`
+ * and `5.1`/`5.2` show it (the licence's text reads bottom-to-top).
  *
  * The sample scans are landscape (328×202). Dropped into a portrait frame with
  * Core's `object-fit: cover` they scaled 4.2× to fill the height and lost their
@@ -166,40 +468,41 @@
  * zoomed in to fit height, when it should be 90 degrees to fit the frame").
  * Rotating instead of cropping keeps the whole document legible.
  *
- * `width`/`height` are swapped BEFORE the rotation because a rotated element
- * still lays out on its pre-transform box: the image is sized to the frame's
- * height × width, then turned, so it lands exactly frame-sized. No literal —
- * both are percentages of whatever box Core gives it. DEVIATIONS #VS-6.
- */
-/* The captured document is landscape (a card scan); the VERTICAL frame is
- * portrait. `object-fit: cover` cropped its sides away and blew it up 4.2× —
- * the band of static the owner reported. Figma turns the card a quarter turn
- * instead, so the whole document stays legible with its text running up the
- * side, exactly as `3.2` / `5.2` draw it.
- *
- * The image is sized to the frame's height × width BEFORE the turn, because a
+ * The image is sized to the frame's HEIGHT × WIDTH before the turn, because a
  * rotated element still lays out on its pre-transform box — so after the 90°
  * it lands exactly frame-sized. Both values are percentages of whatever box
- * Core gives it, so nothing is hardcoded. DEVIATIONS #VS-6. */
+ * Core gives it, so nothing is hardcoded.
+ *
+ * ⚠ The first pass centred that oversized box with `display: grid;
+ * place-items: center`, which does NOT centre it: a grid item WIDER than its
+ * area is clamped to the start edge (the browsers' overflow-safety rule). The
+ * card therefore laid out at the frame's top-left, and turning it around ITS
+ * centre threw it 75px right and 75px up — hanging off two sides of the frame
+ * and across the camera. That is the "ID shown in a very weird way" report
+ * (owner, 2026-09-30). Absolute centring has no such clamp, so the turn
+ * happens around the frame's real middle. DEVIATIONS #VS-6. */
 .prizma-id-capture--vertical .prizma-id-capture__still {
   /* A size container, so the image can be measured against the frame's OWN
      box — `cqh`/`cqw` below are the only way to swap width and height without
      writing either number down. The frame has definite dimensions, which is
      what `container-type: size` requires. */
   container-type: size;
-  display: grid;
-  place-items: center;
   overflow: hidden;
 }
 
 .prizma-id-capture--vertical .prizma-id-capture__still > img {
   /* Swapped on purpose: the image is laid out at the frame's HEIGHT × WIDTH,
-     then turned a quarter, so it lands exactly frame-sized. */
+     then turned, so it lands exactly frame-sized. */
+  position: absolute;
+  inset: auto;
+  top: 50%;
+  left: 50%;
   width: 100cqh;
   height: 100cqw;
   max-width: none;
   object-fit: cover;
-  transform: rotate(90deg);
+  /* Centre first, THEN turn — around the frame's own middle. */
+  transform: translate(-50%, -50%) rotate(90deg);
   transform-origin: center;
 }
 
@@ -222,26 +525,156 @@
   pointer-events: none;
 }
 
-.video-selfie-stage-status > * {
-  padding: var(--prizma-spacing-16) var(--prizma-spacing-24);
+/* The card itself: hugs its content, never wider than the document frame it
+ * floats on (Figma's widest, `6.1.3`'s three-line rejection, is 260 inside the
+ * 286 frame), and always dark — the camera stage never mode-flips. The mark
+ * stacks above the label because the content is Core's `PrizmaTitle`; the card
+ * only supplies the surface and the air around it. */
+.video-selfie-stage-status__card {
+  box-sizing: border-box;
+  max-width: min(260px, 100%);
+  padding: var(--prizma-spacing-24);
   border-radius: var(--prizma-border-radius-medium);
-  background: var(--prizma-surface-neutral-900-80-static);
+  background: var(--prizma-surface-neutral-900-static);
 }
 
-/* ── Tutorial step rows ──────────────────────────────────────────────────────
- * The <ul> Core's `PrizmaList` would normally supply. Composed here only
- * because the wrapper's icon variants cap at six rows and the tutorial draws
- * seven (#VS-8); the gap is the variant's OWN Spacing/12 — nothing new.
- */
-.video-selfie-tutorial-list {
+/* Both pieces inside the card sit ON that dark surface, so their ink is the
+ * camera HUD's own Static white rather than the theme's primary — the same
+ * re-seat `SelfieCapture.css` does for its overlay status band. */
+.video-selfie-stage-status__card .prizma-title__heading,
+.video-selfie-stage-status__card .prizma-loading-spinner__title {
+  color: var(--prizma-text-body-0-static);
+}
+
+/* ── The coaching bubble above the document frame ────────────────────────────
+ * The five condition frames put `Capture feedback` at the TOP of the content,
+ * over the camera and above the frame. The band it sits in is already the
+ * flexible one; this only pins it to the band's top edge and lifts it over
+ * the stage's scrim (the trap `ViewfinderScreen.css` documents on `__intro`:
+ * the scrim is an absolutely positioned sibling with an escaping box-shadow,
+ * so unlifted content renders under an 80% veil). The bubble's own width,
+ * radius, ink and illustration are Core's. DEVIATIONS #VS-28. */
+.video-selfie-feedback {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  /* Top of the band, which is directly under the stepper — where the five
+     condition frames seat it (bubble top y≈88 of 844). */
+  margin-block: 0 auto;
+}
+
+/* Core caps the pill itself at 400 (CaptureFeedback.css, FLAG-DOUBLE-MAXWIDTH),
+ * which is narrower than a tablet's 420 column — so inside the wrapper it has
+ * 20px to spare and was landing flush left, off the frame's centre line. Same
+ * centring `.video-selfie-stage` needs, for the same reason. */
+.video-selfie-feedback > .prizma-capture-feedback {
+  margin-inline: auto;
+}
+
+/* ── The live cues go COMPACT on a small phone ───────────────────────────────
+ * `PrizmaCaptureFeedback` ships two templates on its own `Show Animation` axis:
+ * A, the 135px pill with the illustration beside the copy at Headline/H3, and
+ * B, a 72px pill with no illustration at Headline/H5 (CaptureFeedback.css,
+ * "Compact modifier"). The module's frames draw A, and A is what every screen
+ * with room keeps.
+ *
+ * It is the wrong template on a small phone. At 320 the pill's 70px
+ * illustration column plus its Spacing/16 gap take 86 of the 272 the content
+ * has — a third of the width spent on a decoration — so "Center your ID inside
+ * the frame" wrapped to three lines and the pill grew to 150; on the 640-tall
+ * panel the same pill is a quarter of the whole screen. Either way it ate the
+ * air the document frame needs, and the frame came down through it (Camila,
+ * 2026-10-07: "in smaller phones, the live cues should change to the compact
+ * version"). Template B says the same two lines in 72.
+ *
+ * A CONTAINER query, and in the SCREENS layer rather than CaptureFeedback.css,
+ * for the reason `ScreenLayout.css` gives on the capture notice: Core web
+ * components are width-agnostic by design, and the browser viewport is not the
+ * phone — in Core Lab a 320 shell sits inside a 1400px window, so `@media`
+ * would read the wrong number. `pcs-screen` is the shell's own container
+ * (ScreenShell.css).
+ *
+ * Two triggers, because two different things run out:
+ *   · 340 wide — the line above the narrowest phone we support and below the
+ *     next one, the same threshold the capture notice drops its glyph at: 320
+ *     goes compact, 360 and 390 keep the illustration.
+ *   · 720 tall — the reference is 844 and the frames are drawn against it. A
+ *     panel at 640 or 693 has no air to spend on a 135px pill, however wide it
+ *     is. 720 clears 844, 932 and the tablet's 1024.
+ *
+ * Nothing is re-skinned: the pill's fill, radius, stroke and shadow are Core's
+ * and identical between A and B (capture-feedback.md §4.4). What changes is
+ * exactly Template B's four switches. DEVIATIONS #VS-30. */
+/* ⚠ ONE `or` condition, not two comma-separated queries. A container query
+ * names its container ONCE and the conditions go in a single boolean group:
+ * `pcs-screen (a), pcs-screen (b)` parses in Chrome and is a hard error in
+ * lightningcss, so the hub's production build failed on it while the dev server
+ * was fine. Any future multi-condition query in this package wants this shape. */
+@container pcs-screen ((max-width: 340px) or (max-height: 720px)) {
+  .video-selfie-feedback .prizma-capture-feedback__illustration {
+    display: none;
+  }
+
+  /* Template B: body padding-bottom 12 → 16, itemSpacing 8 → 4. */
+  .video-selfie-feedback .prizma-capture-feedback__body {
+    padding: var(--prizma-spacing-16) 0;
+    gap: var(--prizma-spacing-4);
+  }
+
+  /* Title Headline/H3 → Headline/H5. */
+  .video-selfie-feedback .prizma-capture-feedback__title {
+    font-weight: var(--prizma-headline-h5-font-weight);
+    font-size: var(--prizma-headline-h5-font-size);
+    line-height: var(--prizma-headline-h5-line-height);
+    letter-spacing: var(--prizma-headline-h5-letter-spacing);
+  }
+
+  /* Subtitle Headline/H5 → Body/M Regular. */
+  .video-selfie-feedback .prizma-capture-feedback__subtitle {
+    font-family: var(--prizma-body-family);
+    font-weight: var(--prizma-body-m-regular-font-weight);
+    font-size: var(--prizma-body-m-regular-font-size);
+    line-height: var(--prizma-body-m-regular-line-height);
+    letter-spacing: var(--prizma-body-m-regular-letter-spacing);
+  }
+}
+
+/* ── The head-turn mark and its instruction ──────────────────────────────────
+ * The `🙂‍↔️ Turn Head` band puts a 48 circled arrow between the ring and the
+ * line that says which way to turn (`element container` 342×48, the glyph
+ * centred, then 16 to the text). The gap is Core's own Spacing/16; the copy is
+ * the foundation's `.prizma-viewfinder__title`, unchanged. Lifted over the
+ * stage's scrim for the reason `ViewfinderScreen.css` documents on `__intro`.
+ * DEVIATIONS #VS-20. */
+.video-selfie-turn {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
+  gap: var(--prizma-spacing-16);
   width: 100%;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  gap: var(--prizma-spacing-12);
+}
+
+/* The mark is ONE bank glyph at 2xl — a filled disc with the arrow knocked
+ * out — so this only inks it. The first pass wrapped a 24 bare arrow in a
+ * hand-made disc and read as a thin chevron on the camera. */
+.video-selfie-turn__mark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--prizma-icon-neutral-50-static);
+}
+
+/* The mark NEVER mirrors in a right-to-left locale (owner decision, Sofia
+ * 2026-10-07). A head turn is a physical direction, not a reading direction,
+ * so "left" stays left in Hebrew too. Core flips the horizontal chevrons in
+ * RTL through `[dir="rtl"] .prizma-icon--rtl-mirror` (Navigation.css); this
+ * rule, the same selector scoped to the mark, outranks it on this screen only
+ * and every other chevron keeps mirroring. The solid circle arrows the mark
+ * used to be never flipped, so this restores their behaviour. */
+[dir='rtl'] .video-selfie-turn__mark .prizma-icon--rtl-mirror {
+  transform: none;
 }
 
 /* Step rows — the <ol> `PrizmaList` would supply, composed here only because