/* =============================================================================
   SIGN IN, PIN AND LOCK IN THE BOARDS' LANGUAGE (05bg Onboarding, B8)
   =============================================================================
   login.html (phone number, code, "is this your device", set PIN, the business
   picker) and, inside the app, the PIN dialogs and the lock screen. Only the
   look changes: every field, step, rule and Hinglish line is authApp.js,
   authUi.js and login.js as before. The page wears the business's last look
   (lookBoot.js), Green before anyone has signed in. Sizes ride --lk-s; text
   never goes under 14 px. */

[data-look] body.auth-page { background: var(--lk-ground); color: var(--lk-ink); font-family: var(--lk-font); }

/* The card: white, the board's 28 px radius, no edge, no shadow. */
[data-look] .auth-card {
  max-width: calc(480px * var(--lk-s)); min-width: 0; border: 0; box-shadow: none;
  border-radius: calc(28px * var(--lk-s)); padding: calc(32px * var(--lk-s)) calc(32px * var(--lk-s)) calc(28px * var(--lk-s));
}
@media (max-width: 480px) { [data-look] .auth-card { padding: calc(24px * var(--lk-s)) calc(20px * var(--lk-s)); border-radius: calc(24px * var(--lk-s)); } }

/* The brand: the rail's accent B mark beside the name, in the display face. */
[data-look] .auth-brand { margin-bottom: calc(24px * var(--lk-s)); }
[data-look] .auth-brand .wordmark, [data-look] .auth-starting .wordmark {
  display: inline-flex; align-items: center; gap: calc(10px * var(--lk-s));
  font: 800 max(14px, calc(22px * var(--lk-s)))/1 var(--lk-display); letter-spacing: -0.02em; color: var(--lk-ink);
}
[data-look] .auth-brand .wordmark .mark, [data-look] .auth-starting .wordmark .mark { display: none; }
[data-look] .auth-brand .wordmark::before, [data-look] .auth-starting .wordmark::before {
  content: 'B'; display: inline-flex; align-items: center; justify-content: center;
  width: calc(40px * var(--lk-s)); height: calc(40px * var(--lk-s)); min-width: 32px; min-height: 32px;
  border-radius: calc(12px * var(--lk-s)); background: var(--lk-accent); color: var(--lk-accent-ink);
  font: 800 max(14px, calc(20px * var(--lk-s)))/1 var(--lk-display);
}
[data-look] .wordmark .baki, [data-look] .wordmark .check { color: var(--lk-ink); }

/* The title: the board's big Bricolage, the Hinglish line under it. */
[data-look] .auth-title__en { font: 800 max(14px, calc(32px * var(--lk-s)))/1.1 var(--lk-display); letter-spacing: -0.02em; color: var(--lk-ink); }
[data-look] .auth-dialog .auth-title__en { font-size: max(14px, calc(26px * var(--lk-s))); }
/* B8: the title takes focus so it is read out; it is not a control, so it
   never wears a box. */
[data-look] .auth-title__en:focus, [data-look] .auth-title__en:focus-visible { outline: none; box-shadow: none; }
[data-look] .auth-title .hi-line__hi, [data-look] .auth-line .hi-line__hi { color: var(--lk-text-2); font-size: max(14px, calc(14px * var(--lk-s))); }
[data-look] .auth-line { color: var(--lk-text-2); font: 400 max(14px, calc(15px * var(--lk-s)))/1.5 var(--lk-font); }
[data-look] .auth-identity, [data-look] .auth-hint, [data-look] .auth-help, [data-look] .auth-pad-hint,
[data-look] .auth-banner__hi, [data-look] .auth-choice__detail, [data-look] .auth-choice__detail-hi,
[data-look] .auth-row__role, [data-look] .auth-error { font-size: max(14px, calc(14px * var(--lk-s))); }

/* Fields: the board's 14 px radius boxes, 52 px tall. */
[data-look] .auth-field__label { font: 700 max(14px, calc(14px * var(--lk-s)))/1.3 var(--lk-font); color: var(--lk-ink); }
[data-look] .auth-phone, [data-look] .auth-code {
  border: 1px solid var(--lk-input-edge); border-radius: calc(14px * var(--lk-s)); background: var(--lk-paper);
  min-height: max(48px, calc(56px * var(--lk-s)));
}
[data-look] .auth-phone:focus-within, [data-look] .auth-code:focus-visible { outline: 2px solid var(--lk-link); outline-offset: 1px; border-color: var(--lk-ink); }
[data-look] .auth-phone__prefix { color: var(--lk-text-2); border-right-color: var(--lk-line); font-family: var(--lk-font); }
[data-look] .auth-phone input[type=tel] { font-family: var(--lk-font); font-weight: 700; }
[data-look] .auth-code { font-family: var(--lk-font); font-weight: 800; }
[data-look] .auth-field.is-error .auth-phone, [data-look] .auth-field.is-error .auth-code { border: 2px solid var(--lk-stop); }
[data-look] .auth-error { color: var(--lk-stop); }
[data-look] .auth-error__icon { background: var(--lk-red); font-size: 14px; width: 18px; height: 18px; }

