/* ============================================================================
   Braces Food Guide — stylesheet
   Every visual decision routes through a CSS custom property. The script
   fills these from the live theme (fonts, link color, button radius,
   page background) so the widget matches whatever theme is active.
   Safety colors are the deliberate exception: green / amber / red carry
   clinical meaning and are never themed away.
   ========================================================================== */
.bfc, .bfc-fab, .bfc-sheet, .bfc-stickybar {/* -- filled at runtime from the theme; these are the fallbacks -- */
  --bfc-font: inherit !important; --bfc-head-font: inherit !important; --bfc-brand: #0e7490 !important; --bfc-brand-ink: #0e7490 !important; --bfc-brand-contrast: #ffffff !important; --bfc-brand-soft: rgba(14,116,144,.08) !important; --bfc-brand-line: rgba(14,116,144,.22) !important; --bfc-ink: #17212f !important; --bfc-body: #3b4757 !important; --bfc-muted: #6b7684 !important; --bfc-line: #e3e8ee !important; --bfc-surface: #ffffff !important; --bfc-canvas: #f6f8fa !important; --bfc-r: 12px !important; --bfc-r-sm: 9px !important; --bfc-shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 26px -14px rgba(16,24,40,.22) !important; --bfc-shadow-lg: 0 22px 60px -14px rgba(16,24,40,.42) !important; /* -- pinned: safety semantics, not branding -- */
  --bfc-safe: #0f8a5f !important; --bfc-safe-bg: #eefaf4 !important; --bfc-safe-line: #a8e3c8 !important; --bfc-safe-ink: #0a5c40 !important; --bfc-caution: #c47a08 !important; --bfc-caution-bg: #fff8ea !important; --bfc-caution-line: #f6dda2 !important; --bfc-caution-ink: #8a5504 !important; --bfc-avoid: #d43d3d !important; --bfc-avoid-bg: #fef3f2 !important; --bfc-avoid-line: #f7c7c3 !important; --bfc-avoid-ink: #97231f !important; }
.bfc.bfc--dark, .bfc-fab.bfc--dark, .bfc-sheet.bfc--dark, .bfc-stickybar.bfc--dark {--bfc-ink: #f4f7fa !important; --bfc-body: #cbd5e1 !important; --bfc-muted: #94a3b8 !important; --bfc-line: rgba(255,255,255,.14) !important; --bfc-surface: #1b2431 !important; --bfc-canvas: #131a24 !important; --bfc-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7) !important; --bfc-safe-bg: rgba(15,138,95,.16) !important; --bfc-safe-line: rgba(15,138,95,.42) !important; --bfc-safe-ink: #7fe3b8 !important; --bfc-caution-bg: rgba(196,122,8,.16) !important; --bfc-caution-line: rgba(196,122,8,.44) !important; --bfc-caution-ink: #f5c56a !important; --bfc-avoid-bg: rgba(212,61,61,.16) !important; --bfc-avoid-line: rgba(212,61,61,.44) !important; --bfc-avoid-ink: #f5a3a0 !important; }

/* ---------- scoped reset (neutralises theme button/input styling) ---------- */
.bfc, .bfc-fab, .bfc-sheet, .bfc-stickybar {font-family: var(--bfc-font) !important; color: var(--bfc-body) !important; box-sizing: border-box !important; }
.bfc *, .bfc *::before, .bfc *::after,
.bfc-fab *, .bfc-sheet *, .bfc-sheet *::before, .bfc-sheet *::after,
.bfc-stickybar *, .bfc-stickybar *::before, .bfc-stickybar *::after {box-sizing: border-box !important; }
.bfc :where(p,h1,h2,h3,h4,ul,ol,li,figure,dl,dd),
.bfc-sheet :where(p,h1,h2,h3,h4,ul,ol,li,figure),
.bfc-stickybar :where(p,h1,h2,h3,h4,ul,ol,li,figure) {margin:0 !important; padding:0 !important; }
.bfc :where(ul,ol), .bfc-sheet :where(ul,ol), .bfc-stickybar :where(ul,ol) {list-style:none !important; }
.bfc :where(button), .bfc-fab:where(button), .bfc-sheet :where(button), .bfc-stickybar :where(button) {appearance:none !important; -webkit-appearance:none !important; background:none !important; border:0 !important; margin:0 !important; padding:0 !important; font:inherit !important; color:inherit !important; line-height:inherit !important; letter-spacing:inherit !important; text-transform:none !important; border-radius:0 !important; box-shadow:none !important; cursor:pointer !important; text-align:inherit !important; min-height:0 !important; width:auto !important; }
.bfc :where(input), .bfc-sheet :where(input), .bfc-stickybar :where(input) {appearance:none !important; -webkit-appearance:none !important; font:inherit !important; color:inherit !important; margin:0 !important; border-radius:0 !important; box-shadow:none !important; min-height:0 !important; line-height:normal !important; }
.bfc :where(h1,h2,h3,h4,h5) {font-family: var(--bfc-head-font) !important; color: var(--bfc-ink) !important; }
.bfc [hidden], .bfc-sheet [hidden], .bfc-fab[hidden], .bfc-fab [hidden],
.bfc-stickybar[hidden], .bfc-stickybar [hidden] {display:none !important; }
.bfc :focus-visible, .bfc-sheet :focus-visible, .bfc-fab:focus-visible, .bfc-stickybar :focus-visible {outline:3px solid var(--bfc-brand) !important; outline-offset:2px !important; border-radius:6px !important; }
.bfc-sr {position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

/* ============================ GUIDE (shortcode) =========================== */
.bfc {display:block !important; font-size:16px !important; line-height:1.5 !important; }
.bfc__intro {margin-bottom:16px !important; }
.bfc__title {font-size:27px !important; font-weight:800 !important; line-height:1.18 !important; letter-spacing:-.02em !important; color:var(--bfc-ink) !important; margin-bottom:7px !important; }
@media(min-width:768px){ .bfc__title {font-size:33px !important; }}
.bfc__lede {font-size:15px !important; color:var(--bfc-muted) !important; max-width:62ch !important; }

/* ---------- branding (chrome-less templates) ---------- */
.bfc__brandbar {display:flex !important; align-items:center !important; gap:14px !important; flex-wrap:wrap !important; padding:2px 0 16px !important; margin-bottom:16px !important; border-bottom:1px solid var(--bfc-line) !important; }
.bfc__brandlogo {display:inline-flex !important; align-items:center !important; gap:10px !important; text-decoration:none !important; }
.bfc__brandlogo img {display:block !important; width:auto !important; max-width:min(260px,54vw) !important; height:var(--bfc-logo-h, 46px) !important; }
@media(max-width:520px){ .bfc__brandlogo img {height:calc(var(--bfc-logo-h, 46px) * .82) !important; }}
.bfc__brandname {font-family:var(--bfc-head-font) !important; font-size:17px !important; font-weight:800 !important; color:var(--bfc-ink) !important; line-height:1.2 !important; }
.bfc__brandactions {margin-left:auto !important; display:flex !important; align-items:center !important; gap:8px !important; }
.bfc__brandlink {display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; padding:10px 15px !important; border-radius:var(--bfc-r-sm) !important; font-size:14px !important; font-weight:750 !important; text-decoration:none !important; border:1px solid var(--bfc-line) !important; background:var(--bfc-surface) !important; color:var(--bfc-body) !important; transition:.15s !important; white-space:nowrap !important; }
.bfc__brandlink:hover {border-color:var(--bfc-brand) !important; color:var(--bfc-brand-ink) !important; }
.bfc__brandlink--call {background:var(--bfc-brand) !important; border-color:var(--bfc-brand) !important; color:var(--bfc-brand-contrast) !important; }
.bfc__brandlink--call:hover {filter:brightness(.93) !important; color:var(--bfc-brand-contrast) !important; }
.bfc__phonefull {display:inline !important; }
.bfc__phoneshort {display:none !important; }
@media(max-width:639px){
  .bfc__brandbar {gap:10px !important; padding-bottom:13px !important; margin-bottom:13px !important; }
  .bfc__brandactions {margin-left:auto !important; gap:6px !important; }
  .bfc__brandlink {padding:9px 12px !important; font-size:13.5px !important; }
  .bfc__phonefull {display:none !important; }
  .bfc__phoneshort {display:inline !important; }}
@media(max-width:400px){
  .bfc__brandactions {margin-left:0 !important; width:100% !important; }
  .bfc__brandlink {flex:1 !important; }}
.bfc__brandfoot {margin-top:26px !important; padding-top:18px !important; border-top:1px solid var(--bfc-line) !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; flex-wrap:wrap !important; }

/* ---------- controls ---------- */
.bfc__controls {background:var(--bfc-surface) !important; border:1px solid var(--bfc-line) !important; border-radius:var(--bfc-r) !important; box-shadow:var(--bfc-shadow) !important; padding:12px !important; }
@media(min-width:768px){ .bfc__controls{padding:16px !important; }}
.bfc__searchrow {position:relative !important; display:flex !important; align-items:center !important; }
.bfc__searchicon {position:absolute !important; left:13px !important; width:19px !important; height:19px !important; color:var(--bfc-muted) !important; pointer-events:none !important; }
.bfc__input {width:100% !important; padding:13px 44px 13px 41px !important; border:2px solid var(--bfc-line) !important; border-radius:var(--bfc-r-sm) !important; background:var(--bfc-surface) !important; font-size:16px !important; color:var(--bfc-ink) !important; transition:border-color .15s, box-shadow .15s !important; }
.bfc__input::placeholder {color:var(--bfc-muted) !important; opacity:.85 !important; }
.bfc__input:focus {outline:none !important; border-color:var(--bfc-brand) !important; box-shadow:0 0 0 4px var(--bfc-brand-soft) !important; }
.bfc__input::-webkit-search-cancel-button, .bfc__input::-webkit-search-decoration {display:none !important; }
.bfc__clear {position:absolute !important; right:7px !important; width:31px !important; height:31px !important; display:none !important; align-items:center !important; justify-content:center !important; border-radius:999px !important; color:var(--bfc-muted) !important; }
.bfc__clear.is-on {display:inline-flex !important; }
.bfc__clear:hover {background:var(--bfc-canvas) !important; color:var(--bfc-ink) !important; }

.bfc__tabs {display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:4px !important; margin-top:10px !important; background:var(--bfc-canvas) !important; padding:4px !important; border-radius:var(--bfc-r-sm) !important; }
.bfc__tab {display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:2px !important; padding:8px 2px !important; border-radius:calc(var(--bfc-r-sm) - 3px) !important; font-size:11.5px !important; font-weight:700 !important; color:var(--bfc-muted) !important; line-height:1.2 !important; white-space:nowrap !important; min-height:46px !important; transition:background .15s, color .15s, box-shadow .15s !important; }
.bfc__tablabel {display:inline-flex !important; align-items:center !important; gap:5px !important; }
.bfc__tabdot {width:8px !important; height:8px !important; border-radius:999px !important; flex:0 0 auto !important; background:var(--bfc-muted) !important; }
.bfc__tab[data-status="Safe"] .bfc__tabdot {background:var(--bfc-safe) !important; }
.bfc__tab[data-status="Caution"] .bfc__tabdot {background:var(--bfc-caution) !important; }
.bfc__tab[data-status="Avoid"] .bfc__tabdot {background:var(--bfc-avoid) !important; }
.bfc__tabcount {font-size:11px !important; font-weight:600 !important; opacity:.72 !important; }
.bfc__tab[aria-selected="true"] {background:var(--bfc-surface) !important; color:var(--bfc-ink) !important; box-shadow:0 1px 3px rgba(16,24,40,.16) !important; }
@media(min-width:560px){ .bfc__tab{flex-direction:row !important; gap:7px !important; font-size:14px !important; min-height:44px !important; }}

.bfc__cats {display:flex !important; gap:7px !important; margin-top:10px !important; overflow-x:auto !important; padding-bottom:3px !important; -webkit-mask-image:linear-gradient(to right,#000 88%,transparent) !important; mask-image:linear-gradient(to right,#000 88%,transparent) !important; -webkit-overflow-scrolling:touch !important; }
.bfc__cats::-webkit-scrollbar {height:5px !important; }
.bfc__cats::-webkit-scrollbar-thumb {background:var(--bfc-line) !important; border-radius:999px !important; }
@media(min-width:768px){ .bfc__cats{flex-wrap:wrap !important; overflow:visible !important; -webkit-mask-image:none !important; mask-image:none !important; }}
.bfc__chip {flex:0 0 auto !important; padding:7px 13px !important; border:1px solid var(--bfc-line) !important; border-radius:999px !important; background:var(--bfc-surface) !important; font-size:13.5px !important; font-weight:600 !important; color:var(--bfc-body) !important; white-space:nowrap !important; transition:.15s !important; }
.bfc__chip:hover {border-color:var(--bfc-brand) !important; color:var(--bfc-brand-ink) !important; }
.bfc__chip[aria-pressed="true"] {background:var(--bfc-brand) !important; border-color:var(--bfc-brand) !important; color:var(--bfc-brand-contrast) !important; }

/* ---------- first week mode ---------- */
.bfc__firstweek {margin-top:14px !important; }
.bfc__soft {width:100% !important; display:flex !important; align-items:center !important; gap:14px !important; padding:15px 16px !important; border:2px solid var(--bfc-brand-line) !important; border-radius:var(--bfc-r) !important; background:var(--bfc-brand-soft) !important; text-align:left !important; transition:border-color .18s, box-shadow .18s !important; }
.bfc__soft:hover {border-color:var(--bfc-brand) !important; }
.bfc__soft[aria-pressed="true"] {border-color:var(--bfc-brand) !important; box-shadow:0 0 0 4px var(--bfc-brand-soft) !important; }
.bfc__softicon {flex:0 0 auto !important; width:44px !important; height:44px !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; background:var(--bfc-brand) !important; color:var(--bfc-brand-contrast) !important; }
.bfc__softtext {flex:1 !important; text-align:left !important; min-width:0 !important; }
.bfc__softtitle {display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important; font-size:15.5px !important; font-weight:800 !important; color:var(--bfc-ink) !important; line-height:1.28 !important; }
.bfc__softbadge {font-size:10.5px !important; font-weight:800 !important; letter-spacing:.07em !important; text-transform:uppercase !important; padding:2px 7px !important; border-radius:999px !important; background:var(--bfc-brand) !important; color:var(--bfc-brand-contrast) !important; }
.bfc__softsub {display:block !important; font-size:13px !important; color:var(--bfc-body) !important; margin-top:3px !important; line-height:1.45 !important; }
.bfc__softsub strong {color:var(--bfc-brand-ink) !important; font-weight:800 !important; }
@media(max-width:520px){ .bfc__soft{padding:13px 13px !important; gap:11px !important; }
  .bfc__softicon{width:38px !important; height:38px !important; }
  .bfc__softtitle{font-size:14.5px !important; } .bfc__softsub{font-size:12.5px !important; }}
.bfc__switch {flex:0 0 auto !important; width:44px !important; height:26px !important; border-radius:999px !important; background:var(--bfc-line) !important; position:relative !important; transition:background .18s !important; }
.bfc__switch::after {content:"" !important; position:absolute !important; top:3px !important; left:3px !important; width:20px !important; height:20px !important; border-radius:999px !important; background:var(--bfc-surface) !important; box-shadow:0 1px 3px rgba(16,24,40,.3) !important; transition:transform .18s !important; }
.bfc__soft[aria-pressed="true"] .bfc__switch {background:var(--bfc-brand) !important; }
.bfc__soft[aria-pressed="true"] .bfc__switch::after {transform:translateX(18px) !important; }

/* ---------- results ---------- */
.bfc__meta {display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin:16px 2px 9px !important; }
.bfc__metatext {font-size:13.5px !important; color:var(--bfc-muted) !important; font-weight:600 !important; }
.bfc__grid {display:grid !important; gap:12px !important; grid-template-columns:1fr !important; }
@media(min-width:640px){ .bfc__grid{grid-template-columns:repeat(2,1fr) !important; }}
@media(min-width:1040px){ .bfc__grid{grid-template-columns:repeat(3,1fr) !important; }}

/* The safety colour reads as a bar across the top of the card rather than a
   stripe down its left edge. Drawn as a pseudo-element, not a thick
   border-top: a border would curve where it meets the card body, and this
   needs rounded outer corners with a straight edge underneath. Pulled out by
   1px on three sides so it caps the card's own border instead of sitting
   inside it. */
.bfc__card {position:relative !important; background:var(--bfc-surface) !important; border:1px solid var(--bfc-line) !important; border-radius:var(--bfc-r) !important; padding:28px 13px 13px !important; display:flex !important; flex-direction:column !important; gap:7px !important; box-shadow:var(--bfc-shadow) !important; }
@media(min-width:768px){ .bfc__card{padding:30px 15px 15px !important; gap:9px !important; }}
.bfc__card::before {content:"" !important; position:absolute !important; top:-1px !important; left:-1px !important; right:-1px !important; height:15px !important; border-radius:var(--bfc-r) var(--bfc-r) 0 0 !important; background:var(--bfc-line) !important; pointer-events:none !important; }
.bfc__card[data-status="Safe"]::before {background:var(--bfc-safe) !important; }
.bfc__card[data-status="Caution"]::before {background:var(--bfc-caution) !important; }
.bfc__card[data-status="Avoid"]::before {background:var(--bfc-avoid) !important; }
.bfc__cardtop {display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:10px !important; }
.bfc__name {font-size:16.5px !important; font-weight:750 !important; color:var(--bfc-ink) !important; line-height:1.3 !important; }
.bfc__q {font-size:0 !important; line-height:0 !important; }
.bfc__cat {margin-top:3px !important; font-size:11.5px !important; font-weight:700 !important; letter-spacing:.06em !important; text-transform:uppercase !important; color:var(--bfc-muted) !important; }
.bfc__badge {flex:0 0 auto !important; display:inline-flex !important; align-items:center !important; gap:5px !important; padding:5px 10px !important; border-radius:999px !important; font-size:12px !important; font-weight:800 !important; border:1px solid !important; white-space:nowrap !important; }
.bfc__badge[data-status="Safe"] {background:var(--bfc-safe-bg) !important; border-color:var(--bfc-safe-line) !important; color:var(--bfc-safe-ink) !important; }
.bfc__badge[data-status="Caution"] {background:var(--bfc-caution-bg) !important; border-color:var(--bfc-caution-line) !important; color:var(--bfc-caution-ink) !important; }
.bfc__badge[data-status="Avoid"] {background:var(--bfc-avoid-bg) !important; border-color:var(--bfc-avoid-line) !important; color:var(--bfc-avoid-ink) !important; }
.bfc__dot {width:8px !important; height:8px !important; border-radius:999px !important; flex:0 0 auto !important; }
.bfc__badge[data-status="Safe"] .bfc__dot {background:var(--bfc-safe) !important; }
.bfc__badge[data-status="Caution"] .bfc__dot {background:var(--bfc-caution) !important; }
.bfc__badge[data-status="Avoid"] .bfc__dot {background:var(--bfc-avoid) !important; }
.bfc__reason {font-size:14px !important; color:var(--bfc-body) !important; }
@media(min-width:768px){ .bfc__reason{font-size:14.5px !important; }}
.bfc__swap {display:flex !important; gap:7px !important; align-items:flex-start !important; font-size:13px !important; padding:8px 10px !important; border-radius:var(--bfc-r-sm) !important; background:var(--bfc-canvas) !important; border:1px dashed var(--bfc-line) !important; }
.bfc__swaplabel {font-weight:800 !important; color:var(--bfc-brand-ink) !important; white-space:nowrap !important; }
.bfc__softflag {display:inline-flex !important; align-items:center !important; gap:5px !important; font-size:11.5px !important; font-weight:700 !important; color:var(--bfc-brand-ink) !important; background:var(--bfc-brand-soft) !important; border:1px solid var(--bfc-brand-line) !important; border-radius:999px !important; padding:3px 9px !important; align-self:flex-start !important; }
.bfc__cardfoot {margin-top:auto !important; padding-top:3px !important; display:grid !important; gap:6px !important; }

/* ---------- safer picks (expandable) ---------- */
.bfc__picksbtn {width:100% !important; display:inline-flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; padding:10px 12px !important; border-radius:var(--bfc-r-sm) !important; font-size:13.5px !important; font-weight:700 !important; border:1px solid var(--bfc-brand-line) !important; background:var(--bfc-brand-soft) !important; color:var(--bfc-brand-ink) !important; transition:.15s !important; }
.bfc__picksbtn:hover {border-color:var(--bfc-brand) !important; }
.bfc__picksbtn svg {transition:transform .18s !important; flex:0 0 auto !important; }
.bfc__picksbtn[aria-expanded="true"] svg {transform:rotate(180deg) !important; }
.bfc__picks {display:grid !important; gap:6px !important; padding:9px !important; border:1px solid var(--bfc-line) !important; border-radius:var(--bfc-r-sm) !important; background:var(--bfc-canvas) !important; }
.bfc__pick {display:flex !important; align-items:center !important; gap:9px !important; padding:8px 9px !important; border-radius:var(--bfc-r-sm) !important; background:var(--bfc-surface) !important; border:1px solid var(--bfc-line) !important; }
.bfc__pickbody {flex:1 !important; min-width:0 !important; }
.bfc__pickname {font-size:13.5px !important; font-weight:700 !important; color:var(--bfc-ink) !important; line-height:1.25 !important; }
.bfc__pickwhy {font-size:12px !important; color:var(--bfc-muted) !important; margin-top:1px !important; overflow:hidden !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; }
.bfc__pickadd {flex:0 0 auto !important; display:inline-flex !important; align-items:center !important; gap:5px !important; padding:7px 11px !important; border-radius:999px !important; font-size:12.5px !important; font-weight:750 !important; background:var(--bfc-brand) !important; color:var(--bfc-brand-contrast) !important; transition:.15s !important; }
.bfc__pickadd:hover {filter:brightness(.92) !important; }
.bfc__pickadd.is-added {background:var(--bfc-safe-bg) !important; color:var(--bfc-safe-ink) !important; border:1px solid var(--bfc-safe-line) !important; }

/* ---------- add to plan ---------- */
.bfc__add {width:100% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; padding:10px 14px !important; border-radius:var(--bfc-r-sm) !important; font-size:14px !important; font-weight:700 !important; background:var(--bfc-brand) !important; color:var(--bfc-brand-contrast) !important; transition:.15s !important; }
.bfc__add:hover {filter:brightness(.92) !important; }
.bfc__add.is-added {background:var(--bfc-safe-bg) !important; color:var(--bfc-safe-ink) !important; border:1px solid var(--bfc-safe-line) !important; }
.bfc__addhint {font-size:11.5px !important; font-weight:600 !important; opacity:.72 !important; }
.bfc__avoidnote {font-size:12px !important; font-weight:700 !important; color:var(--bfc-avoid-ink) !important; opacity:.9 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; padding:4px 0 0 !important; }

/* ---------- empty / fallback ---------- */
.bfc__empty {background:var(--bfc-surface) !important; border:1px solid var(--bfc-line) !important; border-radius:var(--bfc-r) !important; padding:24px 18px !important; text-align:center !important; box-shadow:var(--bfc-shadow) !important; }
.bfc__emptytitle {font-size:18px !important; font-weight:800 !important; color:var(--bfc-ink) !important; }
.bfc__emptybody {margin-top:7px !important; font-size:14.5px !important; color:var(--bfc-muted) !important; max-width:46ch !important; margin-left:auto !important; margin-right:auto !important; }
.bfc__rules {margin:18px auto 0 !important; max-width:520px !important; text-align:left !important; display:grid !important; gap:8px !important; }
.bfc__rule {display:block !important; font-size:14px !important; padding:11px 13px !important; border-radius:var(--bfc-r-sm) !important; border:1px solid !important; }
.bfc__rule[data-status="Avoid"] {background:var(--bfc-avoid-bg) !important; border-color:var(--bfc-avoid-line) !important; color:var(--bfc-avoid-ink) !important; }
.bfc__rule[data-status="Caution"] {background:var(--bfc-caution-bg) !important; border-color:var(--bfc-caution-line) !important; color:var(--bfc-caution-ink) !important; }
.bfc__rule[data-status="Safe"] {background:var(--bfc-safe-bg) !important; border-color:var(--bfc-safe-line) !important; color:var(--bfc-safe-ink) !important; }
.bfc__suggest {margin-top:14px !important; display:flex !important; flex-wrap:wrap !important; gap:7px !important; justify-content:center !important; }

/* ---------- emergency strip on the guide page ---------- */
.bfc__sos {margin-top:22px !important; display:flex !important; align-items:center !important; gap:12px !important; padding:14px 16px !important; border:1px solid var(--bfc-avoid-line) !important; background:var(--bfc-avoid-bg) !important; border-radius:var(--bfc-r) !important; }
.bfc__sostext {flex:1 !important; font-size:14px !important; color:var(--bfc-avoid-ink) !important; font-weight:650 !important; line-height:1.4 !important; }
.bfc__sosbtn {flex:0 0 auto !important; padding:10px 15px !important; border-radius:var(--bfc-r-sm) !important; font-size:13.5px !important; font-weight:750 !important; background:var(--bfc-avoid) !important; color:#fff !important; white-space:nowrap !important; }
.bfc__sosbtn:hover {filter:brightness(.93) !important; }
@media(max-width:520px){ .bfc__sos{flex-direction:column !important; align-items:stretch !important; text-align:center !important; }
  .bfc__sosbtn{width:100% !important; }}
.bfc__foot {margin-top:22px !important; font-size:12.5px !important; color:var(--bfc-muted) !important; line-height:1.6 !important; max-width:64ch !important; }

/* ========================= STICKY FILTER BAR ============================== */
/* Fixed rather than position:sticky on purpose — a sticky child only sticks
   inside its own parent's box, and plenty of themes put a transform on a
   wrapper, which silently kills position:fixed on descendants. Living on
   <body> sidesteps both. */
.bfc-stickybar {position:fixed !important; left:0 !important; right:0 !important; top:0 !important; z-index:99980 !important; background:var(--bfc-surface) !important; border-bottom:1px solid var(--bfc-line) !important; box-shadow:0 8px 24px -18px rgba(16,24,40,.65) !important; padding:7px 0 8px !important; font-family:var(--bfc-font) !important; transform:translateY(-104%) !important; transition:transform .22s ease !important; will-change:transform !important; }
.bfc-stickybar.is-on {transform:translateY(0) !important; }
.bfc-stickybar__inner {display:flex !important; align-items:center !important; gap:10px !important; }
.bfc-stickybar .bfc__tabs {margin-top:0 !important; flex:1 !important; min-width:0 !important; padding:3px !important; gap:3px !important; }
/* the pinned bar always runs its tabs on one line — the stacked mobile layout
   used in the main controls makes it far too tall to live at the top */
.bfc-stickybar .bfc__tab {flex-direction:row !important; gap:5px !important; min-height:34px !important; padding:5px 2px !important; font-size:11.5px !important; }
.bfc-stickybar .bfc__tabcount {font-size:10.5px !important; }
@media(min-width:560px){ .bfc-stickybar .bfc__tab {min-height:36px !important; font-size:13px !important; gap:6px !important; }}
@media(max-width:479px){ .bfc-stickybar .bfc__tabcount {display:none !important; }
  .bfc-stickybar .bfc__tab {font-size:11px !important; }}
.bfc-stickybar__call {flex:0 0 auto !important; width:38px !important; height:38px !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; text-decoration:none !important; background:var(--bfc-brand) !important; color:var(--bfc-brand-contrast) !important; }
.bfc-stickybar__call:hover {filter:brightness(.93) !important; color:var(--bfc-brand-contrast) !important; }
.bfc-stickybar__up {flex:0 0 auto !important; width:38px !important; height:38px !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; background:var(--bfc-canvas) !important; color:var(--bfc-body) !important; border:1px solid var(--bfc-line) !important; }
.bfc-stickybar__up:hover {border-color:var(--bfc-brand) !important; color:var(--bfc-brand-ink) !important; }
@media print { .bfc-stickybar {display:none !important; }}

/* ============================ FLOATING BUTTON ============================= */
.bfc-fab {position:fixed !important; z-index:99990 !important; overflow:visible !important; padding:12px 16px 12px 14px !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; gap:9px !important; background:var(--bfc-brand) !important; color:var(--bfc-brand-contrast) !important; font-family:var(--bfc-font) !important; font-size:14.5px !important; font-weight:750 !important; box-shadow:var(--bfc-shadow-lg) !important; transition:filter .18s, box-shadow .18s, opacity .18s !important; }
.bfc-fab:hover {filter:brightness(.93) !important; box-shadow:0 26px 70px -12px rgba(16,24,40,.5) !important; }

/* placement — set with CONFIG.fabPosition */
.bfc-fab--right-middle  {right:14px !important; top:50% !important; transform:translateY(-50%) !important; }
.bfc-fab--left-middle   {left:14px !important; top:50% !important; transform:translateY(-50%) !important; }

/* Edge-anchored placements sit over the page for the whole scroll, so they
   idle as a compact puck and only widen to the full label on hover/focus.
   The script also reserves a matching gutter so widget content never runs
   underneath. */
.bfc-fab--right-middle, .bfc-fab--left-middle {padding:13px 14px !important; gap:8px !important; }
.bfc-fab--right-middle .bfc-fab__label,
.bfc-fab--left-middle .bfc-fab__label {max-width:0 !important; opacity:0 !important; overflow:hidden !important; white-space:nowrap !important; transition:max-width .26s ease, opacity .18s ease !important; }
.bfc-fab--right-middle.is-wide .bfc-fab__label,
.bfc-fab--right-middle:hover .bfc-fab__label,
.bfc-fab--right-middle:focus-visible .bfc-fab__label,
.bfc-fab--left-middle.is-wide .bfc-fab__label,
.bfc-fab--left-middle:hover .bfc-fab__label,
.bfc-fab--left-middle:focus-visible .bfc-fab__label {max-width:170px !important; opacity:1 !important; }

/* On phones there is no room to reserve a gutter, so an edge-anchored button
   becomes a plain 52px puck with a corner count and floats over the content
   the way a scroll-to-top control does. */
@media(max-width:767px){
  .bfc-fab--right-middle, .bfc-fab--left-middle {width:52px !important; height:52px !important; padding:0 !important; justify-content:center !important; gap:0 !important; }
  .bfc-fab--right-middle .bfc-fab__label,
  .bfc-fab--left-middle .bfc-fab__label {max-width:0 !important; opacity:0 !important; }
  .bfc-fab--right-middle .bfc-fab__count,
  .bfc-fab--left-middle .bfc-fab__count {position:absolute !important; top:-6px !important; right:-6px !important; min-width:23px !important; height:23px !important; padding:0 6px !important; font-size:12px !important; box-shadow:0 0 0 1px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.35) !important; }}
.bfc-fab--bottom-right  {right:16px !important; bottom:16px !important; padding-bottom:calc(12px + env(safe-area-inset-bottom)) !important; }
.bfc-fab--bottom-left   {left:16px !important; bottom:16px !important; padding-bottom:calc(12px + env(safe-area-inset-bottom)) !important; }
/* Solid, never translucent. A tinted-white pill with white digits reads as an
   empty circle on any brand color that is not very dark — and the ">=768px"
   styling is what a phone gets in landscape, on a tablet, or on a theme with
   no viewport meta tag. --bfc-brand-ink is contrast-checked against the page
   background at detection time, so this pairing is readable by construction. */
.bfc-fab__count {display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:22px !important; height:22px !important; padding:0 7px !important; border-radius:999px !important; background:var(--bfc-surface) !important; color:var(--bfc-brand-ink) !important; border:2px solid var(--bfc-surface) !important; box-shadow:0 0 0 1px rgba(16,24,40,.10), 0 1px 3px rgba(16,24,40,.18) !important; font-size:12.5px !important; font-weight:800 !important; line-height:1 !important; flex:0 0 auto !important; box-sizing:border-box !important; }
.bfc-fab.is-hidden {opacity:0 !important; pointer-events:none !important; }
@media(max-width:480px){ .bfc-fab{font-size:13.5px !important; padding:10px 13px !important; gap:7px !important; }
  .bfc-fab--right-middle{right:10px !important; } .bfc-fab--left-middle{left:10px !important; }
  .bfc-fab--bottom-right{right:12px !important; bottom:12px !important; padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important; }
  .bfc-fab--bottom-left{left:12px !important; bottom:12px !important; padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important; }}
@media print { .bfc-fab {display:none !important; }}

/* ============================ DIALOG SHEET =============================== */
.bfc-sheet {position:fixed !important; inset:0 !important; z-index:99991 !important; display:none !important; align-items:flex-end !important; justify-content:center !important; font-family:var(--bfc-font) !important; }
.bfc-sheet.is-open {display:flex !important; }
@media(min-width:640px){ .bfc-sheet{align-items:center !important; padding:24px !important; }}
.bfc-sheet__scrim {position:absolute !important; inset:0 !important; background:rgba(11,17,26,.58) !important; }
.bfc-sheet__panel {position:relative !important; width:100% !important; max-width:520px !important; max-height:92vh !important; display:flex !important; flex-direction:column !important; background:var(--bfc-surface) !important; border:1px solid var(--bfc-line) !important; border-radius:18px 18px 0 0 !important; box-shadow:var(--bfc-shadow-lg) !important; overflow:hidden !important; }
@media(min-width:640px){ .bfc-sheet__panel{border-radius:18px !important; max-height:86vh !important; }}
.bfc-sheet__head {display:flex !important; align-items:flex-start !important; gap:12px !important; padding:16px 16px 13px !important; border-bottom:1px solid var(--bfc-line) !important; }
.bfc-sheet__titles {flex:1 !important; min-width:0 !important; }
.bfc-sheet__title {font-family:var(--bfc-head-font) !important; font-size:18px !important; font-weight:800 !important; color:var(--bfc-ink) !important; line-height:1.25 !important; }
.bfc-sheet__sub {margin-top:3px !important; font-size:13px !important; color:var(--bfc-muted) !important; }
.bfc-sheet__x {flex:0 0 auto !important; width:38px !important; height:38px !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; background:var(--bfc-canvas) !important; color:var(--bfc-body) !important; border:1px solid var(--bfc-line) !important; transition:.15s !important; }
.bfc-sheet__x:hover {background:var(--bfc-avoid-bg) !important; color:var(--bfc-avoid-ink) !important; border-color:var(--bfc-avoid-line) !important; }
.bfc-sheet__body {flex:1 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; padding:4px 16px 16px !important; }
.bfc-sheet__foot {padding:12px 16px calc(12px + env(safe-area-inset-bottom)) !important; border-top:1px solid var(--bfc-line) !important; display:flex !important; gap:8px !important; background:var(--bfc-surface) !important; }
.bfc-sheet__foot .bfc-btn {flex:1 !important; }

.bfc-btn {display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; padding:11px 15px !important; border-radius:var(--bfc-r-sm) !important; font-size:14px !important; font-weight:750 !important; border:1px solid transparent !important; transition:.15s !important; }
.bfc-btn--primary {background:var(--bfc-brand) !important; color:var(--bfc-brand-contrast) !important; }
.bfc-btn--primary:hover {filter:brightness(.92) !important; }
.bfc-btn--ghost {background:var(--bfc-surface) !important; border-color:var(--bfc-line) !important; color:var(--bfc-body) !important; }
.bfc-btn--ghost:hover {border-color:var(--bfc-brand) !important; color:var(--bfc-brand-ink) !important; }
.bfc-btn--danger {background:var(--bfc-avoid) !important; color:#fff !important; }
.bfc-btn[disabled] {opacity:.45 !important; cursor:not-allowed !important; }

/* the saved food list inside the sheet */
.bfc-items {display:grid !important; gap:6px !important; }
.bfc-items--flat {padding-top:12px !important; }
.bfc-note {margin-top:11px !important; font-size:12.5px !important; font-weight:650 !important; color:var(--bfc-caution-ink) !important; background:var(--bfc-caution-bg) !important; border:1px solid var(--bfc-caution-line) !important; border-radius:var(--bfc-r-sm) !important; padding:9px 11px !important; }
.bfc-fineprint {margin-top:12px !important; font-size:12.5px !important; color:var(--bfc-muted) !important; line-height:1.55 !important; }
.bfc-item {display:flex !important; align-items:center !important; gap:9px !important; padding:9px 10px !important; border-radius:var(--bfc-r-sm) !important; border:1px solid !important; font-size:13.5px !important; }
.bfc-item[data-status="Safe"] {background:var(--bfc-safe-bg) !important; border-color:var(--bfc-safe-line) !important; color:var(--bfc-safe-ink) !important; }
.bfc-item[data-status="Caution"] {background:var(--bfc-caution-bg) !important; border-color:var(--bfc-caution-line) !important; color:var(--bfc-caution-ink) !important; }
.bfc-item__name {flex:1 !important; font-weight:700 !important; line-height:1.35 !important; }
.bfc-item__note {display:block !important; font-weight:500 !important; font-size:11.5px !important; opacity:.85 !important; margin-top:1px !important; }
.bfc-item__x {width:26px !important; height:26px !important; flex:0 0 auto !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; color:currentColor !important; opacity:.6 !important; }
.bfc-item__x:hover {opacity:1 !important; background:rgba(127,127,127,.16) !important; }
.bfc-blank {text-align:center !important; padding:26px 12px !important; }
.bfc-blank__icon {width:54px !important; height:54px !important; margin:0 auto 12px !important; border-radius:999px !important; background:var(--bfc-brand-soft) !important; color:var(--bfc-brand-ink) !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.bfc-blank__title {font-size:16.5px !important; font-weight:800 !important; color:var(--bfc-ink) !important; }
.bfc-blank__body {margin-top:6px !important; font-size:13.5px !important; color:var(--bfc-muted) !important; max-width:36ch !important; margin-left:auto !important; margin-right:auto !important; }

/* emergency content */
.bfc-sos__q {margin-top:12px !important; border:1px solid var(--bfc-line) !important; border-radius:var(--bfc-r-sm) !important; overflow:hidden !important; }
.bfc-sos__qbtn {width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; padding:12px 13px !important; font-size:14px !important; font-weight:750 !important; color:var(--bfc-ink) !important; background:var(--bfc-canvas) !important; text-align:left !important; }
.bfc-sos__qbtn svg {flex:0 0 auto !important; transition:transform .18s !important; }
.bfc-sos__qbtn[aria-expanded="true"] svg {transform:rotate(180deg) !important; }
.bfc-sos__a {padding:12px 13px !important; font-size:13.5px !important; color:var(--bfc-body) !important; border-top:1px solid var(--bfc-line) !important; }
.bfc-sos__a strong {color:var(--bfc-ink) !important; }
.bfc-sos__a ul {margin-top:7px !important; display:grid !important; gap:5px !important; }
.bfc-sos__a li {padding-left:16px !important; position:relative !important; }
.bfc-sos__a li::before {content:"•" !important; position:absolute !important; left:4px !important; color:var(--bfc-brand-ink) !important; }
.bfc-sos__now {margin-bottom:2px !important; padding:12px 13px !important; border-radius:var(--bfc-r-sm) !important; background:var(--bfc-avoid-bg) !important; border:1px solid var(--bfc-avoid-line) !important; color:var(--bfc-avoid-ink) !important; font-size:13.5px !important; font-weight:650 !important; line-height:1.45 !important; }

/* toast */
.bfc-toast {position:fixed !important; left:50% !important; transform:translate(-50%,14px) !important; bottom:24px !important; z-index:99992 !important; background:var(--bfc-ink) !important; color:var(--bfc-surface) !important; padding:9px 16px !important; border-radius:999px !important; font-family:var(--bfc-font) !important; font-size:13.5px !important; font-weight:700 !important; white-space:nowrap !important; box-shadow:var(--bfc-shadow-lg) !important; opacity:0 !important; pointer-events:none !important; transition:opacity .2s, transform .2s !important; }
.bfc-toast.is-on {opacity:1 !important; transform:translate(-50%,0) !important; }

/* ================================ PRINT ================================== */
.bfc-print {display:none !important; }
@media print {
  body * { visibility:hidden !important; }
  .bfc-print, .bfc-print * {visibility:visible !important; }
  .bfc-print {display:block !important; position:absolute !important; left:0 !important; top:0 !important; width:100% !important; font-family:Georgia,"Times New Roman",serif !important; color:#000 !important; padding:0 6mm !important; }
  .bfc-print h1 {font-size:21pt !important; margin:0 0 2mm !important; }
  .bfc-print .p-sub {font-size:10pt !important; color:#444 !important; margin-bottom:5mm !important; border-bottom:1.5pt solid #000 !important; padding-bottom:3mm !important; }
  .bfc-print .p-meal {margin-bottom:5mm !important; break-inside:avoid !important; }
  .bfc-print .p-mealname {font-size:13pt !important; font-weight:bold !important; border-bottom:.5pt solid #999 !important; padding-bottom:1mm !important; margin-bottom:2mm !important; }
  .bfc-print .p-item {font-size:11pt !important; margin:0 0 1.5mm !important; padding-left:5mm !important; }
  .bfc-print .p-flag {font-size:9pt !important; font-style:italic !important; color:#333 !important; }
  .bfc-print .p-rules {margin-top:6mm !important; padding-top:3mm !important; border-top:1.5pt solid #000 !important; font-size:9.5pt !important; line-height:1.5 !important; }
  @page { margin:14mm; }}

/* ---------- category sections on the guide page ---------- */
.bfc__catsec {margin-bottom:22px !important; }
.bfc__cathead {font-size:15px !important; font-weight:800 !important; color:var(--bfc-ink) !important; letter-spacing:.01em !important; margin-bottom:10px !important; padding-bottom:7px !important; border-bottom:1px solid var(--bfc-line) !important; display:flex !important; align-items:baseline !important; gap:9px !important; }
.bfc__cathead span {font-size:12px !important; font-weight:600 !important; color:var(--bfc-muted) !important; letter-spacing:0 !important; }

/* ---------- category tints + icons ----------
   The section and its chip share a very low-strength wash of the category's
   own hue, so the two read as a pair while scrolling. Both custom properties
   are filled by the script at runtime, after it has checked the result
   against the text colors this page actually resolved to; if no strength of
   that hue is readable, neither property is set and these rules fall back to
   exactly what the guide looked like before. */
.bfc__catsec[data-hue] {background:var(--bfc-cat-tint, transparent) !important; border:1px solid var(--bfc-cat-line, transparent) !important; border-radius:var(--bfc-r) !important; padding:14px !important; }
@media(max-width:520px){ .bfc__catsec[data-hue]{padding:11px !important; }}
.bfc__cathead {gap:8px !important; }
.bfc__cathead-icon {flex:0 0 auto !important; align-self:center !important; color:var(--bfc-cat-ink, var(--bfc-muted)) !important; }
.bfc__cathead-name {flex:0 0 auto !important; }

.bfc__chip--cat {display:inline-flex !important; align-items:center !important; gap:6px !important; background:var(--bfc-cat-tint, var(--bfc-surface)) !important; border-color:var(--bfc-cat-line, var(--bfc-line)) !important; }
.bfc__chipicon {flex:0 0 auto !important; color:var(--bfc-cat-ink, var(--bfc-muted)) !important; }
.bfc__chiplabel {flex:0 0 auto !important; }
.bfc__chip--cat:hover {border-color:var(--bfc-brand) !important; color:var(--bfc-brand-ink) !important; }
/* the active chip keeps the solid brand fill — it has to outrank the tint */
.bfc__chip--cat[aria-pressed="true"] {background:var(--bfc-brand) !important; border-color:var(--bfc-brand) !important; color:var(--bfc-brand-contrast) !important; }
.bfc__chip--cat[aria-pressed="true"] .bfc__chipicon {color:var(--bfc-brand-contrast) !important; }

/* ---------- category section headings ----------
   Section headings are the landmark you scan for when browsing, so they are
   deliberately much larger than the filter chips above them. The chip icons
   stay small on purpose: they are a dense row of controls, not landmarks. */
/* The base sheet styles ".bfc__cathead span" for the item tally. Both the
   name and the tally are spans now, so the name needs to outrank that rule
   rather than inherit the tally's small type. */
.bfc__cathead {gap:14px !important; align-items:center !important; margin-bottom:14px !important; padding-bottom:11px !important; }
.bfc__cathead span.bfc__cathead-name {font-size:28px !important; font-weight:800 !important; color:var(--bfc-ink) !important; line-height:1.15 !important; letter-spacing:-.01em !important; }
.bfc__cathead span[data-tally] {font-size:13.5px !important; }
.bfc__cathead-icon {width:60px !important; height:60px !important; stroke-width:1.6 !important; }
@media(max-width:767px){
  .bfc__cathead {gap:10px !important; margin-bottom:11px !important; padding-bottom:9px !important; }
  .bfc__cathead span.bfc__cathead-name {font-size:22px !important; }
  .bfc__cathead span[data-tally] {font-size:12.5px !important; }
  .bfc__cathead-icon {width:42px !important; height:42px !important; }}
@media(max-width:400px){
  .bfc__cathead span.bfc__cathead-name {font-size:19px !important; }
  .bfc__cathead-icon {width:34px !important; height:34px !important; }}

/* ---------- "Something wrong?" strip, now between the two cards ---------- */
.bfc__sos--inline {margin-top:14px !important; }

/* ---------- All / Reset all pills ----------
   "All foods" is a filter and looks like one. "Reset all" is an action, so it
   gets an outlined, unfilled treatment and never takes the active state. */
.bfc__chip--all {gap:0 !important; }
.bfc__chip--reset {display:inline-flex !important; align-items:center !important; gap:6px !important; margin-left:auto !important; background:transparent !important; border:1px dashed var(--bfc-line) !important; color:var(--bfc-muted) !important; font-weight:650 !important; }
.bfc__chip--reset:hover {border-color:var(--bfc-brand) !important; border-style:solid !important; color:var(--bfc-brand-ink) !important; background:var(--bfc-brand-soft) !important; }
.bfc__chip--reset svg {flex:0 0 auto !important; }
/* the row scrolls horizontally on a phone, where margin-left:auto would strand it */
@media(max-width:767px){ .bfc__chip--reset {margin-left:4px !important; }}