/* Your Flow kit v1: the plate step (port of proto/css/step-plate.css). Styles only .yf-plate-* classes,
   and the shared tab, option and stepper classes only as children of its own (section 4.12 rule 2).
   Every colour is a token; no colour literal appears here. */

.yf-plate-body { --yf-plate-stage-h: clamp(220px, 34vh, 300px); display: flex; flex-direction: column; gap: 18px; }
@supports (height: 1svh) {
  .yf-plate-body { --yf-plate-stage-h: clamp(220px, 34svh, 300px); }
}

/* ---- menu tabs: a scrolling row from 600px, stacked full-width rows below it ---- */
.yf-plate-tabs .yf-tab { display: flex; align-items: center; gap: 8px; }
.yf-plate-tabs .yf-tab__sublabel { font-weight: 600; color: var(--yf-muted); }
.yf-plate-tabs .yf-tab[aria-selected="true"] .yf-tab__sublabel { color: inherit; }

/* ---- the plate on its dark stage, and the compact estimate (phones hide it above 600px) ---- */
.yf-plate-stage { display: flex; align-items: center; justify-content: center; padding: 22px; min-height: 220px; }
.yf-plate-stage > svg { width: 200px; height: 200px; max-width: 100%; }
.yf-plate-stage--text { min-height: 0; padding: 16px; }
.yf-plate-estimate-sticky { display: none; }

.yf-plate-fallback { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px; }
.yf-plate-fallback__row {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--yf-radius-control);
  border: 1.5px dashed var(--yf-stage-line);
  color: var(--yf-on-stage-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* ---- the option lists ---- */
.yf-plate-options { display: flex; flex-direction: column; }
.yf-plate-section { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--yf-ink-soft); }
.yf-plate-list { margin-bottom: 18px; }
.yf-plate-list:last-child { margin-bottom: 0; }
.yf-plate-options .yf-option__body { min-width: 0; }
.yf-plate-options .yf-option__detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yf-plate-dietary { display: block; margin-top: 2px; font-size: 12px; color: var(--yf-muted); }
.yf-plate-option-photo { width: 56px; height: 56px; border-radius: var(--yf-radius-control); object-fit: cover; flex: none; }
.yf-plate-menu-photo { display: block; width: 100%; max-height: 180px; margin-bottom: 12px; border-radius: var(--yf-radius); object-fit: cover; }
.yf .yf-plate-plain-list { margin: 0 0 18px; padding-left: 20px; list-style: disc; font-size: 14px; color: var(--yf-ink-soft); }
.yf .yf-plate-plain-list:last-child { margin-bottom: 0; }
.yf .yf-plate-plain-list li { margin: 0 0 2px; }

.yf-plate-guests { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }

/* ---- the estimate: the amount stays mounted and rolls between values ---- */
.yf-plate-estimate { display: flex; flex-direction: column; gap: 2px; padding-top: 16px; border-top: 1.5px solid var(--yf-line); }
.yf-plate-estimate__label { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--yf-muted); text-transform: uppercase; letter-spacing: .04em; }
.yf-plate-estimate__amount {
  margin: 2px 0 0;
  font-family: var(--yf-font-display);
  font-weight: var(--yf-weight-display);
  font-size: 28px;
  color: var(--yf-ink);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--yf-dur-1) var(--yf-ease), transform var(--yf-dur-1) var(--yf-ease);
}
.yf-plate-estimate__amount.yf-plate-rolling-out { opacity: 0; transform: translateY(calc(var(--yf-motion-distance) * -1)); }
.yf-plate-estimate__amount.yf-plate-rolling-in { opacity: 0; transform: translateY(var(--yf-motion-distance)); }
.yf-plate-estimate__detail { margin: 2px 0 0; font-size: 13px; color: var(--yf-ink-soft); }
.yf-plate-estimate__fineprint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--yf-muted); }

/* A failed save's line is brought into view clear of the compact estimate (about 50px) and the action bar below it. */
.yf-plate-status { margin: 0; font-size: 13px; font-weight: 600; color: var(--yf-danger); }
.yf-plate-status, .yf-plate-fallback-host { scroll-margin-bottom: calc(var(--yf-plate-bar, 0px) + 80px); }
.yf-plate-fallback-host:empty { display: none; }

