/* Hallmark · shape: app screen · genre: editorial · theme: custom (the host's brunch card, by request)
 * paper: oklch(95.4% 0.012 82) · accent: oklch(42% 0.036 132) · display: Great Vibes (wordmark only) · body: EB Garamond
 * nav: a top bar with the wordmark · signature: the card itself, every drink a tap away · states: loading, empty, error, full
 * axes: cream/script/sage · posture: menu card · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, the card's tracked-caps pills are kept as pills but set in sentence case per the Floor */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url("/fonts/great-vibes-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

body { font-size: 1.125rem; line-height: 1.45; }

/* --- The card ---------------------------------------------------------- */
.card {
  max-width: var(--measure-app);
  margin: var(--space-md) auto var(--space-2xl);
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 28px;
  background: var(--color-paper);
  position: relative;
}
@media (max-width: 36rem) { .card { margin-inline: var(--space-sm); padding-inline: var(--space-md); } }

.mast { text-align: center; padding-block: var(--space-sm) var(--space-md); }
.mast__word { font-family: var(--font-outlier); font-weight: 400; font-size: clamp(3.6rem, 16vw, 5rem); line-height: 1; color: var(--color-ink-2); letter-spacing: 0; }
.mast__sub { margin-top: var(--space-xs); font-size: var(--text-lg); color: var(--color-ink); }
.heart { width: 18px; height: 18px; margin: var(--space-xs) auto 0; color: var(--color-ink-2); }

/* Section rule with a pill, like the card */
.rule { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-sm); margin: var(--space-xl) 0 var(--space-md); }
.rule::before, .rule::after { content: ""; height: var(--rule-hair); background: var(--color-rule); }
.rule > * { font-family: var(--font-body); font-size: var(--text-md); font-weight: 500; color: var(--color-ink); background: var(--color-paper-3); border-radius: var(--radius-pill); padding: var(--space-2xs) var(--space-md); margin: 0; }

/* --- Name ------------------------------------------------------------- */
.field { display: grid; gap: var(--space-2xs); }
.field label { font-size: var(--text-md); color: var(--color-muted); }
.input {
  min-height: 48px; width: 100%;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule); border-radius: 12px;
  background: var(--color-paper-2); color: var(--color-ink);
  font-size: var(--text-lg);
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.input::placeholder { color: var(--color-muted); }
.input:hover { border-color: var(--color-ink-2); }
.input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; background: var(--color-paper); }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.input:disabled { opacity: 0.55; cursor: not-allowed; }

/* --- Menu groups ------------------------------------------------------ */
.group { --art: 96px; display: grid; grid-template-columns: minmax(0, 1fr) var(--art); gap: var(--space-sm); align-items: start; }
.group__art { width: var(--art); mix-blend-mode: multiply; margin-top: var(--space-xs); -webkit-mask-image: radial-gradient(closest-side, var(--color-ink) 72%, transparent); mask-image: radial-gradient(closest-side, var(--color-ink) 72%, transparent); }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }

.item {
  display: block; width: 100%; text-align: left;
  padding: var(--space-xs) var(--space-sm); margin-inline: calc(var(--space-sm) * -1);
  min-height: 48px;
  border: 0; border-radius: 12px; background: transparent; color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.item__name { display: block; font-size: 1.45rem; line-height: 1.2; }
.item__hint { display: block; font-style: italic; font-size: var(--text-md); color: var(--color-muted); }
.item:hover { background: var(--color-paper-2); }
.item:active { background: var(--color-paper-3); }
.item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; transition: none; }
.item[aria-expanded="true"] { background: var(--color-paper-3); }
.item:disabled { cursor: not-allowed; color: var(--color-muted); background: transparent; }
.item:disabled .item__name { text-decoration: line-through; text-decoration-thickness: 1px; }
.item__out { font-style: italic; font-size: var(--text-md); }

/* The inline order form under the chosen drink */
.pick-li { list-style: none; margin-right: calc(-1 * (var(--art) + var(--space-sm))); position: relative; z-index: var(--z-raised); }
.pick {
  margin: var(--space-xs) 0 var(--space-sm);
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card);
  background: var(--color-paper-2);
  display: grid; gap: var(--space-md);
}
.pick__label { font-size: var(--text-md); color: var(--color-muted); margin-bottom: var(--space-2xs); }

