/* ==========================================================================
   Directory collective pages — /directory/search, which-one / not-found,
   /directory/country[/<cc>], /directory/register[/<code>], /directory/group[/<LEI>]
   (netlify/lib/directory-render-search.mjs, netlify/lib/directory-render-hubs.mjs).

   Linked after css/directory.css by the directory template. Everything is
   built from its atoms (.bd-section, .bd-card, .bd-kpis, .bd-bars, .bd-table,
   .bk-hero, .bk-status, .bk-results, .fm-facet …); this file only adds what
   the hubs and the search list need, prefixed .bd-hub-* / .bd-search-* /
   .bd-facet-* / .bd-choice-*. Dark navy theme, tokens from
   css/elucidate-tokens.css. Charts are server-rendered HTML bars (the
   validated --bd-ramp-* ordinal ramp and --bd-series-1 from css/directory.css).
   ========================================================================== */

/* ─── Hero ─────────────────────────────────────────────────────── */
.bd-hub-hero .bk-search,
.bd-search-hero .bk-search { margin-bottom: 40px; }
.bd-hub-hero .bk-title em,
.bd-search-hero .bk-title em { white-space: nowrap; }
.bd-hub-kpis { margin-top: 32px; }
.bd-hub-hero .bd-source { margin: 16px 0 0; }
.bd-hub-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.bd-hub-toc .bd-chip { padding: 6px 12px; font-size: 12px; text-decoration: none; }
.bd-hub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.bd-hub-chips .bd-chip { text-decoration: none; }
.bd-hub-hero .bd-hub-chips { margin-top: 24px; }
.bd-hub-panel .bk-status-caption .bk-tip-wrap { margin-left: 4px; }

/* ─── Sections ─────────────────────────────────────────────────── */
.bd-hub-section { padding: clamp(48px, 5vw, 72px) 0; }
.bd-hub-head { max-width: 760px; margin-bottom: 28px; }
.bd-hub-head .bd-h2 { font-size: clamp(26px, 2.8vw, 36px); margin-bottom: 12px; }
.bd-hub-head .bd-intro-text { font-size: 15px; }
.bd-hub-grid { align-items: start; }
.bd-hub-grid + .bk-more { margin-top: 24px; }
.bd-hub-wide { grid-column: 1 / -1; }
[data-dir-explorer-mount] + .bd-hub-grid { margin-top: 32px; }
.bd-hub-inactive { margin: 0; }
.bd-hub-inactive .bk-more { margin-top: 8px; }
.bd-hub-section > .bd-container > .bk-results + .bk-more { margin-top: 20px; }
.bd-card > .bk-more { margin-top: 20px; }
.bd-card .bk-scope + .bk-results { margin-top: 16px; }
.bd-hub-num {
  font: 12px var(--eh-font-mono);
  font-weight: 400;
  color: var(--eh-white-dim);
  font-variant-numeric: tabular-nums;
}
.bd-hub-muted { color: var(--eh-white-dim); }
.bd-hub-inline {
  color: var(--eh-white);
  text-decoration: none;
  border-bottom: 1px solid var(--eh-white-faint);
  transition: border-color .15s var(--eh-ease);
}
.bd-hub-inline:hover { border-color: var(--eh-ember-bright); }

/* A single figure is not a chart: plain list with the value at the end. */
.bd-hub-plain { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--eh-white-muted); }
.bd-hub-plain li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.bd-hub-plain small { font: 11px var(--eh-font-mono); color: var(--eh-white-dim); }
.bd-hub-plain .bd-hub-num { margin-left: auto; color: var(--eh-white); font-size: 13px; }
.bd-hub-plain a { color: var(--eh-white); text-decoration: none; border-bottom: 1px solid var(--eh-white-faint); }
.bd-hub-plain a:hover { border-color: var(--eh-ember-bright); }

