/**
 * Setup, Settings and About screens (Figma: Onboarding, Configure / Settings,
 * Configure / About). Values come only from tokens.css.
 */

/* ---------- Setup shell ---------- */

.ako-setup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ako-admin-space-2xl);
	padding: var(--ako-admin-space-3xl) var(--ako-admin-space-5xl) var(--ako-admin-space-6xl);
}

.ako-setup__brand {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-md);
	font: var(--ako-text-section-title);
	letter-spacing: var(--ako-text-section-title-tracking);
}

.ako-ml .ako-stepper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ako-admin-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ako-stepper__step {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-sm);
	margin: 0;
	padding: var(--ako-admin-space-xs) var(--ako-admin-space-md) var(--ako-admin-space-xs) var(--ako-admin-space-xs);
	border-radius: var(--ako-admin-radius-pill);
	color: var(--ako-admin-text-tertiary);
	font: var(--ako-text-body);
}

.ako-stepper__step + .ako-stepper__step::before {
	content: "";
	inline-size: var(--ako-admin-space-3xl);
	block-size: var(--ako-admin-border-width);
	margin-inline-end: var(--ako-admin-space-sm);
	background: var(--ako-admin-border-default);
}

.ako-stepper__step.is-done + .ako-stepper__step::before,
.ako-stepper__step.is-done + .ako-stepper__step.is-done::before {
	background: var(--ako-admin-border-accent);
}

.ako-stepper__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 22px;
	block-size: 22px;
	border-radius: var(--ako-admin-radius-pill);
	background: var(--ako-admin-bg-subtle);
	font: var(--ako-text-label);
}

.ako-stepper__step.is-current {
	background: var(--ako-admin-bg-surface);
	box-shadow: var(--ako-shadow-card);
	color: var(--ako-admin-text-primary);
	font: var(--ako-text-body-strong);
}

.ako-stepper__step.is-current .ako-stepper__marker,
.ako-stepper__step.is-done .ako-stepper__marker {
	background: var(--ako-admin-bg-brand);
	color: var(--ako-admin-text-on-accent);
}

.ako-stepper__step.is-done {
	color: var(--ako-admin-text-primary);
}

.ako-stepper__step.is-done .ako-icon {
	stroke-width: 2.5;
}

.ako-setup__card {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-xl);
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 760px;
	padding: var(--ako-admin-space-3xl) var(--ako-admin-space-5xl);
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
	border-radius: var(--ako-admin-radius-surface);
	background: var(--ako-admin-bg-surface);
	box-shadow: var(--ako-shadow-card);
}

.ako-setup__intro {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-xs);
}

.ako-ml .ako-setup__intro h1 {
	font: var(--ako-text-page-title);
	letter-spacing: var(--ako-text-page-title-tracking);
}

.ako-setup__intro h1:focus {
	outline: none;
}

.ako-setup__intro p,
.ako-setup__loading {
	color: var(--ako-admin-text-secondary);
}

.ako-setup__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ako-admin-space-md);
	padding-block-start: var(--ako-admin-space-xl);
	border-block-start: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
}

.ako-setup__footer-end {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-md);
}

.ako-setup__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ako-admin-space-sm);
	padding: var(--ako-admin-space-4xl) var(--ako-admin-space-2xl);
	border-radius: var(--ako-admin-radius-surface);
	background: var(--ako-admin-bg-canvas);
	text-align: center;
}

.ako-setup__empty .ako-empty__description {
	max-inline-size: 420px;
}

/* ---------- Step 1: languages ---------- */

/* One-click languages found on the site (installed packs, pages). */
.ako-ml .ako-setup-suggest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ako-admin-space-xs);
}

.ako-ml .ako-setup-suggest__label {
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-label);
}

.ako-ml .ako-setup-suggest__name {
	margin-inline-start: var(--ako-admin-space-2xs);
	color: var(--ako-admin-text-secondary);
}

.ako-ml .ako-setup-languages__list {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ako-setup-language {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-md);
	margin: 0;
	padding: var(--ako-admin-space-md) var(--ako-admin-space-lg);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-canvas);
}

.ako-setup-language__native {
	font: var(--ako-text-body-strong);
}

.ako-setup-language__meta {
	flex: 1;
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-help);
}

.ako-combobox {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-sm);
}

.ako-combobox__field {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-sm);
	color: var(--ako-admin-text-secondary);
}

.ako-combobox__field:focus-within {
	border-color: var(--ako-admin-border-accent);
	box-shadow: 0 0 0 var(--ako-admin-border-width) var(--ako-admin-border-accent);
}

.ako-ml .ako-combobox__field input {
	flex: 1;
	min-inline-size: 0;
	min-block-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--ako-admin-text-primary);
	font: var(--ako-text-body);
}

.ako-ml .ako-combobox__field input:focus {
	outline: none;
	box-shadow: none;
}

.ako-ml .ako-combobox__list {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-3xs);
	margin: 0;
	padding: var(--ako-admin-space-xs);
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-surface);
	box-shadow: var(--ako-shadow-menu);
	list-style: none;
}

