@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@600&text=Tap%26Order&display=swap");   /* the wordmark beside the logo */
/* Login and registration: the landing page's palette and type, one narrow column with one card. */
:root {
  --p-bg: #eff0f1; --p-surface: #e3e5e7; --p-ink: #1b1e22; --p-muted: #565c64;
  --p-accent: #235ae8; --p-accent-ink: #eff0f1; --p-action: #235ae8; --p-action-ink: #eff0f1;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 400; --display-tracking: -0.03em;
}
.auth { min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: var(--s-6);
  padding-block: var(--s-8); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.auth > * { width: 100%; max-width: 420px; }
.auth--wide > * { max-width: 680px; }
.auth__brand { display: grid; gap: var(--s-3); justify-items: center; text-align: center; }
.auth__logo { display: inline-flex; align-items: center; gap: var(--s-2); font: 500 22px/1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; margin-bottom: var(--s-4); }
.auth__logo img { width: 32px; height: 32px; }
.auth__brand h1 { font-size: clamp(30px, 5vw, 40px); line-height: 1.1; }
.auth__brand p { color: var(--muted); }
.auth__card { display: grid; gap: var(--s-5); padding: var(--s-7); border-radius: var(--r-lg); background: var(--p-surface); --error: color-mix(in oklab, #d92d20 72%, var(--ink)); }
.auth__card form { display: grid; gap: var(--s-5); }
.auth__card fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.auth__card fieldset + fieldset { padding-top: var(--s-5); border-top: 1px solid var(--line); }
.auth__card legend { float: left; width: 100%; padding: 0; margin-bottom: var(--s-3); font: 500 var(--t-card, 18px)/1.3 var(--font-text); }
.auth__card fieldset > :is(legend, .field--full) { grid-column: 1 / -1; }
.auth__card .btn { width: 100%; justify-content: center; }
.field .opt { font-weight: 400; color: var(--muted); }
.field--check { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-body); font-weight: 400; }
.field--check input { width: 20px; height: 20px; flex: none; margin-top: 2px; padding: 0; accent-color: var(--p-action); }
.field--check a { text-decoration: underline; text-underline-offset: 3px; }
.pass { position: relative; }
.pass input { padding-right: 96px; }
.pass__toggle { position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 var(--s-3); border: 0; border-radius: calc(var(--r-sm) - 2px); background: transparent; color: var(--muted); font: 500 var(--t-small)/1 var(--font-text); cursor: pointer; }
.pass__toggle:hover { color: var(--ink); }
.pass__toggle:focus-visible, .auth a:focus-visible, .auth__plain:focus-visible, .av__opt:focus-visible { outline: 3px solid var(--p-action); outline-offset: 2px; }
.notice { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--p-bg); border: 1px solid var(--line); }
.notice--error { border-color: var(--error); color: var(--error); }
.notice--error > * + * { margin-top: var(--s-2); }
.auth__foot { display: grid; gap: var(--s-3); justify-items: center; text-align: center; font-size: var(--t-small); color: var(--muted); }
.auth__foot a, .auth__plain { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.auth__plain { border: 0; padding: 0; background: none; font: inherit; font-weight: 500; cursor: pointer; }
.auth__foot form { display: inline; }
.av { display: flex; gap: var(--s-5); align-items: flex-start; grid-column: 1 / -1; }
.av__preview { flex: none; width: 72px; height: 72px; border-radius: 999px; overflow: hidden; background: var(--p-bg); border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--muted); font-size: var(--t-small); }
.av__preview img { width: 100%; height: 100%; object-fit: cover; }
.av__side { display: grid; gap: var(--s-3); min-width: 0; }
.av__grid { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.av__grid:empty { display: none; }
.av__opt { width: 44px; height: 44px; padding: 0; border-radius: 999px; overflow: hidden; border: 2px solid transparent; background: var(--p-bg); cursor: pointer; }
.av__opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av__opt.is-sel { border-color: var(--p-action); }
.av__upload { justify-self: start; }
.av__upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.av__upload:focus-within { outline: 3px solid var(--p-action); outline-offset: 2px; }
.av__hint { font-size: var(--t-small); color: var(--muted); }
@media (max-width: 639px) {
  .auth { padding-block: var(--s-6); align-content: start; }
  .auth__card { padding: var(--s-5); }
  .auth__card fieldset { grid-template-columns: minmax(0, 1fr); }
  .av { flex-direction: column; }
}

/* desktop: a dark side panel with the logo, one line and one picture; the form keeps the light column */
.auth-side { display: none; }
@media (min-width: 1024px) {
  .auth-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100svh; }
  .auth-side { display: flex; flex-direction: column; gap: var(--s-6); position: sticky; top: 0; height: 100svh; overflow: hidden;
    padding: var(--s-7) var(--s-7) 0; background: #1b1e22; color: #eff0f1; }
  .auth-side .auth__logo { color: #eff0f1; margin: 0; align-self: flex-start; }
  .auth-side__lede { font: 400 clamp(22px, 2.1vw, 32px)/1.2 var(--font-display); letter-spacing: -0.03em; max-width: 26ch; text-wrap: balance; }
  .auth-side__art { flex: 1 1 0; min-height: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: var(--s-4); }
  .auth-side__art .mock { width: min(260px, 70%); }
  .auth-side__art--wide { align-items: center; padding-bottom: var(--s-8); }
  .auth-side__shot { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 24px 60px -30px rgb(0 0 0 / .8); }
  .auth-split > .auth .auth__logo { display: none; }
}
/* the drawn phone of the landing page */
.mock { display: block; container-type: inline-size; }
.mock__in { display: block; position: relative; isolation: isolate; padding: 3.4cqw; border-radius: 16.5cqw; background: #14161a;
  box-shadow: inset 0 0 0 0.55cqw #4a4e55, inset 0 0 0 1.1cqw #0b0c0e, 0 18px 40px -22px rgb(0 0 0 / .55); }
.mock__in::before { content: ""; position: absolute; z-index: 1; top: 6.1cqw; left: 50%; width: 29cqw; height: 8.4cqw; margin-left: -14.5cqw; border-radius: 999px; background: #000; }
.mock__in::after { content: ""; position: absolute; inset: 0 -0.9cqw; pointer-events: none; z-index: -1; border-radius: 0.5cqw;
  background: linear-gradient(#3a3d43, #3a3d43) left 0 top 21% / 0.9cqw 4.5% no-repeat, linear-gradient(#3a3d43, #3a3d43) left 0 top 31% / 0.9cqw 8.5% no-repeat,
    linear-gradient(#3a3d43, #3a3d43) left 0 top 42.5% / 0.9cqw 8.5% no-repeat, linear-gradient(#3a3d43, #3a3d43) right 0 top 35% / 0.9cqw 13% no-repeat; }
.shot--phone { display: block; width: 100%; height: auto; border-radius: 13.2cqw; background: #000; }
/* the page arrives quietly, once */
@media (prefers-reduced-motion: no-preference) {
  .auth > * { animation: auth-in .6s cubic-bezier(.22, 1, .36, 1) both; }
  .auth > :nth-child(2) { animation-delay: 70ms; } .auth > :nth-child(3) { animation-delay: 140ms; }
  .auth-side__art { animation: auth-in .8s cubic-bezier(.22, 1, .36, 1) .1s both; }
  @keyframes auth-in { from { opacity: 0; transform: translateY(12px); } }
}
/* one way to show the password: the browser's own eye (Edge) is hidden, the text button stays */
.pass input::-ms-reveal, .pass input::-ms-clear { display: none; }
/* on the dark side panel the phone gets a silver frame, so it stands out from the ground */
.auth-side .mock__in { background: #0b0c0e; box-shadow: inset 0 0 0 1cqw #b9bdc3, inset 0 0 0 1.4cqw #6f747b, 0 24px 60px -30px rgb(0 0 0 / .9); }
.auth-side .mock__in::after { background: linear-gradient(#b9bdc3, #b9bdc3) left 0 top 21% / 0.9cqw 4.5% no-repeat, linear-gradient(#b9bdc3, #b9bdc3) left 0 top 31% / 0.9cqw 8.5% no-repeat,
    linear-gradient(#b9bdc3, #b9bdc3) left 0 top 42.5% / 0.9cqw 8.5% no-repeat, linear-gradient(#b9bdc3, #b9bdc3) right 0 top 35% / 0.9cqw 13% no-repeat; }
/* a card that only says something (reset link sent) */
.auth__card--text { gap: var(--s-3); }
.auth__card--text .btn { margin-top: var(--s-4); }
.auth__strong { font: 500 var(--t-card, 18px)/1.3 var(--font-text); }
.auth__hint { font-size: var(--t-small); color: var(--muted); }
/* follow-up pages of the login: waiting for the app, the six boxes of a code, a new password */
.auth__card--center { text-align: center; justify-items: center; gap: var(--s-3); }
.auth__card--center form { width: 100%; }
.auth__mail { display: inline-block; padding: var(--s-2) var(--s-4); border-radius: 999px; background: var(--p-bg); border: 1px solid var(--line); font-weight: 500; overflow-wrap: anywhere; }
.auth__spinner { width: 36px; height: 36px; margin: var(--s-3) auto; border-radius: 999px; border: 3px solid color-mix(in oklab, var(--p-ink) 14%, transparent); border-top-color: var(--p-action); animation: auth-spin .9s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth__spinner { animation-duration: 3s; } }
.auth__or { width: 100%; display: flex; align-items: center; gap: var(--s-3); margin: var(--s-3) 0; font-size: var(--t-small); color: var(--muted); }
.auth__or::before, .auth__or::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line); }
.otp-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); width: 100%; max-width: 330px; margin-inline: auto; }
.otp-box { width: 100%; height: 56px; padding: 0; text-align: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 500 24px/1 var(--font-text); font-variant-numeric: tabular-nums; }
.otp-box:focus { outline: 3px solid var(--p-action); outline-offset: 1px; }
.otp-box.is-filled { border-color: var(--p-action); }
.auth__rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1, 4px); font-size: var(--t-small); color: var(--muted); }
.auth__rules li::before { content: "○"; display: inline-block; width: 1.4em; }
.auth__rules li.met { color: var(--ink); }
.auth__rules li.met::before { content: "✓"; color: var(--p-action); font-weight: 700; }
.notice--ok { border-color: var(--p-action); }
/* invitation pages: the club that invited, shown above the title */
.auth__club { display: grid; justify-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.auth__club img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; background: var(--p-surface); }
.auth__club strong { font: 500 var(--t-card, 18px)/1.3 var(--font-text); }
.auth__club span { font-size: var(--t-small); color: var(--muted); }
.auth__info { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--p-bg); border: 1px solid var(--line); overflow-wrap: anywhere; }
.auth__info a, .auth__card p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.btn--danger { background: color-mix(in oklab, #d92d20 72%, var(--ink)); color: #fff; }
.btn--danger:hover { background: color-mix(in oklab, #d92d20 60%, var(--ink)); }
.auth__foot a.auth__danger { color: color-mix(in oklab, #d92d20 72%, var(--ink)); }

/* the name beside the logo is set in a rounder face than the text, to go with the mark */
.auth__logo { font-family: "Outfit", var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; }