/* ---- Live price block on a bond page (bondlive.js) -------------------------
   Added 7 Sep 2026. These pages carried terms and no price, so a reader arriving
   from a search for "Nigeria 6.5% 2027 price" found everything except the thing
   they searched for. The numbers are fetched at page load and never written into
   the file — see the header of bondlive.js for why that distinction is the whole
   point.

   Styled to sit BELOW the h1 and ABOVE the terms: the price is what was searched
   for, the terms are why it can be trusted. */
.bondlive[hidden] { display: none; }
.bondlive {
  margin: 0 0 26px; padding: 14px 16px;
  border: 1px solid var(--border, #21262d); border-radius: 10px;
  background: var(--bg2, #0f141b);
}
.bl-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px;
}
.bl-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bl-k {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim, #6e7681);
}
.bl-v {
  font-size: 19px; font-weight: 600; color: var(--text, #c9d1d9);
  font-variant-numeric: tabular-nums;
}
.bl-note {
  margin: 12px 0 0; font-size: 11.5px; line-height: 1.55;
  color: var(--text-dim, #6e7681);
}
.bl-note a { color: var(--accent, #58a6ff); }
.bl-stale {
  display: inline-block; margin: 0 4px; padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--amber, #e3b341); color: var(--amber, #e3b341);
  font-size: 10.5px;
}
.bl-none { font-size: 12.5px; line-height: 1.6; color: var(--text-mid, #8b949e); }
.bl-none a { color: var(--accent, #58a6ff); }
.bl-chartbox { margin-top: 14px; }
.bl-chartbox[hidden] { display: none; }
.bl-canvas { position: relative; height: 200px; }
.bl-periods { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.bl-periods button {
  background: var(--bg3, #161b22); border: 1px solid var(--border, #21262d);
  color: var(--text-mid, #8b949e); font: inherit; font-size: 10.5px;
  padding: 3px 9px; border-radius: 5px; cursor: pointer;
}
.bl-periods button:hover { color: var(--text, #c9d1d9); }
.bl-periods button.on {
  background: var(--accent, #58a6ff); border-color: var(--accent, #58a6ff); color: #fff;
}
@media (max-width: 620px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-v { font-size: 17px; }
  .bl-canvas { height: 170px; }
}