/* Set up your stall (Phase 1, step 2c): the checklist, the photo and the cook picker. */

.setup__progress { margin-bottom: var(--space-5); }

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

.step {
  background: var(--surface);
  border: var(--outline-w) solid var(--border);
  border-radius: var(--radius);
}

.step--done { border-color: var(--leaf-700); }
.step--later { background: var(--surface-sunk); border-style: dashed; color: var(--text-muted); }

/* Each step's heading row: number, title, and whether it's done. */
.step summary,
.step__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
}

.step summary { cursor: pointer; list-style: none; }
.step summary::-webkit-details-marker { display: none; }
.step summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }

.step__number {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--ink-900);
  background: var(--accent-yellow);
  border: 2px solid var(--outline);
  border-radius: 50%;
  font: 600 var(--fs-base) / 1 var(--font-display);
}

.step--done .step__number { background: var(--leaf-300); }
.step--later .step__number { background: var(--surface); border-color: var(--border); color: var(--text-muted); }

.step__title { flex: 1; font-weight: 800; }

/* Done, To do or Coming soon, in words (not only colour). */
.step__state {
  flex: none;
  padding: .15rem .6rem;
  color: var(--text);
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.step--done .step__state { color: var(--success-text); background: var(--success-bg); }

.step__body { padding: 0 var(--space-3) var(--space-4); }
.step__note { margin: 0 0 var(--space-3); color: var(--text-muted); }
.step__area { color: var(--text); }
.step__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.input--short { max-width: 10rem; letter-spacing: .1em; }

/* The stall photo, and the story under it. */
.step__story { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 2px dashed var(--card-border); }
.send__page { margin: var(--space-3) 0 0; }
.step__photo { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 2px dashed var(--card-border); }

.step__photo-preview {
  display: block;
  width: 100%;
  max-height: 320px;
  margin: var(--space-2) 0;
  /* The whole photo, never cut off: tall photos get plain bands at the sides. */
  object-fit: contain;
  background: var(--surface-sunk);
  border: 2px solid var(--outline);
  border-radius: var(--radius);
}

.step__photo-button:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.step__photo-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* The cooks: a grid of pictures, each a big tap target. The tiles stay light in dark mode,
   like picture cards, so the cooks look the same either way. */
.cook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cook {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-1) var(--space-2);
  background: var(--sky-50);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.cook__picture { width: 100%; height: auto; aspect-ratio: 240 / 322; object-fit: contain; }
.cook__name { font-size: var(--fs-xs); font-weight: 800; line-height: 1.2; text-align: center; color: var(--ink-900); }

.cook:has(input:checked) {
  background: var(--sunshine-100);
  border-color: var(--outline);
  box-shadow: 0 3px 0 var(--outline);
}

/* A tick on the chosen cook, so it isn't shown by colour alone. */
.cook:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--ink-900);
  background: var(--leaf-300);
  border: 2px solid var(--outline);
  border-radius: 50%;
  font-weight: 900;
  line-height: 1;
}

.cook:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (min-width: 560px) {
  .cook-grid { grid-template-columns: repeat(5, 1fr); }
}

/* The outfit chips, with the chosen cook beside them so the change shows straight away. */
.outfit { display: flex; align-items: center; gap: var(--space-3); }

.outfit__preview {
  flex: none;
  width: 72px;
  height: auto;
  background: var(--sky-50);
  border: 2px solid var(--outline);
  border-radius: var(--radius-sm);
}


/* "That web address is taken": choose another name, or use it with a number. */
.address-taken {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  color: var(--warning-text);
  background: var(--warning-bg);
  border-radius: var(--radius);
}

.address-taken p { margin: 0 0 var(--space-1); overflow-wrap: anywhere; }

/* A dish's sizes (step 5): "What you get" and the price side by side, with Remove below. */
.sizes {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.size {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  gap: 0 var(--space-2);
  padding: var(--space-3) var(--space-3) 0;
  background: var(--surface-sunk);
  border-radius: var(--radius);
}

.size .field { margin-bottom: var(--space-3); }
.size__remove { grid-column: 1 / -1; margin-bottom: var(--space-3); }
.size__remove[hidden] { display: none; }

/* Send for approval, under the steps. */
.send { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 2px dashed var(--card-border); }
.send h2 { margin-top: 0; }

/* Your numbers (step 9): four tiles, two to a row on phones. */
.numbers { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 2px dashed var(--card-border); }
.numbers__title { margin: 0 0 var(--space-1); }
.numbers__label { margin: 0 0 var(--space-3); color: var(--text-muted); }
.numbers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
@media (min-width: 30rem) { .numbers__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.numbers__tile {
  padding: var(--space-3);
  text-align: center;
  background: var(--surface-sunk);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-lg);
}
.numbers__tile--follow { border-color: var(--secondary); }
.numbers__tile dt { font-size: var(--fs-xs); font-weight: 800; color: var(--text-muted); }
.numbers__tile dd { margin: var(--space-1) 0 0; font-size: var(--fs-xl); font-weight: 800; }
.numbers__hint { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* "Your stall is open!": a small bounce, unless the person prefers less movement. */
.send__party { border: 2px solid var(--leaf-700); }
@media (prefers-reduced-motion: no-preference) {
  .send__party { animation: party-pop .6s ease-out both; }
}
@keyframes party-pop {
  0% { transform: scale(.9); opacity: 0; }
  60% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); }
}

/* The menu (step 5): each dish with its switch and buttons. The form shows instead while a
   dish is being added or changed. */
.menu__count { margin: 0 0 var(--space-2); font-weight: 800; }

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

.menu__dish {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: start;
  padding: var(--space-3);
  background: var(--surface);
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
}

.menu__dish--off { background: var(--surface-sunk); border-style: dashed; border-color: var(--border); }
.menu__dish--off .menu__photo { filter: grayscale(1); opacity: .6; }

.menu__photo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--surface-sunk);
  border: 2px solid var(--outline);
  border-radius: var(--radius-sm);
}

.menu__info { display: grid; gap: var(--space-1); min-width: 0; }
.menu__name, .menu__prices { overflow-wrap: anywhere; }
.menu__prices { color: var(--text-muted); font-size: var(--fs-sm); }
.menu__off { font-size: var(--fs-sm); font-weight: 800; }

.menu__switch, .menu__actions, .menu__confirm { grid-column: 1 / -1; }

.menu__actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.menu__button { min-height: var(--tap); padding-inline: .6rem; font-size: var(--fs-base); }
.menu__confirm { display: grid; gap: var(--space-2); }
.menu__confirm p { margin: 0; font-weight: 800; }

.dish-form__title { margin: 0 0 var(--space-3); }
.dish-form__title:focus { outline: none; }
.dish-form__title:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.dish-form__cancel { margin-top: var(--space-2); }

@media (min-width: 560px) {
  .menu__actions { grid-template-columns: repeat(4, 1fr); }
}

/* Taking orders (Phase 2, step 1). */
.orders { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 2px dashed var(--card-border); }
.orders h2 { margin-top: 0; }