/* ==========================================================================
   #s5 DATA COLLECTION — "Custom data collection, designed around your business
   or charity"
   Layout archetype: SPLIT, device LEFT / copy RIGHT (alternates from s3, which
   was copy-left / device-right; and distinct from s1 full-bleed, s2 centered
   cluster, s4 full-bleed centrepiece).

   PHASE B REBRAND: the SCREEN is now its own light/modern bistro brand,
   GREENSLATE KITCHEN (.mb mb--greenslate, the same brand as s4's ops dashboard:
   two faces of one custom system). All colour comes from the shared mock-brand
   kit (--mb-* vars in mock-brands.css), never the dark chrome tokens.

   Signature motion (ONE, UNCHANGED CONTRACT): a friendly table-feedback card
   FILLS ITSELF (progress bar climbs, a 4-POINT EMOJI scale lights up and the
   diner's pick settles, a follow-up reason chip selects) and then FLIPS into the
   bespoke "Least profitable dish" insight (the dish card resolves, the per-plate
   money-split bar grows its three segments, figures count up, the feedback->dish
   link lands). A single scrubbed property (--fill 0..1) set on .s5-stage drives
   the entire gesture; the flip happens past 0.62. Everything below is transform /
   opacity / scaleX / stroke only. Full reduced-motion + no-JS resting state at
   the bottom (result resolved).
   ========================================================================== */

#s5 { overflow: clip; }

#s5 .s5-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* ---- RIGHT: copy (mirrors s3's copy block, kept consistent) -------------- */
#s5 .s5-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: var(--sp-3);
}
#s5 .s5-eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
#s5 .s5-title {
  font-size: var(--fs-h2);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ice); text-wrap: balance;
}
#s5 .s5-title .accent { color: var(--gold-bright); font-style: italic; font-weight: 500; }
#s5 .s5-lead {
  margin-top: var(--sp-3);
  max-width: 46ch;
  color: var(--parchment-dim);
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
}

#s5 .s5-feats {
  list-style: none;
  margin-top: var(--sp-4);
  display: flex; flex-direction: column; gap: 14px;
}
#s5 .s5-feats li {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  color: var(--ice);
  line-height: 1.4;
}
#s5 .s5-feats__ic {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(196,162,101,0.10);
  border: 1px solid rgba(196,162,101,0.28);
}
#s5 .s5-feats__ic svg { width: 15px; height: 15px; }

/* the "they fill it in -> you see the insight" cue; b lights up after the flip */
#s5 .s5-cue {
  margin-top: var(--sp-5);
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--steel);
}
#s5 .s5-cue__step {
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--hairline);
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out), background .4s var(--ease-out);
}
#s5 .s5-cue__arrow { color: var(--gold-soft); text-transform: lowercase; letter-spacing: 1px; }
/* step A active before flip, step B active after — class toggled on the device */
#s5 .s5-cue__step--a { color: var(--ice); border-color: var(--hairline); }
#s5 .s5-device.is-flipped ~ * .s5-cue__step--b,
#s5 .s5-grid:has(.s5-device.is-flipped) .s5-cue__step--b {
  color: var(--bg);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-soft));
  border-color: transparent;
}
#s5 .s5-grid:has(.s5-device.is-flipped) .s5-cue__step--a {
  color: var(--steel); border-color: var(--hairline-soft);
}

/* ---- LEFT: the device stage --------------------------------------------- */
#s5 .s5-stage {
  --fill: 0;                 /* JS scrubs 0..1; reduced-motion forces 1 below */
  display: flex; justify-content: center;
}
#s5 .s5-device { width: min(260px, 62vw); }

/* the two stacked faces share the screen; --fill cross-fades between them.
   .s5-faces also carries the .mb mb--greenslate brand surface, so it fills the
   device screen as a light bistro "page" and exposes the --mb-* vars below. */
#s5 .s5-faces {
  position: absolute; inset: 0;
  border-radius: 28px; overflow: hidden;
}
#s5 .s5-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  /* top padding clears the phone notch via the shared --phone-safe token */
  padding: calc(12px + var(--phone-safe, 26px)) 15px 16px;
  gap: 12px;
  background: var(--mb-bg);
  color: var(--mb-text);
  will-change: transform, opacity;
}

