/**
 * Myco panel — secondary chromes: wizard (dark topbar + stepper + body) used by
 * new-project / checkout / connect-domain / gallery pages, the auth split
 * layout (dark brand pane + light form pane), and the assistant route shell.
 * Tokens only.
 */

/* ---- Wizard chrome (new project / checkout / sub-pages) ---- */

.myco-wiz {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	flex: 1 1 auto;
}

.myco-wiz__top {
	background: var( --myco-surface-dark );
	color: var( --myco-cream );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 28px;
	height: 60px;
	position: sticky;
	top: 0;
	z-index: 20;
}

.myco-wiz__top .myco-brand {
	padding: 0;
}

.myco-wiz__top .myco-brand__name {
	color: var( --myco-cream );
}

.myco-wiz__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var( --myco-cream );
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.myco-wiz__exit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var( --myco-muted );
	font-size: 13px;
	font-weight: 600;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
}

.myco-wiz__exit:hover {
	color: var( --myco-cream );
}

.myco-wiz__body {
	flex: 1 1 auto;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 40px 32px 64px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.myco-wiz__body--wide {
	max-width: 1240px;
}

.myco-wiz__lead {
	font-size: 15px;
	color: var( --myco-text-2 );
	margin-top: 6px;
}

.myco-wiz__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 8px;
}

/* Stepper: done ✓ mint / active cream / upcoming outline. */
.myco-stepper {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var( --myco-muted );
	/* It is an <ol>: reset the list box so no markers leak into the topbar. */
	list-style: none;
	margin: 0;
	padding: 0;
}

.myco-stepper__step {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.myco-stepper__num {
	width: 22px;
	height: 22px;
	border-radius: var( --myco-radius-pill );
	border: 1px solid var( --myco-line-on-dark );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var( --myco-font-mono );
	font-size: 11px;
	color: var( --myco-muted );
	flex-shrink: 0;
}

.myco-stepper__step.is-active {
	color: var( --myco-cream );
	font-weight: 600;
}

.myco-stepper__step.is-active .myco-stepper__num {
	background: var( --myco-cream );
	border-color: var( --myco-cream );
	color: var( --myco-surface-dark );
}

.myco-stepper__step.is-done .myco-stepper__num {
	background: var( --myco-accent );
	border-color: var( --myco-accent );
	color: var( --myco-on-accent );
}

/* Both the number and the check are in the markup; the state class picks one
   (the wizard toggles `.is-done` client-side, so the server cannot choose). */
.myco-stepper__check,
.myco-stepper__step.is-done .myco-stepper__n {
	display: none;
}

.myco-stepper__step.is-done .myco-stepper__check {
	display: inline-flex;
}

.myco-stepper__line {
	width: 28px;
	height: 1px;
	background: var( --myco-line-on-dark );
}

.myco-stepper__step.is-done + .myco-stepper__line {
	background: var( --myco-accent );
}

/* ---- Auth split layout ---- */

.myco-auth {
	display: flex;
	min-height: 100vh;
	flex: 1 1 auto;
}

.myco-auth__brand {
	width: 270px;
	flex: 0 0 270px;
	background: var( --myco-surface-dark );
	color: var( --myco-cream );
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.myco-auth__brand .myco-brand {
	padding: 0;
}

.myco-auth__tagline {
	font-family: var( --myco-font-display );
	font-weight: var( --myco-display-weight );
	font-size: 22px;
	line-height: 1.3;
}

.myco-auth__tagline em {
	font-style: italic;
	font-weight: var( --myco-display-italic-weight );
}

.myco-auth__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 13px;
	color: var( --myco-muted );
}

.myco-auth__bullets li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.myco-auth__bullets .myco-icon {
	color: var( --myco-accent );
	flex-shrink: 0;
	margin-top: 2px;
}

.myco-auth__foot {
	margin-top: auto;
	font-family: var( --myco-font-mono );
	font-size: 11px;
	color: var( --myco-muted );
}

.myco-auth__pane {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	background: var( --myco-bg );
}

.myco-auth__card {
	width: 100%;
	max-width: 420px;
}

/* Single centred card (password reset). */
.myco-auth--single .myco-auth__pane {
	width: 100%;
}

/* ---- Assistant route: chat fills the shell ---- */
.myco-route-assistant .myco-shell {
	padding: 0;
}

.myco-route-assistant .jupiker-ai-wrap {
	flex: 1 1 auto;
	min-height: 0;
}

@media ( max-width: 900px ) {
	.myco-wiz__top {
		padding: 0 16px;
		height: 54px;
	}

	.myco-wiz__body {
		padding: 24px 16px 48px;
	}

	.myco-stepper__label {
		display: none;
	}

	.myco-stepper__line {
		width: 16px;
	}

	.myco-auth {
		flex-direction: column;
	}

	.myco-auth__brand {
		width: auto;
		flex: 0 0 auto;
		padding: 20px 18px;
		gap: 14px;
	}

	.myco-auth__bullets,
	.myco-auth__foot {
		display: none;
	}

	.myco-auth__pane {
		padding: 24px 16px 40px;
		align-items: flex-start;
	}
}