/* issuer-map.css — the latinbonds.com issuer map (issuer-map.js).
   Colours are tokens: the issuer-type slots (--lbm-t0 .. --lbm-t5, in the data's
   type order) are the dataviz reference palette's steps, checked with its
   validator (--pairs all, as a bubble map needs) against the land they sit on.
   No sixth hue clears the all-pairs floors beside five, so the sixth slot,
   Supranational (two issuers), is a neutral. Every hue pair clears the
   normal-vision floor; Corporate/State-owned sits in the 6-8 CVD band. The type
   chips (which isolate a type), the tooltip's type line and the table view are
   the secondary encoding.
   One theme, light: the app takes the site's theme, and latinbonds.com's
   site.css is light only, so the page stays light under a dark OS setting (a
   dark theme of the app's own would darken the page under the site's light
   header and leave the site's own text colours on it). */
.lbm, .chart-tip {
  --lbm-surface: var(--paper, #f6f4ef);
  --lbm-card: #fcfbf8;
  --lbm-ink: var(--ink, #1b2330);
  --lbm-muted: #5b6370;
  --lbm-hair: rgba(27, 35, 48, 0.14);
  --lbm-sea: #f4f6f7;
  --lbm-land: #e2ddd2;
  --lbm-land-hot: #d5cfc1;
  --lbm-country-ink: #4a515c;
  --lbm-border: #fcfbf8;
  --lbm-context: #ecebe6;
  --lbm-local: #ffffff;
  --lbm-foreign: #1b2330;
  --lbm-key-fill: #c9c4b8;
  --lbm-accent: var(--primary, #12395c);
  --lbm-t0: #2a78d6;
  --lbm-t1: #e34948;
  --lbm-t2: #eda100;
  --lbm-t3: #1baf7a;
  --lbm-t4: #008300;
  --lbm-t5: #52514e;
  --lbm-cov: var(--accent, #c4582f);
  color: var(--lbm-ink);
}
.lbm *, .lbm *::before, .lbm *::after { box-sizing: border-box; }
.lbm h1 { margin-bottom: 8px; }
.lbm h1, .lbm .lbm-h { color: var(--lbm-accent); }
.lbm-lede { max-width: 72ch; margin: 0 0 16px; color: var(--lbm-ink); }
.lbm-muted { color: var(--lbm-muted); }

/* controls: one row above the map */
.lbm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 12px; }
.lbm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lbm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; border: 1px solid var(--lbm-hair);
  border-radius: 18px; background: var(--lbm-card); color: var(--lbm-ink); font: inherit; font-size: 14px; cursor: pointer; }
.lbm-chip[aria-pressed="false"] { opacity: 0.5; }
.lbm-chip[aria-pressed="false"] .lbm-swatch { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--lbm-muted); }
.lbm-chip:focus-visible, .lbm-country select:focus-visible, .lbm-map:focus-visible, .lbm-link:focus-visible, .lbm-close:focus-visible {
  outline: 2px solid var(--lbm-accent); outline-offset: 2px; }
.lbm-chip-n { color: var(--lbm-muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.lbm-swatch { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-right: 2px; }
.lbm-country { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.lbm-country select { min-height: 36px; max-width: 100%; padding: 4px 8px; border: 1px solid var(--lbm-hair); border-radius: 6px;
  background: var(--lbm-card); color: var(--lbm-ink); font: inherit; }

/* map + side panel */
.lbm-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.lbm-figure { margin: 0; min-width: 0; }
.lbm-map { position: relative; width: 100%; height: max(560px, calc(100vh - 120px)); background: var(--lbm-sea);
  border: 1px solid var(--lbm-hair); border-radius: 8px; overflow: hidden; touch-action: manipulation; }
.lbm-svg { display: block; width: 100%; height: 100%; }
.lbm-sea { fill: var(--lbm-sea); }
.lbm-context path { fill: var(--lbm-context); stroke: var(--lbm-sea); stroke-width: 0.5px; vector-effect: non-scaling-stroke; }
.lbm-land path { fill: var(--lbm-land); stroke: var(--lbm-border); stroke-width: 0.75px; vector-effect: non-scaling-stroke; }
.lbm-dot { fill-opacity: 0.9; vector-effect: non-scaling-stroke; }
.lbm-dot.is-foreign { stroke: var(--lbm-foreign); }
.lbm-dot.is-local { stroke: var(--lbm-local); }
.lbm-dot.is-unpriced { stroke-dasharray: 2 2; }
.lbm-map.is-hovering { cursor: pointer; }
.lbm-ring-o, .lbm-ring-i { fill: none; vector-effect: non-scaling-stroke; pointer-events: none; }
.lbm-ring-o { stroke: var(--lbm-sea); stroke-width: 4px; }
.lbm-ring-i { stroke: var(--lbm-ink); stroke-width: 1.5px; }
.lbm-ring.is-pin .lbm-ring-i { stroke: var(--lbm-accent); stroke-width: 2.5px; }
.lbm-labels { position: absolute; inset: 0; pointer-events: none; }
.lbm-label { position: absolute; white-space: nowrap; font-size: 12px; line-height: 1.2; font-weight: 600; color: var(--lbm-ink);
  text-shadow: 0 0 2px var(--lbm-sea), 0 0 2px var(--lbm-sea), 0 0 3px var(--lbm-sea); }
/* country names: a click on one (or on the country's land) chooses the
   country; issuer-map.js finds them by their boxes, so they take no pointer
   events of their own and a drag across one still pans */
.lbm-clabel { position: absolute; white-space: nowrap; font-size: 11px; line-height: 1.2; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lbm-country-ink); text-shadow: 0 0 2px var(--lbm-land), 0 0 2px var(--lbm-land), 0 0 3px var(--lbm-land); }
.lbm-clabel.is-on { color: var(--lbm-accent); font-weight: 700; }
.lbm-land path.is-hot { fill: var(--lbm-land-hot); }
.lbm-caption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--lbm-muted); }
.lbm-caption p { margin: 0 0 6px; max-width: 80ch; }
.lbm-error { padding: 24px; }

.lbm-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lbm-pin, .lbm-key { background: var(--lbm-card); border: 1px solid var(--lbm-hair); border-radius: 8px; padding: 14px 16px; }
.lbm-h { margin: 0 0 6px; font-size: 17px; line-height: 1.3; }
.lbm-h3 { margin: 14px 0 6px; font-size: 14px; }
.lbm-pin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lbm-close { flex: none; width: 32px; height: 32px; border: 1px solid var(--lbm-hair); border-radius: 50%; background: transparent; color: var(--lbm-ink);
  font-size: 18px; line-height: 1; cursor: pointer; }
.lbm-pin-sub { margin: 0 0 8px; font-size: 14px; color: var(--lbm-muted); }
.lbm-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 14px; }
.lbm-facts dt { color: var(--lbm-muted); }
.lbm-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.lbm-bonds { margin: 0; padding: 0 0 0 20px; max-height: 380px; overflow: auto; font-size: 13.5px; }
.lbm-bonds li { margin: 0 0 6px; }
.lbm-bonds a { color: var(--lbm-accent); }
.lbm-bond-meta { display: block; color: var(--lbm-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lbm-here { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; }
.lbm-here li { margin: 0 0 2px; }
.lbm-link { padding: 3px 0; border: 0; background: none; color: var(--lbm-accent); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.lbm-unsized { margin-top: 10px; font-size: 13.5px; }
.lbm-unsized ul { margin: 6px 0 0; padding-left: 18px; max-height: 260px; overflow: auto; }

.lbm-key-block { margin: 10px 0 0; }
.lbm-key-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.lbm-key-rows { display: grid; gap: 2px; }
.lbm-key-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lbm-key-circle { fill: var(--lbm-key-fill); fill-opacity: 0.5; stroke: var(--lbm-muted); stroke-width: 1px; }
.lbm-key-land { fill: var(--lbm-land); }
.lbm-key-text { fill: var(--lbm-ink); font-size: 12px; font-variant-numeric: tabular-nums; }

/* table view */
.lbm-table { margin-top: 20px; }
.lbm-table summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.lbm-table-wrap { overflow-x: auto; max-height: 70vh; margin-top: 8px; }
.lbm-tbl { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.lbm-tbl th, .lbm-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--lbm-hair); text-align: left; white-space: nowrap; }
.lbm-tbl th { position: sticky; top: 0; background: var(--lbm-card); }
.lbm-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* the site's one tooltip (chart_tips.js), styled here so the page needs nothing else */
.chart-tip { position: fixed; z-index: 50; max-width: min(320px, calc(100vw - 16px)); padding: 9px 11px; border-radius: 6px;
  background: var(--lbm-card, #fcfbf8); color: var(--lbm-ink, #1b2330); border: 1px solid var(--lbm-hair, rgba(27, 35, 48, 0.14));
  box-shadow: 0 4px 16px rgba(10, 20, 30, 0.16); font-size: 13px; line-height: 1.4; pointer-events: none; }
.chart-tip[hidden] { display: none; }
.lbm-tip-name { font-weight: 700; font-size: 14px; }
.lbm-tip-sub, .lbm-tip-row, .lbm-tip-foot { color: var(--lbm-muted, #5b6370); }
.lbm-tip-type { margin: 3px 0; }
.lbm-tip-value strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.lbm-tip-foot { margin-top: 4px; font-size: 12px; }
.lbm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
  /* one column: the map, then the pinned issuer and the key, then the caption */
  .lbm-body { grid-template-columns: minmax(0, 1fr); }
  .lbm-figure { display: contents; }
  .lbm-map { order: 1; height: auto; aspect-ratio: 1000 / 1380; }
  .lbm-side { order: 2; }
  .lbm-caption { order: 3; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lbm * { transition: none !important; scroll-behavior: auto !important; }
}

/* city points the circles are packed around, and a firm's member names */
.lbm-city { fill: var(--lbm-ink); stroke: var(--lbm-sea); stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }
.lbm-members { margin: 0; padding: 0 0 0 18px; font-size: 13.5px; }
.lbm-members li { margin: 0 0 4px; }

/* zoom buttons, top right of the map */
.lbm-zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; }
.lbm-zoom-btn { width: 36px; height: 36px; border: 1px solid var(--lbm-hair); border-radius: 6px; background: var(--lbm-card); color: var(--lbm-ink); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.lbm-zoom-btn:focus-visible { outline: 2px solid var(--lbm-accent); outline-offset: 2px; }
.lbm-svg { cursor: grab; touch-action: pan-y; }
.lbm-map.is-hovering .lbm-svg { cursor: pointer; }

/* the coverage view (apps/coverage-map): one circle per country, an exhibit
   among the page's charts: the site's chart width, panel and type (--wide,
   --surface, --primary, --sans), the table beside the map where the width
   allows and under it otherwise */
.app-embed:has(> .lbm-cov) { max-width: var(--wide, 1056px); }
.lbm-cov { margin: 32px 0 40px; padding: 22px 28px 24px; background: var(--surface, var(--lbm-card));
  border-top: 3px solid var(--primary, var(--lbm-accent)); font-family: var(--sans, inherit);
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(250px, 2fr); gap: 4px 32px; align-items: start; }
.lbm-cov-map { grid-column: 1; grid-row: 2; height: auto; aspect-ratio: 1000 / 1380; max-height: 88vh; }
.lbm-cov-details { grid-column: 2; grid-row: 2; }
/* the caption leads, as the site's chart captions do */
.lbm-cov-caption { grid-column: 1 / -1; grid-row: 1; margin: 0 0 14px; max-width: 78ch; font-size: 0.85rem; line-height: 1.55; color: var(--muted, var(--lbm-muted)); }
.lbm-cov-dot { fill: var(--lbm-cov); fill-opacity: 0.88; stroke: var(--lbm-card); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.lbm-cov-hit { fill: transparent; }
.lbm-cov-link { cursor: pointer; }
.lbm-cov-link:hover .lbm-cov-dot, .lbm-cov-link:focus .lbm-cov-dot { stroke: var(--lbm-ink); stroke-width: 2.5px; fill-opacity: 1; }
.lbm-cov-link:focus { outline: none; }
.lbm-cov-label.is-inside { color: #ffffff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.35); }
.lbm-cov-details summary { cursor: pointer; font-weight: 600; min-height: 32px; color: var(--primary, var(--lbm-accent)); }
.lbm-cov .lbm-table-wrap { max-height: none; margin-top: 0; }
.lbm-cov-tbl td a { color: inherit; }
@media (max-width: 900px) {
  .lbm-cov { grid-template-columns: minmax(0, 1fr); padding: 14px 12px 16px; }
  .lbm-cov-map { max-height: none; }
  .lbm-cov-details { grid-column: 1; grid-row: 3; margin-top: 10px; }
}