/* Article "Dividend aristocrats" (/articles/dividend-aristocrats/): its own pictures, on
   top of articles.css. Classes start with dv-. Blue (the S&P 500's --spx) gets deeper
   with the length of a run of increases; red (--bad) is a cut; gray is no data. */

/* the shades, defined once: lighter blue = a shorter run; in the dark themes the
   shades mix toward the (light) ink instead of the (dark) surface */
.dv {
  --dv-k: var(--spx);
  --dv-a: color-mix(in srgb, var(--spx) 55%, var(--surface));
  --dv-x: color-mix(in srgb, var(--spx) 24%, var(--surface));
  --dv-p: color-mix(in srgb, var(--ink) 22%, var(--surface));
  --dv-z: var(--track);
  --dv-held: color-mix(in srgb, var(--ink) 26%, var(--surface));
  --dv-dip: color-mix(in srgb, var(--bad) 32%, var(--surface));
  --dv-stop: color-mix(in srgb, var(--bad) 62%, var(--ink));
  --dv-nofig: color-mix(in srgb, var(--ink) 7%, var(--surface));
  --dv-began: color-mix(in srgb, var(--spx) 40%, var(--surface));
  --dv-price: color-mix(in srgb, var(--ink) 30%, var(--surface));
}
:root[data-theme="dark"] .dv, :root[data-theme="black"] .dv {
  --dv-a: color-mix(in srgb, var(--spx) 60%, var(--ink));
  --dv-x: color-mix(in srgb, var(--spx) 30%, var(--ink-2));
  --dv-p: color-mix(in srgb, var(--ink) 34%, var(--surface));
  --dv-z: color-mix(in srgb, var(--ink) 10%, var(--surface));
  --dv-held: color-mix(in srgb, var(--ink) 40%, var(--surface));
  --dv-dip: color-mix(in srgb, var(--bad) 45%, var(--surface));
  --dv-stop: color-mix(in srgb, var(--bad) 55%, var(--ink));
  --dv-nofig: color-mix(in srgb, var(--ink) 12%, var(--surface));
  --dv-began: color-mix(in srgb, var(--spx) 45%, var(--ink));
  --dv-price: color-mix(in srgb, var(--ink) 45%, var(--surface));
}

