/* Checkpoint 12: one mobile interaction system. No loyalty behaviour lives here. */body{min-width:0}
button,a,input,select,textarea{touch-action:manipulation}
button,a{transition:background-color var(--duration),color var(--duration),opacity var(--duration),transform var(--duration)}
button:active:not(:disabled),a:active{transform:scale(.98);opacity:.82}
button:disabled{cursor:default}
button[aria-busy=true]{cursor:progress;opacity:.65}
:focus-visible{outline-color:var(--ink)!important}
body.sheet-open{overflow:hidden}
.shell{padding-left:max(var(--space-5),env(safe-area-inset-left));padding-right:max(var(--space-5),env(safe-area-inset-right))}
.is-customer .shell,.is-staff .shell{min-height:100svh}
.topbar .wordmark{min-height:44px;display:flex;align-items:center}
.is-staff .topbar{height:calc(76px + env(safe-area-inset-top))}
.is-entry .topbar{height:calc(92px + env(safe-area-inset-top))}
input:not([type=checkbox]):not([type=radio]),select,textarea{scroll-margin:var(--space-6)}
.welcome-logo{padding-top:calc(64px + env(safe-area-inset-top))}
.card-identity h1{line-height:1.15}
.new-title-note{display:block;min-height:44px;padding:var(--space-2) 0;text-align:left;color:var(--muted);font-size:var(--text-small);line-height:1.45}
.card-progress{padding:22px 0 26px}
.card-progress .dots span{width:24px;height:24px}
.dots span{transition:background-color 220ms,border-color 220ms}
.card-progress>p:first-of-type{text-transform:uppercase;font-size:var(--text-small);letter-spacing:.05em;font-weight:500}
.card-wallet>strong{letter-spacing:0;font-weight:500}
.card-reward-description{font-size:var(--text-small)}
.card-check.is-tried{color:var(--ink)}
.card-experience-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px var(--space-4)}
.card-experience{justify-content:space-between;flex-direction:row-reverse;font-size:var(--text-small);min-height:30px;gap:var(--space-2)}
.card-lifetime{min-height:64px;padding:var(--space-4) 2px}
.card-actions,.is-staff .service-bottom{border-top:0;padding-bottom:max(var(--space-4),env(safe-area-inset-bottom))}
.sheet-tabs button[aria-pressed=true]{background:var(--ink);color:var(--black)}
.sheet-tabs button[aria-pressed=true] span{color:var(--line)}
.sheet-tabs button span{display:inline;margin-left:6px;font-size:var(--text-small)}
.sheet-list>.sheet-row:first-child{border-top:0}
.reward-list-row.is-history strong{color:var(--muted)}
.reward-list-row.is-available strong{color:var(--ink)}
.experience-detail{min-height:58px;padding:14px 0}
.experience-tally{color:var(--muted);font-size:var(--text-small);white-space:nowrap}
dialog,.is-customer dialog,.is-staff dialog{position:fixed;border-bottom:0;background:var(--bg);overflow-y:auto;scroll-padding:var(--space-6)}
dialog[open]{animation:sheet-rise 200ms ease-out}
dialog h2,.is-customer dialog h2,.is-staff dialog h2{padding:0}
dialog>.eyebrow{margin:0 0 var(--space-3);color:var(--muted);font-size:var(--text-small)}
.modal-close,.modal-back{position:absolute;top:6px;min-width:44px;min-height:44px;padding:0;color:var(--muted);font-size:var(--text-heading);line-height:1}
.modal-close{right:12px}
.modal-back{font-size:var(--text-heading)}
.sheet-feedback{padding:var(--space-3);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.sheet-feedback.error{color:var(--error);border-color:var(--error-border)}
.is-customer dialog .sheet-status{color:var(--muted)}
.sheet-back{min-height:48px}
dialog:has(#qr){text-align:center}
dialog canvas{margin:var(--space-3) auto var(--space-5)}
.is-staff .staff-member{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;margin:0}
.is-staff .tag small{font-size:var(--text-meta);color:var(--muted);font-weight:400}
.is-staff .tags{grid-template-columns:repeat(2,minmax(0,1fr))}
.is-staff .staff-progress>span{color:var(--muted)}
.staff-rewards{margin-top:var(--space-4)}
.staff-rewards>summary{min-height:48px;padding:14px 0}
.staff-reward button{font-size:var(--text-small);border-radius:var(--radius-control);min-height:48px;background:var(--ink);color:var(--black);flex-shrink:0}
.staff-reward>div{overflow-wrap:break-word}
.staff-reward small{font-size:var(--text-small)}
.staff-history-row{padding:var(--space-4) 0;border-top:1px solid var(--line)}
.staff-history-row strong{font-weight:500}
.staff-history-row p{font-size:var(--text-small);color:var(--muted)}
.is-staff .visit-receipt{background:var(--surface);border:0;border-radius:var(--radius-control);padding:var(--space-2) 14px;margin-bottom:var(--space-4)}
.is-staff .visit-receipt p{font-size:var(--text-small);min-width:0;line-height:1.45}
.is-staff .visit-receipt button{flex-shrink:0}
.is-staff .service:has(.staff-member) .service-heading{margin-bottom:var(--space-3)}
.is-staff .table-heading{margin-top:var(--space-6);margin-bottom:0}
.is-staff .owner-topbar{border:0;min-height:72px}
.owner{padding-top:env(safe-area-inset-top)}
.owner-tile{border:0;border-radius:var(--radius-card)}
.owner-tile-wide{background:var(--surface);color:var(--ink);min-height:118px}
.owner-tile-wide>small{color:var(--muted)}
.owner-back,.config-row>span:last-child,.option-button span{color:var(--muted)}
.toast,.is-staff .toast,.is-member .toast{bottom:calc(155px + env(safe-area-inset-bottom));box-shadow:none;border-radius:var(--radius-control)}
.toast.error{background:var(--surface);color:var(--error);border:1px solid var(--error-border)}
.connection,.is-customer .connection,.is-staff .connection{display:flex;align-items:center;gap:var(--space-3);border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--radius-control)}
.connection strong{font-size:var(--text-small)}
.connection p{margin:var(--space-1) 0 0;font-size:var(--text-small);color:var(--muted)}
.connection button{min-height:44px;padding:10px;flex-shrink:0}
.app-update{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3) 0;font-size:var(--text-small);color:var(--muted)}
.app-update button{min-height:44px;padding:var(--space-2);color:var(--ink)}
.pending a{min-height:44px;display:flex;align-items:center}
.keyboard-open .card-actions{position:static;transform:none;padding:var(--space-4) 0}
.keyboard-open .service-bottom{position:sticky;transform:none;left:auto;bottom:0;padding-left:0;padding-right:0}
.keyboard-open .service-bottom nav{display:none}
.keyboard-open .service{padding-bottom:var(--space-4)}
.keyboard-open .member-card{padding-bottom:var(--space-4)}
@keyframes sheet-rise{from{transform:translateY(24px);opacity:.5}
to{transform:translateY(0);opacity:1}
}
@supports(transition-behavior:allow-discrete){dialog,.is-customer dialog,.is-staff dialog{opacity:0;transform:translateY(24px);transition:opacity 180ms,transform 180ms,display 180ms allow-discrete,overlay 180ms allow-discrete}
dialog[open],.is-customer dialog[open],.is-staff dialog[open]{opacity:1;transform:none;animation:none}
@starting-style{dialog[open],.is-customer dialog[open],.is-staff dialog[open]{opacity:0;transform:translateY(24px)}
}
}
@media(max-width:360px){dialog,.is-customer dialog,.is-staff dialog{padding-left:var(--space-5);padding-right:var(--space-5)}
.card-panel{padding:var(--space-4)}
.card-experience-grid{column-gap:var(--space-3)}
.owner-tile{padding:var(--space-4)}
.owner-tile>span{font-size:var(--text-body)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
button:active:not(:disabled),a:active{transform:none}
}