/* food-lookup.css — AB#592. Shared by every page that mounts the widget. */
.fl-wrap{margin:18px 0 6px}
.fl-form{display:flex;gap:8px;align-items:stretch}
.fl-in{flex:1;min-width:0;font:inherit;font-size:16px;padding:12px 14px;
  border:1px solid #e0e8e2;border-radius:12px;background:#fff;color:#1a2e1f}
.fl-in:focus{outline:none;border-color:#27ae60}
.fl-mic{flex:none;width:46px;padding:0;background:#fff;border:1px solid #e0e8e2;
  border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fl-mic svg{width:19px;height:19px;fill:#5a6e5f}
.fl-mic.on{background:#1e874b;border-color:#1e874b}
.fl-mic.on svg{fill:#fff}
.fl-mic[hidden]{display:none}
.fl-go{flex:none;font:inherit;font-size:15px;font-weight:700;padding:0 18px;
  border:none;border-radius:12px;background:#1e874b;color:#fff;cursor:pointer}
.fl-hint{min-height:18px;margin-top:8px;font-size:13px;color:#5a6e5f}
.fl-out{margin-top:14px;border:1px solid #e0e8e2;border-radius:14px;padding:16px;background:#fff}
.fl-out[hidden]{display:none}
.fl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fl-head h3{margin:0;font-size:19px;font-weight:800;color:#1a2e1f}
.fl-grade{font-size:12.5px;font-weight:800;color:#1e874b;background:#e8f8ef;
  padding:6px 11px;border-radius:999px}
.fl-grade.fl-none{color:#8a9590;background:#f1f4f2}
.fl-macros{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:9px;margin-top:14px}
.fl-m{background:#f7faf8;border-radius:11px;padding:11px 8px;text-align:center}
.fl-m b{display:block;font-size:17px;color:#1a2e1f}
.fl-m span{font-size:11.5px;color:#5a6e5f}
.fl-inds{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin-top:12px}
.fl-i{border:1px solid #e0e8e2;border-radius:11px;padding:10px 12px}
.fl-k{display:block;font-size:12.5px;color:#5a6e5f}
.fl-b{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  background:#e8f8ef;color:#1e874b;padding:3px 7px;border-radius:6px;margin:5px 6px 0 0}
.fl-n{font-size:14px;font-weight:700;color:#1a2e1f}
.fl-msg{margin:12px 0 0;font-size:14px;line-height:1.6;color:#5a6e5f}
/* Same invitation as the barcode page, same destination, same offer. */
.fl-invite{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding:12px 15px;border-radius:12px;text-decoration:none;
  border:1px solid #2a7a52;background:linear-gradient(180deg,#1b6b45,#12492f);
  font-size:13px;color:#cdeadb}
.fl-invite b{color:#fff;font-weight:800}
.fl-invite em{flex:none;font-style:normal;font-weight:800;font-size:12.5px;
  color:#0d3b26;background:#d6f5e4;padding:7px 11px;border-radius:9px}

/* ── The invitation: ribbon (first screen) and banner (end of article) ──────
   Same ink-and-leaf family as the card inside a result and as the invite page
   itself, so someone who has seen one recognises the others. */
.fl-ribbon{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:14px 0;padding:10px 15px;border-radius:12px;text-decoration:none;
  position:relative;overflow:hidden;border:1px solid #2a7a52;
  background:linear-gradient(180deg,#1b6b45,#12492f)}
.fl-rb-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.fl-rb-eyebrow{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:#a8e6c3}
.fl-rb-main{font-size:12.8px;color:#cdeadb;line-height:1.35}
.fl-ribbon b{color:#fff;font-weight:800}
.fl-ribbon em{flex:none;font-style:normal;font-size:12.5px;font-weight:800;
  color:#0d3b26;background:#d6f5e4;padding:7px 11px;border-radius:9px}
.fl-spark{width:10px;height:10px;flex:none;fill:#d6f5e4;
  filter:drop-shadow(0 0 3px rgba(214,245,228,.75))}
.fl-ribbon::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.16) 48%,transparent 61%);
  transform:translateX(-120%);animation:flSheen 5.5s ease-in-out 1.2s infinite}
@keyframes flSheen{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.fl-ribbon::after{animation:none;display:none}}

.fl-banner{display:block;margin:22px 0;padding:20px 20px 18px;border-radius:16px;
  text-decoration:none;color:#EAF4EE;border:1px solid #2a7a52;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(126,222,166,.22), transparent 70%),
    linear-gradient(180deg,#1b6b45,#10402a)}
.fl-bn-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:#a8e6c3;
  border:1px solid rgba(168,230,195,.3);border-radius:999px;padding:5px 12px;
  background:rgba(168,230,195,.07);margin-bottom:12px}
.fl-bn-h{display:block;font-size:17.5px;font-weight:800;line-height:1.3;color:#fff;margin-bottom:6px}
.fl-bn-sub{display:block;font-size:13.5px;line-height:1.55;color:#cdeadb}
.fl-bn-offer{display:block;margin-top:13px;padding-left:12px;border-left:3px solid #7dcea0;
  font-size:13.5px;line-height:1.5;color:#cdeadb}
.fl-bn-offer b{color:#fff;font-weight:800}
.fl-bn-go{display:inline-block;margin-top:14px;background:#d6f5e4;color:#0d3b26;
  font-size:14.5px;font-weight:800;padding:11px 20px;border-radius:11px}

/* ── Shared page chrome (AB#592) ────────────────────────────────────────────
   The four tool pages had three different headers: one said "Back to
   NutriOptio", two showed the wordmark, one showed the circular mark, and only
   the barcode page carried the trust chips. Same product, three first
   impressions. These rules match what barcode-food-scanner.html already has
   inline, so the four read as one site. */
.np-topbar{padding:18px 0 4px;font-size:14px}
.np-topbar .brand{font-weight:800;font-size:17px;letter-spacing:-.01em;
  color:#1e874b;text-decoration:none}
/* AB#697 — the mark is a trademark notice, so it travels with the wordmark
   on every page that shows it, not just the homepage. */
.np-topbar .tb-tm{font-size:.55em;font-weight:600;vertical-align:super;margin-left:1px;opacity:.75}
/* .page-header img is (0,0,1,1) and out-specifies a bare .np-mark (0,0,1,0),
   so the mark rendered at that rule's 64px instead of 72 and the four pages
   still did not match. Specificity, not a new rule. */
.page-header img.np-mark,
.np-mark{display:block;width:72px;height:72px;margin:18px auto 14px;border-radius:50%;
  filter:drop-shadow(0 8px 22px rgba(39,174,96,.26))}
/* Sized to the barcode page's chips so all three fit one line at 375px. */
.np-trust{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:14px}
.np-trust span{font-size:11.5px;font-weight:700;color:#1e874b;background:#e8f8ef;
  padding:6px 11px;border-radius:999px;white-space:nowrap}

/* ── Compact hero ────────────────────────────────────────────────────────
   MEASURED on the 390px screen APM sent: topbar + 72px mark + title + a
   three-line subtitle pushed the invite to roughly half the viewport, so the
   first screen was mostly masthead. These rules load AFTER each page's inline
   <style>, so one file reshapes the header on every tool page rather than
   thirteen inline blocks drifting apart again.

   Foldables are the real constraint, not phones: a folded Galaxy Fold outer
   screen is ~280px and a Surface Duo pane is 540px. Everything below is fluid
   between those two rather than snapping at one phone width. */
.page-header{padding:14px 0 12px}
.page-header img.np-mark,
.np-mark{width:52px;height:52px;margin:0 auto 8px}
.page-header h1{font-size:clamp(20px,5.6vw,27px);line-height:1.18;margin-bottom:6px}
.page-header .subtitle{font-size:clamp(13.5px,3.5vw,16px);line-height:1.45;max-width:40ch}

/* From ~460px up there is width going spare, so spend the mark sideways and
   buy back its whole height. This is the Duo / unfolded case. */
@media (min-width:460px){
  /* Grid, not flex: the markup is img + h1 + p as three siblings with no
     wrapper, and flex would stand all three in a row. Named areas put the mark
     beside a stacked title and subtitle without adding a div to thirteen pages. */
  .page-header{display:grid;grid-template-columns:auto 1fr;
    grid-template-areas:"mark title" "mark sub";
    align-items:center;column-gap:16px;text-align:left;padding:16px 0 14px}
  .page-header img.np-mark,
  .np-mark{grid-area:mark;margin:0;width:58px;height:58px}
  .page-header h1{grid-area:title;align-self:end;margin-bottom:4px}
  .page-header .subtitle{grid-area:sub;align-self:start;margin:0;max-width:52ch}
}

/* Folded outer screens. Nothing may overflow 280px. */
@media (max-width:330px){
  .np-topbar{padding:12px 0 2px}
  .page-header{padding:10px 0 10px}
  .page-header img.np-mark,
  .np-mark{width:44px;height:44px;margin:0 auto 6px}
  .np-trust{gap:5px}
  .np-trust span{font-size:11px;padding:5px 9px}
}

/* The tool card's one-line lede. The long version repeated the subtitle almost
   word for word, which is duplicate text Google discounts anyway. */
.fl-lede{font-size:14px;line-height:1.45;color:#5a6e5f;margin:0 0 12px}
.section h2 + .fl-lede{margin-top:-2px}

/* Below ~340px the input, the mic and Check cannot share a row and still leave
   a usable field - at 280px it collapsed to "gre". Give the field the full
   width and let the two controls sit under it. */
@media (max-width:340px){
  .fl-form{flex-wrap:wrap}
  .fl-in{flex:1 0 100%;font-size:16px}   /* 16px: anything smaller zooms iOS on focus */
  .fl-mic{flex:none}
  .fl-go{flex:1}
}