/* ═══════════════════════════════════════════════════════════════════
   Qeat — sign in, sign up, forgot password, reset password.
   One page for everyone: staff, managers, owners and the Qeat admin all sign
   in here and land on their own home. The look is the staff look
   (css/staff-theme.css supplies the tokens); this file is the layout, the
   fields and the password helpers. Also used by My account for its password
   form (.pw-field, .pw-checklist, .auth-error).
   ═══════════════════════════════════════════════════════════════════ */

/* These pages have no left menu. */
body.staff.no-rail { padding-left: 0; }

.auth-page { min-height: 100dvh; display: flex; background: var(--surface); }

/* ── Left: the form ───────────────────────────────────────────────── */
.auth-side {
  width: 600px; max-width: 100%; flex-shrink: 0; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 24px;
  padding: 48px 72px; background: var(--panel); border-right: 1px solid var(--border);
}
.auth-logo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.auth-q {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--lime); font-weight: 800; font-size: 18px;
}
body.staff .auth-logo #brand-title {
  display: block; margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-logo .brand-logo { height: 28px; }

.auth-mid { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.auth-view { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px; }
.auth-view.hidden { display: none; }
.auth-heading { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.auth-heading h1 { margin: 0; font-size: 34px; line-height: 1.12; }
.auth-heading p, .auth-note { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

body.staff .auth-tabs { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 0; }
body.staff .auth-tabs button {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent;
  font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer;
}
body.staff .auth-tabs button.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 23, 26, 0.08); }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.hidden { display: none; }
body.staff .field label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
body.staff .field input { width: 100%; min-height: 48px; font-size: 15px; }
body.staff .field input:disabled { opacity: 0.6; }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-keep { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
body.staff .auth-link {
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--lime-text); text-decoration: none;
}
body.staff .auth-link:hover { text-decoration: underline; color: var(--lime-text); }
body.staff .auth-link-centre { align-self: center; }

/* The forgot step reads as its own card, as the canvas draws it. */
body.staff .auth-step { padding: 28px; gap: 18px; }

body.staff .auth-form .btn-gold.solid, body.staff .auth-view > .btn-gold.solid {
  width: 100%; min-height: 52px; border-radius: 14px; font-size: 16px; font-weight: 800;
}
/* Dimmed but still clickable: a disabled button eats the click without a word. */
body.staff .btn-gold.not-ready { opacity: 0.55; }

body.staff .auth-error {
  padding: 12px 14px; border-radius: 12px; border: 0;
  background: var(--danger-bg); color: var(--danger-ink); font-size: 14px; font-weight: 600; line-height: 1.45;
}
.auth-error.hidden { display: none; }
.auth-sent { padding: 12px 14px; border-radius: 12px; background: var(--ok-bg); color: var(--ok-ink); font-size: 14px; font-weight: 600; line-height: 1.45; }
.auth-sent.hidden { display: none; }

/* "Here to order?" — guests land here by mistake; point them at the table. */
.auth-qr {
  display: flex; align-items: center; gap: 14px; box-sizing: border-box;
  width: 100%; max-width: 420px; padding: 14px 16px; border-radius: 14px; background: var(--surface-container-low);
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
}
.auth-qr b { font-weight: 800; color: var(--ink); }
.auth-qr-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border);
}
.auth-qr-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-footer { font-size: 12px; color: var(--muted); }

/* ── Right: what the app does (only what exists today) ────────────── */
.auth-promo { flex: 1 1 auto; min-width: 0; padding: 40px; box-sizing: border-box; display: flex; }
.auth-promo-in {
  flex: 1 1 auto; border-radius: 28px; background: #ECEAE3; overflow: hidden; box-sizing: border-box;
  padding: 64px 72px; display: flex; flex-direction: column; gap: 40px;
}
.auth-promo h2 { margin: 0; max-width: 560px; font-size: 44px; line-height: 1.08; letter-spacing: -0.03em; }
.auth-promo p { margin: 14px 0 0; max-width: 520px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.auth-samples { display: flex; flex-direction: column; gap: 16px; }
.auth-sample {
  display: flex; align-items: center; gap: 14px; box-sizing: border-box; max-width: 100%;
  padding: 16px 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(22, 23, 26, 0.08);
}
.auth-sample .t { font-size: 15px; font-weight: 800; color: var(--ink); }
.auth-sample .s { font-size: 13px; color: var(--muted); }
.auth-sample:nth-child(1) { width: 440px; }
.auth-sample:nth-child(2) { width: 400px; margin-left: 120px; }
.auth-sample:nth-child(3) { width: 420px; margin-left: 40px; }
.auth-sample:nth-child(4) { width: 360px; margin-left: 180px; }

/* The agent card is two rows: the heading row, then its actions. */
.auth-sample.stack { flex-direction: column; align-items: stretch; gap: 14px; }
.auth-sample-row { display: flex; align-items: center; gap: 14px; }
.auth-sample-acts { display: flex; gap: 10px; }
.auth-sample-acts .ui-btn { flex: 1 1 0; justify-content: center; pointer-events: none; }
.auth-sample-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* A photo's place, drawn empty — this panel invents no dish and no price. */
.auth-sample-thumb {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px;
  background: var(--surface-container-high, var(--surface)); border: 1px solid var(--border);
}
.auth-sample .tiles { display: flex; gap: 6px; }
.auth-sample .tiles i { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border-input); background: var(--panel); display: block; }
.auth-sample .tiles i.on { background: var(--purple); border-color: var(--purple); }
.auth-sample .tiles i.bill { background: var(--purple); border-color: var(--amber-ring); }

