/* ────────────────────────────────────────────────────────────────
 * Kiosk app — shared UI kit
 * Buttons, fields, cards, nav header, chips, device chrome fillers
 * Assumes tokens.css is loaded first
 * ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; }

/* ─── Screen shell ─────────────────────────────────────────────── */

/* iOS viewport: 390×844 (iPhone 15) — inner content, no device chrome */
.screen-ios {
  width: 390px;
  min-height: 844px;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Android viewport: 412×892 (Pixel 8) */
.screen-android {
  width: 412px;
  min-height: 892px;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* iOS status bar (44pt) */
.ios-status {
  height: 47px;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.ios-status.on-dark { color: #fff; }
.ios-status .status-icons {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.ios-status .signal-dots { display: inline-flex; gap: 2px; align-items: end; }
.ios-status .signal-dots i { width: 3px; background: currentColor; border-radius: 1px; }
.ios-status .signal-dots i:nth-child(1) { height: 4px; }
.ios-status .signal-dots i:nth-child(2) { height: 6px; }
.ios-status .signal-dots i:nth-child(3) { height: 8px; }
.ios-status .signal-dots i:nth-child(4) { height: 10px; }
.ios-status .battery {
  width: 24px; height: 11px;
  border: 1.2px solid currentColor;
  border-radius: 3px;
  position: relative;
  padding: 1px;
}
.ios-status .battery::after {
  content: "";
  position: absolute; right: -3px; top: 3px;
  width: 2px; height: 5px;
  background: currentColor;
  border-radius: 0 1px 1px 0;
}
.ios-status .battery > i {
  display: block; height: 100%;
  width: 78%; background: currentColor;
  border-radius: 1.5px;
}

/* Android status bar (24dp) */
.and-status {
  height: 28px;
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  flex-shrink: 0;
}
.and-status.on-dark { color: #fff; }

/* iOS home indicator */
.ios-home {
  height: 34px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  flex-shrink: 0;
}
.ios-home::after {
  content: "";
  width: 134px; height: 5px;
  background: var(--fg);
  border-radius: 3px;
  opacity: 0.92;
}
.ios-home.on-dark::after { background: #fff; }

/* Android gesture bar */
.and-gesture {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.and-gesture::after {
  content: "";
  width: 108px; height: 4px;
  background: var(--fg);
  border-radius: 2px;
}
.and-gesture.on-dark::after { background: #fff; opacity: 0.6; }

/* ─── Nav headers ──────────────────────────────────────────────── */

/* iOS large title header */
.ios-nav {
  padding: var(--space-3) var(--space-5) var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.ios-nav .back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-base);
  color: var(--accent);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  font-weight: 400;
}
.ios-nav .back svg { width: 12px; height: 20px; }
.ios-nav .title {
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.ios-nav .trailing { min-width: 60px; text-align: right; }

.ios-large-title {
  padding: var(--space-2) var(--space-5) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  line-height: 1.12;
}

/* Android top app bar (Material 3) */
.and-topbar {
  padding: 12px var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
}
.and-topbar .icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.and-topbar .icon-btn:hover { background: rgba(0,0,0,0.06); }
.and-topbar .title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg);
}

/* ─── Buttons ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  padding: 15px var(--space-6);
  border-radius: var(--radius-md);
  border: 0;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
  text-decoration: none;
}
.btn:active { transform: scale(0.985); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* iOS primary — full-width pill-square */
.btn-primary {
  background: var(--accent);
  color: var(--accent-on);
  width: 100%;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn-primary[disabled] {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--surface);
  color: var(--fg);
  width: 100%;
}
.btn-secondary:hover { background: var(--border-soft); }

.btn-outline {
  background: transparent;
  color: var(--fg);
  width: 100%;
  box-shadow: inset 0 0 0 1.5px var(--fg);
}
.btn-outline:hover { background: rgba(0,0,0,0.04); }

/* Android FAB / Material fill button (28dp radius) */
.btn-and-primary {
  background: var(--accent);
  color: var(--accent-on);
  width: 100%;
  border-radius: var(--radius-pill);
  padding: 14px var(--space-6);
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.10);
}
.btn-and-primary:hover { background: var(--accent-hover); }
.btn-and-outline {
  background: transparent;
  color: var(--fg);
  width: 100%;
  border-radius: var(--radius-pill);
  padding: 12px var(--space-6);
  box-shadow: inset 0 0 0 1.5px var(--border);
  font-weight: 500;
}

/* ─── Fields ───────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: none;
}
.field .input,
.field input {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--fg);
  background: var(--surface);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  padding: 14px var(--space-4);
  outline: none;
  transition: border-color var(--motion-fast), background var(--motion-fast);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.field .input:focus,
.field input:focus {
  border-color: var(--accent);
  background: var(--bg);
}
.field input::placeholder { color: var(--meta); }

/* iOS/compact DOB group — 3 sub-inputs shown as separate fields
   with a shared caption that also carries the derived-age tag. */
.field--dob .dob-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 8px;
}
.field--dob .dob-inputs input {
  text-align: center;
  letter-spacing: 0.03em;
  padding-left: 6px;
  padding-right: 6px;
}
.field--dob .age-derived {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Material variant: outlined text field */
.field-and {
  position: relative;
  display: flex;
  flex-direction: column;
}
.field-and input {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg);
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  padding: 16px var(--space-4) 14px;
  outline: none;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.field-and input:focus { border-color: var(--accent); border-width: 2px; }
.field-and .label-float {
  position: absolute;
  top: -8px; left: 12px;
  background: var(--bg);
  padding: 0 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.field-and input:focus + .label-float { color: var(--accent); }

/* Segmented control (iOS) — for gender */
.segment {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--surface);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}
.segment button {
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
}
.segment button[aria-pressed="true"] {
  background: var(--bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04);
  font-weight: 600;
}

/* Material chip cluster */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--text-sm);
  cursor: pointer;
  font-weight: 500;
}
.chip[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* ─── Cards ────────────────────────────────────────────────────── */

.card {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--elev-ring);
}
.card-plain { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-5); }
.card-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 var(--space-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ─── Techcom Life brand mark ──────────────────────────────────── */
.tcb-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
}

/* Full logo: inline SVG "TECHCOM LIFE < >" from assets/techcomlife-logo.svg
 * The SVG author paints black + accent internally; we let it render as-is.
 * .lg  ~= 148px wide (login hero)
 * .md  ~=  116px wide (default)
 * .sm  ~=  88px wide (dense contexts, footers, modals)
 */
.tcb-logo {
  display: inline-block;
  line-height: 0;
  color: var(--accent);
}
.tcb-logo img,
.tcb-logo svg { display: block; height: auto; width: 116px; }
.tcb-logo.lg img, .tcb-logo.lg svg { width: 148px; }
.tcb-logo.md img, .tcb-logo.md svg { width: 116px; }
.tcb-logo.sm img, .tcb-logo.sm svg { width: 88px; }
.tcb-logo.xs img, .tcb-logo.xs svg { width: 68px; }
/* Dark-canvas variant: use ../assets/techcomlife-logo-dark.svg (LIFE
 * inverted to white) instead of a CSS filter that would also inflect
 * the red into cyan. See screens/ios-04-scan.html for usage. */

/* Compact "chevron only" mark — for tiny slots (loading spinners, chips)
 * where the full wordmark is unreadable. Uses the two < > shapes only.
 */
.tcb-chevron {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--accent);
  line-height: 0;
}
.tcb-chevron svg { display: block; width: 24px; height: 24px; }
.tcb-chevron.sm svg { width: 18px; height: 18px; }
.tcb-chevron.lg svg { width: 36px; height: 36px; }

/* Legacy fallback (still used in a few dense spots — badge treatment) */
.tcb-mark {
  width: 44px; height: 44px;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  box-shadow: 0 6px 14px color-mix(in oklab, var(--accent), transparent 70%);
}
.tcb-mark.sm { width: 32px; height: 32px; border-radius: 8px; font-size: 16px; }
.tcb-wordmark {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fg);
}
.tcb-wordmark span { color: var(--accent); }

/* Binah co-brand */
.co-brand {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
  font-weight: 500;
  text-transform: uppercase;
}

/* ─── Utility ──────────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grow { flex: 1 1 auto; }
.muted { color: var(--muted); }
.center { text-align: center; }
.hair { height: 1px; background: var(--border-soft); }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent);
}

/* Screen padding */
.pad { padding: 0 var(--space-5); }
.pad-lg { padding: 0 var(--space-6); }

/* ─── Kiosk shell (Android tablet 1080×1920 portrait, immersive) ──
 * No status bar, no gesture bar — Kiosk lockdown owns the whole
 * canvas. Persistent brand header + optional step tracker + footer
 * for attendant support.
 * Typography is scaled up ~1.6× from phone because viewing distance
 * is ~50-70cm and users stand.
 * ──────────────────────────────────────────────────────────────── */
.screen-kiosk {
  width: 1080px;
  height: 1920px;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  font-family: "Roboto", var(--font-body);
}

/* Persistent brand header — 128px tall */
.kiosk-header {
  height: 128px;
  padding: 0 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
  flex-shrink: 0;
}
.kiosk-header.on-dark {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  color: #fff;
}
.kiosk-header .brand-slot {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
.kiosk-header .brand-slot .tcb-logo img,
.kiosk-header .brand-slot .tcb-logo svg { width: 200px; }
.kiosk-header .brand-tag {
  padding: 8px 16px;
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: var(--radius-pill);
  font-family: "Roboto Mono", var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kiosk-header.on-dark .brand-tag {
  background: rgba(234,28,36,0.16);
  color: #ffb0b4;
}
.kiosk-header .meta-slot {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  justify-content: flex-end;
  font-family: "Roboto Mono", var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.kiosk-header.on-dark .meta-slot { color: rgba(255,255,255,0.6); }
.kiosk-header .lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--fg);
  font-family: "Roboto", var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.kiosk-header.on-dark .lang-pill {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}
.kiosk-header .lang-pill .flag {
  width: 20px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent) 50%, #ffcd00 50%);
  display: inline-block;
}

/* Kiosk step tracker — used in flows */
.kiosk-steps {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 64px 0;
  flex-shrink: 0;
}
.kiosk-steps .step {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-family: "Roboto", var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.kiosk-steps .step .n {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
}
.kiosk-steps .step.done { color: var(--fg-2); }
.kiosk-steps .step.done .n {
  background: var(--fg);
  color: #fff;
  border-color: var(--fg);
}
.kiosk-steps .step.current { color: var(--accent); }
.kiosk-steps .step.current .n {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent), transparent 82%);
}
.kiosk-steps .connector {
  flex: 0 0 40px;
  height: 2px;
  background: var(--border);
}
.kiosk-steps .connector.done { background: var(--fg); }

/* Kiosk footer — attendant support / abort session */
.kiosk-footer {
  margin-top: auto;
  padding: 32px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg);
  flex-shrink: 0;
}
.kiosk-footer.on-dark {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
}
.kiosk-footer .support {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--muted);
}
.kiosk-footer .support strong {
  color: var(--fg);
  font-weight: 500;
}
.kiosk-footer.on-dark .support strong { color: #fff; }
.kiosk-footer .attend-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: "Roboto", var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.kiosk-footer .attend-btn:hover { background: var(--border-soft); }
.kiosk-footer .co-mark {
  font-family: "Roboto Mono", var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--meta);
  text-transform: uppercase;
}

