/**
 * Ako admin screens. Values come only from tokens.css (Figma variables).
 */
@import "../components/components.css";
@import "./setup.css";

/* ---------- WordPress page integration (Ako screens only) ---------- */

body.akoml-screen #wpcontent {
	padding-inline-start: 0;
}

body.akoml-screen #wpbody-content {
	padding-block-end: 0;
}

body.akoml-screen,
body.akoml-screen #wpwrap {
	background: var(--ako-admin-bg-canvas);
}

.akoml-notices {
	margin: 0 var(--ako-admin-space-5xl);
}

.akoml-notices:empty {
	display: none;
}

/* ---------- Ako / Header ---------- */

.ako-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ako-admin-space-md) var(--ako-admin-space-3xl);
	background: var(--ako-admin-bg-surface);
	border-block-end: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
}

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

.ako-header__name {
	align-items: baseline;
	gap: var(--ako-admin-space-xs);
}

.ako-logo__tile {
	fill: var(--ako-admin-bg-brand);
}

.ako-logo__mark {
	fill: var(--ako-admin-icon-on-brand);
}

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

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

/* ---------- Page ---------- */

.ako-body {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-2xl);
	padding: var(--ako-admin-space-3xl) var(--ako-admin-space-5xl);
}

.ako-page-title {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ako-admin-space-lg);
}

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

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

.ako-page-title p {
	color: var(--ako-admin-text-secondary);
}

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

.ako-card {
	background: var(--ako-admin-bg-surface);
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
	border-radius: var(--ako-admin-radius-surface);
	box-shadow: var(--ako-shadow-card);
	padding: var(--ako-admin-space-xl);
}

/* ---------- Coverage ---------- */

.ako-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--ako-admin-space-lg);
}

.ako-coverage-card {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-md);
	padding: var(--ako-admin-space-lg) var(--ako-admin-space-xl);
	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);
}

.ako-coverage-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ako-admin-space-sm);
}

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

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

/* ---------- Translations table ---------- */

.ako-table {
	position: relative;
	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-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ako-admin-space-md);
	padding: var(--ako-admin-space-md) var(--ako-admin-space-lg);
}

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

.ako-toolbar__search {
	inline-size: 260px;
}

.ako-bulkbar {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-md);
	min-block-size: 66px;
	padding: var(--ako-admin-space-sm) var(--ako-admin-space-lg);
	border-start-start-radius: var(--ako-admin-radius-surface);
	border-start-end-radius: var(--ako-admin-radius-surface);
	background: var(--ako-admin-bg-brand);
	color: var(--ako-admin-text-on-accent);
}

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

.ako-bulkbar__spacer {
	flex: 1;
}

.ako-bulkbar__clear {
	color: var(--ako-admin-text-on-accent);
}

.ako-table__scroll {
	overflow-x: auto;
}

.ako-row {
	display: grid;
	grid-template-columns: var(--ako-table-columns);
	align-items: center;
	gap: var(--ako-admin-space-lg);
	min-inline-size: max-content;
	padding: var(--ako-admin-space-md) var(--ako-admin-space-xl);
	border-block-start: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
	background: var(--ako-admin-bg-surface);
}

.ako-row > [role="cell"],
.ako-row > [role="columnheader"] {
	display: flex;
	align-items: center;
	min-inline-size: 0;
}

.ako-row.is-header {
	padding-block: var(--ako-admin-space-sm);
	background: var(--ako-admin-bg-canvas);
}

.ako-row:not(.is-header, .is-skeleton, .is-empty):hover {
	background: var(--ako-admin-bg-canvas);
}

.ako-row.is-selected,
.ako-row.is-selected:hover {
	background: var(--ako-admin-bg-accent-subtle);
}

.ako-row.is-empty {
	display: block;
	padding: var(--ako-admin-space-xl);
}

.ako-row.is-empty > [role="cell"] {
	display: block;
}

.ako-ml .ako-row__page {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ako-admin-space-3xs);
}

.ako-row__title {
	display: inline-flex;
	align-items: center;
	gap: var(--ako-admin-space-sm);
	max-inline-size: 100%;
	font: var(--ako-text-body-strong);
}

