/* ============================================================================
   Entry kiosk — embedded reproduction
   ----------------------------------------------------------------------------
   This is not a "website version" of check-in. It is the on-device UI from
   kiosk/skeleton/template.html, scaled into a container and made keyboard-
   operable. Proportions are preserved: the real device is a 10.1" 1280x800
   panel, so the stage is locked to 16:10 and every measurement that was `vw`
   on the device is `cqw` here. Layouts, borders, radii, easings and the press
   feedback are unchanged.

   Deliberate changes from template.html, and why:
     - teal is #0fbbb3, not the kiosk's #2EC4B6            (AUDIT.md §4 #1)
     - screens are reachable by keyboard and announced      (WCAG 2.2)
     - the print step is simulated                          (no printer here)
   ========================================================================== */

.kiosk {
  position: relative;
  border-radius: clamp(14px, 2cqw, 26px);
  overflow: hidden;
}

/* Device chrome. The physical unit is a dark navy shell (see kiosk-front.webp). */
.kiosk-device {
  background: linear-gradient(160deg, #2c3346, #1b2131 55%, #171c29);
  padding: clamp(9px, 1.1vw, 16px);
  border-radius: clamp(16px, 2vw, 28px);
  box-shadow: var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.14);
}

.kiosk-screen {
  /* `size`, not `inline-size`: the kiosk layout uses cqh as well as cqw,
     mirroring the device's vh/vw units. Height is fixed by aspect-ratio,
     so declaring a size container here cannot collapse. */
  container-type: size;
  aspect-ratio: 16 / 10;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: clamp(8px, 1.2cqw, 16px);
  background: var(--k-bg);
  font-family: var(--font);
  color: var(--k-ink);
}

