/* Article "Who profits from bubbles" (pipeline/pages/art_bubble_profits.py,
   js/art-who-profits-from-bubbles.js), on top of style.css and articles.css.
   Money paid in (buyers) in the S&P blue, money cashed out (sellers) in green,
   boom years on a soft band; classes start with .bp-. */

/* swatches of the legends */
.sw-sq.bp-buy-sw { background: var(--spx); }
.sw-sq.bp-sell-sw { background: var(--good); }
.sw-sq.bp-new-sw { background: var(--good); }
.sw-sq.bp-back-sw { background: var(--spx); }
.sw-sq.bp-boom-sw { background: color-mix(in srgb, var(--gold) 26%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.sw-sq.bp-fee-sw { background: var(--s6); opacity: 0.8; }
.sw-sq.bp-pk-sw { background: var(--ink); }
.sw-sq.bp-lo-sw { background: var(--bad); }
.sw-sq.bp-gain-sw { background: var(--s6); }
.sw-sq.bp-gainb-sw { background: var(--spx); }
.sw-sq.bp-hike-sw { background: var(--s2); }
.sw-sq.bp-up-sw { background: var(--spx); }
.sw-sq.bp-down-sw { background: var(--bad); }

/* the flow chart: legend and period chips in one row */
.bp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 0 40px 8px 10px; }
.bp-head .legend { padding: 0; margin: 0; }
.bp-chips .chip.bp-after { font-style: italic; }
.bp-plot-flow { min-height: 420px; }
.fl-node.bp-buy { fill: var(--spx); }
.fl-node.bp-sell { fill: var(--good); }
.fl-node.bp-mid { fill: var(--ink-2); }
.fl-link.bp-mid { fill: var(--spx); }
.fl-link.bp-sell { fill: var(--good); }
.bp .fl-link { opacity: 0.24; }
.bp .fl-link.on { opacity: 0.48; }

/* bars by year */
.bp-plot-iss { min-height: 300px; }
.bp-plot-tax { min-height: 300px; }
.bp-plot-fee { min-height: 420px; }
.bp-shade { fill: var(--gold); fill-opacity: 0.12; }
:root[data-theme="dark"] .bp-shade, :root[data-theme="black"] .bp-shade { fill-opacity: 0.08; }
.bp-bar.bp-new { fill: var(--good); }
.bp-bar.bp-back { fill: var(--spx); }
.bp-bar.bp-gain { fill: var(--s6); }
.bp-bar.bp-gainb { fill: var(--spx); }
.bp-bar.bp-hike { fill: var(--s2); }
.bp-bar.on, .bp-sq.on { stroke: var(--ink); stroke-width: 1.5; }
.bp-zero { stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1; shape-rendering: crispEdges; }
.bp-mark { fill: var(--ink); font: 600 11.5px var(--mono); font-variant-numeric: tabular-nums; }
.bp-band { fill: var(--ink); font: 600 11.5px var(--mono); font-variant-numeric: tabular-nums; }
.bp-band-h { fill: var(--muted); font-weight: 500; }
.bp-mark, .bp-band, .bp-fval, .bp-firm { paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round; }
.bp-sq.up { fill: var(--spx); }
.bp-sq.down { fill: var(--bad); }
.bp-strip-l { fill: var(--muted); font: 500 11px var(--font); }

/* the fee strip */
.bp-firm { fill: var(--ink); font: 650 12.5px var(--font); }
.bp-firm-m { fill: var(--muted); font-weight: 500; }
.bp-fbar { fill: var(--s6); fill-opacity: 0.75; }
.bp-fbar.bm { fill: var(--ink-2); fill-opacity: 0.85; }
.bp-fbar.pk { fill: var(--ink); fill-opacity: 1; }
.bp-fbar.lo { fill: var(--bad); fill-opacity: 0.9; }
.bp-fbar.on { stroke: var(--ink); stroke-width: 1.2; }
.bp-fval { fill: var(--ink-2); font: 600 11px var(--mono); font-variant-numeric: tabular-nums; }
.bp-fval.down { fill: var(--bad); }
.bp-fval.up { fill: var(--good); }
.bp-fval.last { fill: var(--muted); font-weight: 500; }

/* tooltips */
.bp .tip { max-width: 320px; }
.bp-tip-note { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin-top: 4px; white-space: normal; }
.bp-tip-ch { font-weight: 500; margin-left: 4px; }
.bp-tip-ch.down { color: var(--bad); }
.bp-tip-ch.up { color: var(--good); }

/* lists and tables */
.bp-list { margin: 0 0 18px; padding-left: 20px; }
.bp-list li { margin: 0 0 8px; }
.bp-table th[scope="row"] { min-width: 150px; }
.bp-table td .art-when { white-space: nowrap; }

@media (max-width: 640px) {
  .bp-head { padding-left: 4px; }
  .bp-firm { font-size: 11.5px; }
  .bp-mark { font-size: 10.5px; }
}