/* ═══════════════════════════════════════════════════════════════════════════
   Connect page (#/connect) — reached from "Connect Portfolio" on Terminal home.

   A standalone full-screen surface from the `Connection Page.dc.html` handoff:
   brand header, one centred hero card, footer dock. It keeps the mockup's OWN
   header and dock (unlike the Terminal, which handed those to the app top bar)
   because the top bar is collapsed on this route — without them there would be
   no way back out of the page.

   Palette tokens (--tm-*) are shared with the Terminal and declared in
   terminal.css under `.app--mode-connect .cn`; this sheet only adds layout.
   ══════════════════════════════════════════════════════════════════════════ */

.cn {
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
	min-height: 100%;
	padding: 22px 26px 20px;
	background: var(--tm-bg);
}

/* The Fey cut (2026-08-20): this surface is the in-app twin of landing.html, so
   it runs the same monochrome — black ground, white display type, a WHITE
   primary pill. Lime survives only inside the brand mark image. Colour on this
   page would be a claim (lime reads as "go" on every other SpiderX surface) and
   nothing here is a market state. */
.cn ::selection {
	background: rgba(255, 255, 255, 0.2);
}

/* ── header ───────────────────────────────────────────────────────────────── */

.cn-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 0 14px;
}

/* Emptied 2026-08-23 — the brand button and the "Connect" label are gone. It is
   kept only as the page's top spacer, so it holds a fixed sliver of height
   instead of whatever a flex row of nothing collapses to. */
.cn-head--bare {
	display: block;
	height: 8px;
	padding: 0;
}

.cn-brand {
	display: flex;
	align-items: center;
	gap: 13px;
	border: 0;
	background: none;
	padding: 0;
	font-family: inherit;
	cursor: pointer;
}

/* The mark is now the brand IMAGE (src/shell/brand.ts) — it carries its own
   lime tile and rounded corners, so this no longer paints a background or
   centres a glyph. Size comes from the img attrs; only the shrink guard is
   still this sheet's business. */
.cn-brand__mark {
	flex: none;
	/* The mark asset is a hard square since 2026-08-20; the radius is the call
	   site's job now. See src/shell/brand.ts. */
	border-radius: 13px;
}

.cn-brand__word {
	font-weight: 700;
	font-size: 21px;
	letter-spacing: -0.035em;
	color: #fff;
	line-height: 1;
}

/* White, like the landing nav's wordmark — the lime lives in the tile beside it. */
.cn-brand__word i {
	font-style: normal;
	color: #fff;
}

.cn-head__rule {
	width: 1px;
	height: 18px;
	background: rgba(255, 255, 255, 0.12);
}

.cn-head__where {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--tm-ink-3);
}

.cn-head__nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cn-navbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 9px 14px;
	background: none;
	color: var(--tm-ink-3);
	font-family: inherit;
	font-size: 14.5px;
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
}

.cn-navbtn:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.05);
}

.cn-navbtn.is-on {
	background: rgba(198, 248, 60, 0.1);
	border-color: rgba(198, 248, 60, 0.3);
	color: var(--tm-lime);
	font-weight: 500;
}

.cn-navbtn.is-on:hover {
	background: rgba(198, 248, 60, 0.17);
	color: var(--tm-lime);
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

.cn-main {
	flex: 1;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: #050a0b;
}

/* The two ambients that sat on this card — a bloom (::before, a four-stop
   radial ramp) and a 72px grid masked to a radial fade (::after) — were
   REMOVED 2026-08-27 (user's call). The card is a flat fill now. Nothing
   else drew them: the app-level ambients are already held at opacity 0 for
   this route (see terminal.css .app--mode-connect::before/::after). */

.cn-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 520px;
	padding: 48px 24px;
}

/* The broker-tile cluster: two fading stacks either side of a dashed link. */
.cn-tiles {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}

.cn-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: #0a1012;
	font-family: var(--tm-mono); font-variant-numeric:tabular-nums;
	color: var(--tm-ink-3);
}

.cn-tile + .cn-tile {
	margin-left: -5px;
}

.cn-tile--xs {
	width: 18px;
	height: 18px;
	border-radius: 6px;
	border-color: rgba(255, 255, 255, 0.12);
	opacity: 0.5;
	margin-left: -4px;
}

.cn-tile--s {
	width: 23px;
	height: 23px;
	border-radius: 7px;
	border-color: rgba(255, 255, 255, 0.14);
	opacity: 0.7;
	margin-left: -4px;
}

.cn-tile--m {
	width: 28px;
	height: 28px;
	font-size: 10px;
	opacity: 0.85;
}

.cn-tile--l {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	font-size: 11px;
	color: var(--tm-ink);
	box-shadow: 0 0 0 4px #050a0b;
}

/* The lit tile in the middle is SPIDERX — the firms converge on it. It carries
   the brand mark image, so it paints no glyph of its own. */
.cn-tile--lit {
	border-color: rgba(255, 255, 255, 0.34);
	background: #0d0f10;
	color: #fff;
	box-shadow: 0 0 0 4px #050a0b, 0 0 26px rgba(255, 255, 255, 0.16);
}

