/*
 * Styling for the D3 charts in BLM_Page.md, scoped under .blm-chart /
 * .blm-chord so it doesn't leak into the rest of the site. Charts live in a
 * rounded card that follows the site's light/dark theme via the site's CSS
 * variables (with fallbacks so a bare local preview still renders), and
 * inherit the site's font.
 */

.blm-chart,
.blm-chord {
  background: var(--background-dim, #f5f7f9);
  color: var(--foreground, #2b303a);
  font-family: inherit;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 0.6rem;
  padding: 0.7rem 0.85rem 0.6rem;
  margin: 1.5rem 0;
  box-shadow: 0 1px 4px rgba(20, 30, 50, 0.07);
}

.blm-chart svg,
.blm-chord svg {
  max-width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
}

.blm-chart .svg {
  overflow: hidden;
  border-radius: 0.3rem;
}

/* --- Standardized in-SVG text sizes (viewBox user units) ---------------- */
.blm-chart text {
  font-family: inherit;
  font-size: 16px;
  fill: var(--foreground, #2b303a);
}

.blm-chart text.val {
  font-size: 16px;
}

/* --- HTML chart titles/subtitles (above each chart, in the page's heading
   hierarchy so they scale/reflow independently of the SVG) ---------------- */
.chart-title {
  margin: 0 0 6px;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--foreground-heavy, #191c22);
}

.chart-subtitle {
  margin: -2px 0 8px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--foreground-dim, #576379);
}

.blm-chart path.line {
  fill: none;
}

/* d3 sets font-family="sans-serif" as an attribute on the axis <g>; override
   it here (CSS beats presentation attributes) so ticks inherit the site font. */
.blm-chart .axis,
.blm-chord .axis {
  font-family: inherit;
}

.blm-chart .axis path,
.blm-chart .axis line {
  fill: none;
  stroke: rgba(128, 128, 128, 0.35);
  shape-rendering: crispEdges;
}

.blm-chart .axis text {
  fill: var(--foreground-dim, #576379);
  font-size: 16px;
}

/* Standardized hover interaction shared by every line chart */
.blm-chart .guide {
  stroke: rgba(128, 128, 128, 0.6);
  stroke-width: 1px;
  stroke-dasharray: 3, 3;
  pointer-events: none;
}

.blm-chart .dot {
  stroke: var(--background-dim, #fff);
  stroke-width: 1.5px;
  pointer-events: none;
}

.blm-chart .tooltip,
.blm-chord .tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 10;
  background: var(--background, #ffffff);
  color: var(--foreground, #2b303a);
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.2);
  padding: 6px 9px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
}

.blm-chart .tt-date,
.blm-chord .tt-date {
  font-weight: bold;
  color: var(--foreground-heavy, #191c22);
  margin-bottom: 3px;
}

.blm-chart .tt-row,
.blm-chord .tt-row {
  white-space: nowrap;
}

.blm-chart .tt-sw,
.blm-chart .legend-swatch,
.blm-chord .tt-sw,
.blm-chord .legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
}

/* HTML legend rendered below multi-series charts */
.blm-chart .chart-legend,
.blm-chord .chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 16px;
  margin-top: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--foreground, #2b303a);
}

.blm-chart .legend-item,
.blm-chord .legend-item {
  display: inline-flex;
  align-items: center;
}

.blm-chart .country {
  fill: none;
  stroke: rgba(128, 128, 128, 0.55);
  vector-effect: non-scaling-stroke;
}

.blm-chart .bubble {
  opacity: 0.5;
  fill: rgb(98, 98, 255);
  vector-effect: non-scaling-stroke;
}

.blm-chart .bubble:hover {
  opacity: 0.6;
  fill: rgb(47, 188, 64);
  stroke: black;
  stroke-width: 1px;
}

/* Study-period event marker (bystander video posted) */
.blm-chart .event-line {
  stroke: var(--foreground-dim, #576379);
  stroke-width: 1px;
  stroke-dasharray: 4, 4;
  opacity: 0.5;
}

.blm-chart .event-icon {
  font-size: 20px;
}

.blm-chart .event-key {
  margin-top: 6px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--foreground-dim, #576379);
}

.blm-chart button,
.blm-chord button {
  border-radius: 5px;
  background-color: var(--background, #eef0f3);
  color: var(--foreground, #2b303a);
  border: 1px solid rgba(128, 128, 128, 0.3);
  padding: 4px 10px;
  margin: 6px 6px 0 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}

/* Model-anatomy cards — plain, inline-editable HTML (see the markdown). Styles
   key off .anat-card itself so each card is self-contained (no wrapper needed). */
.anat-card {
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-left-width: 5px;
  border-radius: 8px;
  padding: 14px 18px 16px;
  margin: 16px 0;
  background: var(--background-dim, #fafafa);
  color: var(--foreground, #2b303a);
}

.anat-card sup,
.anat-card sub {
  line-height: 0;
}

.anat-card .anat-eq {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  line-height: 1.4;
  margin: 14px 0 4px;
}

.anat-card .anat-eq-sub {
  font-size: 18px;
  margin: 4px 0;
}

.anat-card .anat-notes {
  margin: 8px 0 0;
  padding-left: 1.1rem;
  font-size: 13.5px;
  line-height: 1.5;
}

.anat-card .anat-notes li {
  margin: 2px 0;
}

.anat-card .frac {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  vertical-align: middle;
  font-size: 16px;
}

.anat-card .frac .num {
  border-bottom: 1.5px solid currentColor;
  padding: 0 6px;
}

.anat-card .frac .den {
  padding: 2px 6px 0;
}

/* White card behind figures that need a light backdrop (e.g. the cluster
   projection PNG, which has dark ink on a transparent/white background). */
.blm-img-card {
  background: #ffffff;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 0.6rem;
  padding: 0.75rem;
  margin: 1.5rem 0;
}

.blm-img-card img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

/* The card is always white, so its title must stay the light-mode text color
   in every scheme — otherwise dark mode paints near-white text on white. */
.blm-img-card .chart-title {
  color: #191c22;
}

/* Generic data table (e.g. the regression / Lasso coefficients) */
.blm-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
  margin: 1.2rem 0;
}

.blm-table caption {
  caption-side: top;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--foreground-dim, #576379);
  text-align: left;
}

.blm-table th,
.blm-table td {
  border: 1px solid rgba(128, 128, 128, 0.35);
  padding: 6px 10px;
  text-align: left;
}

.blm-table thead th {
  background: var(--background-dim, #f5f7f9);
  color: var(--foreground-heavy, #191c22);
}

.blm-table .zero {
  color: var(--foreground-dim, #999);
  opacity: 0.6;
}

/* Numeric columns of the regression table read better right-aligned */
.reg-table td:not(:first-child),
.reg-table th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* --- Mobile: enlarge in-SVG chart text ---------------------------------- */
/* SVG text scales down with the viewBox, so on phones it would otherwise be
   illegible; bump the nominal (user-unit) sizes up on small screens. */
@media (max-width: 560px) {
  .blm-chart text { font-size: 24px; }
  .blm-chart .axis text { font-size: 24px; }
  .blm-chart text.val { font-size: 24px; }
  .blm-chart .event-icon { font-size: 40px; }
}