/* Article "The Buffett indicator" (/articles/buffett-indicator/): its own pictures,
   on top of articles.css. Classes start with bi-. One hue for the fifths and the
   decades (US stocks' blue, --spx, light to strong), graphite for the thermometer,
   today's reading and the labels. Colors only through the theme variables. */

/* ---------- the fifths: light bands in the charts, strong dots and swatches ---------- */
rect.bi-b0 { fill: color-mix(in srgb, var(--spx) 3%, var(--surface)); }
rect.bi-b1 { fill: color-mix(in srgb, var(--spx) 6%, var(--surface)); }
rect.bi-b2 { fill: color-mix(in srgb, var(--spx) 9%, var(--surface)); }
rect.bi-b3 { fill: color-mix(in srgb, var(--spx) 13%, var(--surface)); }
rect.bi-b4 { fill: color-mix(in srgb, var(--spx) 18%, var(--surface)); }
.bi-dot.bi-b0, .sw-sq.bi-b0 { fill: color-mix(in srgb, var(--spx) 26%, var(--surface)); background: color-mix(in srgb, var(--spx) 26%, var(--surface)); }
.bi-dot.bi-b1, .sw-sq.bi-b1 { fill: color-mix(in srgb, var(--spx) 42%, var(--surface)); background: color-mix(in srgb, var(--spx) 42%, var(--surface)); }
.bi-dot.bi-b2, .sw-sq.bi-b2 { fill: color-mix(in srgb, var(--spx) 58%, var(--surface)); background: color-mix(in srgb, var(--spx) 58%, var(--surface)); }
.bi-dot.bi-b3, .sw-sq.bi-b3 { fill: color-mix(in srgb, var(--spx) 78%, var(--surface)); background: color-mix(in srgb, var(--spx) 78%, var(--surface)); }
.bi-dot.bi-b4, .sw-sq.bi-b4 { fill: var(--spx); background: var(--spx); }
.bi-bands { padding: 0 10px; margin: 0 0 2px; font-size: 12.5px; }
.bi-rng { color: var(--muted); font-size: 11.5px; letter-spacing: -0.02em; }
.art .chart .legend.bi-bands { margin-bottom: 2px; }
.bi-bands.light .sw-sq { box-shadow: inset 0 0 0 1px var(--border); }
.bi-bands.light .sw-sq.bi-b0 { background: color-mix(in srgb, var(--spx) 5%, var(--surface)); }
.bi-bands.light .sw-sq.bi-b1 { background: color-mix(in srgb, var(--spx) 9%, var(--surface)); }
.bi-bands.light .sw-sq.bi-b2 { background: color-mix(in srgb, var(--spx) 14%, var(--surface)); }
.bi-bands.light .sw-sq.bi-b3 { background: color-mix(in srgb, var(--spx) 20%, var(--surface)); }
.bi-bands.light .sw-sq.bi-b4 { background: color-mix(in srgb, var(--spx) 27%, var(--surface)); }

