/* ═══════════════════════════════════════════════════════════════════════════
   Performance analysis — Terminal → Behavior → the "Performance" tab
   (Overview is the discipline screen beside it).
   Ported from `Performance Analysis.dc.html`; see src/shell/pages/terminal/
   performance.ts for what is sample data (all of it).

   BRANDING CONTRACT — the handoff broke both of these and this sheet fixes them:

   1. TYPE. The handoff loaded Geist + Geist Mono from Google Fonts. SpiderX runs
      ONE face in all three roles from one sheet (assets/typography.css), so there
      is no second family to load and none is loaded here. Every "mono" number
      below is `var(--tm-mono)` — which ALIASES the sans — plus `tabular-nums`,
      which is what actually makes a column of figures line up. Never add a
      @font-face, a font stack, or a Google Fonts link to this file.

   2. COLOUR. Every value is a `--tm-*` token from terminal.css. No raw hex
      belongs here. The only colours that reach the DOM directly are SVG fills
      and P&L values set inline from performance.ts, where the colour is DATA.

   Accent rule: lime marks the ACTIVE TAB and nothing else. Direction is
   --tm-live / --tm-loss. Lime never means "up".

   Scoped under `.app--mode-terminal` like every other terminal sheet, so none of
   it can leak onto another route.
   ═══════════════════════════════════════════════════════════════════════════ */

/* It is the whole tab, so nothing precedes it on the page — no top rule and no
   separation, which is what it carried during the hour it spent appended to the
   foot of the Overview tab. */
.app--mode-terminal .tpa {
	display: flex;
	flex-direction: column;
	gap: 34px;
}

/* ── screen header ─────────────────────────────────────────────────────────── */

.app--mode-terminal .tpa-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.app--mode-terminal .tpa-head__id {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.app--mode-terminal .tpa-head__t {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--tm-ink);
}

.app--mode-terminal .tpa-head__lead {
	font-size: 12.5px;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tpa-head__fig {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

/* The one loud number on the screen. Tabular so it sits on the same rhythm as
   every other figure — see the type note at the top: this is the sans. */
.app--mode-terminal .tpa-head__px {
	font-family: var(--tm-mono);
	font-variant-numeric: tabular-nums;
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--tm-ink);
}

.app--mode-terminal .tpa-head__chg {
	font-family: var(--tm-mono);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 9px;
	border-radius: 7px;
	background: var(--tm-live-bg);
	color: var(--tm-live);
}

/* ── section head + tabs ──────────────────────────────────────────────────── */

.app--mode-terminal .tpa-sec {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.app--mode-terminal .tpa-sec__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--tm-line);
}

.app--mode-terminal .tpa-tabs {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--tm-line);
	border-radius: 11px;
}

.app--mode-terminal .tpa-tab {
	padding: 7px 13px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--tm-ink-3);
	cursor: pointer;
	transition: background 0.16s var(--tm-ease), color 0.16s var(--tm-ease);
}

.app--mode-terminal .tpa-tab:hover {
	color: var(--tm-ink);
}

/* A view that exists but has nothing behind it in this run — dimmed, not
   hidden, so the reader knows the tab is there and why it is empty. */
.app--mode-terminal .tpa-tab.is-dim {
	color: var(--tm-ink-5);
}

/* THE ONE LIME ON THIS SCREEN. Do not add a second. */
.app--mode-terminal .tpa-tab.is-on,
.app--mode-terminal .tpa-tab.is-dim.is-on {
	background: var(--tm-lime);
	color: #0b1203;
}

/* Segmented sub-control inside a panel — neutral, so it never competes with the
   lime tab above it. */
.app--mode-terminal .tpa-seg {
	display: flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--tm-line);
	border-radius: 10px;
}

.app--mode-terminal .tpa-seg__b {
	padding: 6px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--tm-ink-3);
	cursor: pointer;
	transition: background 0.16s var(--tm-ease), color 0.16s var(--tm-ease);
}

.app--mode-terminal .tpa-seg__b:hover {
	color: var(--tm-ink);
}

.app--mode-terminal .tpa-seg__b.is-on {
	background: rgba(255, 255, 255, 0.09);
	color: var(--tm-ink);
}

/* ── stat strip ───────────────────────────────────────────────────────────── */

