.nv-stakeholder-list__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.75rem;
}
/* Same irregular corner radius as .eu-badge (layout.css) - the closest
   existing badge-sized precedent for COLiBRI's "two sharp corners, two
   rounded" motif - rather than a plain fully-rounded 999px pill. */
.nv-stakeholder-filter {
    appearance: none;
    border: 1px solid var(--border-subtle, #ddd);
    background: var(--bg-surface, #fff);
    color: var(--text-primary, #0E3113);
    border-radius: 3px 14px 3px 14px;
    padding: .45rem 1.1rem;
    font: inherit;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.nv-stakeholder-filter:hover { border-color: var(--c-moss, #559827); }
.nv-stakeholder-filter:focus-visible { outline: 2px solid var(--c-forest, #0E3113); outline-offset: 2px; }
.nv-stakeholder-filter--forest { background: var(--c-forest-tint, rgba(14, 49, 19, .2)); color: var(--c-forest, #0E3113); border-color: transparent; }
.nv-stakeholder-filter--moss { background: var(--c-moss-tint, rgba(85, 152, 39, .2)); color: var(--c-moss, #559827); border-color: transparent; }
/* Same gold-on-dark-text fix as .stakeholder-map-popup__badge--gold (layout.css) - gold text on a gold tint is too low-contrast to read. */
.nv-stakeholder-filter--gold { background: var(--c-gold-tint, rgba(255, 197, 2, .2)); color: var(--c-espresso, #4F2F27); border-color: transparent; }
.nv-stakeholder-filter--espresso { background: var(--c-espresso-tint, rgba(79, 47, 39, .2)); color: var(--c-espresso, #4F2F27); border-color: transparent; }
.nv-stakeholder-filter--burnt { background: var(--c-burnt-tint, rgba(250, 97, 58, .2)); color: var(--c-burnt, #FA613A); border-color: transparent; }
.nv-stakeholder-filter.is-active { color: #fff; border-color: transparent; }
.nv-stakeholder-filter[data-filter="all"].is-active { background: var(--c-forest, #0E3113); }
.nv-stakeholder-filter--forest.is-active { background: var(--c-forest, #0E3113); }
.nv-stakeholder-filter--moss.is-active { background: var(--c-moss, #559827); }
.nv-stakeholder-filter--gold.is-active { background: var(--c-gold, #FFC502); color: var(--c-espresso, #4F2F27); }
.nv-stakeholder-filter--espresso.is-active { background: var(--c-espresso, #4F2F27); }
.nv-stakeholder-filter--burnt.is-active { background: var(--c-burnt, #FA613A); }

/* Countries aren't a fixed, small set like the 5 stakeholder groups above
   (and can run into the dozens) - a <select> scales to that list far
   better than another row of pill buttons would. Combined with the
   category filter as an AND (see initOrganisationList in main.js).
   Styled like the stakeholder registration form's text inputs
   (.nv-field input[type=...], stakeholder-form.css) - border, radius,
   padding, background and focus ring all copied as-is so this reads as
   the same kind of form control, not a custom one-off. */
.nv-stakeholder-country-filter {
    font: inherit;
    padding: .65rem .9rem;
    border: 1px solid var(--border-subtle, #ccc);
    border-radius: 6px 16px 6px 16px;
    background: var(--bg-surface, #fff);
    color: var(--text-primary, inherit);
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.nv-stakeholder-country-filter:focus-visible {
    outline: none;
    border-color: var(--c-moss, #559827);
    box-shadow: 0 0 0 3px var(--c-moss-tint, rgba(85, 152, 39, .2));
}

.nv-stakeholder-list__items {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
/* One row per organisation, not a card grid - full names (e.g. "European
   Cooperative Programme for Plant Genetic Resources (ECPGR)") vary too
   much in length to sit nicely in a fixed-width card, and a directory
   reads better as a list anyway. Badges live in the modal only (see
   .nv-org-detail-modal__groups) - this row is just acronym + full name
   on the left, place (city, country) on the right. */
.nv-stakeholder-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: .25rem 1.5rem;
    width: 100%;
    text-align: left;
    padding: .9rem 1.25rem;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-subtle, #ddd);
    border-radius: 6px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nv-stakeholder-row:hover { transform: translateX(4px); box-shadow: 0 .5rem 1.5rem rgba(14, 49, 19, 0.1); }
.nv-stakeholder-row:focus-visible { outline: 2px solid var(--c-forest, #0E3113); outline-offset: 2px; }
/* Filtered out by the category bar - removed from layout so remaining
   rows close the gap. */
.nv-stakeholder-row--filtered { display: none; }
/* Its own detail modal is open (see initOrganisationList in main.js) -
   visibility, not display, so the row keeps its layout box: the FLIP
   zoom closing back into it needs a real getBoundingClientRect(), which
   a display:none element can't give (same as .partner-card--hidden). */
.nv-stakeholder-row--hidden { visibility: hidden; }
.nv-stakeholder-row__identity { min-width: 0; }
.nv-stakeholder-row__name { font-weight: 700; }
/* Acronym leads when there is one, with the full name following as a
   lighter-weight continuation on the same line ("FAO - Food and
   Agriculture Organization...") rather than two separately bolded
   fields - same colour as the plain name shown when there's no
   acronym, so a row never reads differently depending on whether this
   organisation happens to have one. */
.nv-stakeholder-row__name--secondary { font-weight: 400; }
.nv-stakeholder-row__acronym { font-weight: 700; }
.nv-stakeholder-row__place { color: var(--text-muted, #666); white-space: nowrap; }
@media (max-width: 640px) {
    .nv-stakeholder-row { grid-template-columns: 1fr; }
}

.nv-stakeholder-list__empty { color: var(--text-muted, #666); }
.nv-stakeholder-list__empty--filtered[hidden] { display: none; }

/* Detail pop-up shared by every .nv-stakeholder-row on the page - same
   visual pattern (and FLIP zoom, see initOrganisationList in main.js) as
   Partners.html's .partner-detail-modal, just without a logo chip since
   these organisations don't have one. */
.nv-org-detail-scrim {
    position: fixed;
    inset: 0;
    background: rgba(14, 20, 15, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1035;
}
.nv-org-detail-scrim.is-visible { opacity: 1; pointer-events: auto; }
.nv-org-detail-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(560px, 90vw);
    max-height: min(80vh, 560px);
    overflow-y: auto;
    z-index: 1036;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-subtle, #ddd);
    border-radius: 8px 32px 8px 32px;
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, .35);
    padding: 2.5rem;
}
.nv-org-detail-modal[hidden] { display: none; }
.nv-org-detail-modal.is-animating { overflow: hidden; }
.nv-org-detail-modal__close {
    all: unset;
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-muted, #666);
    font-size: 1.2rem;
    line-height: 1;
}
.nv-org-detail-modal__close:hover { background: var(--bg-tinted, rgba(14, 49, 19, .06)); }
.nv-org-detail-modal__name { margin: 0 0 .25rem; font-size: 1.4rem; padding-right: 2rem; }
.nv-org-detail-modal__fullname[hidden],
.nv-org-detail-modal__address[hidden] { display: none; }
.nv-org-detail-modal__fullname { color: var(--text-muted, #666); margin: 0 0 .5rem; }
.nv-org-detail-modal__address { color: var(--text-muted, #666); margin: 0 0 1rem; }
.nv-org-detail-modal__groups { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.5rem; }
.nv-org-detail-modal__website {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    color: var(--c-moss, #559827);
}
.nv-org-detail-modal__website[hidden] { display: none; }

.nv-stakeholder-map-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 0 0 2rem;
}
.nv-stakeholder-map-stats__item {
    flex: 1 1 160px;
    border-left: 4px solid var(--c-gold, #FFC502);
    padding-left: 1.1rem;
}
.nv-stakeholder-map-stats__value {
    display: block;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--text-primary, #0E3113);
}
.nv-stakeholder-map-stats__label {
    margin: 0;
    color: var(--text-muted, #666);
}