/* =============================================================================
   The sign in (04l). Its own file, so the shared app.css is untouched.
   Sizes come from the --auth-* tokens in tokens.css; every colour is an
   existing palette token. Nothing here is pinned to the bottom of the screen.
   ============================================================================= */

/* --- AuthFrame: the /login page ----------------------------------------- */
body.auth-page { background: var(--ground); margin: 0; }
.auth-frame {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-16); box-sizing: border-box;
}
.auth-starting {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-12);
  color: var(--text-2); font: var(--t-body);
}

/* --- AuthCard -------------------------------------------------------------- */
.auth-card {
  width: 100%; max-width: var(--auth-card-max); box-sizing: border-box;
  background: var(--paper); border: var(--hair) solid var(--hairline);
  border-radius: var(--r-12); box-shadow: var(--sh-card);
  padding: var(--auth-card-pad);
  animation: auth-fade var(--dur-med) var(--ease-out);
}
.auth-card--keypad { text-align: center; }
.auth-card[aria-busy="true"] { cursor: progress; }
@keyframes auth-fade { from { opacity: 0; } to { opacity: 1; } }

.auth-brand { margin-bottom: var(--sp-24); color: var(--ink); }
.auth-card > .auth-banner:first-child { margin-bottom: var(--sp-16); }

/* --- StepTitle --------------------------------------------------------------- */
.auth-title { margin-bottom: var(--sp-8); }
.auth-title__en { font: var(--t-title); letter-spacing: var(--ls-title); color: var(--ink); margin: 0; }
.auth-title__en:focus { outline: none; }
.auth-title__en:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }
.auth-title .hi-line__hi { display: block; margin-top: var(--sp-2); }

.auth-line { color: var(--text-2); font: var(--t-body); margin: 0 0 var(--sp-16); }
.auth-line .hi-line__hi { font: var(--t-meta); font-style: italic; }
.auth-line--ink { color: var(--ink); }
.auth-line--meta { font: var(--t-meta); }
.auth-identity { color: var(--text-2); font: var(--t-meta); margin: 0 0 var(--sp-8); }

/* --- fields -------------------------------------------------------------------- */
.auth-field { display: block; margin: var(--sp-24) 0 0; }
.auth-field__label { display: block; font: var(--t-meta-strong); color: var(--ink); margin-bottom: var(--sp-4); }
.auth-field__label .hi-line__hi { font-weight: 400; margin-left: var(--sp-4); }
.auth-hint { display: block; font: var(--t-meta); color: var(--text-2); margin-top: var(--sp-4); }
.auth-hint .hi-line__hi { display: block; }

.auth-phone {
  display: flex; align-items: stretch; min-height: var(--auth-ctrl-h);
  border: var(--hair) solid var(--control-edge); border-radius: var(--r-6); background: var(--paper);
}
.auth-phone:hover { border-color: var(--ink); }
.auth-phone:focus-within { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); border-color: var(--ink); }
.auth-phone__prefix {
  display: flex; align-items: center; padding: 0 var(--sp-12); color: var(--text-2);
  border-right: var(--hair) solid var(--hairline); font: 600 var(--fs-total) var(--font-latin);
}
/* app.css does not style input[type=tel]; these are its rules for the
   other fields, plus the 16px floor that stops an iPhone zooming the page. */
.auth-phone input[type=tel] {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  padding: 0 var(--sp-12); font: 600 max(16px, var(--fs-total)) var(--font-latin);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.auth-phone input[type=tel]:focus { outline: none; }
.auth-field.is-error .auth-phone, .auth-field.is-error .auth-code { border: 2px solid var(--stop); }
.auth-field.is-readonly .auth-phone, .auth-field.is-readonly .auth-code { background: var(--muted-bg); color: var(--muted); }
.auth-field.is-readonly input { color: var(--muted); }

.auth-code {
  display: block; width: var(--auth-code-w); max-width: 100%; min-height: var(--auth-code-h); box-sizing: border-box;
  border: var(--hair) solid var(--control-edge); border-radius: var(--r-6); background: var(--paper); color: var(--ink);
  text-align: center; font: var(--t-code); letter-spacing: var(--ls-code); font-variant-numeric: tabular-nums;
}
.auth-code:hover { border-color: var(--ink); }
.auth-code:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); border-color: var(--ink); }

