/* ===========================================================================
   MeeTup by Dr Su — brand theme
   Palette sampled from the logo artwork: deep forest green wordmark, gold
   flower + hairline rules, an olive leaf accent, on a warm cream ground.
   Playfair Display (high-contrast display serif) + Hanken Grotesk (UI sans).

   NOTE ON TOKEN NAMES — the custom-property names below are LEGACY/HISTORICAL.
   They date from the previous burnt-orange "Garden Conservatory" theme and are
   referenced from dozens of templates, so the names were kept and only their
   VALUES re-pointed. Read them by role, not by name:
     --orange / --orange-deep .... PRIMARY BRAND GREEN (all CTAs, active states)
     --sage ...................... secondary olive (labels, success/ready)
     --gold ...................... functional bronze-gold (price/premium TEXT)
     --gold-orn / --gold-2 ....... true logo gold, ORNAMENT only (never text)
     --clay / --clay-deep ........ ALERT ONLY (paused, sold out, late, destroy)
   The well-named --brand/--forest/--leaf tokens are the source of truth; the
   legacy names alias them so both spellings stay in sync.
   =========================================================================== */
:root{
  /* ---- Brand, straight off the logo ---- */
  --forest:#1F2E17;      /* wordmark ink — exact logo green */
  --brand:#2F4A22;       /* interactive green: logo ink lifted so a solid
                            button reads inviting rather than funereal */
  --brand-deep:#1F2E17;  /* hover/pressed — settles back onto the logo ink */
  --leaf:#617B13;        /* exact logo leaf — small accents only */
  --gold-orn:#C6964E;    /* exact logo gold — flower/rules/ornament, NOT text */
  --gold-rule:#E3CAA6;   /* exact logo hairline-rule gold */

  /* ---- Alert family: deliberately NOT the brand green, so warnings,
          sold-out badges and late tickets never read as "just another
          branded button". Terracotta keeps the old orange's urgency. ---- */
  --clay:#B4552B;
  --clay-deep:#8F3F1D;
  --clay-wash:#FBEADF;
  --clay-line:#F0D3C0;

  /* ---- Neutrals, tuned to the logo's cream ---- */
  --sand:#EFE7DB;
  --cream:#FCF7F1;       /* exact logo background */
  --card:#FFFCF7;
  --ink:var(--forest);   /* 13.5:1 on cream — AAA */
  --ink-2:#55604C;       /* 6.2:1 — AA (was 5.2:1) */
  --muted:#7E8875;       /* 3.5:1 — tertiary (was 2.3:1) */
  --faint:#8F9886;       /* 2.8:1 — decorative only (was 2.0:1) */

  /* ---- Legacy aliases (see note above) ---- */
  --orange:var(--brand);
  --orange-deep:var(--brand-deep);
  --gold:#8A6224;        /* bronze-gold for TEXT: 5.1:1 AA. The true logo gold
                            (--gold-orn) is only 2.5:1 and fails as type. */
  --gold-2:var(--gold-rule);
  --sage:#5E7233;        /* 5.0:1 on cream, 5.3:1 white-on-fill — AA both ways */
  --blush:#F5EBDA;       /* was pink; now a soft gold wash (total panel) */

  --line:#E7DFD1;
  --line-2:#DDD4C3;
  --line-3:#EAE3D6;
  --line-4:#E0D8C8;
  --line-5:#D2CBB9;
}

*{ -webkit-tap-highlight-color:transparent; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--sand); color:var(--ink);
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.serif{ font-family:'Playfair Display', Georgia, serif; }
.tabnum{ font-variant-numeric:tabular-nums; }
.ico{ width:16px; height:16px; display:inline-block; vertical-align:middle; flex:0 0 auto; }
.ico-sm{ width:12px; height:12px; }
.ico-lg{ width:26px; height:26px; }

/* Gilded trellis — the logo's gold hairline rules, as a fine lattice.
   Uses the TRUE logo gold (--gold-orn, 198,150,78): pure ornament, never
   carries meaning or text, so it is exempt from the text-contrast floor. */
