/* Blog components. Loaded on blog routes only.

   redesign-v2.css is a prebuilt Tailwind artifact with no config in the tree,
   so a new utility class there is silently unstyled. These are hand-written,
   same as the .doc-prose block in partials/docs-shell.

   Tokens are the site's own values, not new ones. The site is light only
   (:root{color-scheme:light} in redesign-v2.css), so there is no dark block. */
:root {
  --bp-ink: #0e2a4e;
  --bp-body: #3e5573;
  --bp-mute: #64789a;
  --bp-faint: #94a9c4;
  --bp-line: #dbe7f3;
  --bp-hair: #eef4fa;
  --bp-paper: #f6fafe;
  --bp-ice: #eaf3fc;
  --bp-accent: #2382d6;
  --bp-accent-dk: #1c68ac;
  --bp-accent-lt: #3d9be9;
  --bp-navy: #103059;
  --bp-code: #0369a1;
  --bp-pre: #0f172a;
  --bp-pre-ink: #e2e8f0;
  --bp-display: 'Sora', 'Inter', system-ui, sans-serif;
  --bp-body-face: 'Inter', system-ui, sans-serif;
  --bp-data: 'IBM Plex Mono', ui-monospace, monospace;
  --bp-wide: 880px;
}

/* Layout: the article, then a contents rail on the right.

   Article first in the source so reading order and crawlers both get the
   piece before its navigation. The rail is hidden below 1024px rather than
   stacking a list of links above the article.

   Inside the article, running text is capped shorter than figures. Tables
   here run to six columns and would scroll at the text measure. */
/* minmax(0, 1fr), not 1fr. A grid track sized `1fr` will not shrink below its
   content's min-content width, so a wide table leaked past the viewport on a
   phone even though it sits in its own overflow-x container. */
.bp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
/* 1240px, which is where .container stops growing. Below it the container is
   capped at 1024 and a 250px rail would squeeze the article to 662, narrow
   enough to put the six column table into a scroller. */
@media (min-width: 1240px) {
  .bp-grid { grid-template-columns: minmax(0, 1fr) 250px; gap: 3rem; }
}

.bp-side { display: none; }
@media (min-width: 1240px) {
  .bp-side { display: block; position: sticky; top: 96px; align-self: start; }
}
.bp-side__t { font-family: var(--bp-display); font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--bp-faint);
  padding-bottom: 9px; border-bottom: 1px solid var(--bp-line); }
/* The rail sits to the right of the text, so its marker sits on the right
   edge too and the two columns do not both bleed inwards. */
/* list-style is RESTORED, not just indented: the precompiled stylesheet
   carries Tailwind's preflight, which sets `ol,ul{list-style:none}`. */
.bp-toc { margin: 10px 0 0; padding: 0; list-style: none; }
.bp-toc li + li { margin-top: 2px; }
.bp-toc a { display: block; padding: 5px 11px 5px 0; border-right: 2px solid transparent;
  font-size: 13px; line-height: 1.42; color: var(--bp-mute); text-decoration: none;
  /* A heading with a shortcode in it can still run long, so the rail clips
     rather than growing a three line entry. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.bp-toc a:hover { color: var(--bp-ink); border-right-color: var(--bp-line); }
.bp-toc a.on { color: var(--bp-ink); border-right-color: var(--bp-accent); font-weight: 600; }

/* One width for everything in the body.

   The earlier split, text at 680 and figures at 880, left paragraphs ending
   short of every table and callout on the page and read as ragged rather than
   as a deliberate measure. Type is a step larger and looser to carry the
   longer line. */
.bp-article { max-width: var(--bp-wide); min-width: 0; }

/* ---- header ------------------------------------------------------------ */
.bp-crumbs { font-size: 13px; color: var(--bp-mute); }
.bp-crumbs a { color: var(--bp-mute); text-decoration: none; }
.bp-crumbs a:hover { color: var(--bp-ink); }
.bp-crumbs span { padding: 0 4px; color: var(--bp-faint); }

.bp-h1 { max-width: var(--bp-wide); font-family: var(--bp-display); font-weight: 700; color: var(--bp-ink);
  font-size: 30px; line-height: 1.22; letter-spacing: -.015em; margin: 14px 0 0;
  text-wrap: balance; }
@media (min-width: 768px) { .bp-h1 { font-size: 38px; } }

.bp-lede { font-size: 18px; line-height: 1.6; color: var(--bp-body); margin: 16px 0 0; max-width: var(--bp-wide); }
.bp-meta { font-family: var(--bp-data); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bp-faint); margin: 18px 0 0; }

