/* Insiders' trades: Home's card and the market screen (insider-board.js).
 *
 * From the owner's Claude Design round of 29 Sep 2026, in design.css's own
 * tokens. Every rule carries `#app`, for the reason today.css gives: the
 * shell's `#app button { font: inherit; color: inherit }` and its
 * `#app .om-scr h1/h2 {… !important}` beat a component rule without the id.
 *
 * A picture is laid out in JavaScript for a model width and drawn in
 * percentages, so it can only ever spread. Each is drawn two or three times,
 * once per width band, and all but one are hidden: `ib-v-phone` under 720px,
 * `ib-v-wide` from 720px, and on the market screen `ib-v-mid` from 720px and
 * `ib-v-big` from 1,200px. */

#app .ib-card, #app .ib-page {
  --ibLine: color-mix(in oklab, var(--ink) 16%, transparent);
  --ibLine2: color-mix(in oklab, var(--ink) 7%, transparent);
  --ibUpSoft: color-mix(in oklab, var(--up) 18%, transparent);
  --ibDnSoft: color-mix(in oklab, var(--down) 18%, transparent);
  --ibAccSoft: color-mix(in oklab, var(--accent) 16%, transparent);
  --ibIrisSoft: color-mix(in oklab, var(--iris) 22%, transparent);
  --ibSans: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --ibMono: 'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;
}
@media (max-width: 719px) { #app .ib-v-wide, #app .ib-v-mid, #app .ib-v-big { display: none !important; } }
@media (min-width: 720px) { #app .ib-v-phone { display: none !important; } }
@media (min-width: 720px) and (max-width: 1199px) { #app .ib-v-big { display: none !important; } }
@media (min-width: 1200px) { #app .ib-v-mid { display: none !important; } }

/* ── words and marks every part uses ─────────────────────────────────── */
#app .ib-up { color: var(--up); }
#app .ib-dn { color: var(--down); }
#app .ib-faint { color: var(--faint); }
#app .ib-small { font-size: 11px; }
#app .ib-strong { font-weight: 600; }
#app .ib-mono { font-family: var(--ibMono); }
#app .ib-tick { font: 600 12px/1.3 var(--ibMono); color: var(--ink); }
#app .ib-chip { font: 400 11px/16px var(--ibMono); color: var(--faint); overflow-wrap: anywhere; }
#app .ib-nw { white-space: nowrap; unicode-bidi: isolate; }
#app .ib-cap { margin: 4px 0 0; font: 400 14px/1.55 var(--ibSans); color: var(--t2); text-wrap: pretty; }
#app .ib-none { margin: 0; padding: 6px 0; font: 400 14px/1.55 var(--ibSans); color: var(--faint); }
#app .ib-record { margin: 0; font: 500 17px/1.6 var(--ibSans); color: var(--ink); text-wrap: pretty; }
#app .ib-legs { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 600 14px/1.4 var(--ibSans); }
#app .ib-axis { text-align: center; font: 400 12px/1.4 var(--ibSans); color: var(--faint); }
#app .ib-undrawn { margin: 0; font: 400 12px/1.55 var(--ibSans); color: var(--t2); text-wrap: pretty; }
#app .ib-side { font-weight: 600; }
#app .ib-side[data-side="up"] { color: var(--up); }
#app .ib-side[data-side="down"] { color: var(--down); }
#app .ib-net { font: 600 14px/1.3 var(--ibMono); white-space: nowrap; color: var(--ink); }
#app .ib-net[data-side="up"] { color: var(--up); }
#app .ib-net[data-side="down"] { color: var(--down); }

/* ── the strip ────────────────────────────────────────────────────────── */
#app .ib-strip { position: relative; width: 100%; min-width: 0; }
#app .ib-strip > * { position: absolute; }
#app .ib-grid { width: 1px; margin-left: -0.5px; background: var(--ibLine2); }
#app .ib-tlab { position: absolute; font: 400 11px/16px var(--ibMono); color: var(--faint); white-space: nowrap; transform: translateX(-50%); }
#app .ib-tlab.is-start { transform: translateX(-14%); }
#app .ib-tlab.is-end { transform: translateX(-86%); }
#app .ib-base { position: absolute; left: 0; right: 0; height: 1px; background: var(--ink); opacity: .55; }
#app .ib-leader { width: 1px; margin-left: -0.5px; background: var(--ibLine); }
#app .ib-divider { width: 0; border-left: 1px dashed var(--faint); }
#app .ib-bar { background: var(--up); border-radius: 2px 2px 0 0; }
#app .ib-bar[data-side="down"] { background: var(--down); border-radius: 0 0 2px 2px; }
#app .ib-barlab { font: 400 11px/14px var(--ibMono); color: var(--t2); text-align: center; white-space: nowrap; pointer-events: none; }
#app .ib-lab { font: 500 11px/16px var(--ibMono); color: var(--t2); text-align: center; white-space: nowrap; pointer-events: none; z-index: 4; }
#app .ib-lab[data-named="1"] { color: var(--ink); font-weight: 600; }

/* A dot's shape says who traded, its colour which way (the ▲ ▼ in every
 * label say it again), and an ink ring that a form names the trader. The
 * legend's shapes are the same rules in a neutral ink. */
#app .ib-dot, #app .ib-shape {
  --c: var(--t2);
  position: absolute; box-sizing: border-box; padding: 0; margin: 0; border: 0;
  border-radius: 50%; background: var(--c); z-index: 2;
}
#app .ib-dot[data-side="up"] { --c: var(--up); }
#app .ib-dot[data-side="down"] { --c: var(--down); }
#app .ib-dot[data-role="1"], #app .ib-shape[data-role="1"] { background: var(--surface); border: 2px solid var(--c); }
#app .ib-dot[data-role="2"], #app .ib-shape[data-role="2"] { border-radius: 2px; }
#app .ib-dot[data-role="3"], #app .ib-shape[data-role="3"] { border-radius: 2px; background: var(--surface); border: 2px solid var(--c); }
#app .ib-dot[data-role="4"], #app .ib-shape[data-role="4"] { border-radius: 1px; transform: rotate(45deg) scale(.76); }
#app .ib-dot[data-role="5"], #app .ib-shape[data-role="5"] { border-radius: 1px; transform: rotate(45deg) scale(.76); background: var(--surface); border: 2px solid var(--c); }
#app .ib-dot[data-named="1"], #app .ib-shape[data-named="1"] { outline: 1.5px solid var(--ink); outline-offset: 2px; z-index: 3; }
#app button.ib-dot { cursor: pointer; }
/* A 10px dot, reachable by a thumb: the press lands on a ring around it. */
#app button.ib-dot::before { content: ''; position: absolute; inset: -7px; }
#app button.ib-dot:hover { filter: brightness(1.12); }
#app button.ib-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 5; }
#app .ib-shape { position: relative; display: inline-block; width: 11px; height: 11px; flex: none; }
#app .ib-shape[data-named="1"] { outline-offset: 1.5px; }
#app .ib-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; }
#app .ib-key { display: inline-flex; align-items: center; gap: 7px; font: 400 12px/1.5 var(--ibSans); color: var(--t2); }

/* ── Home's card ──────────────────────────────────────────────────────── */
#app .ic.ib-card { padding: 20px; gap: 18px; }
@media (min-width: 720px) { #app .ic.ib-card { padding: 24px; } }
#app .ib-banner { margin: 0; background: var(--ibLine2); border-radius: 12px; padding: 10px 14px; font: 400 14px/1.55 var(--ibSans); color: var(--t2); text-wrap: pretty; }
#app .ib-kick { font: 600 14px/1.4 var(--ibSans); color: var(--accent); }
#app .ib-card .ib-head { margin: -8px 0 0; font: 600 21px/1.4 var(--ibSans) !important; color: var(--ink); text-wrap: pretty; }
#app .ib-card .ib-head .ib-up, #app .ib-card .ib-head .ib-dn { white-space: nowrap; }
#app .ib-pic { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#app .ib-named { display: flex; flex-direction: column; }
#app .ib-named-h { font: 600 14px/1.4 var(--ibSans); padding-bottom: 8px; color: var(--ink); }
#app .ib-forms { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; }
@media (min-width: 720px) { #app .ib-card .ib-forms.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#app .ib-form {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; width: 100%;
  padding: 12px 0; margin: 0; border: 0; border-top: 1px solid var(--ibLine2); background: none;
  text-align: start; color: var(--ink); font: 400 14px/1.5 var(--ibSans);
}
#app button.ib-form { cursor: pointer; }
#app button.ib-form:hover .ib-form-name { color: var(--accent); }
#app .ib-form-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
#app .ib-form-name { font: 600 14px/1.45 var(--ibSans); text-wrap: pretty; }
#app .ib-pill { font: 400 11px/1.6 var(--ibSans); color: var(--t2); background: var(--ibLine2); border-radius: 6px; padding: 0 6px; }
#app .ib-form-alt { display: block; font: 400 12px/1.5 var(--ibSans); color: var(--faint); overflow-wrap: anywhere; }
#app .ib-form-what { font: 400 14px/1.5 var(--ibSans); color: var(--t2); }
#app .ib-stake { display: flex; align-items: baseline; gap: 6px; font-size: 14px; }
#app .ib-bycos { display: flex; flex-direction: column; }
#app .ib-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px;
  padding: 0; margin: 0; border: 0; border-top: 1px solid var(--ibLine2); background: none; cursor: pointer;
  font: 600 14px/1.3 var(--ibSans); color: var(--ink);
}
#app .ib-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
#app .ib-caret { color: var(--faint); font-size: 12px; }
#app .ib-cos { display: flex; flex-direction: column; }
#app .ib-order { margin: 0; padding: 2px 0 6px; font: 400 12px/1.5 var(--ibSans); color: var(--faint); }
#app .ib-corow, #app .ib-co {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  width: 100%; min-height: 52px; padding: 6px 0; margin: 0; border: 0; border-top: 1px solid var(--ibLine2);
  background: none; text-align: start; color: var(--ink);
}
#app button.ib-corow, #app button.ib-co { cursor: pointer; }
#app button.ib-corow:hover .ib-co-name, #app button.ib-co:hover .ib-co-name { color: var(--accent); }
#app .ib-co-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#app .ib-co-name { font: 400 14px/1.4 var(--ibSans); text-wrap: pretty; overflow-wrap: anywhere; }
#app .ib-co-sub { font: 400 12px/1.5 var(--ibSans); color: var(--t2); }
#app .ib-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px;
  margin: 0; border: 0; border-radius: 12px; background: var(--ibAccSoft); color: var(--accent);
  font: 600 14px/1.3 var(--ibSans); cursor: pointer;
}
#app .ib-cta:hover { background: color-mix(in oklab, var(--accent) 24%, transparent); }
#app .ib-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── the market screen ────────────────────────────────────────────────── */
#app .ib-page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
#app .ib-top { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 0; }
#app .om-scr .ib-h1 { margin: 0; color: var(--ink); text-wrap: balance; }
#app .ib-lede { max-width: 68ch; }
#app .ib-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
#app .ib-segs { display: flex; background: var(--ibLine2); border-radius: 12px; min-width: 0; }
#app .ib-periods { flex: 1 1 360px; max-width: 680px; }
#app .ib-seg {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; margin: 0; border: 0; border-radius: 12px;
  background: transparent; color: var(--t2); font: 500 14px/1.2 var(--ibSans); white-space: nowrap; cursor: pointer;
}
@media (max-width: 719px) { #app .ib-seg { padding: 0 4px; } }
#app .ib-seg.is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ibLine); }
#app .ib-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#app .ib-step { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
#app .ib-step-btn {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; background: var(--surface);
  color: var(--accent); font: 400 21px/1 var(--ibSans); cursor: pointer;
}
#app .ib-step-btn[disabled] { color: var(--ibLine); cursor: default; }
#app .ib-step-day { min-width: 180px; text-align: center; font: 600 17px/1.3 var(--ibSans); color: var(--ink); }
@media (max-width: 719px) { #app .ib-step { width: 100%; justify-content: space-between; } #app .ib-step-day { min-width: 0; flex: 1; } }
#app .ib-meta { font: 400 12px/18px var(--ibMono); color: var(--faint); overflow-wrap: anywhere; padding: 0 4px; }
#app .ib-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
#app .ib-isl {
  background: var(--surface); border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
@media (min-width: 720px) { #app .ib-isl { padding: 28px; } }
#app .om-scr .ib-h2 { margin: 0; font: 600 17px/1.4 var(--ibSans) !important; color: var(--ink); }
#app .ib-fig { flex: 1 1 340px; gap: 20px; }
#app .ib-ot { flex: 2 1 560px; }
#app .ib-half { flex: 1 1 520px; }
#app .ib-tre { flex: 1 1 420px; }
#app .ib-ex { flex: 2 1 600px; }
#app .ib-isl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
#app .ib-isl-title { flex: 1 1 220px; }
#app .ib-sorts .ib-seg { flex: none; padding: 0 12px; font-size: 14px; }

/* the period in figures */
#app .ib-big2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#app .ib-big { font: 500 40px/1 var(--ibMono); color: var(--ink); }
#app .ib-big-l { margin-top: 8px; font: 400 14px/1.4 var(--ibSans); color: var(--t2); }
#app .ib-updn { display: flex; flex-direction: column; gap: 8px; }
#app .ib-updn-t { display: flex; justify-content: space-between; gap: 12px; font: 600 14px/1.4 var(--ibSans); }
#app .ib-updn-bar { display: flex; gap: 3px; height: 12px; }
#app .ib-updn-bar i, #app .ib-split i { display: block; min-width: 4px; }
#app .ib-split-u { background: var(--up); border-radius: 3px; }
#app .ib-split-d { background: var(--down); border-radius: 3px; }
#app .ib-roles, #app .ib-comp { display: flex; flex-direction: column; gap: 8px; }
#app .ib-sub-h { font: 600 14px/1.4 var(--ibSans); color: var(--ink); }
#app .ib-comp .ib-sub-h { font-weight: 400; font-size: 12px; color: var(--faint); }
#app .ib-role, #app .ib-comp-row {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center;
  font: 400 14px/1.4 var(--ibSans);
}
#app .ib-comp-row.is-sector { grid-template-columns: minmax(0, 1fr) auto; }
#app .ib-role-l { color: var(--t2); }
#app .ib-role-v, #app .ib-comp-v { font: 400 12px/1.3 var(--ibMono); color: var(--t2); white-space: nowrap; }
#app .ib-role-track { grid-column: 2 / -1; height: 4px; border-radius: 2px; background: var(--ibLine2); overflow: hidden; }
#app .ib-role-track i { display: block; height: 100%; border-radius: 2px; background: var(--iris); }
#app .ib-comp-bar { grid-column: 2 / -1; display: flex; }
#app .ib-comp-row.is-sector .ib-comp-bar { grid-column: 1 / -1; }
#app .ib-split { display: flex; gap: 2px; height: 8px; min-width: 4px; }
#app .ib-comp-sec { padding-top: 12px; border-top: 1px solid var(--ibLine2); }

/* the period over time */
#app .ib-ot-plot { --oh: 70px; display: flex; flex-direction: column; gap: 4px; flex: 1; justify-content: center; }
@media (min-width: 720px) { #app .ib-ot-plot { --oh: 92px; } }
#app .ib-ot-max { font: 400 11px/1.3 var(--ibMono); }
#app .ib-ot-row { display: flex; align-items: stretch; gap: 2px; height: calc(var(--oh) * 2 + 1px); }
#app .ib-ot-row.is-dense { gap: 1px; }
#app .ib-ot-col {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 0; margin: 0; border: 0;
  border-radius: 3px; background: transparent;
}
#app button.ib-ot-col { cursor: pointer; }
#app button.ib-ot-col:hover { background: var(--ibLine2); }
#app .ib-ot-col.is-on { background: var(--ibAccSoft); outline: 2px solid var(--accent); outline-offset: 1px; }
#app .ib-ot-top { height: var(--oh); display: flex; flex-direction: column; justify-content: flex-end; flex: none; }
#app .ib-ot-bot { height: var(--oh); display: flex; flex-direction: column; justify-content: flex-start; flex: none; }
#app .ib-ot-mid { height: 1px; flex: none; background: var(--ink); opacity: .5; }
#app .ib-ot-u { display: block; min-height: 2px; background: var(--up); border-radius: 2px 2px 0 0; }
#app .ib-ot-d { display: block; min-height: 2px; background: var(--down); border-radius: 0 0 2px 2px; }
#app .ib-ot-col.is-dim .ib-ot-u, #app .ib-ot-col.is-dim .ib-ot-d { opacity: .55; }
#app .ib-ot-ends { display: flex; justify-content: space-between; font: 400 11px/1.3 var(--ibMono); color: var(--faint); }

/* the companies and the full list */
#app .ib-list { display: flex; flex-direction: column; }
#app .ib-co { grid-template-columns: 56px minmax(0, 1fr) auto; min-height: 56px; padding: 8px 2px; }
#app .ib-co-net { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#app .ib-co-named { display: flex; flex-wrap: wrap; gap: 4px; }
#app .ib-named-chip { font: 400 12px/1.5 var(--ibSans); color: var(--ink); background: var(--ibIrisSoft); border-radius: 6px; padding: 1px 6px; }
#app .ib-filters { display: flex; flex-wrap: wrap; gap: 8px; }
#app .ib-search {
  flex: 1 1 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--ibLine); background: var(--bg);
  color: var(--ink); padding: 0 14px; font: 400 17px/1.3 var(--ibSans);
}
#app .ib-search:focus-visible, #app .ib-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#app .ib-sides { flex: 1 1 220px; }
#app .ib-select {
  flex: 1 1 150px; min-width: 0; min-height: 44px; border-radius: 12px; border: 1px solid var(--ibLine);
  background: var(--surface); color: var(--ink); padding: 0 10px; font: 400 17px/1.3 var(--ibSans);
}
#app .ib-toggle-btn {
  min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ibLine); background: var(--surface);
  color: var(--ink); font: 500 14px/1.3 var(--ibSans); cursor: pointer;
}
#app .ib-toggle-btn.is-on { background: var(--ibAccSoft); color: var(--accent); font-weight: 600; border-color: transparent; }
#app .ib-tr {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  width: 100%; min-height: 56px; padding: 10px 0; margin: 0; border: 0; border-top: 1px solid var(--ibLine2);
  background: none; text-align: start; color: var(--ink);
}
#app button.ib-tr { cursor: pointer; }
#app button.ib-tr:hover .ib-tr-name { color: var(--accent); }
#app .ib-glyph {
  width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; background: var(--ibUpSoft); color: var(--up);
}
#app .ib-glyph[data-side="down"] { background: var(--ibDnSoft); color: var(--down); }
#app .ib-glyph.is-tre { background: var(--ibIrisSoft); }
#app .ib-tr-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#app .ib-tr-co { display: flex; gap: 8px; align-items: baseline; min-width: 0; font: 400 14px/1.4 var(--ibSans); }
#app .ib-tr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#app .ib-tr-sub { font: 400 12px/1.5 var(--ibSans); color: var(--t2); }
#app .ib-tr-who { font: 500 12px/1.5 var(--ibSans); color: var(--ink); }
#app .ib-tr-pct { font: 600 14px/1.3 var(--ibMono); color: var(--ink); white-space: nowrap; }
#app .ib-notice { font: 500 12px/1.3 var(--ibSans); color: var(--accent); white-space: nowrap; }
#app .ib-more {
  min-height: 44px; margin-top: 8px; padding: 0 16px; border: 0; border-radius: 12px;
  background: var(--ibAccSoft); color: var(--accent); font: 600 14px/1.3 var(--ibSans); cursor: pointer;
}
#app .ib-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#app .ib-ex-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
@media (min-width: 720px) { #app .ib-ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#app .ib-ex-item { border-top: 1px solid var(--ibLine2); padding: 12px 0; }
#app .ib-ex-q { margin: 0; font: 600 17px/1.5 var(--ibSans); color: var(--ink); }
#app .ib-ex-a { margin: 8px 0 0; font: 400 14px/1.7 var(--ibSans); color: var(--t2); text-wrap: pretty; }
#app .ib-licence { margin: 8px 0 0; font: 400 12px/1.6 var(--ibSans); color: var(--faint); }

/* one company's record */
#app .ib-drill { max-width: 760px; width: 100%; margin: 0 auto; }
#app .ib-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 12px; background: var(--ibAccSoft); color: var(--accent); font: 600 14px/1.3 var(--ibSans); cursor: pointer;
}
#app .ib-drill-head { display: flex; flex-direction: column; gap: 6px; }
#app .ib-drill-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#app .ib-drill-tags .ib-cap { margin: 0; font-size: 12px; }
#app .ib-tickchip { font: 600 14px/1.3 var(--ibMono); color: var(--ink); background: var(--ibLine2); border-radius: 8px; padding: 3px 8px; }
#app .ib-netall { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#app .ib-netall .ib-cap { margin: 0; font-size: 12px; }
#app .ib-net-big { font-size: 21px; }
#app .ib-time { position: relative; width: 100%; }
#app .ib-time > * { position: absolute; }
#app .ib-time-grid { right: 0; height: 1px; background: var(--ibLine2); }
#app .ib-time .ib-base { left: auto; right: 0; }
#app .ib-time-lab { left: 0; font: 400 11px/14px var(--ibMono); color: var(--faint); white-space: nowrap; }
#app .ib-time-side { left: 0; font: 400 11px/14px var(--ibSans); }
#app .ib-time .ib-time-side { display: none; }
#app .ib-stk-v { width: 2px; margin-left: -1px; }
#app .ib-stk-h { height: 0; border-top: 2px solid; }
#app .ib-stk-h.is-open { border-top-style: dashed; }
#app .ib-stk-b { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; border: 1.5px solid; background: var(--surface); box-sizing: border-box; }
#app .ib-stk-a { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; }
#app .ib-stk-lab { font: 600 11px/14px var(--ibMono); color: var(--ink); white-space: nowrap; }
#app .ib-holders { display: flex; flex-direction: column; gap: 6px; }
#app .ib-holder { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 400 14px/1.4 var(--ibSans); }
#app .ib-holder .ib-form-alt { display: inline; }
#app .ib-swatch { width: 14px; height: 3px; border-radius: 2px; flex: none; }
#app .ib-to-co { align-self: flex-start; }

