/* Article "Elon Musk in numbers" (/articles/elon-musk-in-numbers/), on top of style.css
   and articles.css. Classes start with .em-. Tesla and Musk's own holdings are not
   assets of the site's palette, so the charts use the series colors: c1 (blue) for
   what is met, held or led; gray for what is not; c2/c3/c5 for the parts of the
   Twitter financing. */

/* the timeline of companies */
.em-plot-tl { min-height: 300px; }
.em-tl-bar.c1 { fill: var(--s1); }
.em-tl-bar.em-tl-pre { fill: var(--s1); fill-opacity: 0.32; }
.em-tl-dia { fill: var(--surface); stroke: var(--ink); stroke-width: 1.6; }
.em-tl-name { fill: var(--ink); font: 600 12.5px/1 var(--font); }
.em-tl-name.on { fill: var(--accent-ink); }
.em-tl-tag { fill: var(--ink-2); font: 550 11px/1 var(--font); }
.em-tl-none { fill: var(--muted); font: 500 11.5px/1 var(--font); font-style: italic; }
.em-tl-hover { fill: var(--hover); }
.sw-sq.em-tl-pre { background: var(--s1); opacity: 0.32; }
.em-dia { display: inline-block; width: 9px; height: 9px; margin: 0 7px 0 2px; transform: rotate(45deg); border: 1.6px solid var(--ink); background: var(--surface); }

/* Tesla's revenue and profit, $100 in Tesla */
.em-plot-fin { min-height: 320px; }
.em-plot-tsr { min-height: 280px; }

/* deliveries: one block per 50,000 cars */
.em-plot-dl { min-height: 220px; }
.em-b.y0 { fill: var(--s1); }
.em-b.y1 { fill: var(--s1); fill-opacity: 0.58; }
.em-b.part { fill: var(--s1); fill-opacity: 0.26; }
.em-b.goal { fill: none; stroke: var(--axis); stroke-width: 1; }
.em-b.on { stroke: var(--ink); stroke-width: 1.4; }
.em-b.goal.on { fill: var(--hover); }
.sw-sq.em-y0 { background: linear-gradient(90deg, var(--s1) 50%, color-mix(in srgb, var(--s1) 58%, transparent) 50%); }
.sw-sq.em-y1 { background: var(--s1); opacity: 0.58; }
.sw-sq.em-part { background: var(--s1); opacity: 0.26; }
.sw-sq.em-togo { background: none; box-shadow: inset 0 0 0 1.2px var(--axis); }
.em-b-y { fill: #fff; font: 650 9.5px/1 var(--mono); pointer-events: none; }
.em-b-y.dk { fill: var(--ink); }

/* then and now: the IPO price and the latest close Tesla states */
.em-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin: 6px 0 18px; }
.em-pair .card { padding: 18px 20px; margin: 0; }
.em-pair .label { margin: 0 0 6px; }
.em-pair .mid { margin: 0; }
.em-pair .art-sub { margin: 6px 0 0; }
.em-cite { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.em-arrow { display: flex; align-items: center; justify-content: center; }
.em-arrow span { padding: 8px 12px; border-radius: 999px; background: var(--solid); color: var(--solid-ink); font: 650 15px/1 var(--mono); white-space: nowrap; }
@media (max-width: 560px) {
  .em-pair { grid-template-columns: 1fr; }
  .em-arrow { justify-content: flex-start; padding-left: 14px; }
}

/* the 2018 ladder */
.em-plot-ladder { min-height: 400px; }
.em-rung { fill: var(--track); }
.em-rung.on { fill: var(--s1); }
.em-rung.hi { stroke: var(--ink); stroke-width: 1.4; }
.em-rung.base { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 3; }
.em-rail { stroke: var(--axis); stroke-width: 2; stroke-linecap: round; }
.em-rung-lbl { fill: var(--ink-2); font: 600 12px/1 var(--mono); }
.em-rung-lbl.on { fill: var(--ink); }
.em-rung-k { fill: var(--solid-ink); font: 650 10.5px/1 var(--mono); }
.em-rung-q { fill: var(--ink); font: 650 12px/1 var(--mono); }
.em-rung-op { fill: var(--muted); font: 500 11.5px/1 var(--font); }
.sw-sq.em-met { background: var(--s1); }
.sw-sq.em-base { background: none; box-shadow: inset 0 0 0 1.2px var(--muted); }

/* the 16 operational targets */
.em-ops-card { padding: 18px 20px 14px; }
.em-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.em-ops .label { margin: 0 0 8px; }
.em-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.em-chip { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border); color: var(--muted); }
.em-chip .num { font: 650 14px/1.1 var(--mono); color: var(--ink-2); }
.em-chip.on { background: var(--accent-soft); box-shadow: none; }
.em-chip.on .num { color: var(--accent-ink); }
.em-chip-q { font-size: 11.5px; line-height: 1.2; }
.em-ops-foot { margin: 12px 0 0; font-size: 12px; }
@media (max-width: 560px) {
  .em-ops { grid-template-columns: 1fr; }
  .em-chips { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}
[data-theme="dark"] .em-chip.on, [data-theme="black"] .em-chip.on { background: color-mix(in srgb, var(--s1) 22%, transparent); }

/* the court case, step by step */
.em-steps { list-style: none; margin: 14px 0 18px; padding: 0 0 0 4px; }
.em-steps li { position: relative; padding: 0 0 14px 24px; }
.em-steps li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--s1); }
.em-steps li::after { content: ""; position: absolute; left: 4px; top: 19px; bottom: 1px; width: 2px; border-radius: 1px; background: var(--axis); }
.em-steps li:last-child::after { display: none; }
.em-steps time { display: block; font: 650 12.5px/1.3 var(--mono); color: var(--ink); }
.em-steps p { margin: 3px 0 0; }

