/* Article "The biggest IPOs ever, and the IPO waves" (pipeline/pages/art_ipo.py,
   js/art-biggest-ipos.js), on top of style.css and articles.css. US deals and
   operating companies in --s1 (blue), SPACs in --s2 (orange, as c2), the deal from
   outside the US in --s3 (aqua); classes start with .ip-. */

/* legend swatches */
.sw-sq.ip-sw-us { background: var(--s1); }
.sw-sq.ip-sw-gs { background: color-mix(in srgb, var(--s1) 34%, var(--surface)); box-shadow: inset 0 0 0 1px var(--s1); }
.sw-sq.ip-sw-ab { background: var(--s3); }
.sw-sq.ip-sw-rec { background: var(--ink); clip-path: polygon(0 0, 100% 36%, 0 72%); border-radius: 0; }
.sw-sq.ip-sw-wave { background: var(--track); box-shadow: inset 0 0 0 1px var(--axis); }

/* the skyline */
.ip-plot-sky { min-height: 380px; }
.ip-bld.us { fill: var(--s1); }
.ip-bld.ab { fill: var(--s3); }
.ip-roof.us { fill: var(--s1); fill-opacity: 0.32; stroke: var(--s1); stroke-width: 1; stroke-dasharray: 3 2; }
.ip-roof.ab { fill: var(--s3); fill-opacity: 0.32; stroke: var(--s3); stroke-width: 1; stroke-dasharray: 3 2; }
.ip-bld.on, .ip-roof.on { stroke: var(--ink); stroke-width: 2; stroke-dasharray: none; }
.ip-win { fill: var(--surface); fill-opacity: 0.34; pointer-events: none; }
.ip-pole { stroke: var(--ink); stroke-width: 1.4; }
.ip-flag { fill: var(--ink); }
.ip-val { fill: var(--ink); font: 600 11.5px var(--mono); font-variant-numeric: tabular-nums; }
.ip-name { fill: var(--ink); font: 600 12px var(--font); }
.ip-vlab { fill: var(--ink-2); font: 600 11px var(--font); }
.ip-vlab.in { fill: #fff; }
.ip-val, .ip-name, .ip-vlab:not(.in), .ip-hname, .ip-hdur, .ip-bval, .ip-wave-l { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.ip-tip-note { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin: -2px 0 5px; white-space: normal; }
.ip-flag-sm { display: inline-block; width: 9px; height: 9px; background: var(--ink); clip-path: polygon(0 0, 100% 36%, 0 72%); }
.ip .tip { max-width: 300px; }

/* who held the title */
.ip-plot-title { min-height: 300px; }
.ip-held { fill: var(--s1); fill-opacity: 0.1; }
.ip-held.alt { fill-opacity: 0.17; }
.ip-held.now { fill-opacity: 0.24; }
.ip-held.on { fill-opacity: 0.32; }
.ip-step { fill: none; stroke: var(--s1); stroke-width: 2.4; stroke-linejoin: round; }
.ip-hdot { fill: var(--surface); stroke: var(--s1); stroke-width: 2; }
.ip-hname { fill: var(--ink); font: 650 12px var(--font); }
.ip-hdur { fill: var(--muted); font: 500 11px var(--mono); }
.ip-none { fill: var(--track); fill-opacity: 0.55; }
.ip-none-l { fill: var(--muted); font: 500 11px var(--font); }
.ip-xtick { stroke: var(--axis); stroke-width: 1; }

/* raised in one day */
.ip-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: 8px; }
.ip-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; }
.ip-card-top { display: flex; align-items: center; gap: 10px; }
.ip-card-top .label { margin-left: auto; }
.ip-rank { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--solid); color: var(--solid-ink); font: 600 13px var(--mono); flex: none; }
.ip-card-name { font: 650 17px/1.2 var(--display); color: var(--ink); }
.ip-meter { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; margin: 2px 0; }
.ip-meter span { display: block; height: 100%; border-radius: 4px; background: var(--s1); }
.ip-card.abroad .ip-meter span { background: var(--s3); }
.ip-card .art-sub { margin: 0; }

/* IPO waves */
.ip-plot-waves { min-height: 320px; }
.ip-wave { fill: var(--track); fill-opacity: 0.75; }
.ip-wave-l { fill: var(--muted); font: 600 11px var(--font); }
.ip-bar.part { fill-opacity: 0.5; }
.ip-bar.on { stroke: var(--ink); stroke-width: 1.5; }
.ip-bval { fill: var(--muted); font: 500 10px var(--mono); font-variant-numeric: tabular-nums; }

/* every month */
.ip-cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 0 44px 8px 6px; }
.ip-cal-key { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.ip-key-l { margin: 0 4px; }
.ip-key-c { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--s1); }
.ip-key-c.s { background: var(--s2); }
.ip-key-c.ip-l0 { background: var(--track); }
.ip-key-c.ip-l1 { opacity: 0.2; } .ip-key-c.ip-l2 { opacity: 0.36; } .ip-key-c.ip-l3 { opacity: 0.54; }
.ip-key-c.ip-l4 { opacity: 0.74; } .ip-key-c.ip-l5 { opacity: 1; }
.ip-plot-cal { min-height: 280px; }
.ip-cell { fill: var(--s1); }
.ip-cell.s { fill: var(--s2); }
.ip-cell.ip-l0 { fill: var(--track); }
.ip-cell.ip-l1 { fill-opacity: 0.2; } .ip-cell.ip-l2 { fill-opacity: 0.36; } .ip-cell.ip-l3 { fill-opacity: 0.54; }
.ip-cell.ip-l4 { fill-opacity: 0.74; } .ip-cell.ip-l5 { fill-opacity: 1; }
.ip-cell.part { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; }
.ip-cell.on { stroke: var(--ink); stroke-width: 2; stroke-dasharray: none; }

/* the giants table */
.ip-table th[scope="row"] { min-width: 140px; }
.ip-table th[scope="row"] .art-when { white-space: normal; max-width: 240px; }
.ip-table td.ip-ex { white-space: normal; min-width: 90px; }
.ip-table td b { font-weight: 650; color: var(--ink); }
@media (max-width: 640px) {
  .ip-cal-head { padding-left: 2px; }
  .ip-card { padding: 18px 18px; }
}
.ip-knum { fill: var(--solid); stroke: var(--surface); stroke-width: 1.5; }
.ip-knum.on { fill: var(--s1); }
.ip-knum-t { fill: var(--solid-ink); font: 600 10px var(--mono); pointer-events: none; }
.ip .method li { overflow-wrap: break-word; } /* the XBRL tag name is one long word */