/* ---- series nav -------------------------------------------------------- */
.bp-series { max-width: var(--bp-wide); margin: 26px 0 0; border: 1px solid var(--bp-line); border-radius: 14px;
  background: var(--bp-paper); padding: 16px 18px; }
.bp-series__t { font-family: var(--bp-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--bp-mute); margin-bottom: 8px; }
/* list-style is RESTORED, not just indented: the precompiled stylesheet carries
   Tailwind's preflight, which sets `ol,ul{list-style:none}` globally. */
.bp-series ol { margin: 0; padding-left: 20px; list-style: decimal; }
.bp-series li { font-size: 14.5px; line-height: 1.55; color: var(--bp-body); padding: 2px 0; }
.bp-series li::marker { color: var(--bp-faint); font-weight: 600; }
.bp-series li.here { color: var(--bp-ink); font-weight: 600; }
.bp-series li.here::marker { color: var(--bp-accent); font-weight: 700; }
.bp-series a { color: var(--bp-accent); text-decoration: none; }
.bp-series a:hover { text-decoration: underline; }

/* ---- author box -------------------------------------------------------- */
.bp-author { max-width: var(--bp-wide); display: flex; align-items: center; gap: 13px; margin: 22px 0 0;
  padding: 14px 0; border-top: 1px solid var(--bp-line); border-bottom: 1px solid var(--bp-line); }
.bp-author__av { width: 46px; height: 46px; flex: none; border-radius: 50%;
  object-fit: cover; background: var(--bp-ice); box-shadow: 0 0 0 1px var(--bp-line); }
.bp-author__n { font-family: var(--bp-display); font-size: 14.5px; font-weight: 600; color: var(--bp-ink); }
.bp-author__n a { color: var(--bp-ink); text-decoration: none; }
.bp-author__n a:hover { color: var(--bp-accent); text-decoration: underline; }
.bp-author__r { font-size: 13px; color: var(--bp-mute); line-height: 1.5; margin-top: 1px; }

/* ---- article body ------------------------------------------------------ */
.bp-prose { font-size: 16.5px; line-height: 1.78; color: var(--bp-body); margin-top: 30px; }
.bp-prose h2 { scroll-margin-top: 96px; font-family: var(--bp-display); font-weight: 700; color: var(--bp-ink);
  font-size: 24px; line-height: 1.3; margin: 44px 0 14px; scroll-margin-top: 96px;
  text-wrap: balance; }
.bp-prose h3 { font-family: var(--bp-display); font-weight: 600; color: var(--bp-ink);
  font-size: 17.5px; margin: 30px 0 8px; }
.bp-prose p { margin: 0 0 16px; }
.bp-prose ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.bp-prose ol { margin: 0 0 16px; padding-left: 22px; list-style: decimal; }
.bp-prose li { margin: 6px 0; padding-left: 2px; }
.bp-prose li::marker { color: var(--bp-faint); }
.bp-prose ol li::marker { color: var(--bp-mute); font-weight: 600; }
.bp-prose strong { color: var(--bp-ink); font-weight: 600; }
.bp-prose a { color: var(--bp-accent); }
.bp-prose em { color: var(--bp-mute); }
.bp-prose code { font-family: var(--bp-data); font-size: 13px;
  background: var(--bp-ice); color: var(--bp-code); border-radius: 6px; padding: 1.5px 6px; }
.bp-prose pre { background: var(--bp-pre); border-radius: 12px; padding: 16px 18px;
  overflow-x: auto; margin: 0 0 18px; max-width: none; }
.bp-prose pre code { background: none; color: var(--bp-pre-ink); padding: 0; font-size: 12.8px; line-height: 1.7; }
/* Markdown has no way to emit a div, so `>` is the callout. These posts carry
   no pull quotes. Documented on /blog/styleguide.

   A rule and an indent, not a tinted card. Set one step above running text in
   the body face rather than large and bold: the figure inside it is already
   the loud thing, and setting the whole sentence at display size fought it. */
