/* BetaPos app layer on top of the design kit (kit.css is copied from the
   approved canvas unchanged). Only what a live page needs beyond a fixed
   1280x800 board: fill the window, real focus, real disabled and busy states. */
html, body { margin: 0; height: 100%; background: #f6f5f2; }
#app.root { width: 100vw; height: 100vh; }
#app .content { overflow-y: auto; overscroll-behavior: contain; }
.rgrid { display: grid; gap: 12px; min-width: 0; min-height: 0; }
.rgrid > * { min-width: 0; }
.root input:focus, .root select:focus, .root textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); outline: none; }
.root button:focus-visible, .root a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.root button[disabled], .root .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.root .btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.root .btn.busy::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff; animation: spin .8s linear infinite; }
.root .btn:not(.pri):not(.go).busy::after { border-color: rgba(0,0,0,.15); border-top-color: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }
.scroll { overflow-y: auto; overscroll-behavior: contain; }
.hide { display: none !important; }
.err-msg { font-size: 13px; font-weight: 550; color: var(--bad); }
.field .err-msg { margin-top: -2px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 50; padding: 12px 18px; border-radius: 12px; background: #15201b; color: #fff; font: 550 14px/1.3 'Geist', system-ui, sans-serif; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); }
.codebox { position: relative; display: flex; gap: 10px; }
.codebox input { position: absolute; inset: 0; opacity: 0; font-size: 16px; }
.codebox span { width: 56px; height: 68px; border-radius: 14px; border: 1px solid var(--line2); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.codebox span.cur { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.codebox.bad span { border-color: var(--bad); }
.ssobtn { height: 52px; border-radius: 12px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: 1px solid var(--line2); background: #fff; color: var(--ink); cursor: pointer; }
.ssobtn.apple { background: #000; border-color: #000; color: #fff; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 600; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
input[type=time] { font-variant-numeric: tabular-nums; }
.scroll > section > *, .scroll > aside > * { flex-shrink: 0; }
.scroll > aside .card.grow { min-height: 420px; }

/* ── narrow screens (< 900 px, a phone): no scaling, everything stacks ── */
html.narrow body { overflow-y: auto; }
html.narrow #app.root { flex-direction: column; overflow: visible; }
html.narrow .rgrid, html.narrow .grid2, html.narrow .grid3, html.narrow .grid4 { grid-template-columns: minmax(0,1fr) !important; }
html.narrow .scroll { overflow: visible; }
/* sign-in: the green panel steps aside */
html.narrow #app > .r.grow.stretch > aside { display: none; }
html.narrow #app > .r.grow.stretch > main { padding: 24px 16px; }
html.narrow #app main form, html.narrow #app main > div { width: 100% !important; }
html.narrow #app main .r.center { flex-direction: column; gap: 24px !important; }
/* setup: header wraps, columns stack, footer stays at the bottom */
html.narrow header.r.between { height: auto !important; flex-wrap: wrap; padding: 12px 16px !important; gap: 10px !important; }
html.narrow .steps { flex-wrap: wrap; gap: 6px; }
html.narrow .steps .ln { display: none; }
html.narrow .steps .s { font-size: 0; gap: 0; }
html.narrow .steps .s b { font-size: 12px; }
html.narrow .r.grow.scroll { flex-direction: column; padding: 16px !important; }
html.narrow .r.grow.scroll > section { width: 100% !important; }
html.narrow .r.grow.scroll > aside { position: static !important; width: 100%; }
html.narrow [data-c] { flex-wrap: wrap; }
html.narrow footer.r.between { position: sticky; bottom: 0; padding: 0 16px !important; z-index: 5; }
/* the kiosk shell: the rail becomes a bottom bar you can swipe */
html.narrow .rail { order: 2; position: sticky; bottom: 0; width: 100%; flex-direction: row; padding: 6px 8px; gap: 4px; z-index: 10; }
html.narrow .rail .logo, html.narrow .rail .st, html.narrow .rail .lock { display: none; }
html.narrow .rail .nav { flex-direction: row; overflow-x: auto; gap: 2px; }
html.narrow .rail .it { min-width: 76px; height: 54px; flex-shrink: 0; }
html.narrow .rail .it.on::before { display: none; }
html.narrow .main { padding: 12px 12px 16px; }
html.narrow .head { height: auto; flex-wrap: wrap; row-gap: 8px; }
html.narrow .head > .r { flex-wrap: wrap; }
html.narrow .tabs { overflow-x: auto; }
html.narrow .content { overflow: visible; }
html.narrow .tbl { min-width: 560px; }
html.narrow .card.p0 > .scroll { overflow-x: auto; }
.tbl td:last-child { overflow: visible; }
.card.flat.tight .step > button { width: 40px; height: 40px; }
.card.flat.tight .step > span { min-width: 44px; height: 40px; }
/* Cards stacked in anything that scrolls keep their own height; the
   container scrolls instead of squeezing them (found in Close, true everywhere). */
.scroll > .card, .scroll > * > .card, .content > .scroll .card, .rgrid.scroll > * { flex-shrink: 0; }