/* data pages. Owned by the data surface group; shared components live in ../app.css.
   Metrics, directory, institutions, researcher and institution profiles, and the
   shared research charts fragment (fragments/profile-research.html). */

/* ---- Chart colour roles ----
   Mirror of static/js/chart-theme.js (validated categorical order: forest,
   gold, rust, burnt orange, plum, olive, dusk violet, clay). HTML charts read these;
   Highcharts reads the JS copy. Keep both in sync. */
.viz,
.dt,
.pid {
    --viz-1: #21895d;
    --viz-1-strong: #0D5F43;
    --viz-2: #c59720;
    --viz-3: #913814;
    --viz-4: #d4762c;
    --viz-5: #8b446f;
    --viz-6: #7e9c44;
    --viz-7: #5f4686;
    --viz-8: #b96365;
    --viz-other: #9aa39d;
}
html.dark .viz,
html.dark .dt,
html.dark .pid {
    --viz-1: #21895d;
    --viz-1-strong: #4fa57b;
    --viz-2: #b98c06;
    --viz-3: #9b411e;
    --viz-4: #d4762c;
    --viz-5: #9e5580;
    --viz-6: #597417;
    --viz-7: #735a9c;
    --viz-8: #c97273;
    --viz-other: #505e57;
}

/* ---- Headline ledger (metrics) ---- */
.viz-ledger { margin-bottom: 2.5rem; }
.viz-ledger-title {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-ink-2);
}
.viz-ledger .home-ledger {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--c-line);
}
.viz-ledger-sm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--c-line);
}
@media (min-width: 640px) { .viz-ledger-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .viz-ledger-sm { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.viz-ledger-sm > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.125rem;
    padding: 0.875rem 1rem 0.875rem 0;
    border-bottom: 1px solid var(--c-line);
}
.viz-ledger-sm dd {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}
.viz-ledger-sm dt { font-size: 0.8125rem; color: var(--c-ink-3); }

/* ---- Chart panels ---- */
.viz-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}
@media (min-width: 1024px) {
    .viz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .viz-panel-wide { grid-column: 1 / -1; }
}
.viz-panel {
    min-width: 0;
    padding: 1.25rem;
    background: var(--c-raised);
    border: 1px solid var(--c-line);
    border-radius: 0.75rem;
}
@media (min-width: 640px) { .viz-panel { padding: 1.5rem; } }
.viz-panel-head { margin-bottom: 1.25rem; }
.viz-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--c-ink);
}
.viz-sub { margin-top: 0.125rem; font-size: 0.8125rem; color: var(--c-ink-3); }
.viz-chart { min-height: 240px; }
.viz-chart-fallback { padding: 2rem 0; font-size: 0.875rem; color: var(--c-ink-3); }

/* Ranked bars: label and value on one line, a thin bar from a shared baseline. */
.viz-rank { display: grid; gap: 0.125rem; }
.viz-rank-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    row-gap: 0.3rem;
    padding: 0.4rem 0;
    color: var(--c-ink-2);
    font-size: 0.875rem;
    line-height: 1.35;
}
.viz-rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-rank-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--c-ink);
}
.viz-rank-bar { grid-column: 1 / -1; display: block; height: 0.5rem; }
.viz-rank-bar i {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: var(--viz-1);
    transition: background-color 0.15s ease;
}
a.viz-rank-row:hover .viz-rank-name { color: var(--c-primary); text-decoration: underline; text-underline-offset: 0.2em; }
a.viz-rank-row:hover .viz-rank-bar i { background: var(--viz-1-strong); }
.viz-more { margin-top: 0.75rem; margin-left: -0.75rem; }

