/* ═══════════════════════════════════════════════════════════════════════════
   App chrome — what every route wears, decided once.

   THE FLOATING DOCK IS THE APP'S ONLY NAVIGATION (2026-08-20). It used to be the
   Terminal's own bar, borrowed by Legend, with the spiderx top bar carrying
   navigation everywhere else. Now the dock is mounted by the shell for every
   route (src/shell/dock.ts) and the top bar is collapsed app-wide.

   Two things follow, and both live here rather than in a page sheet: this file
   is linked LAST, so it wins at equal specificity against styles/app.css and
   every per-page island.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the top bar is gone ──────────────────────────────────────────────────────
   Collapsed, not deleted: `.app` is a 3-row grid whose children are placed by
   auto-flow, so taking the header OUT of flow (display: none) slides
   `.app__body` up into row 1 — a 0px track — which collapses the page host to
   zero height and clips the whole app away. That trap is documented in
   terminal.css, which has done this per-route for months; this is the same
   move, applied to every route at once.

   Zeroing the `--topbar-h` token does the grid half of the job wherever the
   track is written as `var(--topbar-h)` — which is everywhere, including the
   per-mode overrides in styles/app.css and `.app--fullbleed`. One token, no
   selector list to keep in step.

   WHAT WENT WITH IT, so nobody hunts for it: the account switcher, the Connect
   CTA, logout, the aura control, the Trading Layout/Widgets pills and the
   profile menu were all top-bar controls. Their routes and commands still
   exist — ⌘K (or the dock's magnifier) reaches them, which is why the dock's
   search must stay wired to the same palette. Restore the bar by deleting this
   block; nothing else knows it is gone. */
.app {
	--topbar-h: 0px;
}

.topbar {
	visibility: hidden;
	overflow: hidden;
	pointer-events: none;
}

/* ── the dock's palette, everywhere ───────────────────────────────────────────
   The dock is drawn in `--tm-*`, the Terminal's neutral scale, which terminal.css
   declares on a LIST of `.app--mode-*` classes. That was right while the dock
   was Terminal + Legend chrome; a route left off the list now renders a dock
   with transparent borders and no panel fill (exactly how Settings first
   rendered — see the note in terminal.css). The tokens are inert unless a
   `.tm-*` rule uses them, so declaring them on `.app` costs nothing and removes
   the trap. terminal.css keeps its own list: this is a floor, not a rewrite. */
.app {
	--tm-bg: #0a0a0b;
	--tm-panel: #101112;
	--tm-panel-2: #0e0f10;
	--tm-panel-3: #0c0d0e;
	--tm-panel-4: #141516;
	--tm-line: rgba(255, 255, 255, 0.055);
	--tm-line-2: rgba(255, 255, 255, 0.045);
	--tm-hair: rgba(255, 255, 255, 0.065);
	--tm-ink: #f0f0f0;
	--tm-ink-2: #c9cbcc;
	--tm-ink-3: #9a9c9e;
	--tm-ink-4: #6c6f71;
	--tm-ink-5: #45484a;
	--tm-lime: #c6f83c;
	--tm-live: #3ecf8e;
	--tm-loss: #ff6b5e;
	--tm-warn: #e8c34a;
	--tm-live-bg: rgba(62, 207, 142, 0.12);
	--tm-loss-bg: rgba(255, 107, 94, 0.12);
	--tm-mono: var(--mono);
	--tm-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* The shell's dock host. The bar inside it is `position: fixed` and paints
   itself (.tm-dock, terminal.css); this wrapper only has to stay out of the
   grid's way — it is a 4th child of a 3-row grid, so without this it would
   claim a row of its own and push the strip off the bottom. */
.app-dock {
	display: contents;
}

/* ── keeping the dock clear of page content ───────────────────────────────────
   The bar floats 22px off the bottom and is 50px tall, so it owns the bottom
   ~72px of the viewport. Two kinds of page have to be told about it.

   SCROLLING documents must not end flush against it. (The Terminal already pads
   136px of its own; these are the rest.) */
.app--mode-connect .cn,
.app--mode-profile-settings .app__page {
	padding-bottom: 96px;
}

/* PAGES THAT PIN THEIR OWN CHROME TO THE BOTTOM have to give up the strip
   instead of being covered by it: the trading workspace's Account Manager is a
   bottom-docked table whose last rows and controls would sit under the bar.
   Reserving the space shortens the page by 72px, which is the honest trade — a
   floating bar over a live positions table hides exactly the rows a trader is
   watching. The host is an absolute fill, so the padding shrinks the child and
   the widgets re-measure to it. */
.app--mode-trading .app__page {
	padding-bottom: 72px;
}

/* ── the TradingView terminal floats the dock like everywhere else ────────────
   For one afternoon this route pinned the dock to the TOP (`top: 14px;
   bottom: auto`) with `.tvt { padding-top: 74px }` reserving the room, on the
   reasoning that the terminal's Account Manager owns the bottom of the screen.
   Reserving that room turned the dock into a HEADER BAND — a 74px strip of app
   background above TradingView's toolbar — and the user's call was that the
   page should read like Legend: one bar floating over the content, no band.

   So this route now adds NOTHING. `.tm-dock` floats at `bottom: 22px` and the
   terminal fills the window under it. Deliberately no `padding-bottom` here
   either — reserving the strip at the bottom is the same dead band, just at the
   other edge. The bar overlaps the last rows of the positions table, which is
   the trade the design makes on every other route. */

/* ── the page badge ───────────────────────────────────────────────────────────
   The mark and the page's name, opening each page's head row
   (src/shell/page-badge.ts). It is IN the head, not pinned to the window: every
   page here is a centred column whose left edge moves with the viewport, so
   fixed positioning drifted out of alignment at every width but one.

   COLOURS ARE LITERAL HERE, not `--tm-*`. Those tokens are scoped to
   `.app--mode-terminal / -connect / -profile-settings` (see terminal.css) — on
   #/portfolio they are not declared at all, and a badge that read its ink from
   them would render invisible on that page.

   It is a LABEL, never a control: pointer-events stay off so it cannot swallow a
   click meant for the head it sits in. */
.page-badge {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 32px;
	flex: none;
	pointer-events: none;
	user-select: none;
}

.page-badge__name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.015em;
	color: #d7d9da;
	white-space: nowrap;
}

