/* instiv2 motion components: equity curve, lineup wall, rebalance rotation, tape, count.
   Mounted by motion.js on [data-iv2]. Colours are tokens so both themes work. */
:root {
  --iv2-surface: #FFFFFF;
  --iv2-surface-2: #F6F8FB;
  --iv2-fg: #0B1220;
  --iv2-muted: rgba(11, 18, 32, 0.74);
  --iv2-faint: rgba(11, 18, 32, 0.62);
  --iv2-line: rgba(11, 18, 32, 0.10);
  --iv2-grid: rgba(11, 18, 32, 0.065);
  --iv2-strat: #2463EB;
  --iv2-strat-soft: rgba(36, 99, 235, 0.14);
  --iv2-bench: rgba(11, 18, 32, 0.42);
  --iv2-gain: #0B8F62;
  --iv2-gain-soft: rgba(11, 143, 98, 0.10);
  --iv2-loss: #C93B3B;
  --iv2-loss-soft: rgba(201, 59, 59, 0.08);
  --iv2-shadow: 0 1px 0 rgba(11, 18, 32, 0.03), 0 18px 40px -24px rgba(11, 18, 32, 0.22);
  --iv2-r: 14px;
  --iv2-ease: cubic-bezier(.2, .7, .1, 1);
  --iv2-mono: "JetBrains Mono", "JBM Fallback", ui-monospace, "SF Mono", Menlo, monospace;
  --iv2-sans: Inter, "Inter Fallback", system-ui, -apple-system, sans-serif;
}
html[data-theme="dark"] {
  --iv2-surface: #0A1120;
  --iv2-surface-2: #0D1628;
  --iv2-fg: #F2F5FB;
  --iv2-muted: rgba(226, 233, 246, 0.78);
  --iv2-faint: rgba(226, 233, 246, 0.62);
  --iv2-line: rgba(214, 226, 255, 0.12);
  --iv2-grid: rgba(214, 226, 255, 0.06);
  --iv2-strat: #7FB2FF;
  --iv2-strat-soft: rgba(127, 178, 255, 0.16);
  --iv2-bench: rgba(226, 233, 246, 0.46);
  --iv2-gain: #3DDC97;
  --iv2-gain-soft: rgba(61, 220, 151, 0.10);
  --iv2-loss: #FF7B7B;
  --iv2-loss-soft: rgba(255, 123, 123, 0.08);
  --iv2-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 60px -30px rgba(0, 0, 0, 0.8);
}

/* ---------- shared frame ---------- */
.iv2 { position: relative; box-sizing: border-box; min-width: 0; color: var(--iv2-fg); background: var(--iv2-surface); border: 1px solid var(--iv2-line); border-radius: var(--iv2-r); box-shadow: var(--iv2-shadow); font-family: var(--iv2-sans); font-variant-numeric: tabular-nums; }
.iv2 *, .iv2 *::before, .iv2 *::after { box-sizing: border-box; }
.iv2.iv2-glass { background: color-mix(in srgb, var(--iv2-surface) 72%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.iv2.iv2-bare { background: none; border: 0; box-shadow: none; }
.iv2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px 0; flex-wrap: wrap; }
.iv2-eyebrow { display: block; margin: 0 0 6px; font: 500 11.5px/1 var(--iv2-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--iv2-faint); }
.iv2-title { display: block; font-weight: 650; font-size: 17px; line-height: 1.2; letter-spacing: -0.015em; }
.iv2-cap { margin: 0; padding: 10px 18px 14px; font: 400 11px/1.45 var(--iv2-mono); letter-spacing: .01em; color: var(--iv2-faint); }
.iv2-gain { color: var(--iv2-gain); }
.iv2-loss { color: var(--iv2-loss); }

/* ---------- a. curve ---------- */
.iv2-stats { display: flex; gap: 22px; margin: 0; }
.iv2-stats div { display: flex; flex-direction: column; gap: 5px; }
.iv2-stats dt { font: 500 11px/1 var(--iv2-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--iv2-faint); }
.iv2-stats dd { margin: 0; font: 600 16px/1 var(--iv2-mono); letter-spacing: -0.01em; }
.iv2-legend { display: flex; gap: 8px 18px; padding: 12px 18px 0; font: 500 11px/1 var(--iv2-mono); color: var(--iv2-muted); flex-wrap: wrap; }
.iv2-legend span { display: inline-flex; align-items: center; gap: 7px; }
.iv2-legend i { width: 14px; height: 2px; border-radius: 1px; background: var(--iv2-strat); }
.iv2-legend .k-bench i { background: var(--iv2-bench); }
.iv2-plot { position: relative; height: clamp(220px, 32vw, 380px); margin: 6px 0 0; }
.iv2-plot canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.iv2-tip { position: absolute; top: 0; left: 0; z-index: 2; min-width: 168px; padding: 9px 11px; border-radius: 10px; pointer-events: none; background: var(--iv2-surface); border: 1px solid var(--iv2-line); box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .45); font: 500 11.5px/1.5 var(--iv2-mono); color: var(--iv2-fg); opacity: 0; transition: opacity .15s; }
.iv2-tip.is-on { opacity: 1; }
.iv2-tip .d { color: var(--iv2-faint); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.iv2-tip .r { display: flex; justify-content: space-between; gap: 14px; }
.iv2-tip .r i { display: inline-block; width: 8px; height: 2px; margin-right: 7px; vertical-align: middle; background: var(--iv2-strat); }
.iv2-tip .r.b i { background: var(--iv2-bench); }
.iv2-tip .r span { color: var(--iv2-muted); }
.iv2-tip .ev { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--iv2-line); color: var(--iv2-muted); font-family: var(--iv2-sans); font-size: 11.5px; max-width: 220px; white-space: normal; }
.iv2-curve[data-head="off"] .iv2-head { display: none; }