.bp-prose blockquote {
  max-width: var(--bp-wide);
  margin: 30px 0;
  padding: 3px 0 3px 22px;
  border: 0;
  border-left: 2px solid var(--bp-accent);
  background: none;
  font-family: var(--bp-body-face);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--bp-body);
}
.bp-prose blockquote p { margin: 0 0 8px; }
.bp-prose blockquote p:last-child { margin: 0; }
/* The lead clause carries the figure, so it takes the ink colour and the
   weight. Everything after it stays ordinary. */
.bp-prose blockquote strong { font-weight: 600; color: var(--bp-ink); }
.bp-prose blockquote p + p { font-size: 15px; color: var(--bp-mute); }

/* ---- by the numbers ---------------------------------------------------- */
.bp-statrow {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px;
  background: var(--bp-line); border: 1px solid var(--bp-line); border-radius: 14px; overflow: hidden;
  margin: 28px 0; max-width: none; }
@media (min-width: 700px) { .bp-statrow { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.bp-statrow div { background: #fff; padding: 16px 15px; }
.bp-statrow b { display: block; font-family: var(--bp-display); font-weight: 700;
  color: var(--bp-accent-dk); line-height: 1.14; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  /* A nine digit count and a four character percentage share this grid. Size
     off the cell rather than a fixed step, or the long ones wrap mid number. */
  font-size: clamp(17px, 2.05vw, 25px); white-space: nowrap; }
@media (min-width: 1100px) { .bp-statrow b { font-size: clamp(18px, 1.62vw, 25px); } }
.bp-statrow span { display: block; font-size: 12.5px; color: var(--bp-mute); line-height: 1.45; margin-top: 5px; }

/* ---- figures: charts and tables ---------------------------------------- */
.bp-prose figure { margin: 30px 0; max-width: none; }
.bp-prose figcaption, .bp-ft { font-family: var(--bp-display); font-size: 14.5px;
  font-weight: 600; color: var(--bp-ink); margin-bottom: 4px; }
.bp-fs { font-size: 12.5px; color: var(--bp-mute); line-height: 1.5; margin-bottom: 12px; }
.bp-prose figure svg { display: block; width: 100%; height: auto; }
.bp-src { font-size: 12px; color: var(--bp-faint); margin-top: 9px; }

.bp-scroll { overflow-x: auto; border: 1px solid var(--bp-line); border-radius: 14px; }
.bp-prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0;
  max-width: none; }
.bp-prose th { text-align: left; font-family: var(--bp-display); font-size: 12px;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bp-mute);
  background: var(--bp-paper); padding: 8px 12px; border-bottom: 1px solid var(--bp-line);
  /* Headers wrap. Held on one line they were taking 450px across three numeric
     columns and squeezing the body cells into three line wraps. A two line
     header costs one row of height once. */
  vertical-align: bottom; }
.bp-prose td { padding: 9px 12px; border-bottom: 1px solid var(--bp-hair); vertical-align: top; color: var(--bp-body); }
/* A row whose label opens with an arrow is a breakdown of the row above it. */
.bp-prose td:first-child { text-wrap: pretty; }
.bp-prose tbody tr:last-child td { border-bottom: 0; }
.bp-prose td.n, .bp-prose th.n { text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--bp-data); }
/* Only the cell holds its line. A numeric heading kept on one line was setting
   the column width from the label rather than from the figures under it. */
.bp-prose td.n { white-space: nowrap; }
.bp-prose th.n { font-family: var(--bp-display); }
.bp-prose td.n { font-size: 13px; }
.bp-prose tbody tr:hover td { background: var(--bp-paper); }

/* ---- callout ----------------------------------------------------------- */
/* View-side twin of the markdown blockquote above. Same treatment, or the
   styleguide would show a component no post can produce. */
.bp-note { max-width: var(--bp-wide); margin: 34px 0; padding: 2px 0 2px 26px;
  border: 0; border-left: 1px solid var(--bp-ink); background: none;
  font-family: var(--bp-display); font-size: 21px; line-height: 1.38;
  color: var(--bp-ink); letter-spacing: -.008em; }