/* Share bars: part-to-whole, at most four slots. 2px surface gaps between segments. */
.viz-share-grid { display: grid; gap: 1.75rem; }
@media (min-width: 768px) { .viz-share-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.viz-share-label { margin-bottom: 0.75rem; font-size: 0.8125rem; font-weight: 600; color: var(--c-ink-2); }
.viz-share-bar { display: flex; gap: 2px; height: 0.75rem; }
.viz-share-bar span { min-width: 3px; }
.viz-share-bar span:first-child { border-radius: 4px 0 0 4px; }
.viz-share-bar span:last-child { border-radius: 0 4px 4px 0; }
.viz-share-bar span:only-child { border-radius: 4px; }
.viz-share-legend { margin-top: 0.875rem; display: grid; gap: 0.375rem; }
.viz-share-legend li {
    display: grid;
    grid-template-columns: 0.625rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--c-ink-2);
}
.viz-share-legend i { width: 0.625rem; height: 0.625rem; border-radius: 2px; }
.viz-share-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-share-pct { font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* Country choropleth + ranked list. Band fills come from .africa-map in app.css. */
.viz-map-layout { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
    .viz-map-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
}
.viz-map .africa-map { max-height: 30rem; }
.viz-map .africa-map path.no-link { cursor: default; }
.viz-map-caption {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    font-size: 0.8125rem;
    color: var(--c-ink-3);
}

/* Empty state shared by every research tab. */
.viz-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--c-line-strong);
    border-radius: 0.75rem;
}
.viz-empty.hidden { display: none; }
.viz-empty svg { width: 3.5rem; height: 3.5rem; color: var(--c-primary); }
.viz-empty-title { margin-top: 1rem; font-size: 0.9375rem; font-weight: 600; color: var(--c-ink); }
.viz-empty-text { margin-top: 0.25rem; font-size: 0.875rem; color: var(--c-ink-2); }
.viz-empty-text:empty { display: none; }

/* ---- Directory + institutions: search/browse tables ---- */
.dt-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--c-ink-3);
    pointer-events: none;
}
.dt-search-input {
    display: block;
    width: 100%;
    height: 2.875rem;
    padding: 0 1rem 0 2.75rem;
    border: 1px solid var(--c-line);
    border-radius: 0.375rem;
    background: var(--c-raised);
    font-size: 0.9375rem;
    color: var(--c-ink);
}
.dt-search-input::placeholder,
#countries-search-input::placeholder { color: var(--c-ink-3); }
#countries-search-shell { background: var(--c-raised); }
#countries-country-icon.fi-xx { display: none; }

.dt-toolbar { margin-bottom: 1.5rem; }
.dt-toolbar.hidden { display: none; }

/* Result cards: people three-up, institutions two-up. */
.dt-list { display: grid; gap: 1rem; }
.dt-list:empty { display: none; }
@media (min-width: 768px) { .dt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dt-list-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dt-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    min-height: 5.5rem;
    padding: 1rem 1.125rem;
    color: var(--c-ink);
}
a.dt-card:hover .dt-name { color: var(--c-primary); }
.dt-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-size: 1.25rem;
    font-weight: 600;
}
.dt-avatar.app-avatar-fallback { color: #fff; }
.dt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fi.dt-flag {
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(20, 26, 22, 0.08);
}
.dt-main { display: grid; min-width: 0; gap: 0.25rem; }
.dt-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    transition: color 0.15s ease;
}
.dt-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--c-ink-3);
}
.dt-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--c-ink-3);
    font-variant-numeric: tabular-nums;
}
.dt-stats > span + span {
    margin-left: 0.625rem;
    padding-left: 0.625rem;
    border-left: 1px solid var(--c-line-strong);
}

/* Loading skeleton: card placeholders while the first page is in flight. */
.dt-skeleton { display: grid; gap: 1rem; }
@media (min-width: 768px) { .dt-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dt-list-people ~ .dt-skeleton { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dt-skeleton.hidden { display: none; }
.dt-skeleton i {
    display: block;
    height: 5.5rem;
    border: 1px solid var(--c-line);
    border-radius: 0.75rem;
    background:
        radial-gradient(circle, var(--c-surface) 1.625rem, transparent 1.6875rem) 1.125rem 50% / 3.25rem 3.25rem no-repeat,
        linear-gradient(var(--c-surface), var(--c-surface)) 5.375rem 38% / min(12rem, 50%) 0.75rem no-repeat,
        linear-gradient(var(--c-surface), var(--c-surface)) 5.375rem 64% / min(8rem, 35%) 0.625rem no-repeat;
    animation: dt-pulse 1.4s ease-in-out infinite;
}
.dt-skeleton i:nth-child(2n) { animation-delay: 0.15s; }
@keyframes dt-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .dt-skeleton i { animation: none; } }

.dt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 1.5rem;
    text-align: center;
}
.dt-empty.hidden { display: none; }
.dt-empty svg { width: 4rem; height: 4rem; color: var(--c-primary); }
.dt-empty h2 { margin-top: 1rem; font-size: 1.0625rem; font-weight: 600; color: var(--c-ink); }
.dt-empty p { margin-top: 0.25rem; font-size: 0.875rem; color: var(--c-ink-2); }

