:root {
  --tap: 44px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius: 8px;
  --color-bg: #ffffff;
  --color-text: #1c1b1f;
  --color-muted: #5f5f66;
  --color-border: #79767d;
  --color-divider: #e4e2e6; /* a decorative rule between sections, not a control's edge */
  --color-primary: #b3261e;
  --color-on-primary: #ffffff;
  --color-danger: #8c1d18;
  --color-info-border: #1d4f91;
  --color-info-bg: #e6eefa;
  --color-info-text: #123766;
  --color-highlight: #ffe08a;
  --color-popular-bg: #fde4e1;
  --cart-bar-height: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* A no-JavaScript fallback control, redundant once htmx is running (base.html sets html.js). */
.js .no-js-only {
  display: none;
}

/* The opposite: a control that needs JavaScript, so it is not offered without it. */
.no-js .js-only {
  display: none;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

img,
video {
  max-width: 100%;
  height: auto;
}

h1 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: var(--space-5) 0 var(--space-3);
}

a {
  color: var(--color-primary);
}

/* A link inside running text. assert_touch_targets skips these (WCAG 2.5.8 inline exception);
   every other link needs a 44px target, for example .button or .back-link. */
.link-inline {
  text-decoration: underline;
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
}

.container {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: var(--space-2);
}

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* A square 44px button showing only a glyph or icon (aria-hidden); its name is visually-hidden
   text inside it, e.g. "Remove Kung Pao" or "Move up Soups in Lunch". */
.icon-button {
  width: var(--tap);
  padding: 0;
  font-size: 1.125rem;
  line-height: 1;
}

.icon-button .icon {
  display: block;
}

.cart-line__remove:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

input,
select,
textarea {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
}

/* iOS Safari ignores min-height on a natively styled select, so draw it ourselves. */
select {
  appearance: none;
  padding-right: var(--space-6);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
    linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.field {
  margin-block: var(--space-4);
}

.field label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
}

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.htmx-indicator {
  visibility: hidden;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  visibility: visible;
}

#loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: 4px;
  background-color: var(--color-primary);
  visibility: hidden;
}

#loading.htmx-request {
  visibility: visible;
}

#htmx-error {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--cart-bar-height, 0px) + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  background-color: var(--color-danger);
  color: var(--color-on-primary);
  font-weight: 600;
  text-align: center;
}

#htmx-error-dismiss {
  flex-shrink: 0;
  width: var(--tap);
  height: var(--tap);
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.staff-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.staff-header__home {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
}

.staff-header__user {
  color: var(--color-muted);
}

.staff-header__signout {
  margin: 0;
  margin-inline-start: auto;
}

/* The staff sidebar (_staff_nav.html): a sticky column beside the page on a wide screen, one
   scrolling row of links under the header on a narrower one. */
.staff-nav {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.staff-nav a {
  color: inherit;
  text-decoration: none;
}

.staff-nav :focus-visible {
  outline-color: var(--color-on-primary);
}

.staff-nav__title {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
  font-size: 1.125rem;
  font-weight: 700;
}

.staff-nav__list,
.staff-nav__group > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.staff-nav__section {
  display: block;
  margin: var(--space-3) var(--space-4) var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid rgb(255 255 255 / 45%);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.staff-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  margin-inline: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius);
}

.staff-nav__link:hover {
  background-color: rgb(255 255 255 / 15%);
}

.staff-nav__link[aria-current] {
  background-color: #fde8e7;
  color: var(--color-primary);
  font-weight: 700;
}

.staff-nav__group--customer {
  margin-top: var(--space-4);
}

@media (min-width: 1024px) {
  .page--staff {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
  }

  .staff-nav {
    position: sticky;
    top: 0;
    height: 100vh;
    padding-bottom: var(--space-4);
    overflow-y: auto;
  }
}

@media (max-width: 1023.98px) {
  /* position: relative keeps the visually hidden section names inside this scroller; otherwise
     the ones scrolled out of view would widen the page. */
  .staff-nav__list {
    position: relative;
    display: flex;
    gap: var(--space-1);
    padding: 0 var(--space-2) var(--space-2);
    overflow-x: auto;
  }

  .staff-nav__group,
  .staff-nav__group > ul {
    display: flex;
    gap: var(--space-1);
  }

  .staff-nav__group--customer {
    margin-top: 0;
  }

  /* The links read as one row; screen readers still hear each section's name. */
  .staff-nav__section {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .staff-nav__link {
    margin: 0;
    white-space: nowrap;
  }
}

.messages {
  position: sticky;
  top: 0;
  z-index: 15;
  margin-block: var(--space-4);
  background: var(--color-bg);
}

.message {
  width: 100%;
  margin: 0 0 var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: #f1f0f4;
  color: var(--color-text);
}

.message--success {
  background-color: #e3f4e6;
  border-color: #1b5e20;
  color: #0d3b12;
}

.message--error {
  background-color: #fde8e7;
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.message--warning {
  background-color: #fff3d6;
  border-color: #7a4f00;
  color: #4d3200;
}

.form-errors,
.errorlist,
.field-error {
  color: var(--color-danger);
  font-weight: 600;
}

.field-error,
.errorlist {
  margin: var(--space-1) 0 0;
}

.errorlist {
  padding: 0;
  list-style: none;
}

.error-summary {
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
  background-color: #fde8e7;
}

.error-summary p {
  margin: 0;
}

.helptext {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: 0.875rem;
}

fieldset {
  margin-block: var(--space-5);
  padding: var(--space-2) var(--space-4) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

legend {
  padding-inline: var(--space-2);
  font-size: 1.125rem;
  font-weight: 700;
}

.field--checkbox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.field--checkbox input {
  width: auto;
}

.field--checkbox label {
  margin-bottom: 0;
}

.field--checkbox .helptext,
.field--checkbox .errorlist {
  flex-basis: 100%;
}

/* Checkout's two boxes: "Text me order updates", with what the customer agrees to beneath it,
   and agreeing to the terms. The whole line is the tap target. */
.sms-consent,
.terms-consent {
  margin-block: var(--space-4);
}

.consent-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  font-weight: 600;
}

/* The native box at its usual size; the label around it is the 44px target. */
.consent-choice input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--color-primary);
}

.sms-consent .helptext {
  margin-top: 0;
}

.hours-row,
.choice-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0 var(--space-3);
  align-items: end;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* Spans the whole row when the row is a grid, such as .hours-row. */
.row-errors {
  grid-column: 1 / -1;
}

.restaurant-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.restaurant-list .button {
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
}

.restaurant-list__role {
  color: var(--color-muted);
  font-weight: 400;
}