.ako-row__title > span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ako-row__slug {
	max-inline-size: 100%;
	overflow: hidden;
	color: var(--ako-admin-text-tertiary);
	font: var(--ako-text-help);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ako-row__date {
	color: var(--ako-admin-text-secondary);
	white-space: nowrap;
}

.ako-row__actions {
	gap: var(--ako-admin-space-2xs);
	justify-content: flex-end;
	opacity: 0;
}

.ako-row:hover .ako-row__actions,
.ako-row:focus-within .ako-row__actions,
.ako-row.is-selected .ako-row__actions {
	opacity: 1;
}

@media (hover: none) {

	.ako-row__actions {
		opacity: 1;
	}
}

/* Translation cell */

.ako-cell {
	display: inline-flex;
	align-items: center;
	gap: var(--ako-admin-space-sm);
	inline-size: 100%;
	min-block-size: var(--ako-control-height);
	padding: 0 var(--ako-admin-space-md);
	border-radius: var(--ako-admin-radius-control);
}

.ako-cell__title {
	flex: 0 1 auto;
	min-inline-size: 0;
	overflow: hidden;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.ako-cell__title:hover {
	text-decoration: underline;
}

.ako-cell__check {
	flex: none;
	color: var(--ako-admin-icon-success);
}

.ako-cell__dot {
	flex: none;
	inline-size: var(--ako-admin-space-sm);
	block-size: var(--ako-admin-space-sm);
	border-radius: var(--ako-admin-radius-pill);
	background: var(--ako-admin-text-warning);
}

.ako-cell__badge {
	flex: none;
	margin-inline-start: auto;
	padding: 0 var(--ako-admin-space-xs);
	border-radius: var(--ako-admin-radius-pill);
	background: var(--ako-admin-bg-warning-subtle);
	color: var(--ako-admin-text-warning);
	font: var(--ako-text-label);
}

.ako-cell.is-working {
	color: var(--ako-admin-text-info);
	font: var(--ako-text-label);
}

.ako-cell.is-working .ako-cell__dot {
	background: var(--ako-admin-icon-info);
}

.ako-cell.is-empty {
	color: var(--ako-admin-text-tertiary);
}

button.ako-cell.is-missing {
	margin: 0;
	border: var(--ako-admin-border-width) dashed var(--ako-admin-border-default);
	background: transparent;
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-label);
	cursor: pointer;
}

button.ako-cell.is-missing:hover,
button.ako-cell.is-missing[aria-expanded="true"] {
	border-color: var(--ako-admin-border-accent);
	background: var(--ako-admin-bg-accent-subtle);
	color: var(--ako-admin-text-accent);
}

.ako-row .ako-menu-wrap {
	display: flex;
	inline-size: 100%;
}

.ako-row__actions .ako-menu-wrap {
	inline-size: auto;
}

.ako-link-search {
	position: relative;
	inline-size: 100%;
}

.ako-link-search__list {
	min-inline-size: 260px;
	max-block-size: 280px;
	overflow-y: auto;
}

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

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

/* ---------- Languages ---------- */

.ako-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--ako-admin-space-2xl);
}

.ako-columns.has-panel {
	grid-template-columns: minmax(0, 1fr) var(--ako-panel-width);
}

.ako-language-list {
	overflow: hidden;
	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-ml .ako-language-list__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ako-language-row {
	display: grid;
	grid-template-columns: auto minmax(160px, 240px) minmax(100px, 160px) 80px 80px 1fr;
	align-items: center;
	gap: var(--ako-admin-space-lg);
	margin: 0;
	padding: var(--ako-admin-space-md) var(--ako-admin-space-xl);
	border-block-end: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
	background: var(--ako-admin-bg-surface);
}

.ako-language-row:hover {
	background: var(--ako-admin-bg-canvas);
}

.ako-language-row.is-selected {
	background: var(--ako-admin-bg-accent-subtle);
}

.ako-language-row.is-dragging {
	position: relative;
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-accent);
	border-radius: var(--ako-admin-radius-control);
	box-shadow: var(--ako-shadow-floating);
}

.ako-language-row > .ako-button {
	justify-self: end;
}

.ako-language-row__handle {
	display: inline-flex;
	margin: 0;
	padding: var(--ako-admin-space-2xs);
	border: 0;
	border-radius: var(--ako-admin-radius-tile);
	background: none;
	color: var(--ako-admin-text-tertiary);
	cursor: grab;
}

.ako-language-row__handle:hover {
	background: var(--ako-admin-bg-subtle);
	color: var(--ako-admin-text-primary);
}

