/* ==========================================================================
   Directory landing — directory.html (/directory) only.
   Loaded after css/directory.css and reuses its .bd-* / .bk-* atoms; this file
   holds only what the landing adds (never edits directory.css rules in place).
   Dark-navy theme; tokens only (css/elucidate-tokens.css).
   ========================================================================== */

/* Figures inside headings (<em><span data-istat>…) keep the heading's colour:
   a legacy rule injected with the site partials paints every "h2 span" blue. */
.bd-h2 span { color: inherit; }

/* Section intros that run to several short paragraphs (TONE.md §4). */
.bd-intro-text + .bd-intro-text { margin-top: 12px; }

/* ─── Chart rows that link to a hub or entity page ───────────────────────
   barList renders <a class="bd-bar-row"> when a row has a destination. Undo
   the legacy Webflow link rule (margin, Barlow, blue, hover underline). */
.bd-bars a.bd-bar-row {
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
}
.bd-bars a.bd-bar-row:hover,
.bd-bars a.bd-bar-row:focus-visible { text-decoration: none; }
.bd-bars a.bd-bar-row:focus-visible { outline: 2px solid var(--eh-ember-bright); outline-offset: 2px; }
.bd-bars a.bd-bar-row:hover .bd-bar-label,
.bd-bars a.bd-bar-row:focus-visible .bd-bar-label { color: var(--eh-white); }

/* Entity / group lists inside chart cards (.bk-results markup). */
.bd-inst-list .bk-result { margin: 0; font-family: inherit; }
.bd-inst-list .bk-result:hover,
.bd-inst-list .bk-result:focus-visible { text-decoration: none; }
.bd-card .bd-card-note + .bk-more { margin-top: 12px; }

.bd-card-sub code {
  font-family: var(--eh-font-mono);
  font-size: 0.95em;
  padding: 1px 5px;
  border-radius: var(--eh-radius-sm);
  background: rgba(255,255,255,0.08);
  color: var(--eh-white);
}

/* ─── Hero: coverage line + the profile block (baked; directory-ui profileBlock) ───
   Purpose-first lead, the search, the coverage stated once, then the KPI tiles
   (#bd-profile), the group network (#bd-connections, below) and "the directory at
   a glance" (#bd-glance; both halves styled in css/directory-hubs.css). */
.bd-coverage-line { max-width: 820px; margin: 36px 0 0; font-size: 14px; line-height: 1.55; color: var(--eh-white-muted); }
.bd-hero .bd-coverage-line + #bd-profile .bd-profile { margin-top: 16px; }
.bd-hero #bd-profile + .bd-net { margin-top: 20px; }
.bd-hero .bd-profile + .bd-kpis.is-secondary,
.bd-hero #bd-profile + .bd-kpis.is-secondary,
.bd-hero #bd-glance + .bd-kpis.is-secondary { margin-top: 20px; }

/* ─── 02 What they are: types × attributes (baked) ───────────────────────
   One sequential ramp: a cell's fill is --bd-ramp-3 mixed in proportion to
   its share; text stays white on every step. */
.bd-matrix-card { padding-bottom: 20px; }
.bd-table.bd-matrix { min-width: 860px; }
.bd-matrix th,
.bd-matrix td { padding: 12px 14px; vertical-align: top; }
.bd-matrix thead th { white-space: normal; }
.bd-matrix thead small,
.bd-matrix tbody small { display: block; margin-top: 3px; font: 11px var(--eh-font-mono); letter-spacing: 0; text-transform: none; color: var(--eh-white-dim); }
.bd-matrix tbody th { font: 600 14px var(--eh-font-body); color: var(--eh-white); text-align: left; max-width: 260px; }
.bd-matrix tbody th small { font-family: var(--eh-font-body); font-size: 12px; font-weight: 400; line-height: 1.4; white-space: normal; }
.bd-table.bd-matrix tbody th a {
  font: 600 14px var(--eh-font-body);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--eh-white);
  text-decoration: none;
  border-bottom: 1px solid var(--eh-white-faint);
  transition: border-color .15s var(--eh-ease);
}
.bd-table.bd-matrix tbody th a:hover,
.bd-table.bd-matrix tbody th a:focus-visible { border-color: var(--eh-ember-bright); }
.bd-matrix td.is-num { font: 13px var(--eh-font-mono); color: var(--eh-white); }
.bd-matrix td.bd-mx { border-left: 2px solid var(--eh-navy); }
.bd-matrix td.bd-mx.is-none { color: var(--eh-white-dim); }
/* Narrow screens scroll the matrix sideways: the type column stays in view. */
.bd-matrix tbody th { position: sticky; left: 0; z-index: 1; background: var(--eh-navy); }