.bp-note b { font-weight: 600; color: var(--bp-ink); }
.bp-note p { margin: 0 0 10px; }
.bp-note p:last-child { margin: 0; }
.bp-note p + p { font-family: var(--bp-body-face); font-size: 15px;
  color: var(--bp-mute); line-height: 1.65; }

/* ---- method details ---------------------------------------------------- */
.bp-prose details { border: 1px solid var(--bp-line); border-radius: 12px; padding: 13px 16px;
  margin: 26px 0; background: #fff; max-width: none; }
.bp-prose details > summary { cursor: pointer; list-style: none; font-family: var(--bp-display);
  font-size: 14px; font-weight: 600; color: var(--bp-ink); display: flex; align-items: center; gap: 8px; }
.bp-prose details > summary::-webkit-details-marker { display: none; }
.bp-prose details > summary::before { content: ""; width: 5px; height: 5px; flex: none;
  border-right: 1.5px solid var(--bp-faint); border-bottom: 1.5px solid var(--bp-faint);
  transform: rotate(-45deg); transition: transform .15s ease; }
.bp-prose details[open] > summary::before { transform: rotate(45deg); margin-top: -3px; }
.bp-prose details > summary + * { margin-top: 12px; }
.bp-prose details p { font-size: 14px; }

/* ---- footer ------------------------------------------------------------ */
.bp-foot { max-width: var(--bp-wide); margin: 44px 0 0; border-top: 1px solid var(--bp-line); padding-top: 20px;
  font-size: 14.5px; line-height: 1.7; color: var(--bp-mute); }
.bp-foot a { color: var(--bp-accent); }

/* ---- chart ramp --------------------------------------------------------- */
/* Charts are server-rendered SVG, no library and no request. Bar fills are the
   site's sky scale, written per rect. SVG text does not inherit the page font,
   so it is set here. */
.bp-prose figure svg { font-family: var(--bp-body-face); font-size: 12px; fill: var(--bp-mute); }
.bp-prose figure svg text.lbl { fill: var(--bp-body); font-size: 12.5px; }
.bp-prose figure svg text.v { fill: var(--bp-ink); font-size: 12px; font-weight: 600;
  font-family: var(--bp-data); font-variant-numeric: tabular-nums; }
.bp-prose figure svg text.vi { fill: #fff; font-size: 12px; font-weight: 600;
  font-family: var(--bp-data); font-variant-numeric: tabular-nums; }

/* ---- index -------------------------------------------------------------
   Full width cards: the featured photograph on top, the title across the
   whole width beneath it. */
.bi-wrap { max-width: 980px; margin-inline: auto; }

.bi-head { text-align: center; }
.bi-eyebrow { font-family: var(--bp-data); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bp-faint); }
.bi-h1 { font-family: var(--bp-display); font-weight: 700; color: var(--bp-ink);
  font-size: 32px; line-height: 1.18; letter-spacing: -.018em; margin: 12px 0 0;
  text-wrap: balance; }
@media (min-width: 768px) { .bi-h1 { font-size: 40px; } }
.bi-sub { font-size: 16.5px; line-height: 1.65; color: var(--bp-body);
  margin: 14px auto 0; max-width: 64ch; }

