/* CarLife Lobby — customer sign-in kiosk. Direction A ("Modern and Trustworthy"
   light brand) so the counter iPad matches carlifeauto.care.

   The whole UI is drawn in a fixed 392x552 "stage" — the exact coordinate space
   the finalized mockup (lobby/planning/lobby-mockups.html) was tuned in — and
   main.js scales that stage uniformly to fill the screen. Uniform scale keeps
   every tuned wheel offset and touch target intact, and leaves drag angles
   correct (scaling about a point preserves angles). */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Inter:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;700;800&display=swap');

:root{
  --ink:#0a1f3c;--deep:#103a6b;--brand:#1857a6;--sky:#2f9bef;--sky-lt:#5fb8ff;
  --accent:#ff7a2f;--accent-strong:#b5500c;
  --mist:#eaf2fb;--cloud:#f5f9fd;--line:#d8e4f2;--paper:#fff;--muted:#54677e;
  --ok:#1f9d63;--warn:#b45309;--warn-bg:#fef3c7;
  --bezel:#0d1526;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Inter",system-ui,sans-serif;color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;background:var(--bezel);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}

/* The scaled stage: the mockup's screen, full-bleed. main.js sets the scale. */
.stage{
  position:relative;flex:none;width:392px;height:552px;
  border-radius:30px;overflow:hidden;background:var(--cloud);
  display:flex;flex-direction:column;
  transform-origin:center center;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.stage>*{flex:none}

h1,h2,h3{font-family:"Manrope","Inter",system-ui,sans-serif;letter-spacing:-.02em}

/* ---------- shared bits ---------- */
.brandrow{display:flex;align-items:center;gap:9px;padding:16px 20px 0;font-family:"Manrope";font-weight:800;font-size:14.5px;color:var(--ink)}
.brandrow svg{width:26px;height:26px;flex:none}
.brandrow .sub{font-family:"Inter";font-weight:500;font-size:11px;color:var(--muted);margin-left:auto}
.ktitle{font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--ink)}
.ksub{color:var(--muted)}
.cta{display:flex;align-items:center;justify-content:center;gap:9px;font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:800;border-radius:999px;background:var(--accent-strong);color:#fff;box-shadow:0 12px 26px -12px rgba(255,122,47,.8);cursor:pointer;border:0;width:100%}
.cta:disabled{opacity:.45;box-shadow:none;cursor:default}
.ghost{display:flex;align-items:center;justify-content:center;gap:8px;font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:700;border-radius:999px;background:#fff;color:var(--deep);border:1.5px solid var(--line);cursor:pointer;width:100%}

/* quick-switch (EN | chosen language), shown mid-flow on non-English sessions */
.minitoggle{margin-left:auto;display:flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;font-family:"Inter","Noto Sans KR",sans-serif;font-size:11px;font-weight:700}
.minitoggle button{padding:5px 11px;color:var(--muted);background:none;border:0;cursor:pointer;font:inherit}
.minitoggle button.on{background:var(--brand);color:#fff}

/* ---------- 1 · welcome, the corner wheel ---------- */
.whl{background:linear-gradient(165deg,#081527 0%,#0d2745 60%,#123c6b 100%)}
.whead{display:flex;align-items:center;gap:8px;padding:16px 20px 0;font-family:"Manrope";font-weight:800;font-size:13.5px;color:#cfe3f8;position:relative;z-index:3}
.whead svg{width:22px;height:22px;flex:none}
.whead .wlabel{margin-left:auto;font:600 10px ui-monospace,Consolas,monospace;letter-spacing:.16em;color:#6f8db0}
.wgreet{position:absolute;top:62px;left:0;right:0;text-align:center;pointer-events:none;z-index:2}
.wgreet b{display:block;font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:800;font-size:31px;color:#fff}
.wgreet span{display:block;margin-top:3px;font:600 10.5px ui-monospace,Consolas,monospace;letter-spacing:.2em;color:#8fb4dc;text-transform:uppercase}
.wcta{position:absolute;top:146px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;height:46px;padding:0 24px;border-radius:999px;background:var(--accent-strong);color:#fff;font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:800;font-size:15px;box-shadow:0 12px 26px -12px rgba(255,122,47,.8);cursor:pointer;border:0;white-space:nowrap;z-index:3}
.wmark{position:absolute;top:208px;left:50%;transform:translateX(-50%);width:0;height:0;border:11px solid transparent;border-top:15px solid var(--accent);z-index:3;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.wstep{position:absolute;top:202px;width:40px;height:40px;border-radius:50%;border:1px solid #2e5a8c;background:rgba(10,26,48,.75);color:#9cc4f5;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;padding:0}
.wstep.l{left:40px}
.wstep.l svg{transform:scaleX(-1)}
.wstep.r{right:40px}
.wwrap{position:absolute;left:50%;top:234px;width:760px;height:760px;margin-left:-380px;touch-action:none;cursor:grab;z-index:1}
.wwrap:active{cursor:grabbing}
.wheel{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(#0e1d31 0deg 4.5deg,#182c47 4.5deg 9deg);box-shadow:0 -18px 50px -20px rgba(0,0,0,.8)}
.wrim{position:absolute;inset:46px;border-radius:50%;background:conic-gradient(#c9d3de,#7f92a8,#dfe6ee,#8598ad,#c9d3de);box-shadow:inset 0 0 0 2px #5c6f86}
.wface{position:absolute;inset:62px;border-radius:50%;background:radial-gradient(circle at 50% 42%,#132b4d,#0b1c33 72%)}
.wlang{position:absolute;left:50%;top:50%;font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:800;font-size:18px;color:#7f9dc2;white-space:nowrap;transition:color .2s;cursor:pointer}
.wlang.sel{color:#fff;text-shadow:0 0 16px rgba(95,184,255,.55)}
.swc{position:absolute;left:50%;top:50%;font:700 11px ui-monospace,Consolas,monospace;color:#41597a}
.whint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:11px;color:#8fb0d6;z-index:3;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* corner-wheel layout (final): tire parked against the right edge */
.wl2 .wgreet{left:16px;right:auto;top:110px;text-align:left;width:174px}
.wl2 .wgreet b{font-size:29px;white-space:normal;line-height:1.12}
.wl2 .wwrap{left:162px;top:-114px;margin-left:0}
.wl2 .wmark{left:198px;top:255px;transform:none;border:11px solid transparent;border-left:16px solid var(--accent)}
.wl2 .wstep{left:192px;right:auto}
.wl2 .wstep.l{top:150px}
.wl2 .wstep.l svg{transform:rotate(-90deg)}
.wl2 .wstep.r{top:352px}
.wl2 .wstep.r svg{transform:rotate(90deg)}
.wl2 .wcta{left:16px;transform:none;top:auto;bottom:26px;font-size:14px;padding:0 18px}
.wl2 .whint{left:16px;right:auto;bottom:82px;text-align:left;width:164px}
.wl2 .wlang{font-size:17px}

/* ---------- 2 · phone (keypad) ---------- */
.phone .prompt{padding:10px 24px 0}
.phone .prompt .ktitle{font-size:23px}
.phone .prompt .ksub{font-size:12.5px;margin-top:4px}
.display{margin:10px 22px 0;background:#fff;border:1.5px solid var(--line);border-radius:16px;height:56px;display:flex;align-items:center;justify-content:center;font-family:"Manrope";font-weight:800;font-size:26px;letter-spacing:.02em;color:var(--ink)}
.display.empty{color:#9db1c9;font-weight:600;font-size:16px}
.display .caret{display:inline-block;width:2.5px;height:30px;background:var(--accent);margin-left:5px;border-radius:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 22px 0}
.key{height:46px;background:#fff;border:1.5px solid var(--line);border-radius:13px;display:flex;align-items:center;justify-content:center;font-family:"Manrope";font-weight:800;font-size:21px;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.key:hover{border-color:var(--sky);background:var(--mist)}
.key:active{background:var(--mist)}
.key.fn{font-size:12.5px;font-weight:700;color:var(--muted)}
.key.blank{background:none;border:0;cursor:default}
.phone .cta{height:54px;margin:12px 22px 0;width:auto;font-size:16.5px}
.phone .foot{margin-top:auto;padding:10px 22px 12px;text-align:center;font-size:11.5px;color:var(--muted)}
.kiosk-error{margin:10px 22px 0;color:var(--accent-strong);font-size:12.5px;font-weight:600;text-align:center}
.toast{margin:14px 22px 0;background:var(--warn-bg);border:1.5px solid #fde68a;color:var(--warn);border-radius:14px;padding:12px 16px;font-size:13px;font-weight:600;display:flex;gap:10px;align-items:flex-start}
.toast svg{flex:none;margin-top:1px;color:var(--warn)}

/* ---------- 3 · finding you (overlay) ---------- */
.scrim{position:absolute;inset:0;background:rgba(10,31,60,.44);display:flex;align-items:center;justify-content:center;z-index:8}
.lookcard{background:#fff;border-radius:20px;padding:26px 34px;text-align:center;box-shadow:0 24px 60px -20px rgba(10,31,60,.6)}
.spin{width:44px;height:44px;margin:0 auto 12px;animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.lookcard b{font-family:"Manrope";font-size:16.5px;color:var(--ink)}
.lookcard span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}

/* ---------- 4 · candidates / 5 · confirm ---------- */
.pick{padding:0 24px}
.pick .brandrow{padding:16px 0 0}
.pick .prompt{padding:18px 0 0}
.pick .ktitle{font-size:23px}
.pick .ksub{font-size:12.5px;margin-top:5px}
.cands{display:flex;flex-direction:column;gap:11px;margin-top:16px}
.cand{display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s;text-align:left;width:100%;font:inherit}
.cand:hover{border-color:var(--sky);box-shadow:0 10px 24px -16px rgba(16,58,107,.5)}
.avatar{width:48px;height:48px;flex:none;border-radius:50%;background:var(--mist);color:var(--brand);font-family:"Manrope";font-weight:800;font-size:16.5px;display:flex;align-items:center;justify-content:center}
.cand b{font-family:"Manrope";font-size:19px;color:var(--ink)}
.cand svg{margin-left:auto;flex:none;color:#8fa9c6}
.orbar{display:flex;align-items:center;gap:12px;margin:18px 0 12px;color:#8fa9c6;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.orbar::before,.orbar::after{content:"";flex:1;height:1px;background:var(--line)}
.pick .ghost{height:50px;font-size:14.5px}
.pick .foot{margin-top:auto;padding:14px 0 16px;text-align:center;font-size:12px;color:var(--muted)}
.pick .foot .linklike{color:var(--brand);font-weight:600;text-decoration:underline;cursor:pointer;background:none;border:0;padding:0;font:inherit}

.confirm{align-items:center;justify-content:center;text-align:center;padding:30px}
.confirm .avatar{width:84px;height:84px;font-size:28px;margin:0 auto 14px}
.confirm b{font-family:"Manrope";font-weight:800;font-size:29px;color:var(--ink);display:block}
.confirm .q{color:var(--muted);font-size:14.5px;margin-top:6px}
.confirm .cta{height:58px;padding:0 34px;font-size:17px;margin:26px auto 0;width:auto}
.confirm .ghost{height:46px;padding:0 26px;font-size:14px;margin:12px auto 0;width:auto}
.confirm .ttl{margin-top:20px;font-size:11.5px;color:#8fa9c6}

/* ---------- 6 · signed in ---------- */
.done{align-items:center;justify-content:center;text-align:center;padding:30px}
.done .ok{width:88px;height:88px;border-radius:50%;background:#e7f6ee;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.done .ok.bell{background:var(--warn-bg)}
.done b{font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:800;font-size:28px;display:block;color:var(--ink)}
.done p{color:var(--muted);font-size:15px;margin-top:8px}
.resetbar{position:absolute;left:0;right:0;bottom:0;padding:12px 22px 14px;font-size:11.5px;color:#8fa9c6;text-align:center}
.resetbar .track{height:4px;border-radius:99px;background:var(--line);margin-top:7px;overflow:hidden}
.resetbar .fill{height:100%;background:var(--sky);width:100%;transform-origin:left;animation:drain var(--reset-ms,6000ms) linear forwards}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- 7 · name entry / 8 · offline form ---------- */
.namey .prompt{padding:12px 24px 0}
.namey .ktitle{font-size:23px}
.namey .ksub{font-size:12.5px;margin-top:4px}
.field{margin:12px 22px 0;background:#fff;border:1.5px solid var(--line);border-radius:16px;height:58px;display:flex;align-items:center;padding:0 18px;font-family:"Manrope";font-weight:700;font-size:20px;color:var(--ink)}
/* Text fields stay selectable/editable even though the body disables selection
   for the rest of the kiosk chrome — iOS needs this for the caret loupe. */
.field input{border:0;outline:0;background:none;width:100%;font:inherit;color:inherit;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.field input::placeholder{color:#9db1c9;font-weight:500}
.field.static{color:var(--muted);font-weight:600}
.namey .cta{height:54px;margin:12px 22px 0;width:auto;font-size:16.5px}
.namey .foot{margin-top:auto;padding:10px 22px 12px;text-align:center;font-size:11.5px;color:var(--muted)}
.offline .fields{padding:0 22px}
.offline .field{margin:12px 0 0}
.offline .cta{height:54px;margin:16px 22px 0;width:auto;font-size:16.5px}

/* ---------- busy overlay (looking up / checking in / signing in) ---------- */
.busy{position:absolute;inset:0;background:rgba(245,249,253,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:8}
.busy .spin{margin:0}
.busy span{font-family:"Manrope";font-weight:700;font-size:15px;color:var(--deep)}

@media (prefers-reduced-motion: reduce){
  .spin{animation:none}
  .display .caret,.field .caret{animation:none}
  .wlang{transition:none}
  .resetbar .fill{animation:none;transform:scaleX(0)}
}