/* ─── 03 How they are identified: BIC codes facts ───────────────────────── */
.bd-bic-facts { grid-template-columns: minmax(0, 1fr); }

/* ─── 09 Browse (slim): a country select + the indexes and search ───────── */
.bd-browse-grid.is-slim { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bd-browse-index { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.bd-browse-index .bk-more { margin-top: 4px; }

@media (max-width: 640px) {
  .bd-browse-grid.is-slim { grid-template-columns: minmax(0, 1fr); }
  .bd-matrix tbody th { min-width: 150px; max-width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-matrix tbody th a { transition: none; }
}

/* ─── Map: "No tracked register" ──────────────────────────────────────────
   Countries no tracked register covers get a 45° hatch (SVG pattern
   #bd-hatch, js/directory.js) and their own legend entry, so "not covered"
   never reads as zero or as the lowest ramp step. Neutral ink only. */
.bd-map .bd-hatch-bg { fill: var(--bd-land-empty); }
.bd-map .bd-hatch-line { stroke: var(--eh-white-faint); stroke-width: 1.4; }
.bd-map .bd-land.is-uncovered { cursor: pointer; }
.bd-map-legend .bd-swatch.is-hatched {
  background: repeating-linear-gradient(135deg, var(--eh-white-faint) 0 1.5px, var(--bd-land-empty) 1.5px 4px);
}

/* ─── 09 Browse ──────────────────────────────────────────────────────────
   Countries and groups stacked on the left (.bd-browse-side); the registers
   (22, long official names) take the right two-thirds, in two columns. */
.bd-browse-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px;
  align-items: start;
}
.bd-browse-side { display: grid; gap: 24px; }
.bd-browse-card .bd-card-sub { margin-bottom: 20px; }
.bd-browse-card .bk-more { display: table; margin-top: 16px; }
.bd-browse-card .bk-more + .bk-more { margin-top: 10px; }
.bd-browse-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--eh-white-muted); }

.bd-browse-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}
.bd-browse-form[hidden] { display: none; }
.bd-browse-form .bd-field { min-width: 0; }
.bd-browse-form select { width: 100%; min-width: 0; }
.bd-browse-form .elu-btn { height: 52px; margin: 0; }

.bd-browse-registers,
.bd-browse-links { margin: 0; padding: 0; list-style: none; }
.bd-browse-registers { columns: 2; column-gap: 40px; }
.bd-browse-registers > li { break-inside: avoid; padding-bottom: 18px; }
.bd-browse-publisher { margin: 0 0 6px; color: var(--eh-white-dim); }
.bd-browse-links { display: grid; gap: 6px; }
.bd-browse-links li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
}
.bd-browse-links a {
  margin: 0;
  font-family: inherit;
  font-weight: 500;
  color: var(--eh-white);
  text-decoration: none;
  border-bottom: 1px solid var(--eh-white-faint);
  transition: border-color .15s var(--eh-ease);
}
.bd-browse-links a:hover,
.bd-browse-links a:focus-visible { text-decoration: none; border-color: var(--eh-ember-bright); }
.bd-browse-count {
  flex-shrink: 0;
  font: 12px var(--eh-font-mono);
  color: var(--eh-white-dim);
  font-variant-numeric: tabular-nums;
}

/* ─── Sources & method + CTA ─────────────────────────────────────────── */
.bd-sources + .bd-sources-lead { margin-top: 24px; }
.bd-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.bd-cta-actions .bk-more { margin-top: 0; }

