:root {
  --bg: #f4f2ee;
  --card-bg: #ffffff;
  --border: #ddd6cb;
  --text: #2c2620;
  --text-muted: #8a7f6f;
  --accent: #b5461e;
  --accent-hover: #943916;
  --danger: #a83232;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  padding: 1.5rem 1rem 1rem;
  text-align: center;
}

header h1 {
  margin: 0;
  font-size: 1.6rem;
}

.subtitle {
  color: var(--text-muted);
  margin: 0.25rem 0 0;
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.main-nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding-bottom: 0.15rem;
  border-bottom: 2px solid transparent;
}

.main-nav a.current {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
}

.card h2 {
  margin-top: 0;
  font-size: 1.15rem;
}

.field-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  flex: 2;
}

.field-small {
  flex: 1;
  min-width: 90px;
}

input {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
}

input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

textarea {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  resize: vertical;
}

textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.closed-message-field {
  margin-top: 1rem;
}

.field-help {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* A day with no service reads as such from across the room. */
.day-closed {
  border-color: var(--danger);
}

.day-closed textarea {
  border-color: var(--danger);
}

.notice {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #fbf1ec;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

.sides-section {
  margin-top: 1rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.75rem;
}

.sides-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sides-header h3 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

#add-side,
#add-time {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.side-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
  align-items: center;
}

/* A flex item will not shrink below the width its content wants unless it is told to,
   which is what pushed this row — and the card around it — off the side of a phone. */
.side-row input {
  flex: 2;
  min-width: 0;
}

.side-row .field-small {
  flex: 1;
  min-width: 0;
}

/* On a phone the description takes the whole width and the unit, the price and the
   remove button share the line below it. Three fields abreast on 390px leaves each one
   too narrow to read what you typed. */
@media (max-width: 719px) {
  .side-row .side-description {
    flex: 1 1 100%;
  }
}

.remove-side {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.3rem;
}

.form-actions {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.5rem;
}

button.primary {
  flex: 1;
  padding: 0.65rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

button.primary:hover {
  background: var(--accent-hover);
}

button.secondary {
  padding: 0.65rem 1rem;
  background: none;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

button.secondary:hover {
  background: var(--bg);
}

.hidden {
  display: none;
}

.edit-item {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.85rem;
}

.empty-state {
  color: var(--text-muted);
  font-style: italic;
}

.menu-hint {
  margin: 1rem 0 0;
  padding: 0.6rem 0.75rem;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  background: #fbf1ec;
  color: var(--text);
  font-size: 0.85rem;
}

.dishes-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dish-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
}

.dish-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

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

.dish-extra {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.85rem;
}

.dish-price {
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.delete-dish {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 0.85rem;
}

.side-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
  padding-left: 0.75rem;
}

.time-row .time-value {
  flex: 1;
}

.daily-dishes {
  margin-top: 1rem;
}

/* The card is the wrapper, not the row: a button cannot hold a number field, so the box
   sits beside the row inside one border and reads as part of the same item. */
.daily-dish-holder {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card-bg);
}

.daily-dish,
.daily-line {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  user-select: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  text-align: left;
}

/* One dish and its combinados, with a handle to drag the whole dish at once. */
.daily-dish-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Lifted out of the flow and following the finger. */
.daily-dish-group.dragging {
  box-shadow: 0 8px 24px rgba(44, 38, 32, 0.25);
  border-radius: 10px;
  background: var(--card-bg);
}

/* The gap the dragged dish will drop into. */
.daily-drag-placeholder {
  border: 2px dashed var(--accent);
  border-radius: 10px;
  background: #fbf1ec;
}

.daily-dish-lines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.daily-group-label {
  margin: 0 0 0.1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Combinados collapse under a toggle so a dish is one short, easy-to-drag row. */
.daily-combos-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0.15rem 0;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.daily-combos-toggle-active {
  color: var(--accent);
  font-weight: 600;
}

.daily-combos-caret {
  display: inline-block;
  width: 1em;
}

.daily-combos-count {
  color: var(--accent);
  font-weight: 600;
}

.daily-combos {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--border);
}

/* This rule comes after .hidden, so it has to re-assert the hide with more weight. */
.daily-combos.hidden {
  display: none;
}

.daily-dish-holder:active {
  background: var(--bg);
}

.daily-dish-holder:has(.daily-dish-chosen) {
  border-color: var(--accent);
  background: #fbf1ec;
}

.daily-dish-title {
  flex: 1;
}

.daily-dish-mark {
  visibility: hidden;
  color: var(--accent);
  font-weight: 700;
}

.daily-dish-chosen .daily-dish-mark {
  visibility: visible;
}

button.primary:disabled {
  background: var(--border);
  cursor: default;
}

.order-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
}

.order-line-title {
  flex: 1;
}

/* The carta row reuses the order line's layout — name on the left, price on the right,
   allergens and ingredients wrapping onto their own line below — but it is read-only, so
   none of the pointer, selection or quantity behaviour comes with it. */