/* ---------- b. lineup ---------- */
.iv2-lu-sort { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--iv2-surface-2); border: 1px solid var(--iv2-line); }
.iv2-lu-sort button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 7px; font: 500 11px/1 var(--iv2-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--iv2-muted); transition: background .25s, color .25s; }
.iv2-lu-sort button:hover { color: var(--iv2-fg); }
/* P1: 44 px tap areas around the small sort buttons and the tape pause, the look unchanged */
.iv2-lu-sort button { position: relative; }
.iv2-lu-sort button::after { content: ""; position: absolute; inset: -8px -2px; }
.iv2-tape-pause::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.iv2-lu-sort button[aria-pressed="true"] { background: var(--iv2-surface); color: var(--iv2-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--iv2-line); }
.iv2-lu-sort button:focus-visible { outline: 2px solid var(--iv2-strat); outline-offset: 1px; }
.iv2-lu-sort svg { width: 8px; height: 8px; opacity: 0; transition: transform .3s var(--iv2-ease), opacity .2s; }
.iv2-lu-sort button[aria-pressed="true"] svg { opacity: .8; }
.iv2-lu-sort button[data-dir="asc"] svg { transform: rotate(180deg); }
.iv2-lu-ov { position: relative; height: clamp(150px, 18vw, 220px); margin: 14px 18px 0; border-bottom: 1px solid var(--iv2-line); }
.iv2-lu-ov svg { position: absolute; inset: 30px 0 0 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--iv2-ease); }
.iv2-lu.is-in .iv2-lu-ov svg { clip-path: inset(-20px -20px -20px 0); }
.iv2-lu-ov path { fill: none; stroke: var(--iv2-fg); stroke-opacity: .16; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: stroke-opacity .25s, stroke .25s, stroke-width .25s; }
.iv2-lu-ov path.bench { stroke: var(--iv2-bench); stroke-opacity: .9; stroke-dasharray: 3 3; }
.iv2-lu-ov .gl { stroke: var(--iv2-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.iv2-lu-ov.has-hi path:not(.bench):not(.is-hi) { stroke-opacity: .07; }
.iv2-lu-ov path.is-hi { stroke: var(--iv2-strat); stroke-opacity: 1; stroke-width: 2; }
.iv2-lu-ovlab { position: absolute; left: 0; top: 0; font: 500 11px/1.3 var(--iv2-mono); color: var(--iv2-muted); pointer-events: none; }
.iv2-lu-ovlab b { color: var(--iv2-fg); font-weight: 600; font-family: var(--iv2-sans); font-size: 12.5px; }
.iv2-lu-ovlab .iv2-gain { margin-left: 8px; }
.iv2-lu-grid { list-style: none; margin: 0; padding: 14px 18px 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.iv2-card { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 8px; padding: 11px 12px 12px; border-radius: 10px; border: 1px solid var(--iv2-line); background: var(--iv2-surface-2); cursor: default; outline: none;
  opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .55s var(--iv2-ease), transform .7s var(--iv2-ease), border-color .2s, background .2s; transition-delay: calc(var(--i, 0) * 34ms); }
.iv2-lu.is-in .iv2-card { opacity: 1; transform: none; }
.iv2-lu.is-settled .iv2-card { transition-delay: 0s; }
.iv2-card:hover, .iv2-card:focus-visible, .iv2-card.is-hi { border-color: color-mix(in srgb, var(--iv2-strat) 55%, transparent); background: var(--iv2-surface); }
.iv2-card .rk { grid-row: 1; font: 500 11px/1.45 var(--iv2-mono); color: var(--iv2-faint); }
.iv2-card .nm { grid-row: 1; min-width: 0; font-weight: 600; font-size: 13px; line-height: 1.35; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv2-card .nm small { display: block; font-weight: 400; font-size: 11px; color: var(--iv2-faint); overflow: hidden; text-overflow: ellipsis; }
.iv2-card svg { grid-column: 1 / -1; width: 100%; height: 34px; overflow: visible; display: block; }
.iv2-card svg path { fill: none; stroke: var(--iv2-strat); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.iv2-card svg path.a { stroke: none; fill: var(--iv2-strat-soft); }
.iv2-card svg path.bn { stroke: var(--iv2-bench); stroke-width: 1; stroke-dasharray: 2 2; opacity: .7; }
.iv2-card .spk { grid-column: 1 / -1; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--iv2-ease); transition-delay: calc(var(--i, 0) * 34ms + 180ms); }
.iv2-lu.is-in .iv2-card .spk { clip-path: inset(-4px -4px -4px 0); }
.iv2-lu.is-settled .iv2-card .spk { transition-delay: 0s; }
.iv2-card .fg { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 6px; }
.iv2-card .fg span { display: flex; flex-direction: column; gap: 3px; font: 600 13px/1 var(--iv2-mono); color: var(--iv2-muted); transition: color .3s; }
.iv2-card .fg span em { font: 500 11px/1 var(--iv2-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--iv2-faint); }
.iv2-card .fg span.on { color: var(--iv2-fg); }
.iv2-card .fg span.on.c { color: var(--iv2-gain); }
.iv2-card .fg span.on.d { color: var(--iv2-loss); }
.iv2-lu-bench { font: 500 11px/1 var(--iv2-mono); color: var(--iv2-muted); white-space: nowrap; align-self: center; }

/* ---------- c. rotation ---------- */
.iv2-rot-date { text-align: right; }
.iv2-rot-date time { display: inline-flex; font: 600 17px/1 var(--iv2-mono); letter-spacing: -0.01em; overflow: hidden; height: 1.2em; align-items: center; }
.iv2-rot-date time span { display: inline-block; white-space: pre; }
.iv2-rot-date time span.roll { animation: iv2-roll .5s var(--iv2-ease) both; }
@keyframes iv2-roll { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
.iv2-rot-tags { display: flex; gap: 8px; padding: 14px 18px 0; flex-wrap: wrap; }
.iv2-tag { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--iv2-line); font: 500 11px/1 var(--iv2-mono); color: var(--iv2-muted); }
.iv2-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--iv2-faint); }
.iv2-tag.in i { background: var(--iv2-gain); }
.iv2-tag.out i { background: var(--iv2-loss); }
.iv2-tag b { color: var(--iv2-fg); font-weight: 600; }
.iv2-chips { list-style: none; margin: 0; padding: 14px 18px 4px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; min-height: 92px; }
.iv2-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--iv2-line); background: var(--iv2-surface-2); font: 500 12px/1 var(--iv2-mono); letter-spacing: .02em; color: var(--iv2-fg); white-space: nowrap; transition: background .6s, border-color .6s, color .4s, opacity .4s; }
.iv2-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--iv2-faint); opacity: .7; transition: background .4s; }
.iv2-chip.is-new { background: var(--iv2-gain-soft); border-color: color-mix(in srgb, var(--iv2-gain) 45%, transparent); }
.iv2-chip.is-new::before { background: var(--iv2-gain); opacity: 1; }
.iv2-chip.is-out { background: var(--iv2-loss-soft); border-color: color-mix(in srgb, var(--iv2-loss) 45%, transparent); color: var(--iv2-muted); text-decoration: line-through; text-decoration-color: var(--iv2-loss); }
.iv2-chip.is-out::before { background: var(--iv2-loss); opacity: 1; }
.iv2-rot-track { display: flex; gap: 0; margin: 10px 18px 0; padding-top: 12px; border-top: 1px solid var(--iv2-line); }
.iv2-rot-track span { flex: 1; position: relative; font: 500 11px/1 var(--iv2-mono); color: var(--iv2-faint); padding-top: 12px; white-space: nowrap; transition: color .4s; }
.iv2-rot-track span::before { content: ""; position: absolute; top: 0; left: 0; right: 4px; height: 2px; border-radius: 1px; background: var(--iv2-line); }
.iv2-rot-track span::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; border-radius: 1px; background: var(--iv2-strat); }
.iv2-rot-track span.done::after { width: calc(100% - 4px); }
.iv2-rot-track span.on { color: var(--iv2-fg); }
.iv2-rot-track span.on::after { animation: iv2-fill var(--dwell, 3.6s) linear both; }
.iv2-rot.is-paused .iv2-rot-track span.on::after { animation-play-state: paused; }
/* P1: a track too narrow for every date shows the current one only (motion.js sets .is-tight); the last date
   grows to the left so it stays inside the track */