.status-badge {
  display: inline-block;
  margin: 0 0 var(--space-4);
  padding: var(--space-1) var(--space-3);
  border: 1px solid currentcolor;
  border-radius: var(--radius);
  font-weight: 700;
}

.status-badge--open {
  background-color: #e3f4e6;
  color: #0d3b12;
}

.status-badge--closed {
  background-color: #f1f0f4;
  color: var(--color-text);
}

.status-badge--paused {
  background-color: #fde8e7;
  color: var(--color-danger);
}

.landing-address,
.landing-pickup {
  margin-block: var(--space-3);
}

.landing-phone,
.landing-orders-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
}

.hours-table {
  width: 100%;
  margin-block: var(--space-3) 0;
  border-collapse: collapse;
}

.landing-hours-link {
  margin-block: var(--space-2);
}

/* A button that reads as a link, still a full 44px target. */
.link-button {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.hours-dialog,
.order-dialog,
.cart-dialog,
.form-dialog {
  box-sizing: border-box;
  width: min(28rem, calc(100% - 2 * var(--space-4)));
  max-height: calc(100% - 2 * var(--space-4));
  padding: var(--space-4);
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.hours-dialog::backdrop,
.order-dialog::backdrop,
.cart-dialog::backdrop,
.form-dialog::backdrop {
  background-color: rgb(0 0 0 / 50%);
}

/* The cart popup is wider than the hours: its lines carry a stepper, a price and actions. */
.cart-dialog {
  width: min(40rem, calc(100% - 2 * var(--space-4)));
}

.cart-dialog .cart-totals {
  margin-bottom: 0;
}

/* The staff menu's add forms (menu, category, dish) in a popup. */
.form-dialog {
  width: min(32rem, calc(100% - 2 * var(--space-4)));
}

/* Without JavaScript nothing can open the dialog, so show its content as ordinary page content. */
.no-js .hours-dialog {
  display: block;
  position: static;
  width: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.hours-table th,
.hours-table td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

.hours-table th {
  width: 40%;
  font-weight: 600;
}

.button--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* A row of buttons and one-button forms that wraps instead of overflowing at 320px. */
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-3);
}

.action-row form {
  margin: 0;
}

.badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 600;
  vertical-align: middle;
}

.dish-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A staff list row: the summary, then the dish's sold-out toggle and its actions on the same line
   on a wide screen; they wrap below the summary on a phone. */
.dish-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.dish-list__item > .dish-availability,
.dish-list__item > .action-row {
  margin: 0;
}

.dish-list__summary {
  flex: 1 1 16rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.dish-list__name {
  flex: 1 1 8rem;
  min-width: 0;
}

/* A fixed-size box (matching the width and height attributes) keeps the layout from shifting. */
.dish-photo {
  border-radius: var(--radius);
  object-fit: cover;
  width: 200px;
  height: 150px;
}

/* The staff menu page (menu/staff/overview.html): the menus as tabs, then the selected menu's
   categories -- a sticky row of chips, or a list beside the dishes once there is room -- and
   one row per dish. */
.menu-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block: var(--space-3) var(--space-4);
}

.menu-bar .menu-tabs {
  margin: 0;
}

.menu-bar .menu-tab {
  gap: var(--space-2);
  border-radius: 999px;
}

.menu-manager {
  container-type: inline-size;
}

.category-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: var(--space-2);
  padding-block: var(--space-2);
  background-color: var(--color-bg);
}

/* position: relative keeps "Add category"'s visually hidden text inside this scroller, so a chip
   scrolled out of view never widens the page. */
.category-nav ul {
  position: relative;
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  white-space: nowrap;
}

.category-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
}

.category-nav__link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Under the sticky chips, a jump to a category or a redirect to a dish's row stays in view. */
.category-head,
.dish-row {
  scroll-margin-top: 4.5rem;
}

@container (min-width: 760px) {
  .menu-manager__layout {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }

  .category-nav {
    top: var(--space-3);
    margin: 0;
    padding: 0;
  }

  .category-nav ul {
    display: block;
    overflow: visible;
    white-space: normal;
  }

  .category-nav__link {
    display: flex;
    padding: 0 var(--space-3);
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
  }

  .category-nav__link:hover {
    border-left-color: var(--color-primary);
  }

  .category-nav__add {
    margin-top: var(--space-3);
  }

  .category-head,
  .dish-row {
    scroll-margin-top: var(--space-3);
  }
}

.category-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--color-text);
}

.menu-manager__main > section:first-child .category-head {
  margin-top: 0;
}

.category-head__name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.125rem;
}

.dish-rows {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

/* One dish: thumbnail, name (a manager's Edit link), price, the sold-out toggle and "⋯". The
   toggle has a fixed minimum width, so "⋯" lines up whichever label it has and whether the
   badge shows. On a narrow screen the toggle and "⋯" take a second line. */
.dish-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.dish-row__thumb {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
}

.dish-row__thumb--none {
  background: repeating-linear-gradient(135deg, #f1efec 0 6px, #e7e4df 6px 12px);
}

.dish-row__name {
  display: flex;
  flex: 1 1 8rem;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--tap);
  font-weight: 600;
}

/* The name is the dish's Edit link: underlined, so it reads as one. */
.dish-row__name a {
  display: inline-flex;
  align-items: center;
  min-width: var(--tap);
  min-height: var(--tap);
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 3px;
}

.dish-row__name a:hover {
  color: var(--color-primary);
  text-decoration-color: currentcolor;
}

.dish-row--off .dish-row__name,
.dish-row--off .dish-row__name a {
  color: var(--color-muted);
}

.dish-row__price {
  width: 5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dish-availability {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 14.5rem;
}

.dish-availability form {
  margin: 0;
}

@container (max-width: 559.98px) {
  .dish-row__price {
    width: auto;
  }

  .dish-availability {
    flex: 1 1 calc(100% - 7.5rem);
    justify-content: flex-start;
    min-width: 0;
    margin-left: calc(40px + var(--space-3));
  }
}

/* "⋯": a native disclosure (no JavaScript needed) holding a row's less-used actions. */
.row-menu {
  position: relative;
  flex: 0 0 auto;
}

.row-menu > summary {
  list-style: none;
}

.row-menu > summary::-webkit-details-marker {
  display: none;
}

.row-menu[open] > summary {
  background-color: #f1efec;
}

.row-menu__panel {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 12rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  box-shadow: 0 6px 16px rgb(0 0 0 / 15%);
}

.row-menu__panel form {
  margin: 0;
}

.row-menu__panel .button,
.row-menu__panel button {
  justify-content: flex-start;
  gap: var(--space-2);
  width: 100%;
}

/* Dish detail: each option choice's label is the tap target (not the small native radio or
   checkbox box inside it) — see TOUCH_SELECTOR and assert_option_labels_meet_touch_target. */
.option-choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
}

.quantity-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.quantity-stepper button {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
}

.quantity-stepper input {
  width: 3rem;
  padding-inline: 0;
  text-align: center;
}

.menu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-4);
}

