/* ═══════════════════════════════════════════════════════════════════════════
   HOME REFINEMENT PASS — Terminal → Home (`#/terminal/home`).
   Loads AFTER terminal.css. Overrides only; it adds no new markup and no new
   styling paradigm. See src/shell/pages/terminal/index.ts for the DOM.

   THIS IS A POLISH LAYER, NOT A REDESIGN. Everything the page already does well
   is left alone: the two-column split, the market card's anatomy, the release
   table, the recap, the news stack. What changes is grade — token discipline,
   one type ramp, one radius scale, one border scale, and the 1–3px corrections
   that separate "styled" from "designed".

   IT REPLACED AN EARLIER, CRUDER POLISH SHEET of the same name rather than
   stacking on top of it. Two override layers over one base is how a stylesheet
   stops being legible.

   RULES INHERITED FROM THE APP, NOT NEGOTIABLE HERE:
   · ONE FACE. `--tm-mono` aliases the sans (assets/typography.css). A "mono"
     number is that face plus `tabular-nums`. No font is loaded here, ever.
   · FOUR WEIGHTS. Calibre ships 400/500/600/700. Anything else is silently
     rounded by the browser, by direction, so two elements meaning the same
     thing land a step apart. Only those four appear below.
   · LIME IS NOT DECORATION. It marks the active, the actionable, and the one
     signal that matters. It is never direction — profit and loss are
     --tm-live / --tm-loss.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ──────────────────────────────────────────────────────────────
   The `--tm-*` scale already exists on `.app--mode-terminal` (terminal.css).
   Rather than introduce a second, parallel set of variables — which is how a
   codebase ends up with two greys called the same thing — this NORMALISES the
   existing one and adds the three axes it was missing: radius, easing, and a
   fourth text level.

   Contrast: ink-3 and ink-4 were doing too much work at too low a contrast.
   Both come up a step. ink-5 stays where it is and is now reserved for text
   nobody has to read (units, axis ticks, decorative meta). */
.app--mode-terminal {
	--tm-ink-3: #a0a39d;
	--tm-ink-4: #7a7e78;
	--tm-ink-5: #5d615c;

	--tm-line: rgba(255, 255, 255, 0.075);
	--tm-line-2: rgba(255, 255, 255, 0.055);
	--tm-hair: rgba(255, 255, 255, 0.11);

	--tm-r-sm: 8px;
	--tm-r-md: 12px;
	--tm-r-lg: 16px;
	--tm-ease-ui: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── 2. HEADER ──────────────────────────────────────────────────────────────
   [mark · Home] │ Hello                         Globex · RTH opens in 1h 41m ☾

   The row was three things floating at slightly different optical weights. It
   is now one lockup: the badge is a compact chip, the greeting is page
   identity behind a rule, and the session clock is secondary but scannable.

   THE BADGE IS NOT A NAV CONTROL and deliberately stays that way. It carries
   `pointer-events: none` in chrome.css because it is a LABEL — the dock is this
   app's only navigation (see src/shell/dock.ts), and a second, competing Home
   button in the corner would be a navigation model, not a polish pass. It is
   styled to read as a control-grade object; it does not pretend to be one. */
.app--mode-terminal .tm-head {
	min-height: 54px;
	gap: 24px;
	margin-bottom: 2px;
}

.app--mode-terminal .tm-head__left {
	gap: 12px;
}

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

/* The mark is the product anchor: sized, not framed. No constant glow — the
   badge is a label, so there is no hover state to earn one. */
.app--mode-terminal .tm-head__left > .page-badge img,
.app--mode-terminal .tm-head__left > .page-badge svg {
	width: 18px;
	height: 18px;
}

.app--mode-terminal .tm-head__left > .page-badge .page-badge__name {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--tm-ink-2);
}

/* The greeting reads as page identity, not as another control. */
.app--mode-terminal .tm-title {
	margin-left: 2px;
	padding-left: 16px;
	border-left: 1px solid var(--tm-line);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.025em;
}

/* Session status: the venue is context, the countdown is the information. */
.app--mode-terminal .tm-eyebrow {
	font-size: 12.5px;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tm-eyebrow strong {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--tm-ink-2);
}

.app--mode-terminal .tm-moon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	color: var(--tm-ink-4);
	transition: background 0.16s var(--tm-ease-ui), color 0.16s var(--tm-ease-ui);
}