/* ── SCREEN SYSTEM ── template.html:36-41 ─────────────────────────────── */
.k-screen {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.k-screen[data-active] { opacity: 1; pointer-events: auto; }

/* ── START OVER ── template.html:44-52 ────────────────────────────────── */
.k-restart {
  position: absolute; top: 2.4cqh; right: 2.4cqw; z-index: 20;
  appearance: none; border: none; cursor: pointer;
  background: var(--k-teal); color: #fff;
  font-family: inherit; font-size: clamp(11px, 1.5cqw, 15px); font-weight: 700;
  padding: .55em 1.4em; min-height: 24px; border-radius: var(--r-pill);
  transition: background .15s, transform .1s;
}
.k-restart:hover { background: var(--k-teal-dk); transform: scale(1.03); }

/* ── SPLIT LAYOUT ── template.html:55-58 ──────────────────────────────── */
/* Screen bodies fill the panel by absolute inset rather than height:100%.
   The stage gets its height from aspect-ratio inside a size container, and
   percentage heights against that resolve unreliably across engines. */
.k-split {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 5cqh 6cqw; gap: 5cqw;
}
.k-split .k-left  { display: flex; align-items: center; justify-content: center; min-height: 0; }
.k-split .k-right { display: flex; flex-direction: column; justify-content: center; gap: 2.8cqh; min-height: 0; }

.k-h1 { font-size: clamp(19px, 5.5cqw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -.5px; font-family: inherit; }
/* Supporting line under a kiosk headline is teal, weight 500. template.html:60 */
.k-sub { font-size: clamp(11px, 2cqw, 22px); font-weight: 500; color: var(--k-teal); }

.k-art {
  width: min(45cqh, 46cqw); height: min(45cqh, 46cqw);
  border-radius: clamp(8px, 1.6cqw, 20px);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(15,187,179,.10), rgba(15,187,179,.02));
  border: var(--k-border-w) solid var(--k-line);
  box-shadow: var(--k-sh-lg);
}
.k-art svg { width: 62%; height: 62%; color: var(--k-teal); }

@keyframes kScanPulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
.k-art--scan svg { animation: kScanPulse 2.4s ease-in-out infinite; }

/* ── BUTTONS ── template.html:171-186 ─────────────────────────────────── */
.k-stack { display: flex; flex-direction: column; gap: 1.8cqh; }

.k-btn {
  appearance: none; border: none; cursor: pointer;
  background: var(--k-teal); color: #fff;
  font-family: inherit; font-size: clamp(11px, 2.1cqw, 24px); font-weight: 700;
  padding: clamp(8px, 1.4cqw, 22px) clamp(12px, 3.5cqw, 42px);
  border-radius: 2.4cqw; text-align: center;
  box-shadow: var(--k-glow);
  transition: background .15s, transform .1s;
}
.k-btn:hover { background: var(--k-teal-dk); transform: scale(1.02); }
.k-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.k-btn--outline {
  border: var(--k-border-w) solid var(--k-line);
  background: #fff; color: var(--k-ink); font-weight: 500;
  box-shadow: var(--k-sh);
}
.k-btn--outline:hover { border-color: var(--k-teal); color: var(--k-teal); background: #fff; }

/* ── LOOKUP ── template.html:76-101 ───────────────────────────────────── */
.k-lookup { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto auto 1fr; padding: 3.5cqh 6cqw 3cqh; }
.k-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2cqh; }
.k-hdr h3 { font-family: inherit; font-size: clamp(14px, 3.6cqw, 38px); font-weight: 800; letter-spacing: -.4px; }

.k-search-row { display: flex; gap: 1.5cqw; align-items: center; margin-bottom: 1.6cqh; }
.k-search {
  flex: 1; background: #fff;
  border: var(--k-border-w) solid var(--k-teal);
  border-radius: var(--r-pill);
  padding: clamp(7px, 1.5cqw, 18px) clamp(11px, 2cqw, 24px);
  font-family: inherit; font-size: clamp(11px, 1.8cqw, 20px);
  color: var(--k-teal); font-weight: 700;
  min-height: 0;
  outline: none; box-shadow: var(--k-sh);
  transition: border-color .15s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left;
}
.k-search:empty::before, .k-search[data-empty='true']::before {
  content: attr(data-placeholder); color: var(--k-muted); font-weight: 400;
}
.k-search[data-empty='true'] { border-color: var(--k-line); }

.k-done {
  flex: 0 0 auto; appearance: none; border: none; cursor: pointer;
  background: var(--k-teal); color: #fff; font-family: inherit;
  font-size: clamp(11px, 1.8cqw, 20px); font-weight: 700;
  padding: clamp(7px, 1.5cqw, 18px) clamp(12px, 2.8cqw, 34px);
  border-radius: var(--r-pill); box-shadow: var(--k-glow);
  transition: background .15s, transform .1s, opacity .15s; white-space: nowrap;
}
.k-done:hover:not(:disabled) { background: var(--k-teal-dk); transform: scale(1.02); }
.k-done:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* Result pills — template.html:91-102 */
.k-results { display: flex; gap: 1cqw; margin-bottom: 1.6cqh; }
.k-pill {
  flex: 1; min-width: 0; background: #fff;
  border: var(--k-border-w) solid var(--k-line);
  border-radius: var(--r-pill);
  padding: clamp(7px, 1.5cqw, 18px) clamp(11px, 2cqw, 24px);
  font-family: inherit; font-size: clamp(10px, 1.4cqw, 16px); font-weight: 500;
  color: var(--k-ink); text-align: center; cursor: pointer; min-height: 24px;
  box-shadow: var(--k-sh);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .15s, color .15s, background .1s;
}
.k-pill:hover { border-color: var(--k-teal); color: var(--k-teal); }
.k-pill.is-empty { color: #d1d5db; border-style: dashed; cursor: default; pointer-events: none; }

/* Keyboard — template.html:105-116. Press feedback is scale(.93) at 70ms. */
.k-kbd { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; min-height: 0; margin-top: 1cqh; }
.k-kbd-row { display: flex; gap: min(.8cqw, 9px); justify-content: center; }
.k-key {
  appearance: none; border: 1.5px solid var(--k-line); background: #fff;
  border-radius: min(1.2cqw, 14px); font-family: inherit; font-weight: 600; color: var(--k-ink);
  cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: background .08s, transform .07s;
  width: clamp(24px, 7.2cqw, 62px); height: clamp(24px, 6.8cqh, 58px);
  font-size: clamp(11px, 1.9cqw, 20px);
  padding: 0;
}
.k-key:active, .k-key.is-down { background: #f0f0f0; transform: scale(.93); }
.k-key--wide { width: clamp(90px, 26cqw, 240px); font-size: clamp(10px, 1.4cqw, 15px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ── BADGE PREVIEW ── template.html:331-343 ───────────────────────────── */
.k-badge {
  width: min(52cqh, 40cqw);
  aspect-ratio: 2 / 3;
  background: #fff;
  border-radius: clamp(5px, 1.2cqw, 14px);
  box-shadow: var(--k-sh-lg);
  border: 1px solid var(--k-line);
  overflow: hidden;
  display: grid;
  /* Fixed first track: a percentage height inside an `auto` row would be
     circular and collapse the brand band. */
  grid-template-rows: 15% 1fr auto;
  position: relative;
}
/* Lanyard slot punch — present on every printed badge in assets/img/badges */
.k-badge::before {
  content: ''; position: absolute; top: 4.5%; left: 50%; transform: translateX(-50%);
  width: 26%; height: 2.4%; min-height: 3px;
  background: var(--k-ink); border-radius: var(--r-pill);
}
.k-badge__top { background: var(--brand-grad); }
.k-badge__body { padding: 8% 8% 4%; display: flex; flex-direction: column; justify-content: center; gap: 2%; text-align: center; }
.k-badge__name { font-size: clamp(10px, 2.4cqw, 26px); font-weight: 800; line-height: 1.1; letter-spacing: -.4px; word-break: break-word; }
.k-badge__title { font-size: clamp(7px, 1.35cqw, 15px); color: var(--k-muted); font-weight: 500; }
.k-badge__co { font-size: clamp(7px, 1.5cqw, 16px); font-weight: 700; color: var(--k-teal); }
.k-badge__foot { display: flex; align-items: center; justify-content: space-between; gap: 4%; padding: 0 8% 8%; }
.k-badge__tier { font-size: clamp(6px, 1.15cqw, 12px); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--k-muted); text-align: left; line-height: 1.35; }
.k-badge__qr { width: 22%; aspect-ratio: 1; }
.k-badge__qr rect { fill: var(--k-ink); }

/* ── DONE ── template.html:345-352 ────────────────────────────────────── */
.k-done-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6cqh 6cqw; gap: 2.5cqh; }
.k-done-screen .k-mark { width: clamp(30px, 8cqw, 86px); height: clamp(30px, 8cqw, 86px); border-radius: var(--r-pill); background: var(--brand-grad); display: grid; place-items: center; color: #fff; box-shadow: var(--k-glow); }
.k-done-screen .k-mark svg { width: 52%; height: 52%; }
.k-done-screen h3 { font-family: inherit; font-size: clamp(20px, 7cqw, 76px); font-weight: 800; letter-spacing: -1px; line-height: 1; }
.k-done-screen p { font-size: clamp(10px, 2.2cqw, 24px); font-weight: 500; color: var(--k-muted); }
.k-done-screen p b { color: var(--k-teal); font-weight: 700; }

/* ── DEMO FRAME (site chrome around the device) ───────────────────────── */
.demo-grid { display: grid; gap: clamp(20px, 3vw, 36px); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } }

/* Framed variant. The device photograph carries ~44% of its width in
   transparent margin, so squeezing it into a 1.35fr column leaves a screen
   too small to operate. Full measure instead, with the step list as a row
   beneath — which also makes the unit the subject of the section. */
.demo-grid--framed { grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 30px); }
.demo-grid--framed .device { max-width: 940px; margin-inline: auto; }
.demo-grid--framed .demo-side { max-width: var(--measure); }
.demo-grid--framed .demo-side > .sub { max-width: 68ch; }
.demo-grid--framed .demo-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0; }
@media (max-width: 820px) { .demo-grid--framed .demo-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .demo-grid--framed .demo-steps { grid-template-columns: 1fr; } }

.demo-side h3 { margin-bottom: var(--s-2); }
.demo-steps { display: grid; gap: var(--s-2); margin: var(--s-5) 0; }
.demo-steps li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card-veil);
  font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
  transition: all var(--t) var(--ease);
}
.demo-steps li b { width: 20px; height: 20px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--line); color: var(--muted); font-size: var(--fs-label); font-weight: 800; flex: none; }
.demo-steps li[data-state='done'] { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); }
.demo-steps li[data-state='done'] b { background: var(--ok); color: #fff; }
.demo-steps li[data-state='now'] { border-color: var(--line-teal); background: var(--tint-teal); color: var(--teal-deep); }
.demo-steps li[data-state='now'] b { background: var(--brand-grad); color: #fff; }

.demo-timer { font-variant-numeric: tabular-nums; }

/* ── NARROW VIEWPORTS ──────────────────────────────────────────────────────
   Declared deviation from the device: below 720px the stage relaxes from the
   panel's true 16:10 to 4:3. A 10.1" landscape layout scaled to a phone puts
   every key under the 24x24 CSS px floor of WCAG 2.2 SC 2.5.8. Taller stage +
   the key floor above keeps every control tappable. Proportions are exact at
   tablet width and up.                                                       */
@media (max-width: 720px) {
  .kiosk-screen { aspect-ratio: 4 / 3; }
  .k-kbd-row { gap: 3px; }
  .k-split { padding: 4cqh 5cqw; gap: 4cqw; }
}