.menu-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}

.menu-tab[aria-current="page"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.category-chips {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: var(--space-2);
  margin-block: var(--space-3);
  padding-block: var(--space-2);
  overflow-x: auto;
  white-space: nowrap;
  background-color: var(--color-bg);
}

.category-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
}

.sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.sheet-header__title {
  margin: var(--space-2) 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

.sheet-header__close {
  flex-shrink: 0;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
}

#dish-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-4);
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
  transform: translateY(100%);
  transition: transform 0.2s ease-out;
  z-index: 15;
}

#dish-sheet.sheet--open {
  transform: translateY(0);
}

#dish-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 14;
  background-color: rgb(0 0 0 / 50%);
}

/* Dish sheet, compact: no bottom padding, so the footer row (stepper, price, "Add to cart") can
   stick flush to the sheet's bottom edge while the options scroll above it. From a tablet's width
   up the sheet is a centered card instead of a full-width bottom sheet. */
#dish-sheet {
  padding-bottom: 0;
}

@media (min-width: 720px) {
  #dish-sheet {
    top: 50%;
    bottom: auto;
    max-width: 34rem;
    max-height: 85vh;
    margin-inline: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transform: translateY(100vh);
  }

  #dish-sheet.sheet--open {
    transform: translateY(-50%);
  }
}

.dish-detail .sheet-header__title {
  margin-block: var(--space-2) 0;
}

/* Cropped to one wide shape, whatever the upload's height, so the options still show below it.
   No wider than the desktop sheet's content (the img's sizes), so the full page doesn't stretch it. */
.dish-detail__photo {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-3);
  border-radius: var(--radius);
  object-fit: cover;
}

.dish-detail .dish-description {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.option-group {
  margin: var(--space-4) 0 0;
  padding: 0;
  border: 0;
}

.option-group legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: 1rem;
}

.option-group__rule {
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 400;
}

.option-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-2);
}

.option-choices .option-choice {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.option-choices .option-choice input {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 0;
  min-height: 0;
  margin: 0;
  accent-color: var(--color-primary);
}

.option-choices .option-choice:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  background-color: #fde8e7;
}

.option-choices .option-choice:has(input:disabled) {
  color: var(--color-muted);
  border-style: dashed;
  cursor: default;
}

/* The name, with any add-on price on a line of its own below it, so names in a narrow chip wrap
   between words rather than inside them. */
.option-choice__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.option-choice__price {
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* Special instructions (_dish_sheet.html): a native disclosure whose summary carries the title,
   the hint below it and a chevron on the right that points up while it is open. */
.dish-instructions {
  margin: var(--space-4) 0 0;
}

.dish-instructions__summary {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--tap);
  padding-right: var(--space-6);
  list-style: none;
  cursor: pointer;
}

.dish-instructions__summary::-webkit-details-marker {
  display: none;
}

.dish-instructions__summary::after {
  content: "";
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.dish-instructions[open] > .dish-instructions__summary::after,
.dish-appetizers[open] > .dish-instructions__summary::after {
  top: var(--space-3);
  transform: rotate(-135deg);
}

/* Recommended appetizers (_dish_sheet.html): the same disclosure, over one row per dish with a
   divider between rows: its box, its name with the description below, and its price at the end. */
.dish-appetizers {
  margin: var(--space-4) 0 0;
}

.dish-appetizers__list {
  margin: var(--space-2) 0 0;
  padding: 0;
  border: 0;
}

.appetizer-choice {
  gap: var(--space-3);
  padding-inline: 0;
  cursor: pointer;
}

.appetizer-choice + .appetizer-choice {
  border-top: 1px solid var(--color-divider);
}

.appetizer-choice input {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 0;
  min-height: 0;
  margin: 0;
  accent-color: var(--color-primary);
}

.appetizer-choice__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.appetizer-choice__description {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.appetizer-choice__price {
  flex-shrink: 0;
  white-space: nowrap;
}

.dish-instructions__title {
  font-weight: 600;
}

.dish-instructions__hint {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.dish-instructions textarea {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  resize: vertical;
}

.dish-detail__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

#dish-sheet .dish-detail__footer {
  position: sticky;
  bottom: 0;
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}

#dish-live {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-3);
}

.dish-detail #dish-price p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.3;
}

.dish-price__unit,
.dish-price__total {
  font-weight: 600;
}

/* With a total below it, "each" is the secondary line. */
.dish-price__unit:not(:last-child) {
  color: var(--color-muted);
  font-weight: 400;
}

.dish-price__error {
  color: var(--color-danger);
}

.dish-detail__add {
  flex: 1 0 9rem;
}

.dish-detail__footer .no-js-only {
  flex: 0 0 auto;
}

.cart-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  height: var(--cart-bar-height);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--color-primary);
}

/* Rendered in normal flow right before the fixed .cart-bar, so the bar never covers the end of
   the page; it only exists while the bar does. */
.cart-bar-spacer {
  height: var(--cart-bar-height);
}

.cart-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-on-primary);
  font-weight: 700;
  text-decoration: none;
}

/* Checkout. The time select only matters for a scheduled pickup, so CSS alone hides it while
   "Scheduled" is unchecked; it works the same with JavaScript off. A browser without :has()
   drops the whole rule and always shows the select, so it can still schedule. */
.checkout-form:not(:has(input[name="pickup_type"][value="SCHEDULED"]:checked)) .pickup-time {
  display: none;
}

/* A focused last field leaves room below it for the submit button. The padding sits on the
   scroll container: scroll-margin on the field wrapper is ignored, because the browser scrolls
   the focused control itself into view, not its wrapper. */
html {
  scroll-padding-bottom: calc(var(--tap) + var(--space-6));
}

/* Place order stays on screen while the form scrolls, so it is never a field away below the fold;
   the scroll padding above keeps a focused field clear of it. */
.checkout-form button[type="submit"] {
  position: sticky;
  bottom: var(--space-2);
  width: 100%;
  margin-block: var(--space-2) var(--space-6);
}

/* Checkout is kept compact: tighter fieldsets and fields than the app's other forms, so the
   whole order fits in fewer screens. */
.checkout-form fieldset {
  margin-block: var(--space-3);
  padding: 0 var(--space-3) var(--space-3);
}

