/* =====================================================================
   menu-builder.css
   The Cuisine menu (#cuisine-menu) — read-only view for guests, builder
   for the owner. It is a ROW of the "What's Included" panel: a <li> inside
   #playdate-info's <ul>, so it folds away with the rest of the card.
   That puts it OUTSIDE #product-profile, where panel-refresh.css declares
   the --ft-* tokens — so we re-declare them here and the menu looks the
   same wherever it sits. Loaded after custom-whats-included.css.
   ===================================================================== */

#cuisine-menu {
  /* Same values as panel-refresh.css — the menu no longer inherits them. */
  --ft-coral:        #ff5a5f;
  --ft-coral-dark:   #e14e50;
  --ft-coral-soft:   #fff1f1;
  --ft-ink:          #1f2937;
  --ft-muted:        #6b7280;
  --ft-faint:        #9ca3af;
  --ft-surface:      #ffffff;
  --ft-soft:         #f7f9fc;
  --ft-border:       rgba(15, 23, 42, 0.08);
  --ft-border-2:     rgba(15, 23, 42, 0.12);
  --ft-radius:       16px;
  --ft-radius-sm:    10px;
  --ft-shadow:       0 1px 2px rgba(15, 23, 42, 0.05);
  --ft-ease:         cubic-bezier(.22, 1, .36, 1);

  /* Warm wash behind the menu window — this is a food card, not a form. */
  --menu-tint:       #fff7f4;
}

/* Beats the `display: flex` the panel puts on every row. */
#cuisine-menu[hidden] { display: none !important; }

/* ------------------------------------------------- row inside the panel
   The row is the panel's own flex line: "Menu:" label, then the edit pill
   pushed to the far right by #playdate-info .menu-icon's margin-left:auto.
   The body then wraps onto a line of its own, full width. */
#playdate-info > ul > li#cuisine-menu {
  align-items: center;
}
#playdate-info > ul > li#cuisine-menu > #cuisine-menu-body {
  flex: 1 1 100%;      /* force a new line under the label + pill */
}
/* Only pay for the gap when there is something under the label. */
#playdate-info > ul > li#cuisine-menu > #cuisine-menu-body:not(:empty) {
  margin-top: 10px;
}

/* ------------------------------------------------------- scroll frame
   A five-course menu is taller than the whole rest of the panel, so the
   body is a window, not a list: capped height, its own scrollbar. Guarded
   by :not(:empty) so a tour with no menu doesn't draw an empty box, and
   `overscroll-behavior` keeps a flick at the end of the menu from carrying
   on into the page scroll. */
#cuisine-menu #cuisine-menu-body:not(:empty) {
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  border: 1px solid var(--ft-border, rgba(15, 23, 42, 0.08));
  border-radius: var(--ft-radius-sm, 10px);
  background:
    linear-gradient(180deg, var(--menu-tint, #fff7f4) 0%, var(--ft-surface, #fff) 120px);
  box-shadow: inset 0 -8px 12px -10px rgba(15, 23, 42, 0.18);  /* hints "more below" */
}

/* View mode lays the courses out as cards with breathing room. */
#cuisine-menu:not(.is-editing) #cuisine-menu-body:not(:empty) {
  display: grid;
  gap: 10px;
  align-content: start;
}

/* The builder needs more room, and Save/Cancel must never scroll away. */
#cuisine-menu.is-editing #cuisine-menu-body:not(:empty) {
  max-height: 460px;
}

/* Scrollbar — thin, coral thumb, so it reads as part of the card. */
#cuisine-menu #cuisine-menu-body {
  scrollbar-width: thin;
  scrollbar-color: var(--ft-coral, #ff5a5f) transparent;
}
#cuisine-menu #cuisine-menu-body::-webkit-scrollbar { width: 8px; }
#cuisine-menu #cuisine-menu-body::-webkit-scrollbar-track {
  background: transparent;
}
#cuisine-menu #cuisine-menu-body::-webkit-scrollbar-thumb {
  background: rgba(255, 90, 95, 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
#cuisine-menu #cuisine-menu-body:hover::-webkit-scrollbar-thumb {
  background: var(--ft-coral, #ff5a5f);
  background-clip: content-box;
}

/* On a hike the menu row is hidden but still the last <li>, so the panel's
   `li:last-child { border-bottom: 0 }` lands on it and "Must Bring" is left
   with a divider under nothing. Take it off the last VISIBLE row instead. */
#playdate-info > ul:has(> li#cuisine-menu[hidden]) > li:nth-last-child(2) {
  border-bottom: 0;
}