.carta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.order-line-chosen {
  border-color: var(--accent);
}

.order-line:active {
  background: var(--bg);
}

.order-line-amount {
  min-width: 1.6rem;
  text-align: right;
  font-weight: 600;
  color: var(--accent);
}

.order-line-remove {
  position: absolute;
  top: -0.55rem;
  right: -0.55rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--danger);
  color: white;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1.25rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.9rem;
}

.time-options-label {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.time-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.time-option {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
}

.time-option.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 600;
}

.order-total {
  margin: 0;
  font-weight: 600;
}

.order-summary {
  margin-top: 1rem;
}

.order-summary .side-item {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--text);
  padding-left: 0;
}

.order-summary-total {
  display: flex;
  justify-content: space-between;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
  font-size: 1.05rem;
}

.order-total span:last-child {
  color: var(--accent);
}

.drop-point-slug {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
}

.drop-point-slug:hover {
  color: var(--accent);
}

.time-option.closed {
  color: var(--text-muted);
  background: var(--bg);
  text-decoration: line-through;
  cursor: not-allowed;
}

.kitchen-status {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.kitchen-status-live {
  color: var(--accent);
  border-color: var(--accent);
}

.kitchen-status-down {
  color: var(--danger);
  border-color: var(--danger);
}

.kitchen-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.kitchen-group-header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.kitchen-group-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kitchen-chip {
  font-size: 0.8rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

/* A batch nobody has to cook any more steps back visually without disappearing. */
.kitchen-group-ready {
  border-color: var(--accent);
}

.kitchen-group-ready .kitchen-group-count {
  color: var(--accent);
}

.kitchen-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
}

.kitchen-line:active {
  background: var(--bg);
}

.kitchen-line-title {
  flex: 1;
}

.kitchen-count {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* Done is an achievement, not a dead control: the line keeps its full contrast and
   picks up the same chosen look the daily menu uses. */
.kitchen-line-done {
  border-color: var(--accent);
  background: #fbf1ec;
}

.kitchen-line-done .kitchen-count {
  font-size: 1.4rem;
}

.kitchen-undo {
  position: absolute;
  top: -0.55rem;
  right: -0.55rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--text-muted);
  color: white;
  font-size: 0.9rem;
  /* The arrow glyph sits high in its own box, so the badge centres it as a flex item
     instead of trusting the line box. */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
}

.kitchen-undo.hidden {
  display: none;
}

/* Desktop only: the phone layout below 720px stays exactly as it is. */
@media (min-width: 720px) {
  main {
    max-width: 1080px;
  }

  .dishes-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    column-gap: 0.75rem;
  }

  /* Rows of one-line items look ragged when a long name wraps, so every card in
     these two lists takes the height of the tallest one. */
  #daily-dishes,
  #order-lines,
  .kitchen-group .dishes-list {
    grid-auto-rows: 1fr;
  }

  /* The board is read from across the kitchen, so its cards spread over the whole
     width instead of leaving empty tracks like the lists the staff read up close. */
  .kitchen-group .dishes-list {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

.day-picker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.day-picker input {
  flex: 1;
}

.day-picker button {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.day-picker button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* A family's name, sitting above the dishes that belong to it. It spans the whole grid so
   the family below it starts on a fresh row instead of continuing mid-line. Painted in the
   brand colour with an underline so a family reads as a clear header, well apart from the
   plain dish lines under it — the first one keeps a smaller top gap so it does not float. */
.line-group-heading {
  margin: 1.4rem 0 0.35rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--accent);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.line-group-heading:first-child {
  margin-top: 0.25rem;
}

@media (min-width: 720px) {
  .line-group-heading {
    grid-column: 1 / -1;
  }
}

/* A dish with no price is a group; the list says so where the price would be. */
.dish-group-tag {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* A plate that just arrived. The flash fades on its own, so a cook who looks up a few
   seconds later sees a normal board rather than a permanent badge to dismiss. */
@keyframes kitchen-arrived {
  from {
    background: #f7d9cc;
    border-color: var(--accent);
  }
  to {
    background: var(--card-bg);
    border-color: var(--border);
  }
}

.kitchen-line-new {
  animation: kitchen-arrived 2.5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .kitchen-line-new {
    animation: none;
    border-color: var(--accent);
  }
}

/* The list above these can run to ninety lines, so the action stays on screen instead of
   waiting at the bottom of it. Sticky rather than fixed: the bar keeps its place in the
   flow, so it never covers the last row, and it stops sticking at the end of its own
   card — which is what a page with several forms needs. */
.form-actions,
.sticky-actions {
  position: sticky;
  bottom: 0;
  background: var(--card-bg);
  padding-bottom: 0.25rem;
}

.sticky-actions {
  /* The wrapper sticks as one piece; the footer and the buttons inside it would otherwise
     stick separately and sit on top of each other. */
  padding-top: 0.1rem;
}

.sticky-actions .form-actions {
  position: static;
  padding-bottom: 0;
}

/* A line scrolling underneath must not read through the bar. */
.form-actions::before,
.sticky-actions::before {
  content: '';
  display: block;
  border-top: 1px solid var(--border);
  margin-bottom: 0.75rem;
}

.sticky-actions .form-actions::before {
  content: none;
}

/* The summary card's buttons are the end of a short card; a bar there would only add a
   line above two buttons nobody has to hunt for. */
#summary-card .form-actions {
  position: static;
}

#summary-card .form-actions::before {
  content: none;
}

/* Small and fixed: stretched to the row's height it dwarfed everything next to a name
   that wrapped over four lines. */
.daily-dish-stock {
  width: 4rem;
  height: 2rem;
  flex: none;
  padding: 0.25rem 0.4rem;
  font-size: 0.9rem;
  text-align: right;
}

/* How many are left, under the name. Absolutely positioned so adding one never changes
   the height of the row, the same reason the amount has a fixed width. */
.order-line-left {
  position: absolute;
  left: 0.9rem;
  bottom: 0.1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.order-line:has(.order-line-left:not(:empty)) {
  padding-bottom: 1.4rem;
}

/* Nothing left: the row stays readable but stops being a control. */
.order-line-sold-out {
  background: var(--bg);
  cursor: not-allowed;
}

.order-line-sold-out .dish-title,
.order-line-sold-out .dish-price {
  color: var(--text-muted);
}

.order-line-sold-out .order-line-left {
  color: var(--danger);
}

/* The counter line: one tap sells one, so the whole row is the control and the two small
   buttons sit out of the way of a thumb aiming at it. */
.counter-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
  padding-right: 2.6rem;
}

.counter-line:active {
  background: var(--bg);
}

.counter-line-title {
  flex: 1;
  min-width: 0;
}

.counter-breakdown {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.counter-count {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.counter-line-empty {
  background: var(--bg);
}

.counter-line-empty .counter-count {
  color: var(--text-muted);
}

/* Sold more than there was: an order placed through the app is going to come up short,
   and nobody would find out until the round went out. */
.counter-line-short {
  border-color: var(--danger);
}

.counter-short {
  color: var(--danger);
  font-weight: 600;
}

.counter-add {
  position: absolute;
  bottom: -0.55rem;
  right: -0.55rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
}

/* Allergens and ingredients under the name. Always there rather than behind a control:
   tapping the row adds to the order, and nobody with an allergy should have to open
   dishes one at a time to find out. */
.order-line-details {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.allergen-tag {
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--danger);
  border-radius: 999px;
  color: var(--danger);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.order-line-ingredients {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* The order line has to wrap now that a second row hangs under the name. */
.order-line {
  flex-wrap: wrap;
}

/* The multiselect in Gestión: a chip has the shape of the tag it becomes on the carta,
   so what is marked is what will be seen. */
.allergen-field {
  margin-top: 1rem;
}

.allergen-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.allergen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.allergen-chip {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.allergen-chip-on {
  border-color: var(--danger);
  background: #fbeceb;
  color: var(--danger);
  font-weight: 600;
}

.details-field {
  margin-top: 0.75rem;
}

/* A side carries its own, so its row grows a second and third line on a phone. */
.side-row .side-ingredients,
.side-row .allergen-chips {
  flex: 1 1 100%;
  min-width: 0;
}

/* Says whether this screen will make a sound when an order comes in, and fixes it when
   the browser is holding the sound back until somebody touches the page. */
.chime-button {
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  vertical-align: middle;
}

.chime-button-muted {
  color: var(--text-muted);
}

/* Not an error, but it does need a tap, so it asks for one rather than sitting quiet. */
.chime-button-blocked {
  border-color: var(--accent);
  color: var(--accent);
}

/* Carta: the category filter bar. Chips scroll horizontally and stick to the top so the
   categories stay reachable while the list scrolls. */
.carta-categories {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}

.carta-chip {
  flex: 0 0 auto;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.carta-chip-on {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* Gestión: the single free-text category field on the dish form. */
#tag-input {
  width: 100%;
}

/* Menú del día: the per-day ordering list. */
.daily-order {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.daily-order-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* The grab handle: touch-action none so dragging it never scrolls the page. */
.drag-handle {
  flex: 0 0 auto;
  cursor: grab;
  touch-action: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.2rem 0.3rem;
  user-select: none;
}

.daily-order-row.dragging {
  opacity: 0.6;
  border-color: var(--accent);
  cursor: grabbing;
}

/* The carta scrolls as a normal page — so pull-to-refresh keeps working — with the category
   bar stuck to the top, reachable however far down the dishes you are. A line under it marks
   where the fixed part ends and the list begins. */
.carta-categories {
  border-bottom: 1px solid var(--border);
}