/* Dos Croquetas — Kitchen Training
   Apple-inspired, mobile-first. Light + automatic dark mode. */
:root {
  --brand: #2B5637;           /* Dos Croquetas green (from the ordering page theme) */
  --brand-2: #4d9a63;
  --brand-tint: #eef6f0;
  --accent: var(--brand);
  --bg: #f5f5f7;
  --bg-elev: #ffffff;
  --bg-glass: rgba(245, 245, 247, 0.72);
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #86868b;
  --hairline: rgba(0, 0, 0, 0.08);
  --fill: rgba(118, 118, 128, 0.12);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.06);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.05), 0 18px 40px rgba(0,0,0,.10);
  --radius-lg: 24px;
  --radius: 20px;
  --radius-sm: 14px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);  /* iOS sheet curve */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --pad: 20px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #6cc48a;
    --brand-tint: rgba(108, 196, 138, 0.16);
    --bg: #000000;
    --bg-elev: #1c1c1e;
    --bg-glass: rgba(22, 22, 24, 0.72);
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #8e8e93;
    --hairline: rgba(255, 255, 255, 0.10);
    --fill: rgba(118, 118, 128, 0.24);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.5);
  }
}
@media (min-width: 700px) { :root { --pad: 32px; } }
@media (min-width: 1100px) { :root { --pad: 44px; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}
body.no-scroll { overflow: hidden; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 12px; }

/* ---------- Frosted sticky header ---------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  padding-top: var(--sat);
  background: var(--bg-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid transparent;
  transition: border-color .25s ease;
}
.appbar.scrolled { border-bottom-color: var(--hairline); }
.appbar-inner {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;            /* phone: logo · search (fills) · EN/ES */
  height: 56px;
  padding: 0 calc(var(--pad) + var(--sar)) 0 calc(var(--pad) + var(--sal));
  max-width: 1400px; margin: 0 auto;
}
.appbar-logo { display: block; flex: 0 0 auto; line-height: 0; }
.appbar-logo img { height: 32px; width: auto; }
.ab-left, .ab-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ab-right { justify-content: flex-end; gap: 10px; }
/* Apple-style search bar: rounded grey field + magnifier + placeholder (it opens the search sheet) */
.search-field {
  display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0; height: 38px; padding: 0 12px 0 10px;
  border-radius: 11px; background: var(--fill); color: var(--text-2); text-align: left;
  font-size: 17px; font-weight: 400; letter-spacing: -0.01em; cursor: text;
  transition: background .2s ease, transform .2s var(--ease);
}
.search-field svg { flex: 0 0 auto; opacity: .85; }
.sf-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-field.has-q .sf-text { color: var(--text); }
.search-field:active { transform: scale(.985); background: color-mix(in srgb, var(--fill) 100%, var(--text) 6%); }
.appbar-title { display: none; }
@media (min-width: 600px) {
  .appbar-inner { gap: 16px; grid-template-columns: minmax(max-content, 1fr) minmax(220px, 440px) minmax(max-content, 1fr); }
  .search-field { height: 40px; }
}
@media (min-width: 760px) { .appbar-title { display: block; } }
.appbar-title { font-weight: 600; font-size: 17px; flex: 0 1 auto; min-width: 0; color: var(--text); opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 22px;
  display: grid; place-items: center; color: var(--accent);
  transition: background .2s ease, transform .2s var(--ease);
}
.icon-btn:active { background: var(--fill); transform: scale(.94); }
/* ---------- Pill segmented category switcher ---------- */
.segments {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 6px calc(var(--pad) + var(--sar)) 12px calc(var(--pad) + var(--sal));
  max-width: 1400px; margin: 0 auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
}
.segments::-webkit-scrollbar { display: none; }
.seg {
  flex: 0 0 auto; scroll-snap-align: start;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  background: var(--fill); color: var(--text);
  transition: background .25s ease, color .25s ease, transform .2s var(--ease);
}
.seg:active { transform: scale(.96); }
.seg[aria-selected="true"] { background: var(--text); color: var(--bg); }
.seg .n { font-weight: 500; opacity: .55; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* ---------- Home ---------- */
.home-main {
  max-width: 1400px; margin: 0 auto;
  padding: 8px calc(var(--pad) + var(--sar)) calc(40px + var(--sab) + var(--tail, 0px)) calc(var(--pad) + var(--sal));
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.subtitle { margin: 6px 0 0; color: var(--text-2); font-size: 17px; }

/* One horizontally scrolling row of cards per category: scroll-snap, a peek of the next card, no scrollbar, momentum on iOS.
   The row runs edge to edge (bleeds into the page padding) and snaps cards to the content edge. --per = cards visible. */
.rail {
  --gap: 12px; --per: 2.3;
  display: flex; gap: var(--gap); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scrollbar-width: none; touch-action: pan-x pan-y;
  margin: -6px calc(-1 * (var(--pad) + var(--sar))) -12px calc(-1 * (var(--pad) + var(--sal)));
  padding: 6px calc(var(--pad) + var(--sar)) 16px calc(var(--pad) + var(--sal));
  scroll-padding-inline: calc(var(--pad) + var(--sal)) calc(var(--pad) + var(--sar));
}
.rail::-webkit-scrollbar { display: none; }
.rail > .card {
  flex: 0 0 calc((100% + var(--pad) - var(--gap) * (var(--per) - .3)) / var(--per));
  scroll-snap-align: start; scroll-snap-stop: normal;
}
.rail > .card:last-child { scroll-snap-align: end; }
@media (min-width: 600px)  { .rail { --gap: 14px; --per: 3.4; } }
@media (min-width: 760px)  { .rail { --gap: 16px; --per: 4.35; } }
@media (min-width: 1000px) { .rail { --gap: 18px; --per: 5.35; } }
@media (min-width: 1300px) { .rail { --gap: 20px; --per: 6.35; } }

.card {
  position: relative; display: flex; flex-direction: column; text-align: left;
  background: var(--bg-elev); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  animation: cardIn .5s var(--ease) both;
  min-height: 44px;
  padding: 0;                       /* .card is a <button>: drop the UA 1px 6px padding so the photo is full-bleed */
}
@media (hover: hover) { .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } }
.card:active { transform: scale(.965); transition-duration: .12s; }
.card-photo { aspect-ratio: 4 / 3; width: 100%; margin: 0; background: var(--fill); overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }   /* flush with the card's rounded top */
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
@media (hover: hover) { .card:hover .card-photo img { transform: scale(1.04); } }
.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.card-name { font-size: 16px; font-weight: 600; line-height: 1.22; letter-spacing: -0.015em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: auto; padding-top: 6px; font-size: 14px; color: var(--text-2); }
.card-meta .dot { width: 4px; height: 4px; border-radius: 2px; background: currentColor; opacity: .5; }
.status { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--fill); color: var(--text-2); }
.status.ready { background: var(--brand-tint); color: var(--accent); }
.badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  color: #fff; background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@media (min-width: 700px) { .card-name { font-size: 17px; } .card-body { padding: 12px 14px 14px; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.empty { text-align: center; color: var(--text-2); padding: 60px 0; font-size: 19px; }
.home-footer { margin-top: 48px; padding-top: 18px; border-top: 0.5px solid var(--hairline); color: var(--text-3); font-size: 13px; }

/* ---------- Detail: iOS push page ---------- */
.view-detail {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg);
  transform: translate3d(100%, 0, 0);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow: -20px 0 50px rgba(0,0,0,0);
  visibility: hidden;
  display: flex; flex-direction: column;
}
.view-detail.open { transform: none; visibility: visible; box-shadow: -20px 0 50px rgba(0,0,0,.18); }
.view-home { transition: transform .5s var(--ease), filter .5s var(--ease); }
body.detail-open .view-home { transform: translate3d(-22%, 0, 0); filter: brightness(.92); }
@media (prefers-reduced-motion: reduce) {
  .view-detail, .view-home, .card, .cook-track { transition: none !important; animation: none !important; }
}
.grid.no-anim .card, .no-anim .card { animation: none; }

