/* ==========================================================================
   Flona Encyclopedia — /blog component layer
   Loads AFTER root /styles.css. Reuses brand tokens (--deep-blue,
   --electric-blue, --cyan, --violet, --magenta, --white, --surface,
   --border, --text-2, --ink, --ink-soft, --grad, --grad-soft, --grad-text,
   --glow-*, --r-*, --maxw, --shadow-card, --shadow-soft, --font-display,
   --font-body) and base classes (.container, .section, .btn*, .card,
   .grid*, .site-header, .site-footer, .cta-band, .compare*, .eyebrow,
   .gradient-text, .badge, .lead). Do NOT redefine those here — additive
   only. Focus rings + prefers-reduced-motion are already global.
   ========================================================================== */

/* ---- Breadcrumbs (.crumbs) ----------------------------------------------- */
.crumbs { margin-bottom: 24px; }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
  font-size: .85rem; color: var(--text-2);
}
.crumbs li { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.crumbs li:not(:last-child)::after {
  content: "\203A"; /* › */
  color: var(--border); font-size: 1rem; line-height: 1;
}
.crumbs a { color: var(--electric-blue); }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { font-weight: 600; color: var(--ink); }

/* ---- A-Z letter-jump nav (.letter-jump-nav) -------------------------------- */
.letter-jump-nav ol { justify-content: center; }
.letter-jump-nav li::after { content: none; }
.letter-jump-nav a { font-weight: 600; }

/* ---- Table of contents (.toc) -------------------------------------------- */
.toc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 20px 22px; margin-bottom: 32px;
}
.toc::before {
  content: "On this page";
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--violet); margin-bottom: 12px;
}
.toc ol {
  list-style: none; margin: 0; padding: 0; counter-reset: toc;
  display: flex; flex-direction: column; gap: 8px;
}
.toc li { font-size: .94rem; line-height: 1.4; }
.toc a { color: var(--ink-soft); }
.toc a:hover { color: var(--electric-blue); }
@media (min-width: 961px) {
  .toc--sticky { position: sticky; top: 88px; }
}

/* ---- Medical disclaimer (.med-disclaimer) --------------------------------- */
.med-disclaimer {
  background: var(--grad-soft); border-left: 3px solid var(--electric-blue);
  border-radius: var(--r); padding: 18px 22px; margin-block: 28px;
  font-size: .9rem; color: var(--ink-soft);
}
.med-disclaimer p { margin: 0 0 .6em; color: inherit; font-size: inherit; }
.med-disclaimer p:last-child { margin-bottom: 0; }
.med-disclaimer strong { color: var(--ink); }

/* ---- Clinical warnings (.clinical-warning) --------------------------------
   High-priority medical callouts rendered directly under the hero, ABOVE the
   nutrition figures. Deliberately louder than .med-disclaimer: a reader who
   scans only the top of a beer page must not miss the delayed-hypoglycemia
   warning, and one who reads only the stat grid on a soda page must still see
   why the carbohydrate number is not the whole story.
   Colour is carried by a left rule and a tinted ground rather than by text
   colour alone, so the severity survives greyscale printing and does not rely
   on colour vision. Contrast is kept at WCAG AA against the tinted ground. */
.clinical-warning {
  border-radius: var(--r); padding: 18px 22px; margin-block: 24px;
  border-left: 4px solid currentColor; font-size: .94rem; line-height: 1.6;
}
.clinical-warning p { margin: 0 0 .7em; }
.clinical-warning p:last-child { margin-bottom: 0; }
.clinical-warning ul { margin: .5em 0 .8em; padding-left: 1.15em; }
.clinical-warning li { margin-bottom: .35em; }
.clinical-warning-title { font-family: var(--font-display); font-size: 1rem; }

/* Alcohol: the highest-severity callout on the site — a delayed hypo is an
   emergency, not a portion-planning matter. */
