/* CarLife Lobby: the 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
   both design sources were tuned in: lobby/planning/lobby-mockups.html for the
   welcome wheel, the staff sheet and the device sign-in, and
   lobby/planning/signin-rebuild-mockups.html for every screen of the customer
   flow after it (SIGN-OFF item 80). Reach for the second one when a sign-in
   screen looks wrong; the first predates the rebuild.
   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;--stop:#b3261e;--stop-bg:#fdecea;
  --bezel:#0d1526;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* touch-action carries the no-zoom rule, NOT the viewport meta: iOS has ignored
   user-scalable=no and maximum-scale since iOS 10, so two quick taps on the
   wheel arrows or the keypad were zooming the kiosk under whoever was using it.
   `manipulation` drops only the double-tap-zoom gesture; panning, pinch zoom and
   ordinary taps are untouched, and the wheel keeps its own touch-action:none. */
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;
  touch-action:manipulation;
}
/* Stated on the controls too, not just inherited down from body: it is the
   element under the finger that iOS consults for the gesture. */
button{touch-action:manipulation}

/* 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}
/* Every rebuilt screen renders into one .stage-in wrapper, so the wrapper is
   what has to carry the column - not the stage. Without this rule .acc's flex:1
   never claims the leftover height and never scrolls, and every margin-top:auto
   foot below it (.phone .foot, .pick .foot, the reset bar's push) pushes
   nothing: a customer with two cars loses the bottom of the screen off the 552
   floor with no way to reach it. Ported from signin-rebuild-mockups.html. */
.stage>.stage-in{display:flex;flex-direction:column;flex:1;min-height:0}

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

/* ---------- shared bits ---------- */
/* global top bar, three zones: brand (left), Start over (center), and a right
   zone holding either the dialer's queued-count chip or the mid-flow EN/chosen
   quick switch. The boards draw Start over on the RIGHT, because they only ever
   draw it on an English session, where the right zone is empty. A non-English
   session shows both at once (ledger L14 keeps the quick switch), which no board
   covers and which does not fit beside the shop name on 392px, so the two are
   split across zones rather than crowded into one. */
.navbar{display:flex;align-items:center;height:52px;padding:0 10px;background:var(--paper);border-bottom:1.5px solid var(--line);flex:none}
.nav-left{flex:1;min-width:0;display:flex;align-items:center;gap:9px;font-family:"Manrope";font-weight:800;font-size:14.5px;color:var(--ink)}
.nav-left svg{width:26px;height:26px;flex:none}
.nav-left span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-center{flex:none;display:flex;align-items:center;justify-content:center;padding:0 6px}
.nav-right{flex:none;display:flex;align-items:center;gap:6px}
.nav-startover{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;background:var(--mist);border:1.5px solid var(--line);border-radius:999px;color:var(--deep);font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:700;font-size:12.5px;white-space:nowrap;cursor:pointer;transition:border-color .15s,background .15s}
.nav-startover svg{flex:none;color:var(--brand)}
.nav-startover:hover{border-color:var(--sky);background:#e2eefb}
.qbadge{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;background:var(--warn-bg);border:1.5px solid #fde68a;color:var(--warn);font-family:"Manrope";font-weight:800;font-size:11px}
.flipx{transform:scaleX(-1)}
.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:.4;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}
/* Digits are 8px below the prompt and the pad starts 8px below the display,
   2px tighter than either would draw alone - the 12-language strip below the
   CTA needs the room to wrap to two rows and still clear the 552 floor. */
.display{margin:8px 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 .dim{color:#b9c8dc}
.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;vertical-align:-5px}
@keyframes blink{50%{opacity:0}}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 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)}
/* The press has to land instantly and be visible while the finger is still on
   the key: the .15s fade above is for a mouse arriving, and it used to be the
   only thing a tap got before the button was destroyed by the re-render. */
.key:active{background:var(--mist);border-color:var(--sky);transition:none}
.key.fn{font-size:12.5px;font-weight:700;color:var(--muted)}
.phone .cta{height:54px;margin:12px 22px 0;width:auto;font-size:16.5px}
/* Reserves the CTA's full height even while it is invisible below ten digits,
   so the langstrip never jumps when Find me appears. */
