/* =====================================================================
   pos-touch.css  —  place at: public/posui/pos-touch.css
   =====================================================================
   Design tokens + shared base for every POS surface. Loaded FIRST on every
   page; pos-register.css and pos-admin.css layer on top.

   FIXED: the base rule used to be scoped to `body.pos-auth` — the login page's
   class — so the register (body.pos-svc) and the admin screens (body.pos-admin)
   never got a background, text colour, or font at all. The panels looked right
   only because they set their own --surface; everything between them fell
   through to the browser's default white, and the type fell back to serif.

   The base now applies to every pos-* surface. Add a new surface, inherit the
   system. That is the whole point of having one.
   ===================================================================== */

:root{
  /* ground + surfaces */
  --ground:#12171F;
  --surface:#1E2733;
  --surface-hi:#2A3644;
  --line:#3B4959;          /* was #33404F — lifted, borders were vanishing */

  /* intent */
  --primary:#2DD4A7;
  --primary-ink:#06291F;
  --danger:#FF6B6B;
  --warn:#FFB454;

  /* type */
  --ink:#EDF2F7;
  --ink-mute:#8FA0B3;      /* was #7A8899 — failed contrast on --ground */

  /* metrics — fluid so touch targets shrink on small screens instead of
     overflowing, and grow back on a big terminal. Clamp(min, preferred, max). */
  --key:clamp(60px, 11vw, 96px);
  --radius:14px;
  --field-h:clamp(52px, 8vh, 60px);

  /* Manual UI zoom (the A− / A+ control + Ctrl±). ui-scale.js sets this per
     device from localStorage; default 1 = 100%. Applied on <html> below. It is
     ORTHOGONAL to the responsive breakpoints: breakpoints reflow the layout,
     zoom scales the whole thing for a given screen. */
  --ui-zoom:1;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ zoom:var(--ui-zoom, 1); }
html,body{ height:100%; margin:0; }

/* ---------------------------------------------------------------
   THE BASE. Every POS surface gets this. Do not scope it to one page.
   --------------------------------------------------------------- */
body.pos-auth,
body.pos-svc,
body.pos-admin{
  background:var(--ground);
  color:var(--ink);
  font-family:Roboto,"Helvetica Neue",Arial,sans-serif;
  /* a POS must never select text under a thumb */
  user-select:none; -webkit-user-select:none;
}

/* login only: centre the pad */
body.pos-auth{
  display:flex; align-items:center; justify-content:center; padding:24px;
}

/* Inputs are the exception — they DO get to be selectable. */
input, textarea{ user-select:text; -webkit-user-select:text; }
button{ font-family:inherit; }

.card{ width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; }
.hide{ display:none !important; }

/* ================= login: staff tiles ================= */
.who{ width:100%; margin-bottom:26px; }
.who-label{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 10px 2px; font-weight:500;
}
.staff{ display:flex; gap:8px; flex-wrap:wrap; }
.staff button{
  flex:1 1 auto; min-height:52px; padding:0 18px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  font:500 16px/1 Roboto,sans-serif; cursor:pointer;
  transition:background .12s,border-color .12s;
}
.staff button[aria-pressed="true"]{
  background:var(--primary); color:var(--primary-ink);
  border-color:var(--primary); font-weight:700;
}
.staff button:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }

/* ================= login: pin dots ================= */
.dots{ display:flex; gap:14px; height:22px; margin:4px 0 22px; align-items:center; }
.dot{
  width:16px; height:16px; border-radius:50%; border:2px solid var(--line);
  transition:transform .14s cubic-bezier(.2,.8,.3,1.4), background .14s, border-color .14s;
}
.dot.on{ background:var(--primary); border-color:var(--primary); transform:scale(1.18); }
.dots.err .dot{ border-color:var(--danger); background:transparent; }
.dots.err{ animation:shake .32s; }
@keyframes shake{
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)}
}

/* ================= login: attempt pips ================= */
.pips{ display:flex; gap:7px; align-items:center; margin-bottom:20px; height:8px; }
.pip{
  width:26px; height:4px; border-radius:2px;
  background:var(--primary); opacity:.85; transition:background .2s, opacity .2s;
}
.pip.spent{ background:var(--line); opacity:1; }
.pip.low{ background:var(--warn); }
.pip.crit{ background:var(--danger); }

