/* The lobby iPad: big type, big buttons, one question per screen. Brand Kit 2.0 tokens (light). */
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-text-size-adjust: 100%; }
body.kiosk { overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
* { box-sizing: border-box; }
input, textarea { -webkit-user-select: text; user-select: text; }
.k-app { min-height: 100dvh; display: flex; }
.k-screen, .k-welcome { flex: 1; display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; padding: max(20px, env(safe-area-inset-top)) clamp(20px, 5vw, 64px) max(20px, env(safe-area-inset-bottom)); }
.k-head { display: flex; align-items: center; gap: 16px; min-height: 48px; }
.k-logo { height: 34px; width: auto; }
.k-logo.big { height: 48px; }
.k-step { font: 600 13px var(--label-font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.k-banner { margin-left: auto; display: flex; gap: 8px; }
.k-pill { font: 600 14px var(--font); padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.k-pill.warn { background: var(--amber-50, #FDF3E7); border-color: var(--amber); color: var(--amber-text, #8A4307); }
.k-main { align-self: center; width: 100%; max-width: 880px; margin: 0 auto; padding: 24px 0; }
.k-main h1, .k-center h1 { font: 700 clamp(30px, 4.4vw, 46px)/1.1 var(--brand-font); margin: 0 0 10px; letter-spacing: .005em; }
.k-sub { font-size: clamp(18px, 2.2vw, 22px); color: var(--ink-2); margin: 0 0 22px; line-height: 1.4; }
.k-error { min-height: 26px; color: var(--red-text, #B42318); font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.k-input { width: 100%; font: 500 clamp(24px, 3vw, 30px) var(--font); padding: 18px 20px; border: 2px solid var(--input-line); border-radius: 14px; background: var(--surface); color: var(--ink); outline: none; }
.k-input:focus { border-color: var(--ink-2); box-shadow: 0 0 0 4px var(--accent-soft); }
.k-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.k-btn { font: 600 19px var(--font); min-height: 60px; padding: 0 26px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.k-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.k-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.k-btn.big { min-height: 72px; font-size: 22px; padding: 0 34px; }
.k-btn.huge { min-height: 96px; font-size: clamp(24px, 3vw, 30px); width: 100%; }
.k-btn.link { border: 0; background: none; color: var(--link); text-decoration: underline; min-height: 48px; padding: 0 8px; }
.k-btn[disabled] { opacity: .6; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tiles.col { grid-template-columns: 1fr; }
.tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 110px; padding: 20px 24px; border: 2px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); font: 650 clamp(22px, 2.6vw, 28px) var(--font); text-align: left; cursor: pointer; box-shadow: var(--shadow-xs); }
.tile:active, .tile.on { border-color: var(--accent); background: var(--accent-soft); }
.tile.ghost { min-height: 72px; font-size: 20px; box-shadow: none; background: transparent; }
.tile-sub { font-size: 17px; font-weight: 500; color: var(--ink-3); }
.host-list { display: grid; gap: 10px; margin: 16px 0; }
.host-item { text-align: left; font: 600 24px var(--font); padding: 18px 22px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); cursor: pointer; }
.host-item:active { border-color: var(--accent); background: var(--accent-soft); }
.k-hint { font-size: 18px; color: var(--ink-3); }
.doc-screen .k-main { max-width: 980px; }
.doc-text { max-height: 38vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; font-size: 17px; line-height: 1.55; color: var(--ink-2); margin-bottom: 16px; }
.doc-text p { margin: 0 0 12px; }
.sig-wrap { display: grid; gap: 6px; }
.sig-label { font: 600 13px var(--label-font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sig-pad { width: 100%; height: 170px; background: #fff; border: 2px dashed var(--input-line); border-radius: 14px; touch-action: none; }
.k-check { display: flex; align-items: center; gap: 12px; font-size: 19px; margin-top: 12px; }
.k-check input { width: 28px; height: 28px; }
.cam-wrap { position: relative; width: min(100%, 560px); aspect-ratio: 4 / 5; margin: 0 auto 16px; border-radius: 20px; overflow: hidden; background: var(--ang-night, #06090D); }
.cam { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cam.shot { transform: none; }
.cam-count { position: absolute; inset: 0; display: grid; place-items: center; font: 700 120px var(--brand-font); color: #fff; text-shadow: 0 4px 20px rgba(0, 0, 0, .5); pointer-events: none; }
.cam-frame { position: absolute; inset: 18%; border: 4px solid rgba(255, 255, 255, .85); border-radius: 18px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row.center { justify-content: center; }
.k-welcome-main { align-self: center; text-align: center; width: 100%; max-width: 760px; margin: 0 auto; }
.k-eyebrow { font: 600 16px var(--label-font); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.k-welcome h1 { font: 700 clamp(36px, 5.4vw, 60px)/1.05 var(--brand-font); margin: 0 0 8px; }
.k-clock { font-size: 22px; color: var(--ink-2); margin-bottom: 36px; }
.k-welcome-actions { display: grid; gap: 16px; }
.k-welcome-foot { text-align: center; }
.k-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; gap: 8px; }
.k-center .k-sub { max-width: 640px; }
.pair-code { font: 700 clamp(48px, 8vw, 84px) var(--mono); letter-spacing: .14em; background: var(--surface); border: 2px solid var(--line); border-radius: 20px; padding: 18px 32px; margin: 18px 0; }
.done-ic { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; font: 700 64px var(--font); color: #fff; background: var(--green); margin-bottom: 18px; }
.done.plain .done-ic { background: var(--ink-3); }
.done.plain .done-ic:empty { display: none; }
.k-reply { font: 600 22px var(--font); color: var(--green-text, #1E7A46); min-height: 30px; }
.spinner { width: 54px; height: 54px; border-radius: 50%; border: 5px solid var(--line); border-top-color: var(--accent); animation: spin .9s linear infinite; margin-bottom: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.still-there { position: fixed; inset: 0; background: rgba(6, 9, 13, .55); display: grid; place-items: center; z-index: 50; padding: 24px; }
.still-card { background: var(--surface); border-radius: 22px; padding: 32px; max-width: 520px; width: 100%; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); }
.still-card.wide { max-width: 760px; text-align: left; }
.still-card h2 { font: 700 32px var(--brand-font); margin: 0 0 10px; }
.still-card p { font-size: 19px; color: var(--ink-2); }
.still-card .row { justify-content: center; margin-top: 18px; }
.privacy-text { max-height: 55vh; overflow-y: auto; margin-bottom: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The badge, for the iPad's Print button (AirPrint) and the front desk's browser. */
#print-area { display: none; }
@media print {
  @page { size: 4in 2.25in; margin: 0; }
  body.printing-badge > *:not(#print-area) { display: none !important; }
  body.printing-badge #print-area { display: block; }
}
.badge-sheet { width: 4in; height: 2.25in; padding: .12in .16in; box-sizing: border-box; background: #fff; color: #000; font-family: var(--font); display: grid; grid-template-rows: auto 1fr; gap: .06in; overflow: hidden; }
.badge-top { display: flex; align-items: center; justify-content: space-between; }
.badge-logo { height: .22in; width: auto; }
.badge-label { background: #000; color: #fff; font: 700 .2in/1 var(--brand-font); letter-spacing: .04em; padding: .05in .12in; }
.badge-body { display: grid; grid-template-columns: auto 1fr auto; gap: .1in; align-items: start; }
.badge-photo { width: .98in; height: 1.22in; object-fit: cover; filter: grayscale(1) contrast(1.15); }
.badge-name { font: 700 .3in/1.05 var(--brand-font); }
.badge-company { font: 600 .16in var(--font); margin-top: .04in; }
.badge-host, .badge-date { font-size: .12in; margin-top: .05in; }
.badge-nonda { font: 700 .13in var(--font); margin-top: .04in; }
.badge-qr { align-self: end; }
.badge-qr .qr { width: .7in; height: .7in; display: block; }