.cn-tile--lit img {
	display: block;
	border-radius: 7px;
}

/* A real firm mark sitting in the row. object-fit keeps a square logo square. */
.cn-tile__logo {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.cn-tiles > .cn-tile:first-child {
	margin-left: 0;
}

.cn-tile__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--tm-ink-3);
}

.cn-tiles__link {
	flex: none;
	margin: 0 7px;
	line-height: 0;
	color: rgba(255, 255, 255, 0.42);
}

.cn-eyebrow {
	font-family: var(--tm-mono); font-variant-numeric:tabular-nums;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tm-ink-4);
	margin-bottom: 16px;
}

.cn-title {
	margin: 0 0 16px;
	font-size: 46px;
	line-height: 1.04;
	font-weight: 600;
	letter-spacing: -0.033em;
	color: var(--tm-ink);
	text-wrap: balance;
}

.cn-title__word {
	font-weight: 700;
	letter-spacing: -0.045em;
	color: #fff;
}

.cn-title__word i {
	font-style: normal;
	color: #fff;
}

.cn-copy {
	margin: 0 0 30px;
	font-size: 16.5px;
	line-height: 1.55;
	letter-spacing: -0.005em;
	color: var(--tm-ink-3);
	text-wrap: pretty;
}

.cn-copy b {
	color: var(--tm-ink-2);
	font-weight: 600;
}

.cn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 320px;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 13px 26px;
	background: #fff;
	color: #000;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 10px 44px rgba(255, 255, 255, 0.2);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.cn-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 60px rgba(255, 255, 255, 0.32);
}

.cn-cta[disabled] {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

.cn-lock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-family: var(--tm-mono); font-variant-numeric:tabular-nums;
	font-size: 11.5px;
	color: var(--tm-ink-4);
}

/* ── firm picker (revealed by the CTA) ────────────────────────────────────── */

.cn-firms {
	width: 100%;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 18px;
	text-align: left;
	animation: cnRise 0.28s cubic-bezier(0.22, 0.68, 0, 1) both;
}

@keyframes cnRise {
	from {
		opacity: 0;
		transform: translateY(7px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-firms {
		animation-duration: 0.01ms;
	}
}

.cn-firms__head {
	font-family: var(--tm-mono); font-variant-numeric:tabular-nums;
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tm-ink-4);
	padding: 0 4px 4px;
}

.cn-firm {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--tm-line);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.022);
	color: var(--tm-ink);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.22s var(--tm-ease), background 0.22s var(--tm-ease);
}

.cn-firm:hover {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.055);
}

.cn-firm__logo {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	object-fit: contain;
	font-family: var(--tm-mono); font-variant-numeric:tabular-nums;
	font-size: 12px;
	color: #fff;
}

.cn-firm__id {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cn-firm__name {
	font-size: 14.5px;
	font-weight: 600;
}

.cn-firm__sub {
	font-size: 12.5px;
	color: var(--tm-ink-4);
}

.cn-firms__msg {
	padding: 10px 4px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--tm-ink-4);
}

/* ── hand-off sheet ────────────────────────────────────────────────────────
   Choosing a firm no longer jumps straight to a credential form. This sheet
   sits in between and says, in one screen, who you are about to give a login
   to and what that connection can do.

   It is LIGHT on purpose, and it is the only light surface in the app. That is
   the point: you are leaving the black terminal and handing off to another
   company. The reference this is modelled on (Plaid's consent sheet) is light
   for the same reason — except there is no Plaid here, so the sheet names the
   FIRM, and every claim on it is one this flow can actually keep. Do not add
   "read-only", "we never see your credentials", or any variant: the login is
   posted to /api/brokers/<id>/auth/login on our own gateway, and the session it
   returns is the one the trading page places orders through.
   ────────────────────────────────────────────────────────────────────────── */

.cn-sheet {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: grid;
	place-items: center;
	padding: 24px;
}

.cn-sheet[hidden] {
	display: none;
}

.cn-sheet__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 0;
	padding: 0;
	cursor: pointer;
}

.cn-sheet__box {
	position: relative;
	width: min(452px, 100%);
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	border-radius: 16px;
	background: #fff;
	color: #16181a;
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
	animation: cnSheetIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The box takes focus when the sheet opens so the dialog is announced, but it
   is a container, not a control — no ring. */
.cn-sheet__box:focus {
	outline: none;
}

@keyframes cnSheetIn {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.985);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-sheet__box {
		animation-duration: 0.01ms;
	}
}

.cn-sheet__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: #16181a;
	cursor: pointer;
	transition: background 0.18s;
}

.cn-sheet__close:hover {
	background: rgba(0, 0, 0, 0.06);
}

.cn-sheet__top {
	padding: 40px 34px 26px;
	text-align: center;
}

/* The two marks, overlapping — you and the firm, about to be joined. */
.cn-sheet__marks {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
}

.cn-sheet__mark {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	flex: none;
	border-radius: 999px;
	background: #16181a;
	overflow: hidden;
	font-size: 19px;
	font-weight: 600;
	color: #fff;
}