.app--mode-terminal .tpa-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.app--mode-terminal .tpa-stat {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.app--mode-terminal .tpa-stat__k {
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tpa-stat__row {
	display: flex;
	align-items: baseline;
	gap: 9px;
	flex-wrap: wrap;
}

.app--mode-terminal .tpa-stat__v {
	font-family: var(--tm-mono);
	font-variant-numeric: tabular-nums;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.app--mode-terminal .tpa-stat__sub {
	font-family: var(--tm-mono);
	font-variant-numeric: tabular-nums;
	font-size: 12.5px;
	color: var(--tm-ink-4);
}

/* ── panels ───────────────────────────────────────────────────────────────── */

.app--mode-terminal .tpa-body {
	display: contents;
}

.app--mode-terminal .tpa-panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px 24px 18px;
	border: 1px solid var(--tm-line);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.018);
}

.app--mode-terminal .tpa-panel--cmp {
	gap: 22px;
	padding-bottom: 20px;
}

.app--mode-terminal .tpa-panel__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.app--mode-terminal .tpa-panel__t {
	font-size: 14px;
	font-weight: 600;
	color: var(--tm-ink-2);
}

.app--mode-terminal .tpa-split {
	display: grid;
	gap: 22px;
}

.app--mode-terminal .tpa-split--growth {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.app--mode-terminal .tpa-split--dist {
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

/* Same rule as .tm-fig in terminal.css: block, not inline — an inline wrapper
   shrink-wraps to nothing and the svg's width:100% resolves against zero. */
.app--mode-terminal .tpa-fig {
	display: block;
	width: 100%;
}

.app--mode-terminal .tpa-fig > svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Chart furniture. Set as classes rather than per-element attributes so the
   grid and axis colours stay tokenised. */
.app--mode-terminal .tpa-grid {
	stroke: var(--tm-line-2);
	stroke-width: 1;
}

.app--mode-terminal .tpa-zero {
	stroke: rgba(255, 255, 255, 0.16);
	stroke-width: 1;
}

.app--mode-terminal .tpa-ax {
	font-family: var(--tm-mono);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	letter-spacing: 0.02em;
	fill: var(--tm-ink-5);
}

.app--mode-terminal .tpa-ax--x {
	fill: var(--tm-ink-4);
	font-size: 11.5px;
}

/* Weekday labels are words, not figures — no tabular treatment. */
.app--mode-terminal .tpa-ax--day {
	font-family: var(--sans);
	font-size: 13px;
	fill: var(--tm-ink-3);
}

/* ── legends ──────────────────────────────────────────────────────────────── */

.app--mode-terminal .tpa-keys {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tpa-keys--split {
	justify-content: space-between;
	gap: 18px;
}

.app--mode-terminal .tpa-keys__g {
	display: inline-flex;
	align-items: center;
	gap: 18px;
}

.app--mode-terminal .tpa-mono {
	font-family: var(--tm-mono);
	font-variant-numeric: tabular-nums;
}

.app--mode-terminal .tpa-key {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.app--mode-terminal .tpa-key__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	flex: none;
}

.app--mode-terminal .tpa-key__sq {
	width: 9px;
	height: 9px;
	border-radius: 2px;
	flex: none;
}

/* ── profits and losses ───────────────────────────────────────────────────── */

.app--mode-terminal .tpa-pl {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.app--mode-terminal .tpa-pl__row {
	display: grid;
	grid-template-columns: 108px minmax(0, 1fr) 148px;
	align-items: center;
	gap: 18px;
	padding: 9px 0;
	box-shadow: inset 0 -1px 0 var(--tm-line-2);
}

.app--mode-terminal .tpa-pl__k {
	font-family: var(--tm-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tm-ink-2);
}

.app--mode-terminal .tpa-pl__bar > svg {
	height: 12px;
}

.app--mode-terminal .tpa-pl__mid {
	stroke: rgba(255, 255, 255, 0.14);
	stroke-width: 1;
}

.app--mode-terminal .tpa-pl__v {
	font-family: var(--tm-mono);
	font-variant-numeric: tabular-nums;
	font-size: 13.5px;
	font-weight: 600;
	text-align: right;
	color: var(--tm-live);
}

.app--mode-terminal .tpa-pl__ccy {
	font-size: 9.5px;
	letter-spacing: 0.06em;
	color: var(--tm-ink-5);
}

/* ── growth vs decline comparison ─────────────────────────────────────────── */

.app--mode-terminal .tpa-cmp {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.app--mode-terminal .tpa-cmp__t {
	font-family: var(--tm-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.app--mode-terminal .tpa-cmp__row {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) 76px;
	align-items: center;
	gap: 14px;
}

.app--mode-terminal .tpa-cmp__k {
	font-size: 12.5px;
	color: var(--tm-ink-3);
}

.app--mode-terminal .tpa-cmp__bar > svg {
	height: 10px;
}

.app--mode-terminal .tpa-cmp__v {
	font-family: var(--tm-mono);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	text-align: right;
	color: var(--tm-ink-2);
}

/* ── trades distribution donut ────────────────────────────────────────────── */

.app--mode-terminal .tpa-donutrow {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}

.app--mode-terminal .tpa-donut {
	width: 178px;
	height: 178px;
	flex: none;
}

.app--mode-terminal .tpa-donut__track {
	stroke: rgba(255, 255, 255, 0.05);
}

.app--mode-terminal .tpa-donut__n {
	font-family: var(--tm-mono);
	font-variant-numeric: tabular-nums;
	font-size: 30px;
	font-weight: 600;
	fill: var(--tm-ink);
}

.app--mode-terminal .tpa-donut__l {
	font-family: var(--sans);
	font-size: 12px;
	fill: var(--tm-ink-4);
}

.app--mode-terminal .tpa-donut__legend {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	flex: 1;
}

.app--mode-terminal .tpa-dl {
	display: grid;
	grid-template-columns: 14px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 10px;
}

.app--mode-terminal .tpa-dl__k {
	font-size: 13px;
	color: var(--tm-ink-3);
}

.app--mode-terminal .tpa-dl__n {
	font-family: var(--tm-mono);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	text-align: right;
	color: var(--tm-ink-2);
}

.app--mode-terminal .tpa-dl__p {
	font-family: var(--tm-mono);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	width: 58px;
	text-align: right;
	color: var(--tm-ink-4);
}

/* The one line of prose in the block: what the numbers actually mean. */
.app--mode-terminal .tpa-verdict {
	margin: auto 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--tm-line-2);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tpa-verdict strong {
	font-family: var(--tm-mono);
	font-variant-numeric: tabular-nums;
	font-weight: inherit;
	color: var(--tm-ink-2);
}

/* ── details table ────────────────────────────────────────────────────────── */

.app--mode-terminal .tpa-tbl {
	border: 1px solid var(--tm-line);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.018);
	overflow: hidden;
}

.app--mode-terminal .tpa-tbl__head,
.app--mode-terminal .tpa-tbl__row {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.app--mode-terminal .tpa-tbl__head {
	padding: 12px 22px;
	background: rgba(0, 0, 0, 0.35);
	font-family: var(--tm-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tpa-tbl__head > span:not(:first-child) {
	text-align: right;
}

.app--mode-terminal .tpa-tbl__row {
	align-items: baseline;
	padding: 11px 22px;
	box-shadow: inset 0 -1px 0 var(--tm-line-2);
}

.app--mode-terminal .tpa-tbl__row:hover {
	background: rgba(255, 255, 255, 0.028);
}

.app--mode-terminal .tpa-tbl__k {
	font-size: 13.5px;
	color: var(--tm-ink-3);
}

.app--mode-terminal .tpa-tbl__v {
	font-family: var(--tm-mono);
	font-variant-numeric: tabular-nums;
	font-size: 13.5px;
	text-align: right;
	color: var(--tm-ink-2);
}

/* The All column is the answer; Long/Short are the split behind it. */
.app--mode-terminal .tpa-tbl__v--all {
	color: var(--tm-ink);
}

.app--mode-terminal .tpa-tbl__sub {
	font-size: 11.5px;
	color: var(--tm-ink-4);
}

/* ── empty state ──────────────────────────────────────────────────────────── */

/* Dashed, like the Home connect well: this view exists, it just has nothing in
   it for this run. Says which, rather than drawing an empty chart. */
.app--mode-terminal .tpa-empty {
	padding: 34px 24px;
	border: 1px dashed rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.012);
	text-align: center;
}

.app--mode-terminal .tpa-empty p {
	margin: 0;
	font-size: 13.5px;
	color: var(--tm-ink-4);
}

/* ── responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
	.app--mode-terminal .tpa-split--growth,
	.app--mode-terminal .tpa-split--dist {
		grid-template-columns: minmax(0, 1fr);
	}

	.app--mode-terminal .tpa-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.app--mode-terminal .tpa-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.app--mode-terminal .tpa-tabs,
	.app--mode-terminal .tpa-seg {
		overflow-x: auto;
	}

	.app--mode-terminal .tpa-pl__row {
		grid-template-columns: 88px minmax(0, 1fr) 116px;
		gap: 12px;
	}

	.app--mode-terminal .tpa-tbl__head,
	.app--mode-terminal .tpa-tbl__row {
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
		padding-inline: 14px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERFORMANCE REFINEMENT PASS (2026-09-04) — appended, because this sheet loads
   after terminal-polish.css and would otherwise win on every shared selector.
   Precision only: hierarchy, rhythm, number style, semantic colour.

   THE ONE RULE THIS PASS ENFORCES: no two nested selections may both be lime.
   The section tabs (Breakdown, Distribution…) are the major content mode and
   keep the accent. Every control INSIDE them — By signals/By side, Daily/
   Weekly, Count/Amount, Hours/Days — is a view option on a neutral raised
   surface. Two lime selections on one screen is two headlines.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── header ────────────────────────────────────────────────────────────────
   The result and the strategy title sit on one line now — the figure had been
   riding above the block it belongs to. */
.app--mode-terminal .tpa-head {
	align-items: flex-end;
	gap: 20px 32px;
}

.app--mode-terminal .tpa-head__t {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.025em;
}

/* Context, not decoration: it names the sample and the window, so it stays at
   the muted level rather than the faint one. */
.app--mode-terminal .tpa-head__lead {
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tpa-head__px {
	font-size: clamp(34px, 3vw, 46px);
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums lining-nums;
}

/* Green, not lime: this is a profitable result, not a brand statement. */
.app--mode-terminal .tpa-head__chg {
	height: 26px;
	display: inline-flex;
	align-items: center;
	padding: 0 9px;
	border-radius: 7px;
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums lining-nums;
	background: var(--tm-live-bg);
	color: var(--tm-live);
}

/* ── section header + tabs ─────────────────────────────────────────────────
   Eyebrow and switcher on one baseline; every tab the same geometry. */
.app--mode-terminal .tpa-sec__top {
	align-items: center;
}

.app--mode-terminal .tpa-sec .tm-sech {
	font-size: 10px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.11em;
}

.app--mode-terminal .tpa-tabs {
	gap: 2px;
	padding: 3px;
	border-radius: var(--tm-r-md);
	background: rgba(255, 255, 255, 0.025);
}

.app--mode-terminal .tpa-tab {
	height: 30px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	font-size: 12.5px;
	font-weight: 600;
	transition:
		background 0.15s var(--tm-ease-ui),
		color 0.15s var(--tm-ease-ui);
}

.app--mode-terminal .tpa-tab:not(.is-on):hover {
	background: rgba(255, 255, 255, 0.035);
	color: var(--tm-ink-2);
}

/* ── the local controls ────────────────────────────────────────────────────
   Neutral, deliberately. See the note at the top of this block. */
.app--mode-terminal .tpa-seg {
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--tm-line-2);
	border-radius: var(--tm-r-md);
	background: rgba(255, 255, 255, 0.025);
}

.app--mode-terminal .tpa-seg__b {
	height: 28px;
	padding: 0 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 500;
}

.app--mode-terminal .tpa-seg__b.is-on {
	background: rgba(255, 255, 255, 0.09);
	font-weight: 600;
}

/* ── the stat row ──────────────────────────────────────────────────────────
   ONE metric component for every KPI row in the module — Returns, Periodical,
   Growth, Distribution, Streaks, Time patterns all render through this.

   THE SECONDARY FIGURE IS THE FIX. Rows like `488,865.00  4,888.65%` had the
   percentage competing with the money at nearly the same size; four-digit
   percentages are the loudest thing on the screen if you let them be. It drops
   to 10px and steps back to muted, so the monetary result reads first. */
.app--mode-terminal .tpa-stat__k {
	font-size: 10px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0.07em;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tpa-stat__row {
	margin-top: 8px;
	align-items: baseline;
	gap: 7px;
}

.app--mode-terminal .tpa-stat__v {
	font-size: 16px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.025em;
	font-variant-numeric: tabular-nums lining-nums;
}

.app--mode-terminal .tpa-stat__sub {
	font-size: 10px;
	font-weight: 400;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--tm-ink-4);
}

/* ── cards ─────────────────────────────────────────────────────────────────
   One padding, one radius, one hairline. */
.app--mode-terminal .tpa-panel {
	padding: 24px;
	border-radius: var(--tm-r-lg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.012);
}

.app--mode-terminal .tpa-panel__t {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--tm-ink-2);
}

/* ── charts ────────────────────────────────────────────────────────────────
   One grid value and one zero-line value across every figure in the module.
   The zero line is deliberately stronger than the grid — it is the only line on
   a P&L chart that carries meaning. Axis labels come off the faint level: a
   scale nobody can read is a scale that is not there. */
.app--mode-terminal .tpa-grid {
	stroke: rgba(255, 255, 255, 0.045);
}

.app--mode-terminal .tpa-zero {
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 1;
}

.app--mode-terminal .tpa-ax {
	font-size: 11px;
	fill: var(--tm-ink-4);
}

.app--mode-terminal .tpa-ax--x,
.app--mode-terminal .tpa-ax--day {
	fill: var(--tm-ink-4);
}

.app--mode-terminal .tpa-keys {
	gap: 18px;
	font-size: 11.5px;
	color: var(--tm-ink-4);
}

/* ── profits and losses ────────────────────────────────────────────────────
   Rows to one height, the label column to one width, and the result right of a
   fixed track so three bars share their zero. */
.app--mode-terminal .tpa-pl__row {
	min-height: 40px;
	padding: 8px 0;
}

.app--mode-terminal .tpa-pl__k {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.07em;
	color: var(--tm-ink-3);
}

.app--mode-terminal .tpa-pl__v {
	font-size: 13.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums lining-nums;
}

.app--mode-terminal .tpa-pl__ccy {
	font-size: 9.5px;
	font-weight: 400;
	color: var(--tm-ink-5);
}

/* ── comparison rows ───────────────────────────────────────────────────────
   Run-up and drawdown share a label width, a bar height and a value column. */
.app--mode-terminal .tpa-cmp__row {
	min-height: 26px;
}

.app--mode-terminal .tpa-cmp__k {
	font-size: 12.5px;
	color: var(--tm-ink-3);
}

.app--mode-terminal .tpa-cmp__v,
.app--mode-terminal .tpa-dl__n,
.app--mode-terminal .tpa-dl__p {
	font-variant-numeric: tabular-nums lining-nums;
}

.app--mode-terminal .tpa-cmp__t {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.11em;
}

/* ── donut ─────────────────────────────────────────────────────────────────
   Count centred on the ring, legend counts and percentages in their own
   columns so three rows read as a table rather than three sentences. */
.app--mode-terminal .tpa-donut__n {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.app--mode-terminal .tpa-dl {
	min-height: 22px;
	align-items: baseline;
}

.app--mode-terminal .tpa-dl__k {
	font-size: 12.5px;
	color: var(--tm-ink-3);
}

/* ── details table ─────────────────────────────────────────────────────────
   No zebra striping: a hover that arrives on the row you are reading beats a
   permanent stripe on every other one. The secondary percentage steps back so
   the All column reads as the answer. */
.app--mode-terminal .tpa-tbl__head {
	padding: 12px 22px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tpa-tbl__row {
	min-height: 42px;
	padding: 10px 22px;
	transition: background 0.14s var(--tm-ease-ui);
}

.app--mode-terminal .tpa-tbl__k {
	font-size: 13px;
	color: var(--tm-ink-3);
}

.app--mode-terminal .tpa-tbl__v {
	font-size: 13.5px;
	font-weight: 500;
	font-variant-numeric: tabular-nums lining-nums;
}

.app--mode-terminal .tpa-tbl__v--all {
	font-weight: 600;
}

.app--mode-terminal .tpa-tbl__sub {
	margin-left: 4px;
	font-size: 10px;
	font-weight: 400;
	color: var(--tm-ink-4);
}

/* ── verdict + empty ───────────────────────────────────────────────────────
   Copy a reader must understand does not live at the faint level. */
.app--mode-terminal .tpa-verdict,
.app--mode-terminal .tpa-empty p {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tpa-sample {
	color: var(--tm-ink-5);
}

/* ── responsive ────────────────────────────────────────────────────────────
   The tab bars are the first thing to run out of room; they scroll rather than
   wrap, so the section header stays one line. */
@media (max-width: 1080px) {
	.app--mode-terminal .tpa-tabs {
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.app--mode-terminal .tpa-tabs::-webkit-scrollbar {
		display: none;
	}

	.app--mode-terminal .tpa-panel {
		padding: 20px;
	}
}