@media (max-width: 1080px) { .auth-promo { display: none; } .auth-side { width: 100%; border-right: 0; align-items: center; }
                             .auth-logo, .auth-mid, .auth-qr, .auth-footer { width: 100%; max-width: 420px; } .auth-mid { align-items: stretch; } }
@media (max-width: 600px)  {
  .auth-side { padding: 28px 20px; }
  .auth-heading h1 { font-size: 28px; }
  /* Phone sizing lives at the end of this file — it has to out-specify
     staff-theme.css and come after .pw-reveal's own rule. */
  body.staff .auth-form .btn-gold.solid, body.staff .auth-view > .btn-gold.solid { min-height: 54px; }
  /* Forgot password? belongs UNDER the button on a phone, centred and with a
     tap target of its own. Ordered in CSS so the tab order stays as written. */
  .auth-row { display: contents; }
  body.staff #forgot-link { order: 3; align-self: center; padding: 12px 0; }
  .auth-keep { order: 1; min-height: 44px; }
  .auth-form > .btn-gold.solid { order: 2; }
  .auth-keep-tail { display: none; }
}

/* ── Reset page: one card, centred ────────────────────────────────── */
/* The Q mark and wordmark ABOVE the card (the canvas's Forgot board), so the
   column stacks them; the mark keeps the sign-in page's .auth-logo look. */
.auth-main { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
             gap: 20px; padding: 32px 20px; box-sizing: border-box; background: var(--surface); }
body.staff .auth-card { width: 100%; max-width: 460px; padding: 32px; display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; }
.auth-card .auth-brand { display: flex; flex-direction: column; gap: 6px; }
.auth-card .auth-brand h2 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
.auth-card .auth-brand p { margin: 0; font-size: 15px; color: var(--muted); }

/* ── Password helpers (sign up, reset, My account) ────────────────── */
.pw-field { position: relative; }
body.staff .pw-field input { width: 100%; padding-right: 76px; }
.pw-field input::-ms-reveal, .pw-field input::-ms-clear { display: none; }
body.staff .pw-reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--chip-bg); color: var(--ink); font-size: 13px; font-weight: 700;
}
body.staff .pw-reveal:hover { background: var(--surface-container-highest); }

.pw-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pw-checklist.hidden { display: none; }
.pw-checklist li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.pw-checklist li .material-symbols-outlined { font-size: 16px; color: var(--track-off); }
.pw-checklist li.ok { color: var(--ink); font-weight: 600; }
.pw-checklist li.ok .material-symbols-outlined { color: var(--ok-ink); }

.pw-match { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 4px; color: var(--muted); }
.pw-match .material-symbols-outlined { font-size: 16px; }
.pw-match.ok { color: var(--ink); } .pw-match.ok .material-symbols-outlined { color: var(--ok-ink); }
.pw-match.bad, .pw-match.bad .material-symbols-outlined { color: var(--danger-ink); }
.pw-match.hidden { display: none; }

.pw-strength { display: flex; align-items: center; gap: 8px; }
.pw-strength.hidden { display: none; }
.pw-strength-track { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--chip-bg); overflow: hidden; }
.pw-strength-bar { height: 100%; width: 0%; border-radius: 999px; transition: width 0.2s ease; }
.pw-strength-bar.weak   { width: 33%;  background: var(--danger-ink); }
.pw-strength-bar.fair   { width: 66%;  background: var(--amber-ring); }
.pw-strength-bar.strong { width: 100%; background: #6B8E16; }
.pw-strength-label { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 44px; }

/* ── Phone sizing, last on purpose ────────────────────────────────────
   Two rules in this block have to beat something, and both were got wrong
   once already:

   * the inputs. staff-theme.css carries
     `body.staff :is(input[type="text"], input[type="email"], …)` at (0,2,2) —
     the same specificity as `body.staff .field input`, and it loads LAST, so
     it wins the tie. The extra .auth-form takes this to (0,3,2). The same trap
     has now been found four times in this codebase (.acct-who, .biz-only,
     .gst-sel and here); when a page sheet has to override a staff-theme block,
     it needs a parent, not a hope.
   * the Show button. Its own rule is further down this file than the media
     block above, so an override written up there loses on source order.

   16px on the inputs is not cosmetic: below 16px iOS Safari zooms the page on
   focus and the form jumps out from under the thumb. */
@media (max-width: 600px) {
  body.staff .auth-form .field input { min-height: 50px; font-size: 16px; }
  body.staff .auth-form .pw-reveal { min-height: 38px; }
}