/* Nom Nom demonstration panel: a working copy of the app's three tabs.
   Every measure is the app's own, in React Native dp, which map 1:1 to CSS px.
   The app's light theme only, and nothing here reads the site's tokens: the
   panel is the product, drawn in the product's values. */

.nn-stage{container-type:inline-size;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-6);padding:var(--space-6) var(--space-5)}
/* One screen until two fit side by side; with script off, both show and wrap. */
.nn-stage[data-live] .nn + .nn{display:none}
@container (min-width:812px){.nn-stage[data-live] .nn + .nn{display:flex}}
@media (max-width:520px){.nn-stage{padding:var(--space-4) 0}}

.nn{
  --nn-bg:#FAFAF9;--nn-surface:#FFFFFF;--nn-fill:#F5F5F4;--nn-border:#E7E5E4;
  --nn-text:#0C0A09;--nn-muted:#57534D;--nn-accent:#1C1917;--nn-accent-text:#FAFAF9;
  --nn-allergen:#1B3A8C;--nn-allergen-surface:#E8EDF9;
  --nn-all:#4C7A46;--nn-most:#8A8A2E;--nn-some:#B5702E;--nn-few:#A33A2E;
  --nn-shadow:0 4px 12px rgba(0,0,0,0.08);
  display:flex;flex-direction:column;width:390px;max-width:100%;height:760px;flex:none;
  background:var(--nn-bg);color:var(--nn-text);
  outline:1px solid var(--nn-border);border-radius:12px;overflow:hidden;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:22px;font-weight:400;letter-spacing:0;text-align:left;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent
}
.nn *,.nn *::before,.nn *::after{box-sizing:border-box}
.nn p{margin:0}
.nn button{margin:0;cursor:pointer}
.nn :focus-visible{outline:2px solid var(--nn-text);outline-offset:-2px}
.nn .nn-tg:focus-visible{outline-offset:2px}
.nn svg{display:block;max-width:none;flex:none}

/* icons: lucide, 24 grid, 1.5 stroke, round caps and joins */
.nn-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nn-i--16{width:16px;height:16px}

/* ---- chrome ---- */
.nn-hd{display:flex;align-items:center;gap:8px;height:60px;padding:8px 4px 8px 16px;flex:none}
.nn-logo{display:flex;align-items:center;min-height:44px;padding-right:4px;color:var(--nn-text)}
.nn-logo__mark{width:29.95px;height:14px;fill:currentColor}
.nn-sp{flex:1;margin-left:12px}
.nn-acts{display:flex;align-items:center}
.nn-ib{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;padding:0;border:0;background:none;color:var(--nn-muted)}
.nn-ib--ink{color:var(--nn-text)}
.nn-pb{display:flex;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px;padding:0 8px;color:var(--nn-muted)}
.nn-pb--on{color:var(--nn-text)}
.nn-count{font-size:12px;line-height:16px;font-weight:500}
.nn-units{display:flex;align-items:center;justify-content:center;width:66px}
.nn-units > span{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;font-size:14px;line-height:20px;font-weight:500}
.nn-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.nn-body::-webkit-scrollbar{display:none}
.nn-hair{height:1px;background:var(--nn-border);flex:none}
.nn-tabs{display:flex;flex:none;border-top:1px solid var(--nn-border);background:var(--nn-bg)}
.nn-tab{flex:1;min-height:52px;padding:8px 0;border:0;background:none;font-size:14px;line-height:20px;font-weight:400;color:var(--nn-muted)}
.nn-tab[aria-current="page"]{font-weight:500;color:var(--nn-text)}
.nn-tab:active{opacity:0.6}