/* Country index: one card per country, in reading order. */
.dt-countries { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dt-countries:empty { display: none; }
@media (min-width: 768px) { .dt-countries { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dt-countries { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .dt-countries { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.dt-country {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.875rem;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--c-ink);
}
.dt-country-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s ease; }
.dt-country:hover .dt-country-name { color: var(--c-primary); }
@media (max-width: 639px) { .dt-country-name { white-space: normal; line-height: 1.3; } }

/* ---- Researcher + institution profiles ---- */
.pid-head {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding-bottom: 2rem;
}
@media (min-width: 640px) { .pid-head { gap: 1.75rem; } }
/* Portrait tile (Google Scholar / faculty page): a rounded square left of
   the name; a photo fills it, otherwise a two-letter monogram. */
.pid-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    border-radius: 0.875rem;
    background: var(--c-surface);
}
@media (min-width: 640px) { .pid-avatar { width: 5.5rem; height: 5.5rem; border-radius: 1rem; } }.pid-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pid-name {
    font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
    line-height: 1.1;
    color: var(--c-ink);
    overflow-wrap: anywhere;
}
.pid-title { margin-top: 0.375rem; font-size: 1rem; font-weight: 500; color: var(--c-ink-2); }
.pid-lines {
    margin-top: 0.625rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--c-ink-2);
}
.pid-lines > span:has(> .hidden:only-child) { display: none; }
.pid-lines i { color: var(--c-ink-3); }

.pid-ids {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.pid-ids > div {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    height: 1.875rem;
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: 0.375rem;
    font-size: 0.75rem;
}
.pid-ids dt {
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    background: var(--c-surface);
    border-right: 1px solid var(--c-line);
    font-weight: 600;
    color: var(--c-ink-2);
}
.pid-ids dd { min-width: 0; }
.pid-ids a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0 0.5rem;
    font-family: var(--font-display);
    color: var(--c-ink);
    white-space: nowrap;
}
.pid-ids a:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 0.2em; }
.pid-ids a i { color: var(--c-ink-3); font-size: 0.8rem; }
@media (max-width: 639px) {
    .pid-ids a { overflow: hidden; text-overflow: ellipsis; display: block; max-width: 16rem; }
    .pid-ids a i { display: none; }
}
.pid-hero .pid-ids > div { background: var(--c-bg); }

.pid-latest > li { padding: 0.875rem 0; border-top: 1px solid var(--c-line); }
.pid-latest > li:first-child { border-top: 0; padding-top: 0.25rem; }
.pid-latest-title { display: block; font-size: 0.9375rem; font-weight: 500; line-height: 1.45; color: var(--c-ink); }
a.pid-latest-title:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 0.2em; }
.pid-latest-meta { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--c-ink-3); }
.pid-spinner { width: 1.25rem; height: 1.25rem; border-width: 2px; }

/* ---- Profile record: one page, ruled sections, sticky section links ---- */
.pid-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
@media (min-width: 640px) { .pid-owner { margin-left: auto; align-self: flex-start; padding-top: 0.5rem; } }

/* Masthead: identity and headline figures on one full-width band under
   the site menu, a very light neutral tint (lighter than the surface
   grey), closed by a rule. */
