/* The public menu (ADR-0007): one static sheet, cached apart from the pages. Mobile first; a guest reads it at a table. */
:root {
  --paper: #fbf8f3;
  --ink: #1f1b16;
  --muted: #6b6258;
  --line: #e7e0d6;
  --accent: #9a3b1f;
  --out: #a39a8f;
  --badge: #efe7dc;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

/* The page's head says which look the phone reads it in: as the phone is set, or as the guest picked. */
:root[data-look="dark"] {
  --paper: #16130f;
  --ink: #f1ebe3;
  --muted: #b1a79b;
  --line: #2e2923;
  --accent: #f08a62;
  --out: #6f675e;
  --badge: #2a241e;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.45;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

h1 { font-size: 1.9rem; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; color: var(--accent); }

.place .tagline { margin: 0.6rem 0 0; }

ul { list-style: none; margin: 0; padding: 0; }

.line { padding: 0.65rem 0; border-bottom: 1px solid var(--line); display: flow-root; }
.line .photo { float: left; width: 4.5rem; height: 4.5rem; margin: 0.1rem 0.75rem 0.25rem 0; border-radius: 0.5rem; object-fit: cover; background: var(--badge); }
.line-head, .size { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sizes { margin-top: 0.3rem; padding-left: 0.75rem; color: var(--muted); }
.out .name, .out .price, .size.out { color: var(--out); text-decoration: line-through; }
.note { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--muted); }
.allergens { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--muted); }
.detail { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--muted); }
.was { margin-right: 0.4rem; color: var(--muted); font-weight: normal; }

.badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.4rem;
  border-radius: 0.4rem;
  background: var(--badge);
  font-size: 0.75rem;
  text-decoration: none;
  vertical-align: middle;
}

.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.tag { padding: 0 0.45rem; border-radius: 0.4rem; background: var(--badge); color: var(--accent); font-size: 0.75rem; }

.hours li { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.hours .time { color: var(--muted); }

.find-us ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.find-us a, .directory a { color: inherit; }
.find-us a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
}

.directory li { border-bottom: 1px solid var(--line); }
.directory a { display: flex; justify-content: space-between; padding: 0.75rem 0; text-decoration: none; }
.directory .kind { color: var(--muted); }

.empty, .notice p { color: var(--muted); }
.notice { padding-top: 4rem; }

footer { margin-top: 3rem; font-size: 0.8rem; color: var(--muted); }
footer a { color: inherit; }

