/* The design-system tokens (@controlplay/design-system js/tokens.js TOKENS_CSS), then src/login/gate.css (#651). */
:root{--side-panel-preview-height:305px;--header-height:60px;--now-playing-bar-height:62px;--sat:env(safe-area-inset-top, 0);--sar:env(safe-area-inset-right, 0);--sab:env(safe-area-inset-bottom, 0);--sal:env(safe-area-inset-left, 0);--green:#3d6e2c;--green-semi-opaque:rgb(83 175 46 / 50%);--green-knockout:#345724;--yellow:#b7bf00;--yellow-semi-opaque:rgb(183 191 0 / 50%);--dark-gray:#242424;--dark-gray-semi-opaque:#242424b3;--dark-gray-deep:#191919;--gray:#5a5a5a;--gray-semi-opaque:rgb(255 255 255 / 0.2);--field-fill-opaque:#343e44;--light-gray:#999999;--white:#ffffff;--black:#000000;--black-semi-opaque-25:rgb(0 0 0 / 0.25);--black-semi-opaque-50:rgb(0 0 0 / 50%);--black-semi-opaque-40:rgb(0 0 0 / 0.4);--white-semi-opaque:rgb(255 255 255 / 0.75);--white-semi-opaque-80:rgb(255 255 255 / 0.8);--white-semi-opaque-60:rgb(255 255 255 / 0.6);--white-semi-opaque-50:rgb(255 255 255 / 0.5);--white-semi-opaque-40:rgba(255, 255, 255, 0.4);--white-semi-opaque-25:rgb(255 255 255 / 0.25);--white-semi-opaque-20:rgb(255 255 255 / 0.2);--white-semi-opaque-10:rgb(255 255 255 / 0.1);--report-card-fill:rgb(255 255 255 / 0.07);--white-semi-opaque-5:#ffffff0d;--blue:#033C5A;--blue-semi-opaque-40:#033c5a66;--light-blue:#006293;--light-blue-highlight:rgb(91, 178, 221);--light-blue-semi-opaque:rgb(0 98 147 / 50%);--red:#da0000;--red-semi-opaque:rgb(218 0 0 / 50%);--notification:#ff0000;--alert-success-bg:#2a5f24;--alert-dark-bg:#121212;--alert-warning-bg:#838800;--alert-danger-bg:#780000;--beta-tag:#00b9bf;--error-text-on-dark:#ff9a9a;--locked-feature:#ffd700;--api-post:#00b648;--api-put:#ff8d4d;--api-patch:#ffc90d;--purple:#5d3b92;--purple-semi-opaque:#9f61fff0;--btn-on:var(--green-semi-opaque);--btn-active:var(--gray);--btn-hover:var(--gray);--dark-bg:#020f16;--space-2xs:2px;--space-xs:5px;--space-sm:10px;--space-md:15px;--space-lg:20px;--space-xl:30px;--space-2xl:50px;--space-3xl:100px;--radius-sm:5px;--radius-md:10px;--radius-ml:15px;--radius-lg:20px;--radius-xl:25px;--radius-2xl:30px;--radius-round:50%;--shadow-artwork-sm:0 5px 5px rgb(0 0 0 / 25%);--shadow-artwork-lg:0 20px 25px rgb(0 0 0 / 25%);--scrim-alert-alpha:0.7;--text-2xs:0.6em;--text-xs:0.7em;--text-caption:0.8em;--text-sm:0.85em;--text-base:1em;--text-title:1.1em;--text-md:1.2em;--text-lg:1.5em;--text-xl:2em;--text-2xl:2.2em;--weight-light:200;--weight-regular:400;--weight-semibold:600;--weight-bold:700;--leading-snug:1.3em;--duration-instant:0.1s;--duration-fast:0.15s;--duration-base:0.2s;--duration-slow:0.3s;--duration-slower:0.5s;--duration-xslow:1s;--duration-loop:2s;--ease-out:cubic-bezier(.2,0,0,1);--transition-press:opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out);--press-scale-icon:0.75;--press-scale:0.92;--press-scale-surface:0.95;--z-alerts:200;}
/*
 * The app host's sign-in pages (app.controlplay.com/signin/ and /magic; #1280, they were /login/ and /login/magic), on top of css/styles.css -- the webplayer
 * repo's copy, which the legacy hosts keep unchanged. Linked by scripts/build-public-pages.mjs right after styles.css.
 *
 * The product owner's design review (2026-10-17): the legacy look stays everywhere. This file adds only what changes
 * nothing visible on the existing steps -- visible keyboard focus (styles.css removes the browser's ring) -- and the two
 * new pieces: the connector code step's six cells (src/login/otp-input.ts) and the already-signed-in redirect, which shows
 * like the link page (the logo, the title and the progress line).
 * #1215 passkeys (src/login/passkey.ts; the approved mockups, 2026-10-19): the key button, the "or" divider, the address
 * line of "Confirm it's you with your passkey", the text links under a button, and the offer's paragraph.
 */

input:focus-visible,
button:focus-visible,
a:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}