/* When the badge introduces page-specific identity or controls, a quiet rule
   separates the global page label from that local content. Settings has no
   adjacent left-side content, so it deliberately remains an unruled lockup. */
.tm-head__left > .page-badge,
.tms-head > .page-badge,
.cn-head__left > .page-badge,
.pf-head > .page-badge {
	padding-right: 13px;
	border-right: 1px solid rgba(255, 255, 255, 0.11);
}

/* ── "Firms Connected" ────────────────────────────────────────────────────────
   The button and its drop-down, on Connect and on Portfolio (src/shell/firms-menu.ts).
   Colours are literal for the same reason the badge's are: the `--tm-*` scale is
   not declared on #/portfolio, and a menu that read its ink from it would be
   invisible there. */
.firms-menu {
	position: relative;
	flex: none;
}

.firms-menu__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.032);
	padding: 7px 12px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: -0.008em;
	color: #c9cbcc;
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.firms-menu__btn:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.16);
	color: #f0f0f0;
}

.firms-menu__chev {
	display: grid;
	place-items: center;
	color: #6c6f71;
	transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
}

.firms-menu__btn[aria-expanded='true'] .firms-menu__chev {
	transform: rotate(180deg);
}

/* Anchored to the button's LEFT edge, because the button is itself left-aligned
   on both pages — a right-anchored panel would hang off toward the middle of
   the page from a control sitting at its edge. */
.firms-menu__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 40;
	min-width: 268px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 12px;
	background: #101112;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

.firms-menu__panel[hidden] {
	display: none;
}

.firms-menu__row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	border: 0;
	border-radius: 8px;
	background: none;
	padding: 9px 10px;
	font: inherit;
	text-align: left;
	color: #f0f0f0;
	cursor: pointer;
	transition: background 120ms ease;
}

.firms-menu__row:hover {
	background: rgba(255, 255, 255, 0.055);
}

.firms-menu__logo {
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: 6px;
	object-fit: contain;
}

.firms-menu__logo--letter {
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.07);
	font-size: 12px;
	font-weight: 600;
	color: #9a9c9e;
}

.firms-menu__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
}

.firms-menu__rating {
	flex: none;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: #c6f83c;
}

/* No rating is not a bad rating — it is dim and plain, never a zero score. */
.firms-menu__rating--none {
	font-size: 12px;
	color: #6c6f71;
}

.firms-menu__msg {
	margin: 0;
	padding: 12px 10px;
	font-size: 13px;
	color: #9a9c9e;
}

/* Connect's head is `space-between`; this keeps the badge and the button as one
   left-hand group rather than pushing them to opposite ends. */
.cn-head__left {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}