/* ipo.css — the IPOs tab, v3 (2026-10-20, lane ipo-v3-ui). Tokens only: every colour is a var() from styles.css
   (or --cvc-orange / --seg-*, defined app-wide) or a color-mix() over one, so the tab reads in light, dark and every
   skin. Text never sits on a wash deeper than 40 %, so var(--text) keeps its contrast; nothing is dimmed with opacity
   (muted ink, a dashed edge or italics instead). Every class is prefixed ipo-. Wide tables scroll inside their own
   .ipo-twrap box (which also carries the sticky header and identity column); #table-wrap itself never scrolls
   sideways. */

.ipo-tab { padding: 0 14px 22px; font-size: 13px; color: var(--text); }
.ipo-tab .muted { color: var(--muted); }
.ipo-na { color: var(--muted); cursor: help; }
.ipo-nw { white-space: nowrap; }
.ipo-flag { font-size: 13px; margin-right: 4px; }
.ipo-nm { font-weight: 650; }
.ipo-tk { font-size: 11px; color: var(--muted); margin-left: 3px; }
.ipo-nat { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 5px; }
.ipo-kind { font-size: 10px; font-weight: 600; color: var(--grey-chip); background: var(--grey-chip-bg); border-radius: 4px; padding: 0 5px; margin-left: 4px; }
.ipo-kind-2 { color: var(--blue-chip); background: var(--blue-chip-bg); }
.ipo-kindc { font-size: 12px; white-space: nowrap; }
.ipo-ul { margin: 0; padding-left: 18px; line-height: 1.55; }
.ipo-ul li { margin: 2px 0; }