.yf-plate-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 20px; text-align: center; }
.yf-plate-empty .yf-note { margin: 0; }

/* ---- phone width, read from the flow's own container so a narrow host frame gets it too ---- */
@container yf (max-width: 599px) {
  .yf-plate-tabs .yf-tabs { flex-direction: column; overflow-x: visible; padding-bottom: 0; border-bottom: none; gap: 8px; }
  .yf-plate-tabs .yf-tab {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 12px 14px;
    text-align: left;
    color: var(--yf-ink);
    background: var(--yf-surface);
    border: 1.5px solid var(--yf-line-strong);
    border-radius: var(--yf-radius-control);
  }
  .yf-plate-tabs .yf-tab[aria-selected="true"] {
    background: var(--yf-ground-2);
    border-color: var(--wp-accent);
    box-shadow: inset 0 0 0 1.5px var(--wp-accent);
  }
  /* These rows are not clipped, so their focus ring keeps its usual place outside the row. */
  .yf .yf-plate-tabs .yf-tab:focus-visible { outline-offset: 2px; }
  .yf-plate-tabs .yf-tab__label { position: relative; min-width: 0; padding-left: 22px; font-size: 14px; overflow-wrap: anywhere; }
  .yf-plate-tabs .yf-tab__sublabel { flex: none; font-size: 13px; white-space: nowrap; }
  /* The chosen menu is marked by a drawn check, not by tint alone (no glyph). */
  .yf-plate-tabs .yf-tab[aria-selected="true"] .yf-tab__label::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    width: 9px;
    height: 5px;
    margin-top: -5px;
    border-left: 2px solid var(--wp-accent);
    border-bottom: 2px solid var(--wp-accent);
    transform: rotate(-45deg);
  }

  /* Keep the plate in sight while choosing, and the estimate just above the action bar. The plate keeps its
     approved size (200px at most) on linen all round, whatever height the stage takes. */
  .yf-plate-stage { position: sticky; top: 0; z-index: 2; height: var(--yf-plate-stage-h); min-height: 220px; padding: 12px; }
  .yf-plate-stage > svg { width: auto; height: min(100%, 200px); max-height: 100%; }
  .yf-plate-stage--text { height: auto; min-height: 0; padding: 12px; }
  .yf-plate-estimate-sticky {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    position: sticky;
    bottom: var(--yf-plate-bar, 0px);
    z-index: 2;
    margin: 0 0 4px;
    padding: 10px 0 8px;
    background: var(--yf-ground);
    border-top: 1.5px solid var(--yf-line);
  }
  .yf-plate-estimate-sticky__label { font-size: 12px; font-weight: 700; color: var(--yf-muted); text-transform: uppercase; letter-spacing: .04em; }
  .yf-plate-estimate-sticky__amount {
    font-family: var(--yf-font-display);
    font-weight: var(--yf-weight-display);
    font-size: 19px;
    color: var(--yf-ink);
    font-variant-numeric: tabular-nums;
  }
  /* A focused control scrolls clear of the sticky plate above it and the estimate and action bar
     below it. The margin sits on the control itself (the browser scrolls the focused input, not
     its row), and allows for the rest of the row around it. */
  .yf-plate-options .yf-option input,
  .yf-plate-guests .yf-stepper button {
    scroll-margin-top: calc(var(--yf-plate-stage-h) + 28px);
    scroll-margin-bottom: calc(var(--yf-plate-bar, 0px) + 160px);
  }
}

/* A short window (a phone turned sideways, or a page zoomed in) has no room to pin anything, and
   the full estimate is only a scroll away. */
@media (max-height: 599px) {
  .yf-plate-stage { position: static; height: auto; }
  .yf-plate-estimate-sticky { display: none; }
  .yf-plate-options .yf-option input,
  .yf-plate-guests .yf-stepper button { scroll-margin-top: 0; scroll-margin-bottom: 0; }
}