/* the 2025 award */
.em-l25-card { padding: 18px 20px 14px; }
.em-l25 { display: grid; grid-template-columns: minmax(240px, 1.25fr) 1fr; gap: 26px; }
.em-l25 .label { margin: 0 0 8px; }
.em-l25-rungs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.em-l25-rungs li { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.em-l25-rungs .num { font-family: var(--mono); font-weight: 600; text-align: right; }
.em-l25-rungs .bar25 { display: block; height: 11px; width: var(--w); min-width: 2px; border-radius: 3px; background: var(--track); box-shadow: inset 0 0 0 1px var(--border); }
.em-l25-rungs li.old .bar25 { background: var(--s1); box-shadow: none; }
.em-l25-rungs li.old { margin-top: 6px; color: var(--muted); }
.em-l25-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.em-l25-list { margin: 0; padding-left: 18px; }
.em-l25-list li { margin: 2px 0; }
.em-l25-eb { margin: 12px 0 0; color: var(--ink-2); }
.em-goal { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.em-goal .label { margin: 0 0 8px; }
.em-goal-bar { height: 14px; border-radius: 999px; background: var(--track); overflow: hidden; }
.em-goal-bar span { display: block; height: 100%; border-radius: 999px; background: var(--s1); }
.em-goal .art-sub { margin: 8px 0 0; }
@media (max-width: 560px) {
  .em-l25 { grid-template-columns: 1fr; }
}

/* the stake */
.em-plot-stake { min-height: 440px; }
.em-opt { fill: var(--s1); fill-opacity: 0.35; }
.em-opt.rs { fill-opacity: 0.55; }
.sw-sq.em-opt { background: var(--s1); opacity: 0.4; }
.em-pct { fill: var(--ink); font: 650 12px/1 var(--mono); }
.em-st-d { fill: var(--ink-2); }

/* Twitter */
.em-plot-tw { min-height: 230px; }
.bar.em-rest { fill: var(--s6); fill-opacity: 0.45; }
.sw-sq.em-rest { background: var(--s6); opacity: 0.45; }
.em-seg { fill: #fff; font: 650 11.5px/1 var(--mono); pointer-events: none; }
.em-seg.dk { fill: var(--ink); }
.em-tw-lbl { fill: var(--ink-2); font: 600 12px/1 var(--font); }
.em-tw-lbl.on { fill: var(--ink); }