.clinical-warning--alcohol { background: #FBE7E7; color: #8B1E1E; }
.clinical-warning--alcohol strong,
.clinical-warning--alcohol .clinical-warning-title { color: #6E1414; }

/* Sugar-sweetened drinks: cautionary, not alarming. */
.clinical-warning--ssb { background: #FCF1DC; color: #7A4E08; }
.clinical-warning--ssb strong,
.clinical-warning--ssb .clinical-warning-title { color: #5E3C06; }

/* Delayed glucose rise from a high-fat meal — informational, not alarming. */
.clinical-warning--delayed { background: #E8F0FB; color: #1B4472; }
.clinical-warning--delayed strong,
.clinical-warning--delayed .clinical-warning-title { color: #123055; }

/* Withdrawn/impossible source data. */
.clinical-warning--data { background: var(--surface); color: var(--ink-soft); border-left-color: var(--text-2); }
.clinical-warning--data strong { color: var(--ink); }

/* ---- USDA provenance line under the H1 ------------------------------------ */
.food-usda-name {
  margin: -2px 0 10px; font-size: .82rem; color: var(--text-2);
  letter-spacing: .01em;
}
.food-usda-name span { font-style: italic; }

/* ---- Portion scaler: real-world serving line ------------------------------ */
.portion-scaler-serving {
  margin: 0 0 12px; font-size: .92rem; color: var(--ink-soft);
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.portion-scaler-serving strong { color: var(--ink); }

/* ---- Safety badge (.safety-badge) ----------------------------------------- */
.safety-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .03em; padding: 3px 12px; border-radius: var(--r-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.safety-badge.is-safe     { background: #E4F6EE; color: #0A8A3A; border-color: #BFE9D3; }
.safety-badge.is-moderate { background: #FCF1DC; color: #8A5A0A; border-color: #F0DDAF; }
.safety-badge.is-unsafe   { background: #FBE7E7; color: #A02323; border-color: #F2C6C6; }
.safety-badge.is-unknown  { background: var(--surface); color: var(--text-2); border-color: var(--border); }

/* ---- Tier table (.tier-table) --------------------------------------------- */
.tier-table-wrap {
  overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft); margin-block: 28px; -webkit-overflow-scrolling: touch;
}
.tier-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.tier-table th, .tier-table td {
  padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border);
  font-size: .95rem; color: var(--ink-soft);
}
.tier-table thead th {
  background: var(--surface); font-family: var(--font-display); font-weight: 600;
  color: var(--ink); font-size: .85rem; letter-spacing: .02em;
}
.tier-table tbody tr:last-child td { border-bottom: 0; }
.tier-table tbody tr:nth-child(even) { background: rgba(248,250,255,.6); }
.tier-table td:first-child, .tier-table th:first-child { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.tier-table td .safety-badge { vertical-align: middle; }

/* ---- Tier-table category color band (.tier-cat1/2/3) ----------------------
   Presentational overlay for the book's three control CATEGORIES (green/
   yellow/red), separate from the per-food .safety-badge. These rules come
   after the :nth-child(even) rule above with equal-or-greater specificity
   (single class vs. pseudo-class = equal specificity, source order wins),
   so the category tint applies to BOTH odd and even rows. */
.tier-table tbody tr.tier-cat1 { border-left: 4px solid #0A8A3A; background: rgba(10,138,58,.05); }
.tier-table tbody tr.tier-cat2 { border-left: 4px solid #C08A1E; background: rgba(192,138,30,.06); }
.tier-table tbody tr.tier-cat3 { border-left: 4px solid #A02323; background: rgba(160,35,35,.05); }

/* ---- Category dot (.cat-dot) ----------------------------------------------- */
.cat-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle;
}
.cat-dot-1 { background: #0A8A3A; }
.cat-dot-2 { background: #C08A1E; }
.cat-dot-3 { background: #A02323; }

/* ---- Category legend (.cat-legend) -----------------------------------------
   Explains the three control categories + their HbA1c/fasting-glucose
   formula; rendered once, right before the tier table on every food page. */
.cat-legend-intro { color: var(--ink-soft); margin-bottom: 14px; }
.cat-legend {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border); border-radius: var(--r);
  margin-bottom: 28px; overflow: hidden;
}
.cat-legend-item {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  padding: 10px 16px; font-size: .88rem; background: var(--white);
  min-width: 0; max-width: 100%;
}
.cat-legend-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.cat-legend-item.cat-legend-1 { border-left: 4px solid #0A8A3A; background: rgba(10,138,58,.05); }
.cat-legend-item.cat-legend-2 { border-left: 4px solid #C08A1E; background: rgba(192,138,30,.06); }
.cat-legend-item.cat-legend-3 { border-left: 4px solid #A02323; background: rgba(160,35,35,.05); }
.cat-legend-label { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.cat-legend-range { color: var(--text-2); overflow-wrap: anywhere; min-width: 0; }

/* ---- Specialist doctor notes (.dr-flag / .dr-note / .dr-disclaimer) -------
   Typed guidance from the source book's two named specialists (kidney/
   urology and cardiology). Deliberately distinct from the green/yellow/red
   .tier-cat / .cat-legend control-category colours above, so readers don't
   confuse "this food's control-category" with "a specialist flagged this
   food" — kidney=teal/blue, heart=red/rose, general=amber. */
.dr-flag {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 16px; margin-block: 10px; font-size: .92rem;
  border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--r);
  background: var(--surface); color: var(--ink-soft);
}
.dr-flag strong { color: var(--ink); }
.dr-flag-kidney  { border-left-color: #1478A8; background: rgba(20,120,168,.06); }
.dr-flag-heart   { border-left-color: #A02323; background: rgba(160,35,35,.05); }
.dr-flag-general { border-left-color: #C08A1E; background: rgba(192,138,30,.06); }

.dr-note {
  border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--r);
  padding: 14px 18px; margin-bottom: 14px; background: var(--white);
}
.dr-note p { margin: 0 0 .5em; color: var(--ink-soft); }
.dr-note p:last-child { margin-bottom: 0; }
.dr-note-label { font-size: .92rem; }
.dr-note-label strong { color: var(--ink); }
.dr-note-attribution { font-size: .82rem; color: var(--text-2); font-weight: 400; }
.dr-note-kidney  { border-left-color: #1478A8; }
.dr-note-heart   { border-left-color: #A02323; }
.dr-note-general { border-left-color: #C08A1E; }

.dr-disclaimer { font-size: .82rem; font-style: italic; color: var(--text-2); margin-top: 4px; }

/* Stacked-card fallback on narrow phones (keeps horizontal scroll option above
   960px/680px breakpoints; this only kicks in on very small screens) */
@media (max-width: 480px) {
  .tier-table-wrap { border: 0; box-shadow: none; overflow-x: visible; }
  .tier-table, .tier-table thead, .tier-table tbody, .tier-table th, .tier-table td, .tier-table tr { display: block; width: 100%; min-width: 0; }
  .tier-table thead { display: none; }
  .tier-table tbody tr {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
    margin-bottom: 14px; padding: 6px 4px; box-shadow: var(--shadow-soft);
  }
  .tier-table tbody tr.tier-cat1 { border-left: 4px solid #0A8A3A; }
  .tier-table tbody tr.tier-cat2 { border-left: 4px solid #C08A1E; }
  .tier-table tbody tr.tier-cat3 { border-left: 4px solid #A02323; }
  .tier-table td { border: 0; padding: 8px 16px; }
  .tier-table td::before {
    content: attr(data-label); display: block; font-family: var(--font-display);
    font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-2); margin-bottom: 2px;
  }
}

/* ---- Portion scaler (.portion-scaler) --------------------------------------
   Sits right after the tier table in the "Suggested Serving Size" section.
   Gradient top accent + tinted wash mark it as an interactive tool (same
   visual language as .quiz-result/.med-disclaimer) instead of another plain
   bordered box like the stat-grid. */
.portion-scaler {
  position: relative; max-width: 72ch; margin: 24px 0 28px; padding: 24px 24px 22px;
  border: 1px solid var(--border); border-top: none; border-radius: var(--r-lg);
  background: var(--grad-soft); box-shadow: var(--shadow-soft); overflow: hidden;
}
.portion-scaler::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad);
}
.portion-scaler-eyebrow {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--violet);
}
.portion-scaler-ico { flex: 0 0 auto; color: var(--electric-blue); }
.portion-scaler-intro { margin: 0 0 14px; color: var(--ink-soft); font-size: .95rem; }
.portion-scaler-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 14px;
}
.portion-scaler-row label {
  font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--ink);
  flex: 1 1 100%;
}
.portion-scaler-row input[type="range"] {
  flex: 1 1 160px; min-width: 120px; accent-color: var(--electric-blue); cursor: pointer;
}
.portion-scaler-row input[type="range"]:focus-visible {
  outline: 3px solid var(--electric-blue); outline-offset: 3px;
}
.portion-scaler-row input[type="number"] {
  width: 7ch; padding: 8px 10px; font-size: 1rem; font-family: inherit;
  color: var(--ink); background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r);
}
.portion-scaler-row input[type="number"]:focus-visible {
  outline: 3px solid var(--electric-blue); outline-offset: 2px;
}
.portion-scaler-readout { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.portion-scaler-chip {
  display: inline-flex; align-items: baseline; gap: 3px; margin-right: 4px;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--grad); box-shadow: 0 4px 12px var(--glow-blue);
}
.portion-scaler-chip #portionCarbsValue {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  color: var(--white);
}
/* carbs === null: short explanatory note only, no input to style — keep this
   state plain/low-key since there's nothing to interact with. */
.portion-scaler--unavailable {
  padding: 16px 20px; border-top: 1px solid var(--border); background: var(--surface);
}
.portion-scaler--unavailable::before { content: none; }
.portion-scaler-note { margin: 0; color: var(--text-2); font-size: .9rem; font-style: italic; }

@media (max-width: 680px) {
  .portion-scaler-row { gap: 10px; }
  .portion-scaler-row input[type="range"] { flex-basis: 100%; }
  .portion-scaler-row input[type="number"] { width: 100%; }
}

/* ---- Food hero (.food-hero) ------------------------------------------------ */
.food-hero {
  display: grid; grid-template-columns: minmax(0,2fr) minmax(0,3fr);
  gap: 40px; align-items: center; margin-bottom: 40px;
}
.food-hero .food-hero-media { width: 100%; }
.food-hero h1 {
  margin-bottom: .3em;
  overflow-wrap: anywhere;
  font-size: clamp(1.8rem, 4vw, 4rem);
}
.food-hero .lead { margin-bottom: 18px; }
.food-hero .safety-badge { margin-bottom: 16px; }

/* ---- Stat grid (.stat-grid) ------------------------------------------------ */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px; margin-block: 18px;
}
.stat-grid > div, .stat-grid .stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 18px; text-align: left;
}
.stat-grid .stat-num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.6rem; color: var(--electric-blue); line-height: 1.1; margin-bottom: 4px;
}
.stat-grid .stat-label {
  display: block; font-size: .78rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-2);
}

/* ---- Image fallback chip (.img-fallback) ----------------------------------- */
.img-fallback {
  position: relative; overflow: hidden; display: grid; place-items: center;
  gap: 10px; border-radius: var(--r-lg); background: var(--grad); color: #fff;
  text-align: center; padding: 16px;
}
.img-fallback::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 20% 15%, rgba(255,255,255,.32), transparent 55%),
              radial-gradient(90% 70% at 85% 90%, rgba(10,42,138,.22), transparent 60%);
  pointer-events: none;
}
.img-fallback-ico { position: relative; display: grid; place-items: center; color: #fff; opacity: .95; }
.img-fallback-ico svg { width: 100%; height: 100%; }
.img-fallback-label {
  position: relative; font-family: var(--font-display); font-weight: 600;
  font-size: .92rem; letter-spacing: .01em; max-width: 90%;
}

.img-fallback--hero { min-height: 260px; aspect-ratio: 4 / 3; border-radius: var(--r-xl); padding: 28px; }
.img-fallback--hero .img-fallback-ico { width: 48px; height: 48px; }
.img-fallback--hero .img-fallback-label { font-size: 1.1rem; }

.img-fallback--card { min-height: 150px; aspect-ratio: 3 / 2; }
.img-fallback--card .img-fallback-ico { width: 36px; height: 36px; }

.img-fallback--thumb { min-height: 90px; aspect-ratio: 3 / 2; border-radius: var(--r); padding: 10px; gap: 6px; }
.img-fallback--thumb .img-fallback-ico { width: 28px; height: 28px; }
.img-fallback--thumb .img-fallback-label { font-size: .78rem; }

/* ---- Real content image (.img-content) ------------------------------------- */
.img-content {
  width: 100%; height: auto; object-fit: cover; display: block;
  border: 1px solid var(--border); box-shadow: var(--shadow-soft); background: var(--surface);
}
.img-content--hero { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }
.img-content--card { aspect-ratio: 3 / 2; border-radius: var(--r-lg); }
.img-content--thumb { aspect-ratio: 3 / 2; border-radius: var(--r); }

/* ---- Inline mid-article CTA (.cta-inline) ---------------------------------- */
.cta-inline {
  text-align: center; border-left: 3px solid var(--violet);
  background: var(--grad-soft); margin-block: 32px;
}
.cta-inline p { max-width: 56ch; margin-inline: auto; color: var(--ink-soft); }
.cta-inline .hero-actions { justify-content: center; flex-wrap: wrap; }

/* ---- Trust grid wrapper (.trust-grid) -------------------------------------- */
.trust-grid { margin-block: 40px; }

/* ---- Related items grid (.related-grid) ------------------------------------ */
.related-grid { margin-block: 40px; }
.related-grid .card,
.related-grid a.card {
  display: flex; flex-direction: column; color: inherit; text-decoration: none;
}
.related-grid .card img,
.related-grid .card .img-fallback,
.related-grid .card .img-content {
  margin-bottom: 16px;
}
.related-grid .card h3 { color: var(--ink); }
.related-grid .card p { color: var(--text-2); }
.related-grid a.card:focus-visible { outline: 3px solid var(--electric-blue); outline-offset: 3px; }

/* ---- Comments (Disqus) (.comments) ---------------------------------------- */
.comments {
  margin-block: 40px; padding-top: 28px; border-top: 1px solid var(--border);
}
.comments > h2 { margin-top: 0; }

/* ---- Prev / next nav (.prevnext) ------------------------------------------- */
.prevnext {
  display: flex; justify-content: space-between; gap: 18px; margin-block: 40px;
}
.prevnext-link {
  flex: 1 1 0; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--r); padding: 16px 20px;
  color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.prevnext-link:hover { border-color: var(--cyan); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.prevnext-dir {
  font-family: var(--font-display); font-weight: 600; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--violet);
}
.prevnext-title { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.prevnext-link.next { text-align: right; align-items: flex-end; }
.prevnext-link.prev { text-align: left; align-items: flex-start; }

/* ---- Article prose (.article-body) ----------------------------------------- */
.article-body { max-width: 72ch; }
.article-body h2 { margin-top: 1.8em; scroll-margin-top: 88px; }
.article-body h3 { margin-top: 1.4em; scroll-margin-top: 88px; }
.article-body p { color: var(--ink-soft); }
.article-body ul {
  list-style: disc; margin: 0 0 1rem; padding-left: 1.3em;
}
.article-body ul li { margin-bottom: .4em; color: var(--ink-soft); }
.article-body ol {
  list-style: decimal; margin: 0 0 1rem; padding-left: 1.3em;
}
.article-body ol li { margin-bottom: .4em; color: var(--ink-soft); }
.article-body a { text-decoration: underline; text-underline-offset: 2px; }
.article-body strong { color: var(--ink); }

/* ---- Article layout: main + sticky sidebar (.article-layout) -------------- */
.article-layout {
  display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 48px; align-items: start;
}
.article-layout .article-main { min-width: 0; }
.article-layout .article-aside { min-width: 0; }

/* ---- Narrow section container (.section-narrow) ---------------------------- */
.section-narrow { max-width: 760px; margin-inline: auto; }

/* ---- Food directory / index grids (.food-grid, .food-index) --------------- */
.food-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}
.food-index { display: flex; flex-direction: column; gap: 40px; }

/* ---- Alphabetical index groups (.letter-group) ----------------------------- */
.letter-group { margin-bottom: 36px; }
.letter-group-heading {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  color: var(--electric-blue); border-bottom: 1px solid var(--border);
  padding-bottom: 8px; margin-bottom: 16px;
}
.letter-group ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.letter-group li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: .96rem; }
.letter-group li:last-child { border-bottom: 0; }

/* ---- Search box + results (.search-box, .search-results) ------------------ */
.search-box { display: flex; gap: 10px; flex-wrap: wrap; max-width: 100%; margin-bottom: 32px; }
.search-box input[type="search"],
.search-box input[type="text"] {
  flex: 1 1 40px; width: 100%; min-width: 0; box-sizing: border-box;
  font-family: inherit; font-size: 1rem; line-height: 1.3; padding: 13px 18px;
  height: 50px; min-height: 50px; border-radius: var(--r); border: 1px solid #bdcaf3;
  background: #fff; color: var(--ink);
  /* Reset the native iOS/Safari search-field chrome, which otherwise renders an
     oversized rounded "pill" with its own inner shadow and cancel button on
     mobile, ignoring these box styles. */
  -webkit-appearance: none; appearance: none;
}
.search-box input[type="search"]::-webkit-search-cancel-button,
.search-box input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-box input:focus-visible { border-color: var(--electric-blue); }
.search-box input::placeholder { color: #9AA4BF; }
.search-results { display: flex; flex-direction: column; gap: 4px; }
.search-results .card { display: flex; flex-direction: column; gap: 4px; }
.search-results-count { color: var(--text-2); font-size: .92rem; margin-bottom: 18px; }

/* ---- Type 1 vs Type 2 guidance callout (.type-guidance) --------------------
   Cross-cutting "how to use the portions above" callout rendered after the
   tier table on every food page (reference.type_guidance). Deliberately a
   neutral/brand-blue accent, distinct from both the green/yellow/red
   .tier-cat / .cat-legend control-category colours and the kidney/heart
   .dr-note specialist colours, so readers don't confuse this general
   type-1/type-2 strategy note with either of those. */
.type-guidance {
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 18px 22px; margin-block: 28px; background: var(--surface);
  border-left: 4px solid var(--electric-blue);
}
.type-guidance-intro { color: var(--ink-soft); margin: 0 0 12px; }
.type-guidance-row {
  padding: 10px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.type-guidance-row:not(:last-of-type) { border-bottom: 1px solid var(--border); }
.type-guidance-row p { margin: 0; color: var(--ink-soft); flex: 1 1 260px; }
.type-guidance-label {
  font-family: var(--font-display); font-weight: 600; color: var(--electric-blue);
  flex: 0 0 auto; min-width: 56px;
}
.type-guidance-more { margin: 12px 0 0; font-size: .9rem; }

/* ---- Category directory pagination (.pagination) --------------------------- */
.pagination-summary { color: var(--text-2); font-size: .88rem; margin: 0 0 14px; text-align: center; }
.pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin: 32px auto; padding: 14px; max-width: fit-content;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: .9rem;
}
.pagination a,
.pagination .pagination-current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: var(--r-pill); color: var(--ink-soft); font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, background .15s ease;
}
.pagination a:hover {
  background: var(--white); color: var(--electric-blue);
  box-shadow: var(--shadow-soft); transform: translateY(-1px);
}
.pagination .pagination-current {
  background: var(--grad); color: var(--white);
  box-shadow: 0 6px 16px var(--glow-purple);
}
.pagination .pagination-ellipsis {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 40px; color: var(--text-2);
}
.pagination-prev, .pagination-next {
  font-weight: 600; padding-inline: 16px !important; color: var(--electric-blue) !important;
}
.pagination-prev:hover, .pagination-next:hover { background: var(--grad-soft) !important; }

@media (max-width: 480px) {
  .pagination { gap: 4px; padding: 10px; }
  .pagination a, .pagination .pagination-current { min-width: 34px; height: 34px; padding: 0 8px; font-size: .85rem; }
  .pagination-prev, .pagination-next { padding-inline: 10px !important; }
}

/* ---- Responsive: match root breakpoints (960px / 680px) ------------------- */
@media (max-width: 960px) {
  .food-hero { grid-template-columns: 1fr; gap: 24px; }
  .food-hero .food-hero-media { order: -1; }
  .article-layout { grid-template-columns: 1fr; gap: 32px; }
  .toc--sticky { position: static; top: auto; }
}

@media (max-width: 680px) {
  .crumbs ol { font-size: .8rem; }
  .prevnext { flex-direction: column; }
  .prevnext-link.next { text-align: left; align-items: flex-start; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
  .letter-group ul { columns: 1; }
  .search-box { flex-direction: column; }
  .search-box input[type="search"],
  .search-box input[type="text"] { width: 100%; }
}

/* ==========================================================================
   Learn additions: in-body figures, quiz, share buttons, section hubs.
   Additive only; reuses existing brand tokens (--grad, --electric-blue,
   --violet, --cyan, --magenta, --surface, --border, --ink, --ink-soft,
   --r-*, --shadow-*, --glow-*, --font-display). No token redefinitions.
   ========================================================================== */

/* ---- In-body article figure (.article-figure) ----------------------------- */
.article-figure { margin: 24px 0 26px; max-width: 100%; }
.article-figure .img-content,
.article-figure .img-fallback { width: 100%; }
.article-figure figcaption {
  margin-top: 8px; font-size: .82rem; color: var(--text-2); font-style: italic;
}

/* ---- Quiz (.quiz) --------------------------------------------------------- */
.quiz {
  max-width: 72ch; margin: 44px 0; padding: 28px 26px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-soft);
  scroll-margin-top: 88px; position: relative; overflow: hidden;
}
.quiz::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--grad);
}
.quiz-head { margin-bottom: 18px; }
.quiz-title { margin: 2px 0 6px; }
.quiz-sub { color: var(--ink-soft); font-size: .95rem; margin: 0; }

.quiz-scorebar { margin-top: 16px; }
.quiz-progress {
  height: 8px; border-radius: var(--r-pill); background: var(--border);
  overflow: hidden; margin-bottom: 8px;
}
.quiz-progress-fill {
  display: block; height: 100%; width: 0; border-radius: var(--r-pill);
  background: var(--grad); transition: width .35s ease;
}
.quiz-score {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: .88rem; color: var(--violet);
}

.quiz-q { padding: 6px 0 4px; }
/* One-at-a-time flow: hidden until revealed; collapsed once answered+advanced,
   so the page stays short and only the current question is on screen. */
.quiz-q.is-hidden { display: none; }
.quiz-q.is-done { display: none; }
.quiz-q-text { margin: 0 0 16px; }
.quiz-q-num {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--violet); margin-bottom: 6px;
}
.quiz-q-body {
  display: block; font-family: var(--font-display); font-weight: 600;
  color: var(--ink); font-size: 1.12rem; line-height: 1.45;
}
/* "Pass — I'm not sure": quiet, low-emphasis so it never competes with the
   answer options, but still clearly tappable. */
.quiz-passrow { margin-top: 14px; }
.quiz-pass {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .88rem;
  color: var(--text-2); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--border); transition: color .15s ease;
}
.quiz-pass:hover { color: var(--violet); text-decoration-color: var(--violet); }

/* Auto-advance countdown: a linear bar that fills over 5s before the next
   question appears, with an appealing gradient button to skip the wait. */
.quiz-advance {
  display: flex; align-items: center; gap: 14px; margin-top: 18px;
}
.quiz-count {
  flex: 1 1 auto; height: 8px; border-radius: var(--r-pill);
  background: var(--border); overflow: hidden;
}
.quiz-count-fill {
  display: block; height: 100%; width: 0; border-radius: var(--r-pill);
  background: var(--grad); box-shadow: 0 0 10px var(--glow-blue);
}
@media (prefers-reduced-motion: reduce) {
  .quiz-count-fill { transition: none !important; width: 100% !important; }
}

/* Gradient pill buttons for quiz actions — brighter and more inviting than the
   plain ghost button. Reuses the site's brand gradient + purple glow. */
.quiz-next, .quiz-restart {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: nowrap; cursor: pointer; border: 0;
  padding: 11px 22px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  color: #fff; background: var(--grad); background-size: 160% 160%;
  box-shadow: 0 8px 20px var(--glow-purple);
  transition: transform .15s ease, box-shadow .15s ease, background-position .4s ease;
}
.quiz-next:hover, .quiz-restart:hover {
  transform: translateY(-2px); background-position: 100% 50%;
  box-shadow: 0 12px 26px var(--glow-purple);
}
.quiz-next:active, .quiz-restart:active { transform: translateY(0); }
.quiz-next:focus-visible, .quiz-restart:focus-visible {
  outline: 3px solid var(--electric-blue); outline-offset: 3px;
}

/* Restart control lives OUTSIDE the quiz card and only appears once finished. */
.quiz-actions { display: flex; justify-content: center; max-width: 72ch; margin: 18px 0 8px; }
.quiz-actions[hidden] { display: none; }

/* Score chart shown at the end (donut + per-question dots). */
.quiz-chart {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  justify-content: center; text-align: left;
}
.quiz-donut { flex: 0 0 auto; width: 132px; height: 132px; }
.quiz-donut svg { width: 100%; height: 100%; }
.quiz-donut-track { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 12; }
.quiz-donut-value {
  fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round;
  transition: stroke-dasharray .8s ease;
}
.quiz-donut-pct { fill: #fff; font-family: var(--font-display); font-weight: 700; font-size: 26px; text-anchor: middle; }
.quiz-donut-frac { fill: rgba(255,255,255,.85); font-family: var(--font-display); font-weight: 600; font-size: 13px; text-anchor: middle; }
.quiz-chart-body { min-width: 0; flex: 1 1 220px; }
.quiz-result-verdict { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 0 0 4px; color: #fff; }
.quiz-legend { display: flex; gap: 18px; margin: 12px 0 10px; flex-wrap: wrap; }
.quiz-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; color: rgba(255,255,255,.92); }
.quiz-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.quiz-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.4); }
.quiz-dot.is-correct { background: #6BE7A6; }
.quiz-dot.is-wrong { background: #FF9DB0; }

.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--white); color: var(--ink-soft); font-family: inherit;
  font-size: .96rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.quiz-option:hover:not(:disabled) {
  border-color: var(--cyan); box-shadow: var(--shadow-soft); transform: translateY(-1px);
}
.quiz-option:disabled { cursor: default; }
.quiz-option-key {
  flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--grad-soft); color: var(--electric-blue);
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
}
.quiz-option-text { min-width: 0; }
.quiz-option.is-correct {
  border-color: #BFE9D3; background: #E4F6EE; color: #0A6E30;
}
.quiz-option.is-correct .quiz-option-key { background: #0A8A3A; color: #fff; }
.quiz-option.is-wrong {
  border-color: #F2C6C6; background: #FBE7E7; color: #A02323;
}
.quiz-option.is-wrong .quiz-option-key { background: #A02323; color: #fff; }

.quiz-explain {
  margin: 12px 0 0; padding: 10px 14px; font-size: .9rem; color: var(--ink-soft);
  background: var(--grad-soft); border-radius: var(--r); border-left: 3px solid var(--cyan);
}
.quiz-explain strong { color: var(--ink); }

.quiz-result {
  margin-top: 22px; padding: 20px 22px; border-radius: var(--r-lg);
  background: var(--grad); color: #fff; text-align: center;
  box-shadow: 0 10px 26px var(--glow-purple);
}
.quiz-result-score { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin: 0 0 4px; color: #fff; }
.quiz-result-msg { margin: 0; color: rgba(255,255,255,.92); }
.quiz-result:focus { outline: none; }

.quiz-noscript { color: var(--text-2); font-size: .9rem; margin: 8px 0 0; }

/* ---- Share buttons (.share) ----------------------------------------------- */
.share {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  max-width: 72ch; margin: 32px 0; padding: 16px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.share-label {
  font-family: var(--font-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
}
.share-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--white); color: var(--ink-soft); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .86rem;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.share-btn:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-soft);
  border-color: var(--cyan); color: var(--electric-blue);
}
.share-btn svg { flex: 0 0 auto; }
.share-btn--facebook:hover { color: #1877F2; border-color: #1877F2; }
.share-btn--x:hover { color: var(--ink); border-color: var(--ink); }
.share-btn--whatsapp:hover { color: #25D366; border-color: #25D366; }
.share-btn--linkedin:hover { color: #0A66C2; border-color: #0A66C2; }
.share-btn--copy.is-copied {
  color: #0A8A3A; border-color: #BFE9D3; background: #E4F6EE;
}

/* ---- Learn section hub links in the index (.article-body-ish h2 links) ----- */
.container > h2 > a { color: inherit; text-decoration: none; }
.container > h2 > a:hover { color: var(--electric-blue); }

@media (max-width: 680px) {
  .quiz { padding: 22px 18px; }
  .share { gap: 10px; }
  .share-btn span:not(.share-copy-label) { display: none; }
}

/* ==========================================================================
   CRO groundwork additions: hero CTA slot, compact trust badges, mobile
   sticky CTA bar. Additive only; reuses existing brand tokens.
   ========================================================================== */

/* ---- Hero inline CTA slot (.food-hero-cta) --------------------------------
   Sits inside .food-hero-body, under the lead paragraph and above the
   .stat-grid. Wraps a .btn + optional small micro-copy line. */
.food-hero-cta { margin-top: 22px; }
.food-hero-cta .btn { margin-bottom: 8px; }
.food-hero-cta-note { font-size: .82rem; color: var(--text-2); margin: 0; }

/* ---- Trust badges (.trust-badges / .trust-badge) --------------------------
   Compact, lightweight trust-signal chips — an inline row of small pills
   with an icon + short text. Distinct from the heavier .trust-grid/.card
   layout used on the home page; meant to sit near a TOC or hero without
   competing with it. Wraps on narrow viewports. */
.trust-badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-block: 18px;
}
.trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap;
}
.trust-badge svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--electric-blue); }

/* ---- Blog mobile sticky CTA bar (.blog-sticky-bar) -------------------------
   Bottom-fixed mobile CTA bar, visually inspired by root .sticky-bar
   (backdrop blur, top shadow, slide-in transform) but blog-specific: kept
   under its own class name since content/behavior coupling differs. Hidden
   by default; JS toggles the .show modifier. Mobile-only via the same
   680px breakpoint already used elsewhere in this file. */
.blog-sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  background: rgba(255,255,255,.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border); box-shadow: 0 -8px 30px rgba(10,42,138,.08);
  transform: translateY(120%); opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  padding: 12px 0;
}
.blog-sticky-bar.show { transform: translateY(0); opacity: 1; }
.blog-sticky-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.blog-sticky-bar-text { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: .92rem; }
.blog-sticky-bar-text small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--text-2); font-size: .78rem; }

@media (max-width: 680px) {
  .blog-sticky-bar { display: block; }
}