/* progress through the flip: 0 until 0.62, then 0..1 across 0.62..1 */
#s5 .s5-stage { --rp: clamp(0, calc((var(--fill) - 0.62) / 0.38), 1); }

/* Sharpen the cross-fade so the two faces barely overlap mid-flip. Drive both
   directly off --fill (not off the chained --rp clamp, which some engines won't
   resolve when divided): the form clears across fill 0.58..0.74, the result
   lands across fill 0.66..0.92. They overlap only briefly mid-flip. */
#s5 .s5-stage {
  --form-out: clamp(0, calc((var(--fill) - 0.58) * 6.25), 1);  /* 0..1 over .58...74 */
  /* form's own opacity ramp DOWN: a direct clamp (assigned straight to opacity,
     never wrapped in calc(1 - clamp), which some engines refuse to resolve) */
  --form-in:  clamp(0, calc((0.74 - var(--fill)) * 6.25), 1);  /* 1..0 over .58...74 */
  --res-in:   clamp(0, calc((var(--fill) - 0.66) * 3.85), 1);  /* 0..1 over .66...92 */
}
/* FORM face: visible while filling, lifts + fades out as the result rises */
#s5 .s5-face--form {
  opacity: var(--form-in);
  transform: translateY(calc(var(--form-out) * -12%)) scale(calc(1 - var(--form-out) * 0.04));
  transition: opacity .12s linear;
}
/* RESULT face: hidden during fill, rises into place after the flip */
#s5 .s5-face--result {
  opacity: var(--res-in);
  transform: translateY(calc((1 - var(--res-in)) * 16%)) scale(calc(0.96 + var(--res-in) * 0.04));
  pointer-events: none;
}

/* ===== FORM FACE — Greenslate table feedback card ======================== */
#s5 .s5-form { display: flex; flex-direction: column; gap: 13px; height: 100%; }
#s5 .s5-form__head { display: flex; flex-direction: column; gap: 5px; }
#s5 .s5-form__brand {
  font-size: clamp(13px, 5.6cqw, 17px);
}
#s5 .s5-form__brand i { font-style: italic; font-weight: 500; color: var(--mb-accent-2); }
#s5 .s5-form__q {
  font-family: var(--mb-font-head); font-size: clamp(15px, 6cqw, 18px);
  line-height: 1.14; color: var(--mb-text); font-weight: 600; margin-top: 4px;
}
#s5 .s5-form__sub {
  font-family: var(--mb-font-num); font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--mb-text-soft);
}

/* progress bar — width via scaleX off --fill */
#s5 .s5-prog { display: flex; align-items: center; gap: 9px; }
#s5 .s5-prog__track {
  flex: 1; height: 6px; border-radius: 999px;
  background: var(--mb-surface-2); overflow: hidden;
}
#s5 .s5-prog__bar {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--mb-accent), var(--mb-accent-2));
  transform-origin: left center;
  transform: scaleX(var(--fill));
}
#s5 .s5-prog__pct {
  font-family: var(--mb-font-num); font-size: 10px; color: var(--mb-text);
  font-variant-numeric: tabular-nums; min-width: 30px; text-align: right;
}