/* ─── chrome: page bar + line 1 (+ line 2), sticky inside the scroll box ─── */
.ipo-chrome {
  position: sticky; top: 0; z-index: 6;
  margin: 0 -14px 12px; padding: 6px 14px 7px;
  background: var(--panel); border-bottom: 1px solid var(--border);
}
.ipo-pbar { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.ipo-pages { display: flex; gap: 3px; flex-wrap: wrap; }
.ipo-page {
  font: inherit; font-size: 13px; font-weight: 650; line-height: 1.5; padding: 3px 13px;
  border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.ipo-page b { font-weight: 500; margin-left: 3px; font-variant-numeric: tabular-nums; }
.ipo-page:hover { color: var(--text); background: var(--hover); border-color: var(--border); }
.ipo-page.active { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.ipo-fresh { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ipo-fresh b { color: var(--text); font-weight: 600; }
.ipo-agechip { font-size: 10.5px; margin-left: 2px; }
.ipo-info {
  font: inherit; font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); white-space: nowrap;
}
.ipo-info:hover, .ipo-info.active { border-color: var(--accent); }
.ipo-ctl, .ipo-l2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.ipo-l2-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
/* segmented controls: one click, never a confirm */
.ipo-seg { display: inline-flex; flex-wrap: nowrap; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; max-width: 100%; }
.ipo-sg {
  font: inherit; font-size: 12px; line-height: 1.45; padding: 3px 9px; cursor: pointer; white-space: nowrap;
  border: 0; border-right: 1px solid var(--border); background: var(--panel); color: var(--text);
}
.ipo-sg:last-child { border-right: 0; }
.ipo-sg b { font-weight: 500; color: var(--muted); margin-left: 2px; font-variant-numeric: tabular-nums; }
.ipo-sg:hover { background: var(--hover); }
.ipo-sg.on { background: var(--accent); color: var(--panel); }
.ipo-sg.on b { color: var(--panel); }
.ipo-sg:focus-visible, .ipo-page:focus-visible, .ipo-info:focus-visible, .ipo-chip:focus-visible, .ipo-thb:focus-visible, .ipo-thm:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ipo-qbox { position: relative; display: inline-flex; align-items: center; flex: 0 1 240px; min-width: 150px; }
.ipo-qi { position: absolute; left: 9px; top: 50%; transform: translateY(-52%); font-size: 13px; color: var(--muted); pointer-events: none; }
.ipo-q {
  width: 100%; font: inherit; font-size: 12.5px; line-height: 1.45; padding: 3px 10px 3px 25px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text);
}
.ipo-q::placeholder { color: var(--muted); }
.ipo-q:focus-visible, .ipo-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ─── chips and buttons ─── */
.ipo-chip {
  font: inherit; font-size: 12px; line-height: 1.45; padding: 2px 9px; border-radius: 12px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
}
.ipo-chip:hover { border-color: var(--accent); }
.ipo-chip.active { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.ipo-reset { border-style: dashed; color: var(--muted); }
.ipo-reset:hover { color: var(--text); }
.ipo-chip-open { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--text); }
.ipo-stc, .ipo-vb { white-space: nowrap; }
.ipo-vb { font-size: 10px; }

/* ─── verdict + sections ─── */
.ipo-verdict .bf-verdict { margin-bottom: 10px; padding: 9px 14px; }
.ipo-verdict .bf-vh { font-size: 14px; font-weight: 600; }
.ipo-verdict .bf-vh b { font-weight: 750; }
.ipo-verdict .bf-vh .muted { font-weight: 500; }
.ipo-verdict sup { font-size: 9px; }
.ipo-sec { margin: 0 0 20px; position: relative; scroll-margin-top: 118px; }   /* clear of the sticky chrome when scrolled to */
.ipo-sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; margin: 0 0 6px; }
.ipo-h { margin: 0; font-size: 12px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.ipo-leg { font-size: 12px; color: var(--muted); }
.ipo-leg b { color: var(--text); font-weight: 650; }
.ipo-leg b.bull, .ipo-leg .bull { color: var(--bull); }
.ipo-leg b.bear, .ipo-leg .bear { color: var(--bear); }
.ipo-leg .ipo-chip { font-size: 11px; padding: 0 8px; margin-left: 4px; }
.ipo-howb {
  margin-left: auto; font: inherit; font-size: 11.5px; font-weight: 600; padding: 0 3px; cursor: pointer;
  color: var(--accent); background: none; border: 0; white-space: nowrap;
}
.ipo-howb:hover { text-decoration: underline; }
.ipo-how, .ipo-bld {
  font-size: 12px; line-height: 1.55; margin: 0 0 8px; padding: 6px 11px; border-radius: 6px;
  background: var(--thead); border: 1px solid var(--border);
}
.ipo-bld { border-style: dashed; color: var(--muted); }
.ipo-foldb {
  font: inherit; font-size: 12px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--text);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.ipo-foldb b { color: var(--muted); font-weight: 600; margin-left: 3px; }
.ipo-cvo { color: var(--text); border-bottom: 2px dashed var(--cvc-orange); }

/* ─── window strip: one tile per market ─── */
.ipo-win { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin: 0 0 14px; }
.ipo-wt {
  font: inherit; text-align: left; cursor: pointer; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  padding: 6px 8px 5px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text);
}
.ipo-wt:hover { border-color: var(--accent); }
.ipo-wt.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.ipo-wt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ipo-wt-h { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ipo-ws { margin-left: auto; font-size: 10.5px; font-weight: 750; padding: 0 6px; border-radius: 5px; letter-spacing: .02em; }
.ipo-ws-hot { color: var(--bull); background: var(--bull-bg); }
.ipo-ws-open { color: var(--blue-chip); background: var(--blue-chip-bg); }
.ipo-ws-sel { color: var(--amber); background: var(--amber-bg); }
.ipo-ws-shut { color: var(--bear); background: var(--bear-bg); }
.ipo-ws-na { color: var(--muted); background: var(--grey-chip-bg); font-weight: 600; }
.ipo-wsw { font-weight: 750; padding: 0 4px; border-radius: 4px; }
.ipo-wt-n { display: flex; justify-content: space-between; gap: 4px; }
.ipo-wn { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ipo-wn b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ipo-wn i { font-style: normal; font-size: 10px; color: var(--muted); }
.ipo-wr { font-size: 10.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ipo-wsp { display: flex; align-items: flex-end; gap: 1px; height: 16px; border-bottom: 1px solid var(--border); }
.ipo-wsp i { flex: 1; min-width: 1px; background: color-mix(in srgb, var(--accent) 65%, var(--accent-soft)); border-radius: 1px 1px 0 0; }

/* ─── calendar matrix (markets × weeks) ─── */
.ipo-twrap.ipo-calw { max-height: none; }
.ipo-cal { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.ipo-cal th { padding: 4px 8px; font-size: 11.5px; font-weight: 700; text-align: left; color: var(--text); background: var(--thead); border-bottom: 1px solid var(--border); white-space: nowrap; }
.ipo-cal th small { display: block; font-weight: 500; font-size: 10.5px; color: var(--muted); }
.ipo-cal th.ipo-cal-c { width: 130px; }
.ipo-cal th.ipo-cal-r { background: var(--panel); font-size: 12.5px; border-bottom: 1px solid var(--row-border); }
.ipo-cal tr.ipo-cal-on th.ipo-cal-r { box-shadow: inset 3px 0 0 var(--accent); }
.ipo-cal tr.ipo-cal-tot th, .ipo-cal tr.ipo-cal-tot td { border-top: 2px solid var(--border); }
.ipo-cc {
  cursor: pointer; padding: 4px 8px; vertical-align: top; min-width: 150px; border-bottom: 1px solid var(--row-border);
  border-left: 1px solid var(--row-border); color: var(--text); line-height: 1.3;
}
.ipo-cc:hover, .ipo-cc:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ipo-cc.sel { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: inset 0 -3px 0 var(--accent); }
.ipo-cc0 { color: var(--muted); }
.ipo-cc-all { background: var(--thead); }
.ipo-cc-1 { display: flex; align-items: baseline; gap: 6px; }
.ipo-cc-1 b { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ipo-cc-u { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ipo-cc-2 { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ipo-cc-3 { display: block; font-size: 11px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the accent wash — five square-root steps, capped at 40 % so the text keeps its contrast */
.ipo-w1 { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.ipo-w2 { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.ipo-w3 { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); }
.ipo-w4 { background: color-mix(in srgb, var(--accent) 31%, var(--panel)); }
.ipo-w5 { background: color-mix(in srgb, var(--accent) 40%, var(--panel)); }
/* the signed washes: green above the centre, red below, four steps each */
.ipo-p1 { background: color-mix(in srgb, var(--bull) 8%, var(--panel)); }
.ipo-p2 { background: color-mix(in srgb, var(--bull) 15%, var(--panel)); }
.ipo-p3 { background: color-mix(in srgb, var(--bull) 23%, var(--panel)); }
.ipo-p4 { background: color-mix(in srgb, var(--bull) 31%, var(--panel)); }
.ipo-n1 { background: color-mix(in srgb, var(--bear) 8%, var(--panel)); }
.ipo-n2 { background: color-mix(in srgb, var(--bear) 15%, var(--panel)); }
.ipo-n3 { background: color-mix(in srgb, var(--bear) 23%, var(--panel)); }
.ipo-n4 { background: color-mix(in srgb, var(--bear) 31%, var(--panel)); }
/* secondary lines on a wash of step 2 and deeper: --muted falls under 3:1 there (readability sweep 2026-10-20), so they take
   the base ink — their smaller size and lighter weight keep the hierarchy */
td.ipo-w2 .ipo-cc-2, td.ipo-w3 .ipo-cc-2, td.ipo-w4 .ipo-cc-2, td.ipo-w5 .ipo-cc-2,
td.ipo-w2 small, td.ipo-w3 small, td.ipo-w4 small, td.ipo-w5 small, td.ipo-p2 small, td.ipo-p3 small, td.ipo-p4 small, td.ipo-n2 small, td.ipo-n3 small, td.ipo-n4 small,
td.ipo-w2 .muted, td.ipo-w3 .muted, td.ipo-w4 .muted, td.ipo-w5 .muted { color: var(--text); }
.ipo-cc-2, .ipo-mc small { font-weight: 400; }
/* text on a wash keeps the base ink; a signed figure on a wash keeps its weight but not its hue */
.ipo-w1 .bull, .ipo-w2 .bull, .ipo-w3 .bull, .ipo-w4 .bull, .ipo-w5 .bull, .ipo-p1 .bull, .ipo-p2 .bull, .ipo-p3 .bull, .ipo-p4 .bull,
.ipo-n1 .bull, .ipo-n2 .bull, .ipo-n3 .bull, .ipo-n4 .bull,
.ipo-w1 .bear, .ipo-w2 .bear, .ipo-w3 .bear, .ipo-w4 .bear, .ipo-w5 .bear, .ipo-p1 .bear, .ipo-p2 .bear, .ipo-p3 .bear, .ipo-p4 .bear,
.ipo-n1 .bear, .ipo-n2 .bear, .ipo-n3 .bear, .ipo-n4 .bear { color: var(--text); }

/* ─── the dense table ─── */
.ipo-tblock { position: relative; }
.ipo-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 5px; min-height: 22px; font-size: 12px; }
.ipo-tn { color: var(--muted); margin-right: 4px; }
.ipo-tn b { color: var(--text); font-variant-numeric: tabular-nums; }
.ipo-pill {
  font: inherit; font-size: 11.5px; line-height: 1.45; padding: 1px 8px; border-radius: 12px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--accent); background: var(--accent-soft); color: var(--text);
}
.ipo-pill i { font-style: normal; font-weight: 700; margin-left: 3px; }
.ipo-pill:hover { background: var(--hover); }
.ipo-pill-x { border-style: dashed; background: var(--panel); color: var(--muted); }
.ipo-twrap { overflow: auto; max-height: min(620px, calc(100vh - 250px)); min-height: 0; border: 1px solid var(--border); border-radius: 7px; -webkit-overflow-scrolling: touch; }
.ipo-dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.ipo-dt th {
  position: sticky; top: 0; z-index: 2; background: var(--thead); color: var(--text); text-align: left;
  padding: 4px 6px 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; font-weight: 650;
}
.ipo-dt td { padding: 4px 7px; height: 30px; border-bottom: 1px solid var(--row-border); white-space: nowrap; vertical-align: middle; background: var(--panel); }
.ipo-dt tbody tr:hover td { background: var(--hover); }
.ipo-dt td.num, .ipo-dt th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ipo-dt th.num .ipo-thw { justify-content: flex-end; }
.ipo-dt .ipo-idc { position: sticky; left: 0; z-index: 1; max-width: 250px; overflow: hidden; text-overflow: ellipsis; box-shadow: inset -1px 0 0 var(--row-border); }
.ipo-dt th.ipo-idc { z-index: 3; }
.ipo-dt tr[data-ipo-row], .ipo-dt tr[data-ipo-tv] { cursor: pointer; }
.ipo-dt tr[data-ipo-row]:focus-visible td, .ipo-dt tr[data-ipo-tv]:focus-visible td { box-shadow: inset 0 0 0 2px var(--accent); }
.ipo-dt tr.ipo-open td { background: var(--accent-soft); }
.ipo-dt tr.ipo-xrow > td { height: auto; padding: 0; white-space: normal; background: var(--thead); border-bottom: 2px solid var(--accent); }
.ipo-xin { position: sticky; left: 0; width: min(1240px, calc(100vw - 90px)); padding: 8px 8px 10px; box-sizing: border-box; }
.ipo-dt tr.ipo-grp th { position: static; top: auto; background: var(--thead); font-size: 12px; font-weight: 700; padding: 6px 8px 4px; border-bottom: 1px solid var(--border); }
.ipo-dt tr.ipo-grp th .muted { font-weight: 500; }
.ipo-dt td.ipo-none { text-align: center; color: var(--muted); padding: 14px; height: auto; white-space: normal; }
.ipo-thw { display: inline-flex; align-items: center; gap: 2px; }
/* the widest table (Performance's company matrix): two-line headers, a narrower signed bar */
.ipo-dt-co th { white-space: normal; vertical-align: bottom; line-height: 1.2; }
.ipo-dt-co th .ipo-thb { white-space: normal; text-align: inherit; max-width: 78px; }
.ipo-dt-co th.ipo-idc .ipo-thb { max-width: none; }
.ipo-dt-co td, .ipo-dt-co th { padding-left: 6px; padding-right: 6px; }
.ipo-dt-co .ipo-sbar { width: 36px; margin-right: 4px; }
.ipo-dt-co .ipo-idc { max-width: 210px; }
.ipo-est { font-size: 9px; color: var(--muted); margin-left: 2px; }
.ipo-thb { font: inherit; font-size: 12px; font-weight: 650; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.ipo-thb:hover { color: var(--accent); }
.ipo-ar { font-style: normal; font-size: 9px; margin-left: 2px; color: var(--accent); }
.ipo-thm {
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1; padding: 1px 4px; margin-left: 3px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--accent);
}
.ipo-thm:hover, .ipo-thm.open { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ipo-tbhint { font-size: 12px; color: var(--muted); margin-left: 4px; }
.ipo-thm.on { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.ipo-more { margin-top: 6px; font-size: 12px; }
.ipo-nmw { display: inline; }
.ipo-ex { white-space: nowrap; font-size: 12px; }
.ipo-ex i { font-style: normal; font-size: 10px; font-weight: 650; color: var(--grey-chip); background: var(--grey-chip-bg); border-radius: 4px; padding: 0 4px; margin-left: 2px; }
.ipo-sect { font-size: 12px; white-space: nowrap; }
.ipo-arrow { color: var(--muted); }
.ipo-dv { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ipo-dv i { font-style: normal; font-weight: 500; color: var(--muted); }
.ipo-badge {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .01em; padding: 0 5px; border-radius: 4px; cursor: help; vertical-align: middle;
  background: var(--grey-chip-bg); color: var(--grey-chip); white-space: nowrap;
}
.ipo-badge-s { font-size: 9.5px; }
.ipo-unck sup { font-size: 9px; margin-left: 1px; }
.ipo-tva { color: var(--accent); text-decoration: none; font-weight: 700; padding: 0 3px; }
.ipo-tva:hover { text-decoration: underline; }
.ipo-evw { white-space: nowrap; }
.ipo-stg { display: inline-block; width: 14px; margin-right: 3px; text-align: center; font-weight: 700; cursor: help; color: var(--muted); }
.ipo-stg-open { color: var(--accent); } .ipo-stg-listed { color: var(--bull); } .ipo-stg-closed, .ipo-stg-allotted { color: var(--amber); } .ipo-stg-approved { color: var(--blue-chip); }
.ipo-bar {
  display: inline-block; vertical-align: middle; width: 44px; height: 6px; margin-right: 6px;
  border-radius: 3px; background: var(--grey-chip-bg); border: 1px solid var(--border); overflow: hidden;
}
.ipo-bar i { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 70%, var(--accent-soft)); }
.ipo-sbar {
  position: relative; display: inline-block; vertical-align: middle; width: 54px; height: 6px; margin-right: 6px;
  border-radius: 3px; background: var(--grey-chip-bg); border: 1px solid var(--border); overflow: hidden;
}
.ipo-sbar::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); }
.ipo-sbar i { position: absolute; top: 0; bottom: 0; }
.ipo-sbar i.pos { left: 50%; background: var(--bull); }
.ipo-sbar i.neg { right: 50%; background: var(--bear); }

/* ─── the column menu: hangs under its header, outside the table's scroll box ─── */
.ipo-cmenu {
  position: absolute; z-index: 9; top: 58px; left: 0; width: 300px; max-width: calc(100vw - 40px); max-height: 380px; overflow: auto;
  padding: 7px 10px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 18%, transparent); font-size: 12px; white-space: normal;
}
.ipo-cm-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.ipo-cm-x { font: inherit; font-size: 13px; line-height: 1; padding: 2px 5px; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; }
.ipo-cm-x:hover { border-color: var(--border); color: var(--text); }
.ipo-cm-def { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-bottom: 5px; }
.ipo-cm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 5px 0; }
.ipo-cm-hint { font-size: 11px; }
.ipo-cm-err { font-size: 11.5px; font-weight: 650; color: var(--bear); }
.ipo-in {
  font: inherit; font-size: 12.5px; line-height: 1.4; padding: 2px 7px; min-width: 0; max-width: 100%;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text);
}
.ipo-in::placeholder { color: var(--muted); }
.ipo-cm-in { width: 82px; }
.ipo-cm-in.ipo-cm-d { width: 106px; }
.ipo-cm-go { font-weight: 700; }
.ipo-cm-find { width: 100%; margin: 3px 0 4px; }
.ipo-cm-opts { display: flex; flex-direction: column; gap: 1px; }
/* tick-box rows, the Cockpit's column-filter look: box · value · count on the right */
.ipo-cm-o { display: flex; align-items: center; gap: 7px; padding: 3px 5px; border-radius: 4px; color: var(--text); font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.ipo-cm-o:hover { background: var(--thead); }
.ipo-cm-o input { flex: none; width: 14px; height: 14px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.ipo-cm-o input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ipo-cm-o span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ipo-cm-o.on span { font-weight: 600; }
.ipo-cm-o b { margin-left: auto; padding-left: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.ipo-cm-o.ipo-cm-o0 span { color: var(--muted); }
.ipo-cm-more { font-size: 11px; margin-top: 3px; }
.ipo-cm-g { margin: 7px 0 2px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ipo-cm-opts > .ipo-cm-g:first-child { margin-top: 2px; }
.ipo-cm-sub { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }

/* ─── the deal card, inline under its row ─── */
.ipo-card {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px 20px;
  padding: 8px 12px; border-radius: 6px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--tc, var(--border));
  font-size: 12px; white-space: normal;
}
.ipo-tone-bull { --tc: var(--bull); } .ipo-tone-bear { --tc: var(--bear); } .ipo-tone-warn { --tc: var(--amber); }
.ipo-tone-info { --tc: var(--accent); } .ipo-tone-flat { --tc: var(--grey-chip); }
.ipo-crow { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ipo-kvs { margin-top: 7px; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 3px 8px; }
.ipo-kv { display: contents; }
.ipo-kv i { font-style: normal; color: var(--muted); }
.ipo-kv b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ipo-ladder { display: flex; align-items: flex-start; margin: 4px 0; padding: 0 2px; position: relative; }
.ipo-ladder::before { content: ''; position: absolute; left: 12%; right: 12%; top: 5px; height: 2px; background: var(--border); }
.ipo-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; font-size: 10.5px; line-height: 1.3; cursor: help; }
.ipo-step em { font-style: normal; color: var(--muted); margin-top: 4px; }
.ipo-step small { font-size: 10px; color: var(--text); font-variant-numeric: tabular-nums; }
.ipo-dot { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); background: var(--panel); position: relative; }
.ipo-step.done .ipo-dot { background: var(--accent); border-color: var(--accent); }
.ipo-step.next .ipo-dot { border-color: var(--accent); }
.ipo-step.next .ipo-dot::after { content: ''; position: absolute; inset: 1px; border-radius: 50%; background: var(--accent); animation: ipo-pulse 1.4s ease-in-out infinite; }
.ipo-step.next em { color: var(--accent); font-weight: 700; }
.ipo-step.tba .ipo-dot { border-style: dashed; }
.ipo-step.tba small { color: var(--muted); }
.ipo-step.unk .ipo-dot { border-style: dotted; background: var(--grey-chip-bg); }
.ipo-step.unk small, .ipo-step.unk em { color: var(--muted); }
@keyframes ipo-pulse { 0%, 100% { transform: scale(.55); } 50% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ipo-step.next .ipo-dot::after { animation: none; } }
.ipo-cfoot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 11.5px; }
.ipo-cfoot a, .ipo-strip1 a, .ipo-olink { color: var(--accent); text-decoration: none; }
.ipo-cfoot a:hover, .ipo-strip1 a:hover, .ipo-olink:hover { text-decoration: underline; }
.ipo-dtile { font-size: 12px; }
.ipo-dhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 2px; }
.ipo-dbig { font-size: 14px; font-variant-numeric: tabular-nums; }
.ipo-dsub { margin: 2px 0 4px; font-size: 11.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ipo-spark { display: inline-flex; }
.ipo-sbs { margin-top: 5px; display: grid; gap: 3px; }
.ipo-sb { display: grid; grid-template-columns: 40px minmax(0, 1fr) 56px; align-items: center; gap: 6px; font-size: 11px; }
.ipo-sb i { font-style: normal; color: var(--muted); }
.ipo-sb b { text-align: right; font-variant-numeric: tabular-nums; }
.ipo-sb.total b, .ipo-sb.total i { color: var(--text); font-weight: 700; }
.ipo-sbt { height: 7px; border-radius: 4px; background: var(--grey-chip-bg); border: 1px solid var(--border); overflow: hidden; }
.ipo-sbt span { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 70%, var(--accent-soft)); }
.ipo-sb.total .ipo-sbt span { background: var(--accent); }
.ipo-dkv { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; padding: 1px 0; }
.ipo-dkv i { font-style: normal; color: var(--muted); }
.ipo-dkv b { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ─── pre-IPO detail ─── */
.ipo-pre-x { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 22px; white-space: normal; }
.ipo-pre-v { grid-column: 1 / -1; }
.ipo-odds { display: grid; gap: 3px; }
.ipo-odd { display: grid; grid-template-columns: 44px minmax(0, 1fr) 90px 44px 16px; align-items: center; gap: 6px; font-size: 11.5px; }
.ipo-oq { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ipo-ob { height: 7px; border-radius: 4px; background: var(--grey-chip-bg); border: 1px solid var(--border); overflow: hidden; }
.ipo-ob span { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 70%, var(--accent-soft)); }
.ipo-odd b { text-align: right; font-variant-numeric: tabular-nums; }
.ipo-brk { display: flex; align-items: flex-end; gap: 4px; height: 84px; padding-top: 4px; }
.ipo-brb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; font-size: 9.5px; color: var(--muted); }
.ipo-brb i { display: block; width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--accent) 60%, var(--accent-soft)); }
.ipo-brb b { color: var(--text); font-variant-numeric: tabular-nums; }
.ipo-brb small { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ─── the drawer (ⓘ How to read): a slide-over, Esc / ✕ closes; the backdrop only catches the click, it dims nothing ─── */
.ipo-dr-bg { position: fixed; inset: 0; z-index: 40; background: transparent; }
.ipo-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(560px, 94vw); display: flex; flex-direction: column;
  background: var(--panel); color: var(--text); border-left: 1px solid var(--border); box-shadow: -10px 0 28px color-mix(in srgb, var(--text) 16%, transparent);
}
.ipo-dr-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--thead); font-size: 14px; }
.ipo-dr-x { font: inherit; font-size: 15px; line-height: 1; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; }
.ipo-dr-x:hover { border-color: var(--accent); }
.ipo-dr-b { overflow-y: auto; padding: 8px 16px 26px; font-size: 12.5px; line-height: 1.55; }
.ipo-drs { border-bottom: 1px solid var(--row-border); padding: 4px 0; }
.ipo-drs-h {
  font: inherit; width: 100%; text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 0;
  background: none; border: 0; color: var(--text); cursor: pointer;
}
.ipo-drs-h span { font-size: 13px; font-weight: 750; }
.ipo-drs-h small { font-size: 11.5px; color: var(--muted); }
.ipo-drs-b { padding: 2px 0 8px; }
.ipo-dl { margin: 0; display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); gap: 5px 12px; }
.ipo-dl dt { font-weight: 700; }
.ipo-dl dd { margin: 0; }
.ipo-drp { margin: 8px 0 4px; }
.ipo-spills { display: flex; flex-wrap: wrap; gap: 4px; }
.ipo-spill { font-size: 10.5px; cursor: help; }
.ipo-method { font-size: 11.5px; line-height: 1.55; margin: 6px 0 0; color: var(--muted); }
.ipo-honest { margin: 12px 0 0; font-size: 12px; font-weight: 650; }

