.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 5px;
    font-size: var(--fs-sm);
    line-height: 1.2;
    font-weight: 500;
    background-color: #f1f5f9;
    color: var(--text-muted);
    height: 32px;
}

a.badge {
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
a.badge:hover {
    filter: brightness(0.96);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06) inset;
}

.badge.badge_notation { background-color: rgb(244 244 244); color: #616161; border: 1px solid var(--text-muted); }

.badge.badge_SFA { background-color: #fef7e9; color: #cb9200; border: 1px solid #cb9200; }
.badge.badge_MUFA { background-color: #fef0e9; color: #d97228; border: 1px solid #d97228; }
.badge.badge_PUFA { background-color: #ede9fe; color: #6d28d9; border: 1px solid #6d28d9; }
.badge.badge_BCFA { background-color: #e8fff4; color: #00b981; border: 1px solid #00b981; }
.badge.badge_FuFA { background-color: #e8fffd; color: #00b9a3; border: 1px solid #00b9a3; }
.badge.badge_CYFA { background-color: #fdeef2; color: #be185d; border: 1px solid #be185d; }
.badge.badge_OXFA { background-color: #fdeef2; color: #be185d; border: 1px solid #be185d; }
.badge.badge_NFA  { background-color: #fdeef2; color: #be185d; border: 1px solid #be185d; }

.badge.badge_essential { background: rgb(224 251 221);  color: #00a003;  border: 1px solid #00a003; }

.badge.badge_TRA  { background-color: #ede9fe; color: #6d28d9; border: 1px solid #6d28d9; }
.badge_trans        { background-color: #ede9fe; color: #6d28d9; border: 1px solid #6d28d9; }
.badge.badge_iTrans  { background-color: #fdeef2; color: #be185d; border: 1px solid #be185d; }
.badge.badge_industrial  { background-color: #fdeef2; color: #be185d; border: 1px solid #be185d; }
.badge.badge_rTrans  { background-color: rgb(224 251 221);  color: #00a003;  border: 1px solid #00a003; }
.badge.badge_riTrans  { background-color: #fff3e0; color: #b45309; border: 1px solid #b45309; }
.badge.badge_cis { background-color: rgb(215 223 214);  color: #4d6e4e;  border: 1px solid #4d6e4e; }

.badge.badge-omega-3 {  background-color: rgb(224 251 221);  color: #00a003;  border: 1px solid #00a003; }
.badge.badge-omega-6 {  background-color: #feeee9; color: #d95128; border: 1px solid #d94828; }
.badge.badge-omega-5,
.badge.badge-omega-7,
.badge.badge-omega-9,
.badge.badge-omega-8,
.badge.badge-omega-11 {  background-color: rgb(221 242 239);  color: #0e8a7d;  border: 1px solid #0e8a7d; }

.badge-conj { background-color: #ede9fe; color: #6d28d9; border: 1px solid #6d28d9; }
.badge_conjugation  { background-color: #ede9fe; color: #5b21b6; border: 1px solid #6d28d9; }
.badge-iso { background-color: transparent; color: var(--text-muted, #6b7280);     border: 1px solid var(--border-color, #d1d5db);  }

/* Oxidation risk — Low / Medium / High, banded on the bis-allylic count by
   OxidationStats::bandKey(). --veryhigh is kept only so any older markup still
   renders; nothing generates it now. */
.fad-ox-band--low      { background: #dcfce7; color: #15803d; }
.fad-ox-band--medium   { background: #ffedd5; color: #c2410c; }
.fad-ox-band--high     { background: #fee2e2; color: #b91c1c; border: 1px solid #e7b4b4; }
.fad-ox-band--veryhigh { background: #fee2e2; color: #b91c1c; border: 1px solid #888888; }
/* "Not rated" — the model does not apply (conjugated fatty acids). Neutral on
   purpose: this is an absence of a verdict, not a low one. */
.fad-ox-band--unrated  { background: #eef1f4; color: #475569; border: 1px solid #cbd5e1; }

body.dark-mode {
    .badge.badge_notation { background-color: #4d4d4d; color: #dcdcdc; border: 1px solid #4d4d4d; }

    .badge.badge_SFA { background-color: #b39341; color: #fef7e9; border: 1px solid #b39341; }
    .badge.badge_MUFA { background-color: #d97228; color: #fef0e9; border: 1px solid #d97228; }
    .badge.badge_PUFA { background-color: #562b98; color: #ede9fe; border: 1px solid #6d28d9; }
    .badge.badge_BCFA { background-color: #00b981; color: #e8fff4; border: 1px solid #00b981; }
    .badge.badge_FuFA { background-color: #00b9a3; color: #e8fffd; border: 1px solid #00b9a3; }
    .badge.badge_CYFA { background-color: #be185d; color: #fdeef2; border: 1px solid #be185d; }
    .badge.badge_OXFA { background-color: #be185d; color: #fdeef2; border: 1px solid #be185d; }
    .badge.badge_NFA  { background-color: #be185d; color: #fdeef2; border: 1px solid #be185d; }

    .badge.badge_TRA  { background-color: #562b98; color: #ede9fe; border: 1px solid #6d28d9; }
    .badge_trans        { background-color: #562b98; color: #ede9fe; border: 1px solid #6d28d9; }
    .badge.badge_iTrans  { background-color: #be1818; color: #fdeef2; border: 1px solid #be1818; }
    .badge.badge_industrial  { background-color: #fdeef2; color: #be185d; border: 1px solid #be185d; }
    .badge.badge_rTrans  { background-color: #00a003;  color: rgb(194 255 185);  border: 1px solid #00a003; }
    .badge.badge_riTrans  { background-color: #b45309; color: #ffe6c7; border: 1px solid #b45309; }
    .badge.badge_cis { background-color:  rgb(215 223 214); color: #4d6e4e;  border: 1px solid #4d6e4e; }

    .badge.badge-omega-3 {  background-color: #00a003;  color: rgb(151 255 137);  border: 1px solid #00a003; }
    .badge.badge-omega-6 {  background-color: #d94328; color: #fab8a4; border: 1px solid #d94328; }
    .badge.badge-omega-5,
    .badge.badge-omega-7,
    .badge.badge-omega-9,
    .badge.badge-omega-8,
    .badge.badge-omega-11 {  background-color: #1e6e65;  color: rgb(139 227 213);  border: 1px solid #0e8a7d; }

    .badge.badge_essential { background-color: #00a003;  color: rgb(151 255 137);  border: 1px solid #00a003; }
    .badge.badge-danger { background-color: rgba(239, 68, 68, 0.15); color: var(--accent-danger); border: 1px solid var(--accent-danger); }

    .badge-conj  { background-color: #562b98; color: #ede9fe; border: 1px solid #6d28d9; }
    .badge_conjugation  { background-color: #562b98; color: #ede9fe; border: 1px solid #6d28d9; }
    .badge-iso { background-color: #4d4d4d; color: #dcdcdc; border: 1px solid #4d4d4d; }

    .fad-ox-band--low      { background: #14532d; color: #bbf7d0; }
    .fad-ox-band--medium   { background: #7c2d12; color: #fed7aa; }
    .fad-ox-band--high     { background: #7f1d1d; color: #fecaca; border-color: #a35252; }
    .fad-ox-band--veryhigh { background: #7f1d1d; color: #fecaca; }
    .fad-ox-band--unrated  { background: #2b3239; color: #c3ccd6; border-color: #414c56; }

}

.badge-ok      { background: #dcfce7; color: #166534; }
.badge-warn    { background: #fef9c3; color: #854d0e; }
.badge-info    { background: #dbeafe; color: #1e40af; }
.badge-inferred    { background: #cfcaca; color: #616161; }
.badge-neutral { background: var(--bg-level-3); color: var(--text-main); }
.badge.badge-danger { background: rgba(239, 68, 68, 0.15); color: var(--accent-danger); border: 1px solid var(--accent-danger); }

body.dark-mode {
    .badge.badge-ok      { background: #14532d; color: #bbf7d0; }
    .badge.badge-warn    { background: #4d3b09; color: #fde68a; }
    .badge-inferred    { background: #cfcaca; color: #3e3e3e; }
    .badge.badge-info    { background: #1e3a8a; color: #bfdbfe; }
    .badge.badge-neutral { background: var(--bg-level-3); color: var(--text-main); }
    .badge.badge-danger { background: red; color: white; }
}

.badgeCombo {
    display: inline-flex;
    gap: 0;
    flex-wrap: nowrap;
    vertical-align: middle;
    max-width: max-content;
}
.badgeCombo .badge {
    margin: 0 !important;
    border: 1px solid #888888;
    padding: 0.125rem 0.2rem;
    font-family: monospace;
    white-space: nowrap;
    border-radius: 0;
}
.badgeCombo .badge:first-child {
    border-radius: 5px 0 0 5px;
}
.badgeCombo .badge:not(:last-child) {
    border-right: 0;
}
.badgeCombo .badge:last-child {
    border-radius: 0 5px 5px 0;
}
.badgeCombo .badge:only-child {
    border-radius: 5px;
    border-right: 1px solid #888888;
}

.segRadius {
    border-radius: 0;
}
.segRadius > *:first-child {
    border-radius: 5px 0 0 5px;
}
.segRadius > *:last-child {
    border-radius: 0 5px 5px 0;
}

.segBadges {
    border: 1px solid #888888;
    border-radius: 5px;
}
.segBadges > * {
    position: relative;
    border-width: 0;
    border-right-width: 1px;
    border-radius: 0;
    border-style: solid;
    border-color: #888888;
}
.segBadges > *:first-child {
    border-radius: 5px 0 0 5px;
}
.segBadges > *:last-child {
    border-right-width: 0;
    border-radius: 0 5px 5px 0;
}
.segBadges > *:first-child:last-child {
    border-radius:5px;
}

.sourceIconGroups {
    display: inline-flex; flex-wrap: nowrap; white-space: nowrap;
    align-items: center; gap: 12px; vertical-align: middle;
}

.sourceIcons {
    display: inline-flex; flex-wrap: nowrap; white-space: nowrap; align-items: center;
}
.sourceIcons div {
    width: 32px; height: 32px;
    object-fit: contain; vertical-align: middle; flex: 0 0 auto;
    background-size: contain;
}

.sourceIcon_Plants { background-image: url('/fadb/assets_ui/images/sources/Plant.png'); }
.sourceIcon_VegOils { background-image: url('/fadb/assets_ui/images/sources/Oils.png'); }
.sourceIcon_FruitOils { background-image: url('/fadb/assets_ui/images/sources/FruitOils.png'); }
.sourceIcon_Meat { background-image: url('/fadb/assets_ui/images/sources/Meat.png'); }
.sourceIcon_Industrial { background-image: url('/fadb/assets_ui/images/sources/Industrial.png'); }
.sourceIcon_Ruminant { background-image: url('/fadb/assets_ui/images/sources/Ruminant.png'); }
.sourceIcon_Dairy { background-image: url('/fadb/assets_ui/images/sources/Dairy.png'); }
.sourceIcon_Eggs { background-image: url('/fadb/assets_ui/images/sources/Eggs.png'); }
.sourceIcon_Marine { background-image: url('/fadb/assets_ui/images/sources/Marine.png'); }
.sourceIcon_Fungi { background-image: url('/fadb/assets_ui/images/sources/Fungus.png'); }

.sourceIcon_Synthesis  { background-image: url('/fadb/assets_ui/images/sources/Synthesis.png'); }
.sourceIcon_Microbiome { background-image: url('/fadb/assets_ui/images/sources/Microbiome.png'); }

.sourceIcons div.off { opacity: 0.3; filter: grayscale(1); border-color: #222222;  }

/* Icons render diet RELEVANCE, not abundance level; nothing emits a .trace class.
   If abundance ever needs a mark, make it a corner badge in the .si-* family
   (absolute, 15px, bottom/right) - never :after content in the box. */

.sourceIcons div { position: relative; }
/* Negligible: fade the icon art itself (blended, not opacity) so the corner
   "T" trace badge stays readable instead of fading out with its parent. */
.sourceIcons div.dr-negligible {
    filter: grayscale(1);
    background-color: rgba(255, 255, 255, 0.72);
    background-blend-mode: lighten;
}
.sourceIcons .si-arrow {
    position: absolute; bottom: -4px; right: -4px; width: 15px; height: 15px;
    border-radius: 50%; border: 1px solid #fff; font-size: 12px; font-weight: 900;
    line-height: 13px; text-align: center; box-sizing: border-box; pointer-events: none;
    z-index: 10;
}
.sourceIcons .si-up   { color: #fff; background: #16a34a; }
.sourceIcons .si-down { color: #fff; background: #d97706; }
/* arrow head is an SVG chevron (crisper than a ↑ glyph at this size);
   .si-dbl = double chevron for relevance "high". */
.sourceIcons .si-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sourceIcons .si-arrow svg path {
    fill: none; stroke: currentColor; stroke-width: 2.1;
    stroke-linecap: round; stroke-linejoin: round;
}
.sourceIcons .si-dbl svg path { stroke-width: 1.9; }
.sourceIcons .si-down svg { transform: rotate(180deg); transform-origin: 50% 50%; }
/* "T" = trace / negligible. Stroked as SVG like the chevrons so both bars have
   the same weight (a bold font glyph renders the crossbar heavier than the stem). */
.sourceIcons .si-trace {
    position: absolute; bottom: -4px; right: -4px; width: 15px; height: 15px;
    border-radius: 50%; border: 1px solid #fff; box-sizing: border-box;
    background: #cbd5e1; color: #475569; pointer-events: none;
    z-index: 10;
}
.sourceIcons .si-trace svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sourceIcons .si-trace svg path {
    fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round;
}
.sourceIcons .si-exc {
    position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 1px;
    background: #2563eb; color: #fff; border-radius: 50%; font-size: 12px; font-weight: 800;
    line-height: 13px; text-align: center; border: 1px solid #fff; box-sizing: border-box; cursor: help;
    z-index: 10;
}

.fa-sources-table .src-rel { display:inline-block; padding:.03rem .45rem; border-radius:4px; font-size:var(--fs-2xs); font-weight:700; text-transform:capitalize; }
.src-rel-high{background:#16a34a;color:#fff;} .src-rel-moderate{background:#65a30d;color:#fff;}
.src-rel-low{background:#eab308;color:#422006;} .src-rel-negligible{background:#e2e8f0;color:#64748b;} .src-rel-endogenous{background:#ede9fe;color:#6b21a8;}
.fa-sources-table .src-note-list { margin:.2rem 0 0; padding-left:1rem; font-size:var(--fs-sm); color:#475569; }
.fa-sources-table .src-note-list li { margin:.05rem 0; line-height:1.4; }
/* The card is one <tbody> per category; the Category / Relevance / Level cells
   rowspan the whole group, and every text row gets its own Refs cell so a
   reference sits on the line of the claim it supports. */
/* Table geometry (widths, vertical-align, wrapping) lives in
   pages/fa_info/fa_info.css, which loads after this file and owns the card's
   layout. Only the note-tier LOOK is set here. */
.fa-sources-table .src-cat .sourceIcons,
.fa-sources-table .src-cat .sourceIconGroups { vertical-align: top; }
.fa-sources-table .src-text { padding-top:.4rem; padding-bottom:.4rem; line-height:1.5; }
.fa-sources-table tbody.src-cat-group + tbody.src-cat-group td { border-top:1px solid #e2e8f0; }
.fa-sources-table .src-divider-row .src-text { padding-bottom:.1rem; }
.fa-sources-table .src-ranges { color:#64748b; font-size:var(--fs-2xs); }
/* "Exceptions:" divider - informational blue, matching the .si-exc "E" badge. */
.fa-sources-table .src-exc-title {
    margin:.4rem 0 .1rem; padding-top:.3rem; border-top:1px solid #dbeafe;
    font-size:var(--fs-2xs); font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; color:#2563eb;
}
.fa-sources-table .src-exc-note { color:#1e40af; font-style:normal; }
/* publish:"collapsed" notes - their rows are hidden until the group's "more"
   checkbox is ticked. :has() scopes the reveal to ONE category's <tbody>, so a
   toggle never opens another category's rows. */
.fa-sources-table tr.src-collapsed { display:none; }
.fa-sources-table tbody.src-cat-group:has(.src-more-cb:checked) tr.src-collapsed { display:table-row; }
.fa-sources-table .src-more-cb { position:absolute; opacity:0; width:0; height:0; }
.fa-sources-table .src-more-lbl { cursor:pointer; font-size:var(--fs-2xs); color:#2563eb; }
.fa-sources-table .src-more-lbl > span::before { content:"+ "; font-weight:700; }
.fa-sources-table tbody.src-cat-group:has(.src-more-cb:checked) .src-more-lbl > span::before { content:"- "; }
.fa-sources-table .src-more-row .src-text { padding-top:.1rem; }

.metSetTags {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    vertical-align: middle;
}
.metSetTag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: var(--fs-xs);
    line-height: 1;
    flex-shrink: 0;
}
.metSetTag--peroxidation { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.metSetTag--cooking      { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.metSetTag--shelflife    { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }

body.dark-mode {
    .metSetTag--peroxidation { background: #1e3a8a; color: #bfdbfe; border-color: #1d4ed8; }
    .metSetTag--cooking      { background: #7c2d12; color: #fed7aa; border-color: #c2410c; }
    .metSetTag--shelflife    { background: #4c1d95; color: #ddd6fe; border-color: #6d28d9; }
}