/* ═══════════════════════════════════════════════════════════════════════════
   The account bar — the risk strip across the top of Home, Stock, Portfolio and
   the TradingView Interface, shown only with a live funded account.
   See src/shell/account-bar.ts for when it draws and what each box means.

   NOT scoped to a route class. Unlike every terminal sheet, this element is
   shell-mounted and appears on four different surfaces, two of which
   (`#/portfolio`, `#/tv-terminal`) are outside `.app--mode-terminal` — so it
   carries its OWN colour block rather than borrowing the terminal's `--tm-*`
   scope, which would leave it border-less and unpainted on half its routes.
   That is the same trap the Settings page fell into; see terminal.css.

   Type is the app's one face (assets/typography.css). `--mono` here is that same
   family — tabular figures, not a second family.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The app shell is a three-row grid — topbar / body / risk strip (app-styles.css
   `.app`). The bar needs a fourth row between the top bar and the body.
   Declared here rather than in app-styles.css deliberately: rules added to that
   file have been lost to concurrent rewrites of it more than once.

   EVERY CHILD IS PINNED TO ITS ROW, and that is not optional. The bar is hidden
   most of the time (`display: none` — no account connected, or a route that
   does not wear it), and a `display: none` child is not a grid item at all. With
   rows assigned by source order the remaining children then shift UP one: the
   body landed in the `auto` row and sized to its content, the strip took `1fr`,
   and the page rendered as a black screen with the content collapsed out of
   view. Pinning means a hidden bar simply leaves row 2 empty at zero height.
   The dock is `position: fixed` and claims no row either way. */
.app {
	grid-template-rows: var(--topbar-h) auto 1fr var(--strip-h);
}

.app > .topbar {
	grid-row: 1;
}

.app > .acbar {
	grid-row: 2;
}

.app > .app__body {
	grid-row: 3;
}

.app > .app__strip {
	grid-row: 4;
}

.acbar {
	--ac-line: rgba(255, 255, 255, 0.075);
	--ac-ink: #f3f3f1;
	--ac-ink-2: #c9cbcc;
	--ac-ink-3: #a0a39d;
	--ac-ink-4: #7a7e78;
	/* Was referenced by `.acbar__c` before it existed. An undefined custom
	   property is invalid at computed-value time, so the caption fell back to
	   INHERITING the bright ink — measured at rgb(240,240,240), which made the
	   dimmest text in the strip render as the brightest. Declared now. */
	--ac-ink-5: #5d615c;
	--ac-live: #3ecf8e;
	--ac-warn: #e8c34a;
	--ac-loss: #ff6b5e;

	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	box-sizing: border-box;
	width: 100%;
	/* Deliberately short. This strip sits above every page it appears on, so its
	   height is a tax on all of them — it earns about 54px and no more. */
	padding: 8px clamp(14px, 4.2vw, 76px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.045);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.006));
	color: var(--ac-ink);
}

/* The shell lays the app out as a grid, so a hidden-but-present bar would still
   claim its row. `[hidden]` is set from account-bar.ts. */
.acbar[hidden] {
	display: none;
}

/* ── the account it belongs to ────────────────────────────────────────────── */

.acbar__name {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	max-width: 210px;
	padding: 4px 10px 4px 8px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	font-family: inherit;
	font-size: 12px;
	color: var(--ac-ink-3);
	cursor: pointer;
	transition: background 0.16s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}

.acbar__name:hover {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
}

/* Live, not decorative: the bar only ever renders against a polled snapshot. */
.acbar__dot {
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 999px;
	background: var(--ac-live);
	box-shadow: 0 0 0 2.5px rgba(62, 207, 142, 0.14);
}

.acbar__nametext {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── the four boxes ───────────────────────────────────────────────────────── */

.acbar__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	flex: 1;
	min-width: 0;
}