.app--mode-terminal .tm-moon:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--tm-ink-2);
}

/* ── 3. LAYOUT ──────────────────────────────────────────────────────────────
   The market card was carrying slightly too much of the page. Widening the
   feed column by ~4% and pulling the gutter in from 35px lets the two columns
   read as a pair rather than a
   primary and a sidebar. Gap sits on the 4px scale. */
.app--mode-terminal .tm-home {
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.28fr);
	gap: 24px;
	align-items: start;
}

/* ── 4. CARD SYSTEM ─────────────────────────────────────────────────────────
   One surface, one border, one radius. Every card on this page shared a
   silhouette but not its values; they do now. The inset highlight is a single
   hairline of top-light — enough to seat the card on the page without a shadow
   doing the work. */
.app--mode-terminal .tm-card,
.app--mode-terminal .tm-mkt,
.app--mode-terminal .tm-news,
.app--mode-terminal .tm-releases,
.app--mode-terminal .tm-sectors {
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-r-lg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
}

.app--mode-terminal .tm-card--2 {
	border-color: var(--tm-line-2);
}

/* ── 5. MARKET CARD ─────────────────────────────────────────────────────────
   Padding to a single value, and the internal rhythm onto the spacing scale. */
.app--mode-terminal .tm-mkt {
	padding: 22px;
}

.app--mode-terminal .tm-mkt__date {
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tm-ink-4);
}

/* THE SIGNAL LINE. One directional glyph in lime, then the reading in plain
   ink. The verdict word used to be greyed out, which buried the only part of
   the sentence anyone reads twice. */
.app--mode-terminal .tm-mkt__mood {
	margin-top: 10px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.012em;
	color: var(--tm-ink-2);
}

.app--mode-terminal .tm-mkt__mood::before {
	content: '↗';
	margin-right: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tm-lime);
}

.app--mode-terminal .tm-mkt__verdict {
	font-weight: 600;
	color: var(--tm-ink);
}

/* CONNECT PANEL. Still the page's one call to action, but it was shouting. The
   well loses its lime fill for a dashed empty-state frame, and the button loses
   ~4px of height and its glow. It stays lime, because it is the only thing on
   the page you are meant to click. */
.app--mode-terminal .tm-connectcta {
	margin-top: 18px;
	padding: 16px 18px;
	border: 1px dashed rgba(255, 255, 255, 0.13);
	border-radius: var(--tm-r-md);
	background: rgba(255, 255, 255, 0.025);
}

.app--mode-terminal .tm-connectcta__h {
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tm-ink);
}

.app--mode-terminal .tm-connectcta__p {
	margin-top: 5px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tm-connectcta__btn {
	height: 42px;
	padding: 0 18px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	box-shadow: none;
	transition:
		background 0.16s var(--tm-ease-ui),
		transform 0.16s var(--tm-ease-ui);
}

.app--mode-terminal .tm-connectcta__btn:hover {
	transform: translateY(-1px);
}

.app--mode-terminal .tm-connectcta__btn:active {
	transform: translateY(0);
}

/* CHART. The plot gets the height; its furniture gets out of the way. The
   reference rule was competing with the series — it is a hairline now. */
.app--mode-terminal .tm-mkt__row {
	margin-top: 20px;
}

.app--mode-terminal .tm-mkt__row--rule {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--tm-line-2);
}

.app--mode-terminal .tm-mkt__tag {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tm-ink-4);
}

/* RANGE CONTROL. Five loose words become one segmented control on a track. The
   selected segment is a raised neutral surface, not a lime fill: this is a view
   preference, and lime is reserved for things that matter to the account. */
.app--mode-terminal .tm-mkt__legend {
	margin-top: 18px;
}

.app--mode-terminal .tm-seg {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.035);
}

.app--mode-terminal .tm-seg > * {
	height: 28px;
	padding: 0 11px;
	display: inline-flex;
	align-items: center;
	border: 0;
	border-radius: 7px;
	background: transparent;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--tm-ink-4);
	transition: background 0.16s var(--tm-ease-ui), color 0.16s var(--tm-ease-ui);
}

.app--mode-terminal .tm-seg > *:hover {
	color: var(--tm-ink-2);
}

.app--mode-terminal .tm-seg > .is-on,
.app--mode-terminal .tm-seg > [aria-pressed='true'] {
	background: rgba(255, 255, 255, 0.09);
	font-weight: 600;
	color: var(--tm-ink);
}

