/* PERKS cashier ↔ Helium V2.6.5 bridge (till layout only).
 * The till runs on the original Helium screens stack (SGOR_Helium 'screens'); every visible component is Helium's own
 * (.topline, .he-side-tray, .hero-row, .demo-panel, .phone-hero.wallet-hero, .bigval.led, .wallet-actions, .txn,
 * .mini-tiles/.mini-tile, .rowline, .btn/.btn.lime/.btn.dark/.iconbtn, .input, .badge, .segmented, he-mini-check,
 * .he-skeleton, .he-logo-stack-loader, .he-toast). This file only arranges them for a tablet POS workflow:
 * grid placement, 44–64 px touch targets, the PIN pad grid, sticky context bar, and the D39 functional status hues
 * (red/amber are not in Helium; they are used for state dots and alert icons only and are listed for approval).
 * See docs/HELIUM-COMPONENT-AUDIT.md §5 (C1–C12).
 */
:root{--perks-danger:#A8322A;--perks-warn:#8A5300;--perks-touch:48px}

/* C1 — app frame, skip link, screen-reader helpers, hidden state (the HTML hidden attribute must win). */
.cx-app [hidden],.cx-hidden{display:none!important}
.cx-body{min-height:100dvh}
.cx-skip{position:absolute;left:-9999px;top:8px;z-index:300}
.cx-skip:focus{left:16px;padding:10px 14px;border-radius:14px;corner-shape:squircle;background:var(--helium-color-card)}
.cx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx-app{min-height:100dvh;display:flex;flex-direction:column}
.cx-boot{min-height:100dvh;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--helium-color-muted)}

/* C2 — context bar = Helium .topline; the topnav holds read-only context pills (outlet, currency, staff, device,
   connection) instead of demo links. Sticky so context is always visible during a transaction. */
.perks-cashier .topline.cx-bar{position:sticky;top:0;z-index:30;flex-wrap:wrap;gap:10px}
.perks-cashier .cx-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.perks-cashier .cx-brand .brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;corner-shape:squircle;background:var(--helium-color-brand-dark);color:var(--he-color-on-dark,#fff)}
.perks-cashier .cx-brand .brand-mark svg{width:18px;height:18px}
.perks-cashier .cx-brand .brand-text{display:flex;flex-direction:column;line-height:1.1}
.perks-cashier .cx-brand .brand-text span{font-size:12px;font-weight:500;color:var(--helium-color-muted)}
.perks-cashier .cx-ctx .navtab{cursor:default}
.perks-cashier .cx-net i{display:inline-block;width:9px;height:9px;border-radius:3px;corner-shape:squircle;background:var(--helium-color-brand);margin-right:6px}
.perks-cashier .cx-net[data-state="offline"] i{background:var(--perks-danger)}
.perks-cashier .cx-bar-actions{margin-left:auto}
.perks-cashier .cx-bar-actions svg,.perks-cashier .iconbtn svg{width:18px;height:18px}

/* C3 — Helium side tray used as the till menu (cashier.js toggles cx-hidden; no screens.js). */
.perks-cashier .cx-menu{position:fixed;right:12px;top:72px;z-index:60;width:min(320px,calc(100vw - 24px));max-height:calc(100dvh - 90px);overflow:auto}
.perks-cashier .cx-menu.he-side-tray:not(.cx-hidden){display:block}
.perks-cashier .he-tray-links button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:var(--perks-touch);gap:12px}
.perks-cashier .he-tray-links svg{width:18px;height:18px}

/* C4 — main column + heading (Helium .screen.lab.desktop-page + .hero-row), offline banner under the bar. */
.perks-cashier .cx-main{width:100%;max-width:1180px;margin:0 auto;flex:1;display:flex;flex-direction:column;gap:18px}
.perks-cashier .cx-head h1{margin-top:6px}
.perks-cashier .cx-back{margin-bottom:6px}
.perks-cashier .cx-banner{position:sticky;top:72px;z-index:25}