.pid-hero { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.pid-hero-inner { padding-top: 2.25rem; padding-bottom: 2rem; }
@media (min-width: 640px) { .pid-hero-inner { padding-top: 3.5rem; padding-bottom: 3rem; } }
.pid-hero .pid-head { padding-bottom: 0; }
.pid-hero .pid-name { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.018em; }
@media (max-width: 639px) { .pid-hero .pid-lines .truncate { white-space: normal; } }

/* Metrics section: every record figure in the ledger format, laid out as
   on the Wits profile: up to six share one row on desktop, more split into
   two balanced rows, each row starting without a divider. */
.pr-metrics { margin-top: 1.25rem; row-gap: 1.5rem; }
.pr-metrics dd[data-ui-tooltip] { cursor: help; }
@media (min-width: 1024px) {
    .pr-metrics-1 { grid-template-columns: minmax(0, 1fr); }
    .pr-metrics-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pr-metrics-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pr-metrics-5, .pr-metrics-9, .pr-metrics-10 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .pr-metrics-6, .pr-metrics-11, .pr-metrics-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .pr-metrics-7 > div:nth-child(4n+1), .pr-metrics-8 > div:nth-child(4n+1),
    .pr-metrics-9 > div:nth-child(5n+1), .pr-metrics-10 > div:nth-child(5n+1),
    .pr-metrics-11 > div:nth-child(6n+1), .pr-metrics-12 > div:nth-child(6n+1) { border-left: 0; padding-left: 0; }
}

/* Section links: a third header row under the site menu, full width with
   the header's own rule. The site header stays on top and the links stick
   right under it, with a soft shadow once stuck.
   --pr-nav-top carries the header's height (set by profile-record.js). */
.pr-nav {
    position: sticky;
    top: var(--pr-nav-top, 0px);
    z-index: 30;
    background: var(--c-bg);
    border-bottom: 1px solid #eff1ef;
    transition: box-shadow 200ms ease-out;
}
.pr-nav.is-stuck { box-shadow: 0 10px 24px -18px rgb(16 24 20 / 0.45); }
html.dark .pr-nav { border-bottom-color: #26312c; }
html.dark .pr-nav.is-stuck { box-shadow: 0 10px 24px -16px rgb(0 0 0 / 0.8); }
/* Until the record is ready the row keeps its height with its links hidden,
   and the sections after About wait invisible in their place; they all
   appear together (a fallback shows them after 4s if the record is slow). */
.pr-nav { min-height: calc(2.75rem + 1px); }
.pr-nav:not(.is-ready) .pr-nav-row,
body:has(.pr-nav:not(.is-ready)) .pr-section:not(#about) { visibility: hidden; animation: pr-reveal 0s 4s forwards; }
.pr-nav.is-ready .pr-nav-row,
body:has(.pr-nav.is-ready) .pr-section:not(#about) { animation: pr-fade-in 180ms ease-out; }
@keyframes pr-reveal { to { visibility: visible; } }
@keyframes pr-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .pr-nav.is-ready .pr-nav-row,
    body:has(.pr-nav.is-ready) .pr-section:not(#about) { animation: none; }
}
/* While the AI summary is still being written, About holds the height a
   clamped summary takes, so it doesn't push the sections when it lands. */
.pr-about-ai:has(> .pr-loading:not(.hidden)) { min-height: calc(10.2em + 3.25rem); }
@media (min-width: 1024px) { .pr-about-ai:has(> .pr-loading:not(.hidden)) { min-height: calc(13.6em + 3.25rem); } }
.pr-nav-row { overflow-x: auto; scrollbar-width: none; }
.pr-nav-row::-webkit-scrollbar { display: none; }
.pr-nav ol { display: flex; gap: 1.5rem; }
.pr-nav-link {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    height: 2.75rem;
    border-bottom: 2px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-ink-3);
    white-space: nowrap;
}
/* Every link reserves its bold width, so the current one turning bold
   never moves its neighbours. */
.pr-nav-link::after { content: attr(data-text); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; pointer-events: none; user-select: none; }
.pr-nav-link:hover { color: var(--c-ink); }
.pr-nav-link[aria-current] { color: var(--c-ink); font-weight: 600; border-bottom-color: var(--c-primary); }

/* Anchored sections land below the sticky header and section links. */
.pr-section { scroll-margin-top: calc(var(--pr-nav-top, 3.75rem) + 3.5rem); padding-top: 2.5rem; }
.pr-section + .pr-section { margin-top: 2.5rem; border-top: 1px solid var(--c-line); }
.pr-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; }
.pr-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.85rem);
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--c-ink);
}
.pr-sub { font-size: 0.875rem; font-weight: 600; color: var(--c-ink); }
.pr-block { margin-top: 1.75rem; }
.pr-block > .pr-sub + * { margin-top: 0.875rem; }
.pr-lede { margin-top: 0.75rem; font-size: 1rem; line-height: 1.6; color: var(--c-ink-2); }
.pr-cols { display: grid; gap: 0 3rem; }
@media (min-width: 900px) { .pr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-empty { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--c-ink-3); }
/* Same gap as the summary that replaces it. */
.pr-about-ai > .pr-empty { margin-top: 1rem; }
.pr-note { margin-top: 0.875rem; font-size: 0.8125rem; color: var(--c-ink-3); }
.pr-loading { margin-top: 1rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--c-ink-3); }
.pr-loading.hidden { display: none; }