/* Buttons: the board's pills; the main one in the accent. */
[data-look] .auth-btn { border-radius: 999px; min-height: max(48px, calc(52px * var(--lk-s))); padding: calc(6px * var(--lk-s)) calc(24px * var(--lk-s)); }
[data-look] .auth-btn .auth-btn__en { font: 800 max(14px, calc(15px * var(--lk-s)))/1.2 var(--lk-font); }
[data-look] .auth-btn .hi-line__hi { font: 600 14px/1.2 var(--lk-font); opacity: .8; }
[data-look] .auth-link { font: 700 max(14px, calc(14px * var(--lk-s)))/1.3 var(--lk-font); color: var(--lk-link); }
[data-look] .auth-link--quiet { color: var(--lk-text-2); }
[data-look] .auth-banner { border-radius: calc(14px * var(--lk-s)); }

/* "Is this your device" and the other choices: the Bill popup's radio cards. */
[data-look] .auth-choice { border: 1px solid var(--lk-edge); border-radius: calc(16px * var(--lk-s)); background: var(--lk-paper); min-height: 56px; }
[data-look] .auth-choice:hover { border-color: var(--lk-text-4); background: var(--lk-soft); }
[data-look] .auth-choice:has(input:checked) { border: 2px solid var(--lk-dark); background: var(--lk-paper); }
[data-look] .auth-choice__radio { accent-color: var(--lk-dark); }
[data-look] .auth-choice__title { font: 800 max(14px, calc(16px * var(--lk-s)))/1.3 var(--lk-font); }

/* The business picker rows: Parties table rows as cards. */
[data-look] .auth-row { border: 1px solid var(--lk-line); border-radius: calc(16px * var(--lk-s)); min-height: max(56px, calc(64px * var(--lk-s))); }
[data-look] .auth-row:hover { background: var(--lk-soft); border-color: var(--lk-edge); }
[data-look] .auth-row__name { font: 800 max(14px, calc(16px * var(--lk-s)))/1.3 var(--lk-font); }

/* PIN dots and keys: round keys, the dark fill for a dot that is set. */
[data-look] .auth-dot { border-color: var(--lk-input-edge); }
[data-look] .auth-dot.is-filled { background: var(--lk-dark); border-color: var(--lk-dark); }
[data-look] .auth-key {
  border-radius: 50%; border: 1px solid var(--lk-edge); background: var(--lk-soft); background-image: none; box-shadow: none;
  font: 800 max(18px, calc(24px * var(--lk-s)))/1 var(--lk-font); color: var(--lk-ink);
}
[data-look] .auth-key:hover { background: var(--lk-paper); border-color: var(--lk-text-4); }
[data-look] .auth-key--del { font-size: max(14px, calc(15px * var(--lk-s))); }
[data-look] .auth-key--blank { background: none; border: 0; }

/* The lock screen: the ground, the card in the middle. */
[data-look] .auth-lock { background: var(--lk-ground); }

/* The Hinglish lines under labels and hints, and the +91, at 14 px or more. */
[data-look] .auth-card .hi-line__hi, [data-look] .auth-hint, [data-look] .auth-field__label .hi-line__hi { font-size: 14px; }
[data-look] .auth-phone__prefix { font-size: max(16px, calc(17px * var(--lk-s))); }

/* --- account and device control in the boards' language ---------------------------
   Phones and computers, account activity, Confirm it is you, the message way in
   (parked), Make room and the onboarding tip. Only the look here: every rule and line is
   in accountControl.js, accountKit.js and loginSteps.js. */
[data-look] .acct-said { font: 700 max(14px, calc(15px * var(--lk-s)))/1.4 var(--lk-font); color: var(--lk-said-ink); }
[data-look] .acct-said:not(:empty) { background: var(--lk-said-bg); border-radius: calc(14px * var(--lk-s)); padding: calc(10px * var(--lk-s)) calc(14px * var(--lk-s)); }
[data-look] .acct-panel { gap: calc(14px * var(--lk-s)); }
[data-look] .acct-tip {
  background: var(--lk-paper); color: var(--lk-ink); border: 1px solid var(--lk-edge);
  border-radius: calc(20px * var(--lk-s)); box-shadow: 0 12px 32px rgba(30, 36, 32, .14);
  padding: calc(16px * var(--lk-s)) calc(18px * var(--lk-s)); font-family: var(--lk-font);
}
[data-look] .acct-tip strong { font: 800 max(14px, calc(16px * var(--lk-s)))/1.3 var(--lk-font); }
[data-look] .auth-message__label { font: 600 max(14px, calc(14px * var(--lk-s)))/1.4 var(--lk-font); color: var(--lk-text-2); }
[data-look] .auth-message__big {
  font: 800 max(18px, calc(24px * var(--lk-s)))/1.2 var(--lk-font); color: var(--lk-ink);
  background: var(--lk-soft); border: 1px solid var(--lk-line); border-radius: calc(14px * var(--lk-s)); padding: calc(10px * var(--lk-s)) calc(14px * var(--lk-s));
}
[data-look] .auth-skeleton { border-radius: calc(14px * var(--lk-s)); background: var(--lk-soft); }
/* On a phone the tip sits above the bottom bar and the Ask Chotu button, never on them. */
@media (max-width: 999px) {
  [data-look] .acct-tip { bottom: calc(var(--lk-bnav-h, 72px) + calc(84px * var(--lk-s))); z-index: 31; }
}
[data-look] .acct-tip.acct-tip--inline {
  position: static; max-width: none; box-shadow: none; z-index: auto;
  margin: 0 0 calc(16px * var(--lk-s)); background: var(--lk-note-bg); border-color: var(--lk-line); color: var(--lk-ink);
}