/* ─── Research strip ─────────────────────────────────────────────────── */
.bd-research-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.bd-research-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--eh-rule);
  border-radius: var(--eh-radius-lg);
  background: var(--bd-surface);
  font-family: inherit;
  color: var(--eh-white);
  text-decoration: none;
  transition: border-color .15s var(--eh-ease), background-color .15s var(--eh-ease), transform .25s var(--eh-ease);
}
.bd-research-item:hover,
.bd-research-item:focus-visible {
  text-decoration: none;
  border-color: var(--eh-rule-strong);
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
}
.bd-research-label { color: var(--eh-white-dim); }
.bd-research-title { font-size: 16px; font-weight: 600; line-height: 1.4; }

/* ─── Group network (#bd-connections, baked; in the hero, under the KPI tiles) ─
   scripts/lib/directory-connections.mjs renders the disc: two ring layers, a
   one SVG (outer ring, faint links, wires, nodes, hover
   layer). Every circle and link path carries its group's colour (data-c: the
   four largest drawn groups; the rest are "other groups") and the lenses that
   fill it (data-on) or keep it at full strength as an outline (data-near);
   whatever a lens is not about is dimmed. A group keeps its colour in every
   view; the lens is emphasis.
   js/directory.js (setupConnections) plays the lenses in turn (.is-playing: the
   active lens's bar fills over --bd-net-dwell, then the next lens opens),
   pauses (.is-paused) while the graph is hovered, a tab is focused or the card
   is off screen, and stops for good when the reader selects a lens or presses
   Pause. A lens change grows out of the group parents along the links (see
   "Graph" below); lens texts open and close with grid rows; the dashed rings
   turn as whole layers (transform only, composited) and light particles flow
   along the links on a canvas (.bd-net-flow) — both while .is-moving, i.e. until
   the reader presses Pause (off by default with prefers-reduced-motion).

   Cluster palette: three muted hues at one lightness and chroma (OKLCH L 0.67,
   C 0.14–0.15) — periwinkle (the brand blue-light's family), sage, dusty rose —
   no token; validated all-pairs on the card surface (#111530) with the dataviz
   checker: worst CVD ΔE 10.5 (target 8), normal vision 16.6 (floor 15), all
   ≥ 3:1. Muted hues pass only three at a time, so the fourth-largest group and
   the rest are "other groups", a quiet slate (3.5:1). No orange, red or yellow:
   sanctions listings take the warning colour (--eh-ember-bright), and the
   Sanctions view greys every other institution, so orange never sits beside
   sage (the pair protanopes cannot separate). */
.bd-net {
  --bd-net-c1: #7b8bf0;    /* periwinkle */
  --bd-net-c2: #5faa57;    /* sage */
  --bd-net-c3: #d06fa9;    /* dusty rose */
  --bd-net-other: #666c8f; /* slate */
  --bd-net-accent: var(--eh-blue-light);   /* lens bar + outer ring (as the bank pages' .bk-graph-tab) */
  --bd-net-dwell: 7s;
  --c: var(--bd-net-other);
}
.bd-net [data-c="1"] { --c: var(--bd-net-c1); }
.bd-net [data-c="2"] { --c: var(--bd-net-c2); }
.bd-net [data-c="3"] { --c: var(--bd-net-c3); }

.bd-net-body {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  border-top: 1px solid var(--eh-rule);
}

/* Lenses: a vertical tab list. The bar down the divider runs to the top of the
   active lens (tracked every frame while lenses open and close), then the active
   lens's own bar: full, or filling while the views play. */