.detail-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 8px;   /* back | centred title | spacer */
  padding: calc(var(--sat) + 8px) calc(12px + var(--sar)) 8px calc(12px + var(--sal));
  transition: background .25s ease, border-color .25s ease;
  border-bottom: 0.5px solid transparent;
}
.detail-bar.solid {
  background: var(--bg-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--hairline);
}
.back-btn {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; padding: 0 16px 0 10px; border-radius: 999px;
  font-size: 17px; font-weight: 600; color: #fff;
  background: rgba(0,0,0,.38);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  transition: transform .2s var(--ease), background .25s ease, color .25s ease;
}
.back-btn:active { transform: scale(.95); }
.detail-bar.solid .back-btn { background: transparent; color: var(--accent); }
.detail-bar > .back-btn { justify-self: start; }
.bar-spacer { min-width: 0; }
.detail-bar-title { min-width: 0; text-align: center; font-weight: 600; font-size: 17px; opacity: 0; transition: opacity .25s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-bar.solid .detail-bar-title { opacity: 1; }
.bar-spacer { width: 88px; }

.detail-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.detail-hero { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 3; max-height: 62vh; background: #1d3b27; overflow: hidden; }
.detail-hero img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; transition: opacity .8s ease; }
/* the photo sits ON TOP of the video and fades out once it plays. The video itself is never opacity:0 / hidden, because
   Safari (browser tab) won't start a muted autoplay video it considers invisible - that deadlocked the old fade-in. */
.detail-hero.playing img { opacity: 0; }
@media (min-width: 700px) { .detail-hero { aspect-ratio: auto; height: min(52vh, 480px); max-height: none; } }

.detail-body {
  max-width: 920px; margin: 0 auto;
  padding: 24px calc(var(--pad) + var(--sar)) calc(40px + var(--sab)) calc(var(--pad) + var(--sal));
}
.detail-head { margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--brand-tint); color: var(--accent); }
.chip.muted { background: var(--fill); color: var(--text-2); }
.detail-head h1 { margin: 0; font-size: clamp(32px, 6vw, 52px); line-height: 1.06; font-weight: 700; letter-spacing: -0.028em; }
.price { margin: 8px 0 0; font-size: 19px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.price:empty { display: none; }
.desc { margin: 14px 0 0; font-size: 19px; line-height: 1.5; color: var(--text); max-width: 60ch; }
.desc.blank { color: var(--text-3); font-style: italic; }

.card-section { margin-top: 36px; }
.card-section h2 { margin: 0 0 14px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.two-col { display: grid; gap: 0 24px; }
@media (min-width: 700px) { .two-col { grid-template-columns: 1fr 1fr; } }

.pill-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-size: 16px; font-weight: 600; background: var(--fill); color: var(--text); white-space: nowrap; flex: 0 0 auto;
  transition: transform .2s var(--ease), opacity .2s ease;
}
.pill-btn[hidden] { display: none; }
.pill-btn.primary { background: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) { .pill-btn.primary { background: var(--accent); color: #04140a; } }
.pill-btn:active { transform: scale(.95); }
.pill-btn:disabled { opacity: .35; cursor: default; transform: none; }

/* video */
.video-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-elev); box-shadow: var(--shadow-sm);
  aspect-ratio: 16 / 9;
}
.video-card video, .video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

/* placeholders */
.placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px;
  padding: 28px 20px; border-radius: var(--radius);
  border: 1.5px dashed var(--hairline);
  background: var(--bg-elev);
  color: var(--text-2);
}
.video-card.is-empty { aspect-ratio: auto; min-height: 220px; }
.video-card .placeholder { position: absolute; inset: 0; border-radius: 0; border: 0; background: linear-gradient(135deg, var(--bg-elev), var(--fill)); }
.placeholder .ph-icon { width: 56px; height: 56px; border-radius: 28px; display: grid; place-items: center; background: var(--fill); color: var(--text-2); }
.placeholder .ph-title { font-size: 19px; font-weight: 600; color: var(--text); }
.placeholder .ph-sub { font-size: 14px; color: var(--text-3); max-width: 42ch; }
.ph-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: #ffe8b3; color: #7a4b00; }
@media (prefers-color-scheme: dark) { .ph-tag { background: #4a3500; color: #ffd27a; } }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.step {
  display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start;
  padding: 18px; border-radius: var(--radius); background: var(--bg-elev); box-shadow: var(--shadow-sm);
}
.step-num {
  width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center;
  font-size: 20px; font-weight: 700; color: #fff; background: var(--brand); font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) { .step-num { background: var(--accent); color: #04140a; } }
.step-title { font-size: 19px; font-weight: 600; line-height: 1.3; }
.step-text { font-size: 17px; color: var(--text); margin-top: 2px; }
.step-title + .step-text { color: var(--text-2); }
.step-media { margin-top: 12px; padding: 10px; border-radius: var(--radius-sm); background: #fff; display: flex; justify-content: center; align-items: center; }
.step-img { display: block; max-width: 100%; width: auto; height: auto; max-height: min(70vh, 640px); object-fit: contain; }
.step-timer { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--brand-tint); color: var(--accent); }
.step-placeholder { list-style: none; }

.list-card { margin: 0; padding: 6px 18px; list-style: none; border-radius: var(--radius); background: var(--bg-elev); box-shadow: var(--shadow-sm); }
.list-card li { padding: 12px 0; font-size: 17px; border-bottom: 0.5px solid var(--hairline); }
.list-card li:last-child { border-bottom: 0; }
.list-card li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 4px; background: var(--accent); margin-right: 12px; vertical-align: middle; }

.big-back {
  margin: 48px auto 8px; display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 480px; min-height: 60px; border-radius: 18px;
  font-size: 19px; font-weight: 600; background: var(--text); color: var(--bg);
  transition: transform .2s var(--ease);
}
.big-back:active { transform: scale(.97); }

/* ---------- Cook mode ---------- */
.cook {
  position: fixed; inset: 0; z-index: 80; background: var(--bg);
  display: flex; flex-direction: column;
  transform: translate3d(0, 100%, 0); visibility: hidden;
  transition: transform .5s var(--ease), visibility 0s linear .5s;
}
.cook.open { transform: none; visibility: visible; transition: transform .5s var(--ease); }
.cook-bar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: calc(var(--sat) + 10px) calc(var(--pad) + var(--sar)) 10px calc(var(--pad) + var(--sal));
}
.cook-item { font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.cook-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); min-width: 44px; text-align: right; }
.cook-progress { height: 4px; margin: 0 calc(var(--pad) + var(--sar)) 0 calc(var(--pad) + var(--sal)); border-radius: 2px; background: var(--fill); overflow: hidden; }
.cook-progress span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition: width .4s var(--ease); }
.cook-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cook-track::-webkit-scrollbar { display: none; }
.cook-slide {
  flex: 0 0 100%; scroll-snap-align: center; overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 20px calc(var(--pad) + 8px + var(--sar)) 16px calc(var(--pad) + 8px + var(--sal));
  max-width: 100%;
}
.cook-slide .inner { max-width: 820px; margin: 0 auto; width: 100%; }
/* slide with a photo: text on top, the photo takes all the remaining height between the text and the Back/Next buttons */
.cook-slide .inner.has-img { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; max-width: 1100px; }
.cook-step-label { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.cook-step-title { margin: 10px 0 0; font-size: clamp(26px, min(6.4vw, 6vh), 56px); line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; }
.cook-step-text { margin: 16px 0 0; font-size: clamp(18px, min(3.4vw, 3.2vh), 28px); line-height: 1.4; color: var(--text-2); }
.cook-step-media {
  position: relative; flex: 1 1 auto; min-height: 180px; margin-top: 18px;
  border-radius: var(--radius-lg); background: #fff;       /* neutral frame; step photos are shot on white */
  box-shadow: inset 0 0 0 .5px var(--hairline); overflow: hidden;
}
.cook-step-img {                                          /* whole photo, centered, fit inside the frame, never upscaled */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: auto; height: auto; max-width: calc(100% - 24px); max-height: calc(100% - 24px); object-fit: contain;
}
@media (orientation: landscape) and (min-aspect-ratio: 5/4) {
  .cook-slide .inner.has-img { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: stretch; height: 100%; }
  .cook-slide .inner.has-img .cook-text { align-self: center; }
  .cook-slide .inner.has-img .cook-step-media { margin-top: 0; min-height: 0; }
}
.cook-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 12px calc(var(--pad) + var(--sar)) calc(16px + var(--sab)) calc(var(--pad) + var(--sal));
}
.cook-arrow {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 64px; border-radius: 20px; font-size: 20px; font-weight: 700;
  background: var(--fill); color: var(--text);
  transition: transform .2s var(--ease), opacity .2s ease;
}
.cook-arrow.primary { background: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) { .cook-arrow.primary { background: var(--accent); color: #04140a; } }
.cook-arrow:active { transform: scale(.97); }
.cook-arrow:disabled { opacity: .3; }

/* ---------- Language switch (EN | ES) ---------- */
.lang {
  display: inline-flex; flex: 0 0 auto; padding: 3px; gap: 2px; border-radius: 999px;
  background: var(--fill);
}
.lang button {
  min-width: 44px; min-height: 36px; padding: 0 12px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--text-2);
  transition: background .25s ease, color .25s ease, transform .2s var(--ease), box-shadow .25s ease;
}
.lang button[aria-pressed="true"] { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 1px 1px rgba(0,0,0,.06); }
@media (prefers-color-scheme: dark) { .lang button[aria-pressed="true"] { background: #636366; color: #fff; } }
.lang button:active { transform: scale(.94); }
.lang-glass { background: rgba(0,0,0,.38); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); }
.lang-glass button { color: rgba(255,255,255,.85); }
.lang-glass button[aria-pressed="true"] { background: rgba(255,255,255,.95); color: #111; }
.detail-bar.solid .lang-glass { background: var(--fill); -webkit-backdrop-filter: none; backdrop-filter: none; }
.detail-bar.solid .lang-glass button { color: var(--text-2); }
.detail-bar.solid .lang-glass button[aria-pressed="true"] { background: var(--bg-elev); color: var(--text); }
@media (prefers-color-scheme: dark) { .detail-bar.solid .lang-glass button[aria-pressed="true"] { background: #636366; color: #fff; } }

/* ---------- Cook-time ticker: native to the header (same glass, system type, soft capsules in the PDF colors) ---------- */
.ticker {
  position: relative; display: flex; align-items: center;
  height: 40px; margin: 0 auto 2px; max-width: 1400px;
  padding: 0 var(--sar) 0 var(--sal);
  background: transparent; color: var(--text);
  font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; user-select: none; -webkit-user-select: none; overflow: hidden;
}
.ticker[hidden] { display: none; }
.ticker-viewport {
  flex: 1; min-width: 0; height: 100%; overflow: hidden; display: flex; align-items: center;
  touch-action: pan-y; cursor: grab;
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%);
}
.ticker.dragging .ticker-viewport { cursor: grabbing; }
.ticker-viewport:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 10px; }
.ticker-track { display: flex; width: max-content; flex: 0 0 auto; will-change: transform; pointer-events: none; }
.ticker-group { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; padding-right: 6px; }
.tk-label { display: inline-flex; align-items: center; gap: 5px; padding: 0 4px 0 10px; color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.tk-group { display: inline-flex; align-items: center; gap: 6px; }
.tk-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 13%, transparent);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--c) 28%, transparent);
}
.tk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.tk-name { font-weight: 600; color: var(--text); }
.tk-time { font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tk-chip.small { height: 26px; font-size: 13px; }
.tk-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); opacity: .45; margin: 0 6px; flex: 0 0 auto; }
@media (min-width: 700px) { .ticker { height: 44px; font-size: 15px; } .tk-chip { height: 32px; } .tk-chip.small { height: 28px; font-size: 14px; } }
@media (prefers-color-scheme: dark) {
  .tk-chip { background: color-mix(in srgb, var(--c) 24%, transparent); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--c) 45%, transparent); }
  .tk-dot { background: color-mix(in srgb, var(--c) 72%, #fff); }
}
/* reduced motion: no auto-scroll (handled in JS) — the ticker can still be dragged and tapped */

/* ---------- Cook time on cards + detail ---------- */
.card-cook { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--accent); min-width: 0; }
.card-cook span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-cook svg { flex: 0 0 auto; }
@media (min-width: 700px) { .card-cook { font-size: 14px; } }
.cook-card {
  display: flex; align-items: center; gap: 14px; margin-top: 18px;
  padding: 14px 18px; border-radius: var(--radius); background: var(--brand-tint); color: var(--accent);
  max-width: 560px;
}
.cook-card .cc-icon { width: 48px; height: 48px; border-radius: 24px; display: grid; place-items: center; background: var(--brand); color: #fff; flex: 0 0 auto; }
@media (prefers-color-scheme: dark) { .cook-card .cc-icon { background: var(--accent); color: #04140a; } }
.cc-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.cc-time { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.cc-note { font-size: 15px; font-weight: 600; margin-top: 2px; }
.cook-card.none { background: var(--fill); color: var(--text-2); }
.cook-card.none .cc-icon { background: var(--text-3); color: var(--bg); }
.cook-card.none .cc-time { font-size: 17px; font-weight: 600; color: var(--text-2); }

/* ---------- "All items": sections per category with sticky Apple-style headers ---------- */
.menu-section { margin-top: 8px; }
.menu-section + .menu-section { margin-top: 18px; }
.sec-head {
  position: sticky; top: var(--appbar-h, 150px); z-index: 10;
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 calc(-1 * (var(--pad) + var(--sar))) 12px calc(-1 * (var(--pad) + var(--sal)));
  padding: 8px calc(var(--pad) + var(--sar)) 8px calc(var(--pad) + var(--sal));
  font-size: 22px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.15;
  background: var(--bg-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.sec-head .n { font-size: 17px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .sec-head { font-size: 26px; } }

/* ---------- Bottom sheet (cook times / search) — iOS style ---------- */
body.sheet-open { overflow: hidden; }
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.36);
  opacity: 0; transition: opacity .32s ease;
}
.sheet-backdrop.open { opacity: 1; }
.sheet-backdrop[hidden], .sheet[hidden] { display: none; }
.sheet {
  position: fixed; z-index: 81; left: 0; right: 0; bottom: 0; margin: 0 auto;
  width: 100%; max-width: 640px; max-height: calc(100% - var(--sat) - 44px);
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  border-radius: 14px 14px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.22);
  padding-bottom: var(--sab);
  transform: translate3d(0, 105%, 0); transition: transform .38s cubic-bezier(.32,.72,0,1);
  touch-action: pan-y; overscroll-behavior: contain;
}
.sheet.open { transform: translate3d(0, 0, 0); }
.sheet.dragging { transition: none; }
.sheet.tall { height: calc(100% - var(--sat) - 44px); }
@media (min-width: 700px) { .sheet { border-radius: 16px 16px 0 0; } .sheet.tall { height: min(760px, calc(100% - var(--sat) - 60px)); } }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-backdrop { transition: none; } }
.sheet-grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--text-3); opacity: .45; margin: 7px auto 0; flex: 0 0 auto; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 20px; flex: 0 0 auto; cursor: grab; touch-action: none; }
.sheet-grabber { touch-action: none; }
.sheet-head h2 { flex: 1; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.sheet-close {
  width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--fill); color: var(--text-2); position: relative;
}
.sheet-close::after { content: ""; position: absolute; inset: -6px; }   /* 44px hit area */
.sheet-close:active { transform: scale(.92); }
.sheet-top:empty { display: none; }
.sheet-top { padding: 0 16px 10px; flex: 0 0 auto; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 16px 20px; }

