/* BlendPaw — mobile-first, warm palette */
:root{
  --or:#E8833A; --or-d:#C96A28; --gr:#2D6A4F; --gr-l:#E8F3ED;
  --bg:#FFFDF9; --card:#ffffff; --ink:#26332C; --ink2:#5B6B61; --ink3:#8A9890;
  --line:#EBE6DD; --warn:#FFF4E5; --warn-b:#F0B357; --bad:#FCE8E6; --ok:#DCF0E4;
  --r:16px; --sh:0 2px 12px rgba(38,51,44,.07);
  --zms:.42s;            /* v15 shared-element flight, slowed down */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit;font-size:16px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,253,249,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:640px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{font-size:24px}
.brand-n{font-weight:800;font-size:17px;letter-spacing:-.02em}
.brand-s{font-size:11px;color:var(--ink3);line-height:1.2}
.switches{display:flex;gap:6px;flex-shrink:0}
.seg{display:flex;background:#F1ECE4;border-radius:999px;padding:3px;font-size:12px;font-weight:700}
.seg span{padding:5px 11px;border-radius:999px;color:var(--ink3);transition:.18s}
.seg span.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* ---------- layout ---------- */
main{max-width:640px;margin:0 auto;padding:16px 16px 40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px;box-shadow:var(--sh)}
.hidden{display:none}
.ttl{font-size:23px;font-weight:800;margin:0 0 6px;letter-spacing:-.02em}
.sub{margin:0 0 20px;color:var(--ink2);font-size:14px}
.ct{font-size:18px;font-weight:800;margin:0 0 4px;letter-spacing:-.01em}
.cs{margin:0 0 16px;color:var(--ink2);font-size:13px}
.tiny{font-size:11px;color:var(--ink3);text-align:center;margin:10px 0 0}
.opt{font-weight:400;color:var(--ink3);font-size:12px}

/* ---------- form ---------- */
.fld{margin-bottom:20px}
.fld>label{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.wrow{display:flex;align-items:center;gap:10px}
.wrow input{
  flex:1;min-width:0;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;
  background:#fff;font-size:19px;font-weight:700;color:var(--ink);transition:.15s;
}
.wrow input:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(232,131,58,.13)}
.wunit{font-size:14px;font-weight:700;color:var(--ink3);min-width:48px}
select{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  font-size:15px;font-weight:600;color:var(--ink);appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%238A9890' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;
}
select:focus{outline:none;border-color:var(--or)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:9px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;
  font-size:14px;font-weight:600;color:var(--ink2);transition:.15s;display:inline-flex;align-items:center;gap:6px;
}
.chip:active{transform:scale(.97)}
.chip.on{background:var(--or);border-color:var(--or);color:#fff}
.chips.big .chip{padding:14px 22px;font-size:16px;flex:1;justify-content:center}
.chips.sm .chip{padding:6px 11px;font-size:12.5px}
.chip .ci{font-size:17px}
.chips.sm .chip .ci{display:none}
.hint{margin:9px 0 0;font-size:12.5px;color:var(--ink2);font-style:italic;min-height:18px}

/* ---------- CTA ---------- */
.cta{
  width:100%;padding:17px;background:var(--or);color:#fff;border-radius:14px;
  font-size:16.5px;font-weight:800;letter-spacing:-.01em;box-shadow:0 4px 16px rgba(232,131,58,.32);transition:.15s;
}
.cta:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(232,131,58,.3)}
.cta.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}

/* ---------- hero ---------- */
.hero{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:16px;box-shadow:var(--sh)}
.hero img{width:100%;height:200px;object-fit:cover}
.hero-ov{position:absolute;left:0;right:0;bottom:0;padding:32px 16px 14px;
  background:linear-gradient(transparent,rgba(20,28,23,.75))}
.hero-tag{color:#fff;font-weight:800;font-size:16px;letter-spacing:-.01em}

/* ---------- stats ---------- */
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}
.stat{background:#fff;padding:14px;text-align:center}
.sv{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--or)}
.sl{font-size:11.5px;color:var(--ink3);margin-top:2px}
.modebox{display:flex;gap:12px;align-items:flex-start;background:var(--gr-l);border-radius:12px;padding:14px}
.mode-ic{font-size:20px;line-height:1.2}
.mode-t{font-weight:800;font-size:14.5px;color:var(--gr)}
.mode-d{font-size:12.5px;color:var(--ink2);margin-top:2px}

/* ---------- ingredient table ---------- */
.itbl{width:100%;border-collapse:collapse}
.itbl th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);
  padding:0 0 9px;border-bottom:1.5px solid var(--line);font-weight:700;
}
.itbl th.r{text-align:right}
.itbl td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.itbl td.r{text-align:right;white-space:nowrap}
.itbl tr:last-child td{border-bottom:none}
.food-n{font-weight:700;font-size:14.5px}
.food-z{font-size:11.5px;color:var(--ink3);margin-top:1px}
.amt{font-weight:800;font-size:15px;color:var(--ink)}
.amt2{font-size:11.5px;color:var(--ink3);margin-top:1px}
.share{display:inline-block;min-width:42px;padding:3px 8px;background:#F1ECE4;border-radius:999px;font-size:12px;font-weight:700;color:var(--ink2)}
.note{margin-top:14px;padding:11px 13px;background:#F7F4EE;border-radius:10px;font-size:12.5px;color:var(--ink2)}

/* ---------- supplements ---------- */
.card.warn{background:var(--warn);border-color:var(--warn-b)}
.card.warn .ct{display:flex;align-items:center;gap:7px}
.wic{font-size:16px}
.supp{background:#fff;border-radius:12px;padding:14px;margin-bottom:9px;border:1px solid rgba(240,179,87,.3)}
.supp:last-child{margin-bottom:0}
.supp-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.supp-n{font-weight:800;font-size:14.5px}
.supp-a{font-weight:800;font-size:15px;color:var(--or-d);white-space:nowrap}
.supp-z{font-size:11.5px;color:var(--ink3);margin-top:2px}
.supp-d{font-size:12.5px;color:var(--ink2);margin-top:7px;padding-top:7px;border-top:1px dashed var(--line)}
.supp-d b{color:var(--or-d)}

/* ---------- aafco ---------- */
.arow{margin-bottom:13px}
.arow:last-child{margin-bottom:0}
.arow-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
.arow-n{font-size:13.5px;font-weight:700}
.arow-v{font-size:13px;font-weight:800}
.arow-v.ok{color:var(--gr)}
.arow-v.bad{color:#C0392B}
.arow-t{font-size:11px;color:var(--ink3);font-weight:600}
.bar{height:6px;background:#F1ECE4;border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--gr);transition:width .5s}
.bar i.bad{background:#E07A6B}
.anote{font-size:11.5px;color:var(--ink2);margin-top:4px;font-style:italic}

/* ---------- steps ---------- */
.steps{margin:0;padding-left:20px}
.steps li{margin-bottom:11px;font-size:14px;color:var(--ink);padding-left:4px}
.steps li:last-child{margin-bottom:0}
.steps b{color:var(--or-d)}

/* ---------- disclaimer ---------- */
.card.disc{background:#F7F4EE}
.card.disc ul{margin:0;padding-left:18px}
.card.disc li{font-size:12.5px;color:var(--ink2);margin-bottom:8px}
.card.disc li:last-child{margin-bottom:0}
.card.disc b{color:var(--ink)}

/* ---------- footer ---------- */
footer{max-width:640px;margin:0 auto;padding:0 16px 34px;text-align:center}
footer p{font-size:11.5px;color:var(--ink3);margin:0 0 6px}

@media (max-width:360px){
  .chips.big .chip{padding:12px 14px;font-size:15px}
  .statgrid{grid-template-columns:1fr 1fr}
  .sv{font-size:19px}
}

/* ---------- recipe list ---------- */
.lsthead{margin-bottom:14px}
.lsthead .ttl{margin-bottom:4px}
.lsthead .sub{margin-bottom:0}
.rcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:13px;box-shadow:var(--sh);cursor:pointer;
  transition:transform .13s,box-shadow .13s;
}
.rcard:active{transform:scale(.985);box-shadow:0 1px 5px rgba(38,51,44,.09)}
.rcard-in{display:flex;align-items:stretch}
.rthumb{width:112px;flex-shrink:0;background:#F1ECE4;position:relative;overflow:hidden}
.rthumb img{width:112px;height:100%;min-height:112px;object-fit:cover;display:block}
.rbody{flex:1;min-width:0;padding:13px 14px;display:flex;flex-direction:column;justify-content:center}
.rname{font-weight:800;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.rname .num{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  background:var(--or);color:#fff;border-radius:6px;font-size:11px;font-weight:800;flex-shrink:0;
}
.rmain{font-size:12.5px;color:var(--ink2);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmeta{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap}
.rmeta span{font-size:11.5px;color:var(--ink3);font-weight:600}
.rmeta b{color:var(--or);font-weight:800}
.rtags{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.rtag{font-size:10.5px;padding:2px 7px;background:var(--gr-l);color:var(--gr);
  border-radius:5px;font-weight:700}

/* ---------- back bar ---------- */
.backbar{
  display:inline-flex;align-items:center;gap:5px;padding:8px 14px 8px 10px;margin-bottom:12px;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;
  font-size:13.5px;font-weight:700;color:var(--ink);box-shadow:var(--sh);
}
.backbar:active{transform:scale(.97)}
.backbar .bk{font-size:19px;line-height:1;color:var(--or);font-weight:400}
.hero-sub{color:rgba(255,255,255,.9);font-size:12.5px;margin-top:2px;font-weight:600}

/* ---------- breed ---------- */
.breedbox{margin-top:9px;padding:11px 13px;background:var(--gr-l);border-radius:11px;font-size:12.5px;color:var(--ink2)}
.breedbox .br-h{font-weight:800;color:var(--gr);font-size:12px;letter-spacing:.03em;margin-bottom:5px;text-transform:uppercase}
.breedbox .br-row{margin-bottom:5px}
.breedbox .br-row:last-child{margin-bottom:0}
.card.breed{background:var(--gr-l);border-color:#BFE0CE}
.card.breed .ct{color:var(--gr)}
.bsec{margin-bottom:14px}
.bsec:last-child{margin-bottom:0}
.bsec-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.bchip{
  display:flex;gap:9px;align-items:flex-start;background:#fff;border-radius:10px;
  padding:10px 12px;margin-bottom:7px;border:1px solid rgba(45,106,79,.14);
}
.bchip:last-child{margin-bottom:0}
.bchip .bc-n{font-weight:800;font-size:13.5px;min-width:0}
.bchip .bc-p{font-size:11px;color:var(--or);font-weight:800;white-space:nowrap}
.bchip .bc-w{font-size:12px;color:var(--ink2);margin-top:3px}
.brisks{display:flex;flex-wrap:wrap;gap:6px}
.brisk{font-size:11.5px;padding:4px 9px;background:#fff;border-radius:6px;color:var(--ink2);
  border:1px solid rgba(45,106,79,.18);font-weight:600}

/* ---------- danger / toxins ---------- */
.card.danger{background:#FDECEA;border-color:#E88C7D}
.toxhead{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:2px 0;
  cursor:pointer}
.toxic{font-size:19px;line-height:1}
.toxt{flex:1;font-weight:800;font-size:15px;color:#A32E1C;letter-spacing:-.01em}
.toxwarn{display:flex;gap:2px;font-size:13px;line-height:1;opacity:.9}
.toxarrow{font-size:22px;color:#A32E1C;transition:transform .32s cubic-bezier(.33,.01,.2,1);
  display:inline-block;line-height:1;padding:0 2px}
.toxarrow.up{transform:rotate(180deg)}
#toxBody,#toxBodyList{margin-top:13px}
.titem{background:#fff;border-radius:10px;padding:11px 13px;margin-bottom:8px;border:1px solid rgba(163,46,28,.16)}
.titem:last-child{margin-bottom:0}
.titem .ti-n{font-weight:800;font-size:13.5px;color:#A32E1C}
.titem .ti-w{font-size:12px;color:var(--ink2);margin-top:4px}
.titem.cat-only .ti-n::after{content:'CAT ONLY';font-size:9px;background:#A32E1C;color:#fff;
  padding:1px 5px;border-radius:4px;margin-left:6px;vertical-align:middle;letter-spacing:.04em}
.titem.dog-only .ti-n::after{content:'DOG ONLY';font-size:9px;background:#A32E1C;color:#fff;
  padding:1px 5px;border-radius:4px;margin-left:6px;vertical-align:middle;letter-spacing:.04em}
.toxnote{margin-top:11px;padding:10px 12px;background:rgba(163,46,28,.08);border-radius:9px;
  font-size:11.5px;color:#8B2418;line-height:1.5}

/* ---------- per-recipe disclaimer strip ----------
   Sits between the hero photo and the numbers, so the notice is read in the
   same place the amounts are read. Deliberately calmer than the red toxic
   warning: this is a standing notice, not an alarm. */
.disc-strip{display:flex;gap:9px;align-items:flex-start;margin:0 0 12px;
  padding:10px 13px;border-radius:11px;
  background:linear-gradient(180deg,rgba(232,180,88,.13),rgba(232,180,88,.07));
  border:1px solid rgba(180,130,50,.22);
  box-shadow:0 1px 2px rgba(60,40,10,.05)}
.disc-strip .ds-ico{flex:0 0 auto;font-size:14px;line-height:1.35;
  color:#9A6B1E;opacity:.85}
.disc-strip .ds-txt{font-size:11.8px;line-height:1.6;color:#6B4E1C}

/* ---------- hero carousel: absolute + crossfade ---------- */
.hero2{position:relative;margin:0 0 14px;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh);background:#EDE7DE}
/* stage holds a fixed 16:9 box so nothing collapses before images decode */
.car-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#EDE7DE}
.car-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;cursor:pointer;
  transition:opacity .62s cubic-bezier(.33,.01,.2,1),
             transform .62s cubic-bezier(.33,.01,.2,1),
             visibility 0s linear .62s;
  transform:scale(1.035);will-change:opacity,transform;
}
.car-slide.on{opacity:1;visibility:visible;transform:scale(1);transition-delay:0s}
.car-ph{position:absolute;inset:0;background:#EDE7DE}
.car-ph img{width:100%;height:100%;object-fit:cover;display:block}
.car-cap{
  position:absolute;left:0;right:0;bottom:0;padding:30px 15px 15px;
  background:linear-gradient(to top,rgba(18,26,22,.72),rgba(18,26,22,.34) 52%,transparent);
  color:#fff;display:flex;flex-direction:column;gap:2px;pointer-events:none;
}
.car-cap b{font-size:15.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25;
  text-shadow:0 1px 3px rgba(0,0,0,.35)}
.car-cap span{font-size:11.5px;opacity:.94;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.car-dots{position:absolute;bottom:11px;right:13px;display:flex;gap:5px;z-index:3}
.car-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);
  transition:background .3s,width .3s;cursor:pointer}
.car-dot.on{background:#fff;width:16px;border-radius:3px}
.car-hint{position:absolute;top:11px;left:13px;z-index:3;font-size:10.5px;font-weight:700;
  color:#fff;background:rgba(18,26,22,.42);padding:4px 9px;border-radius:999px;
  backdrop-filter:blur(3px);pointer-events:none}

/* ---------- sub-pages ---------- */
.subpage{padding-bottom:6px}
.backbar{display:inline-flex;align-items:center;gap:5px;padding:9px 15px 9px 11px;margin-bottom:12px;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:700;
  color:var(--ink);box-shadow:var(--sh)}
.backbar:active{transform:scale(.97)}
.backbar .bk{font-size:20px;line-height:1;color:var(--or);font-weight:400}
.sp-hero{border-radius:var(--r);overflow:hidden;margin-bottom:13px;box-shadow:var(--sh);background:#EDE7DE}
.sp-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.sp-t{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:11px;
  display:flex;align-items:center;gap:8px}
.sp-ic{font-size:20px}
.sp-body p{font-size:13.5px;color:var(--ink2);line-height:1.65;margin-bottom:10px}
.sp-body ul{margin:0 0 11px;padding-left:19px}
.sp-body li{font-size:13px;color:var(--ink2);line-height:1.6;margin-bottom:5px}
.sp-body strong{color:var(--ink)}
.spfacts{display:flex;gap:8px;flex-wrap:wrap;margin:11px 0 4px}
.spfact{flex:1;min-width:78px;background:var(--or-l);border-radius:10px;padding:9px 8px;text-align:center}
.spfact b{display:block;font-size:15px;font-weight:800;color:var(--or);letter-spacing:-.01em}
.spfact span{font-size:10px;color:var(--ink2);font-weight:600}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(14,20,17,.94);display:flex;
  flex-direction:column;align-items:center;justify-content:center;padding:18px;gap:13px}
.lb-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:17px;display:flex;align-items:center;
  justify-content:center}
.lb img{max-width:100%;max-height:74vh;border-radius:12px;object-fit:contain}
.lb-cap{color:#fff;font-size:13px;font-weight:700;text-align:center;opacity:.92}

/* ---------- trust strip ---------- */
.trust{display:flex;gap:7px;margin-bottom:13px}
.ti{flex:1;background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:9px 4px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px}
.ti-i{font-size:14px;line-height:1}
.ti b{font-size:13px;font-weight:800;color:var(--or);letter-spacing:-.01em}
.ti span[data-i18n]{font-size:9.5px;color:var(--ink3);font-weight:600;line-height:1.2}

/* ---------- paw divider ---------- */
.pawdiv{display:flex;justify-content:center;gap:9px;margin:18px 0 4px;opacity:.28}
.pawdiv span{font-size:11px}

/* ---------- footer brand ---------- */
.ft-brand{font-weight:800;font-size:14px;margin-bottom:5px;color:var(--ink)}
.ft-t{font-size:11.5px;color:var(--ink3);line-height:1.55}

/* ---------- playful pet touches ---------- */
.card{position:relative}
#formCard::before{
  content:'🐾';position:absolute;top:11px;right:13px;font-size:13px;opacity:.16;pointer-events:none;
}
.sec-pet{display:flex;align-items:center;gap:7px}
.sec-pet .sp{font-size:15px}

.verline{text-align:center;font-size:10.5px;color:var(--ink3);margin:2px 0 10px;letter-spacing:.02em}
.verline b{color:var(--or);font-weight:800}

/* Utility guard.
   .lb{display:flex} is declared at line 301 and .hidden{display:none} at line
   34 — same specificity, so the later rule won and the lightbox overlay stayed
   on screen from first load with no way to dismiss it. Every utility that must
   never be overridden by a component rule is restated here at the end. */
.hidden{display:none!important}

/* ============================================================
   v6 — 60 recipes in three groups, two cards per row
   ============================================================ */
.grp{margin:0 0 26px}
.grp-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:0 2px 10px;border-bottom:2px solid #E6EDE8;margin-bottom:14px}
.grp-h h2{margin:0;font-size:1.06rem;font-weight:800;letter-spacing:.01em;
  display:flex;align-items:center;gap:8px}
.grp-n{display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:20px;padding:0 6px;border-radius:10px;
  background:#26332C;color:#fff;font-size:.72rem;font-weight:700}
.grp-s{font-size:.76rem;color:#7C8C83;font-weight:600}
.g-wet  .grp-h h2{color:#2E7D5B}
.g-dry  .grp-h h2{color:#B4652A}
.g-treat .grp-h h2{color:#8A5A2B}
.g-wet  .grp-n{background:#2E7D5B}
.g-dry  .grp-n{background:#B4652A}
.g-treat .grp-n{background:#8A5A2B}

.grp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:380px){.grp-grid{grid-template-columns:1fr}}

/* card becomes a vertical photo-first tile */
.grp-grid .rcard{overflow:hidden;border-radius:14px;background:#fff;
  box-shadow:0 2px 10px rgba(38,51,44,.09);cursor:pointer;
  transition:transform .16s, box-shadow .16s}
.grp-grid .rcard:active{transform:scale(.975)}
.grp-grid .rthumb{position:relative;width:100%;aspect-ratio:1/1;
  background:#F2F5F3;overflow:hidden;margin:0}
.grp-grid .rthumb img{width:100%;height:100%;object-fit:cover;display:block}
.grp-grid .rbody{padding:9px 10px 11px}
.grp-grid .rname{font-size:.86rem;font-weight:800;line-height:1.28;
  color:#1F2A24;margin-bottom:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grp-grid .rmode{font-size:.68rem;font-weight:700;color:#8A9A90;margin-bottom:4px}
.grp-grid .rmain{font-size:.7rem;color:#6C7C73;line-height:1.35;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grp-grid .rmeta{display:flex;gap:8px;font-size:.68rem;color:#8A9A90;margin-bottom:0}
.grp-grid .rmeta b{color:#26332C;font-size:.75rem}
.grp-grid .rtags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.grp-grid .rtag{font-size:.62rem;font-weight:700;padding:2px 6px;border-radius:6px;
  background:#EEF3EF;color:#4E6157}

/* building indicator */
.building{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:56px 16px;color:#6C7C73}
.bspin{width:30px;height:30px;border-radius:50%;
  border:3px solid #DDE6E0;border-top-color:#E8833A;animation:bspin .8s linear infinite}
@keyframes bspin{to{transform:rotate(360deg)}}
.btxt{font-size:.82rem;font-weight:700}

/* ============================================================
   v8 — drag-following carousel, page transitions, motion polish
   ============================================================ */

/* --- carousel: a real track that tracks the finger --- */
.car-track{display:flex;height:100%;will-change:transform;
  transform:translate3d(0,0,0);touch-action:pan-y}
.car-slide{position:relative!important;inset:auto!important;
  flex:0 0 100%;width:100%;height:100%;
  opacity:1!important;visibility:visible!important;
  transform:none!important;cursor:grab;
  transition:filter .42s cubic-bezier(.22,.61,.36,1)}
/* while the finger is down the blur is recomputed every frame, so it must
   not be eased; on release the easing takes over and the seam dissolves */
.car-track.dragging .car-slide{transition:none}
.car-slide:active{cursor:grabbing}
/* the cloned first/last slides that make the loop seamless */
.car-slide[data-clone]{pointer-events:auto}
/* keep the caption from swallowing the drag */
.car-cap{pointer-events:none}
.car-dots{display:flex;justify-content:center;gap:7px;padding:11px 0 2px}
.car-dot{width:7px;height:7px;border-radius:50%;background:var(--line);
  transition:width .3s cubic-bezier(.22,.61,.36,1),background .3s;cursor:pointer}
.car-dot.on{width:20px;border-radius:4px;background:var(--or)}

/* --- sub-pages slide in, so a tap reads as a page change --- */
.subpage.page-in{animation:pageIn .34s cubic-bezier(.22,.61,.36,1) both}
@keyframes pageIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

/* --- long-form article styling --- */
.sp-lead{font-size:14.5px!important;line-height:1.75!important;color:var(--ink)!important;
  font-weight:600;margin-bottom:13px!important}
.spsec{margin:17px 0 0}
.spsec h3{font-size:14.5px;font-weight:800;color:var(--ink);
  letter-spacing:-.01em;margin:0 0 6px;display:flex;align-items:flex-start;gap:7px}
.spsec h3::before{content:'🐾';font-size:11px;opacity:.4;line-height:1.7;flex:0 0 auto}
.spsec p{font-size:13.5px;color:var(--ink2);line-height:1.85;margin:0}
.splist{margin:16px 0 0!important}
.spnote{margin-top:15px!important;background:var(--warn);border:1px solid var(--warn-b);
  border-radius:11px;padding:11px 12px!important;font-size:12.5px!important;color:#7A4A16!important}

/* --- entrance: cards rise into place --- */
.card{animation:rise .44s cubic-bezier(.22,.61,.36,1) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
main > .card:nth-of-type(2),#recipeList .grp:nth-child(2),
#recipeList .rgrp:nth-child(2){animation-delay:.06s}
#recipeList .grp:nth-child(3),#recipeList .rgrp:nth-child(3){animation-delay:.12s}

/* --- press feedback on everything tappable --- */
.cta,.chip,.backbar,.car-dot,.toxhead{transition:transform .13s cubic-bezier(.22,.61,.36,1),
  box-shadow .22s,background .22s,border-color .22s}
.cta:active,.chip:active,.backbar:active{transform:scale(.975)}
.cta{position:relative;overflow:hidden}
.cta:hover{box-shadow:0 6px 20px rgba(232,131,58,.28)}
.cta::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),
             rgba(255,255,255,.5),transparent 62%);transition:opacity .45s}
.cta:active::after{opacity:1;transition:opacity 0s}
.chip.on{box-shadow:0 3px 12px rgba(45,106,79,.20)}
.chip:hover{border-color:var(--or)}

/* --- a little more pet: paw watermark on section cards --- */
.card{position:relative}
#recipeList .grp,#recipeList .rgrp{position:relative}
#recipeList .grp::after,#recipeList .rgrp::after{
  content:'🐾';position:absolute;top:9px;right:12px;font-size:15px;
  opacity:.07;pointer-events:none}
.backbar .bk{font-size:19px;line-height:1;margin-right:2px}
.brand .logo{display:inline-block;animation:paw 3.6s ease-in-out infinite}
@keyframes paw{0%,86%,100%{transform:rotate(0)}91%{transform:rotate(-13deg)}96%{transform:rotate(13deg)}}
.pawdiv span{display:inline-block;animation:pawbeat 2.4s ease-in-out infinite}
.pawdiv span:nth-child(2){animation-delay:.18s}
.pawdiv span:nth-child(3){animation-delay:.36s}
@keyframes pawbeat{0%,100%{transform:translateY(0);opacity:.28}50%{transform:translateY(-4px);opacity:.6}}

/* --- trust strip is now three items --- */
.trust{display:grid;grid-template-columns:repeat(3,1fr)}

/* ============================================================
   v9 — premium feel: press feedback everywhere, real page
   transitions, depth on hover, motion that answers the finger
   ============================================================ */

/* --- press feedback on every tappable surface --- */
.rcard,.chip,.backbar,.seg,.toxhead,.car-dot,.supp,.stat{
  transition:transform .14s cubic-bezier(.22,.61,.36,1),
             box-shadow .22s cubic-bezier(.22,.61,.36,1),
             background .22s,border-color .22s}
.rcard:active{transform:scale(.975)}
.chip:active{transform:scale(.955)}
.seg:active{transform:scale(.96)}

/* ripple, shared by everything tappable */
.cta,.rcard,.chip,.backbar,.seg{position:relative;overflow:hidden}
.cta::after,.rcard::after,.chip::after,.backbar::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),
             rgba(255,255,255,.55),transparent 62%);
  transition:opacity .5s}
.cta:active::after,.rcard:active::after,.chip:active::after,
.backbar:active::after{opacity:1;transition:opacity 0s}

/* --- depth on hover (desktop pointers only, so touch never sticks) --- */
@media (hover:hover){
  .rcard:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(38,51,44,.14)}
  .chip:hover{transform:translateY(-1px)}
  .card:hover{box-shadow:0 6px 22px rgba(38,51,44,.09)}
  .supp:hover{background:#FBF8F3}
  .car-slide{cursor:grab}
}

/* --- the header lifts once you scroll past the top --- */
.hdr{transition:box-shadow .28s,background .28s}
.hdr.scrolled{box-shadow:0 3px 16px rgba(38,51,44,.10)}

/* --- switching between form / list / detail is a transition, not a jump --- */
/* v15 — .zoom-lock opts a page out of pageIn. During a shared-element
   flight the page must not also slide itself in: a CSS animation beats an
   inline style, so pageIn was silently overwriting the zoom transform. */
#result:not(.hidden):not(.zoom-lock),#detail:not(.hidden):not(.zoom-lock){animation:pageIn .34s cubic-bezier(.22,.61,.36,1) both}
#result:not(.hidden):not(.zoom-lock){animation-name:pageIn}
/* The hero photo has its own fade-in; hide it while the clone is in flight. */
.zoom-lock .hero img{animation:none}
.subpage.page-in{animation:pageIn .36s cubic-bezier(.22,.61,.36,1) both}

/* --- recipe cards stagger in instead of all appearing at once --- */
#recipeList .rcard{animation:rise .42s cubic-bezier(.22,.61,.36,1) both}
#recipeList .rcard:nth-child(1){animation-delay:0s}
#recipeList .rcard:nth-child(2){animation-delay:.04s}
#recipeList .rcard:nth-child(3){animation-delay:.08s}
#recipeList .rcard:nth-child(4){animation-delay:.12s}
#recipeList .rcard:nth-child(5){animation-delay:.16s}
#recipeList .rcard:nth-child(6){animation-delay:.20s}
#recipeList .rcard:nth-child(n+7){animation-delay:.24s}

/* --- stat tiles settle in sequence --- */
.statgrid .stat{animation:pop .4s cubic-bezier(.22,.61,.36,1) both}
.statgrid .stat:nth-child(2){animation-delay:.05s}
.statgrid .stat:nth-child(3){animation-delay:.10s}
.statgrid .stat:nth-child(4){animation-delay:.15s}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* --- images fade up instead of snapping in --- */
.hero img,.sp-hero img,.car-ph img{animation:imgIn .5s ease both}
@keyframes imgIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}

/* --- the progress bar breathes while the solver runs --- */
.bar{position:relative;overflow:hidden}
.bar::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:sheen 1.15s ease-in-out infinite}
@keyframes sheen{to{transform:translateX(100%)}}

/* --- keyboard users get a visible ring --- */
.cta:focus-visible,.chip:focus-visible,.backbar:focus-visible,
.rcard:focus-visible,.seg:focus-visible{
  outline:2.5px solid var(--or);outline-offset:2px}

/* --- respect the OS "reduce motion" setting --- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}


/* ============================================================
   v10
   ============================================================ */

/* A few more colours to work with. The page was orange-on-cream almost
   everywhere, which read flat; these are accents for tags, stat tiles and
   rules — not a new palette for whole surfaces. */
:root{
  --teal:#2F8F83;  --teal-l:#E4F2F0;
  --amber:#C98A1E; --amber-l:#FBF1DE;
  --plum:#8A5A8F;  --plum-l:#F3EAF4;
  --sky:#3E7CB1;   --sky-l:#E7F0F8;
}

/* ---------- carousel: soften the seam, not the photo ----------
   v9 blurred each whole slide by distance from centre. That made every
   picture soft and did nothing for the hard edge where two different
   photos meet. Now each photo fades out over its own left and right edge
   while the track travels (--fe is set per frame during a drag), so A
   dissolves into B exactly at the join. A settled slide is --fe:0 and
   therefore perfectly sharp. */
.car-ph::before,.car-ph::after{
  content:'';position:absolute;top:0;bottom:0;width:12%;z-index:2;
  pointer-events:none;opacity:var(--fe,0);
  transition:opacity .42s cubic-bezier(.22,.61,.36,1);
}
.car-ph::before{left:0;background:linear-gradient(to right,rgba(237,231,222,.95),rgba(237,231,222,0))}
.car-ph::after{right:0;background:linear-gradient(to left,rgba(237,231,222,.95),rgba(237,231,222,0))}
/* while the finger is down the value changes every frame — no easing */
.car-track.dragging .car-ph::before,
.car-track.dragging .car-ph::after{transition:none}

/* ---------- back button: presses to the theme colour ---------- */
.backbar{transition:transform .14s cubic-bezier(.22,.61,.36,1),
                    background .18s,border-color .18s,color .18s,box-shadow .18s}
.backbar:active{
  transform:scale(.96);
  background:var(--or);border-color:var(--or);color:#fff;
  box-shadow:0 4px 14px rgba(232,131,58,.34);
}
.backbar:active .bk{color:#fff}

/* ---------- ingredient line under the dish name ---------- */
.hero-ing{margin-top:5px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.82);
  line-height:1.45;text-shadow:0 1px 3px rgba(0,0,0,.3)}

/* ---------- tags get their own colours ---------- */
.rtag{transition:transform .14s}
.rtag-teal {background:var(--teal-l); color:var(--teal)}
.rtag-amber{background:var(--amber-l);color:var(--amber)}
.rtag-plum {background:var(--plum-l); color:var(--plum)}
.rtag-sky  {background:var(--sky-l);  color:var(--sky)}

/* ---------- a thin colour edge on each card, by category ---------- */
.grp-grid .rcard{position:relative}
.grp-grid .rcard::after{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--or);opacity:.85;border-radius:14px 14px 0 0;
}
.g-wet   .grp-grid .rcard::after{background:#2E7D5B}
.g-dry   .grp-grid .rcard::after{background:#B4652A}
.g-treat .grp-grid .rcard::after{background:#8A5A2B}

/* ---------- stat tiles: alternating accents instead of all orange ---------- */
.spfact:nth-child(1){background:var(--or-l)}    .spfact:nth-child(1) b{color:var(--or)}
.spfact:nth-child(2){background:var(--teal-l)}  .spfact:nth-child(2) b{color:var(--teal)}
.spfact:nth-child(3){background:var(--sky-l)}   .spfact:nth-child(3) b{color:var(--sky)}
.spfact:nth-child(4){background:var(--plum-l)}  .spfact:nth-child(4) b{color:var(--plum)}

/* ---------- a little more ornament, kept quiet ---------- */
.grp-n{box-shadow:0 2px 8px rgba(38,51,44,.16)}
.grp-h h2{position:relative;padding-left:2px}
.sp-t .sp-ic{filter:saturate(1.05)}

/* v13 — the photo shows the idea, not the exact bowl. Said once per group,
   beside the mode line, instead of stamped on all 92 cards. */
.grp-note{font-size:.68rem;color:#9AA79F;font-weight:600;letter-spacing:.02em;
  white-space:nowrap}
.grp-note.solo{margin:0 0 12px;padding:0 2px}

/* ============================================================
   v15 — shared-element zoom (the "app opens" transition)
   ------------------------------------------------------------
   v14 scaled the whole detail page to the card's box. A 350x120 card
   over a 1400x2000 page is scale(.25,.06): every line of text came out
   squashed flat, and CSS pageIn then overwrote the transform anyway.
   Now only the photo flies — the card's thumbnail grows into the hero —
   and the page behind it fades up. Slower than v14 (.42s in, .36s out)
   so the movement is actually readable.
   ============================================================ */
.zoom-flyer{
  position:fixed;z-index:1400;margin:0;padding:0;border:0;
  object-fit:cover;pointer-events:none;
  box-shadow:0 6px 22px rgba(38,51,44,.18);
  /* v17 — only transform is animated. top/left/width/height (v16) forced a
     layout + paint every frame; a transform is composited, so the flight
     no longer competes with the page for main-thread time. */
  transform-origin:top left;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:transform var(--zms) cubic-bezier(.32,.72,0,1),
             border-radius var(--zms) cubic-bezier(.32,.72,0,1),
             opacity calc(var(--zms) * .7) ease-out;
}
/* the page under the photo: fade only, never transform (no squash) */
.zoom-fade{transition:opacity calc(var(--zms) * .78) ease-out}

/* ---------- v16 — recipe search ------------------------------------
   Sits under the shortlist summary and filters the recipes that were
   already solved, so it never triggers a recalculation.
   v17 — moved up beside the heading, shortened, and toned down: a solid
   white pill with a black emoji loupe pulled focus away from the title. */
.lsthead-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.lsthead-row .ttl{
  margin:0;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lsthead .sub{margin:6px 0 0}
.srch{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  width:220px;max-width:52%;
  padding:0 11px;
  background:rgba(38,51,44,.045);
  border:1px solid transparent;border-radius:999px;
  transition:background .18s,border-color .18s,box-shadow .18s;
}
.srch:focus-within{
  background:#fff;border-color:rgba(232,131,58,.32);
  box-shadow:0 0 0 3px rgba(232,131,58,.13);
}
.srch-i{
  width:14px;height:14px;flex-shrink:0;
  color:var(--or);opacity:.42;transition:opacity .18s;
}
.srch:focus-within .srch-i{opacity:.92}
.srch-in{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  padding:8px 0;font-size:13.5px;font-weight:600;color:var(--ink);
  font-family:inherit;
}
.srch-in::placeholder{color:var(--ink3);font-weight:500;opacity:.8}
/* the native search widget paints its own clear button in WebKit */
.srch-in::-webkit-search-cancel-button{display:none}
.srch-x{
  flex-shrink:0;border:0;background:var(--line);color:var(--ink2);
  width:20px;height:20px;border-radius:50%;font-size:11px;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0;
}
.srch-x:active{background:#F0B357;color:#fff}
.srch-empty{
  text-align:center;padding:28px 16px;color:var(--ink3);
  font-size:14px;font-weight:600;
}