.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); padding: var(--space-2xs); background: var(--color-paper); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { display: grid; place-items: center; min-height: 42px; border-radius: var(--radius-pill); cursor: pointer; font-size: var(--text-md); color: var(--color-ink); transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.seg label:hover { background: var(--color-paper-2); }
.seg input:checked + label { background: var(--color-accent); color: var(--color-accent-ink); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 1px; transition: none; }
.seg input:disabled + label { color: var(--color-muted); text-decoration: line-through; cursor: not-allowed; background: transparent; }

/* --- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: var(--space-xs) var(--space-lg);
  border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-size: var(--text-lg); font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}
.btn:hover { background: color-mix(in oklab, var(--color-accent) 86%, var(--color-ink)); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }
.btn:disabled { background: var(--color-paper-3); border-color: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: transparent; color: var(--color-ink-2); border-color: var(--color-rule); }
.btn--quiet:hover { background: var(--color-paper-2); }
.btn--small { min-height: 40px; padding: var(--space-2xs) var(--space-md); font-size: var(--text-md); }
.btn--block { width: 100%; }
.link { background: none; border: 0; padding: var(--space-xs) 0; color: var(--color-muted); font-size: var(--text-md); text-decoration: underline; text-underline-offset: 0.16em; cursor: pointer; min-height: 44px; }
.link:hover { color: var(--color-ink); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* --- Messages -------------------------------------------------------- */
.msg { font-size: var(--text-md); color: var(--color-muted); }
.msg--error { color: var(--color-error); }
.note-quiet { text-align: center; font-style: italic; color: var(--color-muted); font-size: var(--text-md); }

/* --- My orders (guest) ------------------------------------------------ */
.mine { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.mine li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: baseline; padding: var(--space-sm) var(--space-md); border-radius: 12px; background: var(--color-paper-2); }
.mine__what { font-size: var(--text-lg); line-height: 1.25; }
.mine__extra { display: block; font-size: var(--text-md); color: var(--color-muted); }
.state { font-size: var(--text-md); white-space: nowrap; color: var(--color-muted); }
.state--in_arbeit { color: var(--color-ink-2); font-style: italic; }
.mine li[data-status="fertig"], .mine li[data-status="abgeholt"] { background: var(--color-paper-3); }
.mine li[data-status="fertig"] .state, .mine li[data-status="abgeholt"] .state { color: var(--color-ink-2); }

.sprig { display: none; }
.foot { text-align: center; margin-top: var(--space-2xl); font-family: var(--font-outlier); font-size: 1.9rem; color: var(--color-ink-2); line-height: 1.1; }

/* --- Admin: the same card as the guest page ------------------------- */
.card--bar { max-width: var(--measure-app); }
.card--bar .mast { position: relative; }
.bar__logout { position: absolute; top: 0; right: 0; }
.admin { display: grid; gap: var(--space-md); }
.admin__side { display: grid; gap: var(--space-md); align-content: start; }
.panel { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md); display: grid; gap: var(--space-sm); background: var(--color-paper-2); margin-top: var(--space-lg); }
.panel h2 { font-size: var(--text-xl); font-weight: 500; }
.panel p { color: var(--color-muted); font-size: var(--text-md); }
.row { display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: center; }

.tally { display: flex; justify-content: center; gap: var(--space-xl); text-align: center; font-size: var(--text-md); font-style: italic; color: var(--color-muted); }
.tally b { display: block; font-size: var(--text-3xl); font-weight: 400; font-style: normal; color: var(--color-ink-2); font-variant-numeric: tabular-nums; line-height: 1.1; }

/* Tickets read like lines on the menu: no boxes, hairlines between */
.queue { list-style: none; margin: 0; padding: 0; display: grid; }
.ticket {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: var(--space-2xs) var(--space-md);
  padding: var(--space-md) var(--space-sm); margin-inline: calc(var(--space-sm) * -1);
  border-radius: 12px; border-bottom: var(--rule-hair) solid var(--color-paper-3);
}
.ticket:last-child { border-bottom-color: transparent; }
.ticket[data-status="fertig"] { opacity: 0.55; }
.ticket__what { font-size: 1.6rem; line-height: 1.15; order: -1; }
.ticket__who { font-size: var(--text-lg); font-style: italic; color: var(--color-ink-2); }
.ticket__extra { font-size: var(--text-md); color: var(--color-ink); }
.ticket__note { font-style: italic; font-size: var(--text-md); color: var(--color-muted); order: 1; }
.ticket__extra { order: 2; }
.ticket > div:first-child { display: flex; flex-direction: column; grid-column: 1; grid-row: 1 / 3; }
.ticket__side { grid-column: 2; grid-row: 1; text-align: right; display: grid; gap: var(--space-2xs); align-content: start; justify-items: end; }
.ticket__time { font-size: var(--text-sm); font-style: italic; color: var(--color-muted); font-variant-numeric: tabular-nums; }
/* Fertig und Löschen rechts, unten bündig mit der letzten Zeile (der Milch) */
.ticket__actions { grid-column: 2; grid-row: 2; align-self: end; display: flex; gap: var(--space-xs); align-items: center; justify-content: flex-end; flex-direction: row-reverse; }