/* The venue's own colour, as it picked it in the app: a deeper shade on paper, the app's own swatch in the dark. */
body.brand-ember { --accent: #c2510a; }
body.brand-slate { --accent: #4f6b8a; }
body.brand-indigo { --accent: #4e55b8; }
body.brand-plum { --accent: #874e91; }
body.brand-teal { --accent: #2c7489; }
body.brand-sand { --accent: #87683f; }

[data-look="dark"] body.brand-ember { --accent: #ffb27a; }
[data-look="dark"] body.brand-slate { --accent: #7e97b3; }
[data-look="dark"] body.brand-indigo { --accent: #8b90de; }
[data-look="dark"] body.brand-plum { --accent: #bc85c4; }
[data-look="dark"] body.brand-teal { --accent: #5ca8bf; }
[data-look="dark"] body.brand-sand { --accent: #bfa07a; }

.place-top { display: flex; align-items: center; gap: 0.75rem; }
.place .identity { flex: 1 1 auto; min-width: 0; }
.place .controls { display: flex; flex: 0 0 auto; gap: 0.4rem; align-self: flex-start; }
.place h1 { font-size: 1.35rem; line-height: 1.2; overflow-wrap: anywhere; }
.place .where { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0; color: var(--muted); font-size: 0.85rem; }
.brand-mark {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.8rem;
  background: var(--accent);
  color: var(--paper);
}
.brand-mark svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.brand-mark .monogram { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; }
.place h1 { color: var(--ink); }

.dropdown { position: relative; }
.dropdown summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown summary::after { content: ""; width: 0.38rem; height: 0.38rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.12rem) rotate(45deg); }
.dropdown[open] summary::after { transform: translateY(0.08rem) rotate(-135deg); }
.dropdown nav {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 11rem;
  max-width: calc(100vw - 2rem);
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--paper);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.18);
}
.dropdown nav a, .dropdown nav .pick {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 0.6rem;
  background: none;
  color: inherit;
  text-align: left;
  text-decoration: none;
}
.dropdown nav a:hover, .dropdown nav a:focus-visible, .dropdown nav .pick:hover, .dropdown nav .pick:focus-visible { background: var(--badge); }
.dropdown nav a[aria-current] { color: var(--accent); font-weight: 600; }
.languages .shown { color: var(--accent); max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
.glyph { display: inline-flex; width: 1.1rem; height: 1.1rem; }
.glyph svg { width: 100%; height: 100%; }
.look summary .glyph { display: none; }
[data-look-choice="auto"] .look summary [data-shows="auto"],
[data-look-choice="light"] .look summary [data-shows="light"],
[data-look-choice="dark"] .look summary [data-shows="dark"],
:root:not([data-look-choice]) .look summary [data-shows="auto"] { display: inline-flex; }
[data-look-choice="auto"] .look [data-look-pick="auto"],
[data-look-choice="light"] .look [data-look-pick="light"],
[data-look-choice="dark"] .look [data-look-pick="dark"] { color: var(--accent); font-weight: 600; }

.place .table {
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: var(--badge);
  color: var(--ink);
  font-weight: 600;
}

.stale {
  margin: 1rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--accent);
  background: var(--badge);
  font-size: 0.9rem;
}

/* Ordering from a table's page, where the venue takes orders from phones: only the page script draws any of this. */
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button:disabled { cursor: default; opacity: 0.45; }

.line .add {
  display: block;
  margin: 0.4rem 0 0 auto;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: none;
  color: var(--accent);
  font-weight: 600;
}

.ordering { margin-top: 1rem; }
.ordering-blocked .add, .ordering-blocked .cart-bar, .ordering-blocked .together, .ordering-blocked .together-link { display: none; }
.ordering-closed .add, .ordering-closed .cart-bar, .ordering-closed .together, .ordering-closed .together-link { display: none; }
.ordering h2 { margin-top: 1.25rem; }
.ordering .message:not(:empty), .ordering .attention, .ordering .closing {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--accent);
  background: var(--badge);
}
.orders .order { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.order .order-status { font-weight: 600; }
.order.state-declined .order-status, .order.state-expired .order-status { color: var(--accent); }
.order ul, .bill { margin-top: 0.3rem; }
.line-row { padding: 0.35rem 0; }
.line-status { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--accent); }
.bill-total { margin: 0.5rem 0 0; font-weight: 600; text-align: right; }
.dock {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 0.5rem;
  width: min(36rem, calc(100% - 2rem));
}
.dock .wave {
  flex: 0 0 auto;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.15);
}
.dock .wave.together { flex: 1 1 auto; border-color: var(--accent); color: var(--accent); }
.together-link { display: block; width: 100%; margin-top: 0.75rem; padding: 0.7rem; border: 1px dashed var(--accent); border-radius: 0.75rem; background: none; color: var(--accent); font-weight: 600; }
.line-by { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--muted); }
/* A camera reads a code dark on light whatever the page's theme. */
.invite-code { display: block; width: min(16rem, 100%); margin: 1rem auto 0; border-radius: 0.5rem; }
.invite-code .light { fill: #fff; }
.invite-code .dark { fill: #000; }

.cart-bar {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font-weight: 700;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
}
body:has(.dock) { padding-bottom: 6rem; }

.sheet {
  width: min(36rem, 100%);
  max-height: 90vh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 1rem 1rem 0 0;
  background: var(--paper);
  color: var(--ink);
}
.sheet::backdrop { background: rgb(0 0 0 / 0.45); }
.sheet-body { padding: 1.25rem 1rem 1.5rem; }
.sheet h2 { margin-top: 0; }
.group { margin: 0 0 1rem; padding: 0; border: 0; }
.group legend { display: flex; justify-content: space-between; gap: 1rem; width: 100%; padding: 0 0 0.3rem; font-weight: 600; }
.group legend .hint { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.group.missing legend .hint { color: var(--accent); font-weight: 700; }
.choice { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.choice .name { flex: 1; }
.choice.out { color: var(--out); text-decoration: line-through; }
.quantity, .line-controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.stepper { display: flex; align-items: center; gap: 0.75rem; }
.stepper .count { min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.step {
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  font-size: 1.1rem;
}
.remove { border: 0; background: none; color: var(--muted); text-decoration: underline; }
.refused .name { color: var(--out); text-decoration: line-through; }
.refusal { color: var(--accent); }
.rise { color: var(--accent); font-weight: 600; }
.question { margin-top: 0.5rem; display: grid; gap: 0.5rem; }
.chosen { outline: 2px solid var(--accent); }
.cheaper { color: var(--ink); }
.actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.actions button { flex: 1; padding: 0.75rem 1rem; border-radius: 999px; font-weight: 600; }
.actions .primary { border: 0; background: var(--accent); color: var(--paper); }
.actions .secondary { border: 1px solid var(--line); background: none; }
[hidden] { display: none !important; }

/* Booking a table (product-scope.md, Bookings guests make themselves): plain forms the server answers. */
.place .book {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.booking form { display: grid; gap: 0.9rem; margin-top: 1.5rem; }
.booking label { display: grid; gap: 0.3rem; font-weight: 600; }
.booking input:not([type="radio"]), .booking select, .booking textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 400;
}
.booking textarea { min-height: 5rem; resize: vertical; }
.booking button.primary, .booking .actions button {
  padding: 0.8rem 1rem;
  border-radius: 999px;
  font-weight: 700;
}
.booking button.primary { border: 0; background: var(--accent); color: var(--paper); }
.booking .call-off { margin-top: 1.25rem; }
.booking .call-off summary {
  display: block;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  list-style: none;
  cursor: pointer;
}
.booking .call-off summary::-webkit-details-marker { display: none; }
.booking .call-off[open] summary { display: none; }
.booking .call-off .actions { margin-top: 0.75rem; }
.booking .hours { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.booking .hours legend { width: 100%; padding: 0 0 0.4rem; font-weight: 600; }
.booking .hour { display: block; font-weight: 600; }
.booking .hour input { position: absolute; opacity: 0; }
.booking .hour span {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.booking .hour input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.booking .hour input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.booking .message, .booking .empty {
  margin: 1rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--accent);
  background: var(--badge);
}
.booking .booked-when { margin: 1.25rem 0 0; font-size: 1.15rem; font-weight: 600; }
.booking .booked-state { margin: 0.4rem 0 0; }
.booking .find-us { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.booking .preordered li { padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.booking .preorder-slot { display: grid; gap: 0.4rem; }
.booking .order-ahead {
  justify-self: start;
  padding: 0.6rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: none;
  color: var(--accent);
  font-weight: 600;
}
.booking .chosen:empty { display: none; }
.menu-sheet h3 { margin: 1.1rem 0 0.3rem; font-size: 1rem; color: var(--accent); }
.menu-sheet .line { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.menu-sheet .line .line-head { flex: 1; }
.menu-sheet .line .add { margin: 0; }