#cuisine-menu .cuisine-menu__empty {
  color: var(--ft-faint, #9ca3af);
  font-size: 0.92rem;
  margin: 0;
}

/* ---------------------------------------------------------------- view
   Each course carries its own accent, cycling through a four-colour palette
   so Starter / Mains / Dessert are told apart at a glance instead of being
   one long grey ribbon. Everything below reads --course-accent, so adding a
   colour is a one-line change here, not a rewrite of the card. */
#cuisine-menu .cuisine-course {
  --course-accent:      var(--ft-coral, #ff5a5f);   /* coral  */
  --course-accent-soft: var(--ft-coral-soft, #fff1f1);

  background: var(--ft-surface, #fff);
  border: 1px solid var(--ft-border, rgba(15, 23, 42, 0.08));
  border-left: 4px solid var(--course-accent);
  border-radius: var(--ft-radius-sm, 10px);
  box-shadow: var(--ft-shadow, 0 1px 2px rgba(15, 23, 42, 0.05));
  padding: 12px 14px;
}
#cuisine-menu .cuisine-course:nth-child(4n + 2) {   /* amber  */
  --course-accent: #f59e0b;
  --course-accent-soft: #fff8eb;
}
#cuisine-menu .cuisine-course:nth-child(4n + 3) {   /* teal   */
  --course-accent: #0d9488;
  --course-accent-soft: #effcf9;
}
#cuisine-menu .cuisine-course:nth-child(4n + 4) {   /* violet */
  --course-accent: #7c3aed;
  --course-accent-soft: #f6f3ff;
}

#cuisine-menu .cuisine-course__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
#cuisine-menu .cuisine-course__head h4 {
  margin: 0;
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--course-accent);
  text-transform: capitalize;   /* "starter" typed lowercase still reads as a heading */
}
#cuisine-menu .cuisine-course__rule {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--course-accent);
  background: var(--course-accent-soft);
  border: 1px solid var(--course-accent);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
#cuisine-menu .cuisine-course__desc {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--ft-muted, #6b7280);
}

#cuisine-menu .cuisine-options {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
#cuisine-menu .cuisine-option {
  background: var(--course-accent-soft);
  border: 1px solid var(--ft-border, rgba(15, 23, 42, 0.08));
  border-radius: var(--ft-radius-sm, 10px);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.15s var(--ft-ease, ease), box-shadow 0.15s ease;
}
#cuisine-menu .cuisine-option:hover {
  box-shadow: 0 4px 14px -6px var(--course-accent);
  transform: translateY(-1px);
}
#cuisine-menu .cuisine-option__label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ft-ink, #1f2937);
}
#cuisine-menu .cuisine-option__note {
  font-size: 0.85rem;
  color: var(--ft-muted, #6b7280);
}
#cuisine-menu .cuisine-ings {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
#cuisine-menu .cuisine-ing {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--course-accent);
  background: var(--ft-surface, #fff);
  border: 1px solid var(--course-accent);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ------------------------------------------------------------- builder */
#cuisine-menu .cm-builder { display: grid; gap: 14px; }

#cuisine-menu .cm-course {
  border: 1px dashed var(--ft-border-2, rgba(15, 23, 42, 0.12));
  border-radius: var(--ft-radius-sm, 10px);
  padding: 12px;
  display: grid;
  gap: 8px;
  background: #fff;
}
#cuisine-menu .cm-course__head { display: flex; gap: 8px; align-items: center; }
#cuisine-menu .cm-course__head .cm-input { font-weight: 700; }

