Qiiub POS · Task 11 — Login / Lock TWO-COLUMN (aspect-ratio reflow) · v2. Two-column direction approved; v2 applies three refinements — (1) title ~26px (a deliberate change from the current 44px display-hero that cramped vertically; no longer byte-identical to #611), (2) left column vertically centered against the keypad (neither column floats), (3) the entry field is a prominent bordered/tinted "active input" with a brand focus-ring. Reuses the validated infra from fix/pos-login-scroll-fit: overflow:hidden fit container, no-vh (flex/rem), reserved error slot. Identify-first flow unchanged (ADR-0113): Step 1 = employee number, Step 2 = PIN. Frames are simulated kiosk viewports (16:9 = 1024×576, portrait = 432×576), each overflow:hidden — what you see is the whole screen, no page scroll. Created: 2026-07-02 | Last Updated: 2026-07-02
16:9 kiosk Login · Step 1 — identify (employee number) · no error
Built by BCPOS
ENES
Farmacia Centro · Terminal 01
08:43
Online
Step 1 of 2 · Identification Good morning ·
Enter your employee number
Face verification
Captured · tied to session
PBKDF2
Employee number
04
16:9 kiosk Login · Step 2 — PIN
Built by BCPOS
ENES
Farmacia Centro · Terminal 01
Online
Step 2 of 2 · PIN Employee 04 ·
Enter your PIN
Face verification
Captured · tied to session
PBKDF2
4-digit PIN
16:9 kiosk Login · Step 2 — error state · banner fills the reserved slot (zero shift vs frame 2)
Built by BCPOS
ENES
Online
We couldn't verify you
Check your PIN and try again. Trouble? Ask your manager.
Step 2 of 2 · PIN Employee 04 ·
Enter your PIN
Face verification
Captured · tied to session
PBKDF2
4-digit PIN
16:9 kiosk LockScreen — identity-free, PIN resume
Built by BCPOS
Locked
Online
Terminal locked
Enter your PIN to resume the session.
4-digit PIN
Portrait 3:4 Fallback — below the 5/4 aspect band the SAME card reflows to single-column stacked
Online
Step 1 of 2 · Identification Good morning ·
Enter your employee number
Face verification
Captured · tied to session
Employee number
04

Reflow rule + refinement notes (the layout contract)

Aspect-ratio driven, per ADR-0112 §2 — never height- or resolution-pinned.
1Landscape band — @media (min-aspect-ratio: 5/4) (ADR-0112 §2's 1.25→1.78 band). Card reflows to two columns: identity left, keypad + primary action right, error slot spanning the top; both columns vertically centered against each other (refinement 2 — no floating dead air). Fits a maximized 16:9 kiosk with no scroll, uses the width.
2Below 5/4 (portrait / narrow / hand-shrunk window) → the SAME card falls back to single-column stacked (frame 5) — the validated #611 order, still no-vh + reserved slot + the card-scroll safety net from this branch. Production uses the global @media, not the @container used to make each mockup frame self-demonstrate.
3Field prominence (refinement 3): the entry field is a bordered, brand-tinted "active input" box with a purple focus-ring and a larger value (36px mono) / PIN dots (20px) — unmistakable on a touch register, clearly weightier than the keypad keys.
4Zero-shift error (frames 2 vs 3): the reserved slot holds its height with or without the banner. Slot min-height sized to the tallest banner (final value set at implementation against the real Alert; the wider two-column card wraps the banner shorter than the single-column ~78px).
5Title = ~26px (refinement 1): a DELIBERATE redesign change from the app's current 44px display-hero (which cramped vertically). No longer byte-identical to #611 — to be called out as an intentional choice in the PR.
!ADR-0112 / JJ sign-off (BEFORE merge): the reflow rule is an application of §2 (design by aspect ratio, organic reflow), not a change — but docs/adr/ is JJ's hard-stop. He must confirm §2 covers it, or register the explicit two-column band as a §2 addendum, before merge. Not a blocker for designing/implementing.