/* C5 — Helium buttons/inputs at till sizes (≥48 px; primary actions 56–64 px), no geometry shift on focus. */
.perks-cashier .btn,.perks-cashier .iconbtn,.perks-cashier .input{min-height:var(--perks-touch)}
.perks-cashier .iconbtn{min-width:var(--perks-touch)}
.perks-cashier .btn svg{width:18px;height:18px}
.perks-cashier .btn.perks-lg{min-height:60px;padding-inline:26px;font-size:16px}
.perks-cashier .btn.perks-block{width:100%;justify-content:center}
.perks-cashier .btn.perks-plain{background:transparent;box-shadow:none}
.perks-cashier .input{width:100%;font-size:17px}
.perks-cashier .cx-find .control-line{flex-wrap:nowrap}
.perks-cashier .cx-find .input{min-height:60px;font-size:18px}
.perks-cashier .perks-field{display:grid;gap:8px}
.perks-cashier .perks-field>label{font-size:14px;font-weight:600}
.perks-cashier .perks-hint{display:block;color:var(--helium-color-muted)}
.perks-cashier .perks-check{min-height:var(--perks-touch);align-items:center}
.perks-cashier .perks-stack{display:flex;flex-direction:column;gap:14px}
.perks-cashier .perks-between{justify-content:space-between}
.perks-cashier .perks-grow{flex:1;min-width:0}
.perks-cashier .control-line{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* C6 — alerts = Helium quiet surface + icon; state named in words. Danger/warn icon hue = D39 functional hues. */
.perks-cashier .perks-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px}
.perks-cashier .perks-alert>svg{width:20px;height:20px;flex:none;margin-top:1px}
.perks-cashier .perks-alert.danger>svg{color:var(--perks-danger)}
.perks-cashier .perks-alert.warn>svg{color:var(--perks-warn)}
.perks-cashier .perks-alert strong{display:block;margin-bottom:2px}
.perks-cashier .badge svg{width:14px;height:14px}

/* C7 — member: Wallet hero (.phone-hero.wallet-hero) beside the action tiles. The reference hero sits inside the clipped
   phone shell; here it is clipped to its own squircle so its :after light ring cannot overflow the page. */