/* SESSION STATS. Four cells that never shared a baseline or a width. Now a
   fixed four-up grid: quiet uppercase label, loud tabular value. */
.app--mode-terminal .tm-onstats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--tm-line-2);
}

.app--mode-terminal .tm-onstats__cell {
	min-width: 0;
}

.app--mode-terminal .tm-onstats__k {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tm-onstats__v {
	margin-top: 5px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.015em;
	font-variant-numeric: tabular-nums;
	color: var(--tm-ink);
}

/* COMPLEX ROWS. The tracks were the loudest thing in the card for the least
   information. Thinner, and the label column gets a fixed width so eleven rows
   share one left edge. */
.app--mode-terminal .tm-sectors {
	margin-top: 18px;
	padding: 6px 0;
}

.app--mode-terminal .tm-sector {
	padding: 7px 16px;
	gap: 12px;
	transition: background 0.14s var(--tm-ease-ui);
}

.app--mode-terminal .tm-sector:hover {
	background: rgba(255, 255, 255, 0.022);
}

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

.app--mode-terminal .tm-sector__pct {
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* The track is NOT a plain bar — it is a 12px barcode of 1.2px ticks
   (terminal.css), and the fill is the same barcode in colour. Squashing it to a
   3px rule turned eleven readable rows into slivers. Height left alone; only the
   row rhythm around it was tuned. */

/* ── 6. THE FEED COLUMN ─────────────────────────────────────────────────────
   One gap value down the whole column, so the three card types read as one
   stack rather than three groups. */
.app--mode-terminal .tm-feed {
	gap: 16px;
}

/* DAILY CLOCK. The dot column is reserved on every row, so labels align whether
   or not a release is high-impact; only the high-impact rows spend a dot. Rows
   come up to a 44px hit area with a quiet hover. */
.app--mode-terminal .tm-releases {
	padding: 18px 0 6px;
}

.app--mode-terminal .tm-releases__top {
	padding: 0 20px 12px;
}

.app--mode-terminal .tm-rel {
	display: grid;
	grid-template-columns: 46px 14px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0 20px;
	transition: background 0.14s var(--tm-ease-ui);
}

.app--mode-terminal .tm-rel:hover {
	background: rgba(255, 255, 255, 0.022);
}

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

.app--mode-terminal .tm-rel__flag {
	grid-column: 2;
	justify-self: center;
}

/* Reserved, not removed: hiding it keeps the column and the alignment. */
.app--mode-terminal .tm-rel:not(.tm-rel--high) .tm-rel__flag {
	visibility: hidden;
}

.app--mode-terminal .tm-rel__name {
	display: contents;
}

.app--mode-terminal .tm-rel__name > span:last-child {
	grid-column: 3;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13.5px;
	color: var(--tm-ink-3);
}

.app--mode-terminal .tm-rel--high .tm-rel__name > span:last-child {
	font-weight: 500;
	color: var(--tm-ink);
}

/* Instrument tags: text, not badges. They are a scan target, not a taxonomy. */
.app--mode-terminal .tm-rel__hits {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--tm-ink-5);
}

/* DAILY RECAP. It was set as a headline; it is prose. Dropping it to 15px with
   a 1.65 leading and giving the figures the weight is what makes it readable. */
.app--mode-terminal .tm-recap {
	padding: 20px 22px 22px;
}

.app--mode-terminal .tm-recap__top {
	margin-bottom: 14px;
}

.app--mode-terminal .tm-recap__when {
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	color: var(--tm-ink-5);
}

.app--mode-terminal .tm-recap__body {
	max-width: 95%;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: -0.004em;
	color: var(--tm-ink-2);
}

.app--mode-terminal .tm-recap__body strong {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--tm-ink);
}

/* Lime, but not a news-site link: the underline arrives on hover. */
.app--mode-terminal .tm-recap__body a {
	color: var(--tm-lime);
	text-decoration: none;
	transition: color 0.16s var(--tm-ease-ui);
}

.app--mode-terminal .tm-recap__body a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(198, 248, 60, 0.4);
}

/* NEWS FEED. Meta above, headline below — the headline was competing with its
   own timestamp for the top of the card. */