.ako-combobox__option {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-sm);
	margin: 0;
	padding: var(--ako-admin-space-sm) var(--ako-admin-space-md);
	border-radius: var(--ako-admin-radius-tile);
	cursor: pointer;
}

.ako-combobox__option.is-active,
.ako-combobox__option:hover {
	background: var(--ako-admin-bg-subtle);
}

.ako-combobox__option[aria-disabled="true"] {
	cursor: default;
}

.ako-combobox__native {
	font: var(--ako-text-body-strong);
}

.ako-combobox__meta {
	flex: 1;
	color: var(--ako-admin-text-tertiary);
	font: var(--ako-text-help);
}

.ako-combobox__end {
	display: inline-flex;
	align-items: center;
	gap: var(--ako-admin-space-2xs);
	color: var(--ako-admin-text-tertiary);
	font: var(--ako-text-help);
}

.ako-combobox__option[aria-disabled="true"] .ako-combobox__end {
	color: var(--ako-admin-text-success);
}

.ako-combobox__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ako-admin-space-xs);
	padding: var(--ako-admin-space-lg);
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
	border-radius: var(--ako-admin-radius-control);
	box-shadow: var(--ako-shadow-menu);
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-help);
}

.ako-combobox__empty strong {
	color: var(--ako-admin-text-primary);
	font: var(--ako-text-body-strong);
}

/* ---------- Step 2: import + pairs ---------- */

.ako-import-progress {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-sm);
	padding: var(--ako-admin-space-md) var(--ako-admin-space-lg);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-canvas);
}

.ako-import-progress__head {
	display: flex;
	justify-content: space-between;
	gap: var(--ako-admin-space-md);
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-help);
}

.ako-import-progress__head strong {
	color: var(--ako-admin-text-primary);
	font: var(--ako-text-body-strong);
}

.ako-ml .ako-import-progress p {
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-help);
}

.ako-pairs {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-md);
}

.ako-pairs.is-disabled .ako-pairs__list {
	opacity: 0.55;
}

.ako-pairs__head {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-sm);
}

.ako-ml .ako-pairs__title {
	font: var(--ako-text-section-title);
	letter-spacing: var(--ako-text-section-title-tracking);
}

.ako-pairs__all {
	margin-inline-start: auto;
}

.ako-ml .ako-pairs__list {
	margin: 0;
	padding: 0;
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
	border-radius: var(--ako-admin-radius-control);
	list-style: none;
}

.ako-pair {
	display: grid;
	grid-template-columns: var(--ako-checkbox-size) minmax(0, 1fr) auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--ako-admin-space-lg);
	margin: 0;
	padding: var(--ako-admin-space-md) var(--ako-admin-space-lg);
}

.ako-pair + .ako-pair {
	border-block-start: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
}

.ako-pair__page {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-sm);
	min-inline-size: 0;
}

.ako-pair__copy {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

/* dir="auto" keeps titles readable; alignment follows the admin. */
.ako-pair__title {
	overflow: hidden;
	font: var(--ako-text-body-strong);
	text-align: match-parent;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ako-pair__path {
	overflow: hidden;
	color: var(--ako-admin-text-tertiary);
	font: var(--ako-text-help);
	text-align: match-parent;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ako-pair__arrows {
	color: var(--ako-admin-text-tertiary);
}

.ako-pair > .ako-badge {
	justify-self: end;
}

.ako-ml .ako-review-list {
	display: flex;
	flex-direction: column;
	max-block-size: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ako-review-list li {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-3xs);
	margin: 0;
	padding-block: var(--ako-admin-space-sm);
	border-block-start: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
}

.ako-review-list__pages {
	font: var(--ako-text-body-strong);
}

.ako-review-list__reason {
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-help);
}

.ako-dialog.is-wide {
	inline-size: min(760px, calc(100vw - var(--ako-admin-space-4xl)));
	max-inline-size: none;
}

.ako-dialog__stack {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-md);
}

/* ---------- Step 3: switcher ---------- */

.ako-setup .ako-tiles {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ako-ml .ako-placements {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-sm);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ako-placements legend {
	margin-block-end: var(--ako-admin-space-sm);
	padding: 0;
}

.ako-placement {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--ako-admin-space-md);
	align-items: center;
	padding: var(--ako-admin-space-md) var(--ako-admin-space-lg);
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-surface);
}

.ako-placement:hover {
	border-color: var(--ako-admin-border-default);
}

.ako-placement.is-selected {
	border-color: var(--ako-admin-border-accent);
	background: var(--ako-admin-bg-accent-subtle);
}

.ako-placement.is-disabled {
	border-color: transparent;
	background: var(--ako-admin-bg-subtle);
	color: var(--ako-admin-text-tertiary);
}

.ako-ml .ako-placement input[type="radio"] {
	grid-row: span 2;
	margin: 0;
	accent-color: var(--ako-admin-bg-accent);
}

