/* Article "How many bitcoins exist" (/articles/how-many-bitcoins/): the brick
   chart, the halving staircase, the dot countdown and the reconciliation table.
   Bitcoin's color only (--btc), shaded by halving era: era 1 full strength,
   later eras lighter (the same steps as SHADES in pages/art_btc_supply.py);
   coins not mined yet are dashed outlines. */

.bs-plot-bricks { min-height: 300px; }
.bs-plot-stairs { min-height: 300px; }
.bs-plot-dots { min-height: 420px; }
.bs-plot-fees { min-height: 260px; }
/* space kept for the charts until they are drawn; then their own height */
.bs-plot-bricks.bc-chart, .bs-plot-dots.bc-chart { min-height: 0; }
.bs-scale { margin-top: 4px; }

/* era shades: svg shapes and legend swatches */
svg .bs-e1 { fill: var(--btc); }
svg .bs-e2 { fill: var(--btc); fill-opacity: 0.78; }
svg .bs-e3 { fill: var(--btc); fill-opacity: 0.6; }
svg .bs-e4 { fill: var(--btc); fill-opacity: 0.45; }
svg .bs-e5 { fill: var(--btc); fill-opacity: 0.34; }
svg .bs-left { fill: none; stroke: var(--btc); stroke-opacity: 0.55; stroke-width: 1; stroke-dasharray: 3 2; }
.sw-sq.bs-e1 { background: var(--btc); }
.sw-sq.bs-e2 { background: var(--btc); opacity: 0.78; }
.sw-sq.bs-e3 { background: var(--btc); opacity: 0.6; }
.sw-sq.bs-e4 { background: var(--btc); opacity: 0.45; }
.sw-sq.bs-e5 { background: var(--btc); opacity: 0.34; }
.sw-sq.bs-left { background: transparent; box-shadow: inset 0 0 0 1.5px var(--btc); opacity: 0.6; }
.sw-sq.bs-now { background: var(--track); box-shadow: inset 0 0 0 1.5px var(--ink-2); }

/* bricks */
.bs-hi { fill: none; stroke: var(--ink); stroke-width: 2; }
.bs-hi.now { stroke-width: 1.5; }
.bs-here { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.7; }
.bs-here-t { fill: var(--ink); font: 650 12px/1 var(--font); }
.bs-here-s { fill: var(--muted); font: 500 11px/1 var(--mono); }

/* staircase */
svg .bs-area.bs-tocome { fill: var(--btc); fill-opacity: 0.08; }
svg .bs-area.on { stroke: var(--ink); stroke-width: 1.5; }
.bs-step { stroke-width: 2.4; }
.bs-step-t { fill: var(--ink-2); font: 600 11px/1 var(--mono); }
.bs-step-t.now { fill: var(--ink); font-weight: 700; }

/* dot countdown */
.bs-dot.bs-left { stroke-dasharray: none; stroke-opacity: 0.7; stroke-width: 1.2; }
.bs-dot.bs-ghost { fill: none; stroke: var(--btc); stroke-opacity: 0.35; stroke-width: 1; }
.bs-band { fill: var(--surface-2); }
.bs-band.now { fill: var(--track); }
.bs-band.on { fill: var(--hover); }
.bs-band.now.on { fill: var(--track); stroke: var(--axis); }
.bs-col-h { fill: var(--muted); font: 600 11px/1 var(--font); letter-spacing: 0.02em; }
.bs-era-y { fill: var(--ink); font: 650 12px/1 var(--font); }
.bs-era-y.now { fill: var(--ink); }
.bs-era-r { fill: var(--muted); font: 500 11px/1 var(--mono); }
.bs-era-v { fill: var(--ink-2); font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.bs-era-v.now { fill: var(--ink); font-weight: 700; }
.bs-more { fill: var(--muted); font: 500 12px/1 var(--font); }

/* tables */
.bs-eras tr.bs-now td, .bs-eras tr.bs-now th { background: var(--track); }
.bs-recon-wrap { margin-top: 8px; }
.bs-recon th:last-child { text-align: left; }
.bs-recon td.bs-op { width: 28px; text-align: center; color: var(--muted); font: 600 15px/1 var(--mono); }
.bs-recon td.num { text-align: right; white-space: nowrap; font-family: var(--mono); color: var(--ink); }
.bs-recon td.bs-what { text-align: left; white-space: normal; color: var(--ink-2); min-width: 180px; }
.bs-recon tr.bs-sum td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--axis); }
.bs-recon tr.bs-sum td.bs-what { font-weight: 600; }

@media (max-width: 560px) {
  .bs-recon td.num { font-size: 13px; }
  .bs-recon td.bs-what { min-width: 140px; font-size: 13px; }
}