/* ─── History: matrices, quarterly bars, basket ─── */
.ipo-twrap.ipo-mxw { max-height: none; }
.ipo-mx { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.ipo-mx th { padding: 4px 8px; text-align: right; font-weight: 700; background: var(--thead); border-bottom: 1px solid var(--border); white-space: nowrap; }
.ipo-mx th.ipo-mx-c, .ipo-mx th.ipo-mx-r { text-align: left; }
.ipo-mx th.ipo-mx-r { background: var(--panel); border-bottom: 1px solid var(--row-border); font-size: 12.5px; }
.ipo-mx tr.ipo-mx-on th.ipo-mx-r { box-shadow: inset 3px 0 0 var(--accent); }
.ipo-mx tr.ipo-mx-all th, .ipo-mx tr.ipo-mx-all td { border-top: 2px solid var(--border); }
.ipo-mc { padding: 4px 8px; text-align: right; vertical-align: top; min-width: 76px; border-bottom: 1px solid var(--row-border); border-left: 1px solid var(--row-border); color: var(--text); }
.ipo-mc[data-ipo-set] { cursor: pointer; }
.ipo-mc[data-ipo-set]:hover, .ipo-mc[data-ipo-set]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ipo-mc b { display: block; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ipo-mc small { display: block; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ipo-mc0 { color: var(--muted); }
.ipo-mc-tot { background: var(--thead); }
.ipo-mc-tot b { font-weight: 800; }
.ipo-qkey { display: inline-flex; flex-wrap: wrap; gap: 3px 9px; margin-left: 6px; }
.ipo-qkey span { display: inline-flex; align-items: center; gap: 3px; color: var(--text); }
.ipo-qkey i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.ipo-qkey i.ipo-qkl { width: 14px; height: 0; border-radius: 0; border-top: 2px solid var(--cvc-orange); }
.ipo-qc { position: relative; display: grid; align-items: end; gap: 3px; height: 210px; padding-top: 4px; }
.ipo-qb { display: grid; grid-template-rows: minmax(0, 1fr) 14px 13px; height: 100%; min-width: 0; text-align: center; cursor: help; }
.ipo-qs { display: flex; flex-direction: column-reverse; justify-content: flex-start; align-items: stretch; min-height: 0; border-bottom: 1px solid var(--border); }
.ipo-qs i { display: block; min-height: 0; background: color-mix(in srgb, var(--accent) 70%, var(--accent-soft)); }
.ipo-qs i:last-of-type { border-radius: 2px 2px 0 0; }
.ipo-qv { display: block; font-size: 9.5px; font-weight: 650; line-height: 1.25; color: var(--text); white-space: nowrap; overflow: hidden; }
.ipo-qx { font-size: 10px; line-height: 14px; color: var(--muted); white-space: nowrap; }
.ipo-qx b { color: var(--text); }
.ipo-qn { font-size: 9.5px; line-height: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ipo-qb:hover .ipo-qs i { filter: saturate(1.4); }
.ipo-qline { position: absolute; left: 0; top: 4px; width: 100%; height: calc(100% - 31px); pointer-events: none; overflow: visible; }
.ipo-qline polyline { stroke: var(--cvc-orange); stroke-width: 1.6; }
.ipo-basw, .ipo-pathw { max-width: 780px; }
.ipo-bas, .ipo-pathc { width: 100%; height: auto; display: block; overflow: visible; }
.ipo-zero { stroke: var(--border); stroke-width: 1; }
.ipo-ax { font-size: 10px; fill: var(--muted); }
.ipo-axn { font-size: 9px; }
.ipo-bas-p { fill: none; stroke: var(--accent); stroke-width: 2; }
.ipo-bas-i { fill: none; stroke: var(--cvc-orange); stroke-width: 1.6; stroke-dasharray: 5 3; }
.ipo-basg { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ipo-basc { font: inherit; text-align: left; cursor: pointer; padding: 5px 8px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); min-width: 0; }
.ipo-basc:hover, .ipo-basc:focus-visible { border-color: var(--accent); }
.ipo-basc-h { display: flex; align-items: baseline; gap: 4px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.ipo-basc-h b { font-variant-numeric: tabular-nums; }
.ipo-bas-s { margin-top: 3px; }
.ipo-bas-s .ipo-bas-p { stroke-width: 1.6; }
.ipo-bas-s .ipo-bas-i { stroke-width: 1.2; }

/* ─── Performance: tiles, path, grow, shortlists, detail strip ─── */
.ipo-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin: 0 0 16px; }
.ipo-tile { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); min-width: 0; cursor: help; }
.ipo-tile i { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ipo-tile b { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ipo-tile small { font-size: 10.5px; color: var(--muted); }
.ipo-vbar { display: grid; gap: 2px; margin-top: 2px; }
.ipo-vbar > span { position: relative; display: block; height: 13px; background: var(--grey-chip-bg); border-radius: 3px; overflow: hidden; }
.ipo-vbar i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 45%, var(--panel)); }
.ipo-vbar i.pos { background: color-mix(in srgb, var(--bull) 40%, var(--panel)); }
.ipo-vbar i.neg { background: color-mix(in srgb, var(--bear) 40%, var(--panel)); }
.ipo-vbar em { position: relative; font-style: normal; font-size: 10px; font-weight: 650; line-height: 13px; padding-left: 4px; color: var(--text); white-space: nowrap; }
.ipo-iqr { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: none; }
.ipo-med { fill: none; stroke: var(--accent); stroke-width: 2; }
.ipo-bench { fill: none; stroke: var(--cvc-orange); stroke-width: 1.6; stroke-dasharray: 5 3; }
.ipo-pt { fill: var(--accent); }
.ipo-pl { font-size: 10px; font-weight: 700; fill: var(--text); }
.ipo-grw { display: grid; gap: 4px; max-width: 620px; }
.ipo-gr { display: grid; grid-template-columns: 110px minmax(0, 1fr) 70px; gap: 8px; align-items: center; font-size: 12px; cursor: help; }
.ipo-gr b { text-align: right; font-variant-numeric: tabular-nums; }
.ipo-grb { position: relative; height: 10px; background: var(--grey-chip-bg); border-radius: 3px; }
.ipo-grb::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border); }
.ipo-grb i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.ipo-grb i.pos { left: 50%; background: var(--bull); }
.ipo-grb i.neg { right: 50%; background: var(--bear); }
.ipo-gr-net { border-top: 1px solid var(--border); padding-top: 4px; font-weight: 700; }
.ipo-gr-net .ipo-grb { background: transparent; }
.ipo-gr-net .ipo-grb::before { display: none; }
.ipo-sl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.ipo-sl-col { min-width: 0; }
.ipo-sl-h { font-size: 12px; margin-bottom: 4px; }
.ipo-rk { display: grid; grid-template-columns: 16px minmax(0, 1fr) 118px; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 6px; font-size: 12px; color: var(--text); text-decoration: none; }
.ipo-rk:hover { background: var(--hover); }
.ipo-rk:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.ipo-rk-i { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.ipo-rk-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ipo-rk-nm small { font-size: 10.5px; }
.ipo-rk-v { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ipo-rk-bar { flex: 1; min-width: 20px; height: 6px; border-radius: 3px; background: var(--grey-chip-bg); overflow: hidden; }
.ipo-rk-bar i { display: block; height: 100%; border-radius: 3px; }
.ipo-rk-bar i.pos { background: var(--bull); }
.ipo-rk-bar i.neg { background: var(--bear); }
.ipo-strip1 { display: flex; flex-wrap: wrap; gap: 3px 16px; font-size: 12px; }
.ipo-strip1 span { white-space: nowrap; }
.ipo-strip1 i { font-style: normal; color: var(--muted); }

/* ─── laptop / split pane ─── */
@media (max-width: 1280px) {
  .ipo-win { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ipo-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ipo-sl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ipo-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ipo-card-c { grid-column: 1 / -1; }
}

/* ─── phone ─── */
@media (max-width: 600px) {
  .ipo-tab { padding: 0 10px 16px; }
  .ipo-chrome { position: static; margin: 0 -10px 10px; padding: 5px 10px 6px; }   /* five wrapped lines are too tall to pin on a phone */
  .ipo-sec { scroll-margin-top: 8px; }
  .ipo-cal th.ipo-cal-c { width: 84px; }
  .ipo-pages { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ipo-pages::-webkit-scrollbar { display: none; }
  .ipo-page { padding: 3px 9px; font-size: 12.5px; }
  .ipo-fresh { display: none; }
  .ipo-seg.ipo-mkt, .ipo-seg.ipo-hm, .ipo-seg.ipo-coh { overflow-x: auto; scrollbar-width: none; }
  .ipo-qbox { flex: 1 1 100%; }
  .ipo-q { font-size: 16px; }
  .ipo-win { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ipo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ipo-sl, .ipo-card, .ipo-pre-x { grid-template-columns: minmax(0, 1fr); }
  .ipo-cc { min-width: 118px; }
  .ipo-dt .ipo-idc { max-width: 150px; }
  .ipo-xin { width: calc(100vw - 40px); }
  .ipo-drawer { width: 100vw; }
  .ipo-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ipo-dl dd { margin-bottom: 6px; }
  .ipo-howb { margin-left: 0; }
  .ipo-qc { height: 170px; }
  .ipo-qv { display: none; }
  .ipo-odd { grid-template-columns: 40px minmax(0, 1fr) 52px 40px 14px; }
  /* the two SVG charts keep a legible size and scroll inside their own box */
  .ipo-pathw, .ipo-basw { overflow-x: auto; }
  .ipo-pathc, .ipo-basw .ipo-bas { min-width: 560px; }
  .ipo-basg { grid-template-columns: minmax(0, 1fr); }
}