.cn-sheet__mark + .cn-sheet__mark {
	margin-left: -12px;
	box-shadow: 0 0 0 3px #fff;
}

.cn-sheet__mark img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.cn-sheet__title {
	margin: 0;
	font-size: 23px;
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: -0.022em;
	color: #16181a;
	text-wrap: balance;
}

.cn-sheet__title b {
	font-weight: 700;
}

.cn-sheet__list {
	margin: 24px 0 0;
	padding: 20px;
	display: grid;
	gap: 18px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	text-align: left;
}

.cn-sheet__row {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

.cn-sheet__row svg {
	margin-top: 2px;
	color: #16181a;
}

.cn-sheet__rowt {
	margin: 0 0 4px;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #16181a;
}

.cn-sheet__rowb {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #5c6165;
}

.cn-sheet__foot {
	padding: 20px 34px 26px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	text-align: center;
}

.cn-sheet__legal {
	margin: 0 0 16px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #5c6165;
}

.cn-sheet__legal a {
	color: #16181a;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cn-sheet__go {
	display: block;
	width: 100%;
	padding: 15px 20px;
	border: 0;
	border-radius: 10px;
	background: #16181a;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.012em;
	cursor: pointer;
	transition: background 0.2s;
}

.cn-sheet__go:hover {
	background: #2b2f33;
}

.cn-sheet__go:focus-visible,
.cn-sheet__close:focus-visible {
	outline: 2px solid #16181a;
	outline-offset: 2px;
}

/* ── footer ───────────────────────────────────────────────────────────────── */

.cn-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 8px;
}

.cn-foot__note {
	font-family: var(--tm-mono); font-variant-numeric:tabular-nums;
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tm-ink-4);
}

.cn-foot__info {
	display: grid;
	place-items: center;
	color: var(--tm-ink-4);
}

.cn-foot__mid {
	display: flex;
	align-items: center;
	gap: 10px;
}

@media (max-width: 720px) {
	.cn-title {
		font-size: 34px;
	}

	.cn-foot {
		flex-direction: column;
		gap: 12px;
	}

	.cn-foot__note,
	.cn-foot__info {
		display: none;
	}
}

/* ── the sheet's credential form ──────────────────────────────────────────────
   The sign-in lives IN the hand-off sheet now (2026-08-27, user's call). It used
   to hand off to the broker picker's full-page screen, which unmounted the whole
   app to show two inputs; these fields are drawn from the firm's own
   `authFields`, so the shape is the firm's, not this sheet's.

   The sheet's box is the LIGHT surface (see .cn-sheet__box), so these controls
   are inked for light — the only place in the app that is. */
.cn-sheet__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.cn-sheet__fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cn-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.cn-field__label {
	font-size: 12.5px;
	font-weight: 600;
	color: #3d4147;
}

.cn-field__input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(12, 16, 20, 0.16);
	border-radius: 9px;
	background: #fff;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	color: #0c1014;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.cn-field__input:focus {
	outline: none;
	border-color: rgba(12, 16, 20, 0.42);
	box-shadow: 0 0 0 3px rgba(12, 16, 20, 0.08);
}

/* The checkbox row reads label-first, so the box sits inline with the text
   rather than above it like the other fields. */
.cn-field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}

.cn-field__check {
	margin: 2px 0 0;
	width: 16px;
	height: 16px;
	flex: none;
	accent-color: #0c1014;
}

.cn-field__hint {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: #6b7280;
}

/* Only shown when the firm rejects the login, and it carries the firm's own
   message — never a guess at what went wrong. */
.cn-sheet__err {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #b42318;
}

.cn-sheet__err[hidden] {
	display: none;
}

.cn-sheet__go[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* The foot centres its legal line; the FORM under it must not inherit that —
   centred field labels read as a poster, not a login. */
.cn-sheet__form {
	text-align: left;
}

/* The sheet grew a form, so it can now be taller than the viewport. Two things
   follow. It scrolls inside its own box (max-height above), and it has to clear
   the app dock: the dock is fixed ~72px off the bottom and would otherwise sit
   on top of the submit button — which is exactly the control the sheet exists
   to offer. The extra bottom padding on the grid keeps the box above it. */
.cn-sheet {
	padding: 24px 24px 104px;
}

.cn-sheet__box {
	max-height: calc(100dvh - 128px);
}

/* Tightened when the form moved in (2026-08-27). The sheet was laid out as a
   read-then-confirm card, and its breathing room was sized for that; with four
   inputs and a button added below the fold it overflowed by ~100px, so the
   submit — the whole point of the sheet — sat below the scroll line. Nothing is
   removed here, only the spacing between things. */
.cn-sheet__top {
	padding: 28px 34px 20px;
}

.cn-sheet__marks {
	margin-bottom: 16px;
}

.cn-sheet__list {
	margin-top: 18px;
	padding: 16px;
	gap: 14px;
}

.cn-sheet__foot {
	padding: 16px 34px 20px;
}

.cn-sheet__legal {
	margin-bottom: 12px;
}