/* The code: six cells, one digit each, in the page's own field style (styles.css input[type="text"]). */
.otp {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.otp input.otp-cell[type="text"] {
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 20pt;
	font-variant-numeric: tabular-nums;
	caret-color: var(--white);
}

.otp .otp-cell:focus {
	outline: 2px solid var(--white);
	outline-offset: 1px;
}

.gate-link {
	margin-top: 15px;
	text-align: center;
}

/* #1215: the passkey button, in the page's own button look (the approved mockups). */
.passkey-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 10px;
	margin-top: 4px;
	font-family: 'BariolWebFont';
	font-weight: bold;
	font-size: 13pt;
	color: var(--white);
	background: var(--dark-gray-deep);
	border: 1px solid var(--gray);
	border-radius: 5px;
	cursor: pointer;
}

.passkey-btn:hover {
	background: var(--gray);
}

.passkey-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.passkey-btn svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0 6px;
	color: var(--light-gray);
	font-size: 11pt;
}

.or::before,
.or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--gray-semi-opaque);
}

.text-link {
	display: block;
	margin-top: 14px;
	text-align: center;
	font-size: 11pt;
	color: var(--light-gray);
	text-decoration: underline;
	cursor: pointer;
}

.who {
	font-size: 13pt;
	margin: -6px 0 14px;
	color: var(--white);
	word-break: break-all;
}

.who span,
.who a.links {
	color: var(--light-gray);
}

.who .who-email {
	color: var(--white);
}

.passkey-offer-text {
	font-size: 12pt;
	line-height: 1.4;
	margin: 0 0 16px;
	color: var(--white);
}

/* The App Store badge, shown by the app host's login.js by this class (build-public-pages.mjs APP_STORE_BADGE_LINE), not jQuery's inline display (#651). */
.app-store-btns.is-shown {
	display: block;
}

/* The already-signed-in redirect and a sign-in in flight (gate-ui.ts busy): no e-mail box or passkey confirm box (#1215), no Continue, no help or badge -- like the link page. */
body.gate-busy .gate-login-form,
body.gate-busy .passkey-confirm,
body.gate-busy .forgot,
body.gate-busy .app-store-btns {
	display: none;
}

/* tokens.json's gate-narrow breakpoint (#651); @media cannot read var(), so the query keeps its literal */
@media (max-width: 400px) {
	.otp {
		gap: 6px;
	}

	.otp input.otp-cell[type="text"] {
		height: 46px;
		font-size: 17pt;
	}
}

/*
 * #1352: a short screen (a phone in landscape, the iPhone Duo's outer display) is shorter than the card. styles.css
 * fixes html/body at 100vh and .main inherits it, so the card spilled past the top and the footer sat on top of
 * Continue and the help text. Let the page grow with its content instead; tall screens still centre the card.
 */
html,
body {
	height: auto;
	min-height: 100vh;
	min-height: 100dvh;
}

.main {
	height: auto;
	min-height: 100vh;
	min-height: 100dvh;
	align-items: safe center;
}

/*
 * #1352: the iPhone Duo's outer display puts the iOS 27 status bar in a pill down the top-right edge, which the
 * sign-in card ran under. styles.css pads the body for the top and bottom insets only; add the sides.
 */
body {
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}