/* Admin frame (spec 5.1). Tokens come from emcpUI (loaded first). */

/* The page scrolls on html, outside the token scope, so the colours are
   literal here (--emcp-scrollbar in tokens.css). */
html:has(.eui-frame) {
	scrollbar-width: thin;
	scrollbar-color: #c7c9fb transparent;
}

.eui-frame {
	margin-block: 0;
	margin-inline: -20px 0;
	background: var(--emcp-bg);
	min-block-size: calc(100vh - 32px);
}

/* Each announcement has its own flat colour (white text at 4.5:1 or more on
 * both the fill and its strong shade); promo.js sets data-tone to the slide
 * on show. */
.eui-frame-promo {
	--emcp-promo-bg: var(--emcp-primary);
	--emcp-promo-strong: var(--emcp-primary-strong);
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 9px;
	padding-inline: 24px;
	background: var(--emcp-promo-bg);
	color: var(--emcp-surface);
	font-size: 13px;
	transition: background-color 0.3s ease;
}

.eui-frame-promo[data-tone="pro"] {
	--emcp-promo-bg: var(--emcp-dark);
	--emcp-promo-strong: #2e2a6b;
}

.eui-frame-promo[data-tone="ltd"] {
	--emcp-promo-bg: #c2410c;
	--emcp-promo-strong: #9a3412;
}

.eui-frame-promo[data-tone="whatsnew"] {
	--emcp-promo-bg: #0f766e;
	--emcp-promo-strong: #115e59;
}

.eui-frame-promo[data-tone="community"] {
	--emcp-promo-bg: #1d4ed8;
	--emcp-promo-strong: #1e3a8a;
}

@media (prefers-reduced-motion: reduce) {

	.eui-frame-promo {
		transition: none;
	}
}

.eui-frame-promo__badge {
	padding-block: 2px;
	padding-inline: 8px;
	border-radius: var(--emcp-r-pill);
	background: var(--emcp-promo-strong);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.eui-frame-promo__text {
	flex: 1;
	margin: 0;
}

.eui-frame-promo__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 32px;
	padding-inline: 12px;
	border-radius: var(--emcp-r-sm);
	background: var(--emcp-promo-strong);
	color: var(--emcp-surface);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.eui-frame-promo__cta:hover,
.eui-frame-promo__cta:focus {
	color: var(--emcp-surface);
}

.eui-frame-promo__slides {
	display: flex;
	flex: 1;
	min-inline-size: 0;
}

.eui-frame-promo__slide {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-inline-size: 0;
}

.eui-frame-promo__slide[hidden] {
	display: none;
}

.eui-frame-promo__nav {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 4px;
}

.eui-frame-promo__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--emcp-r-sm);
	background: transparent;
	color: var(--emcp-surface);
	cursor: pointer;
}

.eui-frame-promo__arrow:hover {
	background: var(--emcp-promo-strong);
}

