/* Article "Who owns the stock market" (/articles/who-owns-the-stock-market/):
   its own pictures, on top of articles.css. Classes start with wo-.
   Wealth groups are one blue (the US-stocks color, --spx) from deep (top 0.1%)
   to faint (bottom 50%); age groups one orange (--s2), oldest deepest;
   holders are the categorical c1…c6. Text on a segment: light on the two
   deepest shades, ink on the others. */

.art { --wo-on-deep: #fff; --wo-on-pale: #17191c; }
/* light and paper: the top group a deep navy (blue mixed with ink), then the
   blue itself, then lighter and lighter; graphite and black: the top group a
   bright pale blue (ink is light there), then the blue, then darker */
.wo-g1 { --wo: color-mix(in srgb, var(--spx) 62%, var(--ink)); }
.wo-g2 { --wo: var(--spx); }
.wo-g3 { --wo: color-mix(in srgb, var(--spx) 52%, var(--surface)); }
.wo-g4 { --wo: color-mix(in srgb, var(--spx) 27%, var(--surface)); }
.wo-g5 { --wo: color-mix(in srgb, var(--spx) 11%, var(--surface)); }
:root[data-theme="dark"] .wo-g1, :root[data-theme="black"] .wo-g1 { --wo: color-mix(in srgb, var(--spx) 58%, var(--ink)); }
:root[data-theme="dark"] .wo-g3, :root[data-theme="black"] .wo-g3 { --wo: color-mix(in srgb, var(--spx) 56%, var(--surface)); }
:root[data-theme="dark"] .wo-g4, :root[data-theme="black"] .wo-g4 { --wo: color-mix(in srgb, var(--spx) 33%, var(--surface)); }
:root[data-theme="dark"] .wo-g5, :root[data-theme="black"] .wo-g5 { --wo: color-mix(in srgb, var(--spx) 16%, var(--surface)); }
.wo-a1 { --wo: color-mix(in srgb, var(--s2) 70%, var(--ink)); }
.wo-a2 { --wo: var(--s2); }
.wo-a3 { --wo: color-mix(in srgb, var(--s2) 50%, var(--surface)); }
.wo-a4 { --wo: color-mix(in srgb, var(--s2) 22%, var(--surface)); }
:root[data-theme="dark"] .wo-a1, :root[data-theme="black"] .wo-a1 { --wo: color-mix(in srgb, var(--s2) 58%, var(--ink)); }
.wo-g1, .wo-g2, .wo-g3, .wo-g4, .wo-g5, .wo-a1, .wo-a2, .wo-a3, .wo-a4 { fill: var(--wo); background: var(--wo); }
.sw-sq.wo-g5, .sw-sq.wo-a4 { box-shadow: inset 0 0 0 1px var(--border); }
.wo-h.c1 { background: var(--s1); } .wo-h.c2 { background: var(--s2); } .wo-h.c3 { background: var(--s3); }
.wo-h.c4 { background: var(--s4); } .wo-h.c5 { background: var(--s5); } .wo-h.c6 { background: var(--s6); }
.wo-lay.c1 { fill: var(--s1); } .wo-lay.c2 { fill: var(--s2); } .wo-lay.c3 { fill: var(--s3); }
.wo-lay.c4 { fill: var(--s4); } .wo-lay.c5 { fill: var(--s5); } .wo-lay.c6 { fill: var(--s6); }

.wo-fig { padding-bottom: 14px; }
.wo-tipzone { position: relative; }
.wo-tip { min-width: 0; width: max-content; max-width: min(280px, 86vw); }
.wo-tip-one { font: 600 12.5px/1.4 var(--font); color: var(--ink); }

/* ---------- 100 shares: two waffles ---------- */
.wo-waffles { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px 18px; max-width: 760px; margin: 6px auto 4px; padding: 0 8px; }
.wo-waffle { min-width: 0; }
.wo-waffle-y { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0 0 8px; }
.wo-waffle-y b { font: 650 17px/1.2 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.wo-waffle-y span { font: 500 12px/1.3 var(--mono); color: var(--muted); }
.wo-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; touch-action: manipulation; }
.wo-c { display: block; aspect-ratio: 1; border-radius: 22%; transition: opacity 0.12s ease; }
.wo-c.wo-g5 { box-shadow: inset 0 0 0 1px var(--border); }
.wo-hot .wo-c:not(.on) { opacity: 0.4; }
.wo-hot .wo-c.on { outline: 2px solid var(--ink); outline-offset: 1px; }
.wo-waffle-arrow { font: 500 26px/1 var(--font); color: var(--muted); padding-top: 24px; }
@media (max-width: 560px) {
  .wo-waffles { gap: 8px 8px; padding: 0 2px; }
  .wo-grid { gap: 2px; }
  .wo-waffle-arrow { font-size: 18px; }
  .wo-waffle-y b { font-size: 15px; }
  .wo-waffle-y span { font-size: 11px; }
}
.is-full .wo-waffles { flex: 1 1 auto; width: min(100%, 150vh); max-width: none; align-content: center; }

/* ---------- ribbons, stacks, dumbbells ---------- */
.wo-plot-ribbon { min-height: 340px; }
.wo-plot-stack { min-height: 300px; }
.wo-plot-dumb { min-height: 330px; }
.wo-plot-ribbon svg, .wo-plot-stack svg, .wo-plot-dumb svg { touch-action: pan-y; }
.wo-rib { fill-opacity: 0.5; stroke: none; transition: fill-opacity 0.12s ease; }
.wo-rib.on { fill-opacity: 0.8; }
.wo-rib.dim { fill-opacity: 0.18; }
.wo-seg { stroke: none; }
.wo-seg.wo-g5, .wo-rib.wo-g5 { stroke: var(--axis); stroke-width: 0.6; }
.wo-col { fill: var(--ink); font: 650 12.5px var(--font); }
.wo-lab { fill: var(--ink); font: 600 12.5px var(--font); }
.wo-lab-sub { fill: var(--muted); font: 500 11px var(--mono); }
.wo-lab-v { fill: var(--ink); font: 650 13px var(--mono); letter-spacing: -0.02em; }
.wo-lay { stroke: var(--surface); stroke-width: 0.8; stroke-linejoin: round; fill-opacity: 0.92; }
.wo-end { fill: var(--ink-2); font: 600 11px var(--mono); letter-spacing: -0.02em; }
.wo-cross { stroke: var(--ink); stroke-width: 1.2; stroke-opacity: 0.55; stroke-dasharray: 3 3; }
.wo-yr { stroke: var(--axis); stroke-width: 1; }
.wo-track { stroke: var(--track); stroke-width: 6; stroke-linecap: round; }
.wo-dumb-ln { stroke: var(--spx); stroke-opacity: 0.38; stroke-width: 6; stroke-linecap: round; }
.wo-dot-then { fill: var(--surface); stroke: var(--muted); stroke-width: 2; }
.wo-dot-now { fill: var(--spx); stroke: var(--surface); stroke-width: 2; }
.wo-dumb-k { fill: var(--ink-2); font: 500 12.5px var(--font); }
.wo-dumb-k.all { fill: var(--ink); font-weight: 650; }
.wo-dumb-v { fill: var(--ink); font: 650 12px var(--mono); letter-spacing: -0.02em; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.wo-dumb-v0 { fill: var(--muted); font: 500 11px var(--mono); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.wo-dumb-hot { fill: var(--hover); }
.sw-sq.wo-sw-then { background: var(--surface); box-shadow: inset 0 0 0 2px var(--muted); border-radius: 50%; }
.sw-sq.wo-sw-now { background: var(--spx); border-radius: 50%; }

/* ---------- the dollar ladder ---------- */
.wo-ladder { display: grid; gap: 4px; padding: 30px 10px 4px; }
.wo-lrow { display: grid; grid-template-columns: minmax(150px, 0.9fr) minmax(0, 2.2fr) minmax(170px, auto); align-items: center; gap: 4px 18px; padding: 10px 6px; border-bottom: 1px solid var(--border); }
.wo-lrow:last-child { border-bottom: 0; }
.wo-lname { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font: 650 14.5px/1.25 var(--font); color: var(--ink); }
.wo-lname .art-when { flex-basis: 100%; padding-left: 18px; }
.wo-lbar { height: 22px; border-radius: 7px; background: var(--track); overflow: hidden; }
.wo-lbar span { display: block; height: 100%; border-radius: 7px; }
.wo-lbar .wo-g5 { box-shadow: inset 0 0 0 1px var(--border); }
.wo-lval { text-align: right; }
.wo-lval b { font: 650 19px/1.1 var(--mono); letter-spacing: -0.04em; color: var(--ink); }
.wo-lval .art-when { font-family: var(--mono); letter-spacing: -0.02em; }
@media (max-width: 640px) {
  .wo-ladder { padding: 26px 4px 2px; }
  .wo-lrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "b b"; gap: 6px 10px; padding: 10px 2px; }
  .wo-lname { grid-area: n; }
  .wo-lval { grid-area: v; }
  .wo-lbar { grid-area: b; height: 14px; }
}

/* ---------- 100% bars ---------- */
.wo-bars { display: grid; gap: 14px; padding: 8px 10px 4px; }
.wo-bar-k { margin: 0 0 6px; font: 600 13.5px/1.3 var(--font); color: var(--ink); }
.wo-bar { display: flex; height: 36px; border-radius: 10px; overflow: hidden; background: var(--track); }
.wo-bar > span { display: flex; align-items: center; justify-content: center; min-width: 0; height: 100%; box-shadow: inset -1px 0 0 var(--surface); color: var(--wo-on-pale); transition: opacity 0.12s ease; }
.wo-bar > span:last-child { box-shadow: none; }
.wo-bar b { font: 650 12px/1 var(--mono); letter-spacing: -0.03em; white-space: nowrap; }
.wo-bar > .wo-g1, .wo-bar > .wo-g2, .wo-bar > .c1, .wo-bar > .c5 { color: var(--wo-on-deep); }
:root[data-theme="dark"] .wo-bar > .wo-g1, :root[data-theme="black"] .wo-bar > .wo-g1 { color: var(--wo-on-pale); }
:root[data-theme="dark"] .wo-bar > :is(.wo-g3, .wo-g4, .wo-g5), :root[data-theme="black"] .wo-bar > :is(.wo-g3, .wo-g4, .wo-g5) { color: var(--ink); }
.wo-hot .wo-bar > span:not(.on) { opacity: 0.4; }
@media (max-width: 560px) { .wo-bar { height: 30px; } .wo-bar b { font-size: 10.5px; } }

/* ---------- generations at the same age ---------- */
.wo-gens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.wo-gen { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.wo-gen.now { box-shadow: var(--shadow), inset 0 0 0 2px var(--spx); }
.wo-gen p { margin: 0; }
.wo-gen .label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; color: var(--ink); font-weight: 650; font-size: 15px; }
.wo-gen .label span { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.wo-gen-when { font-size: 12.5px; color: var(--muted); }
.wo-gen-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 4px !important; }
.wo-gen-of { font-size: 13px; color: var(--ink-2); }
.wo-gen-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ink-2); border-top: 1px solid var(--border); padding-top: 6px; }
.wo-gen-row b { font-family: var(--mono); font-weight: 650; color: var(--ink); letter-spacing: -0.02em; }
@media (max-width: 760px) { .wo-gens { grid-template-columns: minmax(0, 1fr); gap: 8px; } }