.bd-net-lenses {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 0;
  padding: 12px 0;
  border-right: 1px solid var(--eh-rule);
}
.bd-net-lenses::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  width: 2px;
  height: var(--bd-net-bar, 0px);
  background: var(--bd-net-accent);
}
.bd-net-lens { position: relative; margin: 0; padding: 14px 28px 14px 0; }
.bd-net.is-ready .bd-net-lens.is-active::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  width: 2px;
  height: 100%;
  background: var(--bd-net-accent);
  transform-origin: top;
}
/* A timer, so linear: its end (animationend) opens the next lens. */
.bd-net.is-playing .bd-net-lens.is-active::after { animation: bd-net-progress var(--bd-net-dwell) linear both; }
.bd-net.is-playing.is-paused .bd-net-lens.is-active::after { animation-play-state: paused; }
@keyframes bd-net-progress { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.bd-net-lens-title {
  margin: 0;
  font: 600 15px/1.4 var(--eh-font-body);
  letter-spacing: normal;
  color: var(--eh-white);
  transition: color .3s var(--eh-ease);
}
/* Once the script has made them tabs: dim until selected. */
.bd-net.is-ready .bd-net-lens-title { color: var(--eh-white-dim); cursor: pointer; }
.bd-net.is-ready .bd-net-lens-title:hover,
.bd-net.is-ready .bd-net-lens.is-active .bd-net-lens-title { color: var(--eh-white); }
.bd-net-lens-title:focus-visible { outline: 2px solid var(--eh-ember-bright); outline-offset: 4px; border-radius: var(--eh-radius-sm); }

/* Lens text: open without the script (and in the Markdown twin); with it, only the
   active lens is open, and opening / closing glides (grid rows 0fr ↔ 1fr). */
.bd-net-lens-body { display: grid; grid-template-rows: 1fr; }
.bd-net-lens-text { min-height: 0; overflow: hidden; margin: 0; font-size: 14px; line-height: 1.55; color: var(--eh-white-muted); }
/* The gap above the text is content, not padding, so a closed lens collapses to exactly 0. */
.bd-net-lens-text::before { content: ''; display: block; height: 8px; }
.bd-net.is-ready .bd-net-lens-body { grid-template-rows: 0fr; transition: grid-template-rows .6s var(--eh-ease); }
.bd-net.is-ready .bd-net-lens.is-active .bd-net-lens-body { grid-template-rows: 1fr; }
.bd-net.is-ready .bd-net-lens .bd-net-lens-text { opacity: 0; transform: translateY(-4px); transition: opacity .25s var(--eh-ease), transform .25s var(--eh-ease); }
.bd-net.is-ready .bd-net-lens.is-active .bd-net-lens-text { opacity: 1; transform: none; transition: opacity .5s var(--eh-ease) .2s, transform .5s var(--eh-ease) .2s; }
/* Measuring (every text open) and settling after it: no transitions, nothing drawn in between. */
.bd-net.is-ready.is-measuring .bd-net-lens .bd-net-lens-body { grid-template-rows: 1fr; }
.bd-net.is-ready.is-still .bd-net-lens .bd-net-lens-body,
.bd-net.is-ready.is-still .bd-net-lens .bd-net-lens-text,
.bd-net.is-ready.is-still .bd-net-lens.is-active .bd-net-lens-text { transition: none; }

/* Stage: the disc, the play control and the legends. */
.bd-net-stage { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 24px 0 0 32px; }
.bd-net-disc { position: relative; width: 100%; max-width: 600px; }
.bd-net-svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.bd-net-play {
  position: absolute;
  top: 16px;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--eh-rule);
  border-radius: var(--eh-radius-pill);
  background: transparent;
  font: 12px var(--eh-font-mono);
  color: var(--eh-white-muted);
  cursor: pointer;
  transition: color .15s var(--eh-ease), border-color .15s var(--eh-ease);
}
.bd-net-play:hover { color: var(--eh-white); border-color: var(--eh-rule-strong); }
.bd-net-play:focus-visible { outline: 2px solid var(--eh-ember-bright); outline-offset: 2px; }
.bd-net-play svg { width: 10px; height: 10px; fill: currentColor; }

/* Rings: the solid outer ring in the graph SVG; the dashed two as their own layers,
   turning slowly (in opposite directions) while the views play. */
.bd-net-ring { fill: none; }
.bd-net-ring.is-outer { stroke: var(--bd-net-accent); stroke-width: 2; }
.bd-net-ring.is-inner { stroke: var(--bd-net-c3); stroke-opacity: 0.55; stroke-dasharray: 3 6; }
.bd-net-ring.is-mid { stroke: var(--bd-net-c2); stroke-opacity: 0.45; stroke-dasharray: 8 7; }
.bd-net-ring-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform;
  animation: bd-net-spin 80s linear infinite paused;
}
.bd-net-ring-layer.is-mid { animation-duration: 130s; animation-direction: reverse; }
.bd-net.is-moving .bd-net-ring-layer { animation-play-state: running; }

/* The flow (js/directory-flow.js): a canvas over the graph, same box, drawn by the
   script only while the animation is on — particles along the links, in the
   groups' colours. Never takes the pointer (hover reads the SVG). */