.eui-frame-promo__dots {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* A 24x32 button whose ::before widens the hit area to 32px; the visible dot
 * is the ::after. Inactive dots are white rings, the current one is filled. */
.eui-frame-promo__dot {
	position: relative;
	inline-size: 24px;
	block-size: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.eui-frame-promo__dot::before {
	position: absolute;
	inset-block: 0;
	inset-inline: -4px;
	content: "";
}

.eui-frame-promo__dot::after {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 8px;
	block-size: 8px;
	border: 1.5px solid var(--emcp-surface);
	border-radius: 50%;
	content: "";
	transform: translate(-50%, -50%);
	box-sizing: border-box;
}

.eui-frame-promo__dot[aria-current="true"]::after {
	background: var(--emcp-surface);
}

.eui-frame__layout {
	display: flex;
	align-items: stretch;
}

.eui-frame__sidebar {
	position: sticky;
	inset-block-start: 32px;
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 4px;
	inline-size: 240px;
	block-size: calc(100vh - 32px);
	overflow-y: auto;
	padding-block: 16px;
	padding-inline: 12px;
	border-inline-end: 1px solid var(--emcp-border);
	background: var(--emcp-surface);
	transition: inline-size var(--emcp-dur) var(--emcp-ease), padding var(--emcp-dur) var(--emcp-ease);
}

/* Collapsed by the top-bar toggle: the same icon rail narrow screens get. */
.eui-frame.is-collapsed .eui-frame__sidebar {
	inline-size: 64px;
	padding-inline: 8px;
}

.eui-frame.is-collapsed :is(.eui-frame-brand__text, .eui-frame-search__label, .eui-frame-search__kbd, .eui-frame-nav__group, .eui-frame-nav__label, .eui-frame-nav__count, .eui-frame-nav__badge) {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.eui-frame.is-collapsed :is(.eui-frame-nav__item, .eui-frame-search) {
	justify-content: center;
	padding-inline: 0;
}

/* The toggle opens the top bar as a plain icon button, divided from the
   breadcrumb, so it lines up with the other top-bar controls whether the
   sidebar is open or collapsed. */
.eui-frame-collapse.eui-frame-iconlink {
	flex: none;
	margin-inline-start: -8px;
}

.eui-frame-collapse.eui-frame-iconlink:hover,
.eui-frame-collapse.eui-frame-iconlink:focus-visible {
	background: var(--emcp-primary-tint);
	color: var(--emcp-primary-strong);
}

.eui-frame-collapse + nav {
	display: flex;
	align-items: center;
	min-block-size: 20px;
	padding-inline-start: 16px;
	border-inline-start: 1px solid var(--emcp-border);
}

.eui-frame-collapse__open,
.eui-frame.is-collapsed .eui-frame-collapse__close {
	display: none;
}

.eui-frame-collapse__close,
.eui-frame.is-collapsed .eui-frame-collapse__open {
	display: inline-flex;
}

.eui-frame-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-block: 4px 12px;
	padding-inline: 6px;
}

.eui-frame-brand__logo {
	flex: none;
	inline-size: 32px;
	block-size: 32px;
	border-radius: var(--emcp-r-sm);
}

.eui-frame-brand__text {
	display: flex;
	flex-direction: column;
}

.eui-frame-brand__name {
	font-size: 15px;
	font-weight: 700;
	color: var(--emcp-ink);
}

.eui-frame-brand__version {
	font-size: 11px;
	color: var(--emcp-muted);
}

.eui-frame-search {
	display: flex;
	align-items: center;
	gap: 8px;
	min-block-size: 36px;
	margin-block-end: 8px;
	padding-inline: 10px;
	border: 1px solid var(--emcp-border-input);
	border-radius: var(--emcp-r-btn);
	background: var(--emcp-surface-2);
	color: var(--emcp-muted);
	font: 500 13px/1 var(--emcp-font);
	cursor: pointer;
}

.eui-frame-search__label {
	flex: 1;
	text-align: start;
}

.eui-frame-search__kbd {
	padding-block: 2px;
	padding-inline: 6px;
	border: 1px solid var(--emcp-border-input);
	border-radius: var(--emcp-r-xs);
	background: var(--emcp-surface);
	color: var(--emcp-muted);
	font: 500 11px/1.2 var(--emcp-mono);
}

.eui-frame-nav__group {
	margin-block: 14px 4px;
	margin-inline: 0;
	padding-inline: 10px;
	color: var(--emcp-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.eui-frame-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eui-frame-nav__item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: 34px;
	padding-inline: 10px;
	border-radius: var(--emcp-r-sm);
	color: var(--emcp-text-2);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--emcp-dur-fast), color var(--emcp-dur-fast);
}

.eui-frame-nav__item:hover,
.eui-frame-nav__item:focus {
	background: var(--emcp-divider-2);
	color: var(--emcp-ink);
}

/* Core wp-admin draws a blue box-shadow on every focused link, a mouse
   click included; keyboard focus gets our ring instead. */
.eui-frame-nav__item:focus {
	box-shadow: none;
	outline: none;
}

.eui-frame-nav__item:focus-visible {
	outline: 2px solid var(--emcp-primary);
	outline-offset: 1px;
}

.eui-frame-nav__item.is-active {
	background: var(--emcp-primary-tint);
	color: var(--emcp-primary-strong);
}

.eui-frame-nav__label {
	flex: 1;
}

.eui-frame-nav__count {
	color: var(--emcp-muted);
	font-size: 12px;
}

.eui-frame-nav__item.is-active .eui-frame-nav__count {
	color: var(--emcp-primary-strong);
}

.eui-frame-nav__badge {
	padding-block: 2px;
	padding-inline: 7px;
	border-radius: var(--emcp-r-pill);
	background: var(--emcp-primary-tint);
	color: var(--emcp-primary-strong);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
}

.eui-frame-nav__footer {
	margin-block-start: auto;
	padding-block-start: 12px;
	border-block-start: 1px solid var(--emcp-divider);
}

.eui-frame__main {
	flex: 1;
	min-inline-size: 0;
}

.eui-frame__topbar {
	position: sticky;
	inset-block-start: 32px;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 12px;
	padding-inline: 32px;
	border-block-end: 1px solid var(--emcp-border);
	background: var(--emcp-surface);
}

.eui-frame-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--emcp-muted);
	font-size: 13px;
}

.eui-frame-crumbs li {
	margin: 0;
}

.eui-frame-crumbs li + li::before {
	content: "›";
	margin-inline-end: 8px;
	color: var(--emcp-muted);
}

.eui-frame-crumbs [aria-current="page"] {
	color: var(--emcp-ink);
	font-weight: 600;
}

.eui-frame__topbar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
}

.eui-frame-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 32px;
	padding-inline: 12px;
	border-radius: var(--emcp-r-pill);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.eui-frame-status__dot {
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: currentcolor;
}

.eui-frame-status.is-green {
	background: var(--emcp-success-bg);
	color: var(--emcp-success-fg);
}

.eui-frame-status.is-grey {
	background: var(--emcp-divider-2);
	color: var(--emcp-text-3);
}