.checkout-form legend {
  font-size: 1rem;
}

.checkout-form .field {
  margin-block: var(--space-2);
}

.checkout-form > p {
  margin-block: var(--space-2);
}

/* Name and phone share a row only when each still gets a full-width-looking input. */
.checkout-form .field-row > .field {
  flex-basis: 14rem;
}

/* Wide enough for "As soon as possible" on one line; the two stack on a phone. */
.checkout-form .option-choices {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.order-summary {
  margin-block: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.order-summary summary {
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  cursor: pointer;
}

.order-summary .order-lines,
.order-summary .order-totals {
  padding-inline: var(--space-4);
}

/* A line's selected options (_line_options.html): one muted line, the choices joined by "·". */
.line-options {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.line-options li {
  display: inline;
}

.line-options li + li::before {
  content: " · ";
}

/* A line's special instructions, under its options: quoted, so they read as the customer's words. */
.line-instructions {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
  font-style: italic;
  overflow-wrap: anywhere;
}

/* Cart lines: one row on a wide screen -- info, stepper, price, actions -- in fixed columns so
   the prices line up from line to line; a phone gets the info row and a controls row (see the
   max-width: 719.98px block). Problem and error messages take a full-width row underneath. */
.cart-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 6rem 6.5rem;
  grid-template-areas:
    "info qty price actions"
    "messages messages messages messages";
  align-items: center;
  column-gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.cart-line__info {
  grid-area: info;
  min-width: 0;
}

.cart-line__name {
  margin: 0;
  font-weight: 600;
}

.cart-line .quantity-stepper {
  grid-area: qty;
  margin: 0;
}

.cart-line__price {
  grid-area: price;
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.cart-line__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

.cart-line__actions form {
  margin: 0;
}

/* "Edit" beside the Remove button: a stand-alone link, so it gets a 44px target. */
.cart-line__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding-inline: var(--space-2);
  font-weight: 600;
}

.cart-line__messages {
  grid-area: messages;
}

.cart-line__messages .error-summary {
  margin-block: var(--space-2) 0;
}

@media (max-width: 719.98px) {
  .cart-line {
    grid-template-columns: auto minmax(0, 1fr) 6.5rem;
    grid-template-areas:
      "info info info"
      "qty price actions"
      "messages messages messages";
    column-gap: var(--space-3);
    row-gap: var(--space-1);
  }
}

/* The cart popup is narrower than the cart page on a phone: the price moves up beside the
   dish's name, leaving the stepper and Edit/Remove a row to themselves. */
@media (max-width: 719.98px) {
  .cart-dialog .cart-line {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "info price"
      "qty actions"
      "messages messages";
  }
}

/* The cart page's totals; the checkout and order pages restyle them inside .order-totals. */
.cart-totals {
  max-width: 20rem;
  margin: var(--space-3) 0 var(--space-5) auto;
}

.cart-totals .cart-totals__row--total {
  font-size: 1.125rem;
}

.cart-totals .button {
  width: 100%;
  margin-top: var(--space-3);
}

/* Checkout's tip: No tip / 10% / 15% / 20% / Custom as a row of pills (each label is the 44px
   tap target), and the custom amount field only while Custom is chosen. A browser without
   :has() shows the field all the time; the server ignores it unless Custom is chosen. */
.tip-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tip-choice {
  position: relative;
  justify-content: center;
  min-width: 4.5rem;
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
}

/* The pill is the control: the radio stays for keyboards and screen readers, out of sight. */
.tip-choice input {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 0;
  min-height: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.tip-choice:has(input:focus-visible) {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.tip-choice:has(input:checked) {
  border-color: var(--color-primary);
  background-color: #fde8e7;
  color: var(--color-primary);
  font-weight: 600;
}

.tip-fieldset:has(input[name="tip_choice"]:not([value="custom"]):checked) .tip-custom {
  display: none;
}

.tip-custom .field {
  max-width: 12rem;
  margin-bottom: 0;
}

/* Read-only order lines, on the checkout summary, the confirmation page, past orders and the
   staff order detail. */
.order-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.order-line p {
  margin: 0;
}

.order-line__price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.order-totals {
  padding-block: var(--space-2);
}

.cart-totals .cart-totals__row,
.order-totals .cart-totals__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-1) 0;
  font-variant-numeric: tabular-nums;
}

.cart-totals .cart-totals__row--total,
.order-totals .cart-totals__row--total {
  font-weight: 700;
}

.order-pickup {
  font-weight: 600;
}

.order-heading {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 1.25rem;
}

/* The customer's phone and email links on the staff order page: each is a 44px tap target. */
.order-contact {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  overflow-wrap: anywhere;
}

.board-date {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
}

/* Sound was on before a reload, but the browser wants a tap before it plays again. */
.sound-toggle--attention {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

/* The board's polls have failed several times in a row: what is shown may be out of date. */
.board-stale {
  margin-block: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-danger);
  border-radius: var(--radius);
  color: var(--color-danger);
  font-weight: 600;
}

/* Order reports (ordering/staff/reports.html): the range form, the summary tiles, then a table
   of the range's orders that turns into two-line rows on a phone, like the board. */
.report-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
  margin-block: var(--space-3) var(--space-4);
}

.report-form .field,
.report-form__dates {
  margin: 0;
}

.report-form__dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

/* The dates only matter for "Custom dates"; a browser without :has() always shows them. */
.report-form:has(select[name="period"] option[value="custom"]:not(:checked)) .report-form__dates {
  display: none;
}

/* With JavaScript a preset range shows as soon as it is picked, so Show is only for the dates. */
.js .report-form:has(select[name="period"] option[value="custom"]:not(:checked)) .report-form__show {
  display: none;
}

.report-heading {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--color-primary);
  font-size: 1.125rem;
}

.report-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.report-tile {
  padding: var(--space-3);
  text-align: center;
}

.report-tile + .report-tile {
  border-left: 1px solid var(--color-border);
}

.report-tile dt {
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
}

.report-tile dd {
  margin: 0;
}

.report-tile__value {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.report-tile__note {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.report-table {
  width: 100%;
  margin-top: var(--space-4);
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.report-table thead th {
  padding: var(--space-1) 6px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: start;
}

.report-row th,
.report-row td {
  padding: 0 6px;
  border-bottom: 1px solid var(--color-border);
  text-align: start;
  white-space: nowrap;
}

.report-row__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 700;
}

.report-row__money,
.report-table th.report-table__end {
  text-align: end;
}

.report-row__name {
  display: none;
}

.report-row__placed {
  text-align: end;
}

.report-row__date {
  display: block;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.report-row--not-counted {
  color: var(--color-muted);
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-block: var(--space-4);
}

@media (max-width: 719.98px) {
  .report-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Sales across the top, then two tiles to a row. */
  .report-tile--sales {
    grid-column: 1 / -1;
  }

  .report-tile + .report-tile {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .report-tile:nth-child(odd):not(.report-tile--sales) {
    border-left: 1px solid var(--color-border);
  }

  .report-table,
  .report-table tbody {
    display: block;
  }

  .report-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .report-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-3);
    padding-block: var(--space-1);
    border-bottom: 1px solid var(--color-border);
  }

  .report-row th,
  .report-row td {
    display: block;
    padding: 0;
    border: 0;
  }

  .report-row__name {
    display: inline;
  }

  .report-row__placed {
    margin-left: auto;
  }
}

/* Staff dashboard: cards for the sales chart (managers), the online store and today's orders.
   Side by side from a tablet's width up; stacked on a phone. */
.dashboard {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.dashboard__side {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

@media (min-width: 720px) {
  .dashboard--with-chart {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .dashboard:not(.dashboard--with-chart) .dashboard__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dash-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.dash-card__title {
  margin: 0;
  font-size: 1.25rem;
}

.dash-card__subtitle {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
}

.dash-card__action {
  margin: var(--space-4) 0 0;
}

.store-state {
  margin: var(--space-3) 0 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.store-state--open {
  color: #0d3b12;
}

.store-hours {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.sales-total {
  margin: var(--space-3) 0 0;
}

.sales-total__value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.sales-total__note {
  color: var(--color-muted);
}

/* One column per day, its height a percent of the plot. The left gutter holds the gridline
   labels; the bottom one the dates under every 7th column. */
.sales-chart {
  margin: var(--space-3) 0 0;
}

.sales-chart__plot {
  position: relative;
  height: 180px;
  margin: 0 0 var(--space-5) 3rem;
}

.sales-chart__gridline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid #e4e2e8;
}

.sales-chart__tick {
  position: absolute;
  right: calc(100% + var(--space-2));
  transform: translateY(-50%);
  color: var(--color-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sales-chart__days {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sales-chart__day {
  position: relative;
  display: flex;
  flex: 1 1 0;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
}

.sales-chart__bar {
  width: 100%;
  max-width: 24px;
  border-radius: 4px 4px 0 0;
  background-color: var(--color-primary);
}

.sales-chart__day.is-active .sales-chart__bar {
  background-color: var(--color-danger);
}

.sales-chart__date {
  position: absolute;
  top: calc(100% + var(--space-1));
  color: var(--color-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* The last column's date would hang past the plot's right edge. */
.sales-chart__day:last-child .sales-chart__date {
  right: 0;
}

.sales-chart__tooltip {
  position: absolute;
  bottom: calc(100% + var(--space-1));
  z-index: 1;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background-color: var(--color-text);
  color: var(--color-bg);
  font-size: 0.8125rem;
  white-space: nowrap;
  pointer-events: none;
}

.sales-chart__tooltip strong {
  display: block;
}

.chart-table > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}

.chart-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.chart-table__table th,
.chart-table__table td {
  padding: var(--space-1) 6px;
  border-bottom: 1px solid var(--color-border);
  text-align: start;
}

.chart-table__table thead th {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.chart-table__table .chart-table__end {
  text-align: end;
}

/* The customer menu. One column on a phone or tablet: the header, the pickup card, sticky category
   chips and the dishes, with the "View cart" bar at the bottom. From 1024px, three zones: the
   category list, the header and dishes, and the pickup card with the cart; both sides stick. */
.page--menu .container {
  max-width: 1280px;
}

.menu-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-5);
}

.menu-head {
  display: flex;
  flex-direction: column;
}

.menu-head h1 {
  margin-bottom: var(--space-2);
}

.store-info__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.store-info__title {
  margin: 0;
  font-size: 1.0625rem;
}

/* A pill here, beside the "Store information" heading. */
.store-info__head .status-badge {
  margin: 0;
  padding: 0 var(--space-3);
  border-color: transparent;
  border-radius: 999px;
  font-size: 0.8125rem;
}

/* Address, phone and hours: stacked on a phone, side by side once they fit. */
.store-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.store-info__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-weight: 400;
  text-align: start;
  text-decoration: none;
}

.store-info__link > span {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.store-info__link .icon {
  flex-shrink: 0;
  color: var(--color-muted);
}

/* The customer pages' footer: the restaurant's name, address and phone, then a rule and the menu
   and policy links, all centred. */
.site-footer {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}

.site-footer__store {
  padding: var(--space-5) var(--space-4) var(--space-4);
  text-align: center;
}

.site-footer__name {
  margin: 0 0 var(--space-1);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__contact .store-info__link {
  font-size: 0.875rem;
}

.site-footer__nav {
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  color: var(--color-text);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Below 1024px the fixed "View cart" bar would cover the end of the footer, so the footer reserves
   the bar's height instead of the spacer at the end of the menu. */
@media (max-width: 1023.98px) {
  body:has(.cart-bar) .site-footer {
    padding-bottom: calc(var(--cart-bar-height) + env(safe-area-inset-bottom));
  }

  body:has(.site-footer) .cart-bar-spacer {
    display: none;
  }
}

/* A policy page from the footer: long text, kept to a readable line length. */
.policy {
  max-width: 72ch;
}

.policy h2 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: 1.25rem;
}

.policy h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 1.0625rem;
}

.policy h4 {
  margin: var(--space-4) 0 var(--space-1);
  font-size: 1rem;
}

.policy__updated {
  color: var(--color-muted);
}

/* The Text Message Updates page's copy of checkout's SMS box, framed as a sample. */
.consent-sample {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.consent-sample .sms-consent {
  margin-block: 0;
}

.consent-sample figcaption {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: 0.875rem;
}

.order-card {
  margin-block: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.order-card__title {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.order-card__when {
  margin: var(--space-1) 0 0;
  font-weight: 700;
}

.order-card__detail {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* On a phone or tablet the "View cart" bar does this job. */
.order-card__cart {
  display: none;
}

.order-card__cart-link {
  width: 100%;
}

.order-card__past {
  margin: 0;
}

.menu-nav {
  display: none;
}

.menu-search {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.menu-search input {
  flex: 1 1 auto;
  min-width: 0;
}

.menu-search__status {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.menu-search__status:empty {
  display: none;
}

/* The section a chip or a category link jumps to clears the sticky chips above it. */
.menu-section {
  scroll-margin-top: 4.5rem;
}

.menu-section__title {
  margin: var(--space-5) 0 var(--space-3);
  font-size: 1.25rem;
}

.menu-dishes {
  display: grid;
  gap: var(--space-3);
}

/* A dish: its name (a link stretched over the whole row), description and price, an optional
   photo, and the + at the end. */
.menu-dish {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 6rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
}

.menu-dish:hover {
  border-color: var(--color-text);
}

.menu-dish:has(.menu-dish__link:focus-visible) {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.menu-dish__body {
  flex: 1 1 auto;
  min-width: 0;
}

.menu-dish__name {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

/* The whole row is the target (::after below); the link's own box is still 44px tall, with the
   padding taken back by the margins so the row's layout doesn't change. */
.menu-dish__link {
  display: block;
  margin-block: -0.75rem;
  padding-block: 0.75rem;
  color: var(--color-text);
  text-decoration: none;
}

.menu-dish__link:focus-visible {
  outline: none;
}

.menu-dish__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.menu-dish__description {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 0.875rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.menu-dish__price {
  margin: var(--space-1) 0 0;
  font-weight: 600;
}

/* The "Popular" tag above a dish's name, on the menu and in the dish popup. */
.popular-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background-color: var(--color-popular-bg);
  color: var(--color-danger);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.menu-dish--sold-out .menu-dish__name,
.menu-dish--sold-out .menu-dish__price {
  color: var(--color-muted);
}

.menu-dish__photo {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: var(--radius);
  object-fit: cover;
}

/* The + sits above the stretched link, so a tap on it adds instead of opening the dish. */
.dish-add {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  align-self: flex-end;
  margin: 0;
}

.menu-dish > .dish-add__button {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  align-self: flex-end;
}

.dish-add__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  color: var(--color-primary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
  cursor: pointer;
}

.dish-add__button--count {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 1rem;
}

@media (min-width: 720px) {
  .menu-dishes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .menu-page {
    grid-template-columns: 13rem minmax(0, 1fr) 17rem;
    grid-template-areas:
      "nav head order"
      "nav main order";
    align-items: start;
  }

  .menu-head {
    grid-area: head;
  }

  .menu-main {
    grid-area: main;
  }

  .menu-nav {
    grid-area: nav;
    position: sticky;
    top: var(--space-4);
    display: block;
    max-height: calc(100vh - 2 * var(--space-4));
    margin-top: var(--space-5);
    padding: var(--space-3);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .order-card {
    grid-area: order;
    position: sticky;
    top: var(--space-4);
    margin-top: var(--space-5);
  }

  .order-card__cart {
    display: block;
    margin-top: var(--space-3);
  }

  /* The pickup card holds the cart, and the category list replaces the chips and tabs. */
  .cart-summary-slot,
  .category-chips,
  .menu-main > .menu-tabs {
    display: none;
  }

  .menu-section {
    scroll-margin-top: var(--space-4);
  }
}

.menu-nav__title {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
}

.menu-nav__menu-name {
  margin: var(--space-2) 0 var(--space-1);
  font-weight: 700;
}

.menu-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-nav__link,
.menu-nav__other {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-2);
  border-left: 3px solid transparent;
  color: var(--color-text);
  font-size: 0.9375rem;
  text-decoration: none;
}

.menu-nav__link:hover,
.menu-nav__other:hover {
  text-decoration: underline;
}

/* The category in view (app.js), in the list and among the chips. */
.menu-nav__link[aria-current="true"] {
  border-left-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
}

.category-chip[aria-current="true"] {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.menu-nav__other {
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-weight: 600;
}

/* Settings: the form's fieldsets as cards, two columns from a tablet's width up. */
.settings-grid {
  display: grid;
  gap: var(--space-4);
  align-items: start;
  margin-block: var(--space-3) var(--space-4);
}

.settings-card {
  margin: 0;
  min-width: 0;
}

.settings-card .field {
  margin-block: var(--space-3);
}

.settings-card .helptext {
  margin-top: var(--space-1);
  font-size: 0.8125rem;
}

.settings-column {
  display: grid;
  gap: var(--space-4);
}

/* Short fields side by side, wrapping onto new lines when the card is narrow. */
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
}

.field-row > .field {
  flex: 1 1 7rem;
  min-width: 0;
}

/* An email address needs more room than a phone number. */
.field-row--contact > .field:last-child {
  flex: 2 1 14rem;
}

.field-row .field input,
.field-row .field select {
  width: 100%;
}

@media (min-width: 720px) {
  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Store hours: the week as a two-column table, today's row marked. */
.week-hours {
  width: 100%;
  margin-top: var(--space-3);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.week-hours th,
.week-hours td {
  padding: var(--space-1) 0;
  text-align: start;
  vertical-align: top;
}

.week-hours th {
  width: 8rem;
  font-weight: 600;
}

.week-hours__range {
  white-space: nowrap;
}

.week-hours__today th,
.week-hours__today td {
  color: var(--color-primary);
  font-weight: 700;
}

/* The hours editor: a popup with one row per day, Closed and up to two ranges. */
.hours-editor {
  box-sizing: border-box;
  width: min(58rem, calc(100% - 2 * var(--space-4)));
  max-height: calc(100% - 2 * var(--space-4));
  padding: var(--space-4);
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.hours-editor::backdrop {
  background-color: rgb(0 0 0 / 50%);
}

.no-js .hours-editor {
  display: block;
  position: static;
  width: auto;
  max-height: none;
  margin: var(--space-5) 0 0;
}

.hours-day {
  display: grid;
  grid-template-columns: 6.5rem 7rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.hours-day--head {
  padding-block: 0 var(--space-1);
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.hours-day__name {
  font-weight: 600;
}

.hours-day__closed {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
}

.hours-day__closed input {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 0;
  min-height: 0;
  margin: 0;
  accent-color: var(--color-primary);
}

.hours-day__range {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.hours-day__range input {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: var(--space-2);
}

.hours-day .errorlist {
  grid-column: 1 / -1;
  margin: 0;
}

/* A closed day's times don't count, so they step back (in a browser with :has()). */
.hours-day:has(.hours-day__closed input:checked) .hours-day__range {
  visibility: hidden;
}

.hours-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (max-width: 719.98px) {
  /* The day and Closed on one line, each range on a line of its own. */
  .hours-day {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hours-day--head {
    display: none;
  }

  .hours-day__range {
    grid-column: 1 / -1;
  }

  .hours-day:has(.hours-day__closed input:checked) .hours-day__range {
    display: none;
  }
}

/* Staff order board: one table of today's orders, newest first. A click anywhere in a row opens
   the order's popup; the row's link is the keyboard way in, and a 44px target on its own. */
/* Words break only where they must: "anywhere" (from body) would let the table squeeze a column
   down to one letter per line. A tablet's portrait width fits every column with the longer cells
   wrapped at their spaces. */
.order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.order-table th {
  padding: var(--space-1) 6px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: start;
}

.order-row {
  cursor: pointer;
}

.order-row:hover {
  background-color: #f6f5f8;
}

.order-row td {
  padding: 0 6px;
  border-bottom: 1px solid var(--color-border);
}

/* A NEW order is still waiting for someone to confirm it. A table row draws no border of its own
   in every browser, so the stripe sits on the first cell. */
.order-row--new td:first-child {
  box-shadow: inset 4px 0 0 var(--color-primary);
}

/* A NEW order that just arrived on a poll: a highlight that fades out. */
.order-row--fresh {
  animation: order-fresh 3s ease-out;
}

@keyframes order-fresh {
  from {
    background-color: var(--color-highlight);
  }

  to {
    background-color: transparent;
  }
}

/* Without motion the highlight stays, static, until the next poll replaces the row. */
@media (prefers-reduced-motion: reduce) {
  .order-row--fresh {
    animation: none;
    background-color: var(--color-highlight);
  }
}

.order-row__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 700;
  white-space: nowrap;
}

.order-row__total {
  font-weight: 600;
  white-space: nowrap;
}

/* A time such as "8:17 PM" never splits across lines. */
.order-row__placed,
.badge__time {
  white-space: nowrap;
}

/* The status: an icon (hidden from screen readers) and its label, on the board and the popup. */
.order-status {
  font-weight: 700;
  white-space: nowrap;
}

.order-status--new {
  color: var(--color-primary);
}

.order-status--confirmed,
.order-status--preparing,
.order-status--ready {
  color: #1b5e20;
}

.order-status--completed {
  color: var(--color-muted);
}

.order-status--rejected,
.order-status--cancelled {
  color: var(--color-danger);
}

.badge--scheduled {
  border-color: var(--color-info-border);
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* Below 720px (phones, and narrow tablets such as a 712px Galaxy Tab in portrait) the table
   becomes a stack of two-line cards, so nothing scrolls sideways or crowds; a 768px iPad keeps
   the table. Line one: order number, status and total; line two: customer, phone, placed time
   and pickup tag. The header row stays for screen readers only. */
@media (max-width: 719.98px) {
  .order-table,
  .order-table tbody {
    display: block;
  }

  .order-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .order-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-3);
    padding: 0 var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    border-left: 4px solid transparent;
  }

  .order-row--new {
    border-left-color: var(--color-primary);
  }

  .order-row td {
    display: block;
    padding: 0;
    border: 0;
  }

  .order-row--new td:first-child {
    box-shadow: none;
  }

  .order-row__number {
    order: 1;
  }

  /* Takes the room left on line one, wrapping a long label, so the total stays beside it. */
  .order-row__status {
    flex: 1 1 0;
    min-width: 0;
    order: 2;
  }

  .order-row__status .order-status {
    white-space: normal;
  }

  .order-row__total {
    order: 3;
    margin-inline-start: auto;
  }

  /* Ends line one. */
  .order-row::after {
    content: "";
    flex-basis: 100%;
    order: 4;
  }

  .order-row__name {
    order: 5;
  }

  .order-row__phone {
    order: 6;
  }

  .order-row__placed {
    order: 7;
  }

  .order-row__type {
    order: 8;
  }

  /* Every order is a pickup; only the scheduled tag says anything on a card. */
  .order-row__type-label {
    display: none;
  }

  .order-row__name,
  .order-row__phone,
  .order-row__placed {
    color: var(--color-muted);
  }
}

/* The order popup (board.html). Its close button stays in reach while the order scrolls. */
.order-dialog {
  width: min(36rem, calc(100% - 2 * var(--space-4)));
}

.order-dialog__close {
  position: sticky;
  top: 0;
  z-index: 1;
  float: right;
  margin-inline-start: var(--space-2);
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
}

#order-dialog-title {
  margin: var(--space-2) 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

/* Status, placed and pickup time at the top of an order, then the customer's name, phone and
   email in a second list on the same fixed columns, so the two read as one grid. Two columns on
   a phone. */
.order-facts {
  display: grid;
  grid-template-columns: 10rem 9rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0 0;
}

.order-facts dt {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.order-facts dd {
  margin: 0;
}

/* Every cell as tall as the 44px phone and email links, so the name lines up with them. */
.order-facts--customer {
  margin-top: var(--space-1);
}

.order-facts--customer dd {
  display: flex;
  align-items: center;
  min-height: var(--tap);
}

/* On a phone, the long ones -- a scheduled pickup time and the email -- take a whole row. */
@media (max-width: 719.98px) {
  .order-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-facts > div:nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* The section headings of an order (only Items is visible) are small labels. */
.order-detail .order-heading {
  margin: var(--space-4) 0 var(--space-1);
  color: var(--color-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The customer's notes: a callout, so the kitchen doesn't miss them. */
.order-notes {
  margin-block: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-info-border);
  border-radius: 0 var(--radius) var(--radius) 0;
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.order-notes__heading,
.order-notes p {
  display: inline;
  margin: 0;
  font-size: 1rem;
}

.order-notes__heading::after {
  content: " ";
}

/* Reject / Cancel order: the summary opens the reason field and the real submit button below
   it, inside the same row as the other actions. */
.order-actions {
  align-items: flex-start;
}

.order-reason {
  flex: 1 1 auto;
}

.order-reason > summary {
  list-style: none;
}

.order-reason > summary::-webkit-details-marker {
  display: none;
}

.order-reason[open] > summary {
  background-color: #fde8e7;
}

.order-reason__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.order-reason__form .field {
  flex: 1 1 12rem;
  margin: 0;
}

.order-history__heading {
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
}

.order-history ul {
  margin: var(--space-1) 0 var(--space-2);
  padding-inline-start: var(--space-4);
}

.order-history {
  margin-block: var(--space-4);
}

/* The notification settings page: the restaurant's alert list, then the customer messages, one
   block per event and a bordered group per channel. */
.notification-heading {
  margin: var(--space-4) 0 var(--space-1);
  font-size: 1.25rem;
}

.alert-recipient-list {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.alert-recipient {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.alert-recipient__address {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.alert-recipient__channel {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.alert-recipient form {
  margin: 0 0 0 auto;
}

.alert-recipient-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
}

.alert-recipient-form .field {
  flex: 1 1 16rem;
  margin: 0;
}

/* Customer messages: one row per event with its SMS and Email switches, and "Edit messages"
   opening both texts below the row. */
.rule-grid {
  margin-bottom: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.rule-event {
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

.rule-event__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

/* On a phone the event's name has the first line, beside "Edit messages", and the switches the
   second. */
.rule-event__title {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  min-height: var(--tap);
  margin: 0;
  padding-right: 9.5rem;
  font-size: 1rem;
}

.rule-switch {
  min-width: 6rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

.rule-switch input {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 0;
  min-height: 0;
  margin: 0;
  accent-color: var(--color-primary);
}

.rule-switch:has(input:checked) {
  border-color: var(--color-primary);
  background-color: #fde8e7;
}

.rule-editor > summary {
  position: absolute;
  top: var(--space-2);
  right: 0;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}

.rule-editor > summary::after {
  content: "▸";
  margin-left: var(--space-1);
}

.rule-editor[open] > summary::after {
  content: "▾";
}

.rule-editor__panel {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
}

.notification-rule {
  padding: var(--space-1) var(--space-3) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.notification-rule h4 {
  margin: var(--space-2) 0 0;
  font-size: 1rem;
}

/* A field's character limit sits on its label's line. */
.notification-rule .field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--space-2);
  margin-block: var(--space-2) 0;
}

.notification-rule .field > :not(label, .helptext) {
  grid-column: 1 / -1;
}

.notification-rule .field .helptext {
  grid-row: 1;
  grid-column: 2;
  margin: 0;
}

.helptext code {
  padding: 0 var(--space-1);
  border-radius: 4px;
  background-color: #f1f0f4;
  color: var(--color-text);
  font-size: 0.8125rem;
}

@media (min-width: 720px) {
  /* One line: the name, the switches, and "Edit messages" at the end. */
  .rule-event__row {
    padding-right: 10rem;
  }

  .rule-event__title {
    flex: 1 1 9rem;
    padding-right: 0;
  }

  .rule-editor[open] .rule-editor__panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The outcomes on the staff order page: one plain line each. */
.order-notifications {
  margin: 0;
  padding-inline-start: var(--space-4);
}

.order-history summary {
  min-height: var(--tap);
  padding-block: var(--space-2);
  font-weight: 600;
  cursor: pointer;
}

/* Order lookup: only the field for the selected "Look up by" choice shows. A browser without
   :has() (or without CSS) shows both, and the server reads only the selected one. */
.lookup-form:has(input[name="lookup_by"][value="email"]:checked) .lookup-field--phone,
.lookup-form:has(input[name="lookup_by"][value="phone"]:checked) .lookup-field--email {
  display: none;
}

.lookup-form button[type="submit"] {
  width: 100%;
  margin-block: var(--space-2) var(--space-5);
}

.order-history__order {
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.order-history__order h3 {
  margin: 0;
  font-size: 1.125rem;
}

.order-history__meta {
  margin: var(--space-1) 0 var(--space-2);
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* The order's total and its Reorder button share one row. */
.order-history__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}

.order-history__total {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.order-history__reorder {
  margin: 0;
}

.reorder-confirm {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block: var(--space-4);
}

/* Staff API key list: a table on tablets, a stack of cards below 720px (like the order board).
   The key prefix never splits across lines; times wrap at their spaces so a revoked row fits a
   768px tablet. */
.key-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  overflow-wrap: break-word;
}

.key-table th {
  padding: var(--space-1) 6px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: start;
}

.key-table td,
.key-table .key-row__label {
  padding: var(--space-2) 6px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.9375rem;
  vertical-align: middle;
}

.key-table .key-row__label {
  font-weight: 700;
}

.key-row__key {
  white-space: nowrap;
}

.key-row__name {
  display: none;
}

@media (max-width: 719.98px) {
  .key-table,
  .key-table tbody {
    display: block;
  }

  .key-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .key-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }

  .key-table td,
  .key-table .key-row__label {
    display: block;
    padding: 0;
    border: 0;
  }

  .key-row__label {
    flex: 1 1 100%;
  }

  .key-row__key,
  .key-row__created,
  .key-row__used {
    flex: 1 1 100%;
    color: var(--color-muted);
  }

  .key-row__name {
    display: inline;
  }

  .key-row__status {
    flex: 1 1 100%;
    font-weight: 600;
  }

  .key-row__actions:not(:empty) {
    margin-top: var(--space-2);
  }
}

/* The site's front page. The hero is a near-black band across the whole window (the dish photos
   are shot on black, so the dish floats in it); the welcome and the location and hours cards sit
   under it in the usual column. One column on a phone, the photo under the text; from 720px the
   photo sits beside it. */
.page--home .container {
  max-width: none;
  padding-inline: 0;
}

.home-hero {
  background-color: #141210;
  color: #ffffff;
}

.home-hero__inner,
.home-content {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.home-hero__inner {
  padding-bottom: var(--space-6);
}

.home-hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.home-hero__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-hero__body {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.home-hero__title {
  margin: var(--space-5) 0 var(--space-3);
  font-size: 2rem;
  line-height: 1.15;
}

.home-hero__lede {
  margin: 0 0 var(--space-5);
  color: #ddd8d2;
  font-size: 1.125rem;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.home-hero__ghost {
  border-color: currentcolor;
  background-color: transparent;
  color: #ffffff;
}

/* Faded at the edges, so the photo's own black never shows a seam against the band's. */
.home-hero__photo {
  display: block;
  width: 100%;
  max-width: 360px;
  justify-self: center;
  mask-image: radial-gradient(closest-side, #000 70%, transparent);
}

.home-welcome {
  max-width: 72ch;
  padding-top: var(--space-6);
}

.home-welcome h2 {
  margin: 0 0 var(--space-3);
  font-size: 1.375rem;
}

.home-welcome p {
  margin: 0;
  color: var(--color-muted);
}

.home-cards {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-5);
}

.home-card {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
}

.home-card__title {
  margin: 0 0 var(--space-3);
  font-size: 1.125rem;
}

/* A pill, as beside the menu page's "Store information" heading. */
.home-card__status {
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-3);
  border-color: transparent;
  border-radius: 999px;
  font-size: 0.875rem;
}

.home-card__contact {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-card .hours-table {
  margin: 0;
}

.home-card .hours-table th,
.home-card .hours-table td {
  border-bottom-color: var(--color-divider);
}

.home-card .hours-table tr:last-child > * {
  border-bottom: 0;
}

@media (min-width: 720px) {
  .home-hero__body {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .home-hero__title {
    font-size: 2.75rem;
  }

  .home-hero__photo {
    max-width: 480px;
  }

  .home-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}