/* Multitap Cloud kiosk: touch-first (spec 2026-10-09 §5). Colours come from the admin.css theme tokens
   (data-theme on <html>). The only literal colours sit above tokens-end: the tap sizes, a white QR quiet
   zone (QR codes need a light margin in every theme) and the sheet backdrop dimmer. */
:root {
  --tap-min: 48px;
  --tap-primary: 56px;
  --k-gutter: 16px;
  --k-radius: 14px;
  --k-qr-bg: #fff;
  --k-backdrop: rgba(0, 0, 0, 0.5);
}
/* tokens-end */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg-primary); color: var(--text-primary);
  font-family: var(--font-body, system-ui, sans-serif); font-size: 18px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column; overscroll-behavior: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.k-chip, .k-tile, button { user-select: none; -webkit-user-select: none; }
/* admin.css styles every bare <header> as the admin's fixed top bar (position: fixed, a set height, z-index 1000).
   The kiosk top bar must stay an ordinary flex row of the page column, so each of those is undone here: a fixed
   header leaves the flow and #k-main slides up underneath it, hiding the first heading. */
.k-top { position: relative; top: auto; left: auto; right: auto; z-index: auto; height: auto; flex: none;
  display: flex; align-items: center; gap: 12px; padding: 8px var(--k-gutter);
  background: var(--bg-card); border-bottom: 1px solid var(--border-secondary);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.k-logo { height: 36px; max-width: 140px; object-fit: contain; }
.k-venue { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-clock { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.k-offline { background: var(--warning); color: var(--bg-primary); text-align: center; padding: 6px; }
.k-main { flex: 1; min-height: 0; overflow-y: auto; padding: var(--k-gutter);
  padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.k-tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--bg-card);
  border-top: 1px solid var(--border-secondary); padding-bottom: env(safe-area-inset-bottom); }
.k-tab { flex: 1; min-height: var(--tap-primary); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; font: inherit; font-size: 0.85em; background: none; border: 0;
  color: var(--text-secondary); }
.k-tab.is-active { color: var(--accent-text); font-weight: 700; }
.k-btn { min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 20px; border-radius: var(--k-radius);
  border: 1px solid var(--border-secondary); background: var(--bg-tertiary); color: var(--text-primary);
  font: inherit; font-weight: 600; }
.k-btn.k-primary { min-height: var(--tap-primary); background: var(--accent); color: var(--accent-contrast);
  border-color: var(--accent); font-size: 1.1em; }
.k-btn.k-danger { background: var(--danger); color: var(--accent-contrast); border-color: var(--danger); }
.k-btn.k-ghost { background: none; border-color: transparent; font-size: 1.3em; }
.k-btn:disabled, .k-tile:disabled { opacity: 0.45; }
.k-btn.is-busy { opacity: 0.7; }
.k-btn:hover { border-color: var(--accent); }
a.k-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.k-url { word-break: break-all; }
.k-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.k-h { font-size: 1.25em; margin: 20px 0 10px; }
.k-note { color: var(--text-secondary); margin: 8px 0; }
.k-err { color: var(--danger); font-weight: 600; margin: 8px 0; }
.k-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.k-grid.k-wide { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.k-tile { min-height: var(--tap-min); min-width: var(--tap-min); padding: 12px; text-align: left;
  border-radius: var(--k-radius); border: 2px solid var(--border-secondary); background: var(--bg-card);
  color: var(--text-primary); font: inherit; display: flex; flex-direction: column; gap: 4px; }
.k-tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--bg-tertiary); }
.k-tile .k-sub { font-size: 0.8em; color: var(--text-secondary); }
.k-tile.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.k-tile:hover { border-color: var(--accent); }
.k-rig { min-height: 132px; }
.k-rig .k-time { font-size: 1.6em; font-variant-numeric: tabular-nums; font-weight: 700; }
.k-rig.is-low .k-time { color: var(--danger); }
.k-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px;
  background: var(--text-muted); }
.k-dot.is-live { background: var(--success); }
.k-dot.is-offline { background: var(--danger); }
.k-chip { min-height: var(--tap-min); padding: 0 18px; border-radius: 999px; border: 1px solid var(--border-secondary);
  background: var(--bg-tertiary); color: var(--text-primary); font: inherit; }
.k-chip.is-selected { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.k-step { display: inline-flex; align-items: center; gap: 8px; }
.k-step button { min-height: var(--tap-min); min-width: var(--tap-primary); border-radius: var(--k-radius);
  border: 1px solid var(--border-secondary); background: var(--bg-tertiary); color: var(--text-primary);
  font-size: 1.4em; font-weight: 700; }
.k-step output { min-width: 96px; text-align: center; font-size: 1.3em; font-variant-numeric: tabular-nums; }
.k-toggle { min-height: var(--tap-min); padding: 0 18px; border-radius: 999px; border: 1px solid var(--border-secondary);
  background: var(--bg-tertiary); color: var(--text-primary); font: inherit; }
.k-toggle.is-on { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.k-input { min-height: var(--tap-primary); width: 100%; box-sizing: border-box; padding: 0 16px; font: inherit;
  font-size: 1.2em; border-radius: var(--k-radius); border: 2px solid var(--border-secondary);
  background: var(--bg-input); color: var(--text-primary); }
.k-input:focus { outline: none; border-color: var(--accent); }
.k-sheet-backdrop { position: fixed; inset: 0; background: var(--k-backdrop); z-index: 20; }
.k-sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 21;
  background: var(--bg-primary); border-left: 1px solid var(--border-secondary); overflow-y: auto;
  box-sizing: border-box; padding: var(--k-gutter); padding-bottom: 0;   /* no bottom padding: the sticky footer sits on the sheet's bottom edge */
  padding-top: calc(var(--k-gutter) + env(safe-area-inset-top));
  padding-right: max(var(--k-gutter), env(safe-area-inset-right)); }
.k-sheet.is-full { width: 100vw; border-left: 0; }
.k-sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.k-sheet-head h2 { flex: 1; margin: 0; font-size: 1.3em; }
.k-steps { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.k-steps .k-chip { flex: none; }
.k-footer { position: sticky; bottom: 0; background: var(--bg-primary); padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--border-secondary); }
.k-footer .k-primary { flex: 1; }
.k-toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 88px; z-index: 40;
  display: flex; flex-direction: column; gap: 8px; width: min(560px, calc(100vw - 32px)); }
.k-toast { padding: 14px 18px; border-radius: var(--k-radius); background: var(--bg-tertiary);
  color: var(--text-primary); border: 1px solid var(--border-secondary); font-weight: 600; }
.k-toast.is-error { border-color: var(--danger); }
.k-toast.is-success { border-color: var(--accent); }
.k-card { background: var(--bg-card); border: 1px solid var(--border-secondary); border-radius: var(--k-radius);
  padding: 16px; margin: 12px 0; }
.k-qr { position: fixed; inset: 0; z-index: 50; background: var(--bg-primary); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: var(--k-gutter); text-align: center; }
.k-qr svg { width: min(80vw, 80vh); height: auto; background: var(--k-qr-bg); padding: 16px; border-radius: 12px; }
.k-pair { max-width: 480px; margin: 8vh auto; }
@media (max-width: 599px) {
  body { font-size: 17px; }
  .k-grid { grid-template-columns: repeat(2, 1fr); }
  .k-sheet { width: 100vw; border-left: 0; }
}
@media (min-width: 1200px) {
  .k-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}