.trellis{
  background-image:
    repeating-linear-gradient(45deg, rgba(198,150,78,.55) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(198,150,78,.55) 0 1px, transparent 1px 13px);
}

/* The ordering column — phone-in-hand on desktop, full-bleed on mobile.
   flex:1 1 480px (not the flexbox default width:auto) keeps this a fixed
   480px column inside the .shell flex row — otherwise a flex item with no
   basis shrink-wraps to its content, so the column's width would drift
   between steps depending on how wide that step's grid happens to be. */
.app{
  max-width:480px; margin:0 auto; min-height:100vh; position:relative;
  background:var(--cream);
  box-shadow:0 0 90px -24px rgba(31,46,23,.26);
  flex:1 1 480px; min-width:0;
}

/* Wide-screen shell: order-progress rail beside the phone-width app column.
   The rail hides below 900px — the topbar's own horizontal dots (.progress)
   already cover mobile, where there isn't room for a second nav. */
.shell{ display:flex; justify-content:center; align-items:flex-start; min-height:100vh; }
.rail{ display:none; }
@media (min-width:900px){
  .shell{ gap:32px; padding:32px 0; }
  .app{ margin:0; box-shadow:0 0 60px -20px rgba(31,46,23,.20); border-radius:18px; overflow:hidden; }
  .rail{ display:block; position:sticky; top:32px; width:236px; flex:0 0 auto; }
}

