/* ══════════════════════════════════════════════════════════════════════
   MidBank Tipping — GUEST light theme (2026-09-15)
   White, airy, calm. Applies ONLY under body.mb-light, which is set on the
   three guest-facing surfaces: tipping-kiosk.html, tip.html, tip-thanks.html.
   Owner console, dashboard, admin and marketing pages keep the dark tokens
   in css/tipping-system.css untouched — this file never styles a bare
   element selector outside the body.mb-light scope.
   ══════════════════════════════════════════════════════════════════════ */

body.mb-light{
  /* surfaces — pure white page, one faint panel, nothing darker */
  --mb-base:#ffffff;
  --mb-base-2:#ffffff;
  --mb-surface:#f5f6f8;
  --mb-surface-2:#eef0f3;
  --mb-hairline:#e8eaee;
  --mb-hairline-strong:#d8dbe1;

  /* ── brand ────────────────────────────────────────────────────────
     MidBank navy carries every decision on a guest screen: the selected
     tip card, the Next/Send/Tip now buttons, the keypad and field focus.
     MidBank red is a small accent only — never a surface, never a CTA.
     Green is reserved for ONE meaning: the money moved. It appears on the
     success check, the success bar and the paid/sent confirmations, and
     nowhere else, so a guest never reads "green" as anything but done.
     Both sampled from images/midbank-logo-dark.png. */
  --mb-primary:#1E2A78;          /* navy — the one decision colour */
  --mb-primary-press:#172060;
  --mb-primary-tint:#eef0fa;     /* selected card fill */
  --mb-accent:#1E2A78;
  --mb-accent-soft:#1E2A78;
  --mb-red:#C8102E;              /* small accent / error only */
  --mb-success:#2bb673;          /* paid states ONLY */
  --mb-success-deep:#1f8a57;

  /* ink */
  --mb-ink:#111111;
  --mb-ink-2:#374151;
  --mb-ink-3:#6b7280;
  --mb-ink-4:#9aa1ab;

  /* type — Inter only on guest screens: no display serif, no ledger mono */
  --mb-font-display:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mb-font-mono:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mb-font-num:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  --mb-r-card:22px;
  --mb-shadow-ambient:0 1px 2px rgba(17,17,17,.06);
  --mb-shadow-glow:none;

  --mb-w-phone:440px;

  background:#fff !important;
  background-image:none !important;
  color:var(--mb-ink) !important;
  font-family:var(--mb-font-ui);
}
body.mb-light .mb-num,
body.mb-light .mb-mono,
body.mb-light .mb-fig,
body.mb-light .mb-serif{font-family:var(--mb-font-ui);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}

