/* Terminal: relay (docs/DESIGN_SYSTEM.md). Page compositions specific to the
   site shell — navbar, sign in, account, home — go here. No colors: every
   value reads a --g-* token from system.css. */

/* -------------------------------------------------------------------------
   NAVBAR — a slim cover-plate strip bolted across the top of every page,
   carrying the relay's own status: the entanglement signal and its lamp.
   ------------------------------------------------------------------------- */

.relay-navbar {
	padding: var(--g-3) 0;
	border-bottom: 1px solid var(--g-trim);
}

.relay-navbar-shell {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--g-4);
	/* The nav sits on the same rail as page content (round3-coherence.md rule
	   3): same max-width and horizontal padding as .g-shell. */
	max-width: 1440px;
	margin: 0 auto;
	padding-left: var(--g-5);
	padding-right: var(--g-5);
}

.relay-wordmark {
	display: flex;
	align-items: center;
	gap: var(--g-3);
	margin: 0;
}

/* The unit's own name, as a .g-nameplate (system.css) rather than a plain
   .g-legend: identity that has to survive across a click belongs in the
   core frame, but the nameplate face itself stays the relay's own (Rule A).
   No overrides needed here beyond the responsive hide below. */

/* The QED entanglement bars and the "entangled" lamp: the relay's own
   status voice, always visible, never collapsed with the nav links. */
.relay-status {
	display: flex;
	align-items: center;
	gap: var(--g-3);
	margin-left: auto;
	order: 2;
}

.relay-signal {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 14px;
}

.relay-signal-bar {
	display: block;
	width: 4px;
	height: var(--h, 14px);
	background: var(--g-lamp-on);
	border-radius: 1px;
}

.relay-signal-bar--off {
	background: var(--g-trim);
}

.relay-entangled-lamp {
	color: var(--g-ink-mid);
}

.relay-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--g-3);
}

.relay-link {
	position: relative;
	padding-bottom: var(--g-2);
	color: var(--g-ink-mid);
	border-bottom: 2px solid transparent;
	/* .g-legend's default tracking (--g-track-label, 0.12em) is what pushed
	   six links plus the status cluster onto two rows at 1440px; a link
	   label reads fine tighter than a hull legend does. */
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.relay-link:hover {
	color: var(--g-ink);
}

.relay-link--active {
	color: var(--g-ink);
	border-bottom-color: var(--g-lamp-on);
}

.relay-actions {
	margin-left: var(--g-4);
}

.relay-key {
	padding: var(--g-2) var(--g-3);
	white-space: nowrap;
}

.relay-auth {
	display: flex;
	align-items: center;
	gap: var(--g-2);
	margin-left: var(--g-4);
}

.relay-username-link {
	color: var(--g-ink);
}

.relay-auth-key {
	padding: var(--g-2) var(--g-3);
	white-space: nowrap;
}

@media (max-width: 991px) {
	.relay-navbar-shell {
		align-items: flex-start;
	}

	.relay-links,
	.relay-actions,
	.relay-auth {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		margin-left: 0;
		gap: var(--g-3);
	}

	.relay-actions {
		margin-top: var(--g-3);
	}

	.relay-auth {
		margin-top: var(--g-3);
	}
}

@media (max-width: 1500px) {
	/* The logo image alone carries the wordmark below this width; the
	   stencilled unit designation next to it is flourish, not information,
	   and is the first thing to give up room to the six links, the CTA and
	   the auth cluster (round1-findings.md S10: six links wrapped to a
	   second row at 1440px with this legend still in the bar). */
	.relay-wordmark-text {
		display: none;
	}
}

@media (max-width: 1300px) {
	/* The entanglement signal bars are the relay's own decorative flourish;
	   the lamp beside them already carries the same "linked" status in one
	   glyph, so the bars are the next thing to give up room. */
	.relay-signal {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   ACCOUNT / USER DETAILS — a user's Xalians as lines on the relay's own
   tube, bolted under a cover plate the same way the home page's tube is.
   The account page adds a physical key on each line to drop it from the
   faction; user details reads someone else's holdings, so its rows carry no
   key (xalianStatRowView's `screen` prop, not `accountPage`).
   ------------------------------------------------------------------------- */

.relay-record-tube {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.record-strip--screen {
	padding: var(--g-4) 0;
}

.record-strip--screen + .record-strip--screen {
	border-top: 1px dashed var(--g-trim);
}