@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/finance-tearsheet.css

@@ -0,0 +1,945 @@
+/* ==========================================================================
+   @digithings-ai/ui — finance-tearsheet family CSS (#1463)
+   The print-grade tearsheet grammar (.ts-*): SVG charts, KPI strip, returns
+   matrix, trade log, library card, live badge — promoted from
+   @digithings-ai/design/tearsheet/styles.css (screen grammar, now deprecated in
+   favour of this sheet) + apps/digiquant-web/app/globals.css (the
+   @media print grammar, canon §17). Consumes the [data-theme] semantic
+   tokens so the whole surface works in light AND dark; positive P&L wears
+   --up, negative --down — the money colors NEVER follow a livery.
+
+   Import PLAINLY (no layer(...)) — this sheet manages its own layering per
+   the cascade contract (MIGRATION.md):
+     - single-class visual defaults sit in @layer components so call-site
+       utilities can override them;
+     - state / structural / responsive rules (hover, [hidden], [open],
+       descendant sizing, compound SVG paint classes, media queries) stay
+       UNLAYERED on purpose — they must keep beating plain utilities;
+     - the @media print grammar is UNLAYERED and is THE differentiator of
+       this family: the PDF pipeline (runTearsheetPrint) flushSync-re-renders
+       the same chart instances and calls window.print(), so screen and
+       print share one render tree. Every pane ([hidden] included) opens in
+       print; scroll clamps release; rows avoid page breaks.
+
+   Wiring (consuming app globals.css):
+     @import "tailwindcss";
+     @import "@digithings-ai/design/tokens.css";
+     @import "@digithings-ai/ui/styles/web-theme.css";
+     @import "@digithings-ai/ui/styles/finance-tearsheet.css";
+     @source "<path-to>/packages/ui/src/components/finance-tearsheet";
+   App-local print resets for the app's own layout shells (e.g. digiquant's
+   .wrap / .dq-subpage) stay app-side, after this import.
+   ========================================================================== */
+
+/* ---- page scaffold, header, chips ---- */
+@layer components {
+  .ts-page {
+    --ts-page-pad-top: clamp(1.6rem, 4vw, 2.8rem);
+    --ts-page-pad-bottom: clamp(3rem, 6vw, 5rem);
+    padding-top: var(--ts-page-pad-top);
+    padding-bottom: var(--ts-page-pad-bottom);
+    position: relative; z-index: 1;
+  }
+
+  .ts-status { --ts-status-fs: 0.9rem; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--ts-status-fs); padding: var(--space-7, 4rem) 0; text-align: center; }
+  .ts-status-error { color: var(--down); }
+
+  .ts-header { --ts-header-gap: var(--space-4, 1.5rem); --ts-header-pb: 1.4rem; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--ts-header-gap); flex-wrap: wrap; margin-bottom: var(--space-5, 2rem); padding-bottom: var(--ts-header-pb); border-bottom: 1px solid var(--hair); }
+  .ts-back { --ts-back-fs: 0.8rem; --ts-back-mb: 0.9rem; display: inline-block; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--ts-back-fs); letter-spacing: 0.02em; margin-bottom: var(--ts-back-mb); }
+  .ts-kicker { --ts-kicker-fs: 0.7rem; --ts-kicker-mb: 0.45rem; display: block; font-family: var(--font-mono); font-size: var(--ts-kicker-fs); letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, var(--ink)); margin-bottom: var(--ts-kicker-mb); }
+  .ts-h1 { --ts-h1-mb: 0.85rem; font-family: var(--font-sans); font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); margin: 0 0 var(--ts-h1-mb); }
+  .ts-meta { --ts-meta-gap: 0.55rem; display: flex; align-items: center; gap: var(--ts-meta-gap); flex-wrap: wrap; }
+  .ts-meta-text { color: var(--ink-mute); font-size: 0.85rem; font-family: var(--font-mono); }
+}
+
+.ts-back:hover { color: var(--accent); }
+
+/* ---- KPI strip ---- */
+@layer components {
+  .ts-kpis {
+    --ts-kpi-min: 11.625rem;   /* 186px grid floor */
+    --ts-kpi-gap: 0.9rem;
+    --ts-kpi-mb: 1.4rem;
+    display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--ts-kpi-min), 1fr)); gap: var(--ts-kpi-gap); margin-bottom: var(--ts-kpi-mb);
+  }
+  .ts-kpis-primary {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: clamp(0.35rem, 0.9vw, 0.65rem);
+  }
+  .ts-kpi {
+    --ts-kpi-pad-block: clamp(0.6rem, 1.1vw, 0.9rem);
+    --ts-kpi-pad-inline: clamp(0.5rem, 1vw, 0.85rem);
+    --ts-kpi-row-gap: 0.2rem;
+    min-width: 0; border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--surface); padding: var(--ts-kpi-pad-block) var(--ts-kpi-pad-inline); display: flex; flex-direction: column; gap: var(--ts-kpi-row-gap);
+  }
+  .ts-kpi-label { font-size: 0.7rem; color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-mono); }
+  .ts-kpi-value { font-family: var(--font-mono); font-size: clamp(1.2rem, 1.05rem + 0.9vw, 1.65rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); overflow-wrap: anywhere; }
+  .ts-kpi-sub { font-size: 0.76rem; color: var(--ink-mute); overflow-wrap: anywhere; }
+  .is-pos { color: var(--up); }
+  .is-neg { color: var(--down); }
+}
+
+.ts-kpis-primary .ts-kpi-label { font-size: clamp(0.52rem, 0.45rem + 0.28vw, 0.62rem); letter-spacing: 0.06em; }
+.ts-kpis-primary .ts-kpi-value { font-size: clamp(0.82rem, 0.62rem + 0.7vw, 1.1rem); }
+
+/* ---- panels, legends, tabs ---- */
+@layer components {
+  .ts-panel {
+    --ts-panel-pad: 1.25rem 1.3rem 1.35rem;
+    --ts-panel-mb: 1.1rem;
+    border: 1px solid var(--hair); border-radius: 0; background: var(--surface); padding: var(--ts-panel-pad); margin-bottom: var(--ts-panel-mb);
+  }
+  .ts-panel-head {
+    --ts-panel-head-gap: 0.75rem;
+    --ts-panel-head-mb: 0.75rem;
+    --ts-panel-head-pb: 0.55rem;
+    display: flex; justify-content: space-between; align-items: center; gap: var(--ts-panel-head-gap); margin-bottom: var(--ts-panel-head-mb); padding-bottom: var(--ts-panel-head-pb); border-bottom: 1px solid var(--hair); flex-wrap: wrap;
+  }
+  .ts-panel-chart-main { padding-bottom: var(--space-3, 1rem); }
+  .ts-panel-tools {
+    --ts-tools-gap: 0.55rem;
+    --ts-tool-fs: 0.68rem;         /* Reset button label */
+    --ts-tool-pad: 0.2rem 0.55rem;
+    display: inline-flex; align-items: center; gap: var(--ts-tools-gap); flex-wrap: wrap; justify-content: flex-end;
+  }
+  .ts-chart-legend {
+    /* legend swatch geometry — the overlay sheet reads these too */
+    --ts-legend-gap: 0.65rem;
+    --ts-legend-fs: 0.68rem;
+    --ts-legend-item-gap: 0.35rem;
+    --ts-legend-line-w: 1.125rem;   /* 18px */
+    --ts-legend-stroke-w: 2px;
+    --ts-swatch-w: 0.75rem;         /* 12px */
+    --ts-swatch-h: 0.5625rem;       /* 9px */
+    --ts-marker-half: 0.375rem;     /* 6px triangle half-base */
+    --ts-marker-h: 0.625rem;        /* 10px triangle height */
+    display: inline-flex; align-items: center; gap: var(--ts-legend-gap); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--ts-legend-fs); color: var(--ink-mute); letter-spacing: 0.04em;
+  }
+  .ts-chart-legend-item { display: inline-flex; align-items: center; gap: var(--ts-legend-item-gap); white-space: nowrap; }
+  .ts-chart-legend-swatch { display: inline-block; flex-shrink: 0; }
+  .ts-chart-legend-line { width: var(--ts-legend-line-w); height: 0; border-top: var(--ts-legend-stroke-w) solid var(--accent); }
+  .ts-chart-legend-bar-up { width: var(--ts-swatch-w); height: var(--ts-swatch-h); background: var(--up); opacity: 0.82; border-radius: 0; }
+  .ts-chart-legend-bar-down { width: var(--ts-swatch-w); height: var(--ts-swatch-h); background: var(--down); opacity: 0.82; border-radius: 0; }
+  .ts-chart-legend-marker-buy { width: 0; height: 0; border-inline-start: var(--ts-marker-half) solid transparent; border-inline-end: var(--ts-marker-half) solid transparent; border-bottom: var(--ts-marker-h) solid var(--accent); filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--bg) 60%, transparent)); }
+  .ts-chart-legend-marker-sell { width: 0; height: 0; border-inline-start: var(--ts-marker-half) solid transparent; border-inline-end: var(--ts-marker-half) solid transparent; border-top: var(--ts-marker-h) solid var(--down); filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--bg) 60%, transparent)); }
+  .ts-chart-legend-bar-open {
+    width: var(--ts-swatch-w);
+    height: var(--ts-swatch-h);
+    border-radius: 0;
+    background: color-mix(in srgb, var(--accent) 35%, var(--surface));
+    border: var(--ts-legend-stroke-w) solid var(--accent);
+    opacity: 0.85;
+  }
+
+  .ts-mode-bar { display: flex; justify-content: flex-start; margin-bottom: var(--space-3, 1rem); }
+  .ts-tab-stack { margin-bottom: 1.1rem; }
+  .ts-tab-content { min-height: 26.25rem; }   /* 420px canvas floor */
+  .ts-tab-content-charts { position: relative; }
+  .ts-tab-content-tables { min-height: auto; }
+  .ts-tab-pane { animation: ts-tab-in 0.18s var(--ease); }
+  .ts-advanced-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-3, 1rem); align-items: start; }
+  .ts-panel-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase; }
+  .ts-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
+}
+
+.ts-panel-chart-main .ts-panel-head { margin-bottom: 0.65rem; }
+.ts-tab-stack .ts-panel-head { margin-bottom: 0.65rem; }
+.ts-tab-pane[hidden] { display: none; }
+@keyframes ts-tab-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ts-tab-pane { animation: none; }
+  /* The live dot pulses forever, which is precisely the kind of unbounded
+     motion this query exists to stop. The dot itself stays — it still reads as
+     the status mark next to "example" / "live" — only the pulse is dropped. */
+  .ts-live-dot { animation: none; }
+}
+.ts-metrics-table th[scope="row"] { font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
+.ts-metrics-table th[scope="col"] { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
+@media (max-width: 900px) {
+  .ts-advanced-grid { grid-template-columns: 1fr; }
+}
+@media (max-width: 1100px) {
+  .ts-kpis-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (max-width: 640px) {
+  .ts-kpis-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .ts-kpis-primary .ts-kpi-label { letter-spacing: 0.04em; }
+  .ts-kpis-primary .ts-kpi-value { font-size: clamp(0.78rem, 2.8vw, 0.95rem); }
+  .ts-tab-content .ts-chart { height: var(--ts-chart-h-sm, clamp(200px, 58vw, 360px)); }
+  .ts-svg .ts-axis { font-size: var(--ts-axis-fs-sm, 9px); }
+}
+
+/* ---- SVG chart surfaces + hover tip ---- */
+@layer components {
+  .ts-chart {
+    /* chart + tooltip geometry */
+    --ts-chart-h: clamp(220px, 52vw, 440px);
+    --ts-chart-h-sm: clamp(200px, 58vw, 360px);
+    --ts-tip-max-w: 20rem;
+    --ts-tip-gutter: 2rem;
+    --ts-tip-pad: 0.45rem 0.6rem;
+    --ts-tip-fs: 0.68rem;
+    --ts-tip-dx: 12px;
+    --ts-tip-dy: 8px;
+    --ts-tip-row-gap: 0.35rem;
+    --ts-tip-title-gap: 0.45rem;
+    --ts-tip-signal-fs: 0.62rem;
+    --ts-tip-dl-gap: 0.22rem;
+    --ts-tip-kv-gap: 0.65rem;
+    --ts-tip-dt-fs: 0.6rem;
+    --ts-axis-fs: 11px;
+    --ts-axis-fs-sm: 9px;
+    --ts-svg-empty-fs: 13px;
+    --ts-legend-label-fs: 10px;
+    width: 100%; overflow: hidden;
+  }
+  .ts-chart-wrap { position: relative; width: 100%; height: 100%; }
+  .ts-chart-tip {
+    position: absolute;
+    z-index: 30;
+    width: max-content;
+    min-width: 0;
+    max-width: min(var(--ts-tip-max-w), calc(100vw - var(--ts-tip-gutter)));
+    padding: var(--ts-tip-pad);
+    border-radius: var(--r-sm);
+    border: 1px solid var(--hair);
+    background: var(--surface);
+    color: var(--ink-soft);
+    font-family: var(--font-mono);
+    font-size: var(--ts-tip-fs);
+    letter-spacing: 0.02em;
+    line-height: 1.35;
+    white-space: normal;
+    text-align: start;
+    box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.45); /* neutral shade, theme-agnostic */
+    pointer-events: none;
+    transform: translate(var(--ts-tip-dx), calc(-100% - var(--ts-tip-dy)));
+  }
+  .ts-chart-tip-body { display: flex; flex-direction: column; gap: var(--ts-tip-row-gap); }
+  .ts-chart-tip-title { display: flex; align-items: center; gap: var(--ts-tip-title-gap); flex-wrap: wrap; }
+  .ts-chart-tip-signal { color: var(--ink-mute); font-size: var(--ts-tip-signal-fs); letter-spacing: 0.04em; }
+  .ts-chart-tip-dl { margin: 0; display: grid; gap: var(--ts-tip-dl-gap); }
+  .ts-svg { width: 100%; height: 100%; display: block; overflow: hidden; }
+  /* Drag-pan now runs on Pointer Events (mouse + single-finger touch) — the
+     browser's own touch-scroll gesture must not compete with it, or a drag
+     starting on this element pans the page instead of (or as well as) the
+     chart. Scoped to .is-interactive only: a static/non-interactive chart
+     has no pointerdown handler and should keep ordinary page-scroll touch
+     behavior. */
+  .ts-svg.is-interactive { touch-action: pan-y; }
+  .ts-grid { stroke: var(--hair); stroke-width: 1; }
+  .ts-grid-zero { stroke: var(--hair-2); }
+  .ts-axis { fill: var(--ink-mute); font-family: var(--font-mono); font-size: var(--ts-axis-fs); }
+  .ts-svg-empty { fill: var(--ink-mute); font-family: var(--font-mono); font-size: var(--ts-svg-empty-fs); }
+  .ts-legend-label { fill: var(--ink-mute); font-family: var(--font-mono); font-size: var(--ts-legend-label-fs); }
+  .ts-line { stroke-width: 2; }
+  .ts-area { opacity: 0.14; stroke: none; }
+  .ts-contribution-segment { opacity: 0.78; }
+  .ts-portfolio-return-line { stroke-width: 2.5; vector-effect: non-scaling-stroke; }
+  .ts-portfolio-return-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
+  .ts-benchmark-return-line { stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
+  .ts-contribution-axis { font-size: var(--ts-axis-fs-sm); }
+}
+
+.ts-tab-content .ts-chart { height: var(--ts-chart-h, clamp(220px, 52vw, 440px)); }
+.ts-chart-tip.is-flip-x { transform: translate(calc(-100% - var(--ts-tip-dx)), calc(-100% - var(--ts-tip-dy))); }
+.ts-chart-tip.is-flip-y { transform: translate(var(--ts-tip-dx), var(--ts-tip-dy)); }
+.ts-chart-tip.is-flip-x.is-flip-y { transform: translate(calc(-100% - var(--ts-tip-dx)), var(--ts-tip-dy)); }
+.ts-chart-tip-dl > div { display: flex; gap: var(--ts-tip-kv-gap); justify-content: space-between; align-items: baseline; }
+.ts-chart-tip-dl dt { color: var(--ink-mute); font-size: var(--ts-tip-dt-fs); text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }
+.ts-chart-tip-dl dd { margin: 0; color: var(--ink); text-align: end; white-space: nowrap; }
+.ts-tone-accent.ts-line { stroke: var(--accent); }
+.ts-tone-accent.ts-area { fill: var(--accent); }
+.ts-tone-up.ts-line { stroke: var(--up); }
+.ts-tone-up.ts-area { fill: var(--up); }
+.ts-tone-down.ts-line { stroke: var(--down); }
+.ts-tone-down.ts-area { fill: var(--down); }
+.ts-bar.ts-tone-up { fill: var(--up); opacity: 0.82; }
+.ts-bar.ts-tone-down { fill: var(--down); opacity: 0.82; }
+.ts-bar.ts-bar-open {
+  opacity: 0.52;
+  stroke: var(--accent);
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+  paint-order: stroke fill;
+}
+.ts-bar.ts-bar-open.ts-tone-down { stroke: color-mix(in srgb, var(--down) 70%, var(--accent)); }
+
+/* Candlestick price chart — up uses brand teal (--accent), down uses accent red (--down) */
+@layer components {
+  .ts-candle-wick { stroke-width: 1.2; vector-effect: non-scaling-stroke; }
+  .ts-marker-layer { pointer-events: none; }
+  .ts-marker-wrap { filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--bg) 72%, transparent)); }
+  .ts-marker-halo {
+    fill: var(--bg);
+    stroke: var(--bg);
+    stroke-width: 4.5;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+    paint-order: stroke fill;
+  }
+  .ts-marker {
+    stroke: var(--surface);
+    stroke-width: 2;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+    paint-order: stroke fill;
+  }
+  .ts-marker-buy { fill: var(--accent); }
+  .ts-marker-sell { fill: var(--down); }
+  .ts-panel-hint { margin-inline-start: auto; }
+}
+
+.ts-candle-up .ts-candle-wick { stroke: var(--up); }
+.ts-candle-up .ts-candle-body { fill: var(--up); }
+.ts-candle-down .ts-candle-wick { stroke: var(--down); }
+.ts-candle-down .ts-candle-body { fill: var(--down); }
+.ts-marker-wrap-buy .ts-marker { stroke: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
+.ts-marker-wrap-sell .ts-marker { stroke: color-mix(in srgb, var(--down) 55%, var(--surface)); }
+
+/* ---- panel-head tool cluster: legend + Reset + scale/period toggles ---- */
+@layer components {
+  .ts-scale { --ts-scale-gap: var(--space-2, 0.5rem); display: inline-flex; align-items: center; gap: var(--ts-scale-gap); font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; }
+  .ts-select { background: var(--surface-2); border: 1px solid var(--hair); color: var(--ink); font-family: var(--font-mono); font-size: 0.78rem; padding: 0.2rem 0.5rem; border-radius: var(--r-sm); }
+  .ts-hint { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-mute); letter-spacing: 0.04em; opacity: 0.8; }
+  .ts-reset { font-family: var(--font-mono); font-size: var(--ts-tool-fs, 0.68rem); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-weak); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--r-sm); padding: var(--ts-tool-pad, 0.2rem 0.55rem); cursor: pointer; transition: background 0.18s var(--ease); }
+  .ts-reset-chart {
+    --ts-reset-inset: 0.5rem;
+    --ts-reset-size: 1.85rem;
+    position: absolute;
+    top: var(--ts-reset-inset);
+    inset-inline-end: var(--ts-reset-inset);
+    z-index: 6;
+    text-transform: none;
+    letter-spacing: 0;
+    padding: 0.38rem;
+    line-height: 0;
+    width: var(--ts-reset-size);
+    height: var(--ts-reset-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: color-mix(in srgb, var(--surface) 88%, transparent);
+    backdrop-filter: blur(6px);
+  }
+
+  /* Segmented toggle (Linear/Log, Log $/%, Monthly/Quarterly/Annual). */
+  .ts-seg { --ts-seg-fs: 0.74rem; --ts-seg-pad: 0.22rem 0.62rem; display: inline-flex; border: 1px solid var(--hair); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
+  .ts-seg-btn { font-family: var(--font-mono); font-size: var(--ts-seg-fs, 0.74rem); color: var(--ink-mute); background: transparent; border: none; border-inline-start: 1px solid var(--hair); padding: var(--ts-seg-pad, 0.22rem 0.62rem); cursor: pointer; transition: color 0.18s var(--ease), background 0.18s var(--ease); }
+  .ts-chart-controls { --ts-controls-gap: 0.55rem; display: inline-flex; align-items: center; gap: var(--ts-controls-gap); flex-wrap: wrap; }
+}
+
+.ts-reset:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
+.ts-reset-chart svg { display: block; }
+.ts-seg-btn:first-child { border-inline-start: none; }
+.ts-seg-btn:hover { color: var(--ink); }
+.ts-seg-btn.is-active { color: color-mix(in srgb, var(--accent) 70%, var(--ink)); background: var(--accent-weak); }
+/* .ts-seg's own overflow:hidden (it clips square button corners to the
+   pill's rounded border-radius) leaves almost no clearance around each
+   button — the global :focus-visible rule's positive outline-offset (3px)
+   plus its 2px width need ~5px to render at all, and gets clipped away
+   here. An inset (negative-offset) ring instead draws entirely inside the
+   button's own border box, so it can never be clipped by the parent
+   regardless of how tight that clearance is — the standard fix for a
+   focus ring inside a clipped, rounded container. */
+.ts-seg-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  border-radius: 0;
+}
+.ts-seg-static .ts-seg-btn { pointer-events: none; cursor: default; }
+.ts-seg-compact .ts-seg-btn { font-size: 0.68rem; padding: 0.2rem 0.48rem; letter-spacing: 0.02em; }
+
+/* ---- returns matrix — CSS-grid calendar heatmap of period returns ---- */
+@layer components {
+  .ts-matrix {
+    /* matrix geometry; --ts-matrix-fill-* are the filled-cell variant */
+    --ts-matrix-gap: 2px;
+    --ts-matrix-fill-gap: 3px;
+    --ts-matrix-head-pad: 0.3rem 0.2rem;
+    --ts-matrix-cell-pad: 0.4rem 0.25rem;
+    --ts-matrix-fill-cell-pad: clamp(0.35rem, 1vw, 0.7rem) 0.4rem;
+    --ts-matrix-fill-head-pad: clamp(0.35rem, 0.8vw, 0.55rem) 0.3rem;
+    --ts-matrix-fill-cell-min-h: 2.1rem;
+    display: grid; gap: var(--ts-matrix-gap); font-family: var(--font-mono); font-size: 0.74rem;
+  }
+  .ts-matrix-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+  .ts-matrix-corner { background: transparent; }
+  .ts-matrix-head { color: var(--ink-mute); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: var(--ts-matrix-head-pad); }
+  .ts-matrix-year-head { color: var(--ink-soft); }
+  .ts-matrix-rowlabel { color: var(--ink-soft); font-size: 0.72rem; display: flex; align-items: center; padding: 0 0.5rem 0 0.1rem; white-space: nowrap; }
+  .ts-matrix-cell { color: var(--heat-ink); text-align: center; padding: var(--ts-matrix-cell-pad); border-radius: var(--r-sm); border: 1px solid var(--hair); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* The cell background is an --up/--down wash over --surface; at the top of
+     the 14–72% range the dark canvas wash is bright enough that neither
+     --ink nor --heat-ink clears AA on it. `.is-strong` (set by ReturnsMatrix
+     when |value| lands in that band for the up tone) switches to
+     --heat-ink-strong. Worst step 4.60:1 (dark, up 57%); light theme aliases
+     both heat inks to --ink, whose worst step is 5.22:1. */
+  .ts-matrix-cell.is-strong { color: var(--heat-ink-strong); }
+  .ts-matrix-fill { width: 100%; align-content: stretch; font-size: clamp(0.72rem, 0.95vw, 0.9rem); gap: var(--ts-matrix-fill-gap); }
+  .ts-matrix-year { font-weight: 600; border-color: var(--hair-2); }
+}
+
+.ts-matrix-fill .ts-matrix-cell { display: flex; align-items: center; justify-content: center; min-height: var(--ts-matrix-fill-cell-min-h, 2.1rem); padding: var(--ts-matrix-fill-cell-pad, clamp(0.35rem, 1vw, 0.7rem) 0.4rem); }
+.ts-matrix-fill .ts-matrix-head { padding: var(--ts-matrix-fill-head-pad, clamp(0.35rem, 0.8vw, 0.55rem) 0.3rem); font-size: clamp(0.62rem, 0.85vw, 0.72rem); }
+.ts-matrix-fill .ts-matrix-rowlabel { font-size: clamp(0.68rem, 0.9vw, 0.82rem); }
+.ts-matrix-cell.is-empty { color: var(--ink-mute); border-style: dashed; opacity: 0.5; }
+
+/* ---- tables: trade log, breakdowns, pivot statistics ---- */
+@layer components {
+  .ts-table-wrap { width: 100%; overflow-x: auto; }
+  .ts-table {
+    /* table geometry, inherited by thead/th/td rules below */
+    --ts-table-fs: 0.88rem;
+    --ts-table-cell-pad: 0.55rem 0.8rem;
+    --ts-table-head-fs: 0.7rem;
+    --ts-pivot-min-w: 32.5rem;       /* 520px pivot floor */
+    width: 100%; border-collapse: collapse; font-size: var(--ts-table-fs);
+  }
+  .ts-table-scroll {
+    --ts-table-scroll-h: 32.5rem;    /* 520px scroll cap */
+    max-height: var(--ts-table-scroll-h);
+    overflow-y: auto;
+  }
+  .ts-num { text-align: end; }
+  .ts-breakdown-wrap { max-height: var(--ts-table-scroll-h, 32.5rem); }
+
+  /* Pivot statistics table */
+  .ts-pivot-stats { display: flex; flex-direction: column; }
+  .ts-pivot-wrap { max-height: min(70vh, 640px); }
+  .ts-pivot-table { min-width: max(100%, var(--ts-pivot-min-w, 32.5rem)); }
+  .ts-pivot-col { min-width: 5.5rem; }
+  .ts-pivot-print-title {
+    margin: 0 0 0.5rem;
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--ink-mute);
+  }
+  .ts-tab-pane-matrix { min-height: min(70vh, 520px); display: flex; flex-direction: column; flex: 1; }
+
+  .ts-dir { display: inline-block; padding: 0.05rem 0.55rem; border: 1px solid currentColor; border-radius: 0; font-size: 0.72rem; font-family: var(--font-mono); }
+  .ts-dir-long { color: var(--up); }
+  .ts-dir-short { color: var(--down); }
+}
+
+.ts-table th, .ts-table td { text-align: start; padding: var(--ts-table-cell-pad, 0.55rem 0.8rem); border-bottom: 1px solid var(--hair); white-space: nowrap; }
+.ts-table thead th { position: sticky; top: 0; background: var(--surface); color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--ts-table-head-fs, 0.7rem); letter-spacing: 0.08em; text-transform: uppercase; z-index: 1; }
+.ts-table tbody th[scope="row"] { color: var(--ink-soft); font-weight: 400; }
+.ts-table td { color: var(--ink); font-family: var(--font-mono); }
+.ts-breakdown td { text-align: end; }
+.ts-breakdown th:first-child, .ts-breakdown td:first-child { text-align: start; }
+.ts-breakdown tbody th[scope="row"] { color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
+.ts-pivot-seg .ts-seg-btn { font-size: 0.68rem; padding: 0.18rem 0.52rem; }
+.ts-pivot-table td { text-align: end; }
+.ts-pivot-metric-col {
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: 1;
+  text-align: start !important;
+  font-weight: 500;
+  color: var(--ink-soft);
+  white-space: nowrap;
+  background: linear-gradient(90deg, var(--surface) 85%, transparent);
+  box-shadow: 4px 0 12px -8px color-mix(in srgb, var(--ink) 12%, transparent);
+}
+.ts-pivot-table thead .ts-pivot-metric-col { background: var(--surface); }
+.ts-pivot-table th[scope="col"] {
+  font-size: 0.68rem;
+  letter-spacing: 0.06em;
+  text-transform: lowercase;
+  color: var(--ink-mute);
+  white-space: nowrap;
+}
+.ts-pivot-print-block + .ts-pivot-print-block { margin-top: 1.25rem; }
+.ts-tab-pane-matrix .ts-table-wrap { flex: 1; display: flex; flex-direction: column; }
+
+/* ---- current / open position ---- */
+@layer components {
+  .ts-position {
+    /* position card geometry */
+    --ts-position-pad: 1rem 1.15rem 1.1rem;
+    --ts-position-mb: 1.1rem;
+    --ts-position-head-gap: 0.75rem;
+    --ts-position-head-mb: 0.85rem;
+    --ts-position-head-pb: 0.55rem;
+    --ts-position-body-gap: 1rem;
+    --ts-position-stat-gap: 1.25rem;
+    border: 1px solid var(--hair);
+    border-radius: var(--r-md);
+    background: linear-gradient(180deg, var(--surface), var(--surface-2));
+    padding: var(--ts-position-pad);
+    margin-bottom: var(--ts-position-mb);
+  }
+  .ts-position-live {
+    border-color: color-mix(in srgb, var(--accent) 35%, var(--hair));
+    box-shadow: 0 20px 48px -40px color-mix(in srgb, var(--accent) 55%, transparent);
+  }
+  .ts-position-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--ts-position-head-gap);
+    margin-bottom: var(--ts-position-head-mb);
+    padding-bottom: var(--ts-position-head-pb);
+    border-bottom: 1px solid var(--hair);
+  }
+  .ts-position-asof {
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    color: var(--ink-mute);
+  }
+  .ts-position-body {
+    display: flex;
+    align-items: center;
+    gap: var(--ts-position-body-gap);
+    flex-wrap: wrap;
+  }
+  .ts-position-main {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    min-width: 0;
+    flex: 1 1 12rem;
+  }
+  .ts-position-signal {
+    font-family: var(--font-mono);
+    font-size: 0.78rem;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--accent);
+  }
+  .ts-position-entry {
+    font-family: var(--font-mono);
+    font-size: 0.92rem;
+    color: var(--ink);
+  }
+  .ts-position-stats {
+    display: flex;
+    gap: var(--ts-position-stat-gap);
+    flex-wrap: wrap;
+    margin-inline-start: auto;
+  }
+  .ts-position-flat-msg {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: 0.88rem;
+    color: var(--ink-soft);
+  }
+  .ts-position-asset { color: var(--ink); }
+  .ts-trade-open { background: color-mix(in srgb, var(--accent) 6%, transparent); }
+  .ts-trade-unrealized { display: inline-flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }
+  .ts-trade-unrealized-tag {
+    font-size: 0.62rem;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--ink-mute);
+    font-family: var(--font-mono);
+  }
+}
+
+.ts-position-stats div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 5.5rem; }.ts-position-stats dt {
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink-mute);
+}
+.ts-position-stats dd {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--ink);
+}
+.ts-trade-open td { border-color: color-mix(in srgb, var(--accent) 18%, var(--hair)); }
+
+/* ---- per-asset strategy notes — plain text, collapsible ---- */
+@layer components {
+  .ts-strategy-notes {
+    --ts-notes-mt: var(--space-4, 1.5rem);
+    --ts-notes-pt: 1.1rem;
+    --ts-notes-gap: 0.65rem;
+    --ts-notes-chevron: 0.4rem;
+    width: 100%;
+    margin-top: var(--ts-notes-mt);
+    padding-top: var(--ts-notes-pt);
+    border-top: 1px solid var(--hair);
+  }
+  .ts-strategy-notes-summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3, 1rem);
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+    padding: 0.15rem 0;
+  }
+  .ts-strategy-notes-label {
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--ink-mute);
+  }
+  .ts-strategy-notes-chevron {
+    flex-shrink: 0;
+    width: var(--ts-notes-chevron);
+    height: var(--ts-notes-chevron);
+    border-inline-end: 1.5px solid var(--ink-mute);
+    border-bottom: 1.5px solid var(--ink-mute);
+    transform: rotate(45deg);
+    margin-top: -0.12rem;
+    transition: transform 0.2s var(--ease), border-color 0.18s var(--ease);
+  }
+  .ts-strategy-notes-body {
+    padding: 0.65rem 0 0.2rem;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ts-notes-gap);
+  }
+  .ts-strategy-notes-meta {
+    list-style: none;
+    margin: 0.15rem 0 0;
+    padding: 0.75rem 0 0;
+    border-top: 1px solid var(--hair);
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+}
+
+.ts-strategy-notes-summary::-webkit-details-marker { display: none; }
+.ts-strategy-notes[open] .ts-strategy-notes-chevron {
+  transform: rotate(-135deg);
+  margin-top: 0.15rem;
+  border-color: var(--accent);
+}
+.ts-strategy-notes-body p {
+  margin: 0;
+  font-size: 0.88rem;
+  line-height: 1.58;
+  color: var(--ink-soft);
+  max-width: none;
+}
+.ts-strategy-notes-meta li {
+  position: relative;
+  padding-inline-start: 1em;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  line-height: 1.45;
+  color: var(--ink-mute);
+}
+.ts-strategy-notes-meta li::before {
+  content: "·";
+  position: absolute;
+  inset-inline-start: 0;
+  color: var(--accent);
+}
+
+/* ---- library head + strategy cards ---- */
+@layer components {
+  .ts-lib-head { --ts-lib-head-max: 42.5rem; --ts-lib-head-mb: 2.6rem; text-align: center; max-width: var(--ts-lib-head-max); margin: 0 auto var(--ts-lib-head-mb); }
+  .ts-lib-lede { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; margin: 0.9rem auto 0; }
+  .ts-lib-grid { --ts-lib-card-min: 16.25rem; --ts-lib-gap: 0.85rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ts-lib-card-min), 1fr)); gap: var(--ts-lib-gap); margin-bottom: 0.5rem; }
+  .ts-lib-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3, 1rem); margin-bottom: var(--space-3, 1rem); }
+  .ts-card-kind { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
+  .ts-card { --ts-card-gap: 0.7rem; --ts-card-pad: 1rem 1.05rem; display: flex; flex-direction: column; gap: var(--ts-card-gap); border: 1px solid var(--hair); border-radius: var(--r-md); background: transparent; padding: var(--ts-card-pad); transition: transform 0.25s var(--ease), border-color 0.25s var(--ease); }
+  .ts-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.65rem; }
+  .ts-card-title { display: flex; align-items: center; gap: 0.65rem; min-width: 0; flex: 1; }
+  .ts-card-title-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
+  .ts-card-symbol { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-mute); letter-spacing: 0.02em; }
+  .asset-logo { display: block; flex-shrink: 0; object-fit: contain; }
+  .ts-h1-with-logo { display: flex; align-items: center; gap: 0.75rem; }
+  .ts-position-logo { vertical-align: middle; }
+  .ts-card-name { color: var(--ink); font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: -0.01em; }
+  .ts-card-period { color: var(--ink-mute); font-size: 0.68rem; font-family: var(--font-mono); }
+  .ts-card-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 0.75rem; }
+  .ts-card-kpi { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+  .ts-card-kpi-label { font-size: 0.6rem; color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-mono); }
+  .ts-card-kpi-value { font-size: 0.9rem; color: var(--ink); font-family: var(--font-mono); overflow-wrap: anywhere; }
+}
+
+.ts-lib-head .ts-h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -0.015em; margin-top: 0.6rem; }
+.ts-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-2px); }
+.ts-position-asset,
+.ts-position-asset-dd { display: inline-flex; align-items: center; gap: 0.4rem; }
+
+/* ---- live badge — nightly-refreshed metrics, teal pulse ---- */
+@layer components {
+  .ts-live-badge {
+    --ts-live-gap: 0.38rem;
+    --ts-live-fs: 0.68rem;
+    --ts-live-dot: 7px;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ts-live-gap);
+    font-family: var(--font-mono);
+    font-size: var(--ts-live-fs);
+    letter-spacing: 0.08em;
+    text-transform: lowercase;
+    /* The shared accent-as-small-text recipe, not the raw accent: at 0.68rem
+       the raw module accent fails AA on paper in light theme (4.14 for
+       accent-digiquant on white). See contrast.contract.test.ts. */
+    color: color-mix(in srgb, var(--accent) 70%, var(--ink));
+    user-select: none;
+    flex-shrink: 0;
+  }
+  .ts-live-dot {
+    width: var(--ts-live-dot, 7px);
+    height: var(--ts-live-dot, 7px);
+    border-radius: 50%;
+    background: var(--accent);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
+    animation: ts-live-pulse 2.4s ease-out infinite;
+  }
+  .ts-card-live { margin-inline-start: auto; }
+}
+
+@keyframes ts-live-pulse {
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 52%, transparent); }
+  70% { box-shadow: 0 0 0 var(--ts-live-dot, 7px) color-mix(in srgb, var(--accent) 0%, transparent); }
+  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
+}
+.ts-meta .ts-live-badge { margin-inline-end: 0.15rem; }
+
+@media (max-width: 820px) {
+  .ts-grid-2 { grid-template-columns: 1fr; }
+}
+
+/* ==========================================================================
+   PRINT — the family's differentiator (canon §17), promoted from
+   apps/digiquant-web/app/globals.css. Screen and print share ONE render
+   tree: runTearsheetPrint pins the light theme + tags html.ts-printing, the
+   charts re-render at full span, and this block turns the tabbed screen
+   layout into a flowing paper document. UNLAYERED on purpose.
+   ========================================================================== */
+
+/* Screen: print chrome hidden until export. */
+.ts-print-brand,
+.ts-print-footer,
+.ts-print-heading { display: none; }
+
+@media print {
+  @page {
+    size: auto;
+    margin: 12mm 14mm;
+  }
+
+  /* Print pins the LIGHT theme as literals: print cannot rely on data-theme
+     (a dark-mode visitor must still get paper-white output), so each value
+     below mirrors its :root[data-theme="light"] token from tokens.css —
+     named per line. Paper deviations are deliberate: pure #ffffff instead of
+     the off-white canvas, and opaque hairlines instead of alpha ones (alpha
+     borders dither on some print engines). Everything else in this @media
+     block consumes these pinned custom properties, never raw literals. */
+  :root[data-theme],
+  :root[data-theme="dark"],
+  :root[data-theme="light"],
+  html.ts-printing {
+    color-scheme: light;
+    --bg: #ffffff;                          /* --bg light = #FBFBF9; paper stays pure white */
+    --surface: #ffffff;                     /* --surface light = #FFFFFF */
+    --surface-2: #ffffff;                   /* --surface-2 light = #F4F4F1; flattened to paper */
+    --hair: #dddddd;                        /* --hair light = rgba(10,15,20,.10), opaque for print */
+    --hair-2: #cccccc;                      /* --hair-2 light = rgba(10,15,20,.18), opaque for print */
+    --ink: #14181b;                         /* --ink light */
+    --ink-soft: #5c636a;                    /* --ink-soft light */
+    --ink-mute: #666c73;                    /* --ink-mute light (WCAG AA fix 2026-08-11) */
+    --accent: #0c7c71;                      /* --accent light (WCAG 1.4.3 fix, #2280) */
+    --accent-weak: rgba(12, 124, 113, 0.1); /* --accent-weak light (.12 → .1 on paper) */
+    --on-accent: #ffffff;                   /* --on-accent light */
+    --up: #0c7c71;                          /* --up light (paper phosphor) */
+    --down: #b2452e;                        /* --down light (WCAG AA fix 2026-09, canon-audit S2) */
+    --warn: #8f6220;                        /* --warn light (WCAG AA fix 2026-09, canon-audit S2) */
+    --heat-ink: #14181b;                    /* --heat-ink light (== --ink); pinned so dark-theme print never keeps white cell text */
+    --heat-ink-strong: #14181b;             /* --heat-ink-strong light */
+  }
+
+  html, body {
+    background: var(--bg) !important;
+    color: var(--ink) !important;
+  }
+  body {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+    color-adjust: exact;
+  }
+
+  /* chrome dies in print (canon §17): nav, footer, decorative layers,
+     toolbars, and toggles — the print brand/footer elements replace them.
+     App-local shells (layout wraps, subpage paddings) get their own print
+     resets app-side. */
+  .grain,
+  .glow,
+  .site-nav,
+  .nav-shell,
+  .footer,
+  .ts-header-actions,
+  .ts-back,
+  .ts-scale,
+  .ts-charts-toolbar,
+  .ts-panel-head,
+  .ts-panel-tools,
+  .ts-seg,
+  .ts-reset,
+  .ts-hint,
+  .ts-mode-bar,
+  .nav-toggle,
+  .theme-toggle {
+    display: none !important;
+  }
+  .ts-strategy-notes {
+    break-inside: avoid;
+    page-break-inside: avoid;
+    margin-top: 1rem;
+  }
+  .ts-strategy-notes-summary { display: none !important; }
+  .ts-strategy-notes-body {
+    display: flex !important;
+    padding-top: 0;
+  }
+  .ts-strategy-notes-body::before {
+    content: "Notes";
+    display: block;
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--ink-mute);
+    margin-bottom: 0.35rem;
+  }
+  .ts-live-badge {
+    display: none !important;
+  }
+
+  .ts-print-brand {
+    display: flex !important;
+    align-items: center;
+    gap: 0.55rem;
+    margin-bottom: 1.1rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid var(--hair);
+  }
+  .ts-print-brand-word {
+    font-family: var(--font-mono);
+    font-size: 0.95rem;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: var(--ink);
+    text-transform: lowercase;
+  }
+  .ts-print-brand-link {
+    margin-inline-start: auto;
+    font-family: var(--font-mono);
+    font-size: 0.78rem;
+    color: var(--accent);
+    text-decoration: none;
+  }
+
+  .ts-print-footer {
+    display: flex !important;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.45rem 1rem;
+    margin-top: 1.6rem;
+    padding-top: 0.85rem;
+    border-top: 1px solid var(--hair);
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    color: var(--ink-mute);
+  }
+  .ts-print-footer-brand {
+    font-weight: 600;
+    color: var(--ink);
+    text-transform: lowercase;
+  }
+  .ts-print-footer a {
+    color: var(--accent);
+    text-decoration: none;
+  }
+  .ts-print-footer-note { margin-inline-start: auto; }
+
+  .ts-print-heading {
+    display: block !important;
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--ink-mute);
+    margin: 0 0 0.65rem;
+  }
+  .ts-tab-stack > .ts-print-heading:first-child {
+    font-size: 0.78rem;
+    color: var(--ink);
+    margin-top: 0;
+    margin-bottom: 0.85rem;
+    padding-bottom: 0.35rem;
+    border-bottom: 1px solid var(--hair);
+  }
+
+  .ts-tab-stack[hidden] { display: block !important; }
+  .ts-tab-pane[hidden] { display: block !important; min-height: auto; }
+  .ts-tab-content { min-height: auto; }
+  .ts-tab-pane {
+    break-inside: avoid;
+    page-break-inside: avoid;
+    margin-bottom: 1.25rem;
+    padding-bottom: 0.35rem;
+  }
+  .ts-tab-pane-matrix { break-inside: auto; page-break-inside: auto; }
+
+  .ts-page { padding: 0; }
+  .ts-header {
+    margin-bottom: 1.1rem;
+    padding-bottom: 0.85rem;
+    border-bottom: 1px solid var(--hair);
+  }
+  .ts-h1 { font-size: 1.55rem; }
+
+  .ts-panel,
+  .ts-kpi,
+  .ts-card,
+  .ts-position {
+    break-inside: avoid;
+    page-break-inside: avoid;
+    box-shadow: none !important;
+    background: var(--surface) !important;
+    border: 1px solid var(--hair) !important;
+  }
+  .ts-position-live { border-color: var(--hair) !important; }
+  .ts-trade-open { background: var(--surface) !important; }
+
+  .ts-grid-2 { grid-template-columns: 1fr 1fr; }
+  .ts-table-scroll,
+  .ts-breakdown-wrap,
+  .ts-pivot-wrap {
+    max-height: none !important;
+    overflow: visible !important;
+  }
+  .ts-table thead th {
+    position: static;
+    background: var(--surface) !important;
+  }
+  .ts-table th,
+  .ts-table td {
+    border-color: var(--hair) !important;
+  }
+  .ts-trades tr { break-inside: avoid; page-break-inside: avoid; }
+
+  .ts-matrix-cell {
+    border-color: var(--hair) !important;
+    background: var(--surface) !important;
+  }
+
+  .ts-svg.is-interactive { pointer-events: none; }
+  a { color: inherit; text-decoration: none; }
+}