.bd-net-flow { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
@keyframes bd-net-spin { to { transform: rotate(360deg); } }

/* Graph: coloured by group, dimmed unless the lens is about it.
   A lens change grows out of the group parents along the real links: a lit wire
   draws from its parent end (pathLength 1: dash offset 1 → 0) at one speed, and
   each institution lights — with a small pulse — as its wire reaches it.
   js/directory.js sets the timing per element: --t (start, s) and --d (draw
   time, s) from the path length back to the group parent. Going out, everything
   fades at once, fast; only coming in is staggered. */
.bd-net-links, .bd-net-wires, .bd-net-nodes { transition: opacity .3s var(--eh-ease); }
.bd-net-links path { fill: none; stroke: var(--c); stroke-opacity: 0.12; stroke-width: 0.8; }

.bd-net-wires path {
  fill: none;
  stroke: var(--c);
  stroke-width: 1;
  stroke-opacity: 0.6;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .35s var(--eh-ease), stroke .35s var(--eh-ease);
}
.bd-net[data-lens="parent"] .bd-net-wires [data-on~="parent"],
.bd-net[data-lens="abroad"] .bd-net-wires [data-on~="abroad"],
.bd-net[data-lens="branch"] .bd-net-wires [data-on~="branch"],
.bd-net[data-lens="nobic"] .bd-net-wires [data-on~="nobic"],
.bd-net[data-lens="listed"] .bd-net-wires [data-on~="listed"],
.bd-net[data-lens="listed"] .bd-net-wires [data-near~="listed"] {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--d, .35s) linear var(--t, 0s), stroke .35s var(--eh-ease);
}
.bd-net[data-lens="listed"] .bd-net-wires [data-near~="listed"] { stroke-opacity: 0.35; }

.bd-net-nodes circle {
  fill: var(--eh-navy);
  stroke: var(--c);
  stroke-width: 1;
  opacity: 0.3;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .35s var(--eh-ease), stroke .35s var(--eh-ease), opacity .35s var(--eh-ease);
}
.bd-net-nodes .is-head { stroke-width: 1.5; }
.bd-net-nodes .is-virtual { stroke-width: 1.5; stroke-dasharray: 2 2; }

.bd-net[data-lens="parent"] .bd-net-nodes [data-on~="parent"],
.bd-net[data-lens="abroad"] .bd-net-nodes [data-on~="abroad"],
.bd-net[data-lens="branch"] .bd-net-nodes [data-on~="branch"],
.bd-net[data-lens="nobic"] .bd-net-nodes [data-on~="nobic"],
.bd-net[data-lens="listed"] .bd-net-nodes [data-on~="listed"] {
  opacity: 1;
  fill: var(--c);
  stroke-width: 1.5;
  transition: fill .4s var(--eh-ease) var(--t, 0s), stroke .4s var(--eh-ease) var(--t, 0s), opacity .4s var(--eh-ease) var(--t, 0s);
  animation: bd-net-pulse .6s var(--eh-ease) var(--t, 0s) backwards;
}
.bd-net[data-lens="parent"] .bd-net-nodes [data-near~="parent"],
.bd-net[data-lens="nobic"] .bd-net-nodes [data-near~="nobic"],
.bd-net[data-lens="listed"] .bd-net-nodes [data-near~="listed"] {
  opacity: 1;
  transition: stroke .4s var(--eh-ease) var(--t, 0s), opacity .4s var(--eh-ease) var(--t, 0s);
}
@keyframes bd-net-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.7); } 100% { transform: scale(1); } }
/* Listings are a status, not a group: the warning colour, whatever the group — and
   the only colour in that view (everything else slate). */
