/* The Split chart (static/js/split_chart.mjs; WOW.md §3, §5 I1; POLISH.md findings 8–14) and its
   interactive layer: the view switch, the break points with their tooltips, the cursor and the week
   scrubber. Light by default; inside .sc-ink (the ink bands) and the product's dark mode, ink. */
.sc { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; }
.sc-grid { stroke: var(--ds-gray-200); stroke-width: 1; }
.sc-grid-label, .sc-tick { fill: var(--ds-gray-500); letter-spacing: .01em; }
.sc-zero-label { fill: var(--ds-gray-700); font-weight: 600; }
.sc-zero { stroke: var(--ds-gray-400); }
.sc-day { stroke: var(--ds-gray-100); stroke-width: 1; }
/* The weekend (FIX-ROUND.md F1.3): a muted band, labelled where no line passes. */
.sc-weekend { fill: rgba(14, 21, 37, .045); }
/* A day without a session on a week axis (NEXT-FIX.md NF10): the same label on the same baseline, dimmed (3.26:1 or more). */
.sc-tick-empty { opacity: .8; }
.sc-weekend-label { fill: var(--ds-gray-500); font-size: .85em; letter-spacing: .04em; }
.sc-traded { stroke: var(--ds-data); }
.sc-plan { stroke: var(--ds-gain-line); }
.sc-plan-glow { stroke: var(--ds-gain); opacity: .14; }
/* The gap between the lines: the one loss-red fill, flat (FIX-ROUND.md F1.6). */
.sc-gap { fill: var(--ds-loss); fill-opacity: .14; }
.sc-break { fill: var(--ds-loss); stroke: var(--ds-loss); stroke-opacity: .22; }
.sc-bracket, .sc-leader { stroke: var(--ds-loss-text); }
/* The week's totals as value chips (F1.4), each with a leader line when moved off its line's end. */
.sc-chip { fill: var(--ds-white); stroke: var(--ds-gray-300); }
.sc-chip-plan { stroke: rgba(13, 148, 104, .45); }
.sc-chip-cost { stroke: rgba(197, 42, 48, .45); }
.sc-leader-plan { stroke: var(--ds-gain-line); }
.sc-leader-traded { stroke: var(--ds-data); }
.sc-end { font-size: 1em; font-weight: 600; }
.sc-end-plan { fill: var(--ds-gain-text); }
.sc-end-traded { fill: var(--ds-gray-700); }
.sc-end-cost { fill: var(--ds-loss-text); }
:is(.sc-ink, .dark) .sc-grid { stroke: rgba(148, 163, 184, .12); }
:is(.sc-ink, .dark) .sc-grid-label, :is(.sc-ink, .dark) .sc-tick { fill: var(--ds-ink-text-3); }
:is(.sc-ink, .dark) .sc-zero-label { fill: var(--ds-ink-text-2); }
:is(.sc-ink, .dark) .sc-zero { stroke: rgba(148, 163, 184, .42); }
:is(.sc-ink, .dark) .sc-day { stroke: rgba(148, 163, 184, .08); }
:is(.sc-ink, .dark) .sc-weekend { fill: rgba(148, 163, 184, .09); }
:is(.sc-ink, .dark) .sc-weekend-label { fill: var(--ds-ink-text-3); }
:is(.sc-ink, .dark) .sc-traded { stroke: var(--ds-data-on-ink); }
:is(.sc-ink, .dark) .sc-plan { stroke: var(--ds-gain-on-ink); }
:is(.sc-ink, .dark) .sc-plan-glow { stroke: var(--ds-gain-on-ink); opacity: .18; }
:is(.sc-ink, .dark) .sc-gap { fill-opacity: .2; }
:is(.sc-ink, .dark) .sc-break { fill: var(--ds-loss-on-ink); stroke: var(--ds-loss); stroke-opacity: .28; }
:is(.sc-ink, .dark) :is(.sc-bracket, .sc-leader) { stroke: var(--ds-loss-on-ink); }
:is(.sc-ink, .dark) .sc-chip { fill: #0f1628; stroke: rgba(148, 163, 184, .28); }
:is(.sc-ink, .dark) .sc-chip-plan { stroke: rgba(63, 214, 160, .5); }
:is(.sc-ink, .dark) .sc-chip-cost { stroke: rgba(255, 122, 127, .55); }
:is(.sc-ink, .dark) .sc-leader-plan { stroke: var(--ds-gain-on-ink); }
:is(.sc-ink, .dark) .sc-leader-traded { stroke: var(--ds-data-on-ink); }
:is(.sc-ink, .dark) .sc-end-plan { fill: var(--ds-gain-on-ink); }
:is(.sc-ink, .dark) .sc-end-traded { fill: var(--ds-ink-text-2); }
:is(.sc-ink, .dark) .sc-end-cost { fill: var(--ds-loss-on-ink); }
/* The calm treatment (MATCH-ROUND.md M2; split_chart.mjs `calm`), the public pages' chart: two neutral
   lines, on plan the strong one; the gap between them flat in the loss colour, the chart's one colour;
   each rule break a ring on the line; one label weight. The same colours as CALM_CSS for a file. */
.sc-calm text { font-weight: var(--ds-weight-medium); }
.sc-calm .sc-weekend-label { font-size: 1em; letter-spacing: 0; }
.sc-calm .sc-zero-label { fill: var(--ds-gray-500); }
.sc-calm .sc-traded { stroke: var(--ds-gray-400); }
.sc-calm .sc-plan { stroke: var(--ds-gray-800); }
.sc-calm .sc-gap { fill: var(--ds-loss); fill-opacity: .16; }
.sc-calm .sc-break { fill: var(--ds-white); stroke: var(--ds-gray-800); stroke-opacity: 1; }
.sc-calm .sc-chip { fill: var(--ds-white); stroke: var(--ds-gray-200); }
.sc-calm .sc-end-plan { fill: var(--ds-gray-900); }
.sc-calm .sc-end-traded { fill: var(--ds-gray-600); }
.sc-calm .sc-leader-plan { stroke: var(--ds-gray-800); }
.sc-calm .sc-leader-traded { stroke: var(--ds-gray-400); }
:is(.sc-ink, .dark) .sc-calm .sc-zero-label { fill: var(--ds-ink-text-3); }
:is(.sc-ink, .dark) .sc-calm .sc-traded { stroke: #7d8aa1; }
:is(.sc-ink, .dark) .sc-calm .sc-plan { stroke: var(--ds-ink-text); }
:is(.sc-ink, .dark) .sc-calm .sc-gap { fill: var(--ds-loss); fill-opacity: .26; }
:is(.sc-ink, .dark) .sc-calm .sc-break { fill: #0f1628; stroke: var(--ds-ink-text); }
:is(.sc-ink, .dark) .sc-calm .sc-chip { fill: #0f1628; stroke: rgba(148, 163, 184, .24); }
:is(.sc-ink, .dark) .sc-calm .sc-end-plan { fill: var(--ds-ink-text); }
:is(.sc-ink, .dark) .sc-calm .sc-end-traded { fill: var(--ds-ink-text-2); }
:is(.sc-ink, .dark) .sc-calm .sc-leader-plan { stroke: var(--ds-ink-text); }
:is(.sc-ink, .dark) .sc-calm .sc-leader-traded { stroke: #7d8aa1; }

/* The draw-in: the data is revealed left to right once (≤ 0.9 s); the scrubber moves the same edge. */
.sc-reveal { transition: width var(--ds-dur-slow) var(--ds-ease-out); }
.sc.is-drawing .sc-reveal { animation: sc-reveal var(--ds-dur-draw) var(--ds-ease-out) .15s both; }
@keyframes sc-reveal { from { width: 0; } }
.sc.is-drawing .sc-ends { animation: sc-fade var(--ds-dur-slow) var(--ds-ease-out) .9s both; }
@keyframes sc-fade { from { opacity: 0; } }
.sc-gap, .sc-traded, .sc-plan, .sc-plan-glow, .sc-breaks, .sc-ends text, .sc-ends rect, .sc-ends path, .sc-bracket { transition: opacity var(--ds-dur-base) var(--ds-ease-out); }
.sc-view-traded :is(.sc-plan, .sc-plan-glow, .sc-gap, .sc-end-plan, .sc-end-cost, .sc-chip-plan, .sc-chip-cost, .sc-leader-plan, .sc-bracket) { opacity: 0; }
.sc-view-plan :is(.sc-traded, .sc-gap, .sc-breaks, .sc-end-traded, .sc-end-cost, .sc-chip-traded, .sc-chip-cost, .sc-leader-traded, .sc-bracket) { opacity: 0; }
/* The end labels describe the whole week: not while the week is scrubbed back. */
.is-scrubbed .sc-ends { opacity: 0; }

/* The interactive layer, over the chart (positions set from the chart's frame). */
.sc-stage { position: relative; }
.sc-hit { position: absolute; cursor: crosshair; touch-action: pan-y; }
.sc-cursor { position: absolute; width: 0; border-left: 1px dashed var(--ds-gray-400); pointer-events: none; opacity: 0; transition: opacity var(--ds-dur-fast) var(--ds-ease-out); }
:is(.sc-ink, .dark) .sc-cursor { border-left-color: rgba(195, 205, 219, .5); }
.sc-stage.is-inspecting .sc-cursor, .sc-stage.is-scrubbed .sc-cursor { opacity: 1; }
.sc-point { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--ds-white); pointer-events: none; opacity: 0; transition: opacity var(--ds-dur-fast) var(--ds-ease-out); }
.sc-point.is-plan { background: var(--ds-gain); }
.sc-point.is-traded { background: var(--ds-data); }
:is(.sc-ink, .dark) .sc-point { border-color: var(--ds-ink-900); }
:is(.sc-ink, .dark) .sc-point.is-plan { background: var(--ds-gain-on-ink); }
:is(.sc-ink, .dark) .sc-point.is-traded { background: var(--ds-data-on-ink); }
.sc-stage.is-inspecting .sc-point, .sc-stage.is-scrubbed .sc-point { opacity: 1; }
.sc-breakpoint { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; z-index: 2; }
.sc-breakpoint::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); transition: box-shadow var(--ds-dur-base) var(--ds-ease-out); }
.sc-breakpoint:hover::after, .sc-breakpoint:focus-visible::after, .sc-breakpoint[aria-expanded="true"]::after { box-shadow: 0 0 0 3px rgba(255, 122, 127, .7), 0 0 0 7px rgba(229, 72, 77, .18); }
.sc-breakpoint:focus-visible { outline: none; box-shadow: none; }
.sc-breakpoint[hidden] { display: none; }

/* The tooltip: a solid, raised surface beside its point, with a pointer to it (finding 9). Left of
   the point in the chart's right half (.is-left), right of it otherwise; hero_split.mjs centres it
   on the point within the chart and sets the pointer's height (--tip-y). */
.sc-tip { --tip-y: 50%; position: absolute; z-index: 3; width: max-content; min-width: 10.5rem; max-width: 14.5rem; margin: 0; padding: .6rem .75rem; border: 1px solid var(--ds-gray-200); border-radius: var(--ds-radius-md); background: var(--ds-white); color: var(--ds-gray-800); box-shadow: var(--ds-shadow-lg); font-family: var(--ds-font-sans); font-size: var(--ds-text-xs); line-height: 1.45; pointer-events: none; opacity: 0; transform: translateX(16px); transition: opacity var(--ds-dur-fast) var(--ds-ease-out); }
.sc-tip.is-left { transform: translateX(calc(-100% - 16px)); }
.sc-tip::after { content: ""; position: absolute; top: var(--tip-y); left: -6px; width: 10px; height: 10px; margin-top: -5px; border-left: inherit; border-bottom: inherit; background: inherit; transform: rotate(45deg); border-bottom-left-radius: 2px; }
.sc-tip.is-left::after { left: auto; right: -6px; transform: rotate(-135deg); }
.has-tip .vg-split-note { opacity: 0; }
.sc-tip.is-open { opacity: 1; }
.sc-tip:not(.is-open) { visibility: hidden; }
:is(.sc-ink, .dark) .sc-tip { border-color: rgba(148, 163, 184, .26); background: #18223a; color: var(--ds-ink-text); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 40px -12px rgba(0, 0, 0, .75); }
.sc-tip strong { display: block; color: var(--ds-gray-500); font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); font-weight: 500; letter-spacing: .01em; }
:is(.sc-ink, .dark) .sc-tip strong { color: var(--ds-ink-text-3); }
.sc-tip .sc-tip-net { display: block; margin-top: .1rem; color: var(--ds-loss-text); font-size: var(--ds-text-md); font-weight: var(--ds-weight-bold); font-variant-numeric: tabular-nums; letter-spacing: var(--ds-tracking-figure); }
:is(.sc-ink, .dark) .sc-tip .sc-tip-net { color: var(--ds-loss-on-ink); }
.sc-tip .sc-tip-rule { display: block; margin-top: .15rem; color: var(--ds-gray-700); font-weight: var(--ds-weight-medium); }
:is(.sc-ink, .dark) .sc-tip .sc-tip-rule { color: var(--ds-ink-text-2); }
.sc-tip .sc-tip-net + .sc-tip-rule + strong, .sc-tip .sc-tip-rule + strong { margin-top: .45rem; padding-top: .45rem; border-top: 1px solid rgba(148, 163, 184, .2); }

/* The controls under the chart: the view switch, the scrubber and its readout. */
.sc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--ds-space-5); }
.sc-segment { display: inline-flex; padding: 3px; border-radius: var(--ds-radius-pill); background: var(--ds-gray-100); }
:is(.sc-ink, .dark) .sc-segment { background: rgba(148, 163, 184, .1); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .1); }
.sc-segment button { min-height: 30px; padding: 0 .8rem; border: 0; border-radius: var(--ds-radius-pill); background: transparent; color: var(--ds-gray-600); font: inherit; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); cursor: pointer; transition: background var(--ds-dur-base) var(--ds-ease-out), color var(--ds-dur-base) var(--ds-ease-out); }
:is(.sc-ink, .dark) .sc-segment button { color: var(--ds-ink-text-3); }
.sc-segment button:hover { color: var(--ds-gray-900); }
:is(.sc-ink, .dark) .sc-segment button:hover { color: var(--ds-ink-text); }
.sc-segment button[aria-pressed="true"] { background: var(--ds-white); color: var(--ds-gray-900); box-shadow: var(--ds-shadow-sm); }
:is(.sc-ink, .dark) .sc-segment button[aria-pressed="true"] { background: rgba(122, 167, 255, .16); color: var(--ds-white); box-shadow: inset 0 0 0 1px rgba(122, 167, 255, .35); }
.sc-segment button:focus-visible, .sc-scrub input:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.sc-scrub { display: flex; flex: 1 1 14rem; align-items: center; gap: var(--ds-space-3); min-width: 0; }
.sc-scrub label { color: var(--ds-gray-600); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); white-space: nowrap; }
:is(.sc-ink, .dark) .sc-scrub label { color: var(--ds-ink-text-3); }
.sc-scrub input { flex: 1; min-width: 6rem; height: 24px; margin: 0; background: transparent; border-radius: var(--ds-radius-pill); -webkit-appearance: none; appearance: none; cursor: pointer; }
.sc-scrub input::-webkit-slider-runnable-track { height: 4px; border-radius: var(--ds-radius-pill); background: linear-gradient(90deg, var(--ds-accent) 0 var(--sc-fill, 100%), var(--ds-gray-200) var(--sc-fill, 100%) 100%); }
:is(.sc-ink, .dark) .sc-scrub input::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--ds-accent-on-ink) 0 var(--sc-fill, 100%), rgba(148, 163, 184, .22) var(--sc-fill, 100%) 100%); }
.sc-scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 2px solid var(--ds-white); border-radius: 50%; background: var(--ds-accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.sc-scrub input::-moz-range-track { height: 4px; border-radius: var(--ds-radius-pill); background: var(--ds-gray-200); }
:is(.sc-ink, .dark) .sc-scrub input::-moz-range-track { background: rgba(148, 163, 184, .22); }
.sc-scrub input::-moz-range-progress { height: 4px; border-radius: var(--ds-radius-pill); background: var(--ds-accent); }
:is(.sc-ink, .dark) .sc-scrub input::-moz-range-progress { background: var(--ds-accent-on-ink); }
.sc-scrub input::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--ds-white); border-radius: 50%; background: var(--ds-accent); }
.sc-readout:empty { display: none; }
.sc-readout { flex: 1 0 100%; margin: 0; min-height: 1.4em; color: var(--ds-gray-600); font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); letter-spacing: .01em; }
:is(.sc-ink, .dark) .sc-readout { color: var(--ds-ink-text-3); }
.sc-readout b { color: var(--ds-gray-900); font-weight: 600; }
:is(.sc-ink, .dark) .sc-readout b { color: var(--ds-ink-text); }
.sc-readout .is-cost { color: var(--ds-loss-text); }
:is(.sc-ink, .dark) .sc-readout .is-cost { color: var(--ds-loss-on-ink); }
@media (prefers-reduced-motion: reduce) {
    .sc.is-drawing .sc-reveal, .sc.is-drawing .sc-ends { animation: none; }
}