/* cook-times sheet: iOS Settings-style grouped list, PDF colors as accents */
.ct-list { padding-top: 2px; }
.ct-group + .ct-group { margin-top: 26px; }
.ct-head { display: flex; align-items: center; gap: 8px; margin: 0 0 9px 16px; font-size: 17px; font-weight: 500; color: var(--text-2); text-transform: none; letter-spacing: 0; line-height: 1.2; }
.ct-head svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ct-head b { font-size: 26px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ct-rows { list-style: none; margin: 0; padding: 0; background: var(--bg-elev); border-radius: 14px; overflow: hidden; }
.ct-row { position: relative; display: flex; align-items: flex-start; gap: 14px; min-height: 58px; padding: 15px 16px; font-size: 21px; line-height: 1.25; }
.ct-row + .ct-row::before { content: ""; position: absolute; top: 0; right: 0; left: 42px; border-top: .5px solid var(--hairline); }
.ct-dot { width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; background: var(--c); flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.ct-name { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; hyphens: auto; }
.ct-val { align-self: center; margin-left: 4px; font-size: 24px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-row.sub { min-height: 52px; padding: 13px 16px 13px 42px; font-size: 20px; }
.ct-row.sub .ct-dot { width: 8px; height: 8px; margin-top: 8.5px; box-shadow: none; opacity: .8; }
.ct-row.sub .ct-name { color: var(--text-2); font-weight: 400; }
.ct-row.sub .ct-val { font-size: 24px; }
.ct-row.sub + .ct-row::before, .ct-row + .ct-row.sub::before { left: 64px; }
@media (min-width: 700px) {
  .ct-head { font-size: 19px; } .ct-head svg { width: 20px; height: 20px; }
  .ct-head b { font-size: 30px; }
  .ct-row { min-height: 64px; padding: 17px 20px; font-size: 24px; gap: 16px; }
  .ct-dot { width: 13px; height: 13px; margin-top: 8.5px; }
  .ct-val { font-size: 28px; }
  .ct-row.sub { min-height: 58px; padding: 15px 20px 15px 50px; font-size: 22px; }
  .ct-row.sub .ct-dot { margin-top: 9.5px; }
  .ct-row.sub .ct-val { font-size: 28px; }
  .ct-row + .ct-row::before { left: 49px; }
  .ct-row.sub + .ct-row::before, .ct-row + .ct-row.sub::before { left: 74px; }
}
@media (prefers-color-scheme: dark) { .ct-dot { background: color-mix(in srgb, var(--c) 75%, #fff); } }

/* search sheet */
.sr-field {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 11px;
  background: var(--fill); color: var(--text-3);
}
.sr-field input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--text);
  font: inherit; font-size: 17px; -webkit-appearance: none; appearance: none;
}
.sr-field input::-webkit-search-decoration { -webkit-appearance: none; }
.sr-field:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.sr-hint { color: var(--text-2); font-size: 15px; text-align: center; padding: 28px 12px; margin: 0; }
.sr-list { list-style: none; margin: 0; padding: 0; background: var(--bg-elev); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.sr-list li + li .sr-row { border-top: .5px solid var(--hairline); }
.sr-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; min-height: 64px; }
.sr-row:active { background: var(--fill); }
.sr-thumb { width: 64px; height: 48px; border-radius: 9px; overflow: hidden; flex: 0 0 auto; background: var(--fill); }
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sr-name { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sub { font-size: 13px; color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-desc { font-size: 13px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-chev { color: var(--text-3); flex: 0 0 auto; }



/* ---------- Hero video (replaces the photo in the banner) ---------- */
.hero-media { position: absolute; inset: 0; z-index: 0; background: transparent; container-type: size; overflow: hidden; }
.detail-hero.playing .hero-media { background: #000; }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.hero-media iframe {
  position: absolute; top: 50%; left: 50%; border: 0; pointer-events: none;
  width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%);
}
.hero-media iframe:fullscreen { pointer-events: auto; transform: none; top: 0; left: 0; width: 100%; height: 100%; }
.hero-media video:fullscreen { object-fit: contain; cursor: auto; }
@media (prefers-reduced-motion: reduce) { .detail-hero img { transition: none; } }
.hero-ctrls { position: absolute; right: calc(12px + var(--sar)); bottom: 12px; z-index: 3; display: flex; gap: 8px; animation: hero-in .4s var(--ease) both; }
.hero-ctrls[hidden], .hero-play[hidden] { display: none; }
.hero-btn, .hero-play {
  display: grid; place-items: center; color: #fff; border-radius: 50%;
  background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18);
}
.hero-btn { width: 36px; height: 36px; position: relative; }
.hero-btn::after { content: ""; position: absolute; inset: -4px; }     /* 44px hit area */
.hero-btn:active, .hero-play:active { transform: scale(.92); }
.hero-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding-left: 4px; z-index: 3; }
@keyframes hero-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* only render sections that have content */
.cook-card[hidden], .card-section[hidden], .two-col[hidden] { display: none; }
@media (min-width: 700px) { .two-col.one { grid-template-columns: 1fr; } }
/* short landscape screens (phone on its side): tighter cook-mode chrome so the step photo gets more room */
@media (orientation: landscape) and (max-height: 500px) {
  .cook-bar { padding-top: calc(var(--sat) + 6px); padding-bottom: 6px; }
  .cook-slide { padding-top: 12px; padding-bottom: 10px; }
  .cook-nav { padding-top: 8px; padding-bottom: calc(10px + var(--sab)); }
  .cook-arrow { min-height: 50px; font-size: 18px; }
}

/* ---------- Installed app (Home Screen / PWA) polish ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; }
/* UI controls: no text selection, no grey tap flash, no long-press callout, no double-tap zoom */
button, a, [role="button"], [role="tab"], .card, .seg, .search-field, .lang, .ticker, .tk-chip, .segments, .cook-nav, .cook-bar, .sheet-head, .appbar-inner, .detail-bar {
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; touch-action: manipulation;
}
.ticker-viewport { touch-action: pan-y; }                 /* keeps its own horizontal drag */
.segments { touch-action: pan-x; }                        /* category pills still scroll sideways */
/* ---------- Installed app: status bar ----------
   Status bar style is "black-translucent": iOS draws white system text and every view runs right up behind it.
   There is NO separate strip or overlay: each view's own top surface (header, hero, cook bar) starts at the top edge.
   Light mode: those top bars turn brand green so the white status text is readable (one continuous surface).
   Dark mode: solid dark header. Item pages: the hero is full-bleed, no scrim. Headers are solid (no blur/alpha), and
   js keeps <meta theme-color> + the page background equal to whatever is at the top edge, so iOS tints nothing differently. */
.logo-ongreen { display: none; }
html.standalone .appbar, html.standalone .detail-bar.solid { -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
@media (prefers-color-scheme: dark) { html.standalone .appbar, html.standalone .detail-bar.solid { background: #161618; } }
/* no rubber-band anywhere in the installed app (so no other colour ever shows above the header) */
html.standalone, html.standalone body, html.standalone .detail-scroll, html.standalone .sheet-body, html.standalone .cook-slide { overscroll-behavior: none; }
@media (prefers-color-scheme: light) {
  html.standalone .appbar, html.standalone .detail-bar.solid, html.standalone .cook-bar {
    --text: #fff; --text-2: rgba(255, 255, 255, .8); --text-3: rgba(255, 255, 255, .62); --fill: rgba(255, 255, 255, .17);
    --accent: #fff; --bg: var(--brand); --hairline: rgba(0, 0, 0, .2); color: #fff;
  }
  html.standalone .appbar, html.standalone .detail-bar.solid { background: #2B5637; }
  html.standalone .cook-bar { background: var(--brand); }
  html.standalone .appbar .lang button[aria-pressed="true"],
  html.standalone .detail-bar.solid .lang-glass button[aria-pressed="true"] { background: #fff; color: var(--brand); box-shadow: none; }
  html.standalone .appbar .tk-chip { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .2); }
  html.standalone .appbar .tk-dot { background: color-mix(in srgb, var(--c) 70%, #fff); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6); }
  html.standalone .appbar-logo { display: none; }
  html.standalone .logo-ongreen { display: block; height: 32px; width: auto; flex: 0 0 auto; }
}
html.standalone .appbar { touch-action: pan-x; }

/* ---------- Installed app: what iOS samples for the status-bar area (v18) ----------
   iOS 26 no longer uses <meta theme-color>. For the area behind the status bar it takes a COLOUR from CSS:
   the background-color of body/html, or of any position:fixed/sticky element that touches the top edge and is >=80% wide
   (even when it is visibility:hidden / opacity:0, e.g. the closed item page and cook mode below). v17 left those at the light
   page grey (#f5f5f7) behind a green header, so iOS laid a pale grey haze over the green under the status bar.
   Fix: every one of those candidates has background-color = the colour really at the top edge (--top-live, kept in sync by js,
   default = header colour). The visible page grey is painted as a background-IMAGE layer, which iOS does not sample. */
html.standalone { --top: #2B5637; }
@media (prefers-color-scheme: dark) { html.standalone { --top: #161618; } }
html.standalone, html.standalone body { background-color: var(--top-live, var(--top)); }
html.standalone body { min-height: 100vh; background-image: linear-gradient(var(--bg), var(--bg)); }
html.standalone .view-detail, html.standalone .cook { background-color: var(--top-live, var(--top)); background-image: linear-gradient(var(--bg), var(--bg)); }
@media (prefers-color-scheme: dark) { html.standalone .cook-bar { background: #161618; } }   /* cook mode: same solid bar as the header */
/* nothing translucent may touch the top edge in the installed app */
html.standalone .appbar, html.standalone .detail-bar, html.standalone .cook-bar { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* bottom edge: a thin fixed strip in the page colour so iOS tints the home-indicator area grey/black (page), not header green */
.edge-bottom { display: none; }
html.standalone .edge-bottom { display: block; position: fixed; left: 0; right: 0; bottom: 0; height: 4px; z-index: -1; pointer-events: none; background-color: var(--bg); }   /* z -1: painted under the page, never over content */
html.standalone .ticker-viewport { touch-action: none; }

/* footer link to the admin, only inside the installed app (there's no address bar there) */
.admin-link { display: none; margin-top: 10px; }
html.standalone .admin-link { display: block; }
.admin-link a { color: var(--text-3); font-size: 14px; text-decoration: none; padding: 8px 4px; }

/* "New version available · Tap to update" */
.update-toast {
  position: fixed; left: 50%; bottom: calc(18px + var(--sab)); z-index: 1001;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 999px; font-size: 16px; font-weight: 500; white-space: nowrap;
  color: #fff; background: rgba(28, 28, 30, .88); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  transform: translate(-50%, 24px); opacity: 0; transition: transform .35s var(--ease), opacity .35s ease;
}
.update-toast.show { transform: translate(-50%, 0); opacity: 1; }
.update-toast[hidden] { display: none; }
.update-toast b { font-weight: 700; color: #7fd89a; }
.update-toast .ut-dot { width: 8px; height: 8px; border-radius: 50%; background: #7fd89a; flex: 0 0 auto; }
.update-toast.busy { opacity: .7; }
@media (prefers-color-scheme: dark) { .update-toast { background: rgba(58, 58, 60, .92); } }

/* =====================================================================================================
   KDS mode (v20): kitchen display at #kds. Horizontal ticket rail on iPad / wide screens, vertical list on phones.
   The bar is a solid header-colour surface (green / #161618) in the browser and in the installed app alike.
   ===================================================================================================== */
/* entry points: header button (>= 600px) and a pill at the start of the category row (phones) */
.kds-btn {
  display: none; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px 0 11px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--text); background: var(--fill); text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ease), background .2s ease;
}
.kds-btn:active { transform: scale(.95); }
@media (min-width: 600px) { .kds-btn { display: inline-flex; } }
.seg-kds {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 13px; border-radius: 999px;
  font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none; color: #fff; background: var(--brand);
  transition: transform .2s var(--ease);
}
.seg-kds:active { transform: scale(.96); }
@media (prefers-color-scheme: dark) { .seg-kds { background: var(--accent); color: #04140a; } }
@media (min-width: 600px) { .seg-kds { display: none; } }
@media (prefers-color-scheme: light) { html.standalone .appbar .seg-kds { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); } }

.kds {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  opacity: 0; transform: scale(.985); transition: opacity .25s ease, transform .35s var(--ease), filter .5s var(--ease);
}
.kds[hidden] { display: none; }
.kds.open { opacity: 1; transform: none; }
body.kds-open { overflow: hidden; }
body.kds-open.detail-open .kds { transform: translate3d(-22%, 0, 0); filter: brightness(.92); }
.kds-bar {
  --text: #fff; --text-2: rgba(255,255,255,.8); --fill: rgba(255,255,255,.17); --accent: #fff;
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: calc(var(--sat) + 6px) calc(12px + var(--sar)) 6px calc(8px + var(--sal));
  min-height: calc(var(--sat) + 60px); background: #2B5637; color: #fff;
}
@media (prefers-color-scheme: dark) { .kds-bar { background: #161618; } }
.kds-back { background: transparent; color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; padding-right: 10px; }
.kds-back:active { background: rgba(255,255,255,.14); }
.kds-head { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; row-gap: 0; }
.kds-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.kds-t-short { display: none; }
.kds-status { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.82); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.kds-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); flex: 0 0 auto; }
.kds-status:empty::before { display: none; }
.kds-status.live::before { background: #34c759; box-shadow: 0 0 0 3px rgba(52,199,89,.28); animation: kds-pulse 2s ease-in-out infinite; }
.kds-status.sample::before { background: #ffcc00; }
.kds-status.bad::before { background: #ff453a; }
.kds-status.sample { color: #ffe58a; }
@keyframes kds-pulse { 50% { box-shadow: 0 0 0 6px rgba(52,199,89,0); } }
.kds-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.kds-icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 40px; padding: 0 12px;
  border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 15px; font-weight: 600;
}
.kds-icon[hidden] { display: none; }
.kds-icon:active { transform: scale(.94); }
.kds-sound[aria-pressed="true"] { background: #fff; color: #2B5637; }
@media (prefers-color-scheme: dark) { .kds-sound[aria-pressed="true"] { color: #161618; } }
.kds-bar .lang { background: rgba(255,255,255,.17); }
.kds-bar .lang button { color: rgba(255,255,255,.85); }
.kds-bar .lang button[aria-pressed="true"] { background: #fff; color: #2B5637; box-shadow: none; }
@media (prefers-color-scheme: dark) { .kds-bar .lang button[aria-pressed="true"] { background: #636366; color: #fff; } }
@media (max-width: 599px) {
  .kds-bar { gap: 6px; padding-right: calc(10px + var(--sar)); }
  .kds-back { padding: 0 6px 0 4px; }
  .kds-back span { display: none; }
  .kds-head { flex-direction: column; gap: 0; }
  .kds-title { font-size: 18px; }
  .kds-t-long { display: none; }
  .kds-t-short { display: inline; }
  .kds-sample-more { display: none; }
  .kds-sample { padding-top: 7px; padding-bottom: 7px; }
  .kds-status { font-size: 13px; }
  .kds-recall span { display: none; }
  .kds-icon { min-width: 40px; padding: 0 10px; }
}

/* "Sample tickets" banner (demo source) */
.kds-sample {
  flex: 0 0 auto; margin: 0; padding: 9px calc(var(--pad) + var(--sar)) 9px calc(var(--pad) + var(--sal));
  font-size: 14px; font-weight: 500; line-height: 1.35; color: #6b4a00; background: #fff1c7; border-bottom: .5px solid rgba(0,0,0,.06);
}
.kds-sample[hidden] { display: none; }
@media (prefers-color-scheme: dark) { .kds-sample { color: #ffd98a; background: #2d2300; border-bottom-color: rgba(255,255,255,.06); } }

/* the rail */
.kds-rail {
  --colw: clamp(272px, 26vw, 330px);          /* one ticket column; long tickets are N columns wide (see layout() in kds.js) */
  flex: 1; min-height: 0; display: flex; gap: 14px; align-items: flex-start;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding: 16px calc(var(--pad) + var(--sar)) calc(16px + var(--sab)) calc(var(--pad) + var(--sal));
  scroll-padding: 0 var(--pad);
}
.kds-rail[hidden] { display: none; }
.kt {
  flex: 0 0 var(--colw); display: flex; flex-direction: column; scroll-snap-align: start;
  background: var(--bg-elev); border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden; position: relative;
  transition: opacity .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.kt-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px;
  background: var(--fill); transition: background .4s ease, color .4s ease;
}
.kt-num { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kt-src { font-size: 13px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--bg-elev); color: var(--text); white-space: nowrap; }
.kt-src.src-doordash { background: #eb1700; color: #fff; }
.kt-src.src-ubereats { background: #000; color: #06c167; }
.kt-src.src-grubhub { background: #ff8000; color: #fff; }
.kt-src.src-takeout { background: #2B5637; color: #fff; }
.kt-src.src-dinein { background: #5e5ce6; color: #fff; }
.kt-src.src-delivery { background: #0a84ff; color: #fff; }
@media (prefers-color-scheme: dark) { .kt-src.src-ubereats { background: #06c167; color: #000; } .kt-src.src-takeout { background: #6cc48a; color: #04140a; } }
.kt-age { margin-left: auto; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kt.age-amber .kt-head { background: #ff9f0a; color: #1d1d1f; }
.kt.age-red .kt-head { background: #ff3b30; color: #fff; }
@media (prefers-color-scheme: dark) { .kt.age-red .kt-head { background: #ff453a; } }
.kt.age-red { box-shadow: 0 0 0 2px #ff3b30, var(--shadow-sm); }
.kt-meta { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; padding: 8px 14px 4px; font-size: 13px; color: var(--text-2); font-weight: 500; }
.kt-sample { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; color: #6b4a00; background: #ffe7a3; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .kt-sample { color: #ffd98a; background: #3d3000; } }
.kt-cols { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; }
.kt-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; position: relative; }
.kt-lines { list-style: none; margin: 0; padding: 2px 0 6px; }
/* long ticket: the SAME card grows wider - its lines flow into extra columns inside it (one header bar, one Bump).
   Items keep their normal full size. */
.kt.multi { flex-basis: calc(var(--colw) * var(--n, 1)); scroll-snap-align: none; }              /* height = tallest column (filled top-down, not balanced) */
.kt.multi .kt-col { max-height: var(--cap, none); overflow-y: auto; overscroll-behavior: contain; scroll-snap-align: start; }   /* scrolls only if ONE item is taller than the board */
.kt.multi .kt-col + .kt-col::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; border-left: 2px dashed rgba(127,127,135,.38); pointer-events: none; }
.kt-line { display: flex; align-items: flex-start; gap: 4px; padding: 0 8px 0 6px; position: relative; }
.kt-line + .kt-line::before { content: ""; position: absolute; top: 0; left: 52px; right: 12px; border-top: .5px solid var(--hairline); }
.kt-check {
  flex: 0 0 auto; width: 44px; height: 48px; display: grid; place-items: center; color: transparent; position: relative;
}
.kt-check::before { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--text-3); transition: background .2s ease, box-shadow .2s ease; }
.kt-check svg { position: relative; transition: transform .2s var(--ease); transform: scale(.4); }
.kt-line.done .kt-check { color: #fff; }
.kt-line.done .kt-check::before { background: #34c759; box-shadow: none; }
.kt-line.done .kt-check svg { transform: scale(1); }
.kt-body { flex: 1; min-width: 0; padding: 11px 6px 11px 2px; display: flex; flex-direction: column; gap: 3px; }
.kt-main { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%; padding: 0; border-radius: 10px; }
button.kt-main:active { background: var(--fill); }
.kt-row { display: flex; gap: 7px; align-items: baseline; }
.kt-qty { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.kt-name { font-size: 18px; font-weight: 650; line-height: 1.25; letter-spacing: -0.015em; }
.kt-mods { list-style: none; margin: 0; padding: 0 0 0 2px; font-size: 15px; color: var(--text-2); line-height: 1.35; }
.kt-mods li::before { content: "– "; color: var(--text-3); }
.kt-mods li.sub { padding-left: calc(var(--d) * 14px); }
.kt-mods li.sub::before { content: "· "; }
.kt-how { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 3px; font-size: 13px; font-weight: 600; }
.kt-cook { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--brand-tint); color: var(--accent); }
.kt-miss { color: var(--text-3); font-weight: 500; font-style: italic; }
.kt-line.done .kt-name, .kt-line.done .kt-qty { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .45; }
.kt-line.done .kt-mods, .kt-line.done .kt-how { opacity: .45; }
.kt-foot { flex: 0 0 auto; padding: 8px 12px 12px; }
.kt-bump {
  width: 100%; min-height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 18px; font-weight: 700; color: var(--text); background: var(--fill); transition: transform .15s var(--ease), background .25s ease;
}
.kt-bump:active { transform: scale(.97); }
.kt-bump.ready { background: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) { .kt-bump.ready { background: var(--accent); color: #04140a; } }
.kt-ready { font-size: 14px; font-weight: 600; opacity: .9; }
/* motion: new ticket slides in with a glow; bumped ticket lifts away */
.kt.appear { animation: kt-appear .45s var(--ease) both; }
.kt.is-new { animation: kt-new .6s var(--ease) both; box-shadow: 0 0 0 3px var(--accent), var(--shadow-lg); }
.kt.is-new .kt-num::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 7px; vertical-align: middle; border-radius: 50%; background: #34c759; animation: kds-pulse 1.4s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(52,199,89,.28); }
.kt.leaving { opacity: 0; transform: translateY(-16px) scale(.96); pointer-events: none; }
@keyframes kt-appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes kt-new { 0% { opacity: 0; transform: translateX(40px) scale(.96); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kds, .kt, .kt.appear, .kt.is-new, .kds-status.live::before { animation: none !important; transition: none !important; } }

.kt { overflow: clip; }           /* clip (not hidden): the rail stays the scroll container, so sticky header / Bump work */
/* phones: the same sideways board as iPad. One ticket column is a little narrower than the screen so the next
   column (a continuation or the next ticket) peeks in from the right; swipe sideways, never scroll down. */
@media (max-width: 699px) {
  .kds-rail { --colw: min(calc(100vw - 2 * var(--pad) - 30px - var(--sal) - var(--sar)), 380px); gap: 12px; padding-top: 12px; scroll-padding: 0 calc(var(--pad) + var(--sal)); }
}

.kds-empty { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-30%); text-align: center; padding: 0 32px; pointer-events: none; }
.kds-empty[hidden] { display: none; }
.kds-empty-icon { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--text-3); }
.kds-empty-icon svg { width: 30px; height: 30px; }
.kds-empty-title { margin: 0; font-size: 22px; font-weight: 700; }
.kds-empty-sub { margin: 6px 0 0; font-size: 16px; color: var(--text-2); }
.kds-pass { pointer-events: auto; max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.kds-pass input { font: inherit; font-size: 22px; text-align: center; letter-spacing: .3em; padding: 12px; border-radius: 14px; border: 0; background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-sm); }
.kds-pass .pill-btn { justify-content: center; min-height: 48px; }
.kds-pass-bad { margin: 0; color: #ff3b30; font-weight: 600; }
.kds-pass-bad[hidden] { display: none; }
.kds-toast {
  position: fixed; left: 50%; bottom: calc(22px + var(--sab)); z-index: 45; display: flex; align-items: center; gap: 14px;
  padding: 10px 10px 10px 20px; border-radius: 999px; font-size: 16px; font-weight: 600; color: #fff; white-space: nowrap;
  background: rgba(28,28,30,.9); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25); transform: translate(-50%, 24px); opacity: 0; transition: transform .3s var(--ease), opacity .3s ease;
}
.kds-toast.show { transform: translate(-50%, 0); opacity: 1; }
.kds-toast[hidden] { display: none; }
.kds-toast button { min-height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.16); color: #7fd89a; font-weight: 700; }
.kds-toast:not(:has(button)) { padding-right: 20px; }
@media (prefers-color-scheme: dark) { .kds-toast { background: rgba(58,58,60,.94); } }

/* installed app: the KDS view is one of the full-screen surfaces iOS samples for the status bar (see v18 notes above) */
html.standalone .kds { background-color: var(--top-live, var(--top)); background-image: linear-gradient(var(--bg), var(--bg)); }
html.standalone .kds, html.standalone .kds-rail, html.standalone .kt-col { overscroll-behavior: none; }
.kds-bar, .kds-actions, .kt-head, .kt-foot, .kt-check { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }

/* ---------- KDS v21: inline prep video / photo + Steps per ticket line ---------- */
.kt-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; font-size: 13px; font-weight: 600; }
.kt-howbtn {                                          /* the one "How to make" control: toggles the inline steps drop-down */
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px 0 11px; border-radius: 10px;
  font-size: 14px; font-weight: 700; color: var(--brand); background: var(--brand-tint); box-shadow: inset 0 0 0 1px rgba(43,86,55,.22);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.kt-howbtn svg:last-child { transform: rotate(90deg); transition: transform .2s var(--ease); margin-left: 1px; }
.kt-howbtn[aria-expanded="true"] { color: #fff; background: var(--brand); box-shadow: none; }
.kt-howbtn[aria-expanded="true"] svg:last-child { transform: rotate(-90deg); }
.kt-howbtn:active { transform: scale(.96); }
@media (prefers-color-scheme: dark) {
  .kt-howbtn { color: var(--accent); box-shadow: inset 0 0 0 1px rgba(120,200,140,.28); }
  .kt-howbtn[aria-expanded="true"] { color: #04140a; background: var(--accent); }
}
.kt-media { position: relative; margin-top: 6px; border-radius: 12px; overflow: hidden; background: var(--fill); cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kt-vid { aspect-ratio: 4 / 3; }
.kt-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kt-vposter { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; pointer-events: none; }
.kt-vid.playing .kt-vposter { opacity: 0; }         /* photo on top until real frames play; the <video> itself is never hidden */
.kt-vbadge {
  position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: none;
}
.kt-media:active { transform: scale(.985); }
.kt-pic { aspect-ratio: 16 / 9; }       /* photo (no video): fills the box edge to edge; the whole photo is in the pop-up */
.kt-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kt-stepsbox { display: none; margin-top: 8px; padding: 10px 12px 12px; border-radius: 12px; background: var(--brand-tint); }
.kt-line.show-steps .kt-stepsbox { display: block; }
.kt-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kt-steps li { display: flex; gap: 9px; align-items: flex-start; }
.kt-sn { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--brand); margin-top: 1px; }
@media (prefers-color-scheme: dark) { .kt-sn { background: var(--accent); color: #04140a; } }
.kt-st { display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.35; min-width: 0; }
.kt-st b { font-weight: 600; }
.kt-st span { color: var(--text-2); }
/* step photos (KDS video pop-up only; the ticket's "How to make" stays text-only): whole photo, white mat, never upscaled */
.kt-st { flex: 1 1 auto; }
.kt-sph { flex: 0 0 auto; display: block; padding: 0; margin: 0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); cursor: zoom-in; line-height: 0; }
.kt-sph img { display: block; object-fit: contain; }
.kt-sph:active { transform: scale(.96); }
.kp-steps .kt-steps li.has-ph { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 9px; row-gap: 8px; }
.kp-steps .kt-steps li.has-ph .kt-sph { grid-column: 2; justify-self: start; border-radius: 12px; }
.kp-steps .kt-sph img { width: auto; height: auto; max-width: min(100%, 260px); max-height: 150px; }
.kp-zoom { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 56px 16px 16px; background: rgba(255,255,255,.97); cursor: zoom-out; opacity: 0; transition: opacity .18s ease; }
.kp-zoom[hidden] { display: none; }
.kp-zoom.open { opacity: 1; }
.kp-zoom img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; }
.kp-zclose { position: absolute; top: 12px; right: 12px; }
@media (prefers-color-scheme: dark) { .kp-zoom { background: rgba(28,28,30,.97); } .kt-sph { box-shadow: 0 0 0 .5px rgba(255,255,255,.16); } }
@media (max-width: 640px) { .kp-steps .kt-sph img { max-height: 120px; max-width: min(100%, 220px); } }
.kt-stimer { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--accent) !important; }
.kt-cookmode {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #fff; background: var(--brand);
}
@media (prefers-color-scheme: dark) { .kt-cookmode { background: var(--accent); color: #04140a; } }
.kt-cookmode:active { transform: scale(.96); }
.kt-line.done .kt-media, .kt-line.done .kt-stepsbox, .kt-line.done .kt-howbtn { display: none; }   /* checked off: collapse (and stop) the video */

/* big player: full-screen style sheet, solid black (also what iOS samples for the status bar while it's open) */
/* tapped ticket video: centred pop-up card over the (dimmed, still visible) board; tap outside / ✕ / Esc closes */
.kds-player {
  position: fixed; inset: 0; z-index: 46; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);
  /* light grey dim over the still-visible board; alpha < .5 on purpose so the status-bar colour sampler keeps the KDS header */
  background: rgba(196,196,204,.48); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s ease; -webkit-tap-highlight-color: transparent;
}
.kds-player[hidden] { display: none; }
.kds-player.open { opacity: 1; }
.kp-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  width: min(100%, 980px); height: min(100%, 720px, 88vh); border-radius: 24px; background: #fff; color: #1d1d1f;
  box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
  transform: scale(.96) translateY(8px); transition: transform .28s var(--ease);
}
.kds-player.open .kp-card { transform: none; }
.kp-top { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 18px; }
.kp-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.kp-title #kpName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-cook { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--brand); background: var(--brand-tint); }
.kp-cook[hidden] { display: none; }
.kp-card.no-steps { width: min(100%, 480px); }
/* body: steps (left, scrolls on its own) + video (right, as wide as the clip's shape allows) */
.kp-body { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); gap: 14px; padding: 0 14px 14px; }
.kp-card.no-steps .kp-body { grid-template-columns: minmax(0, 1fr); }
.kp-steps { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 16px 16px; border-radius: 16px; background: #f5f5f7; }
.kp-steps[hidden] { display: none; }
.kp-sh { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--text-2); }
.kp-steps .kt-steps { gap: 12px; }
.kp-steps .kt-sn { width: 26px; height: 26px; font-size: 14px; }
.kp-steps .kt-st { font-size: 17px; line-height: 1.4; }
.kp-steps .kt-cookmode { margin-top: 16px; min-height: 42px; font-size: 15px; }
.kp-stage { position: relative; overflow: hidden; height: 100%; aspect-ratio: var(--kp-ar, 9 / 16); max-width: 52vw; border-radius: 16px; background: #fff; justify-self: end; }
.kp-card.no-steps .kp-stage { width: 100%; max-width: none; aspect-ratio: auto; justify-self: stretch; }
.kp-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: transparent; border-radius: 16px; }
.kp-stage.failed::after { content: attr(data-msg); position: absolute; z-index: 1; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 14px; font-weight: 600; text-align: center; }
.kds-player .kds-icon { background: #f2f2f7; color: #1d1d1f; height: 42px; min-width: 42px; padding: 0 16px; font-size: 15px; white-space: nowrap; flex: 0 1 auto; }
.kds-player .kp-close { padding: 0; width: 36px; min-width: 36px; height: 36px; }
.kds-player .kds-icon[hidden] { display: none; }
.kds-player .kp-cookmode { background: var(--brand); color: #fff; }
.kds-player .kds-icon:active { transform: scale(.95); }
@media (prefers-color-scheme: dark) {
  .kds-player { background: rgba(0,0,0,.48); }
  .kp-card { background: #1c1c1e; color: #f5f5f7; box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
  .kp-stage { background: #1c1c1e; }
  .kp-steps { background: rgba(255,255,255,.07); }
  .kp-cook { color: var(--accent); }
  .kds-player .kds-icon { background: rgba(255,255,255,.12); color: #f5f5f7; }
  .kds-player .kp-cookmode { background: var(--accent); color: #04140a; }
}
/* narrow phones (portrait): video on top, steps below (scrolling) */
@media (max-width: 640px) {
  .kp-card, .kp-card.no-steps { width: 100%; height: min(100%, 90vh); }
  .kp-body { display: flex; flex-direction: column; gap: 10px; padding: 0 10px 10px; }
  .kp-stage { order: -1; flex: 0 0 auto; height: 46%; width: 100%; max-width: none; aspect-ratio: auto; justify-self: stretch; }
  .kp-card.no-steps .kp-stage { flex: 1 1 0; height: auto; }
  .kp-steps { flex: 1 1 0; padding: 12px 14px 14px; }
  .kp-steps .kt-st { font-size: 16px; }
}
/* photo pop-up (item without a video): same card; the product photo takes the video's place, shown whole */
.kp-stage .kp-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 16px; }
.kp-card.photo .kp-stage { height: auto; width: min(56vw, 600px); max-height: 100%; aspect-ratio: var(--kp-ar, 4 / 3); align-self: center; }   /* photo keeps its own shape: no bars */
.kp-soon { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 600; color: var(--text-2); }
/* photo but no steps yet: photo on top, "Steps coming soon" under it */
.kp-card.soon { width: min(100%, 620px); height: auto; max-height: min(100%, 88vh); }
.kp-card.soon .kp-body { flex: 0 1 auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
.kp-card.soon .kp-stage { order: -1; width: 100%; height: auto; max-width: none; max-height: 66vh; justify-self: stretch; align-self: start; }
.kp-card.soon .kp-steps { padding: 14px 16px; overflow: visible; }
@media (max-width: 640px) {
  .kp-card.photo .kp-stage { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: var(--kp-ar, 4 / 3); max-height: 46%; max-width: none; align-self: stretch; }
  .kp-card.soon { height: auto; }
  .kp-card.soon .kp-stage { max-height: 60vh; }
  .kp-card.soon .kp-steps { flex: 0 0 auto; }
}
html.standalone .kds-player { overscroll-behavior: none; }
@media (prefers-reduced-motion: reduce) { .kds-player, .kp-card, .kt-vposter { transition: none !important; } }

/* ---------- Paired sauce pill (croquetas): sauce colour from the admin sauce list, English name ---------- */
.sauce-pill {
  display: inline-flex; align-items: center; flex: 0 0 auto; max-width: 100%; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: -0.005em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--sc, #8e8e93); color: var(--si, #fff); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1);
}
/* card order (every card, same spacing): name -> clock + time -> sauce pill on its own line -> price pinned to the bottom */
.card-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; min-width: 0; }
.card-tags .card-cook { margin-top: 0; }
.card-tags .sauce-pill { max-width: 100%; }
@media (min-width: 700px) { .sauce-pill { height: 24px; font-size: 13px; padding: 0 10px; } }
.sauce-pill.lg { height: 30px; padding: 0 14px; font-size: 16px; margin-top: 4px; }
.cook-card .cc-sauce { display: flex; margin-top: 8px; }
.cook-card.sauce-only .cc-sauce { margin-top: 4px; }
.sauce-pill.sp-tk { height: 24px; font-size: 13px; }
.kt-ts { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; }   /* KDS: time, sauce under it */

/* EN/ES lives only on the home page: hide it while a sheet (search, cook times) or pop-up is up over home */
body.sheet-open .appbar [data-lang-switch] { visibility: hidden; }

/* KDS live Toast: own web orders, guest first name + last initial, Practice switch */
.kt-src.src-online { background: #2B5637; color: #fff; box-shadow: inset 0 0 0 1.5px #ffc300; }
/* guest's name in the coloured header, right after the order number: truncates first so the badge and timer always show */
.kt-lead { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.kt-head .kt-num, .kt-head .kt-src, .kt-head .kt-age { flex: 0 0 auto; }
.kt-head .kt-guest { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.kt-head .kt-age { margin-left: auto; padding-left: 4px; }
.kds-practice[aria-pressed="true"] { background: #ffcc00; color: #2B5637; }
@media (max-width: 599px) { .kds-practice { padding: 0 10px; } .kds-practice span { font-size: 14px; } }
@media (max-width: 380px) { .kds-practice span { display: none; } }

/* source tag sits at the start of the info line under the header bar (the bar is only number, guest name, timer) */
.kt-meta { gap: 4px 8px; padding-top: 9px; }
.kt-meta .kt-src { font-size: 12px; padding: 3px 8px; line-height: 1.25; }
.kt-src.src-other { background: var(--fill); color: var(--text); }
.kt-head .kt-guest { font-size: 20px; }

/* header contents live in .kt-hin (number, guest name, timer). On a wide ticket the coloured bar spans every column, while
   its contents, the info line and the one Bump keep the first column's width and stay in view when the board is swiped. */
.kt-hin { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.kt.multi .kt-lead { position: sticky; left: 14px; max-width: calc(var(--colw) - 110px); }   /* number + name stay in view on the left... */
.kt.multi .kt-age { position: sticky; right: 14px; }                                              /* ...the timer at the far right of the bar */
.kt-blbl { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.kt.multi .kt-bump { justify-content: center; }                        /* one Bump across the whole ticket */
.kt.multi .kt-blbl { will-change: transform; }                           /* kds.js centres the label on the visible part of the card */

/* board height = viewport minus the KDS bar and banner minus a small margin: more room before a ticket needs a 2nd column */
.kds-rail { padding-top: 10px; padding-bottom: calc(10px + var(--sab)); }
@media (max-width: 1023px) { .kds-sample-more { display: none; } }      /* Practice banner stays on one line on iPad portrait */
.kt-sample { padding: 2px 6px; }

/* every ticket photo is the same size (full column width, 16:9, cover, 12px corners); videos are the same width and
   about 18% taller (3:2). Fixed sizes, so a ticket's height is known before images load (column-flow math stays exact). */
.kt-media { display: block; width: 100%; border-radius: 12px; overflow: hidden; }
.kt-pic { aspect-ratio: 16 / 9; }
.kt-vid { aspect-ratio: 3 / 2; }
.kt-pic img, .kt-vid video, .kt-vposter { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }

/* split ticket = stacked paper tickets: header bar across all columns; column 1 = info line + items + Bump; every other
   column is its own panel, top-aligned under the bar and only as tall as its items. The white card / outline / shadow is
   the .kt-shape SVG (drawn by kds.js) that follows the stepped outline, so the board shows under shorter columns. */
.kt.multi {
  display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); grid-template-rows: auto auto auto auto 1fr; align-items: start;
  background: transparent; box-shadow: none; border-radius: 0; overflow: visible; isolation: isolate;
}
.kt.multi.age-red, .kt.multi.is-new { box-shadow: none; }
.kt.multi > .kt-head { grid-column: 1 / -1; grid-row: 1; border-radius: 18px 18px 0 0; }
.kt.multi > .kt-meta { grid-column: 1; grid-row: 2; }
.kt.multi .kt-cols { display: contents; }
.kt.multi .kt-col { grid-row: 2 / -1; }   /* a column taller than column 1 grows the 1fr filler row, not column 1's rows */
.kt.multi .kt-col:first-child { grid-column: 1; grid-row: 3; }
.kt.multi > .kt-foot { grid-column: 1; grid-row: 4; }                       /* one Bump, under column 1 only */
.kt-shape { display: none; }
.kt.multi > .kt-shape { display: block; position: absolute; left: 0; top: 0; z-index: -1; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.05)) drop-shadow(0 4px 12px rgba(0,0,0,.07)); }
.kt-shape path { fill: var(--bg-elev); stroke: transparent; stroke-width: 0; paint-order: stroke fill; stroke-linejoin: round; }
.kt.multi.age-red > .kt-shape path { stroke: #ff3b30; stroke-width: 4px; }      /* = the 2px outline single tickets get */
.kt.multi.is-new > .kt-shape path { stroke: var(--accent); stroke-width: 6px; }  /* = the 3px "new" glow ring */
@media (prefers-color-scheme: dark) { .kt.multi > .kt-shape { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); } }

/* split ticket header: name and timer each pin inside their own half of the bar, so swiping / a ticket half off-screen
   can never slide the timer over the name (single tickets: the boxes don't exist for layout) */
.kt-lbox, .kt-abox { display: contents; }
/* both boxes cover the whole bar (same grid cell): the name's box stops a timer-width short of the right end, the timer's
   box starts after the name's normal spot, so each one follows a swipe across the whole ticket but never over the other.
   --leadw / --agew are measured by kds.js */
.kt.multi .kt-hin { display: grid; grid-template-columns: minmax(0, 1fr); }
.kt.multi .kt-lbox, .kt.multi .kt-abox { grid-area: 1 / 1; display: flex; align-items: center; min-width: 0; }
.kt.multi .kt-lbox { padding-right: calc(var(--agew, 70px) + 16px); }
.kt.multi .kt-abox { padding-left: calc(var(--leadw, 200px) + 16px); justify-content: flex-end; }

/* column caps: column 1 = board - header - info line - Bump (--cap); later columns start right under the header bar, so
   they may use board - header (--capn). Slightly tighter Bump / list padding so two normal items + Bump fit on iPad. */
.kt.multi .kt-col + .kt-col { max-height: var(--capn, var(--cap, none)); }
.kt-foot { padding: 6px 12px 10px; }
.kt-lines { padding-bottom: 4px; }
.kt { min-width: 0; }   /* card is exactly one column wide while it's measured, so item heights match the split columns */

/* no urgency-coloured outline: the header bar colour is the urgency cue. Every ticket gets the same neutral hairline edge
   + soft shadow (a new ticket keeps its slide-in, green dot and slightly deeper shadow, but no coloured ring). */
.kt, .kt.age-amber, .kt.age-red { box-shadow: 0 0 0 1px var(--hairline), var(--shadow-sm); }
.kt.is-new { box-shadow: 0 0 0 1px var(--hairline), var(--shadow-lg); }
.kt.multi, .kt.multi.age-amber, .kt.multi.age-red, .kt.multi.is-new { box-shadow: none; }
.kt-shape path, .kt.multi.age-red > .kt-shape path, .kt.multi.is-new > .kt-shape path { stroke: var(--hairline); stroke-width: 2px; }   /* 1px shows outside the fill */