/* ---- cookbook ---- */
.nn-cbh{padding:0 16px 12px;flex:none}
.nn-cbh__row{display:flex;align-items:center;gap:8px;height:26px}
.nn-search{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;color:var(--nn-text)}
.nn-div{width:1px;height:26px;flex:none;background:var(--nn-border)}
.nn-chips{display:flex;flex-wrap:nowrap;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none}
.nn-chip{flex:none;padding:4px 12px;border:1px solid var(--nn-border);border-radius:6px;background:transparent;font-size:12px;line-height:16px;color:var(--nn-muted);white-space:nowrap}
.nn-chip--on{border-color:var(--nn-accent);background:var(--nn-accent);color:var(--nn-accent-text)}
.nn-legend{display:flex;align-items:center;height:64px;padding:12px 16px;flex:none}
.nn-legend__rows{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.nn-legend__row{display:flex;align-items:center;gap:12px;font-size:12px;line-height:16px;color:var(--nn-muted);white-space:nowrap}
.nn-legend__pair{display:inline-flex;align-items:center;gap:4px}
.nn-legend__x{display:flex;align-items:center;justify-content:flex-end;min-width:22px;min-height:22px;color:var(--nn-muted)}
.nn-crows{padding-bottom:32px}
.nn-crow{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 16px}
.nn-mg{display:flex;align-items:center;gap:4px;flex:none}
.nn-mark{display:block;width:10px;height:10px;flex:none;color:var(--nn-allergen)}
.nn-mark svg{width:10px;height:10px;fill:currentColor}
.nn-gauge{display:block;width:10px;height:10px;flex:none;border:1px solid transparent;border-radius:0}
.nn-gauge--all{border-color:var(--nn-all);background:var(--nn-all)}
.nn-gauge--most{border-color:var(--nn-most)}
.nn-gauge--some{border-color:var(--nn-some)}
.nn-gauge--few{border-color:var(--nn-few)}
.nn-ctitle{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nn-tg{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;padding:0;border:1px solid var(--nn-border);border-radius:6px;background:transparent;color:var(--nn-muted)}
.nn-tg::after{content:"";position:absolute;inset:-10px}
.nn-tg[aria-pressed="true"]{border-color:var(--nn-accent);background:var(--nn-accent);color:var(--nn-bg)}

/* ---- plan ---- */
.nn-plan{padding-bottom:32px}
.nn-prow{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 4px 0 16px}
.nn-pcontent{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:8px 0}
.nn-ptitle,.nn-pmeta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nn-pmeta{font-size:12px;line-height:16px;color:var(--nn-muted)}
.nn-pills{display:flex;flex-wrap:wrap;gap:8px}
.nn-pill{padding:4px 8px;border:1px solid var(--nn-border);border-radius:6px;font-size:12px;line-height:16px;color:var(--nn-muted);white-space:nowrap}
.nn-pill--allergen{border-color:var(--nn-allergen);background:var(--nn-allergen-surface);color:var(--nn-allergen)}

/* ---- list ---- */
.nn-sub{flex:none;padding:0 16px 8px;font-size:14px;line-height:20px;color:var(--nn-muted)}
.nn-seg-wrap{flex:none;padding:0 16px 12px}
.nn-seg{display:flex;gap:4px;min-height:44px;padding:4px;border-radius:8px;background:var(--nn-fill)}
.nn-seg__it{flex:1;display:flex;align-items:center;justify-content:center;height:36px;padding:0 8px;border:1px solid transparent;border-radius:6px;font-size:14px;line-height:20px;color:var(--nn-muted)}
.nn-seg__it--on{background:var(--nn-surface);border-color:rgba(12,10,9,0.05);box-shadow:var(--nn-shadow);font-weight:500;color:var(--nn-text)}
.nn-groups{padding-bottom:32px}
.nn-gh{display:flex;align-items:center;gap:8px;min-height:48px;padding:24px 16px 8px}
.nn-sw{width:8px;height:8px;flex:none}
.nn-label{flex:1;font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.8px;text-transform:uppercase;color:var(--nn-muted)}
.nn-line{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:12px 16px;background:var(--nn-bg)}
.nn-line:active{background:var(--nn-surface)}
.nn-box{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border:1px solid var(--nn-border);border-radius:6px;color:var(--nn-muted)}
.nn-ltext{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.nn-m{color:var(--nn-muted)}
.nn-store{display:block;flex:none;padding:4px 8px;border:1px solid var(--nn-border);border-radius:6px;font-size:12px;line-height:16px;white-space:nowrap}
.nn-store--none{border-style:dashed;background:transparent;color:var(--nn-muted)}
.nn-foot{padding:16px;font-size:12px;line-height:16px;color:var(--nn-muted)}
.nn-cap{display:flex;align-items:center;gap:8px;flex:none;padding:12px;border-top:1px solid var(--nn-border);background:var(--nn-bg)}
.nn-field{flex:1;min-width:0;display:flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid transparent;border-radius:6px;background:var(--nn-fill);font-size:16px;line-height:22px;font-style:italic;color:var(--nn-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- empty states ---- */
.nn-empty{display:flex;align-items:center;justify-content:center;min-height:calc(100% - 32px);margin:16px;padding:64px 16px;border:1px dashed var(--nn-border);border-radius:8px}
.nn-empty__in{display:flex;flex-direction:column;align-items:center;gap:16px;align-self:stretch;padding:32px 24px}
.nn-empty__msg{font-size:14px;line-height:20px;color:var(--nn-muted);text-align:center}
.nn-btn{min-height:44px;padding:0 16px;border:0;border-radius:6px;background:var(--nn-accent);color:var(--nn-accent-text);font-size:16px;line-height:22px;font-weight:500}

/* A changed row flashes once. Nothing moves when motion is reduced. */
@keyframes nn-flash{from{background:var(--nn-border)}to{background:var(--nn-bg)}}
.nn-flash{animation:nn-flash 160ms ease-out}
@media (prefers-reduced-motion:reduce){.nn-flash{animation:none}}

/* On a phone the panel is part of the page, not a phone inside it. Nothing in
   it scrolls vertically: each tab runs to its natural height and every
   vertical gesture belongs to the page. Only the chip row still scrolls, and
   only sideways. Its touch-action must name pan-y as well as pan-x: pan-x
   alone forbids a vertical pan that starts on a chip, page included.
   The tab bar sticks to the bottom of the screen while the panel is on it, as
   the app's does; demo.js opens a tapped tab at its top. The panel clips
   instead of hiding its overflow, because a hidden overflow is a scroll
   container and the bar would stick to the panel instead of the page. */
@media (max-width:520px){
  .nn{height:auto;overflow:clip}
  .nn-tabs{position:sticky;bottom:0}
  .nn-body{flex:none;overflow:visible;overscroll-behavior:auto}
  .nn-chips{overflow-y:hidden;overscroll-behavior:auto;touch-action:pan-x pan-y pinch-zoom}
}