.app--mode-terminal .tm-news {
	padding: 16px 20px 18px;
	transition: background 0.14s var(--tm-ease-ui), border-color 0.14s var(--tm-ease-ui);
}

.app--mode-terminal .tm-news:hover {
	border-color: var(--tm-hair);
	background: rgba(255, 255, 255, 0.016);
}

.app--mode-terminal .tm-news__top {
	margin-bottom: 10px;
}

.app--mode-terminal .tm-news__when,
.app--mode-terminal .tm-news__src {
	font-size: 11px;
	color: var(--tm-ink-5);
}

.app--mode-terminal .tm-news__body {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.006em;
	color: var(--tm-ink-2);
}

.app--mode-terminal .tm-news__move {
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.app--mode-terminal .tm-news__ticker {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--tm-ink-4);
}

/* ── 7. THE DOCK ────────────────────────────────────────────────────────────
   It sat close enough to the last card to read as part of it. Lower, and the
   page reserves its height plus a margin so nothing ever scrolls underneath.
   The fade is what keeps content from appearing to collide with it. */
.app--mode-terminal .tm-dock {
	bottom: 18px;
}

.app--mode-terminal .tm {
	padding-bottom: 108px;
}

.app--mode-terminal .app__page::after {
	content: '';
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 92px;
	z-index: 50;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 10, 11, 0), var(--tm-bg) 78%);
}

/* ── 8. FOCUS ───────────────────────────────────────────────────────────────
   `:focus-visible` only, so the ring is a keyboard affordance and never appears
   on a mouse click. Not scoped to the terminal: a focus ring that exists on one
   route is worse than none. */