.rail-nav{ background:var(--card); border:1px solid var(--line-3); border-radius:18px; padding:20px 18px; }
.rail-brand{ padding:0 4px 16px; border-bottom:1px solid var(--line-3); margin-bottom:16px; }
.rail-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.rstep{ position:relative; }
.rstep .rline{ position:absolute; left:15px; top:-16px; width:2px; height:16px; background:var(--line-4); }
.rstep .rline.fill{ background:var(--sage); }
.rstep button{
  width:100%; display:flex; align-items:flex-start; gap:12px; text-align:left;
  background:transparent; border:none; cursor:pointer; font-family:inherit; padding:8px 4px; border-radius:10px;
}
.rstep button:not(:disabled):hover{ background:var(--sand); }
.rstep button:disabled{ cursor:default; }
.rdot{
  width:32px; height:32px; border-radius:999px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; border:1.5px solid var(--line-5); color:var(--faint); background:var(--card); transition:.15s;
}
.rtext{ display:flex; flex-direction:column; gap:2px; min-width:0; padding-top:5px; }
.rtitle{ font-size:12.5px; font-weight:700; color:var(--ink-2); letter-spacing:-.005em; }
.rstatus{ font-size:10.5px; color:var(--faint); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rstep.active .rdot{ background:var(--orange); border-color:var(--orange); color:#fff; }
.rstep.active .rtitle{ color:var(--ink); }
.rstep.active .rstatus{ color:var(--orange); }
.rstep.pay.ready .rdot{ background:var(--gold); border-color:var(--gold); color:#fff; }
.rstep.pay.ready .rstatus{ color:var(--gold); }

/* ---- Build Your Own sub-steps, revealed under the rail item once active ---- */
.rail-substeps{ list-style:none; margin:2px 0 4px 20px; padding:2px 0 2px 14px; border-left:1.5px solid var(--line-3); display:flex; flex-direction:column; }
.rsubstep button{
  width:100%; display:flex; align-items:flex-start; gap:9px; text-align:left;
  background:transparent; border:none; cursor:pointer; font-family:inherit; padding:6px 4px; border-radius:8px;
}
.rsubstep button:hover{ background:var(--sand); }
.rsubdot{
  width:22px; height:22px; border-radius:999px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:800; border:1.5px solid var(--line-5); color:var(--faint); background:var(--card);
}
.rsubtext{ display:flex; flex-direction:column; gap:1px; min-width:0; padding-top:2px; }
.rsubtitle{ font-size:11.5px; font-weight:700; color:var(--ink-2); }
.rsubstatus{ font-size:9.5px; color:var(--faint); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rsubstep.active .rsubdot{ background:var(--orange); border-color:var(--orange); color:#fff; }
.rsubstep.active .rsubtitle{ color:var(--ink); }
.rsubstep.active .rsubstatus{ color:var(--orange); }

/* ---- Rail drinks quick-add ---- */
.rail-menu{ display:flex; flex-direction:column; gap:6px; }
.rail-menu-head{ font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); padding:2px 4px 4px; }

.rail-drink{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:12px; }
.rail-drink-mono{
  width:28px; height:28px; border-radius:999px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--sage); color:#fff; font-size:12px; font-weight:800; font-family:'Playfair Display',Georgia,serif;
}
.rail-drink-body{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.rail-drink-name{ font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-drink-price{ font-size:10.5px; color:var(--muted); }
.qty-stepper{ display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.qty-btn{
  width:22px; height:22px; border-radius:999px; border:1.5px solid var(--line-5); background:var(--card);
  color:var(--ink-2); font-weight:800; font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.qty-btn:hover:not(:disabled){ border-color:var(--orange); color:var(--orange); }
.qty-btn:disabled{ opacity:.4; cursor:default; }
.qty-val{ font-size:12px; font-weight:800; min-width:12px; text-align:center; }
.rail-menu-total{
  display:flex; justify-content:space-between; font-size:11px; font-weight:800; letter-spacing:.06em;
  padding:8px 8px 2px; margin-top:4px; border-top:1px dashed var(--line-4); color:var(--ink);
}

/* ---- Sticky header stack ---- */
/* Sticky lives on #topbar (parent = full-height .app) so the whole header —
   incl. the composition banner — stays pinned for the entire scroll. Styling
   by id keeps it applied to the htmx OOB-swapped #topbar too. */
/* Sticky header. On scroll-down we slide the whole bar up by the (measured) head
   height via TRANSFORM — GPU-composited, no reflow — so the composition banner
   lands at the top smoothly and never jitters. Toggled via body.head-hidden so
   it survives htmx OOB swaps of #topbar. */
#topbar{ position:sticky; top:0; z-index:50; transition:transform .34s cubic-bezier(.4,0,.2,1); will-change:transform; }
.topbar{ background:rgba(252,247,241,.93); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-3); }
.topbar-head{ transition:opacity .24s ease; }
body.head-hidden #topbar{ transform:translateY(calc(-1 * var(--head-h, 120px))); }
body.head-hidden .topbar-head{ opacity:0; }
.brandrow{ display:flex; align-items:flex-end; justify-content:space-between; padding:18px 22px 9px; }
/* ---- Wordmark ----
   One solid word in the logo's forest ink, set in the display serif. The old
   two-tone .mee/.tup split is retired: the real logo is a single colour.
   The family is baked in here (rather than relying on a .serif class) so every
   instance picks it up without touching markup. */
.wordmark{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:700; font-size:22px; line-height:.9; letter-spacing:-.015em;
  color:var(--forest);
}
/* "By Dr Su" — soft, normal-case small serif, as on the logo. Deliberately
   NOT .brand-sub (which is tracked uppercase) so the three-line lockup reads
   MeeTup / by Dr Su / tagline, exactly like the artwork.
   .brand-by is a SIBLING of .wordmark, not a child, so em units here would
   resolve against the plain wrapper div (16px) rather than the wordmark's
   inline size — hence a fixed default, with per-instance px overrides on the
   larger wordmarks, matching how .brand-sub is already handled. Target ratio
   is ~0.45x the wordmark size, as measured off the logo artwork. */
.brand-by{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:400; font-size:11px; line-height:1.1; letter-spacing:.005em;
  color:var(--brand); margin-top:4px;
}
.brand-sub{ font-size:9px; color:var(--sage); font-weight:700; letter-spacing:.22em; text-transform:uppercase; margin-top:5px; }
.total-amt{ font-weight:700; font-size:19px; letter-spacing:-.01em; line-height:1; }
.total-amt .cur{ font-size:11px; color:var(--gold); margin-right:3px; font-weight:600; }
.total-count{ font-size:9px; color:var(--muted); font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-top:4px; }

/* ---- Progress dots ---- */
.progress{ display:flex; padding:11px 22px 12px; }
.pstep{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:2px;
  background:transparent; border:none; cursor:pointer; font-family:inherit; }
.pdot{ width:24px; height:24px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; flex:0 0 auto; transition:.15s; border:1.5px solid transparent; }
.plabel{ font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.pstep.active .pdot{ background:var(--orange); color:#fff; }
.pstep.active .plabel{ color:var(--ink); }
.pstep.todo  .pdot{ background:transparent; border-color:var(--line-5); color:var(--faint); }
.pstep.pay.ready  .pdot{ background:var(--gold); color:#fff; }
.pstep.pay.ready  .plabel{ color:var(--gold); }
.pstep.pay.active .pdot{ background:var(--orange); color:#fff; }
.pstep:disabled{ cursor:default; }

/* ---- Live composition banner ---- */
.comp{ position:relative; height:132px; overflow:hidden; border-top:1px solid var(--line-3); }
.comp img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.comp .veil{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,23,18,.12) 0%, rgba(26,23,18,0) 28%, rgba(26,23,18,.84) 100%); }
.comp-body{ position:absolute; left:22px; right:22px; bottom:15px; display:flex; align-items:flex-end;
  justify-content:space-between; gap:12px; color:var(--cream); }
.comp-eyebrow{ font-size:9px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-2); margin:0 0 5px; }
.comp-name{ font-weight:500; font-size:23px; line-height:1; letter-spacing:-.01em; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.comp-sub{ font-size:11px; color:rgba(252,247,241,.86); margin:5px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thumbs{ flex:0 0 auto; display:flex; align-items:center; }
.thumb{ width:34px; height:34px; border-radius:999px; overflow:hidden; border:2px solid var(--cream);
  background:var(--sand); box-shadow:0 2px 7px rgba(0,0,0,.32); flex:0 0 auto; }
.thumb + .thumb, .thumb-more{ margin-left:-12px; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb-more{ width:34px; height:34px; border-radius:999px; background:rgba(26,23,18,.72); border:2px solid var(--cream);
  color:var(--cream); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.tier-badge{ position:absolute; top:12px; right:18px; z-index:5; display:flex; align-items:center; gap:7px;
  padding:4px 11px 4px 5px; border-radius:999px; background:rgba(26,23,18,.5); backdrop-filter:blur(5px);
  box-shadow:0 6px 16px -6px rgba(26,23,18,.6); animation:badgepop .34s cubic-bezier(.2,.85,.25,1) both; }
.tier-badge img{ width:30px; height:30px; flex:0 0 auto; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.tier-badge span{ font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#FCF7F1; }

/* ---- Course body ---- */
/* Bottom padding clears the fixed .actionbar (~90px tall) plus a notch's
   safe-area inset, so the last row of content (e.g. Standard Menu's dish
   grid) never sits hidden/unclickable behind it. */
.course{ padding:20px 22px calc(112px + env(safe-area-inset-bottom, 0px)); }
.course-kicker{ font-size:10px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin:0 0 7px; }
.course-title{ font-weight:500; font-size:27px; line-height:1; letter-spacing:-.01em; margin:0 0 8px; }
.course-blurb{ font-size:13.5px; color:var(--ink-2); margin:0 0 26px; line-height:1.55; }

.menu-choice{
  display:flex; flex-direction:column; align-items:flex-start; gap:9px; text-align:left;
  background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:24px 18px;
  cursor:pointer; font-family:inherit; transition:border-color .16s;
}
.menu-choice:hover{ border-color:var(--orange); }
.menu-choice-ico{
  width:44px; height:44px; border-radius:12px; background:var(--sand); color:var(--orange);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.menu-choice-title{ font-size:19px; font-weight:500; }
.menu-choice-desc{ font-size:12px; color:var(--ink-2); line-height:1.5; }

.group{ margin-bottom:30px; }
.group-head{ display:flex; align-items:baseline; justify-content:space-between; padding-bottom:10px;
  border-bottom:1px solid var(--line-2); margin-bottom:15px; }
.group-head .lhs{ display:flex; align-items:baseline; gap:9px; }
.group-num{ font-weight:500; font-size:13px; color:var(--gold); }
.group-label{ font-weight:700; font-size:12px; letter-spacing:.13em; text-transform:uppercase; }
.group-meta{ font-size:11px; color:var(--sage); font-weight:600; letter-spacing:.03em; }
.group-count{ font-family:'Playfair Display',Georgia,serif; font-size:14px; font-weight:500; color:var(--line-5); }
.group-count.has{ color:var(--sage); }

.grid{ display:grid; gap:10px; }
.grid.g2{ grid-template-columns:repeat(2,1fr); }
.grid.g3{ grid-template-columns:repeat(3,1fr); }

.dish{ position:relative; display:flex; flex-direction:column; text-align:left; background:var(--card);
  border-radius:14px; overflow:hidden; cursor:pointer; padding:0 0 6px; font-family:inherit;
  border:1px solid var(--line); box-shadow:0 1px 2px rgba(31,46,23,.05);
  transition:box-shadow .16s, border-color .16s; }
.dish:hover{ border-color:var(--line-5); }
.dish:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.dish.on{ border-color:var(--orange); box-shadow:0 0 0 1.5px var(--orange) inset, 0 8px 20px -12px rgba(47,74,34,.5); }
.dish.max{ opacity:.42; }
.dish-media{ position:relative; display:block; width:100%; background:var(--sand); overflow:hidden; border-radius:13px 13px 0 0; }
.g2 .dish-media{ aspect-ratio:4/5; }
.g3 .dish-media{ aspect-ratio:1/1; }
.dish-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dish-media .ph{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; color:var(--muted); }
.dish-media.is-fallback .ph{ display:flex; }
.dish-media .ph svg{ width:26px; height:26px; opacity:.5; }
.dish-tint{ position:absolute; inset:0; background:rgba(47,74,34,.16); }
.dish-check{ position:absolute; top:8px; right:8px; width:23px; height:23px; border-radius:6px;
  background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.3); animation:fadein .26s cubic-bezier(.2,.8,.2,1) both; }
.dish-check svg{ width:12px; height:12px; }
.dish-body{ padding:10px 10px 2px; display:flex; flex-direction:column; gap:4px; flex:1; }
.dish-name{ font-weight:500; font-size:15px; line-height:1.1; letter-spacing:-.01em; }
.dish-price{ margin-top:auto; font-variant-numeric:tabular-nums; }
.dish-price.base{ font-weight:700; font-size:13px; color:var(--ink); }
.dish-price.add{ font-weight:700; font-size:13px; color:var(--gold); }
.dish-price.free{ font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); }
.dish-price.incl{ font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }

.preset-dish{ cursor:default; }
.preset-actions{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.preset-add{
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  font-family:inherit; font-weight:700; font-size:12px; letter-spacing:.02em; cursor:pointer;
  background:var(--orange); color:#fff; border:none; border-radius:9px; padding:9px 10px;
}
.preset-add:hover{ background:var(--orange-deep); }
.preset-customize{
  flex:0 0 auto; font-family:inherit; font-weight:700; font-size:10.5px; letter-spacing:.06em;
  color:var(--muted); background:transparent; border:none; cursor:pointer; padding:6px 2px; text-decoration:underline;
}
.preset-customize:hover{ color:var(--ink-2); }

/* ---- Review — a printed carte ---- */
.review{ padding:26px 22px 150px; }
.review-kicker{ font-size:10px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin:0 0 8px; }
.review-title{ font-weight:500; font-size:33px; line-height:1; letter-spacing:-.01em; margin:0 0 6px; }
.review-blurb{ font-size:13.5px; color:var(--ink-2); margin:0 0 24px; line-height:1.55; }
.receipt{ border-top:1.5px solid var(--ink); }
.rline{ display:flex; align-items:center; gap:14px; padding:13px 2px; border-bottom:1px solid var(--line-2); }
.rline-thumb{ flex:0 0 auto; width:46px; height:46px; border-radius:8px; overflow:hidden; background:var(--sand); }
.rline-thumb img{ width:100%; height:100%; object-fit:cover; }
.rline-body{ flex:1; min-width:0; }
.rline-cat{ font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); }
.rline-name{ font-family:'Playfair Display',Georgia,serif; font-weight:500; font-size:16px; letter-spacing:-.01em; margin-top:1px; }
.rline-price{ flex:0 0 auto; font-variant-numeric:tabular-nums; }
.rline-price.base{ font-weight:700; font-size:14px; color:var(--ink); }
.rline-price.add{ font-weight:700; font-size:14px; color:var(--gold); }
.rline-price.free{ font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--sage); }
.rline-price.incl{ font-weight:700; font-size:11px; color:var(--faint); }
.rline-remove{ flex:0 0 auto; width:34px; height:34px; border-radius:999px; border:1px solid var(--line-2);
  background:transparent; color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:color .13s, border-color .13s; }
.rline-remove:hover{ color:var(--orange-deep); border-color:var(--orange); }
.rline-remove:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.rline-remove svg{ width:13px; height:13px; }

/* ---- Cart: one card per bowl, with a collapsed ingredient ledger ---- */
.bowl-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; margin-bottom:14px; overflow:hidden;
  box-shadow:0 1px 2px rgba(31,46,23,.04); }
.bowl-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 13px 11px 16px; border-bottom:1.5px solid var(--ink); }
.bowl-id{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.bowl-idx{ flex:0 0 auto; font-size:12px; font-weight:500; letter-spacing:.08em; color:var(--gold); font-variant-numeric:tabular-nums; }
.bowl-name{ font-size:19px; font-weight:500; line-height:1.15; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bowl-eyebrow{ font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.bowl-acts{ flex:0 0 auto; display:flex; align-items:center; gap:7px; }
.bowl-edit{ font-family:inherit; font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  min-height:34px; padding:0 15px; border-radius:999px; border:1px solid var(--line-2);
  background:transparent; color:var(--ink); cursor:pointer; transition:border-color .13s; }
.bowl-edit:hover{ border-color:var(--ink); }
.bowl-edit:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.bowl-summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; background:var(--cream); transition:background .13s; }
.bowl-summary::-webkit-details-marker{ display:none; }
.bowl-summary:hover{ background:var(--sand); }
.bowl-summary:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
.bowl-summary-lbl{ display:flex; align-items:center; gap:8px; min-width:0;
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.bowl-count{ font-weight:700; letter-spacing:.1em; color:var(--muted); white-space:nowrap; }
.bowl-count::before{ content:"·"; margin-right:7px; }
.bowl-sum-price{ flex:0 0 auto; font-weight:700; font-size:14.5px; }
.bowl-summary .chev{ flex:0 0 auto; width:14px; height:14px; color:var(--ink-2); transition:transform .18s ease; }
.bowl-details[open] .bowl-summary .chev{ transform:rotate(180deg); }
.bowl-details[open] .bowl-summary{ border-bottom:1px solid var(--line-2); }
.bowl-body{ padding:0 0 12px; }
.bowl-body.flush{ padding:2px 16px 8px; }
.bowl-body.flush .rline:last-child{ border-bottom:none; }

/* Section separator — one per item class, replaces the per-row eyebrow */
.ing-group{ padding:0 16px; }
.ing-sec{ display:flex; align-items:center; gap:10px; padding:16px 0 7px; }
.ing-group:first-child .ing-sec{ padding-top:12px; }
.ing-sec-lbl{ position:relative; flex:0 0 auto; padding-left:10px;
  font-size:9.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); }
.ing-sec-lbl::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:2px; height:9px; border-radius:1px; background:var(--sage); }
.ing-sec-rule{ flex:1 1 auto; height:1px; background:var(--line-5); }
.ing-sec-n{ flex:0 0 auto; font-size:9.5px; font-weight:700; letter-spacing:.06em; color:var(--faint); }
.bowl-card .rline{ padding:11px 0; gap:12px; }
.ing-group .rline:last-child{ border-bottom:none; }
.bowl-card .rline-thumb{ width:38px; height:38px; border-radius:7px; }
.bowl-card .rline-name{ font-size:15.5px; margin-top:0; }
.review-total{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; margin-top:16px;
  background:var(--blush); border-radius:13px; }
.review-total .lbl{ font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.review-total .val{ font-family:'Playfair Display',Georgia,serif; font-weight:500; font-size:26px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.review-note{ margin:18px 2px 0; font-size:12px; color:var(--muted); line-height:1.55; display:flex; gap:8px; align-items:flex-start; }
.review-note svg{ width:15px; height:15px; flex:0 0 auto; margin-top:1px; color:var(--sage); }

/* ---- Confirm & Pay summary rows (shared class so kiosk mode can scale them) ---- */
.confirm-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line-2); }
.confirm-label{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); }
.confirm-val{ font-size:16px; text-align:right; }

/* ---- Sticky bottom action bar ---- */
.actionbar{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(480px,100%); z-index:55;
  background:rgba(252,247,241,.95); backdrop-filter:blur(14px); border-top:1px solid var(--line-3);
  border-radius:22px 22px 0 0; box-shadow:0 -12px 34px -20px rgba(31,46,23,.28); padding:14px 18px 26px; }
.actionrow{ display:flex; align-items:center; gap:10px; }
.btn-back{ flex:0 0 auto; padding:15px 18px; border-radius:13px; border:1px solid var(--line-2); background:transparent;
  color:var(--ink); font-weight:700; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; font-family:inherit; }
.btn-primary{ flex:1; display:flex; align-items:center; justify-content:center; gap:9px; padding:16px 18px; border-radius:13px;
  border:none; font-family:inherit; font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  background:var(--orange); color:var(--cream); box-shadow:0 12px 24px -12px rgba(31,46,23,.55); transition:.13s; }
.btn-primary svg{ width:16px; height:16px; }
.btn-primary.disabled{ background:#DCE0D5; color:#8D9683; cursor:not-allowed; box-shadow:none; }

/* "Add Another Item" — the one in-page orange CTA on the review sheet */
.btn-add{ width:100%; margin:6px 0 18px; padding:17px 18px; border-radius:14px; gap:11px; letter-spacing:.14em; }
.btn-add-glyph{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:23px; height:23px; border-radius:999px; background:rgba(252,247,241,.22); }
.btn-add-glyph svg{ width:14px; height:14px; stroke-width:2.2; }
.btn-add:hover{ background:var(--orange-deep); box-shadow:0 14px 28px -12px rgba(31,46,23,.62); }
.btn-add:active{ transform:translateY(1px); box-shadow:0 6px 14px -10px rgba(31,46,23,.55); }
.btn-add:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* ALERT surface (payment/ops notices) — clay, deliberately distinct from the
   brand green so a warning never reads as just another branded panel. */
.notice{ margin:14px 22px 0; font-size:12.5px; font-weight:600; color:var(--clay-deep);
  background:var(--clay-wash); border:1px solid var(--clay-line); border-radius:11px; padding:10px 13px; }

/* ---- Flavour-tier full-screen flash ---- */
#flash{ position:fixed; inset:0; z-index:120; display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; pointer-events:none; }
#flash.show{ display:flex; animation:pageflash 1s ease-out forwards; }
#flash .fimg{ width:150px; height:150px; margin-bottom:4px; filter:drop-shadow(0 12px 26px rgba(0,0,0,.45)); animation:badgepop .55s cubic-bezier(.2,.85,.25,1) both; }
#flash .fimg[src=""]{ display:none; }
#flash .k{ font-size:11px; font-weight:800; letter-spacing:.34em; text-transform:uppercase; opacity:.8; animation:flashsub 1s ease-out forwards; }
#flash .l{ font-family:'Playfair Display',Georgia,serif; font-weight:500; font-style:italic; font-size:52px; line-height:1; letter-spacing:.02em; animation:flashtext 1s ease-out forwards; }
#flash .s{ font-size:13px; font-weight:600; letter-spacing:.04em; opacity:.85; animation:flashsub 1s ease-out forwards; }

/* Unacknowledged NEW ticket on the KDS — gentle attention pulse until Started */
.kds-new{ animation:kdsflash 1.8s ease-in-out infinite; }
@keyframes kdsflash{ 0%,100%{ box-shadow:0 1px 2px rgba(31,46,23,.05) } 50%{ box-shadow:0 0 0 3px rgba(180,85,43,.34) } }

/* Live "waiting" pulse (awaiting-payment + KDS) */
.pulse-dot{ width:16px; height:16px; border-radius:999px; background:var(--sage); animation:pulse 1.6s ease-in-out infinite; }
.pulse-dot-sm{ width:9px; height:9px; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(.78) } }

@keyframes fadein{ from{ opacity:0; transform:scale(.85) } to{ opacity:1; transform:scale(1) } }
@keyframes pageflash{ 0%{ opacity:0 } 9%{ opacity:.96 } 52%{ opacity:.92 } 100%{ opacity:0 } }
@keyframes flashtext{ 0%{ opacity:0; transform:scale(.72); letter-spacing:.08em } 26%{ opacity:1 } 100%{ opacity:0; transform:scale(1.06); letter-spacing:.42em } }
@keyframes flashsub{ 0%{ opacity:0 } 34%{ opacity:1 } 100%{ opacity:0 } }
@keyframes badgepop{ 0%{ transform:scale(.4); opacity:0 } 62%{ transform:scale(1.14) } 100%{ transform:scale(1); opacity:1 } }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } html{ scroll-behavior:auto; } #flash.show{ display:none; } }

/* ---- Kiosk: larger targets ---- */
.kiosk .app{ max-width:760px; }
.kiosk .dish-name{ font-size:17px; }
.kiosk .course-title{ font-size:32px; }
.kiosk .btn-primary{ font-size:14px; padding:19px; }
.kiosk .confirm-label{ font-size:12.5px; }
.kiosk .confirm-val{ font-size:17px; }
.kiosk .bowl-name{ font-size:21px; }
.kiosk .bowl-summary{ padding:15px 18px; }
.kiosk .bowl-summary-lbl{ font-size:11px; }
.kiosk .bowl-sum-price{ font-size:16px; }
.kiosk .bowl-edit{ min-height:40px; font-size:11px; padding:0 18px; }
.kiosk .rline-remove{ width:40px; height:40px; }
.kiosk .ing-sec-lbl{ font-size:10.5px; }
.kiosk .bowl-card .rline-name{ font-size:17px; }
/* More grid columns only once there's real width to spread into (matches the
   .rail's own >=900px gate) — applying this unconditionally on a narrower
   kiosk touchscreen (a common real size) squeezed 3-4 tiles into a phone-width
   viewport, making touch targets SMALLER than the non-kiosk default: the
   opposite of this block's own purpose. */
@media (min-width:900px){
  .kiosk .grid.g2{ grid-template-columns:repeat(3,1fr); }
  .kiosk .grid.g3{ grid-template-columns:repeat(4,1fr); }
}

/* Kiosk is the big-touchscreen self-order station, so the rail stays visible
   at wide widths (same as the default desktop view) but scaled up for touch. */
.kiosk .shell{ gap:40px; }
.kiosk .rail{ width:300px; }
.kiosk .rail-nav{ padding:26px 22px; border-radius:22px; }
.kiosk .rail-brand{ padding-bottom:20px; margin-bottom:20px; }
.kiosk .rstep button{ padding:12px 6px; gap:14px; }
.kiosk .rdot{ width:40px; height:40px; font-size:15px; }
.kiosk .rstep .rline{ left:19px; top:-18px; height:18px; }
.kiosk .rtitle{ font-size:14.5px; }
.kiosk .rstatus{ font-size:12px; }
.kiosk .rsubdot{ width:28px; height:28px; font-size:12.5px; }
.kiosk .rsubtitle{ font-size:13.5px; }
.kiosk .rsubstatus{ font-size:11px; }
.kiosk .rail-drink-mono{ width:34px; height:34px; font-size:14px; }
.kiosk .rail-drink-name{ font-size:13.5px; }
.kiosk .qty-btn{ width:30px; height:30px; font-size:15px; }
.kiosk .qty-val{ font-size:14px; min-width:16px; }