/* see CLAUDE_notes.md */
.fap-sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
    gap: 1.5rem;
}

.fap-group-heading { grid-column: 1 / -1; }

.card.col-full { grid-column: 1 / -1; }

.card-title .card-title-count {
    font-weight: 400;
    color: var(--text-muted);
    font-size: var(--fs-md);
}

.card-intro {
    font-size: var(--fs-md);
    color: var(--text-muted);
    margin: 0.5rem 0 1rem;
}

:root {
    --isomer-expand-bg: #eef2f7;
    --isomer-source-bg: #ffffff;
}
body.dark-mode {
    --isomer-expand-bg: #1b2536;
    --isomer-source-bg: #243044;
}

.isomers-table { width: 100%; }

.isomers-table .col-chevron  { width: 28px; }
.isomers-table .col-geometry { font-family: monospace; font-size: var(--fs-md); white-space: nowrap; }
.isomers-table .col-nowrap   { white-space: nowrap; }

.isomer-row.is-current  { background: var(--bg-level-2); }
.isomer-row.is-expanded { background: var(--isomer-expand-bg); }

.isomer-toggle-cell {
    width: 28px;
    text-align: center;
    cursor: pointer;
}

.isomer-chevron {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    transition: transform 0.15s;
}
.isomer-row.is-expanded .isomer-chevron { transform: rotate(90deg); }

.isomer-name       { font-weight: 600; }
.isomer-sys-name {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.2;
}

.isomer-link {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}
.isomer-link:hover { text-decoration: underline; }

.isomer-ext-link {
    font-family: monospace;
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--primary-color);
    text-decoration: none;
    white-space: nowrap;
}
.isomer-ext-link:hover { text-decoration: underline; }
.isomer-ext-link i {
    font-size: var(--fs-2xs);
    margin-left: 4px;
}

.isomer-badge-sm { font-size: var(--fs-2xs); }

.isomer-mini-cell {
    min-width: 160px;
    padding: 4px 8px;
}
.isomer-mini-render {
    display: block;
    width: 100%;
}

.isomer-section-row > td {
    padding: 0.5rem 0.75rem;
    background: var(--table-header-bg);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.isomer-section-row.is-current > td { color: var(--primary-color); }

.isomer-section-count {
    font-weight: 400;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.isomer-detail-row { display: none; }
.isomer-detail-row.is-open { display: table-row; }

.isomer-detail-cell {
    padding: 1.25rem 1.5rem;
    background: var(--isomer-expand-bg);
}

.isomer-props-table {
    width: 100%;
    font-size: var(--fs-sm);
    margin-bottom: 1.25rem;
    background: var(--isomer-source-bg);
}
.isomer-props-table tr { background: var(--isomer-source-bg); }
.isomer-props-table th,
.isomer-props-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
}
.isomer-props-table th {
    width: 22%;
    text-align: left;
    background: var(--isomer-source-bg);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    vertical-align: top;
}
.isomer-props-table tr:last-child th,
.isomer-props-table tr:last-child td { border-bottom: none; }

.isomer-desc { font-style: italic; line-height: 1.5; }

.isomer-smiles {
    font-family: monospace;
    font-size: var(--fs-sm);
    padding: 0.15rem 0.4rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

.isomer-origins-title {
    margin: 0 0 0.5rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.isomer-origins-table {
    width: 100%;
    font-size: var(--fs-sm);
    background: var(--isomer-source-bg);
}
.isomer-origins-table tr,
.isomer-origins-table th { background: var(--isomer-source-bg); }
.isomer-origins-table .col-origin  { width: 25%; }
.isomer-origins-table .col-type    { width: 15%; }
.isomer-origins-table .col-details { width: 60%; }
.isomer-origins-table td.origin-source { font-weight: 600; }

.isomer-origins-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.badge.origin-cooking {
    background: var(--accent-omega6);
    color: #fff;
}

.isomer-type-geometric  { background: #e0f2fe; color: #075985; }
.isomer-type-positional { background: #fce7f3; color: #9d174d; }
body.dark-mode .isomer-type-geometric  { background: #082f49; color: #7dd3fc; }
body.dark-mode .isomer-type-positional { background: #500724; color: #fbcfe8; }

#card-overview .ov-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 980px) {
    #card-overview .ov-grid { grid-template-columns: 1fr; }
}

#card-overview .statsgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}
@media (max-width: 1200px) { #card-overview .statsgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px)  { #card-overview .statsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "See more" links reveal on hover of their own block — Stats and the
   "Also known as" sub-block each gate their own link. */
#card-overview .ov-stats .ov-jump,
#card-overview .ov-subblock .ov-jump {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s, transform .15s;
}
#card-overview .ov-stats:hover .ov-jump,
#card-overview .ov-stats:focus-within .ov-jump,
#card-overview .ov-subblock:hover .ov-jump,
#card-overview .ov-subblock:focus-within .ov-jump {
    opacity: 1;
    transform: none;
}
/* Touch / small screens: no hover to discover them with, so always show. */
@media (hover: none) {
    #card-overview .ov-stats .ov-jump,
    #card-overview .ov-subblock .ov-jump { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
    #card-overview .ov-stats .ov-jump,
    #card-overview .ov-subblock .ov-jump { opacity: 1; transform: none; }
}
#card-overview .stat {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.7rem 0.5rem;
    text-align: center;
    min-width: 0;
}
#card-overview .stat .sv {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}
#card-overview .stat .sv.mono {
    font-family: monospace;
    font-size: var(--fs-md);
}
#card-overview .stat .sv sub {
    font-size: 0.7em;
    line-height: 0;
    vertical-align: baseline;
    bottom: -0.25em;
    position: relative;
}
#card-overview .stat .sv.missing {
    color: #bbb;
    font-style: italic;
    font-weight: 500;
}
#card-overview .stat .sl {
    font-size: var(--fs-3xs);
    color: var(--text-muted);
    margin-top: 0.25rem;
    line-height: 1.3;
}
#card-overview .ov-block {
    min-width: 0;
}
/* The rule under the heading belongs to the WHOLE head row, not to the <h4>.
   On the h4 it stopped short of the right edge, because the "See more" button
   is a flex sibling that takes width whether or not it is currently visible. */
