/* ═══════════════════════════════════════════════════════════════════════════
   STOCK REFINEMENT PASS — Terminal → Stock (`#/terminal/stock`).
   Loads AFTER terminal-stock.css. Overrides only, no new markup.

   A PRECISION PASS, NOT A REDESIGN. The page's composition is already right and
   is left alone: the hero split, the chart, the side panel, the contract strip,
   the analytics tabs. What changes is the last 5% — one radius scale, one border
   scale, one type ramp, and the 1–3px corrections that stop things looking
   almost-aligned.

   TOKENS COME FROM terminal-polish.css, which normalises the `--tm-*` scale for
   the whole terminal (inks, lines, radii, `--tm-ease-ui`). This sheet declares
   none of its own — a second palette is how two greys end up with one name.

   SEMANTIC COLOUR, FORMALISED. Lime = active state and brand action, and nothing
   else. GREEN = bullish / constructive. RED = bearish / adverse. YELLOW =
   caution. Lime is never a substitute for green; the range selector and the
   instrument tile below are where that rule gets enforced.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HEADER ──────────────────────────────────────────────────────────────
   [mark · Stock] │ [ES tile] ES / E-mini S&P 500 ⌄

   The lockup was three groups at three different optical weights, with the
   divider tight against both sides. It gets real air, and the badge matches
   Home's chip so the two pages share a corner. */
.app--mode-terminal .tms-head {
	min-height: 54px;
	gap: 18px;
}

.app--mode-terminal .tms-head > .page-badge {
	gap: 8px;
	height: 34px;
	padding: 0 12px 0 12px;
	margin-right: 4px;
	border: 1px solid var(--tm-line);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.04);
}

.app--mode-terminal .tms-head > .page-badge img,
.app--mode-terminal .tms-head > .page-badge svg {
	width: 18px;
	height: 18px;
}

.app--mode-terminal .tms-head > .page-badge .page-badge__name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tm-ink-2);
}

/* ── 2. THE INSTRUMENT TILE ─────────────────────────────────────────────────
   It was a saturated per-instrument hue set inline — purple, for ES — and it was
   the only uncontrolled colour on the page. The inline style is gone from
   stock.ts; the tile is now a neutral surface that supports the hierarchy
   instead of competing with it. A faint green tint was the alternative and was
   rejected: green means BULLISH here, and an instrument is not a direction. */
.app--mode-terminal .tms-logo {
	width: 40px;
	height: 40px;
	border-radius: var(--tm-r-md);
	border: 1px solid rgba(255, 255, 255, 0.075);
	background: rgba(255, 255, 255, 0.055);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tm-ink);
}

.app--mode-terminal .tms-id {
	gap: 4px;
}

.app--mode-terminal .tms-id__t {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.app--mode-terminal .tms-id__n {
	font-size: 13px;
	line-height: 1.1;
	color: var(--tm-ink-3);
}

.app--mode-terminal .tms-pick {
	gap: 12px;
	border-radius: var(--tm-r-md);
	transition:
		background 0.16s var(--tm-ease-ui),
		border-color 0.16s var(--tm-ease-ui);
}

/* The chevron: smaller, muted, and it brightens with the control rather than
   sitting at full strength beside a 13px name. */
.app--mode-terminal .tms-pick .tms-ico {
	color: var(--tm-ink-4);
	transition: color 0.16s var(--tm-ease-ui);
}

.app--mode-terminal .tms-pick:hover .tms-ico {
	color: var(--tm-ink-2);
}

/* ── 3. PRICE HEADER ────────────────────────────────────────────────────────
   The scale was right; the change badge was a SaaS pill beside it. */
.app--mode-terminal .tms-quote {
	gap: 14px;
}

.app--mode-terminal .tms-quote__px {
	font-size: clamp(40px, 3vw, 52px);
	font-weight: 600;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums lining-nums;
}

.app--mode-terminal .tms-quote__cents {
	color: var(--tm-ink-4);
}

.app--mode-terminal .tms-quote__chg {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 10px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums lining-nums;
	background: var(--tm-live-bg);
}

.app--mode-terminal .tms--down .tms-quote__chg {
	background: var(--tm-loss-bg);
}

/* ── 4. CHART + RANGE ───────────────────────────────────────────────────────
   The selector was detached from the plot it controls. Pulled in, and rebuilt as
   the same segmented control Home uses — one pattern, two pages.

   The active segment is a raised NEUTRAL surface. A view preference is not a
   market signal, so it does not get the accent. */
.app--mode-terminal .tms-chart {
	margin-top: 18px;
}

.app--mode-terminal .tms-ranges {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-top: 14px;
	padding: 3px;
	border: 1px solid var(--tm-line-2);
	border-radius: var(--tm-r-md);
	background: rgba(255, 255, 255, 0.025);
	width: max-content;
}

.app--mode-terminal .tms-range {
	min-width: 40px;
	height: 30px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 7px;
	background: transparent;
	font-size: 12px;
	font-weight: 600;
	color: var(--tm-ink-4);
	transition:
		color 0.15s var(--tm-ease-ui),
		background 0.15s var(--tm-ease-ui);
}

.app--mode-terminal .tms-range:hover {
	background: rgba(255, 255, 255, 0.035);
	color: var(--tm-ink-3);
}

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

/* The prior-settle annotation is context, not a second series. */
.app--mode-terminal .tms-chart__prev-l {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tm-ink-5);
}

