/* Article "Bubbles: what they look like in the data" (pipeline/pages/art_bubbles.py,
   js/art-bubbles.js), on top of style.css and articles.css. Each market in its
   asset color (silver and oil have none on the site: gray and brown here),
   falls in --bad; classes start with .bu-. */

.bu { --bu-ag: var(--s6); --bu-oil: #6e4b32; }
:root[data-theme="dark"] .bu, :root[data-theme="black"] .bu { --bu-ag: #c7c7cc; --bu-oil: #b0805a; }
.ln.bu-ag { stroke: var(--bu-ag); } .ln.bu-oil { stroke: var(--bu-oil); }
.sw-sq.bu-ag { background: var(--bu-ag); } .sw-sq.bu-oil { background: var(--bu-oil); }
.bar.bu-ag, .bu-rise.bu-ag { fill: var(--bu-ag); } .bar.bu-oil, .bu-rise.bu-oil { fill: var(--bu-oil); }
.ln.bu-home-sw { stroke: var(--home); stroke-width: 2; stroke-dasharray: 4 3; }
.ln.bu-med-sw { stroke: var(--ink); stroke-width: 3.2; }
.sw-sq.bu-med-sq { background: var(--ink); height: 3px; border-radius: 2px; }
.sw-sq.bu-rise-sw { background: var(--spx); }
.sw-sq.bu-fall-sw { background: var(--bad); opacity: 0.85; }
.sw-sq.bu-climb-sw { background: color-mix(in srgb, var(--bad) 22%, var(--surface)); }
.sw-sq.bu-back-sw { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); border-radius: 50%; }

/* the rule as a short numbered list */
.bu-rule { margin: -4px 0 18px; padding-left: 22px; }
.bu-rule li { margin: 0 0 6px; }

/* the anatomy chart: legend and focus chips in one row */
.bu-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 0 40px 6px 10px; }
.bu-head .legend { padding: 0; margin: 0; }
.bu-focus[hidden] { display: none; }
.bu-plot-ana { min-height: 360px; }
.bu-plot-bb { min-height: 480px; }
.bu-plot-rec { min-height: 480px; }
.bu-ln { stroke-width: 1.5; opacity: 0.78; }
.bu-ln.bu-cmp { stroke-dasharray: 5 4; stroke-width: 2; opacity: 0.95; }
.bu-ln.dim { opacity: 0.12; }
.bu-fade .bu-ln:not(.on) { opacity: 0.22; }
.bu-fade .bu-ln.dim:not(.on) { opacity: 0.08; }
.bu-fade .bu-med:not(.on) { opacity: 0.5; }
.bu-ln.on { stroke-width: 3.2; opacity: 1; }
.bu-med { stroke: var(--ink); stroke-width: 3.4; opacity: 0.92; }
.bu-med.on { stroke-width: 4.2; opacity: 1; }
.bu-medlbl { fill: var(--ink); font: 650 12px var(--font); }
.bu-peakline { stroke: var(--axis); stroke-width: 1.2; }
.bu-zero { stroke: var(--ink); stroke-opacity: 0.4; stroke-width: 1.2; stroke-dasharray: 3 3; }
.bu-xtick { stroke: var(--axis); stroke-width: 1; }
.bu-axis { fill: var(--muted); font: 500 11px var(--font); }
.bu-hot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.bu-medlbl, .bu-axis, .bu-val, .bu-rt { paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round; }
.bu .tip { max-width: 320px; }
.bu-tip-ev { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin: -2px 0 6px; white-space: normal; }
.bu-tip-note { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin-top: 4px; white-space: normal; }
.bu .tip-date .sw-sq { margin-right: 4px; }

/* the butterfly and the way back */
.bu-row { fill: var(--hover); }
.bu-rise { fill: var(--spx); }
.bu-rise.a-spx { fill: var(--spx); } .bu-rise.a-gold { fill: var(--gold); } .bu-rise.a-btc { fill: var(--btc); }
.bu-rise.a-ndq { fill: var(--ndq); } .bu-rise.a-home { fill: var(--home); }
.bu-fall { fill: var(--bad); opacity: 0.85; }
.bu-rise.bu-cmp, .bu-fall.bu-cmp { fill-opacity: 0.35; stroke-dasharray: 3 2; stroke-width: 1.2; }
.bu-rise.bu-cmp { stroke: var(--home); }
.bu-fall.bu-cmp { stroke: var(--bad); }
.bu-climb { fill: var(--bad); opacity: 0.2; }
.bu-climb.open { opacity: 0.1; stroke: var(--bad); stroke-dasharray: 3 3; }
.bu-backdot { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.bu-nmc, .bu-nm-l { fill: var(--ink); font: 600 12px var(--font); }
.bu-nmc.cmp, .bu-nm-l.cmp { fill: var(--muted); font-style: italic; }
.bu-head-l, .bu-head-r { fill: var(--muted); font: 600 11.5px var(--font); }
.bu-val { fill: var(--ink-2); font: 500 11px var(--mono); font-variant-numeric: tabular-nums; }
.bu-val.in { fill: #fff; stroke: none; }
.bu-rt { fill: var(--ink-2); font: 500 11.5px var(--mono); }
@media (max-width: 640px) {
  .bu-nmc, .bu-nm-l { font-size: 11px; }
  .bu-head { padding-left: 4px; }
}

/* tables */
.bu-nm { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.bu-nm a { color: var(--ink); }
.bu-table th[scope="row"] { min-width: 150px; }
.bu-table th[scope="row"] .art-when { white-space: normal; max-width: 260px; }
.bu-open { color: var(--bad); font-weight: 600; }
.bu-now th, .bu-now td { font-weight: 650; }
.art > .bu-narrow { max-width: var(--col); }