.ctaslot{height:66px;display:flex;flex-direction:column}
/* All twelve chips wrap to two rows inside 392px; the compact size (10px type,
   3px/8px padding) is what buys that back without shrinking anything above it. */
.langstrip{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding:8px 16px 0}
.langstrip button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:3px 8px;font-family:"Inter","Noto Sans KR",sans-serif;font-size:10px;font-weight:700;color:var(--muted);cursor:pointer}
.langstrip button.on{border-color:var(--brand);background:var(--mist);color:var(--brand)}
.phone .foot{margin-top:auto;padding:6px 22px 10px;text-align:center;font-size:11px;color:#8fa9c6}
.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","Noto Sans KR",sans-serif;font-size:16.5px;color:var(--ink)}
.lookcard span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}

/* ---------- the accordion: ticked rows, one open row ----------
   The signed screen is one column throughout the visit - identity, then the
   car row - so a screen is never swapped out from under the customer once
   they have committed; only which row is open changes. */
.acc{flex:1;min-height:0;overflow-y:auto;padding:12px 20px 0;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin}
.trow{display:flex;align-items:center;gap:9px;background:#eefaf2;border:1.5px solid #cdead9;border-radius:13px;padding:9px 12px;font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:700;font-size:13.5px;color:#146c31;cursor:pointer;width:100%;text-align:left;flex:none;animation:tickin .26s ease both}
.trow .tk{width:19px;height:19px;flex:none;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center}
.trow .tk svg{width:12px;height:12px}
.trow:hover{border-color:var(--ok)}
/* The post-commit phone row and every step crumb inside add-a-car render flat:
   they reopen nothing on tap, so no hover state invites one. */
.trow.flat{cursor:default}
.trow.flat:hover{border-color:#cdead9}
@keyframes tickin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.orow{background:var(--paper);border:1.5px solid var(--line);border-radius:15px;overflow:hidden;flex:none;animation:tickin .26s ease both}
.orow-h{display:flex;align-items:center;gap:9px;padding:10px 12px;background:var(--mist);font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:800;font-size:14px;color:var(--deep)}
.orow-h .n{width:19px;height:19px;flex:none;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;font-family:"Manrope"}
/* 9px, not the family's 11px: the compact delta the 12-language strip forces
   on the dialer (signin-rebuild-mockups.html) applies here too, since this row
   can be the last thing on the same 552-tall stage. */
.orow-b{padding:10px 12px 9px}
.orow.warn{border-color:#fde68a}
.orow.warn .orow-h{background:var(--warn-bg);color:var(--warn)}
.orow.warn .orow-h .n{background:var(--warn)}
/* A CTA embedded in a row's body sits inside a card rather than full-bleed on
   the stage, so it takes the 52px in-card floor, not the screen-level 54px. */
.orow-b .cta{height:52px;margin-top:12px;font-size:16px}
.orow-b .field{margin:12px 0 0}

.donebox{text-align:center;padding:5px 6px 0;flex:none;animation:tickin .3s .06s ease both}
.donebox .ok{width:54px;height:54px;border-radius:50%;background:#e7f6ee;display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.donebox .ok svg{width:30px;height:30px}
.donebox b{font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:800;font-size:23px;display:block;color:var(--ink);line-height:1.15}
.donebox p{color:var(--muted);font-size:13.5px;margin-top:5px}
/* Runs smaller while a row is still open below it; failed_done and
   offline_done also use this face (ledger-backed, plan section 4). */
.donebox.compact{padding-top:4px}
.donebox.compact .ok{width:44px;height:44px;margin-bottom:6px}
.donebox.compact .ok svg{width:25px;height:25px}
.donebox.compact b{font-size:20px}
.donebox.compact p{font-size:12.5px;margin-top:3px}

.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 15px;border:1.5px solid var(--line);background:#fff;border-radius:999px;font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;transition:border-color .13s,background .13s}
.pill:hover{border-color:var(--sky);background:var(--mist)}
.pill .tk{width:18px;height:18px;flex:none;border-radius:50%;background:var(--ok);color:#fff;display:none;align-items:center;justify-content:center}
.pill .tk svg{width:11px;height:11px}
/* The tick only ever comes from the server's answer to a write, never the tap
   that started it - nothing on this screen is pre-selected (80b). */
.pill.on{border-color:var(--ok);background:#eefaf2;color:#146c31}
.pill.on .tk{display:flex}
.pill.on:hover{border-color:var(--ok);background:#e4f6ec}
.pill.add{border-style:dashed;color:var(--accent-strong);border-color:#e8c9ab;background:#fdf7f2}
.pill.add:hover{border-color:var(--accent);background:#fdf1e6}
.pill .caric{width:26px;height:26px;flex:none;border-radius:8px;background:var(--mist);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-left:-5px}
.pill.on .caric{display:none}
/* The whole row locks while one pill is in flight - a second tap during a
   write is ignored, not queued (ledger L2) - so busy only ever paints one. */
.pill.busy{opacity:.55;cursor:default}
.pill .mini{width:15px;height:15px;animation:rot .9s linear infinite;flex:none}
.pnote{margin-top:9px;font-size:11.5px;color:#8fa9c6;text-align:center}

/* add-a-car grids: a tap grid per fact (year, make, model), no keyboard */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.gk{min-height:44px;border:1.5px solid var(--line);background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:700;font-size:13px;color:var(--ink);cursor:pointer;padding:4px 3px;line-height:1.15;transition:border-color .13s,background .13s}
.gk:hover{border-color:var(--sky);background:var(--mist)}
.gk:active{background:var(--mist);border-color:var(--sky);transition:none}
.gk.more{border-style:dashed;color:var(--muted);font-size:12px}
/* The make list: each manufacturer's own mark beside the name. Marks differ
   wildly in shape - a round badge, a long wordmark - so every one is fitted
   into the same box rather than sized to its own drawing.
   `min-width:0` is load-bearing and not tidiness. A grid item defaults to
   min-width:auto, so it cannot shrink below its longest name, and the two 1fr
   columns silently grew past the 264px scroll box until this row's list ran off
   the right edge behind a horizontal scrollbar. Measured on the deployed page,
   not estimated: the 127.5px column leaves 72.9px for a name, and
   Mercedes-Benz fills exactly that, with Volkswagen next at 71.3px. There is
   no slack. A longer make wraps to two lines, which the 44px row has height
   for; anything much longer needs this geometry rethought. */
.gk.mkn{min-width:0;justify-content:flex-start;gap:7px;padding:6px 8px;font-size:12.5px}
.mkimg{width:30px;height:22px;flex:none;object-fit:contain}
.gscroll{max-height:206px;overflow-y:auto;padding-right:2px;scrollbar-width:thin;display:flex;flex-direction:column;gap:7px}

.notyou{flex:none;display:block;width:100%;background:none;border:0;padding:8px 0 2px;color:var(--muted);font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:700;font-size:12.5px;cursor:pointer}
.notyou .lbl{text-decoration:underline;text-underline-offset:3px}
.notyou .subl{display:block;font-weight:500;font-size:10.5px;color:#93a6bd;margin-top:3px}
/* Sits in normal flow at the foot of the stage's flex column, not as an
   overlay: the accordion above (flex:1) is what pushes it to the bottom. */
.resetbar{flex:none;padding:6px 22px 12px;font-size:10.5px;color:#8fa9c6;text-align:center}
.resetbar .track{height:4px;border-radius:99px;background:var(--line);margin-top:6px;overflow:hidden}
.resetbar .fill{display:block;height:100%;background:var(--sky);width:100%;transform-origin:left;animation:drain var(--reset-ms,8000ms) linear forwards}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- 4 · candidates / 5 · confirm / the offline paper form ---------- */
/* .pick is applied to the wrapper itself (stage-in pick), so it needs the column
   as well: with padding alone the offline form's .foot has nothing to be pushed
   to the bottom of. */
.pick{padding:0 24px;flex:1;min-height:0;display:flex;flex-direction:column}
.pick .navbar{margin:0 -24px}
.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:13px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:13px 15px;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:46px;height:46px;flex:none;border-radius:50%;background:var(--mist);color:var(--brand);font-family:"Manrope";font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center}
.cand b{font-family:"Manrope","Noto Sans KR",sans-serif;font-size:18px;color:var(--ink)}
.cand svg{margin-left:auto;flex:none;color:#8fa9c6;width:20px;height:20px}
/* The offline paper form's three boxes and its button. They are scoped to .pick
   rather than to an .offline class because the JS stopped applying one: the
   screen is a plain `stage-in pick`, and without these the CTA collapses to its
   line box (under the 44px touch floor) and the fields sit 22px further in than
   the prompt above them. Board 5a is the spec. */
.pick .field{margin:12px 0 0}
.pick .cta{height:54px;margin-top:14px;width:100%;font-size:16.5px}
.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}
/* Standalone now: "None of these" sits inside the family picker's open row
   (signin-rebuild-mockups.html board 2a), not under a .pick .foot any more. */
.linklike{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer;background:none;border:0;padding:0;font:inherit}
/* The new-customer row's way back to the keypad: a muted question over a
   full-width ghost button, pinned outside the accordion as its own footer. */
.retry{flex:none;padding:14px 22px 18px;text-align:center}
.retry-q{font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:700;font-size:13px;color:var(--muted);margin-bottom:8px}
.retry .ghost{height:50px;font-size:14.5px;border-width:2px;border-color:#c3d7ee;box-shadow:0 6px 16px -12px rgba(16,58,107,.7)}
.retry .ghost:hover{border-color:var(--sky);background:var(--mist)}
.retry .ghost svg{flex:none;color:var(--brand)}

/* ---------- text boxes: the name row and the offline paper form ----------
   The only typing anywhere in the flow. Both places it appears already carry
   their own inset (.orow-b inside the accordion, .pick on the paper form) and
   override the 22px below; it survives only as the stage-level fallback. */
.field{margin:12px 22px 0;background:#fff;border:1.5px solid var(--line);border-radius:16px;height:56px;display:flex;align-items:center;padding:0 18px;font-family:"Manrope","Noto Sans KR",sans-serif;font-weight:700;font-size:19px;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:focus-within{border-color:var(--sky)}

/* A value the relay would refuse: outlined in place, still holding what the
   customer typed, so it can be corrected rather than silently rewritten.
   car_add's own carfield.bad retired with that screen; this one still marks
   an invalid name box (blockOnInvalidName, flow.js). */
.field.bad{border-color:#b3261e;box-shadow:0 0 0 2px rgba(179,38,30,.14)}

/* The reset bar's drain is the one animation kept here on purpose. It is a
   countdown a customer acts on, not decoration: the kiosk clears itself either
   way, and a bar frozen full or frozen empty states a time remaining that is
   false rather than saying nothing. The spinners and the row entrances have no
   such job and go. */
@media (prefers-reduced-motion: reduce){
  .spin,.pill .mini{animation:none}
  .display .caret,.field .caret{animation:none}
  .trow,.orow,.donebox{animation:none}
  .wlang{transition:none}
}

/* ---------- staff device sign-in (unactivated device) ---------- */
.signin{padding:34px 26px 26px;justify-content:flex-start;overflow-y:auto}
.shead{display:flex;align-items:center;gap:9px;font-family:"Manrope";font-weight:800;font-size:16px;color:var(--ink)}
.shead svg{flex:none}
.sintro{margin-top:16px;color:var(--muted);font-size:13.5px;line-height:1.5}
.sform{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.sfield{display:flex;flex-direction:column;gap:6px}
.sfield>span{font-family:"Manrope";font-weight:700;font-size:11.5px;letter-spacing:.02em;color:var(--deep);text-transform:uppercase}
.sfield input{background:#fff;border:1.5px solid var(--line);border-radius:14px;height:52px;padding:0 16px;font-family:"Inter";font-weight:600;font-size:16px;color:var(--ink);outline:0;-webkit-user-select:text;user-select:text}
.sfield input:focus{border-color:var(--sky)}
.sfield input::placeholder{color:#9db1c9;font-weight:500}
.sfield input.scode{font-family:"Manrope";font-weight:800;font-size:22px;letter-spacing:.18em;text-align:center}
/* Reveal toggle: the eye sits inside the field's right edge and takes the field's
   full height, so a wet or gloved thumb still lands on it. */
.pw-wrap{position:relative;display:flex}
.sfield .pw-wrap input{flex:1;min-width:0;padding-right:56px}
.pw-reveal{position:absolute;top:0;right:0;bottom:0;width:56px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pw-reveal:active{color:var(--brand)}
.serror{margin-top:14px;color:var(--accent-strong);font-size:13px;font-weight:600;text-align:center}
.signin .sbtn{height:54px;margin-top:20px;font-size:16.5px}
.snote{margin-top:14px;text-align:center;font-size:11.5px;color:var(--muted);line-height:1.45}
.sdown{margin-top:12px;background:var(--stop-bg);color:var(--stop);border:1.5px solid var(--stop);border-radius:10px;padding:9px 11px;font-size:11.5px;line-height:1.45}
.sdown b{display:block;font-weight:800}
.slink{margin-top:12px;background:none;border:0;color:var(--brand);font:inherit;font-weight:600;font-size:13px;text-decoration:underline;cursor:pointer;align-self:center}
.sdone{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;gap:16px}
.sdone .ok{width:80px;height:80px;border-radius:50%;background:#e7f6ee;display:flex;align-items:center;justify-content:center}
.sdone b{font-family:"Manrope";font-weight:800;font-size:20px;color:var(--ink);line-height:1.35}

/* Staff setup notice: shown only when the install is not talking to a CRM.
   Lives inside the stage so it scales with it; customers can keep signing in
   underneath (the offline list still catches them). */
.setup-notice{position:absolute;top:0;left:0;right:0;z-index:5;background:var(--warn-bg);color:var(--warn);border-bottom:1.5px solid var(--warn);padding:8px 12px;font-size:10.5px;line-height:1.45;font-weight:500}
.setup-notice b{font-weight:800;margin-right:4px}
.setup-notice b.notice-queue{display:inline-block;margin-top:2px}
.setup-notice a{color:var(--warn);font-weight:700;text-decoration:underline}

/* ---------- hidden staff settings (welcome screen only) ----------
   SIGN-OFF item 31, amendment 2026-07-27. The way in is a three-second hold on
   the logo corner, so the target below paints nothing: no background, no border,
   and no iOS tap flash, which would advertise it to whoever brushed it. It sits
   left of x=162 on purpose, clear of the tire's drag surface. */
.hotcorner{position:absolute;left:0;top:0;width:52px;height:52px;z-index:6;touch-action:none;-webkit-tap-highlight-color:transparent}

/* The only feedback, and it starts late (600ms) so a tap still shows nothing.
   The fill duration comes from hold.js as --hold-fill-ms. */
.holdring{position:absolute;left:4px;top:4px;width:44px;height:44px;z-index:5;pointer-events:none;opacity:0;transition:opacity .12s}
.holdring.live{opacity:1}
.holdring circle{fill:none;stroke-linecap:round}
.holdring .trk{stroke:rgba(159,195,234,.18);stroke-width:2.5}
.holdring .arc{stroke:var(--sky-lt);stroke-width:2.5;stroke-dashoffset:119.4;transform:rotate(-90deg);transform-origin:50% 50%}
.holdring.live .arc{animation:holdfill var(--hold-fill-ms,2400ms) linear forwards}
@keyframes holdfill{from{stroke-dashoffset:119.4}to{stroke-dashoffset:0}}

/* The sheet dims the welcome screen instead of replacing it: the kiosk is still
   live while this is up, and the wheel behind it is the reminder. */
.sheet{position:absolute;inset:0;z-index:20;background:rgba(6,15,28,.62);display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .18s}
.sheet.open{opacity:1;pointer-events:auto}
.sheetcard{width:100%;background:var(--paper);border-radius:24px 24px 30px 30px;padding:16px 18px 16px;transform:translateY(14px);transition:transform .2s}
.sheet.open .sheetcard{transform:none}
.sheethead{display:flex;align-items:flex-start;gap:10px}
.sheethead .t{flex:1;min-width:0}
.sheethead b{display:block;font-family:"Manrope";font-weight:800;font-size:17px;color:var(--ink)}
.sheethead span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheetdone{flex:none;height:38px;padding:0 17px;border-radius:999px;background:var(--mist);border:1.5px solid var(--line);color:var(--deep);font-family:"Manrope";font-weight:800;font-size:13px;cursor:pointer}
.srow{display:flex;align-items:center;gap:14px;padding:14px 0 4px;border-top:1.5px solid var(--line);margin-top:14px}
.srow .lab{flex:1;min-width:0}
.srow b{display:block;font-family:"Manrope";font-weight:800;font-size:14.5px;color:var(--ink)}
.srow span{display:block;font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:2px}
.sw{flex:none;width:54px;height:32px;border-radius:999px;background:#cbd7e6;border:0;padding:0;position:relative;cursor:pointer;transition:background .18s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(10,31,60,.32);transition:transform .18s}
.sw.on{background:var(--brand)}
.sw.on::after{transform:translateX(22px)}
.sw:disabled{opacity:.45;cursor:default}
.slock{margin-top:10px;background:var(--mist);border-radius:12px;padding:9px 12px;font-size:11px;color:var(--muted);line-height:1.45}
.slock b{font-family:"Manrope";font-weight:800;color:var(--deep)}

/* The sign-out button. Outlined until it is armed and filled once it is, so the
   tap that takes the iPad off its shop never looks like the tap before it. */
.sout{flex:none;height:38px;padding:0 17px;border-radius:999px;background:var(--paper);border:1.5px solid var(--accent-strong);color:var(--accent-strong);font-family:"Manrope";font-weight:800;font-size:13px;cursor:pointer;transition:background .15s,color .15s}
.sout.armed{background:var(--accent-strong);color:#fff}
.sout:disabled{opacity:.55;cursor:default}

/* The optional staff PIN, drawn as the mockup's section 05 has it: it takes the
   sheet's whole place rather than sitting inside it, so there is nothing to read
   behind it. A pad and not a field, because the iPad has no keyboard and the
   software one would cover the customer screen this is standing on top of. */
.pincard{width:100%;background:var(--paper);border-radius:24px 24px 30px 30px;padding:20px 18px 16px;text-align:center;transform:translateY(14px);transition:transform .2s}
.sheet.open .pincard{transform:none}
.pincard b{display:block;font-family:"Manrope";font-weight:800;font-size:17px;color:var(--ink)}
.pincard>span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.pindots{display:flex;justify-content:center;gap:14px;margin:18px 0 4px}
.pindots i{width:13px;height:13px;border-radius:50%;background:#cbd7e6;transition:background .12s}
.pindots i.f{background:var(--brand)}
.pinerr{min-height:17px;color:var(--accent-strong);font-size:12px;font-weight:600}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.pinkey{height:44px;background:#fff;border:1.5px solid var(--line);border-radius:13px;font-family:"Manrope";font-weight:800;font-size:20px;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.pinkey:active{background:var(--mist)}
.pinkey.fn{font-size:12px;font-weight:700;color:var(--muted)}

/* An iPad with Reduce Motion on gets the ring as a static "you are holding"
   mark rather than no feedback at all; the hold still takes its full three
   seconds. The sheet's own slide is dropped for the same reason. */
@media (prefers-reduced-motion: reduce){
  .holdring.live .arc{animation:none;stroke-dashoffset:0}
  .sheet,.sheetcard,.sw,.sw::after,.pincard,.pindots i,.pinkey,.sout{transition:none}
  .sheetcard,.pincard{transform:none}
}