:focus-visible {
	outline: 2px solid rgba(198, 248, 60, 0.75);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ── 9. MOTION ──────────────────────────────────────────────────────────────
   Everything above transitions in 140–160ms on one curve. This is the opt-out,
   and it covers the page's entry animation too — that one is the reason a
   blanket `animation: none` is not enough, since the entry sets an opacity. */
@media (prefers-reduced-motion: reduce) {
	.app--mode-terminal *,
	.app--mode-terminal *::before,
	.app--mode-terminal *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.app--mode-terminal .tm--enter,
	.app--mode-terminal .tm--enter > * {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ── 10. RESPONSIVE ─────────────────────────────────────────────────────────
   The polish has to survive the three widths the product is actually used at,
   not just the one it was screenshotted at. */

/* Laptop: tighten the gutter and the card padding before anything wraps. */
@media (max-width: 1439px) {
	.app--mode-terminal .tm-home {
		gap: 20px;
	}

	.app--mode-terminal .tm-mkt {
		padding: 20px;
	}

	.app--mode-terminal .tm-title {
		font-size: 19px;
	}
}

/* Narrow laptop: the market card stops being the wider half first. */
@media (max-width: 1280px) {
	.app--mode-terminal .tm-home {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
	}
}

/* Tablet: one column, and the head stops competing for the row. */
@media (max-width: 1080px) {
	.app--mode-terminal .tm-home {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.app--mode-terminal .tm-head {
		min-height: 0;
		gap: 12px;
	}

	.app--mode-terminal .tm-recap__body {
		max-width: 100%;
	}
}

@media (max-width: 720px) {
	/* The greeting's rule is the first thing to go — at this width it is a
	   divider between two things already on separate lines. */
	.app--mode-terminal .tm-title {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
		font-size: 18px;
	}

	.app--mode-terminal .tm-onstats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.app--mode-terminal .tm-rel {
		grid-template-columns: 42px 14px minmax(0, 1fr);
		row-gap: 2px;
		padding-inline: 16px;
	}

	/* The instrument tags drop under the label rather than squeezing it. */
	.app--mode-terminal .tm-rel__hits {
		grid-column: 3;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BEHAVIOR OVERVIEW REFINEMENT PASS (2026-09-04).

   Appended to this sheet rather than given one of its own because Behavior
   Overview is a `.tm-*` screen out of the same base (terminal.css) as Home, and
   it reads the token block at the top of this file. A fourth override layer for
   four selectors is how a stylesheet stops being followable.

   ACTIVE-STATE HIERARCHY, enforced here and in the two module sheets:
     module nav (Overview / Performance / Payout Journey) → NEUTRAL dark pill
     major content tabs (Breakdown, Distribution, …)       → BRAND LIME
     local chart controls (By side, Daily, Count, Hours)    → NEUTRAL raised
     status                                                 → semantic
   Two lime selections must never nest. Lime is the brand and the major mode;
   green is "profitable / disciplined / met". They are not interchangeable.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── module nav ────────────────────────────────────────────────────────────
   The three module tabs are section navigation, not a content mode, so they
   stay neutral and let the in-page tabs own the accent. */
.app--mode-terminal .tm-tab {
	height: 34px;
	padding: 0 13px;
	display: inline-flex;
	align-items: center;
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--tm-ink-4);
	transition:
		background 0.16s var(--tm-ease-ui),
		color 0.16s var(--tm-ease-ui);
}

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

.app--mode-terminal .tm-tab.is-on {
	background: rgba(255, 255, 255, 0.08);
	font-weight: 600;
	color: var(--tm-ink);
}

/* ── discipline score ──────────────────────────────────────────────────────
   The product's headline score, and the one place on this screen lime is the
   right colour: it is the brand's own number. Everything under it steps down
   hard so the figure is the only loud thing. */
.app--mode-terminal .tm-score {
	padding: 24px;
	border-radius: var(--tm-r-lg);
}

.app--mode-terminal .tm-score__figure {
	align-items: baseline;
	gap: 10px;
	margin-top: 14px;
}

.app--mode-terminal .tm-score__n {
	font-size: 44px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums lining-nums;
}

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

/* The narrative is the reason the score exists — it is READ, so it never sits
   at the faint level. */
.app--mode-terminal .tm-score__note {
	max-width: 90%;
	margin-top: 20px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--tm-ink-2);
}

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

/* ── trading rhythm ────────────────────────────────────────────────────────
   The ramp itself is in screens-data.ts (one family, five steps, rare top).
   Here: cell geometry and a legend that can actually be read. */
.app--mode-terminal .tm-heat {
	gap: 4px;
	margin-top: 18px;
}

.app--mode-terminal .tm-heat > span {
	border-radius: 3px;
}

.app--mode-terminal .tm-heat__key {
	margin-top: 14px;
	font-size: 11.5px;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tm-heat__scale {
	gap: 5px;
}

.app--mode-terminal .tm-heat__scale i {
	width: 11px;
	height: 11px;
	border-radius: 3px;
}

/* ── behavioural risk cards ────────────────────────────────────────────────
   Four cards that each sized to their own copy, so the severity badges and the
   cost footers sat at four different heights. A fixed three-row track pins the
   title row, the description and the footer to shared baselines, and the footer
   is pushed to the bottom of every card regardless of copy length. */
.app--mode-terminal .tm-bias {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 12px;
	min-height: 168px;
	padding: 20px;
	border-radius: var(--tm-r-lg);
}

.app--mode-terminal .tm-bias__top {
	align-items: center;
	min-height: 24px;
}

.app--mode-terminal .tm-bias__title {
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tm-ink);
}

/* One badge geometry across all three severities — they differed by a pixel or
   two because each sized to its own word. */
.app--mode-terminal .tm-bias__sev {
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 9px;
	border-radius: 7px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

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

.app--mode-terminal .tm-bias__cost {
	align-items: baseline;
	padding-top: 14px;
	border-top: 1px solid var(--tm-line-2);
	font-size: 12px;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tm-bias__cost .tm-mono {
	font-variant-numeric: tabular-nums lining-nums;
}

/* ── pattern table ─────────────────────────────────────────────────────────
   The most institutional thing on the screen. Density, alignment and a hover
   that reads as a row rather than a highlight. */
.app--mode-terminal .tm-tbl {
	border-radius: var(--tm-r-lg);
}

.app--mode-terminal .tm-tbl__head {
	padding: 12px 22px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tm-ink-4);
}

.app--mode-terminal .tm-tbl__row {
	min-height: 46px;
	transition: background 0.14s var(--tm-ease-ui);
}

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

.app--mode-terminal .tm-tbl__row .tm-num,
.app--mode-terminal .tm-tbl__row .tm-mono {
	font-variant-numeric: tabular-nums lining-nums;
}

/* Verdicts: red stops, green continues, grey is neutral. Never lime — "Do more"
   is a positive finding, not a brand moment. */
.app--mode-terminal .tm-tbl__row span[style*='border-radius: 6px'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	padding: 0 9px;
	border-radius: 6px;
	font-weight: 600;
}