/* A trade opens its filing (1 Oct 2026). The filing's link is stretched over
   the whole row, so a press anywhere on the trade opens it; the company code
   and a trader's name are buttons above that layer, each opening its own
   record. Keyboard order is unchanged: code, name, then the filing. */
#app .ib-tr, #app .ib-form { position: relative; }
#app .ib-tr.has-src:hover, #app .ib-form.has-src:hover { background: var(--ibLine2); }
#app .ib-tr-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
#app .ib-src, #app .ib-src2 {
  display: inline-flex; align-items: baseline; gap: 2px; font: 500 12px/1.3 var(--ibSans); color: var(--accent);
  text-decoration: none; white-space: nowrap;
}
#app .ib-src::after { content: ''; position: absolute; inset: 0; }
#app .ib-src:focus-visible, #app .ib-src2:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#app .ib-src:hover, #app .ib-src2:hover { text-decoration: underline; }
#app .ib-src2 { position: relative; z-index: 1; }
#app .ib-srcs { display: flex; flex-wrap: wrap; gap: 4px 14px; }
#app .is-go {
  position: relative; z-index: 1; cursor: pointer; border: 0; margin: 0; padding: 0; background: none;
  font: inherit; color: inherit; text-align: start;
}
#app .is-go:hover, #app .is-go:hover .ib-tr-name { color: var(--accent); text-decoration: underline; }
#app .is-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#app button.ib-tr-co { max-width: 100%; }
#app .ib-who.is-go, #app .ib-form-name.is-go, #app .ib-strong.is-go { color: var(--accent); }
#app .ib-inline.is-go { display: inline; color: var(--ink); text-decoration: underline; text-decoration-color: var(--ibLine); text-underline-offset: 3px; }
#app .ib-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#app .ib-people-h { font: 400 12px/1.5 var(--ibSans); color: var(--t2); }
#app .ib-person-chip {
  min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--ibLine); background: var(--surface);
  color: var(--ink); font: 500 14px/1.3 var(--ibSans); cursor: pointer;
}
#app .ib-person-chip:hover { border-color: var(--accent); color: var(--accent); }
#app .ib-person-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#app .ib-stake-row .ib-glyph, #app .ib-seat .ib-glyph { background: var(--ibIrisSoft); color: var(--iris); }
#app .ib-person .ib-h1 { overflow-wrap: anywhere; }
#app .ib-stake-row.is-gone .ib-tr-pct { color: var(--faint); font-weight: 400; }