.app--mode-terminal .tms-chart__prev-v {
	font-size: 12.5px;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--tm-ink-3);
}

/* ── 5. KEY INDICATORS ──────────────────────────────────────────────────────
   Top-aligned, so three short lines stop hovering in the middle of a tall panel.
   The figure inside each line carries the weight — that is what you are reading.
   The footer is separated by a rule and dropped a size, not dimmed further. */
/* CONTENT HEIGHT, not stretched. The panel was pinned to the hero's height —
   452px against a hero of 461 — so three indicator lines and a footer were
   spread over a column with ~200px of dead air in the middle. It sizes to what
   it holds now; the row still aligns because both halves start at the top. */
.app--mode-terminal .tms-side {
	align-self: start;
}

.app--mode-terminal .tms-panel {
	min-height: 0;
	padding: 22px;
	border-radius: var(--tm-r-lg);
}

.app--mode-terminal .tms-panel__body {
	justify-content: flex-start;
	padding: 20px 0;
}

.app--mode-terminal .tms-panel__title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.app--mode-terminal .tms-panel__list {
	gap: 14px;
}

.app--mode-terminal .tms-ind {
	font-size: 14px;
	line-height: 1.5;
	color: var(--tm-ink-3);
}

.app--mode-terminal .tms-ind__text strong,
.app--mode-terminal .tms-fact strong {
	font-weight: 600;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--tm-ink);
}

/* Tiny semantic discs, not badges. */
.app--mode-terminal .tms-ind__mark svg {
	width: 15px;
	height: 15px;
}

.app--mode-terminal .tms-panel__foot {
	padding-top: 14px;
	border-top: 1px solid var(--tm-line-2);
	font-size: 11.5px;
	color: var(--tm-ink-4);
}

/* The expand control on the Cheat sheet tab. */
.app--mode-terminal .tms-panel__expand--live:focus-visible {
	outline-offset: 1px;
}

.app--mode-terminal .tms-ptabs {
	gap: 3px;
}

.app--mode-terminal .tms-ptab {
	height: 30px;
	padding: 0 13px;
	display: inline-flex;
	align-items: center;
	border-radius: 7px;
	font-size: 12.5px;
	font-weight: 500;
	transition:
		background 0.15s var(--tm-ease-ui),
		color 0.15s var(--tm-ease-ui);
}

.app--mode-terminal .tms-ptab.is-on {
	font-weight: 600;
}

/* ── 6. CONTRACT STRIP ──────────────────────────────────────────────────────
   Already one of the page's strongest components — this is rhythm only. Every
   label on one baseline, every value on another, one divider height, tabular
   figures so ten cells share a grid. */
.app--mode-terminal .tms-kpis {
	border-radius: var(--tm-r-lg);
}

.app--mode-terminal .tms-kpi {
	padding: 18px 16px;
	text-align: left;
}

.app--mode-terminal .tms-kpi__l {
	font-size: 10px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tms-kpi__v {
	margin-top: 9px;
	font-size: 15px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.015em;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--tm-ink);
}

/* ── 7. THE CHEAT SHEET ─────────────────────────────────────────────────────
   Numbers to one figure style, so the six rungs read as a column. */
.app--mode-terminal .tms-cheat__px,
.app--mode-terminal .tms-cheat__away {
	font-variant-numeric: tabular-nums lining-nums;
}

.app--mode-terminal .tms-cheat__row {
	transition: background 0.14s var(--tm-ease-ui);
}

.app--mode-terminal .tms-cheat__row:not(.tms-cheat__row--now):hover {
	background: rgba(255, 255, 255, 0.022);
}

/* ── 8. RESPONSIVE ──────────────────────────────────────────────────────────
   The three widths the page is actually used at, plus a tablet fallback. */
@media (max-width: 1439px) {
	.app--mode-terminal .tms-panel,
	.app--mode-terminal .tms-hero__main {
		padding: 20px;
	}
}

@media (max-width: 1080px) {
	.app--mode-terminal .tms-head {
		min-height: 0;
		gap: 12px;
	}

	/* Ten cells will not fit; two columns beats ten unreadable ones. */
	.app--mode-terminal .tms-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.app--mode-terminal .tms-kpi {
		box-shadow: inset 0 -1px 0 var(--tm-line-2);
	}
}

@media (max-width: 720px) {
	.app--mode-terminal .tms-logo {
		width: 34px;
		height: 34px;
	}

	.app--mode-terminal .tms-ranges {
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.app--mode-terminal .tms-ranges::-webkit-scrollbar {
		display: none;
	}
}