/* Caveats and research lists */
.bd-hub-caveats,
.bd-hub-research { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.bd-hub-caveats li,
.bd-hub-research li {
  padding-left: 16px;
  border-left: 1px solid var(--eh-rule-strong);
  font-size: 14px;
  line-height: 1.55;
  color: var(--eh-white-muted);
}
.bd-hub-research a { color: var(--eh-white); text-decoration: none; border-bottom: 1px solid var(--eh-white-faint); transition: border-color .15s var(--eh-ease); }
.bd-hub-research a:hover { border-color: var(--eh-ember-bright); }
.bd-hub-defs { max-width: 980px; }

/* ─── Tables sized for cards and indexes ───────────────────────── */
.bd-hub-table-wrap { border-radius: var(--eh-radius-md); }
.bd-card .bd-hub-table-wrap { background: transparent; }
.bd-table.bd-hub-table { min-width: 0; }
.bd-table.bd-hub-table.bd-hub-index { min-width: 720px; }
.bd-hub-table th,
.bd-hub-table td { padding: 10px 14px; }
.bd-hub-table th.is-num,
.bd-hub-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-hub-table td.is-num { font: 12px var(--eh-font-mono); color: var(--eh-white); }
/* Names read as prose: body font, allowed to wrap (undo the mono .bd-table a rule). */
.bd-table.bd-hub-table a,
.bd-table .bd-hub-name {
  font-family: var(--eh-font-body);
  font-size: 14px;
  white-space: normal;
}
.bd-table .bd-hub-name { font-weight: 600; color: var(--eh-white); }
.bd-hub-caption { caption-side: top; text-align: left; padding: 0 0 8px; color: var(--eh-white-dim); font-size: 13px; }
.bd-hub-group-row th {
  position: static;
  padding-top: 18px;
  font: 600 13px var(--eh-font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--eh-blue-light);
  background: transparent;
  border-bottom: 1px solid var(--eh-rule);
}
.bd-hub-region + .bd-hub-region,
.bd-hub-member-country + .bd-hub-member-country,
.bd-choice-country + .bd-choice-country { margin-top: 40px; }
.bd-hub-region-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.bd-hub-region-title a { color: var(--eh-white); text-decoration: none; border-bottom: 1px solid var(--eh-white-faint); transition: border-color .15s var(--eh-ease); }
.bd-hub-region-title a:hover { border-color: var(--eh-ember-bright); }

/* Group hub: head outside the directory; members beyond the first 20 */
.bd-hub-headcard { display: grid; gap: 10px; max-width: 760px; }
.bd-hub-headcard .bk-status-headline { margin: 0; }
.bd-hub-section .bk-logo { margin-bottom: 16px; }
.bd-hub-more { margin-top: 8px; }
.bd-hub-more > summary,
.bd-facet-more > summary {
  cursor: pointer;
  padding: 8px 10px;
  font: 12px var(--eh-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eh-white-muted);
  border-radius: var(--eh-radius-sm);
  transition: color .15s var(--eh-ease), background-color .15s var(--eh-ease);
}
.bd-hub-more > summary:hover,
.bd-facet-more > summary:hover { color: var(--eh-white); background: rgba(255,255,255,0.05); }
.bd-hub-more > summary:focus-visible,
.bd-facet-more > summary:focus-visible { outline: 2px solid var(--eh-ember-bright); outline-offset: 2px; }
.bd-hub-more[open] > summary { margin-bottom: 8px; }

/* Result rows: an extra note line (match method, GLEIF relation) */
.bk-result-meta.bd-result-note { color: var(--eh-white-muted); }

/* ─── Search list ──────────────────────────────────────────────── */
.bd-search-section { padding-top: clamp(40px, 4vw, 56px); }
.bd-facet-note {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--eh-white-dim);
}
.bd-facet-note strong { color: var(--eh-white-muted); font-weight: 600; }
.bd-facet-more[open] > summary { margin-bottom: 2px; }
.bd-search-filters .fm-cc-more { margin-top: 4px; }
.bd-search-filters .fm-cc-more .bd-field { display: grid; gap: 6px; }
.bd-search-empty { padding: 32px 0; }
.bd-hub-banners { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.bd-hub-banner {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 16px;
  border: 1px solid var(--eh-rule-strong);
  border-radius: var(--eh-radius-md);
  background: color-mix(in srgb, var(--eh-blue-glow) 8%, transparent);
  color: var(--eh-white);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: border-color .15s var(--eh-ease), background-color .15s var(--eh-ease);
}
.bd-hub-banner .elu-mono-label { color: var(--eh-blue-light); font-weight: 400; }
.bd-hub-banner:hover { border-color: var(--eh-blue-light); background: color-mix(in srgb, var(--eh-blue-glow) 14%, transparent); }

/* Which one? */
.bd-choices { max-width: 960px; }
.bd-choice-group + .bd-choice-group { margin-top: 56px; }
.bd-choice-title { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 12px; }
.bd-choice-group > .bd-intro-text { margin-bottom: 20px; font-size: 15px; }

/* ─── The profile block (netlify/lib/directory-ui.mjs profileBlock) ─
   One component on every collective page and the landing: five KPI tiles and
   "at a glance" — one 100% stacked bar per attribute (type · identification ·
   regulation level · region · LEI), every row the same institutions. Segment
   colours are single-hue ordinal steps of the validated --bd-ramp-* (never a
   rainbow, never ember); identity is never colour alone: each row carries a
   direct-label key (name · count · share), a hover title and a table view. */
.bd-profile { margin-top: 32px; }
.bd-profile-sentence { max-width: 820px; margin: 0 0 24px; font-size: 16px; color: var(--eh-white-muted); }
.bd-profile-kpis .bd-kpi-note { line-height: 1.45; }
.bd-glance { margin-top: 20px; padding: 24px 24px 20px; }
.bd-glance .bd-card-head { margin-bottom: 8px; }
.bd-glance-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px 20px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--eh-rule);
}
.bd-glance-label { margin: 0; color: var(--eh-white-dim); }
.bd-glance-bar { display: flex; gap: 2px; height: 18px; }
.bd-glance-seg { display: block; min-width: 3px; height: 100%; transition: opacity .15s var(--eh-ease); }
.bd-glance-seg:first-child { border-radius: 4px 0 0 4px; }
.bd-glance-seg:last-child { border-radius: 0 4px 4px 0; }
.bd-glance-seg:only-child { border-radius: 4px; }
.bd-glance-bar:hover .bd-glance-seg { opacity: 0.55; }
.bd-glance-bar .bd-glance-seg:hover { opacity: 1; }
.bd-glance-key {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--eh-white-muted);
}
.bd-glance-key li { display: inline-flex; align-items: center; gap: 7px; }
.bd-glance-key a {
  display: inline;
  margin: 0;                      /* undo the legacy Webflow link rule (20px top margin, Barlow) */
  font: inherit;
  color: var(--eh-white-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--eh-white-faint);
  transition: border-color .15s var(--eh-ease), color .15s var(--eh-ease);
}
.bd-glance-key a:hover,
.bd-glance-key a:focus-visible { color: var(--eh-white); border-color: var(--eh-ember-bright); }
.bd-glance-num { font: 11px var(--eh-font-mono); color: var(--eh-white-dim); white-space: nowrap; }
.bd-profile-table { margin-top: 8px; }
.bd-profile-table tbody th {
  padding-top: 12px;
  text-align: left;
  font: 600 12px var(--eh-font-body);
  color: var(--eh-blue-light);
}
.bd-profile-def { max-width: 820px; margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--eh-white-dim); }
.bd-hero .bd-profile { margin-top: 36px; }
.bd-search-hero .bd-profile-def { margin: 14px 0 36px; }
.bd-search-profile { max-width: 820px; margin: 8px 0 16px; font-size: 15px; }