.ako-ml .ako-language-row__locale {
	margin: 0;
	padding: 0;
	background: none;
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-code);
	direction: ltr;
}

.ako-language-row .ako-language-tag .ako-badge {
	margin-inline-start: var(--ako-admin-space-2xs);
}

.ako-language-row.is-skeleton {
	padding-block: var(--ako-admin-space-xl);
}

.ako-ml .ako-language-list__note {
	padding: var(--ako-admin-space-md) var(--ako-admin-space-xl);
	background: var(--ako-admin-bg-canvas);
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-help);
}

.ako-panel {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-xl);
	padding: var(--ako-admin-space-2xl);
	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-menu);
}

.ako-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ako-admin-space-md);
}

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

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

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

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

.ako-setting {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ako-admin-space-lg);
}

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

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

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

/* ---------- Narrow screens ---------- */

@media (max-width: 1100px) {

	.ako-columns.has-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.ako-language-row {
		grid-template-columns: auto minmax(140px, 1fr) auto auto;
	}

	.ako-language-row__locale,
	.ako-language-row__count {
		display: none !important;
	}
}

@media (max-width: 782px) {

	.ako-body {
		padding: var(--ako-admin-space-xl) var(--ako-admin-space-lg);
	}

	.ako-header {
		padding-inline: var(--ako-admin-space-lg);
	}

	.ako-page-title {
		flex-direction: column;
		align-items: stretch;
	}

	.ako-toolbar__end {
		flex-wrap: wrap;
		inline-size: 100%;
	}

	.ako-toolbar__search {
		inline-size: 100%;
	}
}

/* ---------- Switcher designer ---------- */

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

.ako-editing .ako-input.is-trigger {
	min-inline-size: 180px;
	color: var(--ako-admin-text-primary);
}

.ako-designer {
	display: grid;
	grid-template-columns: minmax(0, 432fr) minmax(0, 545fr);
	align-items: start;
	gap: var(--ako-admin-space-2xl);
	padding-block-end: var(--ako-admin-space-6xl);
}

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

.ako-designer .ako-card {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-lg);
}

.ako-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ako-admin-space-md);
}

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

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

.ako-ml .ako-note {
	padding: var(--ako-admin-space-md);
	border-radius: var(--ako-admin-radius-control);
	font: var(--ako-text-help);
}

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

/* Setting row (Figma: Settings patterns / Setting row) */

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

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

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

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

.ako-setting-row__control {
	display: flex;
	flex: none;
	justify-content: flex-end;
	inline-size: 200px;
}

.ako-setting-row__control .ako-toggle {
	margin-inline-start: auto;
}

/* Preset tiles (Figma: Onboarding patterns / Preset tile) */

.ako-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: var(--ako-admin-space-md);
}

.ako-tile {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-sm);
	margin: 0;
	padding: var(--ako-admin-space-md);
	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);
	color: var(--ako-admin-text-primary);
	font: var(--ako-text-body);
	text-align: start;
	cursor: pointer;
}

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

.ako-tile.is-selected {
	border: var(--ako-admin-border-width-strong) solid var(--ako-admin-border-accent);
	background: var(--ako-admin-bg-accent-subtle);
	font: var(--ako-text-body-strong);
}

.ako-tile__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	block-size: 64px;
	border-radius: var(--ako-admin-radius-tile);
	background: var(--ako-admin-bg-canvas);
	pointer-events: none;
}

.ako-tile__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ako-tile__label .ako-icon {
	color: var(--ako-admin-icon-success);
}

/* Live preview */

.ako-preview-card__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ako-admin-space-md);
}

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

.ako-preview-card__dot {
	inline-size: var(--ako-admin-space-sm);
	block-size: var(--ako-admin-space-sm);
	border-radius: var(--ako-admin-radius-pill);
	background: var(--ako-admin-icon-success);
}

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

.ako-preview {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 200px;
	padding: var(--ako-admin-space-3xl) var(--ako-admin-space-lg);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-subtle);
}

.ako-preview__site {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ako-admin-space-lg);
	inline-size: 100%;
	padding: var(--ako-admin-space-md) var(--ako-admin-space-lg);
	border: var(--ako-admin-border-width) solid var(--ako-mock-site-border);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-mock-site-bg);
	box-shadow: var(--ako-shadow-floating);
	color: var(--ako-mock-site-text);
}

.ako-preview.is-mobile .ako-preview__site {
	max-inline-size: 300px;
}