.iv2-rot-track.is-tight span { color: transparent; }
.iv2-rot-track.is-tight span.on { color: var(--iv2-fg); overflow: visible; }
.iv2-rot-track.is-tight span.on:last-child { display: flex; justify-content: flex-end; }
@keyframes iv2-fill { from { width: 0; } to { width: calc(100% - 4px); } }

/* ---------- d. tape ---------- */
.iv2-tape { overflow: hidden; }
.iv2-tape-vp { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.iv2-tape-track { display: flex; width: max-content; animation: iv2-tape var(--dur, 80s) linear infinite; will-change: transform; }
.iv2-tape.is-paused .iv2-tape-track, .iv2-tape-vp:hover .iv2-tape-track { animation-play-state: paused; }
@keyframes iv2-tape { to { transform: translate3d(-50%, 0, 0); } }
.iv2-tape ul { list-style: none; margin: 0; padding: 0; display: flex; }
.iv2-tape li { display: inline-flex; align-items: baseline; gap: 10px; padding: 14px 22px; border-right: 1px solid var(--iv2-line); white-space: nowrap; font-size: 13.5px; font-weight: 550; letter-spacing: -0.01em; }
.iv2-tape li .v { font: 600 13.5px/1 var(--iv2-mono); color: var(--iv2-gain); }
.iv2-tape li .u { font: 500 11px/1 var(--iv2-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--iv2-faint); }
.iv2-tape li.bm, .iv2-tape li.bm .v { color: var(--iv2-muted); }
.iv2-tape .iv2-cap { border-top: 1px solid var(--iv2-line); padding-top: 9px; padding-bottom: 10px; }

/* ---------- e. count ---------- */
[data-iv2="count"] { font-variant-numeric: tabular-nums; display: inline-block; text-align: inherit; }

/* ---------- phone ---------- */
@media (max-width: 560px) {
  .iv2-head { padding: 14px 14px 0; gap: 12px; }
  .iv2-cap { padding: 10px 14px 12px; font-size: 12px; }
  .iv2-eyebrow { font-size: 12px; letter-spacing: .1em; }
  .iv2-legend { font-size: 12px; }
  .iv2-legend, .iv2-rot-tags { padding-left: 14px; padding-right: 14px; }
  .iv2-stats { gap: 16px; }
  .iv2-stats dd { font-size: 14px; }
  .iv2-plot { height: 230px; }
  .iv2-lu-ov { margin: 12px 14px 0; height: 168px; }
  .iv2-lu-ov svg { top: 44px; }
  .iv2-lu-grid { padding: 12px 14px 4px; grid-template-columns: 1fr 1fr; gap: 6px; }
  .iv2-card { padding: 10px; column-gap: 7px; }
  .iv2-card .nm { font-size: 12px; }
  .iv2-card .nm small { display: none; }
  .iv2-card .fg { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .iv2-card .fg span { font-size: 12px; }
  .iv2-card .fg span.s { display: none; }
  .iv2-lu-sort button { padding: 0 9px; letter-spacing: .06em; }
  .iv2-chips { padding: 12px 14px 4px; }
  .iv2-chip { height: 28px; padding: 0 8px; font-size: 11px; }
  .iv2-rot-track { margin: 10px 14px 0; }
  .iv2-rot-track span { font-size: 0; }
  .iv2-rot-track span.on { font-size: 12px; overflow: visible; }
  .iv2-tape li { padding: 12px 16px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .iv2-card, .iv2-card .spk, .iv2-lu-ov svg { transition: none !important; }
  .iv2-tape-track { animation: none; }
  .iv2-tape-vp { overflow-x: auto; }
  .iv2-rot-track span.on::after { animation: none; width: calc(100% - 4px); }
  .iv2-rot-date time span.roll { animation: none; }
}

/* tape pause control */
.iv2-tape { position: relative; }
.iv2-tape-pause { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--iv2-line); background: var(--iv2-surface); color: var(--iv2-fg); cursor: pointer; opacity: .75; }
.iv2-tape-pause:hover, .iv2-tape-pause:focus-visible { opacity: 1; }
.iv2-tape-pause svg { width: 12px; height: 12px; fill: currentColor; }
.iv2-tape-pause .g { display: none; }
.iv2-tape.is-held .iv2-tape-pause .p { display: none; }
.iv2-tape.is-held .iv2-tape-pause .g { display: block; }
.iv2-tape:has(.iv2-cap) .iv2-tape-pause { top: 22px; }