/* Open Kiosk, the reception tablet client (kiosk/base.html, kiosk/scanner.html). Manage Kiosks is a workspace
   tab styled by kiosk-manage.css. Colors come from the shared
   semantic tokens in theme-tokens.css and switch with html[data-bs-theme], the app's theme preference. */
.gj-kiosk {
  --kiosk-bg: var(--theme-canvas); --kiosk-panel: var(--theme-surface); --kiosk-text: var(--theme-ink); --kiosk-muted: var(--theme-muted); --kiosk-border: var(--theme-line);
  --kiosk-primary: var(--theme-brand); --kiosk-accent: var(--theme-brand); --kiosk-soft: var(--theme-brand-soft);
  --kiosk-on-primary: #fff; --kiosk-primary-fill: linear-gradient(135deg, var(--theme-brand), var(--theme-brand-dark));
  --kiosk-deep: var(--theme-customer-deep); --kiosk-deeper: var(--theme-customer-deeper); --kiosk-glow: var(--theme-customer-glow); --kiosk-gold: var(--theme-customer-accent2);
  --kiosk-radius: 16px; --kiosk-ease: cubic-bezier(.22, 1, .36, 1);
  --kiosk-shadow: 0 1px 2px rgb(16 24 40 / .05), 0 16px 36px -24px rgb(16 24 40 / .4);
  min-height: 100vh; margin: 0; color: var(--kiosk-text); font: 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0;
  background:
    radial-gradient(55% 45% at 100% 0%, color-mix(in srgb, var(--kiosk-glow) 16%, transparent), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, color-mix(in srgb, var(--kiosk-gold) 10%, transparent), transparent 70%),
    var(--kiosk-bg);
  background-attachment: fixed;
}
/* Dark brand teal is too light for white text, so dark mode uses dark ink on a glow fill (as on sign-in). */
[data-bs-theme="dark"] .gj-kiosk { --kiosk-accent: var(--kiosk-glow); --kiosk-on-primary: #04201d; --kiosk-primary-fill: linear-gradient(135deg, var(--kiosk-glow), var(--theme-brand)); --kiosk-shadow: 0 18px 40px -22px rgb(0 0 0 / .75); color-scheme: dark; }
.gj-kiosk *, .gj-kiosk *::before, .gj-kiosk *::after { box-sizing: border-box; }
.gj-kiosk [hidden] { display: none !important; }
.gj-kiosk__header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 12px max(24px, calc((100% - 1100px) / 2)); background: color-mix(in srgb, var(--kiosk-panel) 80%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--kiosk-border) 85%, transparent); -webkit-backdrop-filter: saturate(170%) blur(14px); backdrop-filter: saturate(170%) blur(14px); }
.gj-kiosk__brand { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.gj-kiosk .gj-kiosk__brand { color: inherit; }
.gj-kiosk__mark { display: block; flex: 0 0 auto; width: 42px; height: 42px; }
.gj-kiosk__brand-copy { display: grid; min-width: 0; line-height: 1.2; }
.gj-kiosk__brand-copy small { color: var(--kiosk-muted); font-size: .66rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.gj-kiosk__brand-copy strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.gj-kiosk__header .gj-kiosk__icon { border-radius: 14px; }
.gj-kiosk__main { max-width: 1100px; margin: 0 auto; padding: 28px 24px 56px; }
.gj-kiosk h1 { font-size: 28px; line-height: 1.25; margin: 12px 0; overflow-wrap: anywhere; }
.gj-kiosk h2 { font-size: 22px; }
.gj-kiosk h3 { font-size: 18px; margin: 0; }
.gj-kiosk__reference { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; margin-top: 8px; color: var(--kiosk-muted); font-size: 12px; line-height: 1.5; }
.gj-kiosk__reference code { color: var(--kiosk-text); font: 600 12px/1.5 ui-monospace, monospace; overflow-wrap: anywhere; user-select: all; }
.gj-kiosk__reference--header { grid-column: 1 / -1; margin-top: -8px; }
.gj-kiosk p { color: var(--kiosk-muted); overflow-wrap: anywhere; }
.gj-kiosk button, .gj-kiosk a { -webkit-tap-highlight-color: transparent; }
.gj-kiosk button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; color: var(--kiosk-text); background: var(--kiosk-panel); border: 1px solid var(--kiosk-border); border-radius: 12px; box-shadow: 0 1px 2px rgb(16 24 40 / .05); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .18s var(--kiosk-ease), box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.gj-kiosk button:disabled { opacity: .55; cursor: wait; }
.gj-kiosk button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--kiosk-primary) 45%, var(--kiosk-border)); box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--kiosk-primary) 70%, transparent); transform: translateY(-1px); }
.gj-kiosk button:active:not(:disabled) { transform: translateY(0); }
.gj-kiosk :focus-visible { outline: 3px solid color-mix(in srgb, var(--kiosk-accent) 60%, transparent); outline-offset: 3px; }
.gj-kiosk button.gj-kiosk__primary { color: var(--kiosk-on-primary); background: var(--kiosk-primary-fill); border-color: transparent; box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--kiosk-primary) 85%, transparent); }
.gj-kiosk button.gj-kiosk__danger { color: var(--theme-danger); border-color: color-mix(in srgb, var(--theme-danger) 35%, var(--kiosk-border)); }
.gj-kiosk button.gj-kiosk__danger:hover:not(:disabled) { background: color-mix(in srgb, var(--theme-danger) 8%, var(--kiosk-panel)); border-color: color-mix(in srgb, var(--theme-danger) 60%, var(--kiosk-border)); box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--theme-danger) 70%, transparent); }
.gj-kiosk .gj-kiosk__icon { width: 48px; padding: 0; }
.gj-kiosk label { display: grid; gap: 6px; margin-bottom: 12px; font-weight: 600; }
.gj-kiosk input, .gj-kiosk select { width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px; border: 1px solid var(--kiosk-border); border-radius: 12px; color: var(--kiosk-text); background: var(--kiosk-panel); font: inherit; font-weight: 400; transition: border-color .2s ease, box-shadow .2s ease; }
.gj-kiosk :is(input, select, textarea):focus { border-color: var(--kiosk-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kiosk-accent) 20%, transparent); outline: none; }
.gj-kiosk .gj-kiosk__check { display: flex; align-items: center; gap: 10px; }
.gj-kiosk__check input { width: 22px; min-height: 22px; accent-color: var(--kiosk-primary); }
.gj-kiosk__toolbar, .gj-kiosk__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0; }
.gj-kiosk a { color: var(--kiosk-accent); text-underline-offset: 4px; }
.gj-kiosk__camera { display: grid; place-items: center; width: 100%; height: 300px; overflow: hidden; border-radius: 8px; border: 1px solid var(--kiosk-border); background: #15292c; }
.gj-kiosk__camera > i { color: #c6e5dd; font-size: 100px; }
.gj-kiosk__camera video { width: 100%; height: 100%; object-fit: cover; }
.gj-kiosk__person-photo { width: 112px; height: 112px; margin: 0 auto 12px; overflow: hidden; border: 1px solid var(--kiosk-border); border-radius: 8px; }
.gj-kiosk__person-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gj-kiosk__validation-camera { width: min(240px, 100%); aspect-ratio: 4 / 3; margin: 12px auto; overflow: hidden; background: #111827; border-radius: 6px; }
.gj-kiosk__validation-camera video { display: block; width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
.gj-kiosk__photo-status, .gj-kiosk__photo-notice { font-size: 13px; }
.gj-kiosk__photo-link { display: inline-flex; align-items: center; gap: 6px; padding-block: 6px; font-size: 13px; }
.gj-kiosk dialog { width: min(500px, calc(100% - 32px)); color: var(--kiosk-text); background: var(--kiosk-panel); border: 1px solid var(--kiosk-border); border-radius: 8px; padding: 24px; }
.gj-kiosk dialog::backdrop { background: #0009; }
.gj-kiosk__verification { --verification-ink: #147a4b; --verification-bg: #e4f6eb; --verification-border: #8bcfa6; display: grid; justify-items: center; gap: 12px; margin: 0 0 16px; text-align: center; }
.gj-kiosk__verification.is-failure { --verification-ink: #b42335; --verification-bg: #fff0f1; --verification-border: #e9a0a8; }
.gj-kiosk__verification.is-checking { --verification-ink: var(--kiosk-accent, #126960); --verification-bg: var(--kiosk-bg); --verification-border: var(--kiosk-border); }
[data-bs-theme="dark"] .gj-kiosk .gj-kiosk__verification.is-success { --verification-ink: #75e3a5; --verification-bg: #153d2b; --verification-border: #297a50; }
[data-bs-theme="dark"] .gj-kiosk .gj-kiosk__verification.is-failure { --verification-ink: #ffb4ba; --verification-bg: #49252b; --verification-border: #a04855; }
.gj-kiosk__verification-visual { position: relative; display: grid; place-items: center; width: 112px; height: 112px; }
.gj-kiosk__verification-mark { display: grid; place-items: center; width: 88px; height: 88px; border: 2px solid var(--verification-border); border-radius: 50%; background: var(--verification-bg); color: var(--verification-ink); font-size: 42px; line-height: 1; animation: gj-kiosk-verification-arrive 420ms ease-out both; }
.gj-kiosk__verification-mark i { display: block; }
.gj-kiosk__verification.is-success .gj-kiosk__verification-mark i { animation: gj-kiosk-verification-tick 320ms 140ms ease-out both; }
.gj-kiosk__verification.is-failure .gj-kiosk__verification-mark i { animation: gj-kiosk-verification-cross 360ms ease-out both; }
.gj-kiosk__verification.is-checking .gj-kiosk__verification-mark i { animation: gj-kiosk-verification-spin 1s linear infinite; }
.gj-kiosk__verification .gj-kiosk__person-photo { margin: 0; border-radius: 50%; border: 2px solid var(--verification-border); animation: gj-kiosk-verification-arrive 420ms ease-out both; }
.gj-kiosk__verification.has-photo .gj-kiosk__verification-mark { position: absolute; right: -3px; bottom: -3px; width: 38px; height: 38px; font-size: 21px; box-shadow: 0 0 0 4px var(--kiosk-panel); }
.gj-kiosk__verification h2 { color: var(--verification-ink); font-size: 24px; line-height: 1.25; margin: 0; animation: gj-kiosk-verification-arrive 340ms ease-out both; }
.gj-kiosk__verified-name { font-size: 18px; font-weight: 600; text-align: center; color: var(--kiosk-text); }
.gj-kiosk__confirmation [data-person-name], .gj-kiosk__confirmation [data-person-state], .gj-kiosk__confirmation [data-result-message], .gj-kiosk__confirmation[data-verifying] > p { text-align: center; }
.gj-kiosk__confirmation [data-result-message] { font-size: 18px; font-weight: 500; line-height: 1.5; }
@keyframes gj-kiosk-verification-arrive { from { opacity: .2; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
@keyframes gj-kiosk-verification-tick { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes gj-kiosk-verification-cross { from { opacity: .2; transform: rotate(-20deg) scale(.65); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes gj-kiosk-verification-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gj-kiosk__verification .gj-kiosk__verification-mark, .gj-kiosk__verification:is(.is-success, .is-failure, .is-checking) .gj-kiosk__verification-mark i, .gj-kiosk__verification h2, .gj-kiosk__verification .gj-kiosk__person-photo { animation: none; }
}
@media (max-width: 540px) { .gj-kiosk__main { padding: 20px 16px; } .gj-kiosk__header { padding: 12px 16px; } .gj-kiosk__mark { width: 38px; height: 38px; } .gj-kiosk__inline { grid-template-columns: 1fr; } .gj-kiosk__camera { height: 240px; } .gj-kiosk__actions button { width: 100%; } }

.gj-kiosk__sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gj-kiosk--terminal.is-enrolled { overflow: hidden; }
.gj-kiosk--terminal.is-enrolled > .gj-kiosk__header { display: none; }
.gj-kiosk--terminal.is-enrolled .gj-kiosk__main { width: 100%; max-width: none; height: 100vh; height: 100dvh; padding: 0; margin: 0; }
.gj-kiosk--terminal.is-enrolled [data-kiosk-root] { position: relative; isolation: isolate; width: 100%; height: 100%; background: var(--kiosk-bg); }
.gj-kiosk--terminal.is-enrolled [data-scanner] { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(120px, 1fr) auto; overflow-y: auto; }
.gj-kiosk--terminal [data-kiosk-root]:is([data-screen="verifying"], [data-screen="person"], [data-screen="result"]) :is(.gj-kiosk__camera, .gj-kiosk__scanner-footer) { visibility: hidden; pointer-events: none; }
.gj-kiosk--terminal.is-enrolled .gj-kiosk__camera { position: relative; width: 100%; height: 100%; min-height: 120px; border: 0; border-radius: 0; background: var(--kiosk-bg); }
.gj-kiosk--terminal.is-enrolled .gj-kiosk__camera video { object-fit: contain; }
.gj-kiosk__scanner-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 12px; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left)); border-top: 4px solid var(--kiosk-accent); border-bottom: 1px solid var(--kiosk-border); background: var(--kiosk-panel); }
.gj-kiosk__scanner-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gj-kiosk__scanner-brand .gj-kiosk__mark { width: 44px; height: 44px; }
.gj-kiosk__scanner-brand > div { min-width: 0; }
.gj-kiosk__scanner-brand strong { display: block; font-size: 20px; }
.gj-kiosk__scanner-brand span { display: block; font-size: 14px; color: var(--kiosk-muted); overflow-wrap: anywhere; }
.gj-kiosk__terminal-tools { display: flex; flex-wrap: wrap; justify-content: end; gap: 2px; }
.gj-kiosk--terminal .gj-kiosk__terminal-tools button { width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--kiosk-muted); font-size: 22px; }
.gj-kiosk__segments { display: flex; padding: 4px; gap: 4px; border-radius: 8px; background: var(--kiosk-bg); }
.gj-kiosk .gj-kiosk__segments button { flex: 1; min-width: 0; min-height: 48px; border-color: transparent; background: transparent; color: var(--kiosk-muted); padding: 10px 12px; font-weight: 600; }
.gj-kiosk .gj-kiosk__segments button { box-shadow: none; }
.gj-kiosk .gj-kiosk__segments button[aria-pressed="true"] { color: var(--kiosk-on-primary); border-color: transparent; background: var(--kiosk-primary-fill); box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--kiosk-primary) 85%, transparent); }
.gj-kiosk__purpose { grid-column: 1 / -1; width: min(440px, 100%); justify-self: center; }
.gj-kiosk__scanner-footer { border-top: 1px solid var(--kiosk-border); background: var(--kiosk-panel); padding: 18px 20px max(24px, env(safe-area-inset-bottom)); text-align: center; }
.gj-kiosk__scanner-footer-inner { max-width: 440px; margin: 0 auto; }
.gj-kiosk__scanner-footer h1 { font-size: 26px; margin: 8px 0; }
.gj-kiosk__scanner-footer p { margin: 8px 0 16px; font-size: 14px; }
.gj-kiosk__scanner-footer .gj-kiosk__camera-state { color: var(--kiosk-accent); font-weight: 600; margin: 0; }
.gj-kiosk__camera-state i { margin-right: 6px; }
.gj-kiosk__scanner-footer button { width: 100%; min-height: 54px; font-weight: 600; margin-top: 8px; }
.gj-kiosk--terminal.is-enrolled [data-kiosk-status] { display: none; }
.gj-kiosk--terminal.is-enrolled .gj-kiosk__confirmation { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100% - 32px)); max-height: calc(100% - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: auto; padding: 24px; background: var(--kiosk-panel); color: var(--kiosk-text); border: 1px solid var(--kiosk-border); border-radius: 8px; box-shadow: 0 12px 48px #0004; }
.gj-kiosk--terminal.is-enrolled .gj-kiosk__confirmation h1 { font-size: 22px; }
.gj-kiosk__action-form { display: flex; width: 100%; align-items: end; gap: 12px; }
.gj-kiosk__action-form label { flex: 1; min-width: 0; margin: 0; }
.gj-kiosk__action-form button { flex-shrink: 0; }
.gj-kiosk--terminal [data-settings-dialog] form { display: grid; gap: 12px; margin: 0; }
.gj-kiosk__welcome { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: auto; background: var(--kiosk-bg); border-top: 5px solid var(--kiosk-primary); padding: max(20px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom)); }
.gj-kiosk__welcome > header { display: flex; align-items: center; gap: 16px; }
.gj-kiosk__welcome > header > div { flex: 1; min-width: 0; }
.gj-kiosk__welcome header .gj-kiosk__mark { width: 52px; height: 52px; }
.gj-kiosk__welcome header span, .gj-kiosk__welcome footer span { display: block; color: var(--kiosk-muted); font-size: 13px; }
.gj-kiosk__welcome-body { width: min(620px, 100%); margin: auto; padding: 36px 0; text-align: center; }
.gj-kiosk__welcome-body h1 { font-size: 52px; line-height: 1.2; margin: 20px 0 8px; }
.gj-kiosk__welcome-body h2 { font-size: 24px; margin: 0; overflow-wrap: anywhere; }
.gj-kiosk__welcome-body button { min-height: 64px; min-width: min(300px, 100%); margin-top: 16px; }
.gj-kiosk__welcome-art { position: relative; display: grid; place-items: center; width: 160px; height: 140px; margin: 0 auto; color: var(--kiosk-primary); }
[data-bs-theme="dark"] .gj-kiosk .gj-kiosk__welcome-art { color: #73d7c9; }
.gj-kiosk__welcome-art i { font-size: 100px; line-height: 1; }
.gj-kiosk__welcome-art span { position: absolute; inset: 16px 0 auto; height: 2px; background: currentColor; animation: gj-kiosk-sweep 3.3s ease-in-out infinite; }
.gj-kiosk__welcome[hidden] .gj-kiosk__welcome-art span { animation: none; }
.gj-kiosk__welcome > footer { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 12px; color: var(--kiosk-muted); font-size: 14px; border-top: 1px solid var(--kiosk-border); padding-top: 16px; }
.gj-kiosk__welcome time { text-align: right; }
.gj-kiosk__readiness { font-size: 14px; }
.gj-kiosk__scan-frame { position: absolute; width: min(248px, 68%); max-height: 80%; aspect-ratio: 1; pointer-events: none; background: linear-gradient(#fff, #fff) left top / 28px 3px no-repeat, linear-gradient(#fff, #fff) left top / 3px 28px no-repeat, linear-gradient(#fff, #fff) right top / 28px 3px no-repeat, linear-gradient(#fff, #fff) right top / 3px 28px no-repeat, linear-gradient(#fff, #fff) left bottom / 28px 3px no-repeat, linear-gradient(#fff, #fff) left bottom / 3px 28px no-repeat, linear-gradient(#fff, #fff) right bottom / 28px 3px no-repeat, linear-gradient(#fff, #fff) right bottom / 3px 28px no-repeat; }
.gj-kiosk--terminal [data-kiosk-root]:not([data-screen="scanner"]) .gj-kiosk__scan-frame { display: none; }
.gj-kiosk--terminal [data-settings-dialog] { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; padding: 0; overflow-y: auto; background: var(--kiosk-bg); }
.gj-kiosk__settings-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--kiosk-panel); border-top: 4px solid var(--kiosk-accent); border-bottom: 1px solid var(--kiosk-border); padding: max(20px, env(safe-area-inset-top)) max(24px, calc((100% - 560px) / 2)) 20px; }
.gj-kiosk__settings-header p { font-size: 12px; color: var(--kiosk-accent); font-weight: 700; text-transform: uppercase; margin: 0 0 4px; }
.gj-kiosk__settings-header h2 { font-size: 24px; margin: 0; }
.gj-kiosk__settings-header button { flex-shrink: 0; border: 0; background: transparent; color: var(--kiosk-muted); }
.gj-kiosk__settings-body { max-width: 608px; margin: 0 auto; padding: 0 24px max(32px, env(safe-area-inset-bottom)); }
.gj-kiosk__settings-body > form, .gj-kiosk__settings-section { padding: 30px 0; border-bottom: 1px solid var(--kiosk-border); }
.gj-kiosk__settings-body h3 { display: flex; align-items: center; gap: 12px; font-size: 20px; margin: 0 0 20px; }
.gj-kiosk__settings-body h3 i { color: var(--kiosk-accent); font-size: 24px; }
.gj-kiosk__settings-body label, .gj-kiosk__settings-body legend { font-size: 14px; font-weight: 600; color: var(--kiosk-muted); margin: 0; }
.gj-kiosk__settings-body input { min-height: 56px; background: var(--kiosk-panel); }
.gj-kiosk__settings-body button { min-height: 54px; }
.gj-kiosk__settings-section fieldset { border: 0; padding: 0; margin: 24px 0; }
.gj-kiosk__settings-section legend { margin-bottom: 10px; }
.gj-kiosk__settings-section > button, .gj-kiosk__settings-body > button { width: 100%; background: var(--kiosk-panel); font-weight: 600; }
.gj-kiosk__settings-body > button { margin-top: 24px; }
.gj-kiosk__site-dialog { max-height: calc(100dvh - 48px); overflow-y: auto; }
.gj-kiosk__site-options { display: grid; gap: 8px; max-height: 45dvh; overflow-y: auto; }
.gj-kiosk__site-options label { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 0; border-bottom: 1px solid var(--kiosk-border); overflow-wrap: anywhere; }
.gj-kiosk__site-options input { flex: 0 0 22px; width: 22px; min-height: 22px; accent-color: var(--kiosk-primary); }
.gj-kiosk .gj-kiosk__exit { background: #d72f45; color: #fff; border-color: #d72f45; }
@keyframes gj-kiosk-sweep { 0%, 15% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(108px); opacity: 1; } 100% { transform: translateY(108px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gj-kiosk__welcome-art span { animation: none; } }
@media (max-height: 560px) { .gj-kiosk__welcome-art { display: none; } .gj-kiosk__welcome-body { padding: 20px 0; } .gj-kiosk__welcome-body h1 { font-size: 36px; margin-top: 0; } .gj-kiosk__scan-frame { width: 100px; } .gj-kiosk__scanner-header { gap: 8px; padding-block: 8px; } .gj-kiosk__scanner-footer { padding: 8px 20px; } .gj-kiosk__scanner-footer h1 { font-size: 20px; } .gj-kiosk__scanner-footer p { margin-block: 2px; } .gj-kiosk__scanner-footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; align-items: center; } .gj-kiosk__scanner-footer-inner h1, .gj-kiosk__scanner-footer-inner > p { grid-column: 1; } .gj-kiosk__scanner-footer-inner > button { grid-column: 2; grid-row: 1 / span 3; } .gj-kiosk__scanner-footer-inner > [data-start-camera]:not([hidden]) { grid-row: 4; } }
@media (max-width: 540px) { .gj-kiosk__welcome-body h1 { font-size: 42px; } .gj-kiosk__welcome footer time { text-align: left; } .gj-kiosk__scanner-header { gap: 12px 4px; padding-inline: 16px; } .gj-kiosk__scanner-brand { gap: 8px; } .gj-kiosk__scanner-brand .gj-kiosk__mark { width: 36px; height: 36px; } .gj-kiosk__scanner-brand strong { font-size: 18px; } .gj-kiosk__terminal-tools { gap: 0; } .gj-kiosk--terminal .gj-kiosk__terminal-tools button { width: 36px; min-height: 44px; font-size: 20px; } }
@media (max-width: 700px) {
  .gj-kiosk__action-form { display: grid; grid-template-columns: minmax(0, 1fr); }
  .gj-kiosk__action-form button { width: 100%; }
}

/* ---------- Open Kiosk tablet (kiosk/scanner.html) ---------- */
.gj-kiosk__enroll { width: min(520px, 100%); margin: 24px auto; padding: 30px 28px; text-align: center; background: var(--kiosk-panel); border: 1px solid var(--kiosk-border); border-radius: 22px; box-shadow: var(--kiosk-shadow); animation: gj-kiosk-rise .55s var(--kiosk-ease) both; }
.gj-kiosk__enroll form { display: grid; gap: 10px; margin-top: 18px; text-align: left; }
.gj-kiosk__enroll label { margin: 0; }
.gj-kiosk__enroll button { width: 100%; margin-top: 6px; }
.gj-kiosk__enroll-art, .gj-kiosk .gj-kiosk__welcome-art { position: relative; display: grid; width: 150px; height: 150px; margin: 0 auto; place-items: center; overflow: hidden; color: var(--kiosk-accent); border-radius: 50%; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--kiosk-glow) 12%, transparent) 0 30%, transparent 31% 32%, color-mix(in srgb, var(--kiosk-accent) 30%, transparent) 32.5% 33.5%, transparent 34% 65%, color-mix(in srgb, var(--kiosk-accent) 30%, transparent) 65.5% 66.5%, transparent 67% 98.5%, color-mix(in srgb, var(--kiosk-accent) 40%, transparent) 99% 100%); }
.gj-kiosk__enroll-art i, .gj-kiosk .gj-kiosk__welcome-art i { position: relative; z-index: 1; font-size: 48px; line-height: 1; }
/* The sweep span: a rotating radar beam (the reduced-motion rules above already stop it). */
.gj-kiosk__enroll-art span, .gj-kiosk .gj-kiosk__welcome-art span { position: absolute; inset: 0; height: auto; background: conic-gradient(from 0deg, transparent 0 72%, color-mix(in srgb, var(--kiosk-accent) 35%, transparent) 99.4%, var(--kiosk-accent) 100%); opacity: 1; animation: gj-kiosk-spin 3.2s linear infinite; }

.gj-kiosk .gj-kiosk__welcome { border-top: 0; background: radial-gradient(60% 55% at 50% 42%, color-mix(in srgb, var(--kiosk-glow) 16%, transparent), transparent 70%), radial-gradient(50% 45% at 100% 100%, color-mix(in srgb, var(--kiosk-gold) 12%, transparent), transparent 70%), var(--kiosk-bg); }
.gj-kiosk .gj-kiosk__welcome::before, .gj-kiosk__scanner-header::before, .gj-kiosk__settings-header::before { position: absolute; inset: 0 0 auto; height: 4px; content: ""; background: linear-gradient(90deg, var(--kiosk-glow), var(--theme-brand), var(--kiosk-gold)); }
.gj-kiosk .gj-kiosk__welcome > header strong { font-size: 1.2rem; font-weight: 800; }
.gj-kiosk .gj-kiosk__welcome-art { width: 200px; height: 200px; }
.gj-kiosk .gj-kiosk__welcome-art i { display: grid; width: 84px; height: 84px; place-items: center; color: var(--kiosk-deeper); background: linear-gradient(135deg, var(--kiosk-glow), var(--kiosk-gold)); border-radius: 24px; box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--kiosk-glow) 80%, transparent); font-size: 44px; }
.gj-kiosk .gj-kiosk__welcome-body h1 { background: linear-gradient(90deg, var(--kiosk-text), var(--kiosk-accent) 60%, var(--kiosk-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 850; letter-spacing: -.02em; }
.gj-kiosk .gj-kiosk__welcome-body button { position: relative; min-height: 68px; padding-inline: 32px; border-radius: 999px; font-size: 1.15rem; }
.gj-kiosk .gj-kiosk__welcome-body button.gj-kiosk__primary::after { position: absolute; inset: -6px; content: ""; border: 2px solid color-mix(in srgb, var(--kiosk-accent) 55%, transparent); border-radius: inherit; animation: gj-kiosk-pulse 2.4s cubic-bezier(0, 0, .2, 1) infinite; }
.gj-kiosk .gj-kiosk__readiness i { color: var(--theme-success); }
.gj-kiosk .gj-kiosk__welcome > footer { padding: 14px 16px; background: color-mix(in srgb, var(--kiosk-panel) 70%, transparent); border: 1px solid var(--kiosk-border); border-radius: 16px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gj-kiosk__welcome time { color: var(--kiosk-text); font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.gj-kiosk .gj-kiosk__scanner-header, .gj-kiosk .gj-kiosk__settings-header { position: relative; border-top: 0; background: color-mix(in srgb, var(--kiosk-panel) 85%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gj-kiosk .gj-kiosk__scanner-brand strong { font-weight: 800; }
.gj-kiosk--terminal .gj-kiosk__terminal-tools button { border-radius: 12px; box-shadow: none; }
.gj-kiosk--terminal .gj-kiosk__terminal-tools button:hover:not(:disabled) { color: var(--kiosk-accent); background: var(--kiosk-soft); transform: none; }
.gj-kiosk--terminal.is-enrolled .gj-kiosk__camera { background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--kiosk-glow) 18%, transparent), transparent 70%), linear-gradient(160deg, var(--kiosk-deep), var(--kiosk-deeper)); }
.gj-kiosk .gj-kiosk__camera > i { color: color-mix(in srgb, var(--kiosk-glow) 70%, #fff); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--kiosk-glow) 60%, transparent)); }
.gj-kiosk .gj-kiosk__scan-frame { --frame: var(--kiosk-glow); background: linear-gradient(var(--frame), var(--frame)) left top / 32px 4px no-repeat, linear-gradient(var(--frame), var(--frame)) left top / 4px 32px no-repeat, linear-gradient(var(--frame), var(--frame)) right top / 32px 4px no-repeat, linear-gradient(var(--frame), var(--frame)) right top / 4px 32px no-repeat, linear-gradient(var(--frame), var(--frame)) left bottom / 32px 4px no-repeat, linear-gradient(var(--frame), var(--frame)) left bottom / 4px 32px no-repeat, linear-gradient(var(--frame), var(--frame)) right bottom / 32px 4px no-repeat, linear-gradient(var(--frame), var(--frame)) right bottom / 4px 32px no-repeat; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--kiosk-glow) 70%, transparent)); }
/* Scan line: the pseudo-element spans the frame and draws its line at the top, so translating by a
   percentage of its own height sweeps the line across the frame. */
.gj-kiosk__scan-frame::after { position: absolute; inset: 6%; content: ""; background: linear-gradient(90deg, transparent, var(--kiosk-glow), transparent) top / 100% 2px no-repeat; animation: gj-kiosk-scanline 2.4s ease-in-out infinite; }
.gj-kiosk .gj-kiosk__scanner-footer { background: color-mix(in srgb, var(--kiosk-panel) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gj-kiosk .gj-kiosk__scanner-footer h1 { font-weight: 800; }
.gj-kiosk--terminal.is-enrolled .gj-kiosk__confirmation { border-radius: 24px; box-shadow: 0 40px 90px -30px rgb(9 14 22 / .6); animation: gj-kiosk-pop .45s var(--kiosk-ease) both; }
.gj-kiosk--terminal.is-enrolled .gj-kiosk__confirmation::before { position: absolute; inset: 0 0 auto; height: 4px; content: ""; background: linear-gradient(90deg, var(--kiosk-glow), var(--theme-brand), var(--kiosk-gold)); border-radius: 24px 24px 0 0; }
.gj-kiosk .gj-kiosk__exit { border-radius: 12px; }

@keyframes gj-kiosk-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes gj-kiosk-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
@keyframes gj-kiosk-spin { to { transform: rotate(360deg); } }
@keyframes gj-kiosk-pulse { 0% { opacity: .8; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.18); } }
@keyframes gj-kiosk-scanline { 0%, 100% { transform: translateY(0); opacity: .25; } 10%, 90% { opacity: 1; } 50% { transform: translateY(98%); } }

@media (prefers-reduced-motion: reduce) {
  .gj-kiosk__enroll, .gj-kiosk__enroll-art span, .gj-kiosk .gj-kiosk__welcome-art span, .gj-kiosk .gj-kiosk__welcome-body button::after, .gj-kiosk__scan-frame::after, .gj-kiosk--terminal.is-enrolled .gj-kiosk__confirmation { animation: none !important; }
  .gj-kiosk button { transition: none; }
}