.eui-frame-status.is-amber {
	background: var(--emcp-warning-bg);
	color: var(--emcp-warning-fg);
}

.eui-frame-status.is-red {
	background: var(--emcp-danger-bg);
	color: var(--emcp-danger-fg);
}

.eui-frame-iconlink {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	border: 0;
	border-radius: var(--emcp-r-sm);
	background: transparent;
	color: var(--emcp-text-3);
	cursor: pointer;
}

.eui-frame-iconlink:hover,
.eui-frame-iconlink:focus {
	background: var(--emcp-divider-2);
	color: var(--emcp-ink);
}

.eui-frame-bell__dot {
	position: absolute;
	inset-block-start: 7px;
	inset-inline-end: 8px;
	inline-size: 8px;
	block-size: 8px;
	border: 2px solid var(--emcp-surface);
	border-radius: 50%;
	background: var(--emcp-danger-icon);
}

.eui-frame-bell__dot[hidden] {
	display: none;
}

.eui-frame-iconlink__dot {
	position: absolute;
	inset-block-start: 7px;
	inset-inline-end: 7px;
	inline-size: 8px;
	block-size: 8px;
	border: 2px solid var(--emcp-surface);
	border-radius: 50%;
	background: var(--emcp-primary);
}

.eui-frame-user {
	display: inline-flex;
	border-radius: 50%;
}

/* The avatar links to Account; core's link focus box-shadow is replaced. */
a.eui-frame-user {
	transition: box-shadow var(--emcp-dur-fast);
}

a.eui-frame-user:hover {
	box-shadow: 0 0 0 3px var(--emcp-primary-tint);
}

a.eui-frame-user:focus {
	box-shadow: none;
	outline: none;
}

a.eui-frame-user:focus-visible {
	outline: 2px solid var(--emcp-primary);
	outline-offset: 2px;
}

.eui-frame-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: 50%;
	background: var(--emcp-dark);
	color: var(--emcp-surface);
	font-size: 12px;
	font-weight: 700;
}

.eui-frame__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-block: 28px 40px;
	padding-inline: 32px;
}

.eui-frame__content > .wp-header-end {
	display: none;
}

/* Our notices keep core's `notice` class so core moves them here; undo
 * core's notice box so the eui-notice look applies. */
.eui-frame__content > .notice.eui-notice {
	align-items: flex-start;
	margin: 0;
	padding-block: 12px;
	padding-inline: 16px;
	border-width: 1px;
	border-style: solid;
	box-shadow: none;
}

.eui-frame__content > .notice.eui-notice--warning {
	border-color: var(--emcp-warning-dot);
	background: var(--emcp-warning-bg);
	color: var(--emcp-warning-fg);
}

/* Icon and button line up with the FIRST line of text, however it wraps:
 * the icon box is one line tall, and the 34px button is pulled into the
 * padding so it centres on that 20px line without growing the row. */
.eui-frame__content > .notice.eui-notice .eui-notice__body {
	line-height: 20px;
}

.eui-frame__content > .notice.eui-notice .eui-notice__actions {
	margin-block: -7px;
}

.eui-frame__content > .notice.eui-notice .eui-btn {
	text-decoration: none;
	white-space: nowrap;
}

.eui-frame__content > .notice.eui-notice .eui-notice__icon {
	display: inline-flex;
	align-items: center;
	block-size: 20px;
	margin-block-start: 0;
}

.eui-frame-fallback .eui-skeleton {
	max-inline-size: 640px;
}

.eui-frame-recovery {
	max-inline-size: 640px;
}

.eui-frame-recovery[hidden] {
	display: none;
}

.eui-frame-recovery__details {
	max-block-size: 160px;
	overflow: auto;
	padding: 10px;
	border-radius: var(--emcp-r-sm);
	background: var(--emcp-surface-2);
	white-space: pre-wrap;
	font-size: 12px;
}

.eui-frame-recovery__actions {
	display: flex;
	gap: 10px;
}

@media (max-width: 1200px) {

	/* The rail is forced here, so the toggle has nothing to do. */
	.eui-frame-collapse {
		display: none;
	}

	.eui-frame-collapse + nav {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.eui-frame__sidebar {
		inline-size: 64px;
		padding-inline: 8px;
	}

	.eui-frame-brand__text,
	.eui-frame-search__label,
	.eui-frame-search__kbd,
	.eui-frame-nav__group,
	.eui-frame-nav__label,
	.eui-frame-nav__count,
	.eui-frame-nav__badge {
		position: absolute !important;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.eui-frame-nav__item,
	.eui-frame-search {
		justify-content: center;
		padding-inline: 0;
	}

	.eui-frame__topbar,
	.eui-frame__content {
		padding-inline: 20px;
	}
}

@media (max-width: 782px) {

	.eui-frame {
		margin-inline: -10px 0;
	}

	.eui-frame__topbar,
	.eui-frame__sidebar {
		inset-block-start: 46px;
	}
}