#cuisine-menu .cm-input {
  width: 100%;
  border: 1px solid var(--ft-border-2, rgba(15, 23, 42, 0.12));
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ft-ink, #1f2937);
  background: #fff;
}
#cuisine-menu .cm-input--sm { font-size: 0.85rem; padding: 6px 9px; }
#cuisine-menu .cm-input:focus,
#cuisine-menu .cm-num:focus {
  outline: none;
  border-color: var(--ft-coral, #ff5a5f);
  box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.15);
}

#cuisine-menu .cm-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--ft-muted, #6b7280);
}
#cuisine-menu .cm-rule label { font-weight: 700; }
#cuisine-menu .cm-num {
  width: 56px;
  border: 1px solid var(--ft-border-2, rgba(15, 23, 42, 0.12));
  border-radius: 8px;
  padding: 5px 6px;
  font: inherit;
  font-size: 0.85rem;
  text-align: center;
}
#cuisine-menu .cm-rule__hint { color: var(--ft-faint, #9ca3af); }

#cuisine-menu .cm-options { display: grid; gap: 8px; }
#cuisine-menu .cm-option {
  background: var(--ft-soft, #f7f9fc);
  border-radius: 8px;
  padding: 8px;
  display: grid;
  gap: 6px;
}
#cuisine-menu .cm-option__row { display: flex; gap: 6px; align-items: center; }

#cuisine-menu .cm-x {
  flex: none;
  width: 30px;
  height: 30px;
  line-height: 1;
  font-size: 1.1rem;
  border: 1px solid var(--ft-border-2, rgba(15, 23, 42, 0.12));
  border-radius: 8px;
  background: #fff;
  color: var(--ft-muted, #6b7280);
}
#cuisine-menu .cm-x:hover {
  border-color: var(--ft-coral, #ff5a5f);
  color: var(--ft-coral, #ff5a5f);
  background: var(--ft-coral-soft, #fff1f1);
}

#cuisine-menu .cm-add {
  justify-self: start;
  border: 1px dashed var(--ft-border-2, rgba(15, 23, 42, 0.12));
  background: #fff;
  color: var(--ft-muted, #6b7280);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
}
#cuisine-menu .cm-add:hover {
  border-color: var(--ft-coral, #ff5a5f);
  color: var(--ft-coral, #ff5a5f);
}

/* The body scrolls now, so an un-pinned action bar would sit below the fold
   at the bottom of a long menu — the owner would scroll hunting for "Save".
   Stick it to the bottom of the window instead. */
#cuisine-menu .cm-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  bottom: -12px;                 /* cancels the body's 12px padding */
  z-index: 1;
  margin: 0 -12px -12px;         /* bleed to the frame's edges */
  padding: 10px 12px;
  background: var(--ft-surface, #fff);
  border-top: 1px solid var(--ft-border, rgba(15, 23, 42, 0.08));
  border-radius: 0 0 var(--ft-radius-sm, 10px) var(--ft-radius-sm, 10px);
}
#cuisine-menu .cm-save {
  background: var(--ft-coral, #ff5a5f);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 9px 20px;
  font-weight: 700;
  font-size: 0.9rem;
}
#cuisine-menu .cm-save:hover { background: var(--ft-coral-dark, #e14e50); }
#cuisine-menu .cm-cancel {
  background: none;
  border: 0;
  color: var(--ft-muted, #6b7280);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: underline;
}
#cuisine-menu .cm-status { font-size: 0.82rem; color: var(--ft-muted, #6b7280); }
#cuisine-menu .cm-status--error { color: #b91c1c; font-weight: 700; }

@media (max-width: 600px) {
  #cuisine-menu .cuisine-course__head { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Less viewport to spend — a 360px window would swallow the whole screen. */
  #cuisine-menu #cuisine-menu-body:not(:empty)            { max-height: 280px; }
  #cuisine-menu.is-editing #cuisine-menu-body:not(:empty) { max-height: 340px; }
}

/* Someone who's asked for less motion doesn't want cards lifting on hover. */
@media (prefers-reduced-motion: reduce) {
  #cuisine-menu .cuisine-option { transition: none; }
  #cuisine-menu .cuisine-option:hover { transform: none; }
}