/* --- ErrorLine ------------------------------------------------------------------- */
.auth-error {
  display: flex; gap: var(--sp-8); align-items: flex-start; margin: var(--sp-4) 0 0;
  color: var(--stop); font: var(--t-meta-strong);
}
.auth-error[hidden] { display: none; }
.auth-error--reserve { min-height: calc(var(--sp-20) * 2); justify-content: center; text-align: left; }
.auth-error__icon {
  flex: 0 0 auto; width: var(--sp-16); height: var(--sp-16); border-radius: var(--r-pill);
  background: var(--stop); color: var(--paper); display: inline-flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--font-latin); margin-top: 2px;
}
.auth-error__text { display: flex; flex-direction: column; }
.auth-error__hi { font-weight: 400; font-style: italic; }

/* --- banners ---------------------------------------------------------------------- */
.auth-banner { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 0 var(--sp-16); text-align: left; }
.auth-banner__hi { font: var(--t-meta); font-style: italic; }
.auth-banner:focus { outline: none; }
.auth-banner:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }
.auth-ww { display: none; }
@media (pointer: fine) { .auth-ww { display: flex; } }

/* --- buttons and links ------------------------------------------------------------- */
.auth-btn {
  min-height: var(--auth-btn-h); min-width: var(--auth-btn-min-w);
  padding: var(--sp-4) var(--sp-24); flex-direction: column; gap: 0; line-height: 1.2;
  width: auto; max-width: 100%; white-space: normal;
}
.auth-btn .auth-btn__en { font: var(--t-button); }
.auth-btn .hi-line__hi { font: var(--t-label); font-style: normal; opacity: .85; color: inherit; }
.auth-btn.is-busy { flex-direction: row; gap: var(--sp-8); }
.auth-btn.is-busy .hi-line__hi { margin-left: var(--sp-4); }
.auth-btn.is-offline, .auth-btn.is-offline:hover {
  background: var(--muted-bg); background-image: none; color: var(--muted);
  border-color: var(--control-edge); box-shadow: none; opacity: 1; cursor: not-allowed;
}
.auth-actions { display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: center; margin-top: var(--sp-16); }
.auth-card--keypad .auth-actions { justify-content: center; }
.auth-links { display: flex; flex-wrap: wrap; gap: var(--sp-8); justify-content: space-between; margin-top: var(--sp-12); }
.auth-link {
  min-height: var(--auth-ctrl-h); padding: 0 var(--sp-4); background: none; border: 0; cursor: pointer;
  font: var(--t-meta-strong); color: var(--pine); display: inline-flex; align-items: center; gap: var(--sp-4); text-align: left;
}
.auth-link:hover { text-decoration: underline; }
.auth-link:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); border-radius: var(--r-6); }
.auth-link--quiet { color: var(--text-2); }
.auth-link[aria-disabled="true"] { color: var(--text-2); cursor: default; text-decoration: none; }
.auth-link__sep { color: var(--text-2); }
.auth-help { font: var(--t-meta); color: var(--text-2); margin: var(--sp-16) 0 0; }
.auth-help .hi-line__hi { display: block; }

.auth-spinner {
  width: var(--sp-16); height: var(--sp-16); border-radius: var(--r-pill); flex: 0 0 auto;
  border: 2px solid currentColor; border-top-color: transparent; animation: auth-turn 800ms linear infinite;
}
@keyframes auth-turn { to { transform: rotate(360deg); } }

