/* Guest app: a sign-in screen, then three tabs. The page itself never
   scrolls; a tab's panel scrolls inside the frame when it has to.
   Black and white: wide light capitals for what's said, hairlines for
   structure, white paper for what you hold. */

html:has(body.guest),
body.guest {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body.guest {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
.root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Small capitals, widely spaced: labels, times, codes. */
.caps,
.status__sub,
.event__when,
.tickets__title,
.ghost__no,
.plate__legend,
.drink__unit,
.notice__line,
.ticket__state {
  font-family: var(--f-text);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 0.7rem;
  line-height: 1.35;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* The logo                                                            */

/* The logo in its own colours, on its own cream, its empty margin trimmed. */
.logo-tile {
  display: block;
  flex: none;
  width: 44px;
  padding: 4px;
  background: var(--logo-cream);
  border-radius: var(--r);
}
.logo-tile img {
  display: block;
  width: 100%;
  height: auto;
}

/* The show on the sign-in screen: the logo in pieces (cut by
   scripts/cut-logo.mjs) that the cart assembles as it arrives. The cart rolls
   in, the parasol goes up and opens, the bottles and the straws pop up and the
   name is written on. The last frame is the logo itself. */
.show {
  margin: 0;
  font-size: inherit;
  line-height: 0;
}
/* The logo's own cream. The cart rolls in from its left edge. */
.show__panel {
  display: block;
  padding: clamp(14px, 4.6vw, 22px);
  background: var(--logo-cream);
  border-radius: var(--r);
  overflow: hidden;
}
.show__stage {
  position: relative;
  display: block;
  width: min(58vw, 232px);
  aspect-ratio: 678 / 868;
}
.show__cart,
.show__rise,
.show__parasol {
  position: absolute;
  inset: 0;
}
/* Everything that pops up stays above the counter's top edge. */
.show__rise {
  clip-path: inset(0 0 52.189% 0);
}
.la {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}
/* Where each piece sits in the logo (from scripts/cut-logo.mjs). */
.la--ground { left: 7.670%; top: 94.355%; width: 75.516%; }
.la--cart { left: 4.720%; top: 47.350%; width: 87.906%; }
.la--pole { left: 55.015%; top: 25.576%; width: 2.802%; }
.la--canopy { left: 18.289%; top: 3.802%; width: 76.844%; }
.la--bottle1 { left: 12.389%; top: 30.530%; width: 7.817%; }
.la--bottle2 { left: 19.617%; top: 31.797%; width: 6.785%; }
.la--bottle3 { left: 26.844%; top: 33.871%; width: 6.490%; }
.la--cup { left: 63.127%; top: 37.558%; width: 8.260%; }
.la--the { left: 31.711%; top: 54.147%; width: 28.319%; }
.la--jumpers { left: 11.652%; top: 63.479%; width: 65.487%; }

.show__cart {
  animation: show-roll 1100ms var(--ease-out) 150ms both;
}
.show__parasol {
  animation: show-rise 420ms var(--ease-out) 950ms both;
}
.show .la--canopy {
  transform-origin: 49.7% 0;
  animation: show-open 520ms var(--ease-out) 1270ms both;
}
.show .la--bottle1 {
  animation: show-pop 380ms var(--ease-out) 1520ms both;
}
.show .la--bottle2 {
  animation: show-pop 380ms var(--ease-out) 1590ms both;
}
.show .la--bottle3 {
  animation: show-pop 380ms var(--ease-out) 1660ms both;
}
.show .la--cup {
  animation: show-pop 380ms var(--ease-out) 1750ms both;
}
.show .la--the,
.show .la--jumpers {
  -webkit-mask-image: linear-gradient(90deg, #000 0 42%, transparent 58%);
  mask-image: linear-gradient(90deg, #000 0 42%, transparent 58%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: paint-on 620ms var(--ease-out) 1930ms both;
}
.show .la--jumpers {
  animation-duration: 820ms;
  animation-delay: 2130ms;
}
/* The script starts the show once every piece has loaded. */
.show:not(.is-go) :is(.show__cart, .show__parasol, .la) {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .show :is(.show__cart, .show__parasol, .la) {
    animation: none;
  }
}

@keyframes show-roll {
  0% {
    transform: translateX(-118%);
  }
  78% {
    transform: translateX(1.2%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes show-rise {
  0% {
    transform: translateY(44%);
  }
  72% {
    transform: translateY(-0.8%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes show-open {
  0% {
    transform: scale(0.1, 1.28);
  }
  58% {
    transform: scale(1.05, 0.96);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes show-pop {
  0% {
    transform: translateY(100%);
  }
  62% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------------ */
/* Sign-in                                                             */

.login {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
}
.login__inner {
  margin: auto;
  width: min(100%, 340px);
  display: grid;
  justify-items: center;
  gap: 30px;
}
@media (max-height: 740px) {
  .login .show__stage {
    width: min(44vw, 170px);
  }
  .login__inner {
    gap: 20px;
  }
}
.login__form {
  width: 100%;
  display: grid;
  gap: 12px;
}
.login__pin {
  display: grid;
  gap: 12px;
}
/* Fields sit straight on the black: a hairline box, white type. */
.login .input {
  min-height: 52px;
  background: transparent;
  border-color: rgba(244, 244, 241, 0.3);
  color: var(--fg);
  caret-color: var(--fg);
}
.login .input::placeholder {
  color: var(--muted-2);
  font-stretch: 112%;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.login .input:focus-visible {
  border-color: var(--fg);
  outline: 1px solid var(--fg);
  outline-offset: 0;
}
.login .input[aria-invalid='true'] {
  border-color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--fg);
}
.login .error {
  padding: 11px 13px;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r);
}
.login .sign {
  margin-top: 8px;
}

/* ------------------------------------------------------------------ */
/* App shell: top bar, panels, tray, tabs                              */

.app {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: 'bar' 'main' 'tray' 'tabs';
}

.appbar {
  grid-area: bar;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.appbar__status {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.status {
  display: grid;
  gap: 5px;
  min-width: 0;
  transition:
    opacity var(--t-fast) var(--ease-out),
    visibility var(--t-fast);
}
/* On a phone's Event tab the board says the same thing, larger, right below. */
@media (max-width: 959px) {
  .app[data-current='event'] .status {
    opacity: 0;
    visibility: hidden;
  }
}
.status__main {
  font-family: var(--f-display);
  font-weight: 300;
  font-stretch: 125%;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}
.status__sub {
  color: var(--muted-2);
}
.balance {
  flex: none;
  padding: 10px 13px;
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font-weight: 650;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
}
.balance:active {
  transform: scale(0.97);
}

.tabs {
  grid-area: tabs;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.tab {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  min-height: 62px;
  color: var(--muted-2);
  text-decoration: none;
  font-weight: 600;
  font-stretch: 112%;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: color var(--t-fast);
}
.tab .i {
  width: 22px;
  height: 22px;
  transition: transform 140ms var(--ease-out);
}
.tab:active .i {
  transform: scale(0.9);
}
.tab[aria-selected='true'] {
  color: var(--fg);
}
.tab[aria-selected='true']::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: 28px;
  height: 2px;
  background: var(--fg);
  transform: translateX(-50%);
}
/* Counts: outlined; something ready to collect: solid white. */
.tab .badge {
  position: absolute;
  top: 8px;
  left: calc(50% + 8px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--fg);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 0.6875rem;
  line-height: 18px;
  letter-spacing: 0;
  text-align: center;
}
.tab .badge.is-alert {
  background: var(--fg);
  color: var(--bg);
}

.panels {
  grid-area: main;
  position: relative;
  min-height: 0;
}
.panel {
  display: none;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.panel.is-active {
  display: block;
}
/* Without the script, the tab links jump to their panel instead. */
html:not(.js) .panels:has(.panel:target) .panel {
  display: none;
}
html:not(.js) .panels .panel:target {
  display: block;
}
.panel:focus {
  outline: none;
}
.panel.is-entering {
  animation: panel-in 220ms var(--ease-out);
}
.panel__inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 32px;
  display: grid;
  gap: 22px;
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateX(var(--from, 14px));
  }
}

@media (min-width: 960px) {
  .app {
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: 'bar main' 'tabs main' 'tabs tray';
  }
  .appbar {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    padding: 44px 32px 18px;
    border-bottom: 0;
  }
  .appbar__sign {
    align-self: center;
  }
  .appbar__sign .logo-tile {
    width: 170px;
    padding: 14px;
  }
  .appbar__status {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .status__main {
    font-size: 1.5rem;
    line-height: 1.15;
    white-space: normal;
  }
  .tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 32px 32px;
    border-top: 0;
  }
  .tab {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    min-height: 54px;
    padding: 0 2px 0 14px;
    border-bottom: 1px solid var(--line);
    font-size: 0.72rem;
  }
  .tab:first-child {
    border-top: 1px solid var(--line);
  }
  .tab[aria-selected='true']::before {
    top: 50%;
    left: 0;
    width: 2px;
    height: 20px;
    transform: translateY(-50%);
  }
  .tab .badge {
    position: static;
    margin-left: auto;
  }
  .panels {
    border-left: 1px solid var(--line);
  }
  .panel__inner {
    padding: 44px 44px 60px;
    gap: 26px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .tab:hover {
    color: var(--fg);
  }
}

/* ------------------------------------------------------------------ */
/* Event                                                               */

.event {
  padding: 36px 48px 32px 28px;
}
.event__code {
  position: absolute;
  bottom: 30px;
  right: 1px;
  padding: 10px 6px;
  writing-mode: vertical-rl;
  background: var(--surface);
}
.event__day {
  margin-top: 2px;
}
.event__when {
  margin-top: 16px;
  color: var(--fg);
}
.event__title {
  margin-top: 6px;
  color: var(--muted);
}
.event__actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
}
.event__more {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The venue, set between two hairlines. */
.venue {
  position: relative;
  margin-top: 24px;
  padding: 20px 0 22px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.venue__name {
  font-family: var(--f-display);
  font-weight: 300;
  font-stretch: 125%;
  font-size: clamp(1.55rem, 6.6vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.venue__address {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--muted);
  white-space: pre-line;
}
.venue__note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--fg);
  white-space: pre-line;
}
.venue--covered {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 26px 0 24px;
}

/* A white card over the spot until the reveal. */
.notice {
  width: 100%;
  max-width: 420px;
  padding: 24px 20px 22px;
  text-align: center;
}
.notice__line {
  color: var(--ink-2);
}
.notice__count {
  margin-top: 10px;
  min-height: 1em;
  font-weight: 300;
  font-stretch: 125%;
  font-size: clamp(1.9rem, 9vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.notice__count.is-soon {
  font-weight: 500;
}
.notice__sub {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--ink-2);
}
.notice__ps {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--ink);
}
.notice.is-peeling {
  position: absolute;
  inset: 26px 0 auto;
  width: auto;
  margin: 0 auto;
  z-index: 3;
  animation: peel 600ms var(--ease-in-out) forwards;
  pointer-events: none;
}

.venue.is-painting .venue__name,
.venue.is-painting .venue__address,
.venue.is-painting .venue__note {
  -webkit-mask-image: linear-gradient(90deg, #000 0 42%, transparent 58%);
  mask-image: linear-gradient(90deg, #000 0 42%, transparent 58%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: paint-on 1100ms var(--ease-out) both;
  animation-delay: var(--paint-delay, 0ms);
}
.venue.is-painting .venue__name {
  --paint-delay: var(--paint-start, 0ms);
}
.venue.is-painting .venue__address {
  --paint-delay: calc(var(--paint-start, 0ms) + 420ms);
}
.venue.is-painting .venue__note {
  --paint-delay: calc(var(--paint-start, 0ms) + 640ms);
}
@keyframes paint-on {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
/* The card lifts away before the venue is written in. */
@keyframes peel {
  to {
    opacity: 0;
    transform: translateY(-14px);
  }
}

/* Past events, quiet and grey. */
.ghosts {
  padding: 10px 2px 0;
}
.ghosts__title {
  font-family: var(--f-text);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ghosts__list {
  list-style: none;
  padding: 0;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}
.ghost {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.ghost__no {
  color: var(--muted-2);
}
.ghost__name {
  font-family: var(--f-display);
  font-weight: 300;
  font-stretch: 125%;
  font-size: clamp(1.05rem, 4.2vw, 1.35rem);
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-2);
  overflow-wrap: break-word;
}
.contacts {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ------------------------------------------------------------------ */
/* Drinks                                                              */

.menu__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
/* Drinks only get buttons while the bar is open; this is the status that says so. */
.menu__status {
  padding: 7px 10px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--muted);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.menu__empty {
  margin-top: 16px;
  color: var(--muted);
}
.menu__list {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}
.drink {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: center;
  padding: 18px 0;
}
.drink + .drink {
  border-top: 1px solid var(--line);
}
.drink__art {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  transition: box-shadow var(--t) var(--ease-out);
}
.drink__art .glass {
  width: 38px;
  height: 48px;
}
.drink__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.drink.is-picked .drink__art {
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 4px var(--fg);
}
.drink__name {
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--fg);
}
.drink__desc {
  margin-top: 4px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
}
.drink__price {
  display: grid;
  justify-items: end;
  line-height: 1;
}
.drink__num {
  font-weight: 300;
  font-stretch: 125%;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--fg);
  white-space: nowrap;
}
.drink__unit {
  margin-top: 6px;
  font-size: 0.6875rem;
  text-transform: none;
  letter-spacing: 0.14em;
  color: var(--muted-2);
}
.drink__control {
  grid-column: 2 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.drink__add {
  color: var(--fg);
}
.drink.is-soldout .drink__art {
  opacity: 0.35;
}
.drink.is-soldout .drink__name {
  color: var(--muted-2);
}
.drink.is-soldout .drink__desc {
  color: var(--muted-2);
}
.drink.is-soldout .drink__price {
  display: none;
}
.soldout {
  grid-row: 1;
  grid-column: -2 / -1;
  justify-self: end;
  padding: 7px 10px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--muted);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.stepper__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  transition:
    transform var(--t-fast) var(--ease-out),
    background var(--t-fast);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.stepper__btn:active {
  transform: scale(0.92);
}
.stepper__btn[disabled] {
  opacity: 0.35;
}
.stepper__qty {
  min-width: 2ch;
  text-align: center;
  font-weight: 500;
  font-size: 1.15rem;
}
@media (hover: hover) and (pointer: fine) {
  .stepper__btn:hover {
    background: #fff;
  }
}

@media (min-width: 620px) {
  .drink {
    grid-template-columns: 70px minmax(0, 1fr) auto auto;
    column-gap: 20px;
  }
  .drink__art {
    width: 70px;
    height: 70px;
  }
  .drink__art .glass {
    width: 46px;
    height: 58px;
  }
  .drink__control {
    grid-column: auto;
    grid-row: 1;
    grid-column-start: 3;
    margin-top: 0;
    min-width: 132px;
  }
  .drink__price {
    grid-column-start: 4;
    grid-row: 1;
    min-width: 78px;
  }
}

/* The order tray sits between the panel and the tabs. */
.tray {
  grid-area: tray;
  position: relative;
  z-index: 2;
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line-strong);
  animation: tray-in 320ms var(--ease-out);
}
.tray:empty {
  display: none;
}
.tray__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}
.tray__total {
  font-weight: 500;
  font-size: 1rem;
}
.tray__total b {
  color: var(--fg);
  font-weight: 700;
}
.tray__after {
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--muted-2);
}
.tray__after.is-short {
  color: var(--fg);
  font-weight: 650;
}
.tray .sign__face {
  min-height: 50px;
}
@keyframes tray-in {
  from {
    transform: translateY(100%);
  }
}
@media (min-width: 960px) {
  .tray {
    padding: 14px 44px;
  }
}

/* ------------------------------------------------------------------ */
/* Account                                                             */

.account {
  display: grid;
  gap: 20px;
}

/* A black card: account number, name and balance. */
.plate {
  position: relative;
  max-width: 460px;
  padding: 24px 24px 22px;
  background: var(--surface);
  color: var(--fg);
  border-radius: var(--r);
  box-shadow:
    inset 0 0 0 1px var(--line-strong),
    var(--lift);
}
.plate__no {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.plate__legend {
  color: var(--muted-2);
}
.plate__num {
  font-weight: 300;
  font-stretch: 125%;
  font-size: clamp(1.9rem, 8.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.12em;
}
.plate__name {
  margin-top: 8px;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.plate__bal {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.plate__balnum {
  font-weight: 300;
  font-stretch: 125%;
  font-size: clamp(2.2rem, 10vw, 3rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
}
.plate__unit {
  font-weight: 600;
  font-stretch: 112%;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.tickets {
  max-width: 620px;
}
.tickets__title {
  color: var(--muted-2);
}
.tickets__list {
  list-style: none;
  padding: 0;
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
/* A white ticket stub, notched at the sides. */
.ticket {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 8px;
  align-items: center;
  padding: 16px 20px 16px 22px;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
  border-radius: var(--r);
  -webkit-mask:
    radial-gradient(circle 8px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 8px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}
.ticket__no {
  grid-row: 1 / span 2;
  min-width: 1.6ch;
  font-weight: 300;
  font-stretch: 125%;
  font-size: 2.1rem;
  line-height: 1;
  text-align: center;
}
.ticket__items {
  font-weight: 560;
  line-height: 1.35;
}
.ticket__meta {
  font-size: 0.85rem;
  color: var(--ink-2);
}
.ticket__state {
  grid-column: 1 / -1;
  justify-self: start;
  color: var(--ink-2);
}
/* Ready: the one black label on the white ticket. */
.ticket__state.is-ready {
  padding: 8px 11px 7px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r);
  animation: flag-in 420ms var(--ease-out) both;
}
.ticket--done,
.ticket--cancelled {
  background: var(--paper-lo);
}
.ticket--cancelled .ticket__items {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.ticket__cancel {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: 0.9rem;
}
.ticket__confirm {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-weight: 560;
}
@keyframes flag-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.account__more {
  max-width: 620px;
  border-top: 1px solid var(--line);
}
.account__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-stretch: 112%;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
  -webkit-user-select: none;
  user-select: none;
}
.account__more summary::-webkit-details-marker {
  display: none;
}
.account__more summary .i {
  transition: transform var(--t) var(--ease-out);
}
.account__more[open] summary .i {
  transform: rotate(180deg);
}
.account__morebody {
  padding-bottom: 4px;
}
.history {
  list-style: none;
  padding: 0;
}
.history li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.history small {
  display: block;
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 0.8rem;
}
.history b {
  font-weight: 600;
}
.prefs {
  margin-top: 20px;
  padding: 20px;
  display: grid;
  gap: 16px;
  justify-items: start;
}
.prefs .field {
  width: 100%;
}
.account__out {
  max-width: 620px;
  padding-top: 6px;
}

/* ------------------------------------------------------------------ */
/* Connection notice                                                   */

.offline {
  position: fixed;
  z-index: 55;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  padding: 9px 14px;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: var(--lift);
  transform: translateX(-50%);
}
/* The script measures the tab bar and tray and keeps toasts just above them. */
body.guest .toasts {
  bottom: var(--chrome-bottom, calc(16px + env(safe-area-inset-bottom)));
}