/* The "Loading…" every web app shows while it waits (admin, kitchen, waiter, manage): a cup that fills with coffee
   under rising steam, in the page's own colours, so a cafe's palette and its dark theme carry through. It is CSS only:
   any <p class="loading">Loading…</p> becomes it, the HTML's first one as much as the ones the scripts draw.
   The cup is ::after and the steam ::before, both pulled above the text with `order`.
   Colours: --loader-ink (the cup, the page's ink) and --loader-steam; each page's stylesheet may set them. */
.loading {
  --ink: var(--loader-ink, var(--choc, #47210c));
  --steam: var(--loader-steam, color-mix(in srgb, var(--ink) 70%, transparent));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  margin: 0; padding: 48px 16px; min-height: min(60vh, 420px);
  color: var(--muted, #7b5a44); font-weight: 500; letter-spacing: .04em; text-align: center;
  animation: loading-in .25s ease-out .15s both; /* a quick answer never flashes the cup */
}
/* As a whole page (before anything is drawn), in the middle of the screen. */
#app > .loading { min-height: 100%; min-height: 100dvh; }
body > main > .loading:only-child { min-height: calc(100dvh - 140px); } /* the manager page, under its top bar */
/* Inside a page (a report tab, the manual), smaller. */
.loading.small { min-height: 0; padding: 28px 0; gap: 8px; font-size: .92rem; }
.loading.small::after { width: 48px; height: 44px; }
.loading.small::before { width: 26px; height: 17px; margin-bottom: -12px; margin-right: 5px; }

/* The cup: its shape is a mask; a two-tone background, slid upwards, is the coffee rising inside it. */
.loading::after {
  content: ""; order: -1; width: 84px; height: 76px;
  background: linear-gradient(to top, var(--ink) 50%, color-mix(in srgb, var(--ink) 18%, transparent) 50%) 0 0 / 100% 200%;
  -webkit-mask: var(--loader-cup) center / contain no-repeat; mask: var(--loader-cup) center / contain no-repeat;
  --loader-cup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='12 20 40 36'%3E%3Cpath d='M17 26h26v9a13 13 0 0 1-26 0z'/%3E%3Cpath d='M43 29h3a5 5 0 0 1 0 10h-4' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3Crect x='14' y='50' width='32' height='3.5' rx='1.75'/%3E%3C/svg%3E");
  animation: loading-fill 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
/* The steam: three wisps; a soft band slides up through them. */
.loading::before {
  content: ""; order: -2; width: 46px; height: 30px; margin-bottom: -22px; margin-right: 9px;
  background: linear-gradient(to top, transparent 20%, var(--steam) 45%, var(--steam) 55%, transparent 80%) 0 0 / 100% 250%;
  -webkit-mask: var(--loader-wisps) center / contain no-repeat; mask: var(--loader-wisps) center / contain no-repeat;
  --loader-wisps: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 10 22 14'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M23 22c-2-3 2-5 0-8'/%3E%3Cpath d='M31 22c-2-3 2-5 0-8'/%3E%3Cpath d='M39 22c-2-3 2-5 0-8'/%3E%3C/g%3E%3C/svg%3E");
  animation: loading-steam 1.8s linear infinite;
}
@keyframes loading-fill {
  0% { background-position: 0 0; }
  65%, 85% { background-position: 0 100%; }
  100% { background-position: 0 0; }
}
@keyframes loading-steam { from { background-position: 0 0; } to { background-position: 0 100%; } }
@keyframes loading-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .loading, .loading::before { animation: none; }
  .loading::after { animation: none; background-position: 0 100%; }
}

/* What a page shows instead when it can't load (no connection, unknown cafe): the same place, without the cup. */
.page-message { margin: 0; padding: 48px 16px; text-align: center; color: var(--muted, #7b5a44); }