/* Shared by every page (menu, dashboard, kitchen, platform, sign-up, gift): it should feel like an app, not a web page.
   - no blue flash when something is tapped, no text selection or long-press menus on buttons and photos
   - one set of easing curves, and every popup opens and closes with the same motion
   - people who ask their phone for less motion get none */
:root {
  --ease: cubic-bezier(.22, .8, .3, 1);       /* things arriving: fast, then settling */
  --ease-in: cubic-bezier(.5, 0, .8, .4);     /* things leaving */
  --ease-soft: cubic-bezier(.4, 0, .2, 1);    /* colors and fades */
  --t-fast: .14s;
  --t: .26s;
  --t-slow: .38s;
}

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation; /* no double-tap zoom or 300ms wait */
}
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

/* Taps on the screen are not text: nothing gets selected by accident. Typing, codes and passwords stay selectable. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable], pre, code, samp, .selectable, .selectable * {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
img, svg, a, button { -webkit-touch-callout: none; }
img { -webkit-user-drag: none; user-drag: none; }

/* A focus ring only for the keyboard, never after a tap or a click. */
:focus:not(:focus-visible) { outline: none; }
button, a, summary, [role=button], label[for], select { cursor: pointer; }
button, [role=button] { font-family: inherit; }

/* The pressed state: a small, quick shrink. */
button, [role=button], .btn, .item, .up-card, summary {
  transition: transform var(--t-fast) var(--ease), background-color var(--t) var(--ease-soft), border-color var(--t) var(--ease-soft),
    color var(--t) var(--ease-soft), box-shadow var(--t) var(--ease-soft), opacity var(--t) var(--ease-soft);
}
button:not(:disabled):active, [role=button]:active, .btn:not(:disabled):active { transform: scale(.96); }
.item:active { transform: scale(.985); }
button:disabled { cursor: default; }

/* Popups: they rise and fade in, and sink and fade out (browsers that can't animate the closing just close). */
dialog {
  opacity: 0; transform: translateY(16px) scale(.98);
  transition: opacity var(--t) var(--ease-soft), transform var(--t-slow) var(--ease),
    overlay var(--t) allow-discrete, display var(--t) allow-discrete;
}
dialog[open] { opacity: 1; transform: none; }
/* While it fades out, a closing popup must not catch taps meant for the page. */
dialog:not([open]), dialog:not([open])::backdrop { pointer-events: none; }
@starting-style { dialog[open] { opacity: 0; transform: translateY(24px) scale(.98); } }
dialog::backdrop {
  background: rgba(0, 0, 0, 0);
  transition: background-color var(--t) var(--ease-soft), overlay var(--t) allow-discrete, display var(--t) allow-discrete;
}
dialog[open]::backdrop { background: rgba(0, 0, 0, .5); }
@starting-style { dialog[open]::backdrop { background: rgba(0, 0, 0, 0); } }

/* A screen that appears: a short fade, so tabs don't snap. */
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }
.view:not([hidden]) { animation: view-in var(--t) var(--ease) backwards; }

@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.92) translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* "Continue with Google": a plain link to our own server; no Google script is loaded. */
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 14px; border: 1px solid #dadce0; border-radius: 12px; background: #fff; color: #3c4043; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.google-btn:hover { background: #f8f9fa; }
.google-btn[hidden] { display: none; }
.or-line { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted, #777); font-size: .85rem; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--line, #ddd); }
.or-line[hidden] { display: none; }

/* "Menu by Savorily": a small signature at the foot of a guest menu. It takes the page's own text colour. */
.sv-sign { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px auto 0; padding: 6px; color: inherit; opacity: .6; font: 500 .72rem/1 system-ui, sans-serif; text-decoration: none; }
.sv-sign:hover { opacity: .9; }
.sv-sign i { display: block; width: 62px; height: 18px; background: currentColor; -webkit-mask: url('/brand/savorily-wordmark-mono-ink.svg') center / contain no-repeat; mask: url('/brand/savorily-wordmark-mono-ink.svg') center / contain no-repeat; }
.sv-sign[hidden] { display: none; }