.skeleton { list-style: none; height: 96px; margin-block: var(--space-2xs); border-radius: 12px; background: var(--color-paper-2); animation: pulse 1.4s var(--ease-in-out) infinite alternate; }
@keyframes pulse { from { opacity: 0.55; } to { opacity: 1; } }

.empty { display: grid; justify-items: center; gap: var(--space-xs); padding-block: var(--space-md); text-align: center; font-style: italic; color: var(--color-muted); }
.empty img { width: 150px; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(closest-side, var(--color-ink) 72%, transparent); mask-image: radial-gradient(closest-side, var(--color-ink) 72%, transparent); }

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0 var(--space-md); }
.check { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-size: var(--text-md); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--color-accent); }
.check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

details > summary { cursor: pointer; font-size: var(--text-lg); min-height: 44px; display: flex; align-items: center; }
details > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* „Was ist aus?“: zu ist nur die Pille zu sehen, antippen klappt die Liste auf */
.fold > summary { list-style: none; display: grid; min-height: 44px; margin-bottom: 0; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary > span { transition: background-color var(--dur-micro) var(--ease-out); }
.fold > summary:hover > span { background: color-mix(in oklab, var(--color-paper-3) 80%, var(--color-ink-2)); }
.fold[open] > summary > span { background: var(--color-accent); color: var(--color-accent-ink); }
.fold[open] > summary { margin-bottom: var(--space-sm); }

.admin__foot { display: grid; gap: var(--space-xs); justify-items: center; text-align: center; }
.admin__foot .foot { margin-top: var(--space-xl); }
.admin__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2xs) var(--space-lg); }
.admin__foot .msg:empty { display: none; }
.admin__foot details > summary { font-size: var(--text-md); color: var(--color-muted); justify-content: center; }
.admin__foot details[open] { flex-basis: 100%; }
.admin__foot details .row { justify-content: center; }
.login { max-width: 24rem; margin: 12vh auto 0; padding: var(--space-lg); display: grid; gap: var(--space-md); text-align: center; }

/* --- Aushang (print) ----------------------------------------------- */
.poster { max-width: 30rem; margin: var(--space-xl) auto; padding: var(--space-xl) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: 28px; text-align: center; display: grid; gap: var(--space-md); justify-items: center; }
.poster__qr { width: min(100%, 18rem); aspect-ratio: 1; padding: var(--space-sm); background: var(--color-paper); }
.poster__qr svg { width: 100%; height: auto; }
.poster__url { font-size: var(--text-lg); color: var(--color-ink-2); }
.poster__lead { font-size: var(--text-xl); }
@media print { .noprint { display: none; } .poster { margin-top: 0; } }

/* --- Phone and iPad ------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; touch-action: pan-x pan-y; }
button, a, label, input, summary { touch-action: manipulation; }
body { -webkit-tap-highlight-color: transparent; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
@media (hover: none) { .item:hover { background: transparent; } .item[aria-expanded="true"] { background: var(--color-paper-3); } }
/* iPad and up: a wider card, bigger drawings, the bar's queue in two columns */
@media (min-width: 48rem) {
  :root { --measure-app: 42rem; }
  .card { margin-top: var(--space-xl); padding: var(--space-xl) var(--space-2xl) var(--space-2xl); }
  .group { --art: 150px; gap: var(--space-sm); }
  .item__name { font-size: 1.6rem; }
  .sprig { width: 120px; }
}
@media (min-width: 60rem) {
  .card--bar { max-width: 60rem; }
  .admin { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-2xl); align-items: start; }
}
}