/* Kill every dark-theme atmosphere layer: gradients, washes, grain, glow. */
body.mb-light::before,
body.mb-light::after,
body.mb-light .mb-field::before,
body.mb-light .mb-grain::after{display:none !important;content:none !important}
body.mb-light html{background:#fff}

/* ── buttons ───────────────────────────────────────────────────────── */
body.mb-light .mb-btn{border-radius:16px;font-weight:600;min-height:60px;
  box-shadow:none}
body.mb-light .mb-btn--primary{background:var(--mb-primary);color:#fff}
body.mb-light .mb-btn--primary:active{background:var(--mb-primary-press)}
body.mb-light .mb-btn--primary:disabled,
body.mb-light .mb-btn--primary[disabled]{background:#dfe2e7;color:#9aa1ab}
body.mb-light .mb-btn--ghost{background:#fff;color:var(--mb-ink-2);
  box-shadow:inset 0 0 0 1px var(--mb-hairline-strong)}
body.mb-light :where(a,button,input,textarea,[tabindex]):focus-visible{
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--mb-primary)}

/* ── shared chips / cards ──────────────────────────────────────────── */
body.mb-light .mb-card,
body.mb-light .mb-receipt{background:#fff;border:1px solid var(--mb-hairline)}
body.mb-light .mb-sandbox{background:var(--mb-surface);border:1px solid var(--mb-hairline);
  color:var(--mb-ink-3)}
/* The one place red earns its keep on a guest screen: the small dot on
   the test-mode / sandbox chip, where "look at this" is the whole point. */
body.mb-light .mb-sandbox::before{background:var(--mb-red);box-shadow:none}
body.mb-light .mb-tear{display:none}

/* ══ KIOSK STAFF GRID (tipping-kiosk.html) ═════════════════════════ */
body.mb-light.kioskpage{background:#fff}
body.mb-light .kheader{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;padding:22px 28px 6px}
body.mb-light .kheader .kbiz{font:600 1.05rem/1.3 var(--mb-font-ui);color:var(--mb-ink);
  letter-spacing:-.01em}
body.mb-light .kheader .ksub{margin-top:4px;font:400 .9rem/1.4 var(--mb-font-ui);
  color:var(--mb-ink-3)}
body.mb-light .kheader .knotip{flex:0 0 auto;white-space:nowrap;border:0;background:transparent;
  cursor:pointer;font:500 .9rem/1 var(--mb-font-ui);color:var(--mb-ink-3);
  text-decoration:none;padding:8px 4px}
@media (max-width:560px){
  body.mb-light .kheader{padding:18px 18px 4px}
  body.mb-light #kiosk-flow{padding:0 18px 24px}
  body.mb-light .kheader .ksub{max-width:22ch}
}

body.mb-light #kiosk-flow{padding:0 28px 28px}

/* ── whole-team pools: one compact row, above the faces ──────────────
   A pool is a shortcut, not a person. It gets a small mark and a label,
   never a portrait-sized card, and never a stock venue photo standing in
   for a room this business has not shown us. */
body.mb-light .kdepts{margin-top:18px}
body.mb-light .kdeptstitle{font:500 .8rem/1 var(--mb-font-ui);text-transform:uppercase;
  letter-spacing:.09em;color:var(--mb-ink-4)}
body.mb-light .kdeptrow{margin-top:10px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
body.mb-light .kdept{display:flex;align-items:center;gap:14px;min-height:76px;max-height:88px;
  padding:14px 16px;border-radius:18px;text-decoration:none;color:inherit;
  background:var(--mb-surface);box-shadow:inset 0 0 0 1px var(--mb-hairline);
  transition:background var(--mb-dur-fast) var(--mb-ease-out),transform 120ms ease}
body.mb-light .kdept:active{transform:scale(.985);background:var(--mb-surface-2)}
body.mb-light .kdicon{flex:0 0 auto;width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--mb-primary-tint);color:var(--mb-accent-soft)}
body.mb-light .kdicon svg{width:24px;height:24px}
body.mb-light .kdtxt{min-width:0;flex:1;display:block}
body.mb-light .kdnm{display:block;font:600 1rem/1.25 var(--mb-font-ui);color:var(--mb-ink);
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mb-light .kdrl{display:block;margin-top:3px;font:400 .85rem/1.3 var(--mb-font-ui);
  color:var(--mb-ink-3)}
body.mb-light .kdchev{flex:0 0 auto;font-size:20px;line-height:1;color:var(--mb-ink-4)}
@media (max-width:560px){
  body.mb-light .kdeptrow{grid-template-columns:1fr}
}

/* ── the faces: the star of the screen ──────────────────────────────
   align-items:start matters — a stretched grid item resolves its height
   before the square photo box does, and the photo overflows the tile. */
body.mb-light .kioskgrid{margin-top:24px;display:grid;gap:22px;align-items:start;
  align-content:start;grid-auto-rows:max-content;justify-content:center;
  grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:24px}
@media (min-width:760px){
  body.mb-light .kioskgrid{grid-template-columns:repeat(3,minmax(0,244px))}
}
@media (min-width:1100px){
  body.mb-light .kioskgrid{grid-template-columns:repeat(4,minmax(0,260px))}
}
body.mb-light .ktile{display:block;min-height:0;padding:0;background:transparent;
  box-shadow:none;border-radius:20px;text-align:center;text-decoration:none;color:inherit}
body.mb-light .ktile:active{transform:scale(.97);background:transparent}
/* padding-top:100% — not aspect-ratio — because a grid row track sizes
   itself from the item's intrinsic height, and an aspect-ratio box has
   none until after the track is fixed. Padding is real height. */
body.mb-light .ktile .kavbox{display:block;position:relative;width:100%;
  height:0;padding-top:100%;
  border-radius:20px;overflow:hidden;background:var(--mb-surface);
  box-shadow:inset 0 0 0 1px var(--mb-hairline)}
body.mb-light .ktile .kavbox img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
body.mb-light .ktile .kavbox > .kav{position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;background:transparent;
  font:500 1.75rem/1 var(--mb-font-ui);color:var(--mb-ink-3)}
body.mb-light .ktile .ktxt{display:block;margin-top:12px}
body.mb-light .ktile .knm{display:block;font:600 1rem/1.3 var(--mb-font-ui);color:var(--mb-ink);
  letter-spacing:-.01em;white-space:normal}
body.mb-light .ktile .krl{display:block;margin-top:3px;font:400 .85rem/1.3 var(--mb-font-ui);
  color:var(--mb-ink-3);white-space:normal}
body.mb-light .kstate{color:var(--mb-ink-3)}

/* ══ TIP SCREEN (tip.html) ═════════════════════════════════════════ */
body.mb-light .topwrap{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid var(--mb-hairline)}
body.mb-light .topbar img{opacity:1}
body.mb-light .lang{background:var(--mb-surface)}
body.mb-light .lang button{color:var(--mb-ink-3)}
body.mb-light .lang button.on{background:var(--mb-primary);color:#fff}

/* portrait — a calm rounded photo card, no glow, no black scrim */
body.mb-light .portrait{background:var(--mb-surface);box-shadow:none;
  border-radius:20px;aspect-ratio:1/1 !important}
body.mb-light .portrait::after{display:none}
body.mb-light .portrait .mono{background:var(--mb-surface)}
body.mb-light .portrait .mono::before{display:none}
body.mb-light .portrait .mono .glyph{background:#fff;color:var(--mb-ink-3);
  box-shadow:inset 0 0 0 1px var(--mb-hairline);animation:none}
body.mb-light .portrait img{animation:none}
/* the name plate moves OUT of the image and sits under it */
body.mb-light .portrait .plate{position:static;padding:12px 2px 0;left:auto;right:auto;bottom:auto}
body.mb-light .portrait{overflow:visible;aspect-ratio:auto !important;display:block}
body.mb-light .portrait img,
body.mb-light .portrait .mono{aspect-ratio:1/1;height:auto;border-radius:20px;position:relative;
  inset:auto;overflow:hidden}
body.mb-light .portrait .plate h1{font-family:var(--mb-font-ui);font-weight:600;
  font-size:1.5rem;line-height:1.2;color:var(--mb-ink);letter-spacing:-.01em}
body.mb-light .portrait .plate p{margin-top:2px;font:400 .95rem/1.35 var(--mb-font-ui);
  color:var(--mb-ink-3)}

body.mb-light .identity .speaks,
body.mb-light .identity .about{color:var(--mb-ink-3)}
body.mb-light .verified{background:var(--mb-primary-tint);color:var(--mb-accent-soft)}

/* bill mode: the keypad screen */
body.mb-light .billtabs{background:var(--mb-surface);box-shadow:none}
body.mb-light .billtabs button{color:var(--mb-ink-3)}
body.mb-light .billtabs button.on{background:#fff;color:var(--mb-ink);
  box-shadow:0 1px 2px rgba(17,17,17,.08)}
body.mb-light .custom{background:var(--mb-surface);box-shadow:none;border-radius:16px;
  padding:4px 20px}
body.mb-light .custom:focus-within{box-shadow:inset 0 0 0 1.5px var(--mb-primary)}
body.mb-light .custom span{color:var(--mb-ink-3)}
body.mb-light .custom input{color:var(--mb-ink);font-size:1.25rem;padding:18px 0}
body.mb-light .custom input::placeholder{color:var(--mb-ink-4);font-size:1rem}

/* the three big tip cards */
body.mb-light .pctchips{gap:12px;margin-top:14px}
body.mb-light .pctchip{background:#fff;box-shadow:inset 0 0 0 1px var(--mb-hairline);
  border-radius:20px;padding:26px 0;gap:6px;color:var(--mb-ink);min-height:112px;
  justify-content:center}
body.mb-light .pctchip b{font:700 1.75rem/1 var(--mb-font-ui);letter-spacing:-.02em}
body.mb-light .pctchip span{font:400 1rem/1 var(--mb-font-ui);color:var(--mb-ink-3)}
body.mb-light .pctchip.on{background:var(--mb-primary-tint);color:var(--mb-ink);
  box-shadow:inset 0 0 0 2px var(--mb-primary)}
body.mb-light .pctchip.on span{color:var(--mb-accent-soft)}
body.mb-light .pctchip:disabled{opacity:.5}

body.mb-light .presets{gap:12px}
body.mb-light .preset{background:#fff;box-shadow:inset 0 0 0 1px var(--mb-hairline);
  color:var(--mb-ink);border-radius:16px;padding:22px 0;font-weight:600;font-size:1.125rem}
body.mb-light .preset.on{background:var(--mb-primary-tint);color:var(--mb-ink);
  box-shadow:inset 0 0 0 2px var(--mb-primary)}

body.mb-light .nameline input,
body.mb-light .roomfields input,
body.mb-light .noterow textarea{background:var(--mb-surface);box-shadow:none;
  color:var(--mb-ink);border-radius:16px}
body.mb-light .nameline input::placeholder,
body.mb-light .roomfields input::placeholder,
body.mb-light .noterow textarea::placeholder{color:var(--mb-ink-4)}
body.mb-light .nameline input:focus,
body.mb-light .nameline input:focus-visible,
body.mb-light .roomfields input:focus,
body.mb-light .noterow textarea:focus{box-shadow:inset 0 0 0 1.5px var(--mb-primary)}

body.mb-light .amtmsg{color:var(--mb-red)}
body.mb-light .amtmsg.demonote{color:var(--mb-ink-3)}
body.mb-light .demoopen{color:var(--mb-accent-soft)}

/* fee options — quiet, collapsed behind a small link */
body.mb-light .feechips{gap:10px;margin-top:12px}
body.mb-light .feechip{background:#fff;box-shadow:inset 0 0 0 1px var(--mb-hairline);
  border-radius:16px}
body.mb-light .feechip.on{background:var(--mb-primary-tint);box-shadow:inset 0 0 0 1.5px var(--mb-primary)}
body.mb-light .feechip .fclabel{color:var(--mb-ink)}
body.mb-light .feechip.on .fclabel{color:var(--mb-accent-soft)}
body.mb-light .feechip .fcsub{color:var(--mb-ink-3)}

/* the fee-transparency line — kept, but small and quiet */
body.mb-light .gets{margin-top:16px;padding-top:14px;border-top:1px solid var(--mb-hairline)}
body.mb-light .gets .gline .k,
body.mb-light .gets .gline .v{font:400 .8rem/1.4 var(--mb-font-ui);color:var(--mb-ink-3)}
body.mb-light .gets .gline.big .k{color:var(--mb-ink-3)}
body.mb-light .gets .gline.big .v{font:500 .8rem/1.4 var(--mb-font-ui);color:var(--mb-ink-2);
  transform:none !important}
body.mb-light .feenote,
body.mb-light .deptrule{color:var(--mb-ink-4);font-size:.75rem}

body.mb-light .rowlink{color:var(--mb-ink-3);font-weight:500}
body.mb-light .rowlink .chev{opacity:.6}
body.mb-light .notip{color:var(--mb-ink-3)}
body.mb-light .batchrow{background:var(--mb-surface);box-shadow:none}
body.mb-light .batchrow .bnm{color:var(--mb-ink-2)}
body.mb-light .batchrow .bamt{color:var(--mb-ink)}
body.mb-light .batchlede{color:var(--mb-ink-2)}
body.mb-light .batchlede b{color:var(--mb-ink)}
body.mb-light .roomhint{color:var(--mb-ink-4)}
body.mb-light .noterow .count{color:var(--mb-ink-4)}

/* sticky pay bar — white, hairline top, no blur veil */
body.mb-light .paybar{background:#fff;border-top:1px solid var(--mb-hairline);
  backdrop-filter:none;-webkit-backdrop-filter:none}
body.mb-light .disclose p{color:var(--mb-ink-4)}
body.mb-light .growthloop{background:var(--mb-surface);box-shadow:none}
body.mb-light .growthloop a{color:var(--mb-ink-3)}
body.mb-light .growthloop a b{color:var(--mb-ink-2)}
body.mb-light .growthloop a span.arrow{color:var(--mb-accent-soft)}
body.mb-light .foot img{opacity:.45}
body.mb-light .foot p{color:var(--mb-ink-4)}
body.mb-light .foot a{color:var(--mb-ink-3)}
body.mb-light .dead h1{font-family:var(--mb-font-ui);color:var(--mb-ink)}
body.mb-light .dead p{color:var(--mb-ink-3)}

/* ── the pay sheet becomes a centred white card ─────────────────── */
body.mb-light .sheet{background:rgba(17,17,17,.28);align-items:center;
  backdrop-filter:blur(2px)}
body.mb-light .sheet .inner{background:#fff;color:var(--mb-ink);border-radius:24px;
  max-width:520px;margin:0 20px;padding:28px 26px 30px;
  box-shadow:0 24px 60px -24px rgba(17,17,17,.3)}
body.mb-light .sheet h3{font-family:var(--mb-font-ui);font-weight:600;font-size:1.35rem;
  color:var(--mb-ink)}
body.mb-light .sheet .hint{color:var(--mb-ink-3)}
body.mb-light .sheet .head button{color:var(--mb-ink-4);font-size:26px}
body.mb-light .sheet .err{color:var(--mb-red)}
body.mb-light .walletfallback{background:var(--mb-surface);box-shadow:none;color:var(--mb-ink-2)}
body.mb-light .prsep{color:var(--mb-ink-4)}
body.mb-light .prsep::before,body.mb-light .prsep::after{background:var(--mb-hairline)}
body.mb-light .sandboxbreak{background:var(--mb-surface);box-shadow:none;border-radius:18px}
body.mb-light .sandboxbreak .sbrow{color:var(--mb-ink-2);border-bottom-color:var(--mb-hairline-strong)}
body.mb-light .sandboxbreak .sbref,
body.mb-light .sandboxnote{color:var(--mb-ink-3)}

/* The big amount + "Tap, insert, or swipe" line that heads the pay card. */
body.mb-light .payhead{text-align:center;margin-bottom:6px}
body.mb-light .payhead .amt{display:block;font:700 2.25rem/1 var(--mb-font-ui);
  letter-spacing:-.03em;color:var(--mb-ink);font-variant-numeric:tabular-nums}
body.mb-light .payhead .how{display:block;margin-top:8px;font:400 .95rem/1.4 var(--mb-font-ui);
  color:var(--mb-ink-3)}

/* Card form folded behind "Other payment options" on a phone. */
body.mb-light .othertoggle{display:block;margin:16px auto 0;border:0;background:transparent;
  cursor:pointer;font:500 .9rem/1 var(--mb-font-ui);color:var(--mb-ink-3);
  text-decoration:underline;padding:8px}

/* ── the authorizing / success overlay ──────────────────────────── */
body.mb-light .mbstage{position:fixed;inset:0;z-index:1200;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:32px;text-align:center}
body.mb-light .mbstage[hidden]{display:none !important}
body.mb-light .mbstage .card{width:min(480px,100%)}
body.mb-light .mbstage .amt{font:500 1.25rem/1 var(--mb-font-ui);color:var(--mb-ink-2);
  font-variant-numeric:tabular-nums}
body.mb-light .mbspin{width:56px;height:56px;margin:38px auto 0;border-radius:50%;
  border:3px solid var(--mb-hairline);border-top-color:var(--mb-primary);
  animation:mbspin .9s linear infinite}
@keyframes mbspin{to{transform:rotate(360deg)}}
body.mb-light .mbstage h2{margin-top:24px;font:600 1.5rem/1.2 var(--mb-font-ui);
  color:var(--mb-ink);letter-spacing:-.01em}
body.mb-light .mbstage p{margin-top:8px;font:400 .95rem/1.5 var(--mb-font-ui);color:var(--mb-ink-3)}
body.mb-light .mbcheck{width:132px;height:132px;margin:0 auto;border-radius:50%;
  background:var(--mb-success);display:flex;align-items:center;justify-content:center;
  animation:mbpop 420ms cubic-bezier(.34,1.56,.64,1) both}
@keyframes mbpop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
body.mb-light .mbcheck svg{width:62px;height:62px;stroke:#fff;stroke-width:9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
body.mb-light .mbstage h2.big{font-size:2.25rem;margin-top:28px}
body.mb-light .mbbar{width:180px;height:4px;margin:24px auto 0;border-radius:999px;
  background:var(--mb-hairline);overflow:hidden}
body.mb-light .mbbar i{display:block;height:100%;width:0;border-radius:999px;
  background:var(--mb-success);animation:mbfill 2.4s linear forwards}
@keyframes mbfill{to{width:100%}}
@media (prefers-reduced-motion:reduce){
  body.mb-light .mbspin,body.mb-light .mbcheck,body.mb-light .mbbar i{animation:none}
  body.mb-light .mbbar i{width:100%}
}

/* ── KIOSK / TABLET LAYOUT: photo left, controls right ──────────── */
@media (min-width:820px){
  body.mb-light.kiosk{padding-bottom:0}
  body.mb-light.kiosk.tippage .shell{max-width:1040px;padding:0 40px 40px;
    display:grid;grid-template-columns:340px minmax(0,1fr);column-gap:48px;
    align-items:start;align-content:start;grid-auto-rows:min-content;
    grid-auto-flow:row dense}
  body.mb-light.kiosk.tippage .shell > #pay{display:contents}
  /* The photo holds column 1 for the whole flow; every control stacks in
     column 2 at its own natural height, so no row can stretch open a gap. */
  body.mb-light.kiosk.tippage #portrait{grid-column:1;grid-row:1 / span 30;margin-top:28px}
  body.mb-light.kiosk.tippage #identity{grid-column:1;align-self:start}
  body.mb-light.kiosk.tippage #billMode,
  body.mb-light.kiosk.tippage #presets,
  body.mb-light.kiosk #customRow,
  body.mb-light.kiosk #amtMsg,
  body.mb-light.kiosk #feeWrap,
  body.mb-light.kiosk #deptRuleLine,
  body.mb-light.kiosk .gets,
  body.mb-light.kiosk .nameline,
  body.mb-light.kiosk .noteline,
  body.mb-light.kiosk .roomtoggle,
  body.mb-light.kiosk.tippage .disclose,
  body.mb-light.kiosk #batchList{grid-column:2}
  body.mb-light.kiosk.tippage #billMode{margin-top:28px}
  /* .paybar lives outside .shell, so it cannot be a grid cell — it stays
     fixed to the glass and its inner column is nudged to line up under the
     controls rather than under the photo. */
  body.mb-light.kiosk.tippage .paybar .inner{max-width:1040px;margin:0 auto;
    display:grid;grid-template-columns:340px minmax(0,1fr);column-gap:48px}
  body.mb-light.kiosk.tippage .paybar .mb-btn{grid-column:2;width:100%;
    white-space:nowrap}
  body.mb-light.kiosk.tippage .disclose{margin-top:14px}
}

/* ── the keypad (kiosk bill entry) ──────────────────────────────── */
body.mb-light .keypad{display:none;margin-top:14px;
  grid-template-columns:repeat(3,1fr);gap:10px}
body.mb-light.kstep-amount .keypad{display:grid}
body.mb-light .keypad button{border:0;border-radius:16px;background:var(--mb-surface);
  color:var(--mb-ink);font:400 1.5rem/1 var(--mb-font-ui);min-height:64px;cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:background var(--mb-dur-fast) var(--mb-ease-out),transform 120ms ease}
body.mb-light .keypad button:active{background:var(--mb-surface-2);transform:scale(.96)}
/* On a kiosk the on-screen keypad is the input: never raise the OS keyboard. */
body.mb-light.kiosk #billAmount{caret-color:var(--mb-primary)}
body.mb-light .keyhead{margin-top:20px;font:500 .95rem/1.3 var(--mb-font-ui);
  color:var(--mb-ink-3)}
/* The kiosk hides the two-tab switcher — it opens straight on the amount. */
body.mb-light.kiosk .billtabs{display:none}
body.mb-light.kiosk .skiplink{display:block;margin:14px auto 0;border:0;background:transparent;
  cursor:pointer;font:500 .9rem/1 var(--mb-font-ui);color:var(--mb-ink-3);text-decoration:underline}
body.mb-light .skiplink{display:none}
body.mb-light.kstep-amount .skiplink{display:block}
body.mb-light.kstep-amount .keyhead,
body.mb-light.kstep-amount .pcthead{display:block}

/* ── the fee-options disclosure ─────────────────────────────────── */
body.mb-light #feeWrap{margin-top:16px}
body.mb-light #feeWrap .feechips{margin-top:10px}
body.mb-light #feeWrap[data-open="0"] .feechips{display:none}

/* ══ THANK-YOU / RECEIPT (tip-thanks.html) ════════════════════════ */
body.mb-light .halo{width:132px;height:132px}
body.mb-light .halo img{width:132px;height:132px;box-shadow:none;
  box-shadow:inset 0 0 0 1px var(--mb-hairline)}
body.mb-light .halo .mono{width:132px;height:132px;background:var(--mb-surface);
  color:var(--mb-ink-3);box-shadow:inset 0 0 0 1px var(--mb-hairline)}
body.mb-light .halo .tick{background:var(--mb-success);box-shadow:0 0 0 4px #fff}
body.mb-light .fig{font-family:var(--mb-font-ui);font-weight:700;font-size:2.5rem;
  color:var(--mb-ink);letter-spacing:-.03em}
body.mb-light .said{font-family:var(--mb-font-ui);font-weight:600;font-size:1.5rem;
  color:var(--mb-ink)}
body.mb-light .said em{color:var(--mb-success-deep)}
body.mb-light .netnote,
body.mb-light .fineprint{color:var(--mb-ink-3)}
body.mb-light .quote{color:var(--mb-ink-2)}
body.mb-light .receiptask h2,
body.mb-light .rate h2{font-family:var(--mb-font-ui);font-weight:600;color:var(--mb-ink)}
body.mb-light .receiptask input,
body.mb-light .rate textarea,
body.mb-light .private textarea,
body.mb-light .praise textarea{background:var(--mb-surface);box-shadow:none;color:var(--mb-ink);
  border-radius:16px}
body.mb-light .receiptask input::placeholder,
body.mb-light .rate textarea::placeholder{color:var(--mb-ink-4)}
body.mb-light .star{color:var(--mb-hairline-strong)}
body.mb-light .star.on,body.mb-light .star.hot{color:#f6a609}
body.mb-light .traits button,
body.mb-light .trait{background:#fff;box-shadow:inset 0 0 0 1px var(--mb-hairline);
  color:var(--mb-ink-2)}
body.mb-light .traits button.on,
body.mb-light .trait.on{background:var(--mb-primary-tint);color:var(--mb-accent-soft);
  box-shadow:inset 0 0 0 1.5px var(--mb-primary)}
body.mb-light .quiet{color:var(--mb-ink-3)}
body.mb-light .sent{color:var(--mb-success-deep)}

/* The kiosk receipt ask is the whole screen: centred, calm, one green button. */
body.mb-light.kiosk .receiptask{margin-top:0}
body.mb-light.kiosk .shell{justify-content:center}
@media (min-width:820px){
  body.mb-light.kiosk #receiptAsk form{display:flex;gap:12px;align-items:stretch;
    max-width:560px;margin-left:auto;margin-right:auto}
  body.mb-light.kiosk #receiptAsk form input{flex:1}
  body.mb-light.kiosk #receiptAsk form button{flex:0 0 auto;padding-left:28px;padding-right:28px}
}
body.mb-light #receiptSend{background:var(--mb-primary);color:#fff;box-shadow:none}
body.mb-light .norecpt{display:block;width:100%;text-align:right;border:0;
  background:transparent;cursor:pointer;padding:8px 0;
  font:500 .9rem/1 var(--mb-font-ui);color:var(--mb-ink-3)}
/* The success headline is focused on load for screen readers; it is not
   Tab-reachable, so it never wears a focus ring. */
body.mb-light .said:focus,body.mb-light .said:focus-visible{box-shadow:none;outline:none}

/* ── the optional "add your name" step ─────────────────────────────── */
body.mb-light .namestep{display:flex;gap:12px;align-items:stretch;
  max-width:520px;margin:28px auto 0}
body.mb-light .namestep input{flex:1;min-width:0;border:0;outline:0;border-radius:16px;
  padding:18px 22px;background:var(--mb-surface);color:var(--mb-ink);
  font:400 1rem/1.2 var(--mb-font-ui)}
body.mb-light .namestep input::placeholder{color:var(--mb-ink-4)}
body.mb-light .namestep input:focus{box-shadow:inset 0 0 0 1.5px var(--mb-primary)}
body.mb-light .namestep .mb-btn{flex:0 0 auto;padding-left:34px;padding-right:34px}
body.mb-light .skipstep{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:24px;
  border:0;background:transparent;cursor:pointer;padding:8px;
  font:500 .9rem/1 var(--mb-font-ui);color:var(--mb-ink-3)}
@media (max-width:560px){
  body.mb-light .namestep{flex-direction:column}
  body.mb-light .namestep .mb-btn{width:100%}
}

/* Kiosk section headings above the keypad and the tip cards. */
body.mb-light .pcthead{margin-top:26px;font:600 1.35rem/1.3 var(--mb-font-ui);
  color:var(--mb-ink);letter-spacing:-.01em;text-align:center}
body.mb-light .pcthead[hidden]{display:none !important}
body.mb-light .keyhead[hidden]{display:none !important}

/* ── logo on white ─────────────────────────────────────────────────── */
body.mb-light .topbar img{height:28px}
body.mb-light .foot img{height:24px}

/* ── kiosk step machine: amount screen, then tip screen ────────────── */
body.mb-light .nextbtn{display:none;width:100%;margin-top:18px}
body.mb-light.kstep-amount .nextbtn{display:inline-flex}
/* step 1 — the keypad only */
body.mb-light.kstep-amount .pcthead,
body.mb-light.kstep-amount .pctchips,
body.mb-light.kstep-amount #feeWrap,
body.mb-light.kstep-amount .gets,
body.mb-light.kstep-amount .nameline,
body.mb-light.kstep-amount .noteline,
body.mb-light.kstep-amount .disclose,
body.mb-light.kstep-amount #paybar,
body.mb-light.kstep-amount #noTipBtn{display:none !important}
/* step 2 — the tip cards; the keypad folds away */
body.mb-light.kstep-tip .keypad,
body.mb-light.kstep-tip .keyhead,
body.mb-light.kstep-tip .skiplink,
body.mb-light.kstep-tip .nextbtn{display:none !important}
body.mb-light.kstep-tip .custom{background:transparent;padding:0;margin-top:0}
body.mb-light.kstep-tip .custom input{font-size:1rem;color:var(--mb-ink-3);padding:6px 0}
body.mb-light.kstep-tip #billBox > .custom{opacity:.75}
body.mb-light.kstep-tip .pcthead{margin-top:0}

/* Kiosk step 2: "Other amount" and the Tip now button share one row, and
   "No tip" sits quietly at the top right, out of the decision's way. */
@media (min-width:820px){
  body.mb-light.kstep-tip #customRow{grid-column:2;margin-top:18px;max-width:46%}
  body.mb-light.kstep-tip .paybar{margin-top:-78px;padding-left:50%}
}
body.mb-light.kiosk #noTipBtn{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));
  right:16px;z-index:35;margin:0;color:var(--mb-ink-3);text-decoration:none;
  font:500 .9rem/1 var(--mb-font-ui);background:#fff;border-radius:999px;
  padding:10px 14px;box-shadow:0 1px 2px rgba(17,17,17,.08)}
body.mb-light.kiosk .topbar{justify-content:flex-start}
body.mb-light .convfee{margin-top:8px;text-align:right;
  font:400 .75rem/1.4 var(--mb-font-ui);color:var(--mb-ink-4)}

/* Step 2's action row: "Other amount" beside "Tip now", the way the guest
   reads it — one obvious green tap, one quiet escape hatch. */
body.mb-light .actionrow{display:none;gap:12px;margin-top:22px}
body.mb-light.kstep-tip .actionrow{display:flex}
body.mb-light .actionrow .other{flex:1;border:0;border-radius:16px;cursor:pointer;
  background:var(--mb-surface);color:var(--mb-ink-2);min-height:60px;
  font:500 1rem/1 var(--mb-font-ui)}
/* The sticky green CTA stays where it is; the action row carries only the
   quiet escape hatch above it. */

/* ── MOBILE FIRST (390×844) ────────────────────────────────────────────
   Nothing on a guest screen is smaller than a thumb, nothing scrolls
   sideways, and the one green action stays on the glass at the bottom. */
@media (max-width:819px){
  body.mb-light{overflow-x:hidden}
  body.mb-light .shell{padding-left:18px;padding-right:18px}
  body.mb-light .keypad{gap:10px;margin-top:16px}
  body.mb-light .keypad button{min-height:58px;font-size:1.4rem}
  body.mb-light .pctchips{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  body.mb-light .pctchip{min-height:104px;padding:20px 0}
  body.mb-light .pctchip b{font-size:1.4rem}
  body.mb-light .pctchip span{font-size:.9rem}
  body.mb-light .preset{padding:18px 0;min-height:56px}
  body.mb-light .mb-btn{min-height:56px}
  body.mb-light .actionrow{flex-direction:column}
  body.mb-light .actionrow .other{min-height:56px}
  /* the amount screen keeps its Next button on the glass, not below the fold */
  body.mb-light.kstep-amount .nextbtn{position:fixed;left:18px;right:18px;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;width:auto;margin:0}
  body.mb-light.kstep-amount .skiplink{margin-bottom:86px}
    body.mb-light.kstep-tip .gets,
  body.mb-light.kstep-tip #feeWrap{padding-bottom:0}
  body.mb-light.kstep-tip .shell{padding-bottom:180px}
  body.mb-light.kiosk #noTipBtn{top:12px;right:16px;font-size:.85rem}
  body.mb-light .portrait img,body.mb-light .portrait .mono{aspect-ratio:4/3}
}

/* On a phone the amount step gives the photo less height so the whole
   keypad and its Next button fit one thumb-reach screen. */
@media (max-width:819px){
  body.mb-light.kstep-amount .portrait img,
  body.mb-light.kstep-amount .portrait .mono{aspect-ratio:16/9}
  body.mb-light.kstep-amount .portrait .plate h1{font-size:1.25rem}
  body.mb-light.kstep-amount .shell{padding-bottom:120px}
}

/* Kiosk receipt screen: the ask is the screen. Rating, sharing and the
   growth line belong to a guest on their own phone, not to a countertop
   tablet the next guest is already waiting for. */
body.mb-light.kiosk #rateBlock,
body.mb-light.kiosk #askFriends,
body.mb-light.kiosk .fineprint{display:none}

@media (min-width:820px){
  body.mb-light.kiosk .moment{margin-top:40px}
  body.mb-light.kiosk .later{max-width:620px;margin-left:auto;margin-right:auto}
}

/* The sticky CTA is real estate the document must account for, not float
   over: the tip step reserves its full height at the end of flow. */
@media (max-width:819px){
  body.mb-light.kstep-tip .shell{padding-bottom:210px}
}