/* ONE LINE. It was four stacked rows — label, value, meter, caption — which
   made the strip ~75px tall on every page it appears on. Everything now sits on
   a single baseline and the meter is drawn UNDER the figure rather than beside
   it, which is what takes the bar to roughly a third of that. */
.acbar__box {
	display: flex;
	align-items: baseline;
	gap: 9px;
	min-width: 0;
	padding: 0 16px;
	position: relative;
}

/* The first box carries the strip's left edge — without this its label sits a
   divider's width further in than the account name above it. */
.acbar__row > .acbar__box:first-child {
	padding-left: 0;
}

/* The divider. A full-height inset rule read as a table border; this is a short
   centred hairline that fades at both ends, so the four boxes group without
   looking ruled off from each other. */
.acbar__box + .acbar__box::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 18px;
	background: linear-gradient(
		to bottom,
		transparent,
		rgba(255, 255, 255, 0.08) 22%,
		rgba(255, 255, 255, 0.08) 78%,
		transparent
	);
}

.acbar__k {
	flex: none;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ac-ink-4);
}

/* The figure and its meter. `relative` so the meter can hang under the digits
   without opening a row of its own. */
.acbar__figure {
	position: relative;
	flex: none;
	display: inline-block;
	padding-bottom: 3px;
}

.acbar__v {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.1;
	white-space: nowrap;
	color: var(--ac-ink);
}

.acbar__c {
	min-width: 0;
	font-size: 11.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ac-ink-5);
}

/* The meter track is always drawn, even for a box with no fill — it is what
   keeps the caption below it on one line across all four. */
/* The meter, as a 2px rule under the figure. There is no track behind it: an
   empty track on one line reads as an underline someone forgot to remove, and
   the figure's own width is the scale the eye uses anyway. */
.acbar__fill {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2.5px;
	border-radius: 2px;
	background: var(--ac-ink-3);
	transition: width 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Tone is HEADROOM, not direction: green while there is room, amber at three
   quarters gone, red at nine tenths. The thresholds live in account-bar.ts so
   the bar and the risk spine never disagree about what "close" means. */
.acbar__box--ok .acbar__fill {
	background: var(--ac-live);
}

.acbar__box--warn .acbar__fill {
	background: var(--ac-warn);
}

.acbar__box--bad .acbar__fill {
	background: var(--ac-loss);
}

.acbar__box--bad .acbar__v {
	color: var(--ac-loss);
}

/* A box the firm has not configured: no meter, and the value is an em dash. The
   track stays, so the row does not go ragged. */
.acbar__box--none .acbar__v {
	color: var(--ac-ink-2);
}

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

/* RESPONSIVE — one behaviour, not two.
   Below the width where the page goes single-column, the strip SCROLLS
   horizontally instead of wrapping. A 2-up grid was tried and measured: it took
   the bar from 45px to 85px, which doubles the height of the one element whose
   entire value is that it is a single line. Scrolling keeps the first two KPIs
   — equity and drawdown, the two that matter most — visible without a swipe. */
@media (max-width: 1080px) {
	.acbar {
		gap: 10px;
		padding-inline: 16px;
	}

	.acbar__name {
		max-width: 100%;
	}

	.acbar__row {
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.acbar__row::-webkit-scrollbar {
		display: none;
	}

	.acbar__box {
		flex: 0 0 auto;
	}

	.acbar__v {
		font-size: 15.5px;
	}
}

/* The "Sample" tag. It rides beside the account name and REPLACES the live dot —
   the two are mutually exclusive by design in account-bar.ts, because the dot
   means "this is your firm's number" and the tag means the opposite.

   (Re-declared 2026-09-04: it was lost when this file's responsive tail was
   consolidated, which silently dropped the tag to plain body text — the one
   piece of chrome on the strip that must never go quiet.) */
.acbar__sample {
	flex: none;
	padding: 1px 6px;
	border-radius: 4px;
	background: rgba(232, 195, 74, 0.13);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ac-warn);
}