/* Article "Stock market crashes" (pipeline/pages/art_crashes.py,
   js/art-stock-market-crashes.js), on top of style.css and articles.css.
   Falls in --bad, the S&P 500 in --spx; classes start with .cr-. */

/* where the market spent its months: one 100% bar and its shares */
.art > .cr-share { margin-top: 8px; padding: 22px 24px 18px; }
.cr-share-cap { font: 650 15px/1.35 var(--font); color: var(--ink); margin: 0 0 14px; }
.cr-bar { display: flex; gap: 2px; height: 30px; border-radius: 10px; overflow: hidden; }
.cr-seg { display: block; min-width: 2px; height: 100%; }
.cr-b0 { background: var(--spx); }
.cr-b1 { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); }
.cr-b2 { background: color-mix(in srgb, var(--bad) 38%, var(--surface)); }
.cr-b3 { background: color-mix(in srgb, var(--bad) 66%, var(--surface)); }
.cr-b4 { background: var(--bad); }
.cr-bands { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 16px; }
.cr-bands li { display: grid; grid-template-columns: 12px 1fr; column-gap: 8px; align-items: baseline; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.cr-bands b { font: 600 22px/1.1 var(--mono); letter-spacing: -0.04em; color: var(--ink); }
.cr-bands li > span:last-child { grid-column: 2; }
.cr-sw { width: 12px; height: 12px; border-radius: 4px; align-self: center; }
.cr-share-foot { margin: 14px 0 0; }
@media (max-width: 760px) {
  .cr-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art > .cr-share { padding: 18px; }
}

/* charts */
.cr-plot-under { min-height: 300px; }
.cr-plot-paths { min-height: 320px; }
.cr-plot-rec { min-height: 400px; }
.cr .tip .down, .cr .tip-row b.down { color: var(--bad); }
.cr-tip-ev { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin: -2px 0 6px; max-width: 250px; white-space: normal; }
.cr-xtick { stroke: var(--axis); stroke-width: 1; }
.cr-axis { fill: var(--muted); font: 500 11px var(--font); }
.cr-hot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
/* labels over lines keep a halo in the card color */
.cr-lbl, .cr-plbl, .cr-today-lbl, .cr-axis, .cr-rt { paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round; }

/* 1. below the record */
.cr-area { fill: var(--bad); opacity: 0.13; }
.cr-line { fill: none; stroke: var(--bad); stroke-width: 1.3; stroke-linejoin: round; }
.cr-th { stroke: var(--bad); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0.75; }
.cr-mark { fill: var(--surface); stroke: var(--bad); stroke-width: 1.8; }
.cr-lbl { fill: var(--ink-2); font: 500 11px var(--mono); font-variant-numeric: tabular-nums; }
.cr-lbl-y { fill: var(--ink); font-weight: 650; font-family: var(--font); }
.cr-today { fill: var(--spx); stroke: var(--surface); stroke-width: 2; }
.cr-today-lbl { fill: var(--ink); font: 600 11.5px var(--font); }
.sw-sq.cr-under-sw { background: color-mix(in srgb, var(--bad) 32%, var(--surface)); box-shadow: inset 0 -2px 0 var(--bad); border-radius: 2px; }
.ln.cr-line-sw { stroke: var(--bad); stroke-width: 1.6; stroke-dasharray: 5 4; }

/* 2. crashes aligned at the peak */
.cr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 0 40px 6px 10px; }
.cr-head .legend { padding: 0; margin: 0; }
.cr-zoom[hidden] { display: none; }
.cr-path { fill: none; stroke: var(--spx); stroke-width: 1.4; opacity: 0.36; stroke-linejoin: round; stroke-linecap: round; }
.cr-path.key { opacity: 1; stroke-width: 2.4; }
.cr-path.on { stroke: var(--ink); opacity: 1; stroke-width: 2.6; }
.cr-zero { stroke: var(--axis); stroke-width: 1.2; }
.cr-end { fill: var(--surface); stroke: var(--spx); stroke-width: 1.5; opacity: 0.55; }
.cr-end.key { opacity: 1; }
.cr-plbl { fill: var(--muted); font: 600 11px var(--font); }
.cr-plbl.key { fill: var(--ink); }
.ln.cr-path-sw { stroke: var(--spx); stroke-width: 1.6; opacity: 0.45; }
.ln.cr-key-sw { stroke: var(--spx); stroke-width: 2.6; }

/* 3. the way back */
.cr-fall { fill: var(--bad); opacity: 0.85; }
.cr-climb { fill: var(--bad); opacity: 0.2; }
.cr-climb.open { opacity: 0.1; stroke: var(--bad); stroke-dasharray: 3 3; }
.cr-gap { stroke: var(--spx); stroke-width: 2.5; stroke-linecap: round; opacity: 0.6; }
circle.cr-dot-p { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
circle.cr-dot-tr { fill: var(--spx); stroke: var(--surface); stroke-width: 2; }
.cr-row { fill: var(--hover); }
.cr-rl { fill: var(--ink); font: 650 12.5px var(--font); }
.cr-rf { fill: var(--muted); font: 500 11.5px var(--mono); font-weight: 500; }
.cr-rt { fill: var(--ink-2); font: 500 11.5px var(--mono); }
.cr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
span.cr-dot-tr { background: var(--spx); }
span.cr-dot-p { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); }
.sw-sq.cr-fall-sw { background: var(--bad); opacity: 0.85; }
.sw-sq.cr-climb-sw { background: color-mix(in srgb, var(--bad) 22%, var(--surface)); }
.tip-row .cr-dot { width: 9px; height: 9px; }

/* the table of crashes */
.cr-table th.cr-ev, .cr-table td.cr-ev { text-align: left; white-space: normal; min-width: 230px; color: var(--ink-2); }
.cr-table thead th.cr-ev { color: var(--muted); }
.cr-open { color: var(--bad); font-weight: 600; }
@media (max-width: 640px) {
  .cr-table th:first-child, .cr-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
  .cr-table thead th:first-child { z-index: 2; }
  .cr-head { padding-left: 4px; }
}