/* ---------- the ladder: 25+, 50+, 60+ ---------- */
.dv-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; }
.dv-rung { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 14px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.dv-rung-n { align-self: flex-start; padding: 4px 9px; border-radius: 999px; font: 650 12px/1 var(--mono); color: var(--solid-ink); background: var(--dv-a); }
.dv-rung.k .dv-rung-n { background: color-mix(in srgb, var(--spx) 80%, var(--surface)); }
.dv-rung.kk .dv-rung-n { background: var(--spx); }
.dv-rung-name { font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.dv-rung-k { font: 650 36px/1 var(--mono); letter-spacing: -0.05em; color: var(--ink); margin-top: 4px; }
.dv-ladder-note { margin-top: 8px; }
@media (max-width: 560px) {
  .dv-ladder { gap: 6px; }
  .dv-rung { padding: 12px 12px 10px; border-radius: 16px; }
  .dv-rung-name { font-size: 12.5px; }
  .dv-rung-k { font-size: 28px; }
}
.dv-q { display: block; margin: 10px 0 12px; padding: 10px 16px; border-left: 3px solid color-mix(in srgb, var(--spx) 60%, transparent); color: var(--ink); font-style: italic; quotes: "“" "”"; }

/* ---------- charts of one's own ---------- */
.dv-fig svg { touch-action: pan-y; }
.dv-plot-tl { min-height: 600px; }
.dv-plot-dots { min-height: 200px; }
.dv-plot-grid { min-height: 700px; }
.dv-plot-falls { min-height: 360px; }
.dv-fig .tip { min-width: 0; width: max-content; max-width: min(300px, 86vw); }
.dv-tip-tk { margin-left: 4px; font: 500 11px var(--mono); color: var(--muted); }
.dv-tip-note { margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.dv-tip-note.bad { color: var(--bad); font-weight: 600; }
.dv-row-on { fill: var(--hover); }
.dv-row-lbl { fill: var(--ink-2); font: 500 11px var(--font); }
.dv-row-lbl.on { fill: var(--ink); font-weight: 650; }
.dv-zero { stroke: var(--axis); stroke-width: 1.2; }

/* timeline */
.sw-sq.dv-sw-k { background: var(--spx); }
.sw-sq.dv-sw-a { background: var(--dv-a); }
.sw-sq.dv-sw-x { background: var(--bad); }
.sw-sq.dv-sw-hot { background: color-mix(in srgb, var(--muted) 22%, var(--surface)); }
.dv-hot { fill: var(--muted); fill-opacity: 0.12; }
.dv-bar.k { fill: var(--spx); }
.dv-bar.a { fill: var(--dv-a); }
.dv-bar.on { stroke: var(--ink); stroke-width: 1.5; }
.dv-bar-n { fill: #fff; font: 600 9.5px var(--mono); pointer-events: none; }
.dv-bar.a + .dv-bar-n { fill: var(--ink); }
.dv-x { stroke: var(--bad); stroke-width: 2.2; stroke-linecap: round; }
.dv-ev { stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1; stroke-dasharray: 2 3; }
.dv-ev-lbl { fill: var(--ink-2); font: 600 10.5px var(--font); }

/* dots */
.dv-dot { stroke: var(--surface); stroke-width: 1; }
.dv-dot.on { stroke: var(--ink); stroke-width: 2; }
.dv-c-K { fill: var(--spx); }
.dv-c-A { fill: var(--dv-a); }
.dv-c-E { fill: var(--bad); }
.dv-c-X { fill: var(--dv-x); }
.dv-c-P { fill: var(--dv-p); }
.dv-c-Z { fill: var(--dv-z); stroke: var(--axis); }
.sw-sq.dv-c-K { background: var(--spx); }
.sw-sq.dv-c-A { background: var(--dv-a); }
.sw-sq.dv-c-E { background: var(--bad); }
.sw-sq.dv-c-X { background: var(--dv-x); }
.sw-sq.dv-c-P { background: var(--dv-p); }
.sw-sq.dv-c-Z { background: var(--dv-z); box-shadow: inset 0 0 0 1px var(--axis); }
.dv-dots-legend b { font-weight: 650; color: var(--ink); }

/* heat grid */
.dv-g-R { fill: color-mix(in srgb, var(--spx) 82%, var(--surface)); }
.dv-g-B { fill: var(--dv-began); }
.dv-g-H { fill: var(--dv-held); }
.dv-g-D { fill: var(--dv-dip); }
.dv-g-C { fill: var(--bad); }
.dv-g-S { fill: var(--dv-stop); }
.dv-g-N { fill: var(--dv-nofig); }
.dv-g-Z { fill: transparent; }
.dv-g.part { fill-opacity: 0.45; }
.dv-g-own { fill: var(--ink); }
.dv-col { stroke: var(--surface); stroke-width: 1; }
.dv-g-on { fill: none; stroke: var(--ink); stroke-width: 1; }
.dv-g-cell { fill: none; stroke: var(--ink); stroke-width: 2; }
.dv-yr.on { fill: var(--ink); font-weight: 650; }
.sw-sq.dv-g-R { background: color-mix(in srgb, var(--spx) 82%, var(--surface)); }
.sw-sq.dv-g-B { background: var(--dv-began); }
.sw-sq.dv-g-H { background: var(--dv-held); }
.sw-sq.dv-g-D { background: var(--dv-dip); }
.sw-sq.dv-g-C { background: var(--bad); }
.sw-sq.dv-g-S { background: var(--dv-stop); }
.sw-sq.dv-g-N { background: var(--dv-nofig); box-shadow: inset 0 0 0 1px var(--border); }
.sw-sq.dv-g-own { width: 4px; border-radius: 1px; background: var(--ink); }

/* falls */
.sw-sq.dv-sw-p { background: var(--dv-price); }
.dv-fall-p { fill: var(--dv-price); }
.dv-fall-d { fill: var(--spx); }
.dv-fall-zero { fill: var(--surface); stroke: var(--spx); stroke-width: 2; }
.dv-fall-v { fill: var(--ink-2); font: 600 11px var(--mono); letter-spacing: -0.02em; }
.dv-fall-v.d { fill: var(--spx-ink); }

/* the table of long runs */
.dv-long td:nth-child(6) { text-align: left; white-space: normal; min-width: 200px; font-size: 13px; color: var(--ink-2); }
.dv-long td:nth-child(6).down { color: var(--bad); font-weight: 600; }
.dv-long td a { color: var(--accent-ink); }
:root[data-theme="dark"] .dv-bar.a + .dv-bar-n, :root[data-theme="black"] .dv-bar.a + .dv-bar-n { fill: var(--bg); }