/* About opens at a few lines, with Read more. */
.pr-about { margin-top: 1rem; font-size: 1rem; line-height: 1.7; color: var(--c-ink-2); }
.pr-about.prose p:first-child { margin-top: 0; }
.pr-about .arc-field-flags { display: flex; margin: 0.25rem 0 0; }
.pr-about.is-clamped { max-height: 10.2em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
@media (min-width: 1024px) { .pr-about.is-clamped { max-height: 13.6em; } }
.pr-readmore { margin-top: 0.5rem; font-size: 0.875rem; }

/* Programme: the programme lines and the AI reading are one block, with
   the pie to the right of all of it. Phones float the pie at the top right
   and let the text wrap round it. */
.pr-prog-intro { display: flow-root; margin-top: 1rem; }
@media (min-width: 640px) { .pr-prog-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 3rem; } .pr-prog-main { grid-column: 1; grid-row: 1; } }
.pr-programs { display: grid; }
.pr-programs li { display: grid; gap: 0.2rem; }
.pr-programs li + li { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--c-line); }
.pr-program-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--c-ink); }
.pr-program-detail { font-size: 0.875rem; color: var(--c-ink-3); }
.pr-prog-impact { margin-top: 1.25rem; }
.pr-prog-impact .pr-about { margin-top: 0.375rem; }

/* Programme pie: publications before, during, and after, in the map's
   forest steps (lighter to darker in time order), values on hover/focus. */