/* ---- 4-POINT EMOJI SCALE ------------------------------------------------ */
#s5 .s5-rate { display: flex; flex-direction: column; gap: 8px; }
#s5 .s5-rate__lbl {
  font-family: var(--mb-font-num); font-size: 8.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--mb-text-soft);
}
#s5 .s5-emoji { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#s5 .s5-em {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1; border-radius: 12px;
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  /* each face lights once --fill crosses its share of the scale (e/4.4) */
  --lit: clamp(0, calc((var(--fill) * 4.4) - var(--e) + 1) * 999, 1);
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out),
              transform .35s var(--ease-out), box-shadow .3s var(--ease-out);
  transform: scale(calc(0.94 + var(--lit) * 0.06));
}
#s5 .s5-em svg { width: 64%; height: 64%; display: block; }
#s5 .s5-em svg > circle:first-child { /* the face disc */
  fill: var(--mb-surface-2);
  stroke: var(--mb-line); stroke-width: 1.5;
  transition: fill .3s var(--ease-out), stroke .3s var(--ease-out);
}
#s5 .s5-em__eye { fill: var(--mb-text-soft); transition: fill .3s var(--ease-out); }
#s5 .s5-em__mouth { stroke: var(--mb-text-soft); transition: stroke .3s var(--ease-out); }
/* lit faces gain brand colour */
#s5 .s5-em {
  border-color: color-mix(in srgb, var(--mb-accent) calc(var(--lit) * 45%), var(--mb-line));
}
#s5 .s5-em svg > circle:first-child {
  fill: color-mix(in srgb, var(--mb-accent-2) calc(var(--lit) * 16%), var(--mb-surface-2));
}
#s5 .s5-em__eye { fill: color-mix(in srgb, var(--mb-text) calc(var(--lit) * 100%), var(--mb-text-soft)); }
#s5 .s5-em__mouth { stroke: color-mix(in srgb, var(--mb-text) calc(var(--lit) * 100%), var(--mb-text-soft)); }

/* the chosen rating (3rd, "Just OK") settles SELECTED as the diner taps it,
   driven by the same fill so the screen reads as a real choice */
#s5 .s5-em[style*="--e:3"] {
  --pick: clamp(0, calc((var(--fill) - 0.40) * 12), 1);
  border-color: color-mix(in srgb, var(--mb-accent) calc(var(--pick) * 100%), var(--mb-line));
  background: color-mix(in srgb, var(--mb-accent) calc(var(--pick) * 12%), var(--mb-surface));
  box-shadow: 0 0 0 calc(var(--pick) * 2px) color-mix(in srgb, var(--mb-accent) 26%, transparent);
  transform: scale(calc(0.94 + var(--pick) * 0.12));
}
#s5 .s5-em[style*="--e:3"] svg > circle:first-child {
  fill: color-mix(in srgb, var(--mb-accent) calc(var(--pick) * 24%), var(--mb-surface-2));
}
#s5 .s5-em[style*="--e:3"] .s5-em__eye { fill: var(--mb-accent); }
#s5 .s5-em[style*="--e:3"] .s5-em__mouth { stroke: var(--mb-accent); }

/* tiny caption under the selected face */
#s5 .s5-em::after {
  content: attr(data-lbl);
  position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
  font-family: var(--mb-font-num); font-size: 7.5px; letter-spacing: .4px;
  white-space: nowrap; color: var(--mb-accent);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
#s5 .s5-em[style*="--e:3"]::after { opacity: var(--pick, 0); }

/* ---- follow-up reason chips (the "A bit rich" one settles selected) ----- */
#s5 .s5-reason { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
#s5 .s5-reason__lbl {
  font-family: var(--mb-font-num); font-size: 8.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--mb-text-soft);
}
#s5 .s5-reason__chips { display: flex; flex-wrap: wrap; gap: 6px; }
#s5 .s5-chip {
  font-family: var(--mb-font-body); font-size: 10px; font-weight: 500;
  padding: 5px 10px; border-radius: 999px;
  background: var(--mb-surface); color: var(--mb-text-soft);
  border: 1px solid var(--mb-line);
  /* each chip nudges in late in the fill; the 1st ("A bit rich") gets chosen */
  --on: clamp(0, calc((var(--fill) * 5) - var(--c) - 1.5) * 999, 1);
  transition: background .3s var(--ease-out), color .3s var(--ease-out),
              border-color .3s var(--ease-out), transform .3s var(--ease-out);
  transform: translateY(calc((1 - var(--on)) * 4px));
  opacity: calc(0.55 + var(--on) * 0.45);
}
#s5 .s5-chip[style*="--c:1"] {
  --sel: clamp(0, calc((var(--fill) - 0.50) * 12), 1);
  background: color-mix(in srgb, var(--mb-accent) calc(var(--sel) * 100%), var(--mb-surface));
  color: color-mix(in srgb, var(--mb-on-accent) calc(var(--sel) * 100%), var(--mb-text-soft));
  border-color: color-mix(in srgb, var(--mb-accent) calc(var(--sel) * 100%), var(--mb-line));
  opacity: calc(0.55 + max(var(--on), var(--sel)) * 0.45);
}