.ako-preview__brand {
	font: var(--ako-text-section-title);
}

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

.ako-preview__link {
	inline-size: 44px;
	block-size: var(--ako-admin-space-sm);
	border-radius: var(--ako-admin-radius-pill);
	background: var(--ako-mock-site-border);
}

.ako-preview__floating {
	position: absolute;
	inset-block-end: var(--ako-admin-space-lg);
	inset-inline-end: var(--ako-admin-space-lg);
}

.ako-preview .ako-switcher--floating,
.ako-tile__thumb .ako-switcher--floating {
	position: relative;
	inset: auto;
}

.ako-preview .is-preview-icon-only .ako-switcher__code {
	display: none;
}

.ako-preview.is-dark .ako-preview__site {
	border-color: transparent;
	background: var(--ako-mock-site-dark-bg);
	color: var(--ako-mock-site-dark-text);
}

.ako-preview.is-dark .ako-preview__link {
	background: var(--ako-mock-site-dark-text-muted);
}

/* Dark values of the Figma Switcher collection, as a theme would set them. */
.ako-preview.is-dark .ako-switcher {
	--ako-switcher-bg: #181815;
	--ako-switcher-bg-hover: #2c2c28;
	--ako-switcher-surface: #2c2c28;
	--ako-switcher-accent: #fff;
	--ako-switcher-on-accent: #181815;
	--ako-switcher-fg: #f0f0ec;
	--ako-switcher-fg-muted: #a5a5a1;
	--ako-switcher-fg-disabled: #585854;
	--ako-switcher-border: #41413e;
	--ako-switcher-focus-ring: #91ceab;
}

/* Color input (Figma: Settings patterns / Color input) */

.ako-color {
	display: inline-flex;
	align-items: center;
	gap: var(--ako-admin-space-sm);
	inline-size: 100%;
	min-block-size: var(--ako-control-height);
	padding: 0 var(--ako-admin-space-sm);
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-default);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-surface);
}

.ako-color: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-color.is-invalid {
	border-color: var(--ako-admin-border-danger);
}

.ako-color__swatch {
	position: relative;
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-default);
	border-radius: var(--ako-admin-radius-tile);
	cursor: pointer;
}

.ako-ml .ako-color__swatch input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	opacity: 0;
	cursor: pointer;
}

.ako-ml .ako-color__hex {
	flex: 1;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font: var(--ako-text-code);
	direction: ltr;
}

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

/* Code + copy */

.ako-code {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ako-admin-space-md);
	padding: var(--ako-admin-space-sm) var(--ako-admin-space-sm) var(--ako-admin-space-sm) var(--ako-admin-space-md);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-subtle);
}

.ako-ml .ako-code code {
	padding: 0;
	overflow-x: auto;
	background: none;
	font: var(--ako-text-code);
	white-space: nowrap;
}

/* Save bar (Figma: Settings patterns / Save bar) */

.ako-savebar {
	position: fixed;
	z-index: 100;
	inset-block-end: var(--ako-admin-space-2xl);
	inset-inline-start: 50%;
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-md);
	inline-size: min(720px, calc(100% - 2 * var(--ako-admin-space-2xl)));
	padding: var(--ako-admin-space-md) var(--ako-admin-space-xl);
	border-radius: var(--ako-admin-radius-surface);
	background: var(--ako-admin-bg-brand);
	box-shadow: var(--ako-shadow-floating);
	color: var(--ako-admin-text-on-accent);
	transform: translateX(-50%);
}

[dir="rtl"] .ako-savebar {
	transform: translateX(50%);
}

.ako-savebar__message {
	flex: 1;
	font: var(--ako-text-body-strong);
}

@media (max-width: 1100px) {

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

/* ---------- SEO ---------- */

.ako-cell__warn {
	flex: none;
	color: var(--ako-admin-icon-warning);
}

.ako-health-card {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-md);
	padding: var(--ako-admin-space-lg) var(--ako-admin-space-xl);
	border-radius: var(--ako-admin-radius-surface);
	background: var(--ako-admin-bg-brand);
	color: var(--ako-admin-text-on-accent);
}

.ako-health-card__top,
.ako-health-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ako-admin-space-sm);
}

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

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

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

.ako-ml .ako-health-card__foot a {
	display: inline-flex;
	align-items: center;
	gap: var(--ako-admin-space-2xs);
	color: var(--ako-admin-text-on-accent);
	font: var(--ako-text-label);
	text-decoration: none;
}

