.br-page-shell { padding-top: 0; min-height: calc(100vh - 64px); }
.br-flex-stretch { height: 100%; align-items: stretch; }
.br-aside {
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    background: var(--bg-card);
}
.br-main { flex: 1; min-width: 0; padding: var(--spacing-md); background: var(--bg-body); }

.br-page-shell--full { display: block; }
.br-main--full { width: 100%; }

.br-filterbar {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.6rem;
    overflow-x: auto;
}
.scrolledDown .br-filterbar {
    padding: 10px;
}
body:not(.scrolledDown) .br-filterbar {
    margin-bottom: var(--spacing-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
}

.br-filter-trigger { display: none; }

.br-seg {
    display: flex;
    flex-shrink: 0;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-body, #fff);
    width: 100%;
    align-content: stretch;
}

.seg-chip {
    display: inline-flex;
    justify-content: center;
    gap: 0.3rem;
    padding-top: 0.36rem;
    padding-bottom: 0.36rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-color, #334155);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
    flex-grow: 1;
    text-align: center;
}
.seg-chip + .seg-chip { border-left: 1px solid var(--border-color, #e2e8f0); }
.seg-chip em {
    font-style: normal;
    font-size: 0.75em;
    opacity: 0.6;
    font-weight: 400;
}
.seg-chip:hover { color: var(--primary-color, #3b82f6); background: var(--primary-row-hover, rgba(59,130,246,0.08)); }
.seg-chip.active {
    background: var(--primary-color, #3b82f6);
    color: #fff;
    text-align: center;
}
.seg-chip.active em { opacity: 0.85; }
.seg-toggle.active {
    background: var(--danger-color, #dc2626);
    color: #fff;
}

.browser-struct-link { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; cursor: pointer; }
.browser-table .browser-struct-link { display: inline-block; width: auto; height: auto; }

.br-main > .pageHeader {
    margin-left:  calc(var(--spacing-md) * -1);
    margin-right: calc(var(--spacing-md) * -1);
    margin-top:   calc(var(--spacing-md) * -1);
}
.br-header-sub { margin: 0.3rem 0 0; color: var(--text-muted); font-size: var(--fs-md); }

.br-legacy-shell { display: flex; height: calc(100vh - 60px); overflow: hidden; }
.br-legacy-aside {
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    background: var(--bg-card);
    overflow-y: auto;
}
.br-legacy-main { flex: 1; overflow-y: auto; padding: 2rem; }
.br-legacy-card-link { text-decoration: none; color: inherit; }
.br-legacy-card-icon { font-size: var(--fs-4xl); color: var(--border-color); }

.br-flex-column { display: flex; flex-direction: column; }
.br-toolbar { display: flex; justify-content: space-between; }
.br-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.modal-header h3 { margin: 0; font-size: var(--fs-2xl); }
/* Icon button off the --icon-* ramp (fa.css), like every other × on the site. */
.modal-header .modal-close-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2em; height: 2em; padding: 0;
    border: 0; border-radius: 6px;
    background: var(--icon-bg);
    color: var(--text-muted);
    font-size: var(--fs-xl); line-height: 1; cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.modal-header .modal-close-btn:hover  { background: var(--icon-bg-hover);  color: var(--primary-color); }
.modal-header .modal-close-btn:active { background: var(--icon-bg-active); }

.br-filter-title--sub-spaced { margin-top: 1rem; font-size: var(--fs-2xs); }
.br-subgroup { margin-top: 1rem; }
.br-filter-title--sub-tight { font-size: var(--fs-2xs); margin-bottom: 0.5rem; }

/* Table | Grid. Same shape as .toolIcons--seg (toolIcons.css §3): the GROUP
   carries the tint and the members sit transparent inside it, with the
   selected one lifting out onto the card surface. No outline and no divider
   rules — the tray is what says "these two are one control". */
.view-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 0;
    border-radius: 8px;
    background: var(--icon-bg-seg);
}
.view-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 2em;
    height: 2em;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-weight: 500;
    font-family: inherit;
    font-size: var(--fs-md);
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
/* Icon-only on desktop. The wording is still in the DOM (.view-seg-label) and
   comes back below 820px, where this strip becomes a dropdown menu. */
.view-seg-label { display: none; }
.view-seg-btn:hover {
    color: var(--primary-color);
    background: var(--icon-bg-hover);
}
.view-seg-btn.active {
    color: var(--primary-color);
    background: var(--bg-card);
    box-shadow: 0 1px 2px rgb(0 0 0 / .12);
}
.view-seg-btn i { font-size: 0.9em; }

.br-view-dd { position: relative; display: inline-flex; }
.br-view-trigger { display: none; }

.browser-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
}
.browser-table thead { background: var(--bg-body); }
.browser-table th { padding: 1rem; text-align: left; font-weight: 600; }

.browser-table .ta-center { text-align: center; }
.browser-table .ta-right  { text-align: right; }
.browser-table .bt-combo    { white-space: nowrap; width: 1%; }
.browser-table .bt-name     { font-weight: 600; }
.browser-table .bt-notation { font-weight: 400; font-size: var(--fs-sm); color: var(--text-muted); margin-top: 0.15rem; }
.browser-table .bt-formula  { font-family: monospace; color: var(--text-muted); }
.browser-table .bt-muted    { color: var(--text-muted); }

.browser-table td {
    vertical-align: middle;
    text-align: left;
    padding: 0.75rem;
    border-spacing: 30px;

    border-top-width: 0;
    border-bottom-width: 1pt;

    border-top-style: solid;
    border-bottom-style: solid;

    border-top-color: var(--border-color);
    border-bottom-color: var(--border-color);
}
.browser-table tr:hover td {
    transition: 0ms;
    background-color: var(--primary-row-hover);
}

/* The whole row is clickable (browser.js delegates the click to the FA page),
   so it has to look clickable: pointer cursor, and the name lights up the way
   a link does on hover. The name stays a real <a> for keyboard and
   middle-click; this only makes the rest of the row agree with it. */
.browser-table tr.browser-data-row { cursor: pointer; }
.browser-table tr.browser-data-row:hover .bt-name-link {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Anything in the row that handles its own click keeps the normal arrow, so
   the cursor never promises a navigation the click will not perform. */
.browser-table tr.browser-data-row a,
.browser-table tr.browser-data-row button,
.browser-table tr.browser-data-row .br-fav-star,
.browser-table tr.browser-data-row .fa-mini-cell { cursor: auto; }
.browser-table tr.browser-data-row a,
.browser-table tr.browser-data-row button,
.browser-table tr.browser-data-row .br-fav-star,
.browser-table tr.browser-data-row .fa-mini-cell .browser-mini-render { cursor: pointer; }

.browser-table tr.table-type-subheader td {
    padding: 0.6rem 1rem;
    background: var(--dyn-header-bg);
    font-weight: 700;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-top: 2px solid var(--border-color);
}

#results-container a { transition: color 0.18s ease; }
#results-container a:hover { color: var(--primary-color, #3b82f6); }

.card .browser_img_container {
    background: #ffffff;
    height: 220px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mol-thumb { width: 100%; height: 100%; object-fit: contain; }

.browser-card-body {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1rem;
}
.browser-card-body > *, .browser-card-body .flex {
    text-align: center;
    justify-content: center;
}
.browser-card-formula {
    font-family: monospace;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.browser_img_container .browser-mini-render { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.browser_img_container .fm2d-mini { height: 100%; }
/* width/height:auto — the SVG carries an intrinsic size and contains itself
   inside these caps, so a tall acid (DHA, arachidonic) scales down instead of
   overflowing. Forcing width:100% here would clip it again. */
.browser_img_container .fm2d-mini-svg { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.browser-table td.fa-mini-cell { padding: 0.5rem 1rem; }
.browser-table td.fa-mini-cell .browser-mini-render {
    width: 180px; max-width: 180px;
    border: 1px solid #efefef;
    border-radius: 8px;
    background-color: white;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* The model is its own click target — it opens the full-page model surface, not
   the FA page the rest of the row opens. Hovering it therefore has to say so:
   the row tint alone would read as "this opens the fatty acid". The accent frame
   lights up the model box specifically, so the two destinations are told apart
   before the click, not after. */
.browser-table td.fa-mini-cell .browser-mini-render:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-row-hover), 0 1px 4px rgba(0, 0, 0, 0.10);
}
.browser-table td.fa-mini-cell .browser-mini-render { height: 64px; }
.browser-table td.fa-mini-cell .fm2d-mini-svg { max-width: 100%; max-height: 64px; width: auto; height: auto; display: block; }

/* Bookmarked-FA marker — the gold star that sits in front of a common name in
   both the table and the grid cards. */
.br-fav-star {
    color: #e8b306;
    font-size: 0.85em;
    line-height: 1;
    margin-right: 0.35em;
    vertical-align: baseline;
}

.browser-table td.bt-cell { vertical-align: middle; }
.browser-table .bt-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-sm);
}
.browser-table .bt-muted { color: var(--text-muted); }

.browser-table th.bt-th { white-space: nowrap; }

/* A phase-gated column header (index.php stamps col.phaseClass; the frame and
   ribbon themselves come from chrome.css). The shared badge hangs 10px ABOVE
   its box, which a table header clips, so it is pulled inside the cell here and
   shrunk to header size — same rule shape as .fap-top-tabs in chrome.css. */
.browser-table th.phaseOne,
.browser-table th.phaseTwo { padding-top: 14px; }
.browser-table th.phaseOne::after,
.browser-table th.phaseTwo::after {
    top: 1px;
    right: 4px;
    width: 44px;
    height: 12px;
}
.browser-table th.bt-sortable { cursor: pointer; user-select: none; }
.browser-table th.bt-sortable:hover { color: var(--primary-color, #3b82f6); }
.browser-table th .bt-sorticon { opacity: 0.35; font-size: 0.85em; margin-left: 0.15rem; }
.browser-table th .bt-sortactive { color: var(--primary-color, #3b82f6); font-size: 0.9em; margin-left: 0.15rem; }

.browser-table-wrap {
    overflow: auto;
    max-width: 100%;
    max-height: 70vh;
    -webkit-overflow-scrolling: touch;
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.browser-table thead th {
    position: sticky;
    top: 0;
    z-index: 15;
    background: var(--bg-tinted);
    box-shadow: inset 0 -1px 0 var(--border-color);
}

.browser-table td.bt-cell:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--bg-card);
    box-shadow: inset -1px 0 0 var(--border-color);
}
.browser-table tr:hover td.bt-cell:first-child {
    background: var(--primary-row-hover, #eff4ff);
}
.browser-table thead th:first-child {
    left: 0;
    z-index: 30;
    box-shadow: inset -1px 0 0 var(--border-color), inset 0 -1px 0 var(--border-color);
}

body.br-fullpage { overflow: hidden; }
body.br-fullpage #browser-region {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem 1rem;
    background: var(--bg-body, #fff);
    box-sizing: border-box;
    overflow: hidden;
}
body.br-fullpage #results-container {
    flex: 1;
    min-height: 0;
}
body.br-fullpage .browser-table-wrap {
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0 0 8px 8px;
}

/* ON state comes from .toolBtn.is-active (toolIcons.css §2) — tinted, not a
   solid fill. A solid blue square in a row of five ghost icons was the only
   thing on the toolbar loud enough to read as an error state. */

#browser-filterbar,
#browser-top-section,
#results-container {
    max-width: 85vw;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
body.br-fullpage #browser-filterbar,
body.br-fullpage #browser-top-section,
body.br-fullpage #results-container {
    max-width: none;
}

#browser-filterbar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    margin-bottom: 0;
}
#browser-top-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 0;
    border-bottom: 0;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0.55rem 0.75rem;
}

@media (max-width: 900px) {
    .browser-table { font-size: var(--fs-sm); }
    .browser-table th { padding: 0.7rem 0.8rem; }
    .browser-table td { padding: 0.55rem 0.7rem; }
}

@media (max-width: 900px) {
    #browser-filterbar,
    #browser-top-section,
    #results-container {
        max-width: 100%;
    }
    .br-header-sub { font-size: var(--fs-sm); }

    .br-filterbar { position: relative; justify-content: stretch; overflow: visible; }
    body:not(.scrolledDown) .br-filterbar { padding: 0; border: 0; background: transparent; }

    .br-filter-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        padding: 0.55rem 0.85rem;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-color, #334155);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }
    .br-filter-trigger i { transition: transform 0.15s ease; color: var(--text-muted); }
    .br-filterbar.filter-open .br-filter-trigger i { transform: rotate(180deg); }

    .br-seg {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        z-index: 200;
        flex-direction: column;
        max-height: 62vh;
        overflow-y: auto;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-card);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    }
    .br-filterbar.filter-open .br-seg { display: flex; }
    .br-seg .seg-chip {
        width: 100%;
        border-radius: 0;
        padding: 0.65rem 0.95rem;
        font-size: var(--fs-md);
    }
    .br-seg .seg-chip + .seg-chip { border-left: 0; border-top: 1px solid var(--border-color); }

    #browser-top-section {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.55rem 0.6rem;
    }
    #browser-top-right-options { margin-left: auto; }
    #browser-top-right-options .flex { flex-wrap: nowrap; justify-content: flex-end; gap: 0.4rem; }
    #results-count { font-size: var(--fs-lg); }

    .view-segmented {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        z-index: 300;
        flex-direction: column;
        min-width: 150px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
        background: var(--bg-card);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    }
    .br-view-dd.view-open .view-segmented { display: flex; }
    /* A menu, not a strip: the two rows get their words back. */
    .view-segmented { gap: 0; padding: 0; background: none; border-radius: 0; }
    .view-seg-label { display: inline; }
    .view-seg-btn {
        justify-content: flex-start;
        width: auto; height: auto;
        padding: 0.6rem 0.95rem;
        border-radius: 0;
    }
    .view-seg-btn + .view-seg-btn { border-top: 1px solid var(--border-color); }
    .view-seg-btn.active { box-shadow: none; }
    .br-view-trigger {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.7rem;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-color, #334155);
        font: inherit;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
    }
    .br-view-trigger .br-view-caret { font-size: 0.72em; color: var(--text-muted); transition: transform 0.15s ease; }
    .br-view-dd.view-open .br-view-trigger .br-view-caret { transform: rotate(180deg); }

}

@media (max-width: 768px) {
    .browser-table { font-size: var(--fs-xs); }
    .browser-table th,
    .browser-table td { padding: 0.45rem 0.5rem; }
    .browser-table td.fa-mini-cell .browser-mini-render { width: 120px; max-width: 120px; }
    #results-container { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
    .card .browser_img_container { height: 150px; }
}

@media (max-width: 480px) {
    #browser-top-section { display: none !important; }

    .browser-table { font-size: var(--fs-xs); }
    .browser-table td.fa-mini-cell .browser-mini-render { width: 96px; max-width: 96px; }
    #results-container {
        grid-template-columns: 1fr !important;
    }
}