/* static/css/kit.css — shared kit of the redesign (port of design-language/redesign.html, phone-scoped
   rules, prefixed k-). Uses the tokens of styles.css :root; adds --cream-ink and the motion tokens.
   Motion: only transform / opacity animate (grid-template-rows for collapsibles). */

:root{
  --cream-ink:#7a4f12;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-inout:cubic-bezier(.77,0,.175,1);--ease-sheet:cubic-bezier(.32,.72,0,1);
  --k-press:140ms;--k-acc:300ms;--k-push-in:360ms;--k-push-out:260ms;--k-rise:300ms;--k-stag-step:35ms;
}
[data-theme="dark"]{--cream-ink:#e9c48c}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--cream-ink:#e9c48c} }

/* ── utilities ── */
.tap{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--k-press) var(--ease-out),background-color 160ms ease,opacity 160ms ease}
.tap:active{transform:scale(.97)}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@keyframes k-spin{to{transform:rotate(360deg)}}
@keyframes k-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes k-fade{from{opacity:0}}
@keyframes k-load{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.k-stag>*{animation:k-rise var(--k-rise) var(--ease-out) both;animation-delay:calc(var(--i,0)*var(--k-stag-step))}
.k-reveal>*{animation:k-rise 360ms var(--ease-out) both;animation-delay:calc(var(--i,0)*45ms + 120ms)}
.k-wa{color:var(--warn)}.k-ok{color:var(--ok)}.k-vi{color:var(--violet)}.k-mu{color:var(--faint)}.k-bl{color:var(--info)}.k-rd{color:var(--red)}

/* ── thumb ── */
.k-thumb{--s:48px;width:var(--s);height:var(--s);border-radius:13px;flex:none;position:relative;overflow:hidden;display:grid;place-items:center;box-sizing:border-box;background:var(--surface-soft);color:var(--faint)}
.k-thumb svg{display:block;flex:none}
.k-thumb-sm{--s:30px;border-radius:9px}
.k-thumb-md{--s:48px;border-radius:13px}
.k-thumb-lg{--s:64px;border-radius:17px;box-shadow:var(--sh-md)}
.k-thumb-xl{--s:92px;border-radius:22px;box-shadow:0 10px 24px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.1)}
.k-thumb.img{background:#fff;border:1px solid var(--hairline);padding:calc(var(--s)*.08)}
/* fit, never fill: the whole pack stays visible whatever its aspect (a tall bottle in a square slot letterboxes) */
.k-thumb.img img{position:absolute;inset:calc(var(--s)*.08);display:block;width:calc(100% - var(--s)*.16);height:calc(100% - var(--s)*.16);object-fit:contain;object-position:center}
.k-thumb.new{background:var(--violet-wash);color:var(--violet)}
.k-thumb.none{background:var(--surface-soft);color:var(--faint)}
.k-thumb.bld{background:var(--info-wash);color:var(--info)}
.k-thumb.bld svg{animation:k-spin .8s linear infinite}

/* ── header bits ── */
.k-brand{font:700 11.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--red-ink)}
.k-gt{font:400 12.5px var(--mono);color:var(--faint);letter-spacing:.02em}
.k-hero{display:flex;gap:14px;align-items:center;min-width:0}
.k-hero .k-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.k-hero .k-nm{font:600 20px/1.2 var(--disp);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.k-hline{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap;min-width:0}

/* ── status line + glyphs ── */
.k-status{display:inline-flex;align-items:center;gap:6px;font:600 13.5px var(--body);white-space:nowrap;min-width:0;max-width:100%}
.k-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.k-status.ok,.k-glyph.ok{color:var(--ok)}
.k-status.wa,.k-glyph.wa{color:var(--warn)}
.k-status.vi,.k-glyph.vi{color:var(--violet)}
.k-status.mu,.k-glyph.mu{color:var(--faint)}
.k-status.bl,.k-glyph.bl{color:var(--info)}
.k-glyph{display:inline-flex;flex:none;line-height:0}
.k-glyph svg{display:block}
.k-glyph.spin svg{animation:k-spin .8s linear infinite}

/* ── field rows ── */
.k-rows{background:var(--surface);border-radius:18px;box-shadow:var(--sh-sm);border:1px solid var(--hairline)}
.k-row{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border-top:1px solid var(--hairline);font-size:15px;color:var(--ink);min-width:0}
.k-row:first-child{border-top:0}
.k-row .k-k{width:80px;flex:none;color:var(--mute);font-size:14px}
.k-row .k-v{flex:1;font-weight:600}
.k-row .k-v.m{font-weight:400;color:var(--faint)}
.k-edit{flex:none;width:32px;height:32px;margin-right:-6px;border-radius:50%;display:grid;place-items:center;color:var(--mute)}
.k-tag{flex:none;font:700 11px var(--body);padding:3px 8px;border-radius:99px;white-space:nowrap}
.k-tag.g{background:var(--warn-wash);color:var(--warn)}
.k-tag.p{background:var(--violet-wash);color:var(--violet)}

/* ── what it needs (design-language needs-clarity mockup: .need/.why/.fix) ── */
.k-need{background:var(--surface);border:1px solid var(--hairline);border-radius:18px;box-shadow:var(--sh-sm);padding:14px 14px 4px;color:var(--ink);min-width:0}
.k-why{font:600 15.5px/1.3 var(--disp);letter-spacing:-.005em;color:var(--ink);margin:8px 0 12px}
.k-fix{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--hairline);min-width:0}
/* a side that only confirms what is known: quieter than one that adds something */
.k-fix.conf .k-fic{opacity:.55}.k-fix.conf .k-ft b{font-weight:500}
.k-fic{flex:none;width:38px;height:38px;border-radius:11px;background:var(--canvas);color:var(--ink);display:grid;place-items:center}
.k-fic svg{display:block}
.k-ft{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.k-ft b{display:block;font:600 14.5px var(--body);color:var(--ink)}
.k-ft>span{font-size:13px;line-height:1.3;color:var(--mute)}
/* grouped rows: "Required  N of 4" / "Nice to have  N of 3" */
.k-grp{min-width:0}
.k-gl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:16px 4px 7px;font:700 11.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.k-grp>.k-gl:first-child{margin-top:0}
.k-gl em{font:600 13px var(--body);font-style:normal;letter-spacing:0;text-transform:none;white-space:nowrap}
.k-row .k-v.w{font-weight:500;color:var(--warn)}
.k-row .k-v.o{font-weight:400;color:var(--faint)}
.k-rows.opt .k-row .k-k{color:var(--faint)}
.k-tag.o{background:var(--surface-soft);color:var(--mute)}

/* ── shot chips ── */
.k-shots{display:flex;gap:10px;min-width:0}
.k-shot{flex:1;min-width:0;background:var(--surface);border:1px solid var(--hairline);border-radius:16px;padding:12px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;font:600 13px var(--body);color:var(--body-c);text-align:center}
.k-shot svg{display:block;color:var(--ink)}
.k-shot .ell{max-width:100%}
/* four sides: tighter tiles so each short label fits at 360 */
.k-shots:has(> .k-shot:nth-child(4)){gap:7px}.k-shots:has(> .k-shot:nth-child(4)) .k-shot{padding:10px 2px 9px;font-size:11.5px;letter-spacing:-.01em;border-radius:14px}
.k-mini{display:inline-flex;gap:3px;color:var(--ink);flex:none}
.k-mini svg{display:block}

/* ── list + product row ── */
.k-list{background:var(--surface);border:1px solid var(--hairline);border-radius:20px;box-shadow:var(--sh-sm);overflow:hidden}
.k-prow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--hairline);min-height:68px;position:relative;background:var(--surface);color:var(--ink);min-width:0}
.k-prow:first-child{border-top:0}
.k-prow:active{background:var(--surface-soft)}
.k-prow .k-tm{width:40px;flex:none;font:500 12px var(--mono);color:var(--faint)}
.k-prow .k-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.k-prow .k-n1{font:600 15px/1.25 var(--body)}
.k-prow .k-n2{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mute);min-width:0}
.k-prow .k-n2 .k-wa{font-weight:600;flex:none}
.k-prow>.k-glyph svg{width:22px;height:22px}
.k-prow.bld{overflow:hidden}
.k-prow.bld::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:40%;background:var(--info);animation:k-load 1.4s var(--ease-inout) infinite}
.k-vpill{flex:none;display:inline-flex;align-items:center;gap:4px;font:700 11px var(--body);padding:2px 7px;border-radius:99px;background:var(--red-wash);color:var(--red-ink);white-space:nowrap}
.k-vpill svg{display:block}
/* Nutri-Score letter (row sub line, View filter) */
.k-ns{flex:none;display:inline-grid;place-items:center;width:17px;height:17px;border-radius:5px;font:800 10.5px/1 var(--body);color:#fff;font-style:normal}
.k-ns.na{background:#038141}.k-ns.nb{background:#85bb2f}.k-ns.nc{background:#fecb02;color:#3a2f00}.k-ns.nd{background:#ee8100}.k-ns.ne{background:#e63e11}

/* ── confidence badge + panel ── */
.k-ring{--c:var(--ok);--rs:22px;width:var(--rs);height:var(--rs);border-radius:50%;flex:none;position:relative;
  background:conic-gradient(var(--c) calc(var(--p,0)*1%),var(--hairline) 0);
  -webkit-mask:radial-gradient(circle,transparent calc(var(--rs)/2 - 3.5px),#000 calc(var(--rs)/2 - 3px));
  mask:radial-gradient(circle,transparent calc(var(--rs)/2 - 3.5px),#000 calc(var(--rs)/2 - 3px))}
.k-conf{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 4px;border-radius:99px;background:var(--surface);box-shadow:var(--sh-sm);font:700 13px var(--body);color:var(--ink);white-space:nowrap}
.k-chev{display:inline-flex;line-height:0;color:var(--mute);transition:transform 260ms var(--ease-out)}
.k-conf.open .k-chev,.k-sec.open>.k-sh .k-chev{transform:rotate(180deg)}
.k-confp{background:var(--surface);border-radius:18px;border:1px solid var(--hairline);box-shadow:var(--sh-sm);padding:14px 16px;color:var(--ink)}
.k-cp-top{display:flex;align-items:center;gap:10px}
.k-cp-top b{font:600 17px var(--disp)}
.k-cp-top .k-sc{margin-left:auto;font:600 13px var(--body);color:var(--mute);white-space:nowrap}
.k-cp-sub{font-size:13px;color:var(--mute);margin:3px 0 12px 42px}
.k-rings{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;text-align:center;margin-top:12px}
.k-cp-sub+.k-rings{margin-top:0}
.k-rg{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11.5px;color:var(--mute);min-width:0}
.k-rg .ell{max-width:100%}
.k-rg b{font:700 12.5px var(--body);color:var(--ink)}
.k-rg .k-ring{--rs:40px}
.k-cp-note{display:flex;gap:8px;font-size:13px;color:var(--body-c);margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline)}
.k-cp-note svg{flex:none;color:var(--mute);margin-top:1px}

/* ── collapsible ── */
.k-acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--k-acc) var(--ease-out)}
.k-acc.open{grid-template-rows:1fr}
.k-acc>div{overflow:hidden;min-height:0}
.k-acc .k-inner{opacity:0;transform:translateY(-4px);transition:opacity 200ms ease,transform 260ms var(--ease-out)}
.k-acc.open .k-inner{opacity:1;transform:none;transition-delay:60ms}
.k-sec{background:var(--surface);border:1px solid var(--hairline);border-radius:18px;box-shadow:var(--sh-sm);color:var(--ink)}
.k-sh{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 14px;font:600 15px var(--disp);color:var(--ink);text-align:left;min-width:0}
.k-sh>svg{flex:none;color:var(--red)}
.k-sh .k-st{flex:none;max-width:62%}
.k-sh .k-sv{margin-left:auto;flex:1 1 0;justify-content:flex-end;display:flex;align-items:center;gap:6px;font:500 13.5px var(--body);color:var(--mute);white-space:nowrap;min-width:0}
.k-sbody{padding:0 14px 14px;font-size:14px;color:var(--body-c)}

/* ── buttons + kicker ── */
.k-btns{display:flex;gap:10px;min-width:0}
.k-btn{height:52px;border-radius:99px;display:flex;align-items:center;justify-content:center;gap:8px;font:700 15.5px var(--body);white-space:nowrap;padding:0 18px;min-width:0}
.k-btn.s{flex:1;background:var(--surface);border:1px solid var(--hairline-strong);color:var(--ink)}
.k-btn.p{flex:1.35;background:var(--red);color:var(--on-red);box-shadow:0 6px 16px rgba(234,56,58,.28)}
.k-btns>.k-btn:only-child{flex:1}
.k-btn svg{flex:none;display:block}
.k-btn span{overflow:hidden;text-overflow:ellipsis}
.k-kick{font:700 11.5px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--red-ink);display:flex;align-items:center;gap:8px}
.k-kick::before{content:"";width:14px;height:3px;border-radius:3px;background:var(--red);flex:none}

/* ── empty state ── */
.k-empty{text-align:center;padding:70px 20px;color:var(--mute)}
.k-empty .k-eic{width:72px;height:72px;border-radius:24px;margin:0 auto 14px;background:var(--red-wash);color:var(--red);display:grid;place-items:center}
.k-empty b{display:block;font:600 17px var(--disp);color:var(--ink);margin-bottom:4px}

/* ── pushed layers: slide in from the right, the camera below shifts left and dims ── */
.k-push{position:absolute;inset:0;background:var(--canvas);z-index:20;display:flex;flex-direction:column;transform:translateX(100%);
  box-shadow:-10px 0 40px rgba(0,0,0,.2);will-change:transform;contain:layout paint;
  /* parked off-screen: hidden once the exit slide ends, so its left shadow never bleeds in at the right edge */
  visibility:hidden;transition:transform var(--k-push-out) var(--ease-sheet),visibility 0s linear var(--k-push-out)}
.k-push.show{transform:translateX(0);visibility:visible;transition:transform var(--k-push-in) var(--ease-sheet),visibility 0s}
.k-push:not(.show){pointer-events:none}
.k-push[hidden]{display:none}
.stage{transition:transform var(--k-push-in) var(--ease-sheet)}
.stage::after{content:"";position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:25;transition:opacity 320ms ease}
body.pushed .stage{transform:translateX(-26%)}
body.pushed .stage::after,body.covered .stage::after{opacity:.4}
/* covered camera: every stage animation (scan sweep, live ping) holds still */
body.covered .stage *,body.covered .stage *::before,body.covered .stage *::after{animation-play-state:paused!important}

/* ── reduced motion: slides and scales become plain fades ── */
@media (prefers-reduced-motion:reduce){
  .tap:active{transform:none}
  .k-stag>*,.k-reveal>*{animation:k-fade 160ms ease both;animation-delay:0s}
  .k-prow.bld::after{animation:none;width:100%;opacity:.35}
  .k-thumb.bld svg,.k-glyph.spin svg{animation-duration:2.4s}
  .k-acc,.k-acc .k-inner,.k-chev{transition:none}
  .k-acc .k-inner{transform:none}
  .k-push{transform:none;opacity:0;transition:opacity 200ms ease,visibility 0s linear 200ms}
  .k-push.show{opacity:1;transition:opacity 200ms ease,visibility 0s}
  .stage,body.pushed .stage{transform:none;transition:none}
}