.pr-pie { float: right; width: 5.5rem; height: 5.5rem; margin: 0.25rem 0 0.75rem 1rem; overflow: visible; }
@media (min-width: 640px) { .pr-pie { float: none; grid-column: 2; grid-row: 1; width: 10rem; height: 10rem; margin: 0; } }
.pr-pie path { stroke: var(--c-bg); stroke-width: 1.5; stroke-linejoin: round; cursor: help; outline: none; transition: opacity 0.15s ease-out; }
.pr-pie-1 { fill: #8fc6a6; }
.pr-pie-2 { fill: #23805a; }
.pr-pie-3 { fill: #0D5F43; }
html.dark .pr-pie-1 { fill: #235c43; }
html.dark .pr-pie-2 { fill: #3d9068; }
html.dark .pr-pie-3 { fill: #5fae86; }
.pr-pie:hover path:not(:hover), .pr-pie:focus-within path:not(:focus) { opacity: 0.45; }
.pr-pie path:focus-visible { stroke: var(--c-ink); stroke-width: 2; }

/* Publications: per-year columns drawn in CSS, then the latest list. */
/* Publication history: one line, a light wash under it, hairline grid. */
.pr-trend { margin: 1.25rem 0 0; }
.pr-trend-plot { position: relative; height: 14rem; border-radius: 0.375rem; outline-offset: 4px; touch-action: pan-y; }
@media (max-width: 639px) { .pr-trend-plot { height: 11.5rem; } }
.pr-trend-plot svg { display: block; overflow: visible; }
.pr-trend-axis text { fill: var(--c-ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.pr-trend-grid { stroke: var(--c-line); stroke-width: 1; }
.pr-trend-base { stroke: var(--c-line-strong); stroke-width: 1; }
.pr-trend-area { fill: var(--viz-1); opacity: 0.1; }
html.dark .pr-trend-area { opacity: 0.18; }
.pr-trend-line { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pr-trend-line.is-partial { stroke-dasharray: 2 5; }
.pr-trend-dot { fill: var(--viz-1); stroke: var(--c-bg); stroke-width: 2; }
.pr-trend-dot.is-hover { fill: var(--viz-1-strong); }
.pr-trend-label { fill: var(--c-ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-trend-cross { stroke: var(--c-ink-3); stroke-width: 1; }
.pr-latest > li { padding: 0.95rem 0; }
.pr-latest .pid-latest-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.pr-more { margin-top: 0.5rem; }
.pr-section-head + .pr-latest { margin-top: 1.25rem; }
.pr-pager { display: flex; align-items: center; gap: 0.5rem; }
.pr-pager[hidden] { display: none; }
.pr-pager-status { margin-right: 0.25rem; font-size: 0.8125rem; color: var(--c-ink-3); }

/* Research focus */
.pr-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pr-chips .chip { height: auto; min-height: 2rem; max-width: 100%; padding: 0.3rem 0.75rem; font-size: 0.8125rem; line-height: 1.3; color: var(--c-ink); white-space: normal; }
.pr-chip-n { color: var(--c-ink-3); }

/* Rank names wrap to two lines instead of truncating behind a hover title. */
.pr-rank .viz-rank-name { white-space: normal; overflow: visible; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }

/* Where: map beside the country ranking when there are enough countries. */
.pr-where { margin-top: 1rem; display: grid; gap: 1.5rem; }
.pr-where > * { min-width: 0; }
/* Same two-column grid as .pr-cols so the country list lines up with the
   SDG and journal columns below and above it. */
@media (min-width: 900px) { .pr-where.has-map { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 3rem; } }
.pr-map { margin: 0; max-width: 34rem; }
.pr-map-key { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--c-ink-3); }
.pr-map-key .home-map-legend span { font-variant-numeric: tabular-nums; }
.pr-map-key .home-map-legend { gap: 3px; font-size: 0.875rem; }
.pr-map-key .home-map-legend { display: flex; max-width: 100%; }
.pr-map-key .home-map-legend i { flex: 0 1 2rem; min-width: 0.75rem; height: 0.875rem; border-radius: 2px; }
.pr-map-key .home-map-legend span { flex: none; }
.pr-map-key .home-map-legend span:first-child { margin-right: 0.6rem; }
.pr-map-key .home-map-legend span:last-child { margin-left: 0.6rem; }
.africa-map path.no-link { cursor: default; }

.pr-empty-record { padding: 1rem 0 0.5rem; }
.pr-empty-record svg { width: 3rem; height: 3rem; color: var(--c-ink-3); }
.pr-empty-title { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--c-ink); }

/* Find this researcher elsewhere: one card per destination. */
.pr-links { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .pr-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pr-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.pr-link-card { display: flex; align-items: flex-start; gap: 0.875rem; height: 100%; padding: 1rem 1.125rem; border: 1px solid var(--c-line); border-radius: 0.75rem; background: var(--c-bg); color: var(--c-ink); transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out; }
.pr-link-card:hover { border-color: var(--c-line-strong); box-shadow: 0 6px 18px -12px rgba(20, 26, 22, 0.3); }
.pr-link-card:hover .pr-link-title { color: var(--c-primary); }
.pr-link-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary); font-size: 1.05rem; }
.pr-link-text { display: grid; gap: 0.2rem; min-width: 0; }
.pr-link-title { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.pr-link-title i { font-size: 0.85rem; font-weight: 400; color: var(--c-ink-3); }
.pr-link-detail { font-size: 0.8125rem; line-height: 1.45; color: var(--c-ink-3); }
.pr-link-code { font-family: var(--font-display); font-size: 0.75rem; color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Programme: details, before/during/after, activity, AI impact ---- */
/* Before / during / after a programme: plain figures, no bars. */
.pr-activity { display: grid; gap: 1.25rem 3rem; }
@media (min-width: 768px) { .pr-activity { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pr-activity-title { font-size: 0.8125rem; font-weight: 600; color: var(--c-ink-3); }
.pr-activity dl { margin-top: 0.5rem; border-top: 1px solid var(--c-line); }
.pr-activity dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--c-line); font-size: 0.9375rem; color: var(--c-ink-2); }
.pr-activity dd { font-weight: 600; color: var(--c-ink); }
.pr-activity dd.is-zero { font-weight: 400; color: var(--c-ink-3); }

/* A two-column row with one list missing gives the other the full width;
   with both missing the row and, if nothing else shows, its section stay hidden. */
@media (min-width: 900px) { .pr-cols:has(> .pr-block[hidden]) > .pr-block:not([hidden]) { grid-column: 1 / -1; } }