.bi-list { display: grid; gap: 22px; margin: 44px 0 0; }
@media (min-width: 768px) { .bi-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bi-card { display: block; border: 1px solid var(--bp-line); border-radius: 18px;
  background: #fff; overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease; }
.bi-card:hover { border-color: var(--bp-accent-lt);
  box-shadow: 0 12px 32px -20px rgba(14,42,78,.4); }
.bi-img { display: block; aspect-ratio: 2 / 1; background: var(--bp-ice); }
.bi-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bi-body { padding: 18px 22px 22px; }
.bi-tag { display: flex; align-items: center; gap: 9px; font-family: var(--bp-data);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--bp-faint); }
.bi-part { color: var(--bp-accent-dk); background: var(--bp-ice);
  border-radius: 4px; padding: 2px 7px; letter-spacing: .05em; }
.bi-t { font-family: var(--bp-display); font-size: 24px; font-weight: 700;
  color: var(--bp-ink); line-height: 1.28; margin: 10px 0 0; letter-spacing: -.012em; }
@media (min-width: 768px) { .bi-t { font-size: 22px; } }
.bi-t a { color: inherit; text-decoration: none; }
.bi-t a:hover { color: var(--bp-accent-dk); }
.bi-s { font-size: 14.5px; line-height: 1.6; color: var(--bp-body); margin: 10px 0 0; }
.bi-go { display: inline-block; margin-top: 16px; font-family: var(--bp-display);
  font-size: 13.5px; font-weight: 600; color: var(--bp-accent); text-decoration: none; }
.bi-go::after { content: " \2192"; }

.bi-foot { text-align: center; margin: 40px 0 0; font-size: 13.5px; color: var(--bp-mute); }
.bi-foot a { color: var(--bp-accent); }

/* ---- agent cell --------------------------------------------------------- */
/* The prebuilt stylesheet carries Tailwind's preflight, which sets
   `img,object,svg,video{display:block}`. Left alone the icon takes its own
   line above the name, so the icon is put back inline here. */
.bp-prose .ag { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bp-prose .ag-ic { display: inline-block; width: 18px; height: 18px; flex: none;
  border-radius: 4px; object-fit: contain; }
.bp-prose .ag-n { font-family: var(--bp-data); font-size: 13px; color: var(--bp-ink); }
.bp-prose .ag-q { border-bottom: 1px dotted var(--bp-faint); cursor: help; }

/* A table row that breaks down the row above it. */
.bp-prose .bp-sub { display: inline-block; padding-left: 16px; color: var(--bp-mute);
  position: relative; }
.bp-prose .bp-sub::before { content: ""; position: absolute; left: 3px; top: .45em;
  width: 6px; height: 6px; border-left: 1px solid var(--bp-faint);
  border-bottom: 1px solid var(--bp-faint); }

/* ---- key findings ------------------------------------------------------- */
/* The list a reader pastes from. One figure per line, numbered so a citation
   can say "finding 4". */
.bp-findings { max-width: none; margin: 28px 0 8px; border: 1px solid var(--bp-line);
  border-radius: 14px; background: var(--bp-paper); padding: 18px 22px 14px; }
.bp-findings__t { font-family: var(--bp-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--bp-mute); margin-bottom: 8px; }
.bp-findings ol { margin: 0; padding-left: 22px; list-style: decimal; }
.bp-findings li { font-size: 15.5px; line-height: 1.6; color: var(--bp-body); padding: 4px 0 4px 4px; }
.bp-findings li::marker { color: var(--bp-accent-dk); font-weight: 700; font-family: var(--bp-data); }
.bp-findings strong { color: var(--bp-ink); font-weight: 600; }

/* ---- cite and reuse ------------------------------------------------------ */
.bp-cite { max-width: none; margin: 22px 0 0; display: grid; gap: 10px;
  grid-template-columns: minmax(0, 1fr); font-size: 13.5px; color: var(--bp-mute);
  border: 1px solid var(--bp-line); border-radius: 14px; padding: 14px 18px; background: #fff; }
@media (min-width: 760px) { .bp-cite { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.bp-cite__t { font-family: var(--bp-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--bp-faint); margin-bottom: 4px; }
.bp-cite__q { font-family: var(--bp-data); font-size: 12.5px; line-height: 1.55; color: var(--bp-body);
  word-break: break-word; }
.bp-cite__a { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-cite__a a, .bp-cite__a button { font-family: var(--bp-display); font-size: 12.5px; font-weight: 600;
  color: var(--bp-accent-dk); background: var(--bp-ice); border: 0; border-radius: 8px;
  padding: 7px 11px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.bp-cite__a a:hover, .bp-cite__a button:hover { background: #dbeafb; }

/* ---- figure tools -------------------------------------------------------- */
.bp-tools { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; }
.bp-tools a, .bp-tools summary { color: var(--bp-mute); text-decoration: none; cursor: pointer; }
.bp-tools a:hover, .bp-tools summary:hover { color: var(--bp-accent-dk); text-decoration: underline; }
.bp-tools details { display: inline; border: 0; padding: 0; margin: 0; background: none; }
.bp-tools details > summary { display: inline; font-family: var(--bp-body-face); font-weight: 400;
  font-size: 12px; list-style: none; }
.bp-tools details > summary::before { content: none; }
.bp-tools details > summary::-webkit-details-marker { display: none; }
.bp-tools details[open] { display: block; margin-top: 6px; }
.bp-embed { display: block; width: 100%; font-family: var(--bp-data); font-size: 11.5px; line-height: 1.5;
  color: var(--bp-body); background: var(--bp-paper); border: 1px solid var(--bp-line);
  border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; word-break: break-all; margin-top: 6px; }
.bp-embed__w { position: relative; }
.bp-embed__w .bp-embed { padding-right: 72px; }
.bp-copy { position: absolute; top: 12px; right: 8px; font: inherit; font-size: 11.5px; font-weight: 600;
  font-family: var(--bp-body-face); color: #3e5573; background: #f3f7fb; border: 1px solid var(--bp-line);
  border-radius: 6px; padding: 3px 9px; cursor: pointer; line-height: 1.5; }
.bp-copy:hover { color: #fff; background: var(--bp-accent); border-color: var(--bp-accent); }
.bp-copy.is-done { color: #fff; background: #1c68ac; border-color: #1c68ac; }
.bp-copy:focus-visible { outline: 2px solid var(--bp-accent); outline-offset: 2px; }
.bp-prose figure svg text.vs { fill: var(--bp-ink); font-size: 10px; font-weight: 600;
  font-family: var(--bp-data); font-variant-numeric: tabular-nums; }
.bp-prose figure svg text.lg { fill: var(--bp-body); font-size: 12px; }

/* ---- a real file --------------------------------------------------------- */
/* ---- diagram ------------------------------------------------------------- */
.bp-diagram { margin: 30px 0; max-width: none; }
.bp-diagram svg { display: block; width: 100%; height: auto; font-family: var(--bp-body-face); }
.bp-diagram svg text { font-size: 12.5px; fill: var(--bp-body); }
.bp-diagram svg text.code { font-family: var(--bp-data); font-size: 12px; fill: var(--bp-ink); }
.bp-diagram svg text.h { font-family: var(--bp-display); font-weight: 600; font-size: 13px; fill: var(--bp-ink); }
.bp-diagram svg text.ok { fill: #1c7c4f; font-weight: 600; }
.bp-diagram svg text.no { fill: #b42318; font-weight: 600; }
.bp-diagram svg text.src { fill: var(--bp-faint); font-size: 11px; }

/* ---- site cell + rank column --------------------------------------------- */
.bp-prose .ag a.ag-n { color: var(--bp-ink); text-decoration: none; }
.bp-prose .ag a.ag-n:hover { color: var(--bp-accent-dk); text-decoration: underline; }
.bp-prose .ag-mono { display: inline-flex; width: 18px; height: 18px; flex: none; border-radius: 4px;
  align-items: center; justify-content: center; font-family: var(--bp-display); font-size: 10px;
  font-weight: 700; color: var(--bp-accent-dk); background: var(--bp-ice); }
.bp-prose td.rk { color: var(--bp-faint); width: 1%; }


/* Photographs with their credit line. */
.bp-photo { margin: 6px 0 18px; max-width: none; }
@media (min-width: 900px) { .bp-photo { float: right; width: 40%; margin: 6px 0 16px 28px; } }
.bp-photo img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--bp-line); }
.bp-photo figcaption { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--bp-mute); }
.bp-prose h2, .bp-prose figure, .bp-prose .bp-file, .bp-prose .bp-statrow, .bp-prose .bp-findings { clear: both; }
.bp-photo__c { color: var(--bp-faint); }
.bp-photo__c a { color: inherit; }

/* ---- chart and table view tabs on a figure ------------------------------ */
.bp-tabs { display: flex; gap: 4px; margin: 10px 0 8px; }
.bp-tabs button { font: inherit; font-size: 12.5px; font-weight: 600; color: #3e5573; background: #f3f7fb;
  border: 1px solid #dbe7f3; border-radius: 6px; padding: 5px 12px; cursor: pointer; }
.bp-tabs button[aria-selected="true"] { color: #fff; background: #1c68ac; border-color: #1c68ac; }
.bp-pane[hidden] { display: none; }