.ako-ml .ako-health-card__foot a:hover {
	text-decoration: underline;
}

.ako-progress.is-on-brand {
	background: color-mix(in srgb, var(--ako-admin-text-on-accent) 20%, transparent);
}

.ako-progress.is-on-brand .ako-progress__value {
	background: var(--ako-admin-text-on-accent);
}

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

.ako-ml .ako-card__text.is-small {
	font: var(--ako-text-help);
}

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

.ako-plugins li {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: center;
	gap: var(--ako-admin-space-md);
	margin: 0;
	padding-block: var(--ako-admin-space-sm);
	border-block-start: var(--ako-admin-border-width) solid var(--ako-admin-border-subtle);
}

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

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

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

.ako-icon.is-muted {
	color: var(--ako-admin-text-tertiary);
}

.ako-callout {
	display: flex;
	align-items: flex-start;
	gap: var(--ako-admin-space-md);
	padding: var(--ako-admin-space-md);
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-info);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-info-subtle);
}

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

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

.ako-callout.is-danger {
	border-color: var(--ako-admin-border-danger);
	background: var(--ako-admin-bg-danger-subtle);
}

.ako-callout.is-neutral {
	border-color: transparent;
	background: var(--ako-admin-bg-subtle);
}

.ako-callout__copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--ako-admin-space-3xs);
	min-inline-size: 0;
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-help);
}

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

.ako-callout__action {
	flex: none;
	align-self: center;
}

.ako-callout__tile {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-surface);
	color: var(--ako-admin-icon-info);
}

.ako-callout.is-success .ako-callout__tile {
	color: var(--ako-admin-icon-success);
}

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

.ako-callout.is-danger .ako-callout__tile {
	color: var(--ako-admin-icon-danger);
}

/* What search engines see (Figma: Settings patterns / hreflang output) */

.ako-source {
	overflow: hidden;
	border-radius: var(--ako-admin-radius-surface);
	background: var(--ako-admin-code-bg);
	color: var(--ako-admin-code-text);
}

.ako-source__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ako-admin-space-md);
	padding: var(--ako-admin-space-md) var(--ako-admin-space-lg);
	border-block-end: var(--ako-admin-border-width) solid var(--ako-admin-code-border);
}

.ako-source__title {
	display: inline-flex;
	align-items: baseline;
	gap: var(--ako-admin-space-sm);
	color: var(--ako-admin-code-text-strong);
	font: var(--ako-text-body-strong);
}

.ako-source__path {
	color: var(--ako-admin-code-muted);
	font: var(--ako-text-code);
}

.ako-source__picker {
	display: inline-flex;
	align-items: center;
	gap: var(--ako-admin-space-xs);
	max-inline-size: 200px;
	margin: 0;
	padding: var(--ako-admin-space-2xs) var(--ako-admin-space-sm);
	border: 0;
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-code-bg-subtle);
	color: var(--ako-admin-code-text-strong);
	font: var(--ako-text-label);
	cursor: pointer;
}

.ako-source__picker > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ako-ml .ako-source__code {
	margin: 0;
	padding: var(--ako-admin-space-lg);
	overflow-x: auto;
	color: var(--ako-admin-code-text);
	font: var(--ako-text-code);
	white-space: pre;
}

.ako-source__code .is-attr {
	color: var(--ako-admin-code-attribute);
}

.ako-source__code .is-value {
	color: var(--ako-admin-code-value);
}

.ako-source__code .is-muted {
	color: var(--ako-admin-code-muted);
}

.ako-ml .ako-source__foot,
.ako-ml .ako-source__empty {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-sm);
	padding: var(--ako-admin-space-md) var(--ako-admin-space-lg);
	background: var(--ako-admin-code-bg-subtle);
	color: var(--ako-admin-code-text);
	font: var(--ako-text-help);
}

.ako-source__foot .ako-icon {
	color: var(--ako-admin-code-success);
}

/* Health check rows (Figma: Settings patterns / Health check row) */

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

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

.ako-check__tile {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: var(--ako-admin-radius-control);
}

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

.ako-check__tile.is-info {
	background: var(--ako-admin-bg-info-subtle);
	color: var(--ako-admin-icon-info);
}

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

.ako-check__copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--ako-admin-space-3xs);
	min-inline-size: 0;
}

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

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