#s5 .s5-form__btn {
  margin-top: auto;
  text-align: center; padding: 11px; border-radius: 999px;
  font-family: var(--mb-font-body); font-size: 12px; font-weight: 600;
  letter-spacing: .02em;
  color: var(--mb-on-accent);
  background: var(--mb-accent);
  /* button "arms" as the card completes */
  opacity: calc(0.55 + var(--fill) * 0.45);
  transform: translateY(calc((1 - var(--fill)) * 4px));
}

/* ===== RESULT FACE — "Least profitable dish" bespoke insight ============= */
#s5 .s5-result { display: flex; flex-direction: column; gap: 11px; height: 100%; }
#s5 .s5-result__head { display: flex; align-items: center; gap: 8px; }
#s5 .s5-result__title {
  font-family: var(--mb-font-num); font-size: 9.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mb-text-soft);
}
#s5 .s5-result__live {
  margin-left: auto; font-family: var(--mb-font-num); font-size: 8px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--mb-accent);
  border: 1px solid color-mix(in srgb, var(--mb-accent) 34%, transparent);
  border-radius: 999px; padding: 3px 8px;
}

/* ---- the named dish card ------------------------------------------------ */
#s5 .s5-dish {
  display: flex; align-items: center; gap: 11px;
  background: var(--mb-surface); border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius); padding: 9px; box-shadow: var(--mb-shadow);
}
#s5 .s5-dish__thumb {
  flex: none; width: 46px; height: 46px; border-radius: 9px;
  background: var(--mb-surface-2) url("./img/greenslate-dish.webp") center/cover no-repeat;
  border: 1px solid var(--mb-line);
}
#s5 .s5-dish__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#s5 .s5-dish__name {
  font-family: var(--mb-font-head); font-size: 14px; font-weight: 600;
  color: var(--mb-text); line-height: 1.05;
}
#s5 .s5-dish__sub {
  font-family: var(--mb-font-num); font-size: 9px; color: var(--mb-text-soft);
  font-variant-numeric: tabular-nums;
}
#s5 .s5-dish__margin {
  margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 1px;
}
#s5 .s5-dish__margin-num {
  font-family: var(--mb-font-num); font-weight: 600; font-size: 19px; line-height: 1;
  font-variant-numeric: tabular-nums;
  /* a low margin reads as a warning: warm-amber accent */
  color: #b4512f;
}
#s5 .s5-dish__margin-lbl {
  font-family: var(--mb-font-num); font-size: 7.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--mb-text-soft);
}

/* ---- per-plate money split: ONE stacked bar (cost / waste / profit) ----- */
#s5 .s5-break { display: flex; flex-direction: column; gap: 7px; }
#s5 .s5-break__lbl {
  font-family: var(--mb-font-num); font-size: 8px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--mb-text-soft);
}
#s5 .s5-break__bar {
  display: flex; height: 13px; border-radius: 7px; overflow: hidden;
  background: var(--mb-surface-2); gap: 2px;
}
#s5 .s5-break__seg {
  height: 100%; transform-origin: left center;
  /* segments grow with the reveal; widths via flex-basis * --rp */
  flex: 0 0 calc(var(--w) * 100% * var(--rp));
  transition: none;
}
#s5 .s5-break__seg--cost   { background: var(--mb-accent); }            /* sage */
#s5 .s5-break__seg--waste  { background: #c87a3a; }                     /* warm warning */
#s5 .s5-break__seg--profit { background: color-mix(in srgb, var(--mb-accent-2) 70%, #ffffff); }
#s5 .s5-break__key {
  display: flex; flex-direction: column; gap: 4px;
}
#s5 .s5-break__k {
  display: flex; align-items: baseline; gap: 7px;
  font-family: var(--mb-font-body); font-size: 9.5px; color: var(--mb-text-soft);
}
#s5 .s5-break__k::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px;
  transform: translateY(1px);
}
#s5 .s5-break__k b {
  font-family: var(--mb-font-num); font-weight: 600; color: var(--mb-text);
  font-variant-numeric: tabular-nums; min-width: 38px;
}
#s5 .s5-break__k--cost::before   { background: var(--mb-accent); }
#s5 .s5-break__k--waste::before  { background: #c87a3a; }
#s5 .s5-break__k--profit::before { background: color-mix(in srgb, var(--mb-accent-2) 70%, #ffffff); }
#s5 .s5-break__k--waste b { color: #b4512f; }