/* ---------- the thermometer ---------- */
.bi-plot-thermo { min-height: 260px; }
.bi-dot { stroke: none; }
.bi-dot.pk { stroke: var(--ink); stroke-width: 1.3; }
.bi-dot.on { stroke: var(--ink); stroke-width: 2; }
.bi-dot-now { fill: var(--ink); stroke: var(--surface); stroke-width: 2.5; }
.bi-dot-now.on { stroke: var(--ink); stroke-width: 1; }
.bi-tube { fill: none; stroke: var(--axis); stroke-width: 1; }
.bi-merc { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.bi-bulb { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.bi-med { stroke: var(--ink); stroke-width: 1.5; stroke-opacity: 0.6; }
.bi-med-lbl { fill: var(--muted); font: 500 10.5px var(--mono); }
.bi-lead { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; }
.bi-lead.now { stroke: var(--ink); stroke-dasharray: none; }
.bi-lbl { fill: var(--ink-2); font: 600 11px var(--mono); letter-spacing: -0.02em; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.bi-lbl.now { fill: var(--ink); font: 700 12.5px var(--mono); }
.bi-lbl.now.sub { font-weight: 500; fill: var(--ink-2); font-size: 11.5px; }
.sw-sq.bi-sw-strong { border-radius: 50%; }

/* ---------- the long line ---------- */
.bi-plot-line { min-height: 320px; }
.bi-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 2px 10px 0; }
.art .chart .bi-head .legend { padding: 0; margin: 0; }
.art .chart.has-full > .bi-head { padding-right: 48px; }
.bi-num { flex: none; max-width: 100%; }
@media (max-width: 560px) { .bi-num button { padding: 7px 9px; font-size: 12.5px; } }
.bi-wait { visibility: hidden; }
.bi-pk { fill: var(--surface); stroke: var(--ink); stroke-width: 1.8; }
.bi-on { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.sw-sq.bi-sw-pk { width: 10px; height: 10px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); }
.bi-plot-line svg, .bi-plot-scatter svg, .bi-plot-thermo svg { touch-action: pan-y; }

/* ---------- the scatter ---------- */
.bi-plot-scatter { min-height: 360px; }
.bi-sdot { stroke: var(--surface); stroke-width: 1; }
.bi-sdot.on { stroke: var(--ink); stroke-width: 2; }
.bi-sdot.bi-d0, .sw-sq.bi-d0 { fill: var(--spx); background: var(--spx); }
.bi-sdot.bi-d1, .sw-sq.bi-d1 { fill: color-mix(in srgb, var(--spx) 87%, var(--surface)); background: color-mix(in srgb, var(--spx) 87%, var(--surface)); }
.bi-sdot.bi-d2, .sw-sq.bi-d2 { fill: color-mix(in srgb, var(--spx) 75%, var(--surface)); background: color-mix(in srgb, var(--spx) 75%, var(--surface)); }
.bi-sdot.bi-d3, .sw-sq.bi-d3 { fill: color-mix(in srgb, var(--spx) 64%, var(--surface)); background: color-mix(in srgb, var(--spx) 64%, var(--surface)); }
.bi-sdot.bi-d4, .sw-sq.bi-d4 { fill: color-mix(in srgb, var(--spx) 54%, var(--surface)); background: color-mix(in srgb, var(--spx) 54%, var(--surface)); }
.bi-sdot.bi-d5, .sw-sq.bi-d5 { fill: color-mix(in srgb, var(--spx) 45%, var(--surface)); background: color-mix(in srgb, var(--spx) 45%, var(--surface)); }
.bi-sdot.bi-d6, .sw-sq.bi-d6 { fill: color-mix(in srgb, var(--spx) 38%, var(--surface)); background: color-mix(in srgb, var(--spx) 38%, var(--surface)); }
.bi-sdot.bi-d7, .sw-sq.bi-d7 { fill: color-mix(in srgb, var(--spx) 32%, var(--surface)); background: color-mix(in srgb, var(--spx) 32%, var(--surface)); }
.bi-sdot.bi-d8, .sw-sq.bi-d8 { fill: color-mix(in srgb, var(--spx) 27%, var(--surface)); background: color-mix(in srgb, var(--spx) 27%, var(--surface)); }
.bi-dec-legend .sw-sq { border-radius: 50%; }
.bi-dec-legend .sw-sq.bi-sw-rug { width: 2px; height: 11px; border-radius: 1px; background: var(--ink-2); }
.bi-dec-legend .sw-sq.bi-sw-now { width: 0; height: 13px; border-radius: 0; background: none; border-left: 1.5px dashed var(--ink); }
.bi-rug { stroke: var(--ink-2); stroke-width: 1.4; stroke-opacity: 0.75; }
.bi-now-line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.bi-q { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.bi-q-t { fill: var(--ink); font: 700 16px var(--display); pointer-events: none; }
.bi-corr { fill: var(--ink-2); font: 600 12px var(--mono); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.bi-axis-t { fill: var(--muted); font: 500 11px var(--font); }
.bi-zero { stroke: var(--ink); stroke-opacity: 0.45; stroke-width: 1.2; }
.bi-band-table th[scope="row"] { min-width: 170px; white-space: normal; }
.bi-nw { white-space: nowrap; }
.bi-band-table .bi-runs { margin-top: 2px; max-width: 300px; white-space: normal; }

/* ---------- twins ---------- */
.art > .bi-twins { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.bi-twin-title { margin: 0 0 8px 4px; font: 650 15px/1.3 var(--display); color: var(--ink); }
.bi-twin-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: stretch; }
.bi-twin-vs { display: flex; align-items: center; justify-content: center; font: 600 22px var(--mono); color: var(--muted); }
.bi-twin-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 20px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.bi-twin-card .label { margin: 0; }
.bi-twin-v { display: flex; align-items: baseline; gap: 8px; }
.bi-twin-of { font-size: 13px; color: var(--muted); }
.bi-twin-k { margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.bi-twin-chart { position: relative; margin: 4px 0 2px; padding: 0 52px 0 38px; }
.bi-twin-spark { display: block; width: 100%; height: 72px; overflow: visible; }
.bi-twin-base { stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.bi-twin-ln { fill: none; stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bi-twin-ln.pos { stroke: var(--spx); }
.bi-twin-ln.neg { stroke: var(--bad); }
.bi-twin-end { position: absolute; right: 0; transform: translateY(-50%); font: 650 13px var(--mono); letter-spacing: -0.03em; color: var(--ink); }
.bi-twin-100 { position: absolute; left: 0; transform: translateY(-50%); font: 500 10.5px var(--mono); color: var(--muted); }
.bi-twin-r { font: 650 22px/1.1 var(--mono); letter-spacing: -0.04em; color: var(--ink); }
.bi-twin-a { margin-left: 4px; font: 500 12.5px var(--font); letter-spacing: 0; color: var(--muted); }
.bi-twin-sub { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
@media (max-width: 560px) {
  .bi-twin-row { grid-template-columns: minmax(0, 1fr); }
  .bi-twin-vs { height: 26px; font-size: 18px; }
  .bi-twin-card { padding: 14px 16px; }
}

/* ---------- old records broken ---------- */
.art > .bi-evs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.bi-ev-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.bi-ev-card .label { margin: 0; }
.bi-ev-h { font: 650 17px/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.bi-ev-sub { font-size: 13px; line-height: 1.4; color: var(--muted); }
.bi-ev-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 6px; }
.bi-ev-k { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.bi-ev-tail { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 640px) { .art > .bi-evs { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* ---------- why the level may have moved ---------- */
.art > .bi-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.bi-why-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.bi-why-card b { font: 650 16px/1.25 var(--display); color: var(--ink); }
.bi-why-card > span:last-child { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.bi-why-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font: 600 12px var(--mono); color: var(--solid-ink); background: var(--solid); }
@media (max-width: 1000px) { .art > .bi-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .art > .bi-why { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* ---------- countries: one row each, the latest dot on its own range ---------- */
.bi-c { position: relative; --bi-name: minmax(112px, 190px); --bi-val: 92px; padding: 4px 10px 8px; }
.bi-c-axis { display: grid; grid-template-columns: var(--bi-name) minmax(0, 1fr) var(--bi-val); gap: 12px; height: 18px; font-size: 10.5px; color: var(--muted); }
.bi-c-ax { position: relative; }
.bi-c-ax span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.bi-c-ax span:first-child { transform: none; }
.bi-c-ax span:last-child { transform: translateX(-100%); }
.bi-c-list { list-style: none; margin: 0; padding: 0; }
.bi-c-row { display: grid; grid-template-columns: var(--bi-name) minmax(0, 1fr) var(--bi-val); gap: 12px; align-items: center; min-height: 26px; padding: 2px 0; border-radius: 8px; outline: none; }
.bi-c-row:hover, .bi-c-row:focus-visible { background: var(--hover); }
.bi-c-n { font-size: 13.5px; line-height: 1.2; color: var(--ink); text-decoration: none; padding-left: 4px; }
.bi-c-n:hover { color: var(--accent-ink); }
.bi-c-row.us .bi-c-n { font-weight: 650; }
.bi-c-track { position: relative; height: 18px; }
.bi-c-track i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid); }
.bi-c-rng { position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 14%, var(--surface)); }
.bi-c-rng.off { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bi-c-dot { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 2px var(--surface); }
.bi-c-row.us .bi-c-dot { background: var(--spx); width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.bi-c-row.stale .bi-c-dot { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink-2), 0 0 0 2px var(--surface); }
.bi-c-row.off .bi-c-dot { width: 12px; height: 14px; margin: -7px 0 0 -11px; border-radius: 0; box-shadow: none; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.bi-c-lbl { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.bi-c-v { font: 600 13px var(--mono); letter-spacing: -0.03em; color: var(--ink); }
.bi-c-y { font: 500 10.5px var(--mono); color: var(--muted); }
.bi-c-y.old { padding: 1px 5px; border-radius: 6px; color: var(--ink-2); background: var(--track); }
.sw-sq.bi-sw-dot { border-radius: 50%; background: var(--ink-2); }
.sw-sq.bi-sw-us { border-radius: 50%; background: var(--spx); }
.sw-sq.bi-sw-rng { width: 22px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 14%, var(--surface)); }
.bi-c-tip { min-width: 0; width: max-content; max-width: min(280px, 90vw); }
.is-full .bi-c { overflow: auto; }
@media (max-width: 560px) {
  .bi-c { --bi-name: 84px; --bi-val: 52px; padding: 2px 0 6px; }
  .bi-c-ax span.odd { display: none; }
  .bi-c-axis, .bi-c-row { gap: 8px; }
  .bi-c-n { font-size: 12.5px; padding-left: 2px; }
  .bi-c-v { font-size: 12px; }
  .bi-c-lbl { flex-direction: column; gap: 0; align-items: flex-start; }
}

/* dark themes: the lightest shades would sink into the near-black cards, so they start brighter */
:root[data-theme="dark"] .bi-dot.bi-b0, :root[data-theme="black"] .bi-dot.bi-b0,
:root[data-theme="dark"] .sw-sq.bi-b0, :root[data-theme="black"] .sw-sq.bi-b0 { fill: color-mix(in srgb, var(--spx) 40%, var(--surface)); background: color-mix(in srgb, var(--spx) 40%, var(--surface)); }
:root[data-theme="dark"] .bi-dot.bi-b1, :root[data-theme="black"] .bi-dot.bi-b1,
:root[data-theme="dark"] .sw-sq.bi-b1, :root[data-theme="black"] .sw-sq.bi-b1 { fill: color-mix(in srgb, var(--spx) 54%, var(--surface)); background: color-mix(in srgb, var(--spx) 54%, var(--surface)); }
:root[data-theme="dark"] .bi-dot.bi-b2, :root[data-theme="black"] .bi-dot.bi-b2,
:root[data-theme="dark"] .sw-sq.bi-b2, :root[data-theme="black"] .sw-sq.bi-b2 { fill: color-mix(in srgb, var(--spx) 68%, var(--surface)); background: color-mix(in srgb, var(--spx) 68%, var(--surface)); }
:root[data-theme="dark"] .bi-dot.bi-b3, :root[data-theme="black"] .bi-dot.bi-b3,
:root[data-theme="dark"] .sw-sq.bi-b3, :root[data-theme="black"] .sw-sq.bi-b3 { fill: color-mix(in srgb, var(--spx) 84%, var(--surface)); background: color-mix(in srgb, var(--spx) 84%, var(--surface)); }
:root[data-theme="dark"] .bi-sdot.bi-d4, :root[data-theme="black"] .bi-sdot.bi-d4,
:root[data-theme="dark"] .sw-sq.bi-d4, :root[data-theme="black"] .sw-sq.bi-d4 { fill: color-mix(in srgb, var(--spx) 60%, var(--surface)); background: color-mix(in srgb, var(--spx) 60%, var(--surface)); }
:root[data-theme="dark"] .bi-sdot.bi-d5, :root[data-theme="black"] .bi-sdot.bi-d5,
:root[data-theme="dark"] .sw-sq.bi-d5, :root[data-theme="black"] .sw-sq.bi-d5 { fill: color-mix(in srgb, var(--spx) 53%, var(--surface)); background: color-mix(in srgb, var(--spx) 53%, var(--surface)); }
:root[data-theme="dark"] .bi-sdot.bi-d6, :root[data-theme="black"] .bi-sdot.bi-d6,
:root[data-theme="dark"] .sw-sq.bi-d6, :root[data-theme="black"] .sw-sq.bi-d6 { fill: color-mix(in srgb, var(--spx) 47%, var(--surface)); background: color-mix(in srgb, var(--spx) 47%, var(--surface)); }
:root[data-theme="dark"] .bi-sdot.bi-d7, :root[data-theme="black"] .bi-sdot.bi-d7,
:root[data-theme="dark"] .sw-sq.bi-d7, :root[data-theme="black"] .sw-sq.bi-d7 { fill: color-mix(in srgb, var(--spx) 42%, var(--surface)); background: color-mix(in srgb, var(--spx) 42%, var(--surface)); }
:root[data-theme="dark"] .bi-sdot.bi-d8, :root[data-theme="black"] .bi-sdot.bi-d8,
:root[data-theme="dark"] .sw-sq.bi-d8, :root[data-theme="black"] .sw-sq.bi-d8 { fill: color-mix(in srgb, var(--spx) 38%, var(--surface)); background: color-mix(in srgb, var(--spx) 38%, var(--surface)); }
.tip .sw-sq[class*="bi-d"] { border-radius: 50%; }