# Ribbon

Ribbon treats access as a collection of panoramic strips. Ultramarine ink floods a warm butter canvas; the narrow edge index and horizontal snap rail make switching subscriptions feel like pulling a fresh length from a spool. A physical ruler fills only to the actual remaining data fraction. Previous/next buttons, direct numbered selection and keyboard arrows supplement touch scrolling.

The drawer is part of this same idea. It opens sideways to the full viewport height with a persistent printed spine. Identity and data form a cover band, tools form a compact matrix, and detailed plan/date facts unfold behind a disclosure. Renewal and purchase plans become horizontal bands with their selection control beside the price. QR codes sit on an ultramarine mounting band. Settings form a vertical sequence of ruled rows. The confirmation footer becomes a separate side strip on wide screens. This is a custom `renderDialog` composition; it retains the shared native dialog, fields, buttons, error target, close/back controls and financial confirmations.

All data, offers, transactions, state changes, confirmation logic and demo accounts use the shared runtime and API. The concept holds only selection, search disclosure and completed motion keys. Every technical identity is retained in full. FA/RTL is the default; English, dark mode, safe areas and reduced motion are supported. No Refero research or generated bitmap assets were used for this concept.

Motion: an 850 ms actual remaining-data ruler fill, native horizontal snap exploration, 440 ms drawer reveal and 230 ms content transition. Reduced motion disables all animation.

Validated with a real Playwright browser at 390 × 844 and 360 × 800: arrow selection, direct index selection, native snap scrolling, fact disclosure, QR and back navigation, rename validation, renewal plan/confirmation/back/cancel, purchase confirmation, settings scrolling, wallet, exact search across 140 partner subscriptions and the newcomer purchase affordance. Persian/English and light/dark screens have been visually inspected. Page, dialog and body widths were checked after entrance transitions complete; no horizontal overflow remains. Reduced-motion mode has no active drawer/fill animation. `node --check` passes.

Validation driver: `output/playwright/ribbon-qa.js`; final empty-state/light-English checks: `output/playwright/ribbon-finish.js`. Screenshots use the `output/playwright/ribbon-*` prefix. Shared financial mutations are unchanged and additionally covered by the root integration pass.