/* ---- the two diagnostic figures ----------------------------------------- */
#s5 .s5-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#s5 .s5-stat {
  background: var(--mb-surface); border: 1px solid var(--mb-line);
  border-radius: 10px; padding: 9px 10px; display: flex; flex-direction: column; gap: 3px;
}
#s5 .s5-stat__num {
  font-family: var(--mb-font-num); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: 18px; color: var(--mb-text); line-height: 1;
}
#s5 .s5-stat__lbl {
  font-family: var(--mb-font-num); font-size: 7.5px; letter-spacing: .8px;
  text-transform: uppercase; color: var(--mb-text-soft);
}

/* ---- the bespoke link: feedback tags -> this exact dish ----------------- */
#s5 .s5-link {
  margin-top: auto;
  display: flex; align-items: flex-start; gap: 9px;
  background: color-mix(in srgb, var(--mb-accent) 8%, var(--mb-surface));
  border: 1px solid color-mix(in srgb, var(--mb-accent) 26%, var(--mb-line));
  border-radius: var(--mb-radius); padding: 9px 10px;
}
#s5 .s5-link__ic {
  flex: none; width: 18px; height: 18px; color: var(--mb-accent); margin-top: 1px;
}
#s5 .s5-link__ic svg { width: 100%; height: 100%; display: block; }
#s5 .s5-link__txt {
  font-family: var(--mb-font-body); font-size: 10.5px; line-height: 1.35;
  color: var(--mb-text);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 880px) {
  #s5 .s5-grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 7vw, 48px);
  }
  /* device first on mobile so the form-to-result reads before the copy */
  #s5 .s5-stage { order: -1; }
  #s5 .s5-device { width: min(248px, 70vw); }
  #s5 .s5-lead { max-width: none; }
  #s5 .s5-cue { margin-top: var(--sp-4); }
}

@media (max-width: 420px) {
  #s5 .s5-cue { flex-wrap: wrap; gap: 8px; }
}

/* ==========================================================================
   REDUCED MOTION + NO-JS RESTING STATE
   Resolve to the RESULT face, fully revealed. The JS forces --fill:1 under
   reduced motion and lands the counters; with JS off the form sits at 0 and we
   must NOT leave a blank/empty screen, so we resolve to the result here too.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #s5 .s5-stage { --fill: 1 !important; }
  #s5 .s5-face--form { opacity: 0 !important; }
  #s5 .s5-face--result { opacity: 1 !important; transform: none !important; }
  #s5 .s5-break__seg { flex-basis: calc(var(--w) * 100%) !important; }
  #s5 .s5-grid:has(.s5-device) .s5-cue__step--b {
    color: var(--bg);
    background: linear-gradient(180deg, var(--gold-bright), var(--gold-soft));
    border-color: transparent;
  }
}

/* no-JS guard (parity with s4): if the inline script never runs, resolve to the
   filled result so the screen is never left blank. The inline s5 script always
   runs (it is inline, not deferred) and drives --fill, so this is a safety net. */
html.no-js #s5 .s5-stage { --fill: 1; }
html.no-js #s5 .s5-face--form { opacity: 0; }
html.no-js #s5 .s5-face--result { opacity: 1; transform: none; }
html.no-js #s5 .s5-break__seg { flex-basis: calc(var(--w) * 100%); }