/* Avenzo authentication - page layout.
   Mobile first: the page background is the canvas and the form sits directly on it.
   From 960px: brand showcase on the left (about 58%), persistent sign-in surface on the right. */

/* Brand-side (showcase) colours, specific to the auth pages. */
:root { --canvas-a: #F4F1EC; --canvas-b: #ECE7E0; --plane-a: #232120; --plane-b: #121110; --glow: rgba(255, 90, 31, 0.12); }
:root[data-theme="dark"] { --canvas-a: #111111; --canvas-b: #0B0B0B; --plane-a: #F6F4F1; --plane-b: #EDEAE6; --glow: rgba(255, 106, 46, 0.14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --canvas-a: #111111; --canvas-b: #0B0B0B; --plane-a: #F6F4F1; --plane-b: #EDEAE6; --glow: rgba(255, 106, 46, 0.14); }
}

.az-page { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* ---------- showcase: the Avenzo slant, large and cropped (desktop only) ---------- */

.az-showcase { display: none; }
/* A quiet background brand element: the logo itself (same viewBox and paths as avenzo-mark.svg),
   scaled and placed as one unit so the two slants keep their angle, size, gap and offset. */
.az-hero-mark {
  position: absolute; left: 50%; top: 64%;
  width: min(72cqw, 78cqh); height: auto; aspect-ratio: 50 / 48;
  transform: translate(-50%, -50%);
  overflow: visible;
}
@media (min-width: 960px) and (max-height: 800px) {
  .az-hero-mark { width: min(64cqw, 68cqh); top: 68%; }
}
.az-hero-mark .p-a { fill: url(#azPlaneA); }
.az-hero-mark .p-b { fill: url(#azPlaneB); }
.az-hero-mark .s-a1 { stop-color: var(--plane-a); }
.az-hero-mark .s-a2 { stop-color: var(--plane-b); }
.az-hero-mark .s-b1 { stop-color: #FF7A3D; }
.az-hero-mark .s-b2 { stop-color: #E0480F; }
/* One quiet line in the open space under the lockup. */
.az-caption {
  position: absolute; left: clamp(40px, 4.4vw, 64px); top: 118px; z-index: 1; margin: 0;
  max-width: 14em; font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--text-2);
}

/* ---------- panel: header, form, footer ---------- */

.az-panel { flex: 1; display: flex; flex-direction: column; }
.az-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left));
}
.az-body {
  width: calc(100% - 40px); max-width: 420px;
  margin: clamp(36px, 9vh, 88px) auto 0;
}
.az-head { margin-bottom: 28px; }
.az-body > .az-meta, .az-step > .az-meta { margin-top: 20px; text-align: center; }
.az-foot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px;
  margin-top: auto; padding: 32px 20px calc(16px + env(safe-area-inset-bottom));
  font-size: 13px;
}
.az-foot a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-2); font-weight: 500; }
/* A small, quiet use of the slant as the page's sign-off on phones. */
.az-sig { display: block; width: 26px; height: auto; margin: 0 auto calc(20px + env(safe-area-inset-bottom)); opacity: 0.18; }
.az-sig .m-b { opacity: 1; }
.az-foot + .az-sig { margin-top: -4px; }

/* Multi-step pages (verification, password reset). */
.az-step-head { margin-bottom: 24px; }
.az-step-title { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 7vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.az-step-title:focus { outline: none; }
.az-step-text { margin: 8px 0 0; color: var(--text-2); overflow-wrap: anywhere; }
.az-step-text strong { color: var(--text); font-weight: 600; }
.az-step .az-btn-quiet { align-self: center; }
.az-google { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }
.az-google[data-state="loading"], .az-google[data-state="off"] { display: none; }
.az-done { text-align: center; }
.az-done-icon { width: 48px; height: 48px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; color: var(--success); background: var(--success-soft); }
.az-done-icon svg { width: 22px; height: 22px; }
.az-done + .az-btn { margin-top: 24px; }

/* ---------- tablet / foldable: one centred column with more air ---------- */

@media (min-width: 640px) {
  .az-top { padding: calc(20px + env(safe-area-inset-top)) 24px 0 28px; }
  .az-body { max-width: 440px; margin-top: clamp(56px, 12vh, 120px); }
  .az-sig { display: none; }
}

/* ---------- desktop: showcase + persistent surface ---------- */

@media (min-width: 960px) {
  .az-page { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(480px, 1fr); }
  .az-showcase {
    display: block; position: relative; overflow: hidden; isolation: isolate; container-type: size;
    background:
      radial-gradient(46% 38% at 78% 78%, var(--glow), transparent 72%),
      linear-gradient(160deg, var(--canvas-a), var(--canvas-b));
  }
  .az-hero-mark { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.16)); }
  .az-panel {
    min-height: 100vh; min-height: 100dvh;
    background: var(--surface); border-left: 1px solid var(--border);
  }
  /* The lockup belongs to the brand side; the theme control to the surface. */
  .az-top { display: contents; }
  .az-lockup { position: absolute; z-index: 2; left: clamp(40px, 4.4vw, 64px); top: 36px; }
  .az-theme { position: absolute; z-index: 2; right: 24px; top: 24px; }
  /* The form centres in the space above the legal links. */
  .az-panel { justify-content: flex-start; padding-top: 72px; }
  .az-body { margin: auto; width: calc(100% - 96px); max-width: 440px; }
  .az-foot { margin-top: 0; padding: 24px 24px 20px; }
}
@media (min-width: 1440px) {
  .az-page { grid-template-columns: minmax(0, 1.5fr) minmax(560px, 1fr); }
  .az-caption { top: 132px; font-size: 22px; }
}

/* ---------- restaurant workspace: the same system on a charcoal brand side ---------- */

@media (min-width: 960px) {
  [data-auth-context="partner"] .az-showcase {
    --canvas-a: #1A1918; --canvas-b: #100F0E;
    --plane-a: #F6F4F1; --plane-b: #EDEAE6;
    --glow: rgba(255, 106, 46, 0.16);
    --text-2: #A6A29D;
  }
  [data-auth-context="partner"] .az-lockup { color: #F6F4F1 !important; }
  [data-auth-context="partner"] .az-lockup .m-a { fill: #F6F4F1; }
}


/* Team invitation (UI-11, team-invite.html): what the invitation is for, before accepting. */
.az-invite { display: grid; gap: 10px; margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--border, rgba(0,0,0,.12)); border-radius: 12px; }
.az-invite div { display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
.az-invite dt { color: var(--text-secondary, inherit); font-size: 14px; }
.az-invite dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; }