#card-overview .ov-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.35rem;
}
#card-overview .ov-block-head h4 {
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    flex: 1;
}
#card-overview .ov-jump {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.5rem;
    color: var(--primary-color);
    cursor: pointer;
    font-size: var(--fs-2xs);
    text-decoration: none;
    white-space: nowrap;
    align-self: center;
}
#card-overview .ov-jump:hover { text-decoration: underline; }
#card-overview .ov-jump i { font-size: 0.7em; margin-left: 2px; }

.ov-idlink { color: var(--primary-color); text-decoration: none; }
.ov-idlink:hover { text-decoration: underline; }
.ov-idlink-icon { font-size: 0.65em; opacity: .55; }

.ov-subblock { margin-top: 1.25rem; }

/* ─── Models block ────────────────────────────────────────────────────────── */
#card-overview .ov-model-card {
    --ovm-surface: var(--card-bg, #fff);
    --ovm-paper:   var(--bg-body, #edf0ef);
    --ovm-ink:     var(--text-main, #10201d);
    --ovm-soft:    var(--text-muted, #5a6b68);
    --ovm-rule:    var(--border-color, #cbd4d2);
    --ovm-focus:   var(--accent-color, #b8532e);

    background: var(--ovm-surface);
    border: 1px solid var(--ovm-rule);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

#card-overview .ov-model-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 14px;
    border-bottom: 1px solid var(--ovm-rule);
}

/* A <button>, not a <span> — the title is one of the three ways in — but it has
   to read as the biosyn card's .card-title, so every button default is undone. */
#card-overview .ov-model-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: monospace;
    font-size: var(--fs-2xs);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ovm-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#card-overview .ov-model-icons { display: flex; gap: 3px; margin-left: auto; }

#card-overview .ov-model-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--ovm-soft);
}
/* Sizing only. ToolIcons symbols are FILLED paths and take their colour from
   .toolIcon in toolIcons.css — do not add fill or stroke here. */
#card-overview .ov-model-icon svg { width: 15px; height: 15px; }

#card-overview .ov-model-icon:hover,
#card-overview .ov-model-card:hover .ov-model-icon {
    background: var(--ovm-paper);
    color: var(--ovm-ink);
    border-color: var(--ovm-rule);
}
#card-overview .ov-model-card:hover .ov-model-title { color: var(--ovm-ink); }

#card-overview .ov-model-title:focus-visible,
#card-overview .ov-model-icon:focus-visible {
    outline: 2px solid var(--ovm-focus);
    outline-offset: 2px;
}

#card-overview .ov-2d-frame {
    position: relative;
    height: 260px;
    padding: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--ovm-surface);
}
#card-overview .ov-2d-frame .fm2d-mini { width: 100%; }