.bd-net[data-lens="listed"] .bd-net-links path,
.bd-net[data-lens="listed"] .bd-net-wires path:not([data-on~="listed"]),
.bd-net[data-lens="listed"] .bd-net-nodes circle:not([data-on~="listed"]) { --c: var(--bd-net-other); }
.bd-net[data-lens="listed"] .bd-net-nodes [data-on~="listed"],
.bd-net[data-lens="listed"] .bd-net-wires [data-on~="listed"] { --c: var(--eh-ember-bright); }
/* Hover: the institution's group redrawn on top in its colour, the rest dimmed (js/directory.js). */
.bd-net.is-hovering .bd-net-links,
.bd-net.is-hovering .bd-net-wires,
.bd-net.is-hovering .bd-net-nodes { opacity: 0.3; }
.bd-net-hover path { fill: none; stroke: var(--c); stroke-opacity: 0.9; stroke-width: 1.2; }
.bd-net-hover circle { fill: var(--eh-navy); stroke: var(--c); stroke-width: 1.5; }
.bd-net-hover circle.is-focus { fill: var(--eh-white); stroke: var(--eh-white); }

/* Legends: group colours (every lens), then the active lens's key — the keys share
   one grid cell and cross-fade. */
.bd-net-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--eh-white-muted);
}
.bd-net-legend.bd-net-clusters { margin-top: 16px; color: var(--eh-white); }
.bd-net-legend[hidden] { display: none; }
.bd-net-keys { display: grid; margin-top: 10px; }
.bd-net-keys > .bd-net-legend { grid-area: 1 / 1; }
.bd-net.is-ready .bd-net-keys > .bd-net-legend { opacity: 0; visibility: hidden; transition: opacity .3s var(--eh-ease), visibility 0s linear .3s; }
.bd-net.is-ready .bd-net-keys > .bd-net-legend.is-shown { opacity: 1; visibility: visible; transition: opacity .45s var(--eh-ease) .15s, visibility 0s; }
.bd-net-legend li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.bd-net-swatch { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.bd-net-key { flex-shrink: 0; width: 10px; height: 10px; box-sizing: border-box; border: 1.5px solid var(--eh-white-muted); border-radius: 50%; background: var(--eh-navy); }
.bd-net-key.is-on { background: var(--eh-white-muted); }
.bd-net-key.is-off { opacity: 0.4; }
.bd-net-key.is-virtual { width: 12px; height: 12px; border-style: dashed; }
.bd-net-key.is-listed { border-color: var(--eh-ember-bright); background: var(--eh-ember-bright); }
.bd-net .bd-card-note { margin-top: 20px; }

/* ─── Responsive + motion ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .bd-browse-grid { grid-template-columns: minmax(0, 1fr); }
  .bd-net-body { grid-template-columns: minmax(0, 1fr); }
  .bd-net-lenses { justify-content: flex-start; padding: 8px 0 16px; border-right: 0; border-bottom: 1px solid var(--eh-rule); }
  .bd-net-lenses::after { display: none; }
  .bd-net-lens { padding: 10px 0 10px 16px; box-shadow: inset 2px 0 0 var(--eh-rule); }
  .bd-net.is-ready .bd-net-lens.is-active::after { right: auto; left: 0; }
  .bd-net-stage { padding: 16px 0 0; }
  .bd-net-play { position: static; align-self: flex-end; margin-bottom: 8px; }
  .bd-browse-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .bd-research-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bd-browse-side,
  .bd-research-list { grid-template-columns: minmax(0, 1fr); }
  .bd-browse-registers { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-browse-links a,
  .bd-research-item,
  .bd-net-lens-title,
  .bd-net-play,
  .bd-net-links, .bd-net-wires, .bd-net-nodes,
  .bd-net-wires path,
  .bd-net-nodes circle,
  .bd-net.is-ready .bd-net-lens-body,
  .bd-net.is-ready .bd-net-lens .bd-net-lens-text,
  .bd-net.is-ready .bd-net-lens.is-active .bd-net-lens-text,
  .bd-net.is-ready .bd-net-keys > .bd-net-legend,
  .bd-net.is-ready .bd-net-keys > .bd-net-legend.is-shown { transition: none; }
  /* The views only play if the reader presses Play; the lens bar (a timer) still runs then. */
  .bd-net-ring-layer { animation: none; }
  .bd-net[data-lens] .bd-net-nodes circle[data-on],
  .bd-net[data-lens] .bd-net-nodes circle[data-near],
  .bd-net[data-lens] .bd-net-wires path[data-on],
  .bd-net[data-lens] .bd-net-wires path[data-near] { transition: none; animation: none; }
  .bd-research-item:hover,
  .bd-research-item:focus-visible { transform: none; }
}