/* The whole card picks the option. */
.ako-placement__title::after {
	content: "";
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.ako-placement.is-disabled .ako-placement__title::after {
	cursor: default;
}

.ako-placement__title {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-md);
	font: var(--ako-text-body-strong);
}

.ako-placement__tag {
	color: var(--ako-admin-text-success);
	font: var(--ako-text-label);
}

.ako-placement__help {
	grid-column: 2;
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-help);
}

.ako-placement.is-disabled .ako-placement__help {
	color: var(--ako-admin-text-tertiary);
}

/* ---------- Step 4: done ---------- */

.ako-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ako-admin-space-md);
}

.ako-stat {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-2xs);
	padding: var(--ako-admin-space-lg);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-subtle);
}

.ako-stat__value {
	font: var(--ako-text-metric);
	letter-spacing: var(--ako-text-metric-tracking);
}

.ako-stat__label {
	font: var(--ako-text-help);
}

.ako-stat.is-success {
	background: var(--ako-admin-bg-success-subtle);
	color: var(--ako-admin-text-success);
}

.ako-stat.is-warning {
	background: var(--ako-admin-bg-warning-subtle);
	color: var(--ako-admin-text-warning);
}

.ako-stat.is-neutral .ako-stat__label {
	color: var(--ako-admin-text-secondary);
}

.ako-next-steps .ako-check {
	padding: var(--ako-admin-space-md) var(--ako-admin-space-lg);
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
	border-radius: var(--ako-admin-radius-control);
}

.ako-next-steps .ako-check + .ako-check {
	margin-block-start: var(--ako-admin-space-sm);
}

.ako-check__tile.is-neutral {
	background: var(--ako-admin-bg-subtle);
	color: var(--ako-admin-text-primary);
}

/* ---------- Translations first run ---------- */

.ako-first-run .ako-empty {
	padding-block: var(--ako-admin-space-3xl);
}

/* ---------- Settings + About ---------- */

.ako-designer.is-settings {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ako-designer.is-about {
	grid-template-columns: minmax(0, 735fr) minmax(0, 440fr);
	padding-block-start: 0;
}

.ako-designer.is-settings .ako-card__head,
.ako-designer.is-about .ako-card__head {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ako-admin-space-3xs);
}

.ako-ml .ako-type-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ako-type {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-lg);
	margin: 0;
	padding-block: var(--ako-admin-space-md);
	border-block-start: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
}

.ako-type__copy {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-3xs);
}

.ako-type__label {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-sm);
	font: var(--ako-text-body-strong);
}

.ako-type__help {
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-help);
}

.ako-data-actions {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-md);
	padding-block-start: var(--ako-admin-space-lg);
	border-block-start: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
}

.ako-product__head {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-lg);
}

.ako-product__title {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-md);
}

.ako-ml .ako-product__title h1 {
	font: var(--ako-text-page-title);
	letter-spacing: var(--ako-text-page-title-tracking);
}

.ako-product__meta {
	color: var(--ako-admin-text-secondary);
}

.ako-product__links {
	display: flex;
	gap: var(--ako-admin-space-sm);
}

.ako-release {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-sm);
	padding-block-start: var(--ako-admin-space-md);
	border-block-start: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
}

.ako-ml .ako-release__head {
	display: flex;
	align-items: baseline;
	gap: var(--ako-admin-space-sm);
	margin: 0;
	font: var(--ako-text-body-strong);
}

.ako-release__date {
	color: var(--ako-admin-text-tertiary);
	font: var(--ako-text-help);
}

.ako-ml .ako-release__list {
	margin: 0;
	padding: 0;
	color: var(--ako-admin-text-secondary);
	list-style: none;
}

.ako-release__list li {
	margin: 0 0 var(--ako-admin-space-xs);
}

.ako-release__list li::before {
	content: "·";
	margin-inline-end: var(--ako-admin-space-sm);
}

.ako-ml .ako-status {
	margin: 0;
}

.ako-status__row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	align-items: center;
	gap: var(--ako-admin-space-md);
	padding-block: var(--ako-admin-space-md);
	border-block-start: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
}

.ako-ml .ako-status dt {
	color: var(--ako-admin-text-secondary);
}

.ako-ml .ako-status dd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ako-admin-space-sm);
	margin: 0;
	font: var(--ako-text-body-strong);
}

.ako-status dd .ako-icon {
	flex: none;
}

.ako-icon.is-warning {
	color: var(--ako-admin-icon-warning);
}

@media (max-width: 960px) {

	.ako-designer.is-settings,
	.ako-designer.is-about {
		grid-template-columns: minmax(0, 1fr);
	}

	.ako-setup .ako-tiles,
	.ako-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ako-pair {
		grid-template-columns: var(--ako-checkbox-size) minmax(0, 1fr);
	}

	.ako-pair > :nth-child(n + 3) {
		grid-column: 2;
	}

	.ako-pair__arrows {
		display: none;
	}
}