#card-overview .ov-rows {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
#card-overview .ov-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: var(--fs-sm);
    padding: 0.28rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 4px;
    transition: background-color .12s;
}
#card-overview .ov-row:hover { background-color: rgba(0, 123, 255, 0.07); }
#card-overview .ov-row--top { align-items: flex-start; }
#card-overview .ov-label {
    color: var(--text-muted);
    white-space: nowrap;
}
#card-overview .ov-value {
    text-align: right;
    word-break: break-word;
    font-family: inherit;
}
#card-overview .ov-value.mono {
    font-family: monospace;
    word-break: break-all;
    font-size: var(--fs-sm);
}
#card-overview .ov-value.missing {
    color: #bbb;
    font-style: italic;
}
#card-overview .ov-value--iupac { font-size: var(--fs-sm); }
#card-overview .ov-value--wide { max-width: 65%; }
#card-overview .ov-value--danger { color: var(--accent-danger); font-weight: 600; }

.ov-note { color: var(--text-muted); font-size: var(--fs-sm); }
.ov-note-sm { color: var(--text-muted); font-size: var(--fs-xs); }

#card-overview .ov-synonyms-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--primary-color);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-family: inherit;
}
#card-overview .ov-synonyms-link:hover { text-decoration: underline; }
#card-overview .ov-synonyms-link i { font-size: 0.7em; margin-left: 4px; }

#card-overview .ov-sources {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}
#card-overview .ov-sources-empty {
    padding: 0.85rem 1rem;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    text-align: center;
}

#card-overview .ov-isomers-line {
    font-size: var(--fs-sm);
    padding: 0.28rem 0.5rem;
    margin: 0 -0.5rem;
}
#card-overview .ov-isomers-count {
    font-weight: 600;
    color: var(--text-main);
}

main.navMode_tabs #section-structure:not(.active),
main.navMode_menu #section-structure:not(.active) {
    display:         block           !important;
    position:        fixed           !important;
    left:            -9999px         !important;
    top:             0               !important;
    width:           800px           !important;
    visibility:      hidden          !important;
    pointer-events:  none            !important;
}

.mdl-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1rem;
}
.mdl-tab-btn {
    padding: 0.7rem 1.6rem;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-md);
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    margin-bottom: -2px;
}
.mdl-tab-btn.active {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
}

.mdl-tab-body { position: relative; min-height: 600px; }