/* Kiosk-sized buttons — 72px minimum touch target */
.btn-kiosk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: "Roboto", var(--font-body);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  padding: 24px 40px;
  min-height: 72px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.btn-kiosk:active { transform: scale(0.99); }
.btn-kiosk-primary {
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: 0 4px 14px color-mix(in oklab, var(--accent), transparent 68%);
}
.btn-kiosk-primary:hover { background: var(--accent-hover); }
.btn-kiosk-primary[disabled] {
  background: var(--border);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
}
.btn-kiosk-outline {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 2px var(--fg);
}
.btn-kiosk-outline:hover { background: rgba(0,0,0,0.04); }
.btn-kiosk-ghost {
  background: var(--surface);
  color: var(--fg);
}
.btn-kiosk-ghost:hover { background: var(--border-soft); }

/* Kiosk-sized fields */
.field-kiosk {
  position: relative;
  display: flex;
  flex-direction: column;
}
.field-kiosk input,
.field-kiosk select,
.field-kiosk textarea {
  font-family: "Roboto", var(--font-body);
  font-size: 22px;
  color: var(--fg);
  background: transparent;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 24px 24px 22px;
  outline: none;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--motion-fast);
}
.field-kiosk input:focus,
.field-kiosk select:focus,
.field-kiosk textarea:focus { border-color: var(--accent); }
.field-kiosk .label-float {
  position: absolute;
  top: -12px; left: 16px;
  background: var(--bg);
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
  font-family: "Roboto", var(--font-body);
}
.field-kiosk input:focus ~ .label-float { color: var(--accent); }