/* --- ChoiceCard -------------------------------------------------------------------- */
.auth-choices { border: 0; padding: 0; margin: var(--sp-16) 0 0; display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.auth-choice {
  display: flex; gap: var(--sp-12); align-items: flex-start; min-height: var(--auth-choice-min-h);
  padding: var(--sp-16); box-sizing: border-box; cursor: pointer; text-align: left;
  background: var(--paper); border: var(--hair) solid var(--control-edge); border-radius: var(--r-12);
}
.auth-choice:hover { border-color: var(--ink); }
.auth-choice:focus-within { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }
.auth-choice:has(input:checked) { border: 2px solid var(--ink); padding: calc(var(--sp-16) - 1px); }
.auth-choices[aria-invalid="true"] .auth-choice { border-color: var(--stop); }
.auth-choice__radio { width: var(--sp-20); height: var(--sp-20); margin: 2px 0 0; accent-color: var(--ink); flex: 0 0 auto; }
.auth-choice__body { display: flex; flex-direction: column; gap: var(--sp-2); }
.auth-choice__title { font: var(--t-section); color: var(--ink); }
.auth-choice__detail { font: var(--t-meta); color: var(--text-2); margin-top: var(--sp-4); }
.auth-choice__detail-hi { font: var(--t-meta); color: var(--text-3); font-style: italic; }

/* --- BusinessRow ------------------------------------------------------------------- */
.auth-rows { list-style: none; padding: 0; margin: var(--sp-16) 0 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.auth-row {
  width: 100%; min-height: var(--row-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12);
  padding: var(--sp-8) var(--sp-16); text-align: left; cursor: pointer;
  background: var(--paper); border: var(--hair) solid var(--control-edge); border-radius: var(--r-12); color: var(--ink);
}
.auth-row:hover { background: var(--hover); }
.auth-row:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }
.auth-row__name { font: var(--t-section); display: block; }
.auth-row__role { font: var(--t-meta); color: var(--text-2); display: block; }
.auth-skeleton { height: var(--row-h); border-radius: var(--r-12); background: var(--selected); }

/* --- PinDots and PinPad ------------------------------------------------------------- */
.auth-pin { display: flex; flex-direction: column; align-items: center; }
.auth-pad-hint { font: var(--t-meta); color: var(--text-2); margin: 0 0 var(--sp-12); text-align: center; }
.auth-pad-hint.is-urgent { color: var(--ink); }
.auth-dots { display: flex; gap: var(--sp-16); justify-content: center; margin: var(--sp-16) 0 var(--sp-4); }
.auth-dot {
  width: var(--auth-dot); height: var(--auth-dot); border-radius: var(--r-pill); box-sizing: border-box;
  border: 2px solid var(--control-edge); background: transparent;
}
.auth-dot.is-filled { background: var(--ink); border-color: var(--ink); }
.auth-dots.is-checking .auth-dot { animation: auth-pulse 900ms ease-in-out infinite; }
@keyframes auth-pulse { 50% { opacity: .35; } }
.auth-pad {
  display: grid; grid-template-columns: repeat(3, minmax(48px, var(--auth-key)));
  gap: var(--auth-key-gap); justify-content: center; margin-top: var(--sp-8);
}
.auth-pad[hidden] { display: none; }
.auth-key {
  aspect-ratio: 1 / 1; min-width: 48px; min-height: 48px; max-width: var(--auth-key); max-height: var(--auth-key); width: 100%;
  border-radius: var(--r-12); border: var(--hair) solid var(--control-edge); color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(to bottom, var(--ctrl-top), var(--ctrl-bottom));
  box-shadow: var(--sh-btn); font: var(--t-code); letter-spacing: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.auth-key:hover { border-color: var(--ink); }
.auth-key:active { transform: translateY(var(--hair)); box-shadow: none; }
.auth-key:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }
.auth-key:disabled { cursor: not-allowed; opacity: .6; }
.auth-key--blank { visibility: hidden; border: 0; box-shadow: none; background: none; }
.auth-key--del { font: var(--t-section); }

/* --- LockOverlay (L09): opaque, the page under it hidden, not blurred ---------- */
.auth-lock {
  position: fixed; inset: 0; z-index: var(--z-lock); background: var(--ground);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-16); overflow: auto;
  animation: auth-fade var(--dur-med) var(--ease-out);
}
.auth-lock .auth-card { margin: auto; }

/* --- dialogs: the existing centred sheet, with its own short buttons ------------- */
/* .auth-sheet scrolls inside the common Dialog (app.css .dialog__scroll), so it
   needs no size or overflow rule of its own. */
.auth-dialog .auth-title { margin-bottom: var(--sp-8); }
.auth-dialog .auth-title__en { font: var(--t-title); }
.auth-dialog__buttons { display: flex; flex-wrap: wrap; gap: var(--sp-8); justify-content: flex-end; margin-top: var(--sp-20); }
.auth-dialog__row { display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: center; justify-content: space-between; margin-top: var(--sp-16); }
.auth-count { font: var(--t-code); color: var(--ink); text-align: center; margin: var(--sp-8) 0 0; font-variant-numeric: tabular-nums; }

/* --- L08b inside the app's content area ------------------------------------------- */
.auth-inline { display: flex; justify-content: center; padding: var(--sp-24) var(--sp-16); }

/* --- the owner sidebar's account block, and the salesman's S6 buttons ---------------- */
.auth-account { padding: var(--sp-8) var(--sp-12) var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-account__who { font: var(--t-meta); color: inherit; opacity: .85; padding: 0 var(--sp-4); }
.auth-account .auth-link { color: inherit; }
.is-collapsed .auth-account { display: none; }
.auth-phone-actions { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-16); }

/* --- visually hidden live regions -------------------------------------------------- */
.auth-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 560px) {
  .auth-dialog__buttons { justify-content: flex-start; }
}