/* The one row format (directory-ui resultRow) — every list of institutions on
   every directory page. Undo the legacy Webflow link rule (20px top margin,
   Barlow) on the row's <a>, so rows sit on the list's 8px rhythm in the body font. */
.bk-results .bk-result { margin: 0; font-family: var(--eh-font-body); text-decoration: none; }
.bk-results .bk-result:hover,
.bk-results .bk-result:focus-visible { text-decoration: none; }
.bk-results .bk-result-meta { font-family: var(--eh-font-mono); }
/* "No BIC" in the identifier slot reads as an attribute, not a code. */
.bk-result-bic.is-none,
.bd-search-results .bd-r-bic.is-none { font-weight: 400; color: var(--eh-white-dim); }

/* Two-tone bars outside the profile block (landing top countries, regions, registers). */
.bd-bars.is-tone .bd-bar-label small { display: block; margin: 2px 0 0; font-size: 11px; }

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .bd-hub-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Results before the (long) facet list on narrow screens. */
  .bd-search-section .fm-dir-results { order: -1; }
}
@media (max-width: 640px) {
  .bd-hub-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-profile-kpis .bd-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bd-glance { padding: 20px 16px 16px; }
  .bd-glance-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bd-glance-key { grid-column: 1; }
  .bd-hub-section { padding: 40px 0; }
  .bd-hub-table th,
  .bd-hub-table td { padding: 8px 10px; }
  .bd-table.bd-hub-table.bd-hub-index { min-width: 600px; }
  .bd-hub-banner { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-hub-inline, .bd-hub-research a, .bd-hub-region-title a, .bd-hub-more > summary,
  .bd-facet-more > summary, .bd-hub-banner, .bd-glance-seg, .bd-glance-key a { transition: none; }
}