/* Kiosk DOB group — 3 sub-inputs with hairline dividers.
   Uses parent `.field-kiosk` for floating label; inner grid holds
   DD / MM / YYYY as a single visual field so the label-float rule
   still spans the whole control. */
.field-kiosk--dob .dob-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  transition: border-color var(--motion-fast);
}
.field-kiosk--dob .dob-inputs:focus-within { border-color: var(--accent); }
.field-kiosk--dob .dob-inputs input {
  border: 0;
  border-radius: 0;
  padding: 24px 8px 22px;
  text-align: center;
  font-family: "Roboto", var(--font-body);
  font-size: 22px;
  color: var(--fg);
  background: transparent;
  outline: none;
  width: 100%;
  letter-spacing: 0.03em;
  -webkit-appearance: none;
  appearance: none;
}
.field-kiosk--dob .dob-inputs input + input { border-left: 1px solid var(--border); }
.field-kiosk--dob .dob-inputs input::-webkit-outer-spin-button,
.field-kiosk--dob .dob-inputs input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.field-kiosk--dob .label-float em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

/* Kiosk chip cluster */
.chip-kiosk-row { display: flex; gap: 12px; flex-wrap: wrap; }
.chip-kiosk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-family: "Roboto", var(--font-body);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  min-height: 60px;
}
.chip-kiosk[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}