/* ================= login: keypad ================= */
.pad{ display:grid; grid-template-columns:repeat(3,var(--key)); gap:12px; }
.pad button{
  height:var(--key); width:var(--key);
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  font:500 30px/1 "Roboto Mono",monospace; font-variant-numeric:tabular-nums;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .08s, transform .08s;
}
.pad button:active:not(:disabled){ background:var(--surface-hi); transform:scale(.96); }
.pad button:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }
.pad button:disabled{ opacity:.3; cursor:not-allowed; }
.pad .util{
  font-size:14px; font-family:Roboto,sans-serif;
  color:var(--ink-mute); letter-spacing:.04em;
}
.pad .go{
  background:var(--primary); color:var(--primary-ink); border-color:var(--primary);
  font-weight:700; font-size:15px; font-family:Roboto,sans-serif;
}
.pad .go:disabled{ opacity:.32; }

/* ================= login: lockout ================= */
.lock{
  display:none; width:100%; text-align:center;
  background:var(--surface); border:1px solid var(--danger);
  border-radius:var(--radius); padding:30px 24px;
}
.lock.show{ display:block; }
.lock h2{ margin:0 0 6px; font-size:18px; font-weight:700; color:var(--danger); }
.lock p{ margin:0 0 20px; font-size:14px; color:var(--ink-mute); line-height:1.5; }
.clock{
  font:700 52px/1 "Roboto Mono",monospace; font-variant-numeric:tabular-nums;
  color:var(--ink); margin:0 0 6px; letter-spacing:.02em;
}
.clock-label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 24px;
}

/* ================= login: password ================= */
.pw{ display:none; width:100%; }
.pw.show{ display:block; }
.pw label{
  display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 8px 2px; font-weight:500;
}
.pw input{
  width:100%; height:var(--field-h); padding:0 16px; margin-bottom:12px;
  background:var(--ground); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  font:400 17px Roboto,sans-serif;
}
.pw input:focus{ outline:none; border-color:var(--primary); }

.btn{
  width:100%; height:var(--field-h); border-radius:var(--radius); cursor:pointer;
  font:700 16px Roboto,sans-serif;
  border:1px solid var(--primary); background:var(--primary); color:var(--primary-ink);
}
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn.ghost{ background:transparent; color:var(--ink-mute); border-color:var(--line); font-weight:500; }
.btn.ghost:hover{ color:var(--ink); }
.stack{ display:flex; flex-direction:column; gap:10px; width:100%; }

.status{
  min-height:22px; margin-top:20px; text-align:center;
  font-size:14px; color:var(--danger); font-weight:500; line-height:1.4;
}
.status.ok{ color:var(--primary); }
.status.warn{ color:var(--warn); }

.alt{
  margin-top:18px; background:none; border:none; color:var(--ink-mute);
  font:400 14px Roboto,sans-serif; text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; padding:12px;
}
.alt:hover{ color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* =====================================================================
   Shared small-screen base. Surface-specific reflow lives in each
   surface's stylesheet; this just keeps the login pad + keypad usable on
   a phone and lets the login card breathe less.
   ===================================================================== */
@media (max-width:560px){
  body.pos-auth{ padding:14px; align-items:flex-start; padding-top:24px; }
  .pad{ gap:10px; }
  .clock{ font-size:40px; }
}

/* ---- the floating UI-zoom control (injected by ui-scale.js everywhere) ---- */
.ui-scale{
  position:fixed; left:10px; bottom:10px; z-index:8;
  display:flex; align-items:center; gap:2px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:3px; box-shadow:0 4px 14px rgba(0,0,0,.35); opacity:.72;
  transition:opacity .15s; user-select:none; font-family:Roboto,sans-serif;
}
.ui-scale:hover{ opacity:1; }
.ui-scale button{
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  background:transparent; color:var(--ink); border:none;
  font:700 18px/1 "Roboto Mono",monospace; display:flex; align-items:center; justify-content:center;
}
.ui-scale button:active{ background:var(--surface-hi); }
.ui-scale .ui-scale-val{
  min-width:44px; text-align:center; font-size:12px; color:var(--ink-mute);
  font-weight:700; letter-spacing:.02em; cursor:pointer;
}
@media print{ .ui-scale{ display:none !important; } }