.perks-cashier .cx-member{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.perks-cashier .cx-member .wallet-hero{overflow:hidden;position:relative;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.perks-cashier .cx-member-name{font:400 clamp(24px,2.4vw,32px)/1.15 var(--helium-type-display);letter-spacing:-.035em}
.perks-cashier .cx-points{font-size:clamp(44px,6vw,72px)}
.perks-cashier .cx-sub{display:flex;gap:16px;flex-wrap:wrap;font-size:13px}
.perks-cashier .cx-sub b{font-variant-numeric:tabular-nums}
.perks-cashier .wallet-actions.cx-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.perks-cashier .cx-tile{min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.perks-cashier .cx-tile svg{width:24px;height:24px}
.perks-cashier .cx-tile span{font-weight:600}
.perks-cashier .cx-tile small,.perks-cashier .cx-staff small{font-size:12px;color:var(--helium-color-muted)}
.perks-cashier .cx-tile:disabled{opacity:.5;cursor:not-allowed}
.perks-cashier .txn{display:flex;align-items:center;gap:12px}
.perks-cashier .txn small{display:block}
.perks-cashier .perks-empty{margin:0}
@media (max-width:899px){.perks-cashier .cx-member{grid-template-columns:minmax(0,1fr)}}
@media (max-width:599px){.perks-cashier .wallet-actions.cx-actions{grid-template-columns:minmax(0,1fr)}}

/* C8 — transaction forms: fields panel + sticky summary panel (two .demo-panel). */
.perks-cashier .cx-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:18px;align-items:start}
.perks-cashier .cx-fields{display:grid;gap:16px}
.perks-cashier .cx-summary{position:sticky;top:90px;display:flex;flex-direction:column;gap:12px}
.perks-cashier .perks-amount{font-size:clamp(28px,3vw,40px)}
.perks-cashier .cx-money{position:relative}
.perks-cashier .cx-money .cur{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--helium-color-muted);pointer-events:none}
.perks-cashier .cx-money input.input.sq-sm{padding-left:62px;font-variant-numeric:tabular-nums}
.perks-cashier .cx-quick{display:flex;gap:8px;flex-wrap:wrap}
.perks-cashier .cx-consent{padding:14px 16px;border-radius:18px;corner-shape:squircle;background:var(--helium-color-control)}
.perks-cashier .cx-consent q{font-style:normal;font-weight:600}
.perks-cashier .cx-submit{min-height:58px}
@media (max-width:899px){.perks-cashier .cx-form{grid-template-columns:minmax(0,1fr)}.perks-cashier .cx-summary{position:static}}

/* C9 — redemption progress + POS discount read-out (Helium badges + LED .bigval). */
.perks-cashier .cx-steps{display:flex;gap:6px;flex-wrap:wrap}
.perks-cashier .cx-apply{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.perks-cashier .cx-discount{font-size:clamp(48px,8vw,88px)}

/* C10 — results: icon tile + Helium .mini-tiles for before/added/after + .rowline details. */
.perks-cashier .cx-result{display:flex;flex-direction:column;gap:16px}
.perks-cashier .cx-result-head{display:flex;gap:14px;align-items:center}
.perks-cashier .cx-result-icon{width:56px;height:56px;border-radius:18px;corner-shape:squircle;display:grid;place-items:center;flex:none;background:var(--helium-color-control)}
.perks-cashier .cx-result-icon svg{width:28px;height:28px}
.perks-cashier .cx-result[data-tone="danger"] .cx-result-icon svg{color:var(--perks-danger)}
.perks-cashier .cx-result[data-tone="warn"] .cx-result-icon svg{color:var(--perks-warn)}
.perks-cashier .cx-result h2{margin:0}
.perks-cashier .cx-delta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.perks-cashier .perks-dl{margin:0}
.perks-cashier .perks-dl .rowline{display:flex;justify-content:space-between;gap:16px}
.perks-cashier .perks-dl dd{margin:0;text-align:right;overflow-wrap:anywhere}
.perks-cashier .cx-next{min-height:60px}
@media (max-width:559px){.perks-cashier .cx-delta{grid-template-columns:minmax(0,1fr)}}

/* C11 — sign-in, lock and PIN pad: Helium panel, staff tiles as .wallet-actions, keypad as a 3×4 grid of .btn. */
.perks-cashier .cx-auth{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.perks-cashier .cx-auth-card{width:min(480px,100%);display:flex;flex-direction:column;gap:12px}
.perks-cashier .cx-auth-wide{width:min(760px,100%)}
.perks-cashier .auth-brand{display:flex;align-items:center;gap:10px}
.perks-cashier .auth-brand .brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;corner-shape:squircle;background:var(--helium-color-brand-dark);color:var(--he-color-on-dark,#fff)}
.perks-cashier .auth-brand svg{width:18px;height:18px}
.perks-cashier .auth-brand .brand-text{display:flex;flex-direction:column}
.perks-cashier .cx-staff{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.perks-cashier .cx-staff button{min-height:96px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;text-align:left}
.perks-cashier .cx-pin-dots{display:flex;justify-content:center;gap:12px;margin:8px 0}
.perks-cashier .cx-pin-dots i{width:16px;height:16px;border-radius:6px;corner-shape:squircle;border:2px solid var(--helium-color-muted)}
.perks-cashier .cx-pin-dots i.on{background:var(--helium-color-brand-dark);border-color:var(--helium-color-brand-dark)}
.perks-cashier .cx-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.perks-cashier .cx-keypad .btn{min-height:64px;justify-content:center;font-size:24px;font-variant-numeric:tabular-nums}
.perks-cashier .cx-keypad .btn.alt{font-size:14px}
.perks-cashier .cx-lock-shield{position:fixed;inset:0;z-index:100;overflow:auto;background:var(--helium-color-canvas,#F3F6F2)}

/* C12 — lists, toasts, dialogs, keyboard hints, small layouts. */
.perks-cashier .cx-list{display:flex;flex-direction:column;gap:8px}
.perks-cashier .cx-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.perks-cashier .cx-kbd{font:600 11px/1 var(--helium-type-body);padding:3px 6px;border-radius:6px;corner-shape:squircle;background:var(--helium-color-control)}
.perks-cashier .cx-toaster{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.perks-cashier .cx-toaster .he-toast{display:flex;gap:10px;align-items:center}
.perks-cashier .cx-toaster .he-toast svg{width:18px;height:18px}
.perks-cashier .cx-toaster .he-toast.error svg{color:var(--perks-danger)}
.perks-cashier dialog.dialog{max-width:min(520px,calc(100vw - 32px))}
.perks-cashier .perks-dialog-actions{justify-content:flex-end;margin-top:14px}
.perks-cashier .perks-table-wrap{overflow-x:auto}
.perks-cashier .he-table{width:100%}
.perks-cashier .mini-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.perks-cashier .cx-mono{font-family:var(--helium-type-metric);font-size:12px;overflow-wrap:anywhere}
@media (max-width:767px){.perks-cashier .cx-grid-2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:599px){.perks-cashier .cx-brand .brand-text,.perks-cashier .perks-hide-sm{display:none}.perks-cashier .cx-find .control-line{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.perks-cashier .cx-keypad .btn,.perks-cashier .cx-tile{transition:none}}
@media print{.perks-cashier .cx-bar,.perks-cashier .cx-toaster{display:none!important}}

/* C13 — visible keyboard/programmatic focus on till fields (WCAG 2.4.7). Helium's global :focus-visible rule removes
   outline, shadow and border colour with !important and :focus paints the field white, so an auto-focused field on a
   white panel disappears. Helium's own contract (AGENTS.md lock 7: reserved 2 px border that takes colour on focus)
   is restored here as an inset ring; !important is required only to outrank that global rule. */
html body.perks-cashier.cx-body :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,select).input:is(:focus,:focus-visible){box-shadow:inset 0 0 0 2px var(--helium-color-focus)!important;background:var(--helium-color-field)!important}
.perks-cashier .demo-panel.cx-find-panel{min-height:0!important}
.perks-cashier .cx-steps .perks-todo{opacity:.6}
/* C14 — Helium's .demo-panel is a gallery specimen with min-height 315 px (!important); till panels hold variable
   content (an empty list must not leave a 300 px void), so the minimum is released inside the cashier only. */
.perks-cashier .demo-panel{min-height:0!important}
.perks-cashier .cx-bar-actions>*{flex:none}
/* C15 — Helium sets .topactions .iconbtn to 39 px with !important at phone widths; till controls keep ≥ 48 px
   (AGENTS.md lock 9: pointer targets ≥ 44 px in production workflows, QA-104). */
html body.perks-cashier .topactions .iconbtn{min-width:48px!important;min-height:48px!important}
/* C16 — prefers-reduced-motion: Helium's RareUI .btn/.iconbtn transitions (.3s) are not covered by its reduced-motion
   rules on the screens stack; the till honours the preference everywhere (QA-107, AGENTS.md lock 8). */
@media (prefers-reduced-motion:reduce){html body.perks-cashier.cx-body :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,.input),html body.perks-cashier.cx-body *,html body.perks-cashier.cx-body *::before,html body.perks-cashier.cx-body *::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}
/* C17 — text contrast (deviation D-12): Helium's muted/eyebrow inks on the till measure < 4.5:1; only the text colour is
   swapped to Helium's editorial ink at 74 % alpha (token-derived). */
html body.perks-cashier :is(.hero-row .eyebrow,button[data-act=next] small,.demo-panel>p,form>p,.cx-main p,.txn small,.rowline span){color:var(--he-field-ink)!important;color:rgb(from var(--he-editorial-ink) r g b / .74)!important}