.mdl-tab-pane {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.mdl-tab-pane.active { opacity: 1; pointer-events: auto; }
.mdl-tab-pane--2d { padding: 1rem; overflow: auto; }
.mdl-tab-pane--3d { padding: 0; overflow: hidden; }

.mdl-2d-render { width: 100%; }
.mdl-3d-container { width: 100%; height: 100%; }

.forms-empty {
    padding: 1rem;
    background: var(--bg-body);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}

.forms-class-badge { background: #e0e7ff; color: #3730a3; }
body.dark-mode .forms-class-badge { background: #312e81; color: #c7d2fe; }

.forms-pubchem-link {
    font-size: 0.8em;
    color: var(--accent-primary);
    text-decoration: none;
}

.forms-comp-list {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.forms-comp-other {
    background: var(--bg-body);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.forms-significance-cell { font-size: 0.9em; line-height: 1.4; }

.diet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.diet-section-title { font-size: var(--fs-md); margin-bottom: 1rem; }
.diet-hist-title { font-size: var(--fs-md); margin: 0; }

.diet-hist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.fa-sources-table { width: 100%; table-layout: fixed; }
.fa-sources-table td, .fa-sources-table th { vertical-align: top; }

/* Widths come from CLASSES, not nth-child: the Level column is switchable
   (FAD_Sources::SHOW_LEVEL) and any nth-child index would silently shift to the
   wrong column the moment it is turned off. */
.fa-sources-table thead th.src-col-cat  { width: 4.5rem; }
.fa-sources-table thead th.src-col-rel  { width: 8rem; white-space: nowrap; }
.fa-sources-table thead th.src-col-lvl  { width: 6rem; }
.fa-sources-table thead th.src-col-det  { width: auto; }
.fa-sources-table thead th.src-col-refs { width: 6.5rem; }

/* No .sr-only utility existed in this project, so it is defined here rather
   than assumed - without it the "hidden" label renders as visible text, which
   is the opposite of what the icon-only column is for. */
.fa-sources-table .sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Category is icon-only now; the label is still in the icon title and in
   visually-hidden text for screen readers. */
.fa-sources-table .src-cat { text-align: center; padding-left: .4rem; padding-right: .4rem; }
.fa-sources-table .src-cat .sourceIcons { margin-right: 0; }

/* Info affordance on the Relevance header - opens the shared quick-help popup. */
.fa-sources-table .src-qh {
    display: inline-flex; align-items: center; cursor: help;
    color: var(--text-muted); --toolIcon-size: 1em; margin-left: .15rem;
    vertical-align: -.1em; border-radius: 3px;
}
.fa-sources-table .src-qh:hover,
.fa-sources-table .src-qh:focus-visible { color: var(--primary-color); }
.fa-sources-table { --src-gutter: 1.75rem; --src-indent: 1.15rem; }
.fa-sources-table .src-text {
    white-space: normal; overflow-wrap: anywhere;
    position: relative;                 /* the toggle is absolute within this cell */
    padding-left: var(--src-gutter);
}
.fa-sources-table tr.src-detail .src-text {
    padding-left: calc(var(--src-gutter) + var(--src-indent));
}
.fa-sources-table tr.src-detail { display: none; }
/* Expanding a category reveals its notes, but NOT the publish:"collapsed" ones -
   those stay behind the inner "+ more", which is itself a .src-detail row. Two
   levels: summary -> notes -> footnote notes. */
.fa-sources-table tbody.src-cat-group:has(.src-expand-cb:checked) tr.src-detail:not(.src-collapsed) { display: table-row; }
.fa-sources-table tbody.src-cat-group:has(.src-expand-cb:checked):has(.src-more-cb:checked) tr.src-collapsed { display: table-row; }

/* The label needs a REAL hit area: the arrow itself is a CSS triangle
   (width:0/height:0 + borders), which paints but is unclickable, so the box
   comes from the label. */
/* The toggle leads the Details cell. It is floated into a left gutter so the
   summary text and the note text below it stay on the same left edge. */
/* .src-text-lead marks the row carrying the toggle; the gutter itself is on
   .src-text now so untoggled rows line up too. */
.fa-sources-table .src-expand {
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    width: 1.4em; height: 1.4em; border-radius: 3px; flex: none;
    position: absolute; left: 0; top: .25rem;
}
.fa-sources-table .src-expand:hover { background: rgba(29,78,216,.09); }
.fa-sources-table .src-expand-cb {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.fa-sources-table .src-expand-cb:focus-visible + .src-expand-ico { outline: 2px solid var(--primary-color); outline-offset: 3px; }
/* This holds a real ToolIcon, so this is a box and a colour — the arrow itself
   is drawn by the icon and coloured by currentColor. */
/* Sized the house way - --toolIcon-size in em (see toolIcons.css), NOT a
   font-size override, so it tracks the reader's text scale like every other
   icon on the page. */
.fa-sources-table .src-expand-ico {
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; color: var(--text-muted);
    --toolIcon-size: 1.4em; line-height: 0;
    transition: transform .12s ease; transform-origin: 50% 50%;
}
.fa-sources-table .src-expand:hover .src-expand-ico { color: var(--primary-color); }
.fa-sources-table tbody.src-cat-group:has(.src-expand-cb:checked) .src-expand-ico { transform: rotate(90deg); }

/* Optional note title - a short topic label so a reader can scan a category's
   notes down the left edge instead of reading every sentence. */
.fa-sources-table .src-note-title {
    display: block; font-weight: 700; color: #0f172a;
    font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .03em;
    margin-bottom: .12rem;
}
.fa-sources-table .src-exc-note .src-note-title { color: #1e40af; }
.fa-sources-table .src-text strong { font-weight: 650; }

.fa-sources-table .src-cat .sourceIcons,
.fa-sources-table .src-cat .sourceIconGroups { margin-right: 6px; vertical-align: top; }
.fa-sources-table .src-axis-row td {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); font-weight: 700;
    background: var(--isomer-source-bg); padding-top: 0.6rem;
}
.fa-sources-table .src-refs-cell { text-align: center; white-space: nowrap; }

.fa-sources-table .src-level {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
}
.src-level-major { background: rgba(34,153,84,0.16);  color: #1e874b; }
.src-level-minor { background: rgba(52,120,220,0.14); color: #2f6fd0; }
.src-level-trace { background: rgba(150,150,150,0.16); color: var(--text-muted); }
.src-level-none  { background: transparent; color: var(--text-muted); font-style: italic; }

.fa-sources-notes { margin-top: 0.9rem; font-size: var(--fs-sm); }
.fa-sources-notes-title {
    font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.3rem;
}
.fa-sources-notes ul { margin: 0; padding-left: 1.1rem; }
.fa-sources-notes li { margin: 0.15rem 0; }

.props-label-muted { color: var(--text-muted); }
.props-danger-cell { color: var(--accent-danger); font-weight: bold; }

.card.rankings-col-offset { grid-column: 2 / -1; }

.pageHeader-row .sourceIconGroups { margin: 0 0 0 6px; }

.badge_trans        { background: #fee2e2; color: #991b1b; }
.badge_conjugation  { background: #ede9fe; color: #5b21b6; }
body.dark-mode .badge_trans        { background: #450a0a; color: #fecaca; }
body.dark-mode .badge_conjugation  { background: #2e1065; color: #ddd6fe; }

#section-biosynthesis .bioSynPageContainer { margin-inline: auto; }

#section-biosynthesis .bsf-soon {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 2.5rem 1rem; text-align: center;
    background: var(--bg-body); border: 1px dashed var(--border-color);
    border-radius: 10px;
}
#section-biosynthesis .bsf-soon-icon { font-size: var(--fs-3xl); color: var(--primary-color); opacity: .5; }
#section-biosynthesis .bsf-soon-title { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
#section-biosynthesis .bsf-soon-note {
    margin: 0; max-width: 46ch; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — the FA page below 820px
   ═══════════════════════════════════════════════════════════════════════════
   The grid itself is fixed above (min(500px, 100%)); what is left here is the
   per-card work. Site-wide card padding and .data-table wrapping live in
   fa.css; the page header's badges in coreLayout.css.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 820px) {

    .fap-sections-grid { gap: 1rem; }

    /* Overview ─────────────────────────────────────────────────────────── */
    /* The stats tiles already step down to two columns at 520px; the section
       sub-blocks are what still crowd. */
    #card-overview .ov-subblock { margin-top: 0.9rem; }

    /* Biosynthesis ─────────────────────────────────────────────────────── */
    #section-biosynthesis .fad-bio-col-24pct,
    #section-biosynthesis .fad-bio-col-26pct { width: auto; }

    #section-biosynthesis .fad-bio-table,
    #section-biosynthesis .rt-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #section-biosynthesis .bioSynPageContainer { max-width: 100%; }
    #section-biosynthesis .fad-bio-pills { gap: 0.35rem; }
}

/* ── Sources table: 700px, not 820 ─────────────────────────────────────────── */
@media (max-width: 700px) {
    .fa-sources-table thead th.src-col-det,
    .fa-sources-table td.src-text,
    .fa-sources-table thead th.src-col-lvl,
    .fa-sources-table td.src-lvl-cell { display: none; }

    /* Detail rows exist only to fill the Details column. */
    .fa-sources-table tr.src-detail,
    .fa-sources-table tbody.src-cat-group:has(.src-expand-cb:checked) tr.src-detail:not(.src-collapsed),
    .fa-sources-table tbody.src-cat-group:has(.src-expand-cb:checked):has(.src-more-cb:checked) tr.src-collapsed {
        display: none;
    }

    /* What is left re-splits the width instead of leaving the old Details gap. */
    .fa-sources-table thead th.src-col-cat  { width: 4rem; }
    .fa-sources-table thead th.src-col-rel  { width: auto; white-space: nowrap; }
    .fa-sources-table thead th.src-col-refs { width: 5rem; }
}