/**
 * AWWO® CMS - Backend layout
 * The frame around every backend page: top bar, menu, content area and
 * cards. Colours, fonts, fields, buttons and notices come from
 * awwo-cms-system.css (loaded first); this file only lays them out.
 *
 * © AWWO® (Advertise What We Offer)
 * Unauthorized use, copying, modification, distribution, or reverse engineering is strictly prohibited without prior written authorization from CITIPRO WORLD®.
 * @license LicenseRef-Proprietary
 */

/* Sidebar (brand + menu) from the top edge to the bottom edge; next to it
   the top bar, the content and the footer bar. The footer sits at the
   bottom of the window on short pages and after the content on long ones. */
body.awwo-cms-backend {
	display: grid;
	grid-template-areas:
		"side top"
		"side main"
		"side foot";
	grid-template-columns: 240px minmax(0, 1fr);
	grid-template-rows: 64px 1fr auto;
	margin: 0;
	min-height: 100vh;
	background: var(--awwo-cms-surface);
	color: var(--awwo-cms-text);
	font: 15px/1.6 var(--awwo-cms-font);
	/* House rule: full lines, no lonely last word (awwo-cms-system.css). */
	text-wrap: pretty;
}

/* Sidebar: stays in view while the page scrolls. */

/* One pixel wider than its column, see-through (the page behind it is the
   same colour): the current item reaches over the canvas outline and
   opens it. */
.awwo-cms-sidebar {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	grid-area: side;
	align-self: start;
	width: calc(100% + 1px);
	height: 100vh;
	overflow-y: auto;
}

/* Top bar */

.awwo-cms-topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	grid-area: top;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	height: 64px;
	/* The buttons as far from the canvas's left edge as from its right one
	   (the canvas keeps 12px off the window's right: 24px - 12px). */
	padding: 0 24px 0 12px;
	background: var(--awwo-cms-surface);
}

/* The logo, centred above the menu. */
.awwo-cms-sidebar-brand {
	display: flex;
	flex: none;
	justify-content: center;
	padding: 32px 16px 8px;
	text-decoration: none;
}

.awwo-cms-sidebar-logo {
	flex: none;
	width: 96px;
	height: 96px;
}

.awwo-cms-topbar-tools {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
}

.awwo-cms-topbar-tools form {
	margin: 0;
}

.awwo-cms-topbar-user {
	max-width: 320px;
	overflow: hidden;
	color: inherit;
	font-weight: 400;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.awwo-cms-topbar-user strong {
	font-weight: 700;
}

.awwo-cms-topbar-user:hover,
.awwo-cms-topbar-user:focus-visible {
	color: var(--awwo-cms-ok);
}

/* Menu + content */

.awwo-cms-menu {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px 16px;
}

.awwo-cms-menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 15px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	color: var(--awwo-cms-muted);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s;
}

.awwo-cms-menu-item:hover,
.awwo-cms-menu-item:focus-visible {
	color: var(--awwo-cms-text);
	background: var(--awwo-cms-control);
}

/* The current page: an open tab of the canvas. Green fading into the
   canvas colour by 85%, reaching over the canvas outline so nothing
   divides them, with the outline curving into it above and below (the
   canvas' own 12px radius) and running along its whole top and bottom.
   (9px padding + 1px outline keeps its height.) */
.awwo-cms-menu-item[aria-current="page"] {
	position: relative;
	margin: 0 -17px 0 -16px;
	padding: 9px 15px 9px 31px;
	border-top: 1px solid var(--awwo-cms-border);
	border-bottom: 1px solid var(--awwo-cms-border);
	/* The outline fades from the canvas outline into the item's green
	   towards its left end, mirroring the fill. */
	border-image: linear-gradient(
		90deg,
		var(--awwo-cms-green),
		var(--awwo-cms-border) 85%
	) 1;
	border-radius: 0;
	color: var(--awwo-cms-white);
	background: linear-gradient(
		90deg,
		var(--awwo-cms-green),
		var(--awwo-cms-bg) 85%
	);
}

.awwo-cms-menu-item[aria-current="page"]::before,
.awwo-cms-menu-item[aria-current="page"]::after {
	content: "";
	position: absolute;
	right: 0;
	width: var(--awwo-cms-radius);
	height: var(--awwo-cms-radius);
	pointer-events: none;
}

.awwo-cms-menu-item[aria-current="page"]::before {
	bottom: 100%;
	background: radial-gradient(circle at 0 0, transparent calc(var(--awwo-cms-radius) - 1px), var(--awwo-cms-border) calc(var(--awwo-cms-radius) - 1px) var(--awwo-cms-radius), var(--awwo-cms-bg) var(--awwo-cms-radius));
}

.awwo-cms-menu-item[aria-current="page"]::after {
	top: 100%;
	background: radial-gradient(circle at 0 100%, transparent calc(var(--awwo-cms-radius) - 1px), var(--awwo-cms-border) calc(var(--awwo-cms-radius) - 1px) var(--awwo-cms-radius), var(--awwo-cms-bg) var(--awwo-cms-radius));
}

/* A section's sub-pages (e.g. Forms: Configurator, Manage, Entries):
   menu items like the others, a little smaller, without an icon, their
   text under the section's (15px + 18px icon + 12px gap); the current one
   takes the open tab. */
.awwo-cms-menu-sub {
	/* Sub-pages are compact: smaller text, less height (about 32px), close together. */
	padding: 6px 15px 6px 45px;
	font-size: 13px;
	line-height: 1.5;
}

/* The open one keeps the open tab, as compact (5px + its 1px outline). */
.awwo-cms-menu-sub[aria-current="page"] {
	padding: 5px 15px 5px 61px;
}

/* A section with sub-pages only opens them under it: its row is the
   switch; open, it keeps the text colour and a green icon. */
.awwo-cms-menu-group > summary {
	list-style: none;
	cursor: pointer;
}

.awwo-cms-menu-group > summary::-webkit-details-marker {
	display: none;
}

.awwo-cms-menu-group[open] > summary {
	color: var(--awwo-cms-text);
}

.awwo-cms-menu-group[open] > summary .awwo-cms-icon {
	color: var(--awwo-cms-ok);
}

.awwo-cms-menu-group > .awwo-cms-menu-sub {
	margin-top: 2px;
}

/* The first under its section: the menu's own 4px from it. */
.awwo-cms-menu-group > summary + .awwo-cms-menu-sub {
	margin-top: 4px;
}

/* The canvas: sidebar, top bar and footer are one frame; the page sits
   inside it as a sheet with the boxes' rounded corners. */
.awwo-cms-backend-main {
	grid-area: main;
	min-width: 0;
	margin-right: 12px;
	padding: 32px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, var(--awwo-cms-radius)) var(--awwo-cms-radius-tr, var(--awwo-cms-radius)) var(--awwo-cms-radius-br, var(--awwo-cms-radius)) var(--awwo-cms-radius-bl, var(--awwo-cms-radius));
	background: var(--awwo-cms-bg);
}

.awwo-cms-backend-main > * {
	max-width: 976px;
}

/* Pages that use the whole canvas width (e.g. the Media Library). */
.awwo-cms-backend-main-wide > * {
	max-width: none;
}

.awwo-cms-backend-main > h1 {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.3;
}

.awwo-cms-backend-lead {
	margin: 0 0 24px;
	color: var(--awwo-cms-muted);
}

/* Desktop: the frame stays put (top bar, footer, the canvas with its
   border and rounded corners); only what is inside the canvas scrolls,
   passing under its rounded edges. (Phones scroll the page, below.) */
@media (min-width: 769px) {
	body.awwo-cms-backend {
		height: 100vh;
		height: 100dvh;
		min-height: 0;
		overflow: hidden;
	}

	.awwo-cms-backend-main {
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* Footer bar, matching the top bar. */
.awwo-cms-footer-bar {
	display: flex;
	grid-area: foot;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/* As the top bar: as far from the canvas's left edge as from its right one. */
	padding: 12px 24px 12px 12px;
	background: var(--awwo-cms-surface);
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

/* The Social Profiles buttons, at the footer's end. */
.awwo-cms-footer-social {
	justify-content: flex-end;
}

/* Scroll shade: while content slides under the top bar / footer, it
   fades into the canvas's own colour there, light or dark
   (awwo-cms-scroll-shade.js). */
body.awwo-cms-backend {
	--awwo-cms-scroll-shade: var(--awwo-cms-bg);
}

.awwo-cms-footer-bar {
	position: relative;
	z-index: 20;
}

.awwo-cms-topbar::after,
.awwo-cms-footer-bar::before {
	content: '';
	position: absolute;
	right: 0;
	left: 0;
	height: 16px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s var(--awwo-cms-ease-out);
}

/* Inside the canvas, underneath its border and rounded corners (its
   width, not the gap on its right). */
.awwo-cms-topbar::after {
	top: calc(100% + 1px);
	right: 13px;
	left: 1px;
	border-radius: calc(var(--awwo-cms-radius) - 1px) calc(var(--awwo-cms-radius) - 1px) 0 0;
	background: linear-gradient(to bottom, var(--awwo-cms-scroll-shade), transparent);
}

.awwo-cms-footer-bar::before {
	right: 13px;
	bottom: calc(100% + 1px);
	left: 1px;
	border-radius: 0 0 calc(var(--awwo-cms-radius) - 1px) calc(var(--awwo-cms-radius) - 1px);
	background: linear-gradient(to top, var(--awwo-cms-scroll-shade), transparent);
}

body[data-awwo-cms-shade-top] .awwo-cms-topbar::after,
body[data-awwo-cms-shade-bottom] .awwo-cms-footer-bar::before {
	opacity: 1;
}

/* Panels */

.awwo-cms-panel {
	padding: 24px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, var(--awwo-cms-radius)) var(--awwo-cms-radius-tr, var(--awwo-cms-radius)) var(--awwo-cms-radius-br, var(--awwo-cms-radius)) var(--awwo-cms-radius-bl, var(--awwo-cms-radius));
	background: var(--awwo-cms-surface);
}

.awwo-cms-panel + .awwo-cms-panel {
	margin-top: 24px;
}

.awwo-cms-panel h2 {
	margin: 0 0 16px;
	color: var(--awwo-cms-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* A single value under a panel heading (e.g. the email address). */
.awwo-cms-panel-value {
	margin: 0;
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* Forms inside panels start without the installer's top gap. */
.awwo-cms-panel .awwo-cms-form {
	margin-top: 0;
}

.awwo-cms-panel .awwo-cms-actions {
	justify-content: flex-end;
}

/* Profile ------------------------------------------------------------ */

.awwo-cms-profile-header {
	display: flex;
	align-items: center;
	gap: 20px;
}

.awwo-cms-avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border: 3px solid var(--awwo-cms-green);
	border-radius: 50%;
	background: var(--awwo-cms-control);
	color: var(--awwo-cms-ok);
	font-size: 26px;
	font-weight: 800;
}

.awwo-cms-profile-who {
	min-width: 0;
}

.awwo-cms-profile-who h1 {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.awwo-cms-profile-who p {
	margin: 4px 0 0;
	color: var(--awwo-cms-muted);
}

/* Tabs under the header */
.awwo-cms-tabs {
	display: flex;
	gap: 4px;
	margin: 24px 0;
	overflow-x: auto;
	border-bottom: 1px solid var(--awwo-cms-border);
}

.awwo-cms-tab {
	flex: none;
	padding: 10px 16px;
	border-bottom: 3px solid transparent;
	color: var(--awwo-cms-muted);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s;
}

.awwo-cms-tab:hover,
.awwo-cms-tab:focus-visible {
	color: var(--awwo-cms-text);
}

.awwo-cms-tab[aria-current="page"] {
	border-bottom-color: var(--awwo-cms-green);
	color: var(--awwo-cms-ok);
}

/* A tab's own menu (Marketing's Newsletter: Lists, Emails, Campaigns,
   Automations): a rail of choices under the tabs, in the toolbars' white
   panel look, as wide as its labels; the current one a filled green pill
   (it glides to the one chosen, awwo-cms-menu-glide.js). */
.awwo-cms-tabs:has(+ .awwo-cms-subtabs) {
	margin-bottom: 16px;
}

.awwo-cms-subtabs {
	display: flex;
	width: fit-content;
	max-width: 100%;
	gap: 4px;
	margin: 0 0 24px;
	padding: 4px;
	overflow-x: auto;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--awwo-cms-surface);
}

.awwo-cms-subtab {
	flex: none;
	padding: 8px 16px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	color: var(--awwo-cms-muted);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s;
}

.awwo-cms-subtab:hover,
.awwo-cms-subtab:focus-visible {
	color: var(--awwo-cms-text);
}

.awwo-cms-subtab[aria-current="page"] {
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

/* Boxes: two columns, each box saves on its own (button in its corner). */
.awwo-cms-boxes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 24px;
}

.awwo-cms-boxes .awwo-cms-panel + .awwo-cms-panel {
	margin-top: 0;
}

.awwo-cms-box-wide {
	grid-column: 1 / -1;
}

/* A column of boxes stacked on its own, so boxes of different heights in
   the two columns leave no gaps (Security). */
.awwo-cms-box-stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.awwo-cms-box {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* A box (or a modal's form) that is itself a form starts level with its
   neighbours: the same space above and below it. */
.awwo-cms-box.awwo-cms-form,
.awwo-cms-modal > .awwo-cms-form {
	margin-top: 0;
}

.awwo-cms-box-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 36px;
}

.awwo-cms-box-head h2 {
	flex: none;
	margin: 0;
}

.awwo-cms-box-head .awwo-cms-button {
	flex: none;
}

/* A box's error, right before its button, filled red. (Saved: the button
   itself says "Updated", see .awwo-cms-button[data-awwo-cms-done].) */
.awwo-cms-box-message {
	min-width: 0;
	margin-left: auto;
	padding: 6px 14px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	color: var(--awwo-cms-white);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

.awwo-cms-box-failed {
	border: 1px solid var(--awwo-cms-red);
	background: var(--awwo-cms-red);
}

.awwo-cms-button-small {
	min-width: 0;
	padding: 6px 14px;
	font-size: 12px;
}

.awwo-cms-box-text {
	margin: 0;
	color: var(--awwo-cms-muted);
}

/* A value shown in place of a field (e.g. the email address). */
.awwo-cms-field-text {
	margin: 0;
	padding: 10px 13px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.awwo-cms-fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}


/* Devices */
.awwo-cms-devices {
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-device {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-device form {
	margin: 0;
}

.awwo-cms-device-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	min-width: 0;
}

.awwo-cms-device-meta {
	flex-basis: 100%;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-badge {
	padding: 2px 8px;
	border: 1px solid var(--awwo-cms-ok);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	color: var(--awwo-cms-ok);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Phones and small tablets: the menu becomes a row under the top bar. */
@media (max-width: 768px) {
	.awwo-cms-topbar {
		padding: 0 16px;
		border-bottom: 1px solid var(--awwo-cms-border);
	}

	/* Phones: the canvas is flat, edge to edge. */
	.awwo-cms-backend-main {
		margin-right: 0;
		border: 0;
		border-radius: 0;
	}

	.awwo-cms-topbar::after {
		top: 100%;
	}

	.awwo-cms-footer-bar::before {
		bottom: 100%;
	}

	.awwo-cms-topbar::after,
	.awwo-cms-footer-bar::before {
		right: 0;
		left: 0;
		border-radius: 0;
	}

	/* Phones: the Social Profiles buttons above the copyright, both centred. */
	.awwo-cms-footer-bar {
		flex-direction: column-reverse;
		padding: 16px;
		border-top: 1px solid var(--awwo-cms-border);
		text-align: center;
	}

	.awwo-cms-footer-social {
		justify-content: center;
	}

	.awwo-cms-topbar-user {
		display: none;
	}

	/* Phones: brand and top bar share the first row, the menu runs
	   across under them. */
	body.awwo-cms-backend {
		grid-template-areas:
			"brand top"
			"menu menu"
			"main main"
			"foot foot";
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: 64px auto 1fr auto;
	}

	.awwo-cms-sidebar {
		display: contents;
	}

	.awwo-cms-sidebar-brand {
		position: sticky;
		top: 0;
		z-index: 20;
		grid-area: brand;
		align-items: center;
		justify-content: flex-start;
		padding: 0 16px;
		border-bottom: 1px solid var(--awwo-cms-border);
		background: var(--awwo-cms-surface);
	}

	.awwo-cms-sidebar-logo {
		width: 40px;
		height: 40px;
	}

	.awwo-cms-menu {
		position: sticky;
		top: 64px;
		z-index: 10;
		flex-direction: row;
		grid-area: menu;
		width: 100%;
		min-height: 0;
		padding: 8px 16px;
		overflow-x: auto;
		border-bottom: 1px solid var(--awwo-cms-border);
		background: var(--awwo-cms-surface);
	}

	.awwo-cms-menu-item {
		flex: none;
		border-bottom: 3px solid transparent;
		border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) 0 0;
	}

	/* Sub-pages sit in the bar like any item (no indent); an open section
	   shows them in the same row, after its own. */
	.awwo-cms-menu-sub,
	.awwo-cms-menu-sub[aria-current="page"] {
		padding: 10px 15px;
	}

	.awwo-cms-menu-group {
		display: flex;
		flex: none;
		align-items: center;
	}

	.awwo-cms-menu-group[open]::details-content {
		display: contents;
	}

	.awwo-cms-menu-group > .awwo-cms-menu-sub {
		margin-top: 0;
	}

	.awwo-cms-menu-item[aria-current="page"] {
		margin: 0;
		padding: 10px 15px;
		border-top: 0;
		border-image: none;
		border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) 0 0;
		background: none;
		color: var(--awwo-cms-ok);
		border-bottom-color: var(--awwo-cms-green);
	}

	.awwo-cms-menu-item[aria-current="page"]::before,
	.awwo-cms-menu-item[aria-current="page"]::after {
		content: none;
	}

	.awwo-cms-backend-main {
		padding: 24px 16px;
	}

	.awwo-cms-boxes,
	.awwo-cms-checklist {
		grid-template-columns: minmax(0, 1fr);
	}

	.awwo-cms-profile-header {
		align-items: flex-start;
	}
}

/* Modal: a small panel over a dimmed page (e.g. the password that
   confirms a new email). */
.awwo-cms-modal {
	width: min(420px, calc(100vw - 32px));
	padding: 24px; /* as the boxes */
	overflow: visible;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, var(--awwo-cms-radius)) var(--awwo-cms-radius-tr, var(--awwo-cms-radius)) var(--awwo-cms-radius-br, var(--awwo-cms-radius)) var(--awwo-cms-radius-bl, var(--awwo-cms-radius));
	background: var(--awwo-cms-surface);
	color: var(--awwo-cms-text);
	box-shadow: 0 24px 64px rgb(0 0 0 / 0.35);
}

.awwo-cms-modal::backdrop {
	background: rgb(0 0 0 / 0.55);
}

.awwo-cms-modal h2 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}

/* Several buttons at the top of a box or modal: side by side, primary last. */
.awwo-cms-box-buttons {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
}

/* Media Library ------------------------------------------------------ */

/* Toolbar: view, Add Media File, filters, bulk select on the left; search on the right. */
.awwo-cms-media-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	padding: 12px;
}

.awwo-cms-media-toolbar-start {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Toolbar buttons (Bulk Select) and view switches as tall as the fields (46px). */
.awwo-cms-media-toolbar .awwo-cms-button {
	box-sizing: border-box;
	height: 46px;
	padding-top: 0;
	padding-bottom: 0;
}

.awwo-cms-media-toolbar select.awwo-cms-input {
	width: auto;
	min-width: 170px;
}

.awwo-cms-media-views {
	display: flex;
	gap: 4px;
}

/* View switches are house buttons (outline, filled and lifted on hover);
   the current view stays filled. */
.awwo-cms-media-view[aria-current="page"] {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

.awwo-cms-media-search {
	position: relative;
	flex: 1 1 180px;
	max-width: 280px;
}

.awwo-cms-media-search .awwo-cms-icon {
	position: absolute;
	top: 50%;
	left: 13px;
	width: 14px;
	height: 14px;
	color: var(--awwo-cms-muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.awwo-cms-media-search .awwo-cms-input {
	padding-left: 36px;
}

/* Bulk actions, inside the toolbar: the number selected in a square box,
   a square delete button (trash can) and, in the grid, a square cancel (✕). */
.awwo-cms-media-bulkbar {
	display: flex;
	align-items: center;
	gap: 8px;
}

.awwo-cms-media-bulkbar[hidden] {
	display: none;
}

.awwo-cms-media-count {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 46px;
	height: 46px;
	padding: 0 8px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	font-weight: 700;
}

/* The square buttons are house buttons (outline at rest, filled and
   lifted on hover), only square. */
.awwo-cms-button.awwo-cms-media-square {
	width: 46px;
	min-width: 0;
	height: 46px;
	padding: 0;
}

.awwo-cms-media-total {
	margin: 16px 0 0;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

/* Uploader (modal): drop files anywhere on it, or choose them. */
.awwo-cms-media-upload-modal {
	width: min(560px, calc(100vw - 32px));
}

/* Modals laid out like the boxes: title on the left, button at the top. */
.awwo-cms-modal .awwo-cms-box-head {
	margin-bottom: 16px;
}

/* In a modal's form, the form's own 16px gap spaces everything: no extra
   margin under the title, none around a note. */
.awwo-cms-modal .awwo-cms-form > .awwo-cms-box-head,
.awwo-cms-modal .awwo-cms-form > .awwo-cms-modal-text {
	margin: 0;
}

.awwo-cms-modal .awwo-cms-box-head h2 {
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
}

.awwo-cms-media-upload {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px 24px;
	border: 1px dashed var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, var(--awwo-cms-radius)) var(--awwo-cms-radius-tr, var(--awwo-cms-radius)) var(--awwo-cms-radius-br, var(--awwo-cms-radius)) var(--awwo-cms-radius-bl, var(--awwo-cms-radius));
	text-align: center;
	transition: border-color 0.2s, background-color 0.2s;
}

.awwo-cms-media-upload-limits {
	font-size: 13px;
}


.awwo-cms-media-upload[data-dragging] {
	border-color: var(--awwo-cms-green);
	background: color-mix(in oklab, var(--awwo-cms-green) 10%, var(--awwo-cms-surface));
}

.awwo-cms-media-upload-icon {
	width: 40px;
	height: 40px;
	color: var(--awwo-cms-ok);
}

.awwo-cms-media-upload-text {
	margin: 0;
	color: var(--awwo-cms-muted);
}

/* The real file field stays usable but out of sight inside its button. */
.awwo-cms-media-upload input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.awwo-cms-media-upload label.awwo-cms-button {
	position: relative;
	cursor: pointer;
}

.awwo-cms-media-upload label.awwo-cms-button:focus-within {
	outline: 2px solid var(--awwo-cms-ok);
	outline-offset: 2px;
}

.awwo-cms-media-progress {
	width: min(520px, 100%);
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	text-align: left;
}

.awwo-cms-media-progress li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-media-progress-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.awwo-cms-media-progress-state {
	flex: none;
	color: var(--awwo-cms-muted);
	font-weight: 700;
}

.awwo-cms-media-progress li[data-state="ok"] .awwo-cms-media-progress-state {
	color: var(--awwo-cms-ok);
}

.awwo-cms-media-progress li[data-state="fail"] .awwo-cms-media-progress-state {
	flex: 0 1 auto;
	color: var(--awwo-cms-fail);
	text-align: right;
}

/* Grid of files, newest first. */
.awwo-cms-media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}

.awwo-cms-media-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, var(--awwo-cms-radius)) var(--awwo-cms-radius-tr, var(--awwo-cms-radius)) var(--awwo-cms-radius-br, var(--awwo-cms-radius)) var(--awwo-cms-radius-bl, var(--awwo-cms-radius));
	background: var(--awwo-cms-surface);
	color: var(--awwo-cms-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s, transform var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-media-card:hover,
.awwo-cms-media-card:focus-visible {
	border-color: var(--awwo-cms-green);
	transform: translateY(-4px);
}

.awwo-cms-media-card img,
.awwo-cms-media-file {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background:
		repeating-conic-gradient(var(--awwo-cms-control) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}

.awwo-cms-media-file {
	flex-direction: column;
	gap: 8px;
	color: var(--awwo-cms-muted);
	font-size: 12px;
	font-weight: 700;
}

.awwo-cms-media-file .awwo-cms-icon {
	width: 40px;
	height: 40px;
	color: var(--awwo-cms-fail);
}

.awwo-cms-media-name {
	padding: 8px 12px;
	overflow: hidden;
	font-size: 13px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Page numbers under a table, as the site's (Members, Articles): the CMS's
   buttons (outlined, filled and lifted when hovered), 44px rounded
   squares, centred, 8px apart; the current one filled. */
.awwo-cms-media-pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.awwo-cms-media-pages .awwo-cms-page-number {
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
}

.awwo-cms-media-pages .awwo-cms-page-number[aria-current="page"] {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

/* Between page numbers left out (a long list: the first, the last and two either side of this one). */
.awwo-cms-media-pages .awwo-cms-page-gap {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Settings, Languages: the English half the row, the site's own wording the other half, its buttons under it. */
.awwo-cms-languages-table td {
	width: 50%;
	vertical-align: top;
}

.awwo-cms-languages-english {
	white-space: pre-line;
}

.awwo-cms-languages-line .awwo-cms-field-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.awwo-cms-languages-line .awwo-cms-box-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

/* Details modal */
.awwo-cms-media-modal {
	width: min(640px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow: auto;
}


.awwo-cms-media-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	margin-bottom: 16px;
	padding: 12px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background:
		repeating-conic-gradient(var(--awwo-cms-control) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}

.awwo-cms-media-preview {
	gap: 12px;
}

.awwo-cms-media-preview img {
	max-width: 100%;
	max-height: 320px;
}

.awwo-cms-media-facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 16px;
	margin: 0 0 16px;
	padding: 0 13px;
	font-size: 13px;
}

.awwo-cms-media-facts dt {
	color: var(--awwo-cms-muted);
	font-weight: 700;
}

.awwo-cms-media-facts dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* Delete: red outline, filled red on hover (and once it asks to confirm). */
.awwo-cms-button-danger {
	border-color: var(--awwo-cms-red);
	color: var(--awwo-cms-fail);
}

/* Its tooltip (e.g. Bulk Select's Delete) in the same red. */
.awwo-cms-button-danger[data-awwo-cms-tooltip] {
	--awwo-cms-tooltip-bg: var(--awwo-cms-red);
	--awwo-cms-tooltip-text: var(--awwo-cms-white);
}

.awwo-cms-button-danger:hover:not(:disabled),
.awwo-cms-button-danger:focus-visible,
.awwo-cms-button-danger[data-confirm] {
	border-color: var(--awwo-cms-red);
	background: var(--awwo-cms-red);
	color: var(--awwo-cms-white);
}

/* Drawings (SVG) fit whole inside the square; photos fill it. */
.awwo-cms-media-card[data-awwo-cms-media-mime="image/svg+xml"] img {
	padding: 12px;
	object-fit: contain;
}

/* Grid in Bulk Select: cards are picked (green ring and check) instead of opened. */
.awwo-cms-media-card {
	position: relative;
}

.awwo-cms-media-check {
	position: absolute;
	top: 8px;
	right: 8px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 2px solid var(--awwo-cms-white);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

.awwo-cms-media-check .awwo-cms-icon {
	width: 14px;
	height: 14px;
}

[data-awwo-cms-bulk] .awwo-cms-media-card[aria-pressed="true"] {
	border-color: var(--awwo-cms-green);
	box-shadow: 0 0 0 2px var(--awwo-cms-green);
}

[data-awwo-cms-bulk] .awwo-cms-media-card[aria-pressed="true"] .awwo-cms-media-check {
	display: flex;
}

/* List view: a table, one file per row. */
.awwo-cms-media-table-wrap {
	padding: 0;
	overflow-x: auto;
}

.awwo-cms-media-table {
	width: 100%;
	border-collapse: collapse;
}

.awwo-cms-media-table th,
.awwo-cms-media-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--awwo-cms-border);
	text-align: left;
	/* Preview, author and date & time share the row's middle line. */
	vertical-align: middle;
}

.awwo-cms-media-table th {
	color: var(--awwo-cms-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.awwo-cms-media-table tbody tr:last-child td {
	border-bottom: 0;
}

.awwo-cms-media-table tbody tr:hover {
	background: color-mix(in oklab, var(--awwo-cms-control) 50%, transparent);
}

/* Author and Date & Time: header and values centred in their column. */
/* Columns are counted without Bulk Select's checkbox column. */
.awwo-cms-media-table th:nth-child(2 of :not(.awwo-cms-pick-cell)),
.awwo-cms-media-table th:nth-child(3 of :not(.awwo-cms-pick-cell)) {
	text-align: center;
}

.awwo-cms-media-table td:nth-child(2 of :not(.awwo-cms-pick-cell)),
.awwo-cms-media-table td:nth-child(3 of :not(.awwo-cms-pick-cell)) {
	text-align: center;
	color: var(--awwo-cms-muted);
	font-size: 13px;
	white-space: nowrap;
}

/* File header: its select-all box shows only while Bulk Select is on. */
.awwo-cms-media-file-head {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.awwo-cms-media-pick-all {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--awwo-cms-green);
}

.awwo-cms-media-table:not([data-awwo-cms-bulk]) .awwo-cms-media-pick-all {
	display: none;
}

/* Bulk Select: rows are picked like the grid's cards (ring and check on
   the preview); a click anywhere on the row picks it. */
[data-awwo-cms-bulk] tbody tr {
	cursor: pointer;
}

/* The preview's frame is exactly its 60px square (block, so no line gap
   under the image). */
.awwo-cms-media-thumb-wrap {
	position: relative;
	display: block;
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
}

.awwo-cms-media-thumb-wrap .awwo-cms-media-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
}

.awwo-cms-media-thumb-wrap .awwo-cms-media-check {
	top: -6px;
	right: -6px;
	width: 22px;
	height: 22px;
}

[data-awwo-cms-bulk] tr[aria-pressed="true"] {
	background: color-mix(in oklab, var(--awwo-cms-green) 10%, transparent);
}

[data-awwo-cms-bulk] tr[aria-pressed="true"] .awwo-cms-media-thumb-wrap {
	box-shadow: 0 0 0 2px var(--awwo-cms-green);
}

[data-awwo-cms-bulk] tr[aria-pressed="true"] .awwo-cms-media-check {
	display: flex;
}

.awwo-cms-media-file-cell {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.awwo-cms-media-thumb {
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	object-fit: cover;
	background:
		repeating-conic-gradient(var(--awwo-cms-control) 0% 25%, transparent 0% 50%) 50% / 12px 12px;
}

span.awwo-cms-media-thumb .awwo-cms-icon {
	width: 24px;
	height: 24px;
}

.awwo-cms-media-file-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.awwo-cms-media-title {
	padding: 0;
	border: 0;
	background: none;
	color: var(--awwo-cms-ok);
	font: inherit;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	overflow-wrap: anywhere;
}

.awwo-cms-media-meta {
	color: var(--awwo-cms-muted);
	font-size: 13px;
	overflow-wrap: anywhere;
}

/* Row actions: always visible; each lifts a little on hover, with the
   buttons' easing. */
.awwo-cms-media-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 13px;
}

.awwo-cms-media-actions .awwo-cms-label-action {
	display: inline-block;
	padding: 0;
	/* At rest mostly grey with a hint of its colour; on hover the full colour (and the lift). */
	color: color-mix(in oklab, var(--awwo-cms-ok) 25%, var(--awwo-cms-muted));
	text-decoration: none;
	transition:
		transform var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-media-actions .awwo-cms-label-action:hover,
.awwo-cms-media-actions .awwo-cms-label-action:focus-visible {
	color: var(--awwo-cms-ok);
	text-decoration: none;
	transform: translateY(-2px);
}

.awwo-cms-media-actions .awwo-cms-label-action-danger {
	color: color-mix(in oklab, var(--awwo-cms-fail) 25%, var(--awwo-cms-muted));
}

.awwo-cms-media-actions .awwo-cms-label-action-danger:hover,
.awwo-cms-media-actions .awwo-cms-label-action-danger:focus-visible {
	color: var(--awwo-cms-fail);
}

.awwo-cms-label-action-danger {
	color: var(--awwo-cms-fail);
}

@media (max-width: 768px) {
	.awwo-cms-media-toolbar-start {
		width: 100%;
	}

	.awwo-cms-media-toolbar .awwo-cms-button,
	.awwo-cms-media-bulkbar {
		flex: none;
	}

	.awwo-cms-media-search {
		flex-basis: 100%;
		max-width: none;
	}

	.awwo-cms-media-table td:nth-child(2 of :not(.awwo-cms-pick-cell)),
	.awwo-cms-media-table th:nth-child(2 of :not(.awwo-cms-pick-cell)) {
		display: none;
	}
}

/* Branding ----------------------------------------------------------- */

/* A site's own logo stands in for AWWO's: whole, never cropped. */
.awwo-cms-brand-logo {
	display: block;
	object-fit: contain;
}

.awwo-cms-sidebar-logo.awwo-cms-brand-logo {
	width: 96px;
	height: 96px;
}

.awwo-cms-header-logo {
	width: 152px;
	height: 152px;
}

/* Logo / favicon: the box is the button. Hovered, the Media Library icon
   shows over it (it opens the Media Library); a small ✕ in its corner
   removes the choice. */
.awwo-cms-image-pick {
	position: relative;
}

/* As wide as the fields under it; the image sits inside with room around it. */
.awwo-cms-image-pick-preview {
	position: relative;
	display: block;
	width: 100%;
	height: 96px;
	padding: 0;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background:
		repeating-conic-gradient(var(--awwo-cms-control) 0% 25%, transparent 0% 50%) 50% / 12px 12px;
	cursor: pointer;
	transition:
		border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		transform var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-image-pick-current {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 7 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 7 / 12) calc(var(--awwo-cms-radius-br, 12px) * 7 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 7 / 12);
}

.awwo-cms-image-pick-current img {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 12px;
	object-fit: contain;
}

/* No image: the upload icon, muted, in every image box (the Open Graph Image's too, in its own shape). */
.awwo-cms-image-pick-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--awwo-cms-muted);
}

.awwo-cms-image-pick-empty .awwo-cms-icon {
	width: 28px;
	height: 28px;
}

/* An avatar's initials, while it has no image. */
.awwo-cms-image-pick-default {
	color: var(--awwo-cms-muted);
	font-size: 12px;
	font-weight: 700;
}

.awwo-cms-image-pick-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 7 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 7 / 12) calc(var(--awwo-cms-radius-br, 12px) * 7 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 7 / 12);
	background: color-mix(in oklab, var(--awwo-cms-green) 85%, transparent);
	color: var(--awwo-cms-white);
	opacity: 0;
	transition: opacity 0.2s;
}

.awwo-cms-image-pick-overlay .awwo-cms-icon {
	width: 28px;
	height: 28px;
}

.awwo-cms-image-pick-preview:hover,
.awwo-cms-image-pick-preview:focus-visible {
	border-color: var(--awwo-cms-green);
	transform: translateY(-6px);
}

.awwo-cms-image-pick-preview:hover .awwo-cms-image-pick-overlay,
.awwo-cms-image-pick-preview:focus-visible .awwo-cms-image-pick-overlay {
	opacity: 1;
}

.awwo-cms-image-pick-clear {
	position: absolute;
	top: -8px;
	right: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 2px solid var(--awwo-cms-surface);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	background: var(--awwo-cms-red);
	color: var(--awwo-cms-white);
	cursor: pointer;
	z-index: 2;
}

.awwo-cms-image-pick-clear[hidden] {
	display: none;
}

/* Remove is red, and so is its tooltip. */
.awwo-cms-image-pick-clear[data-awwo-cms-tooltip] {
	--awwo-cms-tooltip-bg: var(--awwo-cms-red);
	--awwo-cms-tooltip-text: var(--awwo-cms-white);
}

.awwo-cms-image-pick-clear .awwo-cms-icon {
	width: 12px;
	height: 12px;
}

/* Profile avatar: the image box as the round avatar (72px, the green
   ring); the picture fills the circle; the initials when there is none. */
.awwo-cms-avatar-pick {
	flex: none;
}

.awwo-cms-avatar-pick .awwo-cms-image-pick-preview.awwo-cms-avatar {
	width: 72px;
	height: 72px;
	border: 3px solid var(--awwo-cms-green);
	border-radius: 50%;
	background: var(--awwo-cms-control);
}

.awwo-cms-avatar-pick .awwo-cms-image-pick-current,
.awwo-cms-avatar-pick .awwo-cms-image-pick-overlay {
	border-radius: 50%;
}

.awwo-cms-avatar-pick .awwo-cms-image-pick-current img {
	padding: 0;
	object-fit: cover;
}

.awwo-cms-avatar-pick .awwo-cms-image-pick-default {
	color: var(--awwo-cms-ok);
	font-size: 26px;
	font-weight: 800;
}

.awwo-cms-avatar-pick .awwo-cms-image-pick-overlay .awwo-cms-icon {
	width: 24px;
	height: 24px;
}

.awwo-cms-avatar-pick .awwo-cms-image-pick-clear {
	top: -4px;
	right: -4px;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.2s,
		transform var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

/* The avatar's country flag (its time zone's), on its bottom right corner
   as on the site's cards: over the picture, and lifted with it and Remove
   as one piece. */
.awwo-cms-avatar-flag {
	position: absolute;
	right: -4px;
	bottom: -4px;
	z-index: 1;
	box-sizing: border-box;
	width: 24px;
	height: 18px;
	border: 2px solid var(--awwo-cms-surface);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 4 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 4 / 12) calc(var(--awwo-cms-radius-br, 12px) * 4 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 4 / 12);
	object-fit: cover;
	pointer-events: none;
	transition: transform var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-avatar-pick:has(.awwo-cms-image-pick-preview:hover, .awwo-cms-image-pick-preview:focus-visible, .awwo-cms-image-pick-clear:hover, .awwo-cms-image-pick-clear:focus-visible) .awwo-cms-avatar-flag {
	transform: translateY(-6px);
}

/* Remove only while the avatar is pointed at (or a key reaches it), and
   only when there is one (it is hidden without). */
.awwo-cms-avatar-pick:hover .awwo-cms-image-pick-clear,
.awwo-cms-avatar-pick:focus-within .awwo-cms-image-pick-clear {
	opacity: 1;
	pointer-events: auto;
}

/* Remove is part of the avatar: it lifts with it, and pointing at Remove
   keeps the avatar up (so it doesn't slip away from under the pointer). */
.awwo-cms-avatar-pick:has(.awwo-cms-image-pick-preview:hover, .awwo-cms-image-pick-preview:focus-visible, .awwo-cms-image-pick-clear:hover, .awwo-cms-image-pick-clear:focus-visible) :is(.awwo-cms-image-pick-preview, .awwo-cms-image-pick-clear) {
	transform: translateY(-6px);
}

/* Colour: the swatch and the #rrggbb field are one box (like the phone). */
.awwo-cms-color {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--awwo-cms-control);
	transition: border-color 0.2s;
}

.awwo-cms-color:hover {
	border-color: var(--awwo-cms-grey-dark);
}

.awwo-cms-color:focus-within {
	border-color: var(--awwo-cms-ok);
	outline: 2px solid color-mix(in oklab, var(--awwo-cms-ok) 35%, transparent);
}

.awwo-cms-color:has([aria-invalid="true"]) {
	border-color: var(--awwo-cms-fail);
}

.awwo-cms-color .awwo-cms-input,
.awwo-cms-color .awwo-cms-input:hover,
.awwo-cms-color .awwo-cms-input:focus {
	min-width: 0;
	border: 0;
	outline: 0;
	background-color: transparent;
}

.awwo-cms-color-swatch {
	flex: none;
	width: 46px;
	height: auto;
	padding: 8px;
	border: 0;
	border-right: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 7 / 12) 0 0 calc(var(--awwo-cms-radius-bl, 12px) * 7 / 12);
	background: none;
	cursor: pointer;
}

.awwo-cms-color-swatch::-webkit-color-swatch-wrapper {
	padding: 0;
}

/* A builder colour's palette roles (Primary, Secondary, Neutral, Accent,
   Surface): the list that opens under its box (as the searchable
   drop-downs'), each role its colour's round swatch (set by
   awwo-cms-forms.js) and its name; the box keeps every field's height. */
.awwo-cms-color {
	position: relative;
}

.awwo-cms-color-roles [role="option"] {
	display: flex;
	align-items: center;
	gap: 10px;
}

.awwo-cms-color-role {
	flex: none;
	width: 16px;
	height: 16px;
	border: 1px solid color-mix(in oklab, var(--awwo-cms-text) 25%, transparent);
	border-radius: 50%;
}

/* A builder Icon (awwo-cms-forms.js): the searchable box with the icon
   chosen at its start, every icon in a grid under it (40px squares, 4px
   apart), the one chosen filled green, Same as List a whole row. */
.awwo-cms-icon-pick-current {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 14px;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.awwo-cms-icon-pick-current .awwo-cms-icon {
	width: 16px;
	height: 16px;
	color: var(--awwo-cms-ok);
}

.awwo-cms-icon-pick .awwo-cms-search-input.has-icon {
	padding-left: 40px;
}

.awwo-cms-icon-pick .awwo-cms-search-input::placeholder {
	color: var(--awwo-cms-text);
	opacity: 1;
}

.awwo-cms-icon-grid:not([hidden]) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
	gap: 4px;
}

.awwo-cms-icon-grid-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	background: none;
	color: var(--awwo-cms-text);
	font: inherit;
	cursor: pointer;
}

.awwo-cms-icon-grid-item.is-none {
	grid-column: 1 / -1;
}

.awwo-cms-icon-grid-item:hover {
	background: var(--awwo-cms-control);
}

.awwo-cms-icon-grid-item[aria-selected="true"] {
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

.awwo-cms-icon-grid-item .awwo-cms-icon {
	width: 18px;
	height: 18px;
}

.awwo-cms-icon-grid .awwo-cms-search-none {
	grid-column: 1 / -1;
	margin: 0;
	padding: 8px 12px;
}

/* Separate rules: a browser drops a whole rule with a prefix it does not know. */
.awwo-cms-color-swatch::-webkit-color-swatch {
	border: 0;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 4 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 4 / 12) calc(var(--awwo-cms-radius-br, 12px) * 4 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 4 / 12);
}

.awwo-cms-color-swatch::-moz-color-swatch {
	border: 0;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 4 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 4 / 12) calc(var(--awwo-cms-radius-br, 12px) * 4 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 4 / 12);
}

/* Image picker modal */
.awwo-cms-image-picker {
	width: min(760px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow: auto;
}

.awwo-cms-image-picker-search {
	flex: 0 1 220px;
}

/* As tall as the small Close button beside it. */
.awwo-cms-image-picker-search .awwo-cms-input {
	box-sizing: border-box;
	height: 33px;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 13px;
}

.awwo-cms-image-picker .awwo-cms-box-head {
	gap: 16px;
}

.awwo-cms-image-picker .awwo-cms-box-buttons {
	flex: 1;
	justify-content: flex-end;
}

.awwo-cms-image-picker-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.awwo-cms-image-picker label.awwo-cms-button {
	position: relative;
	cursor: pointer;
}

.awwo-cms-image-picker label.awwo-cms-button:focus-within {
	outline: 2px solid var(--awwo-cms-ok);
	outline-offset: 2px;
}

/* The picker's upload box, above the images (like Add Media Files). */
.awwo-cms-image-picker-upload {
	margin-bottom: 16px;
	padding: 24px;
}

/* Audio and video in the library. */
.awwo-cms-media-file-video .awwo-cms-icon,
.awwo-cms-media-file-audio .awwo-cms-icon {
	color: var(--awwo-cms-ok);
}



/* File Details: audio and video show only their player. */
.awwo-cms-media-preview[data-awwo-cms-player] {
	min-height: 0;
	padding: 0;
	background: none;
}

/* Security: a field dims while a switch it depends on is Inactive. */
.awwo-cms-field[data-awwo-cms-follows] {
	transition: opacity var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-field[data-awwo-cms-dimmed] {
	opacity: 0.4;
	pointer-events: none;
}

.awwo-cms-blocklist-modal {
	width: min(560px, calc(100vw - 32px));
}


/* A field without a label: its control at the bottom, level with the
   controls beside it. */
.awwo-cms-field-unlabelled {
	justify-content: flex-end;
}

/* Display On: the front end's icon buttons sharing the field's width (as
   wide as the drop-downs beside it). */
/* Profile, Two-Factor Authentication: the code to scan beside its key and
   the code field. The QR code is the brand colour on white, so every app
   reads it in either theme, in the theme's rounded corners. */
.awwo-cms-2fa-setup {
	display: grid;
	grid-template-columns: 184px minmax(0, 1fr);
	align-items: start;
	gap: 24px;
}

.awwo-cms-2fa-qr {
	padding: 8px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, var(--awwo-cms-radius)) var(--awwo-cms-radius-tr, var(--awwo-cms-radius)) var(--awwo-cms-radius-br, var(--awwo-cms-radius)) var(--awwo-cms-radius-bl, var(--awwo-cms-radius));
	/* As every QR Code box of the CMS, in both themes: the card colour. */
	background: var(--awwo-cms-surface);
	color: var(--awwo-cms-green);
	line-height: 0;
}

.awwo-cms-2fa-qr svg {
	width: 100%;
	height: auto;
}

/* Its Resend Code: under the code, as wide as it. */
.awwo-cms-2fa-resend-row {
	margin: 0;
}

.awwo-cms-2fa-resend-row .awwo-cms-button {
	width: 100%;
}

/* Current Code: the app's code to compare, large and spaced. */
.awwo-cms-2fa-current {
	font: 700 17px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.12em;
}

/* The emergency codes, shown once: two columns, monospace, in the middle
   of the modal; the note above them centred too. */
.awwo-cms-2fa-codes-modal {
	width: min(520px, calc(100vw - 32px));
}

.awwo-cms-2fa-codes-text {
	text-align: center;
}

.awwo-cms-2fa-codes {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 8px 48px;
	justify-content: center;
	width: max-content;
	max-width: 100%;
	max-height: 50vh;
	margin: 16px auto 0;
	padding: 0;
	overflow: auto;
	list-style: none;
	counter-reset: awwo-cms-code;
	font: 600 15px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-variant-numeric: tabular-nums;
}

/* Each code's number, inside its own item: right-aligned to two digits,
   muted, so the codes line up and the columns stay apart. */
.awwo-cms-2fa-codes li {
	counter-increment: awwo-cms-code;
}

.awwo-cms-2fa-codes li::before {
	content: counter(awwo-cms-code) ".";
	display: inline-block;
	width: 3ch;
	margin-right: 1ch;
	color: var(--awwo-cms-muted);
	text-align: right;
}

@media (max-width: 480px) {
	.awwo-cms-2fa-setup {
		grid-template-columns: minmax(0, 1fr);
	}

	.awwo-cms-2fa-qr {
		width: 184px;
	}
}

/* Users ---------------------------------------------------------------- */

/* The list is the Media Library's; the preview is the round avatar (or initials). */
.awwo-cms-users-thumb-wrap {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.awwo-cms-avatar.awwo-cms-users-thumb {
	width: 48px;
	height: 48px;
	border-width: 2px;
	font-size: 17px;
	object-fit: cover;
}

[data-awwo-cms-bulk] tr[aria-pressed="true"] .awwo-cms-users-thumb-wrap {
	border-radius: 50%;
}

/* Your own account and the last Owner cannot be picked (nor the CMS's own files). */
[data-awwo-cms-bulk] tr[aria-disabled="true"],
[data-awwo-cms-bulk] .awwo-cms-media-card[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.5;
}

.awwo-cms-users-table:not([data-awwo-cms-bulk]) .awwo-cms-media-pick-all {
	display: none;
}

.awwo-cms-users-table th:nth-child(n + 2 of :not(.awwo-cms-pick-cell)) {
	text-align: center;
}

.awwo-cms-users-table td:nth-child(n + 2 of :not(.awwo-cms-pick-cell)) {
	text-align: center;
	color: var(--awwo-cms-muted);
	font-size: 13px;
	white-space: nowrap;
}

.awwo-cms-users-role {
	font-weight: 700;
}

/* 2FA: shield with a check, green (On); shield with an ✕, red (Off). */
.awwo-cms-users-2fa {
	display: inline-flex;
	vertical-align: middle;
}

.awwo-cms-users-2fa .awwo-cms-icon {
	/* A fifth smaller than the 24px it was, so it sits quietly in its row. */
	width: 19.2px;
	height: 19.2px;
}

.awwo-cms-users-2fa-on {
	color: var(--awwo-cms-ok);
}

/* The full red, and its tooltip red too; the mark inside is light in
   both themes. */
.awwo-cms-users-2fa-off {
	--awwo-cms-tooltip-bg: var(--awwo-cms-red);
	--awwo-cms-tooltip-text: var(--awwo-cms-white);
	color: var(--awwo-cms-red);
}

.awwo-cms-users-2fa {
	--awwo-cms-icon-mark: var(--awwo-cms-white);
}

.awwo-cms-users-role-owner,
.awwo-cms-users-role-admin {
	color: var(--awwo-cms-ok);
}

.awwo-cms-users-role-pending {
	font-style: italic;
}

a.awwo-cms-media-title {
	text-decoration: none;
}

/* Settings, Services, Google: the unseen map that asks whether the Browser Key draws Maps JavaScript (Google draws only a laid-out map). */
.awwo-cms-google-probe {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 200px;
	height: 200px;
	opacity: 0;
	pointer-events: none;
}

/* Newsletter, Unsubscribed: each email address on one line. */
.awwo-cms-unsubscribed-table .awwo-cms-media-title {
	overflow-wrap: normal;
	white-space: nowrap;
}


/* Forms ---------------------------------------------------------------- */

/* Toolbar (as the other toolbars): the form's name, then its settings and
   Save Form / Update Form, all 46px. */
.awwo-cms-forms-toolbar {
	margin-bottom: 24px;
}

/* The name takes the room between the buttons, every gap the buttons' own 8px. */
.awwo-cms-forms-toolbar {
	gap: 8px;
}

.awwo-cms-forms-toolbar .awwo-cms-forms-title {
	flex: 1 1 280px;
	width: auto;
	height: 46px;
}

/* A product's two titles (Product Page Title, Shop Cards Title): each in its
   tooltip's holder, sharing the room as the name alone takes it. */
.awwo-cms-forms-toolbar .awwo-cms-forms-name {
	display: flex;
	flex: 1 1 200px;
	min-width: 0;
}

.awwo-cms-forms-toolbar .awwo-cms-forms-name > .awwo-cms-forms-title {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 1024px) {
	.awwo-cms-forms-toolbar .awwo-cms-forms-name {
		flex: 1 1 0;
	}

	.awwo-cms-forms-toolbar .awwo-cms-forms-name > .awwo-cms-forms-title {
		flex: 1 1 auto;
	}
}

/* Tablets and phones: the name on the first row, full width (beside a New
   button when there is one); the settings and Save Form / Update Form
   centred on the second. */
@media (max-width: 1024px) {
	.awwo-cms-forms-toolbar .awwo-cms-forms-title {
		flex: 0 0 100%;
		max-width: none;
	}

	.awwo-cms-forms-toolbar .awwo-cms-forms-actions {
		flex: 0 0 100%;
		justify-content: center;
	}

	/* A New button before the name (Pages, terms): both on the first row, the name taking the rest. */
	.awwo-cms-forms-toolbar > .awwo-cms-media-square + .awwo-cms-forms-title {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* Phones: the settings and Save / Update share one row evenly; Save /
   Update as an icon (a check mark, its words kept for screen readers), as
   the settings beside it, filled while it says it is done. */
@media (max-width: 480px) {
	.awwo-cms-forms-toolbar .awwo-cms-forms-actions > .awwo-cms-media-square,
	.awwo-cms-forms-toolbar .awwo-cms-forms-submit {
		flex: 1 1 0;
		width: auto;
		min-width: 0 !important;
	}

	.awwo-cms-forms-toolbar .awwo-cms-forms-submit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		padding: 0;
		font-size: 0;
		letter-spacing: 0;
	}

	.awwo-cms-forms-toolbar .awwo-cms-forms-submit::before {
		content: "";
		width: 18px;
		height: 18px;
		background: currentColor;
		-webkit-mask: url("../icons/awwo-cms-check.svg?v=0.9.0") center / contain no-repeat;
		mask: url("../icons/awwo-cms-check.svg?v=0.9.0") center / contain no-repeat;
	}
}

.awwo-cms-forms-actions .awwo-cms-button {
	box-sizing: border-box;
	height: 46px;
}

/* Pages: the builder alone, the whole width. */
.awwo-cms-boxes.awwo-cms-forms-builder-full {
	grid-template-columns: minmax(0, 1fr);
}

/* Builder and preview: two equal boxes, as every other section (.awwo-cms-boxes). */
.awwo-cms-forms-canvas {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Cards: Wraps hold columns, columns hold content; each W% wide. */
.awwo-cms-forms-wraps,
.awwo-cms-forms-columns,
.awwo-cms-forms-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
}

.awwo-cms-forms-wraps:empty,
.awwo-cms-forms-fields:empty {
	display: none;
}

.awwo-cms-forms-item {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 12px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--awwo-cms-surface);
}

.awwo-cms-forms-column {
	background: color-mix(in oklab, var(--awwo-cms-control) 50%, transparent);
}

.awwo-cms-forms-field {
	gap: 8px;
	padding: 8px;
}

/* Widths are set per card (a share of the line, the gaps included). */
.awwo-cms-forms-item {
	position: relative;
	container-type: inline-size;
}

.awwo-cms-forms-item[hidden] {
	display: none;
}

/* Being dragged: its place stays, an empty dashed block of its size. */
.awwo-cms-forms-item.is-placeholder {
	border-style: dashed;
	border-color: var(--awwo-cms-muted);
	background: transparent;
}

.awwo-cms-forms-item.is-placeholder > * {
	visibility: hidden;
}

.awwo-cms-forms-item-head {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.awwo-cms-forms-item-name {
	min-width: 0;
	overflow: hidden;
	font-size: 13px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The required mark in its label's own colour. */
.awwo-cms-forms-required {
	color: inherit;
}

/* Content's sign: a small green square (Aa, @, #, ...). */
.awwo-cms-forms-badge {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
	font-size: 11px;
	font-weight: 800;
}

.awwo-cms-forms-badge .awwo-cms-icon {
	width: 14px;
	height: 14px;
}

.awwo-cms-forms-grip {
	display: inline-flex;
	flex: none;
	color: var(--awwo-cms-muted);
	cursor: grab;
}

.awwo-cms-forms-grip .awwo-cms-icon {
	width: 14px;
	height: 14px;
}

/* Tools: width (− % +), Settings, Duplicate, Remove. */
.awwo-cms-forms-item-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}

.awwo-cms-forms-tool,
.awwo-cms-forms-step-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	background: transparent;
	color: var(--awwo-cms-muted);
	cursor: pointer;
	transition:
		color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		transform var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
	backface-visibility: hidden;
}

.awwo-cms-forms-tool .awwo-cms-icon,
.awwo-cms-forms-step-button .awwo-cms-icon {
	width: 12px;
	height: 12px;
}

.awwo-cms-forms-tool:hover,
.awwo-cms-forms-tool:focus-visible,
.awwo-cms-forms-step-button:hover:not(:disabled),
.awwo-cms-forms-step-button:focus-visible {
	border-color: var(--awwo-cms-green);
	color: var(--awwo-cms-ok);
}

.awwo-cms-forms-tool-danger:hover,
.awwo-cms-forms-tool-danger:focus-visible {
	border-color: var(--awwo-cms-red);
	color: var(--awwo-cms-fail);
	--awwo-cms-tooltip-bg: var(--awwo-cms-red);
	--awwo-cms-tooltip-text: var(--awwo-cms-white);
}

.awwo-cms-forms-step-button:disabled {
	cursor: default;
	opacity: 0.4;
}

.awwo-cms-forms-stepper {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-right: auto;
}

.awwo-cms-forms-step-value {
	min-width: 38px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

/* A narrow card: the width on its own line, its other tools centred under it. */
@container (max-width: 180px) {
	.awwo-cms-forms-item-tools {
		justify-content: center;
	}

	.awwo-cms-forms-stepper {
		flex: 0 0 100%;
		justify-content: center;
		margin-right: 0;
	}

	.awwo-cms-forms-step-value {
		min-width: 0;
	}

	.awwo-cms-forms-item-head {
		flex-wrap: wrap;
	}
}

.awwo-cms-forms-step-note {
	margin-right: auto;
	color: var(--awwo-cms-muted);
	font-size: 11px;
}

/* A content's list (an FAQ's questions, a Pricing Table's plans): each item
   a card as the builder's (outlined, 12px inside), its number and tools on
   one line, its fields under them; 16px between cards and Add. */
.awwo-cms-forms-items {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.awwo-cms-forms-items-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--awwo-cms-surface);
}

.awwo-cms-forms-items-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.awwo-cms-forms-items-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.awwo-cms-forms-items-tools {
	display: flex;
	gap: 6px;
}

/* Move Up: the down arrow turned over. */
.awwo-cms-forms-tool-up .awwo-cms-icon {
	transform: rotate(180deg);
}

/* A product's tabs: one under another, a thin line between; each its name and tools, then its Wraps (or what
   Reviews shows). Add Tab and Add Reviews Tab side by side under them. */
.awwo-cms-forms-tab {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.awwo-cms-forms-tab + .awwo-cms-forms-tab {
	padding-top: 16px;
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-forms-tab-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
}

.awwo-cms-forms-tab-name {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	overflow: hidden;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.awwo-cms-forms-tab-note {
	margin: 0;
	padding: 16px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	color: var(--awwo-cms-muted);
	font-size: 13px;
	text-align: center;
}

.awwo-cms-forms-tab-bar {
	display: flex;
	gap: 12px;
}

/* Add Wrap / Column / Content: dashed, green. */
.awwo-cms-forms-add {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 8px;
	border: 1px dashed var(--awwo-cms-green);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: transparent;
	color: var(--awwo-cms-ok);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-forms-add .awwo-cms-icon {
	width: 14px;
	height: 14px;
}

.awwo-cms-forms-add:hover,
.awwo-cms-forms-add:focus-visible {
	background: color-mix(in oklab, var(--awwo-cms-green) 10%, transparent);
}

/* An empty column: one big Add Content. */
.awwo-cms-forms-add-empty {
	min-height: 64px;
}

.awwo-cms-forms-add-row {
	position: relative;
	display: flex;
}

/*
 * Dragging: 20px drop zones outside every card (top / left: before it,
 * bottom / right: after it), grey where it may land, green under the
 * pointer; an Add Wrap row's whole box is one. A card's body: swap.
 */
.awwo-cms-forms-zone {
	position: absolute;
	z-index: 20;
	display: none;
	box-sizing: border-box;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	pointer-events: none;
}

.awwo-cms-forms-zone-top { top: -20px; right: 0; left: 0; height: 20px; }
.awwo-cms-forms-zone-bottom { right: 0; bottom: -20px; left: 0; height: 20px; }
.awwo-cms-forms-zone-left { top: 0; bottom: 0; left: -20px; width: 20px; }
.awwo-cms-forms-zone-right { top: 0; right: -20px; bottom: 0; width: 20px; }
.awwo-cms-forms-zone-row { inset: 0; }

.awwo-cms-forms-zone.is-eligible {
	display: block;
	background: color-mix(in oklab, var(--awwo-cms-muted) 25%, transparent);
	pointer-events: auto;
}

.awwo-cms-forms-zone.is-active {
	background: color-mix(in oklab, var(--awwo-cms-green) 60%, transparent);
}

.awwo-cms-forms-item.is-swap-target {
	box-shadow: inset 0 0 0 3px var(--awwo-cms-green);
}

.awwo-cms-forms-item.is-swap-target > * {
	filter: grayscale(1);
	opacity: 0.5;
}

.awwo-cms-forms-column.is-drop-column {
	outline: 2px dashed var(--awwo-cms-green);
	outline-offset: 2px;
}

.awwo-cms-forms-grip {
	touch-action: none;
}

body.awwo-cms-forms-dragging,
body.awwo-cms-forms-dragging * {
	cursor: grabbing !important;
	user-select: none;
}

/* What is being dragged, following the pointer. */
.awwo-cms-forms-drag-helper {
	position: fixed;
	z-index: 10000;
	max-width: 240px;
	padding: 6px 10px;
	overflow: hidden;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
	font-size: 12px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
}

/* Preview: the form drawn at the pane's own width. */
.awwo-cms-forms-preview {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.awwo-cms-forms-frame {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	/* The preview's own background (the panel's, light or dark). */
	background: var(--awwo-cms-surface);
}

.awwo-cms-forms-frame iframe {
	display: block;
	border: 0;
	background: transparent;
	color-scheme: normal;
}

/* The Email Builder's preview as Notifications': no frame of its own around the email (its border, background). */
.awwo-cms-email-preview .awwo-cms-forms-frame {
	margin-top: 0;
	border: 0;
	background: transparent;
}

/* The Email Builder grows with the page, as Notifications does: no column
   scrolling inside itself, so the email shows whole, its own background
   only, nothing round or under it. */
@media (min-width: 1281px) {
	.awwo-cms-backend-main:has(> .awwo-cms-email-builder) {
		display: block;
	}

	.awwo-cms-boxes.awwo-cms-forms-builder.awwo-cms-email-builder {
		grid-template-rows: auto;
		align-items: start;
		min-height: 0;
	}

	.awwo-cms-email-builder .awwo-cms-forms-canvas,
	.awwo-cms-email-builder .awwo-cms-forms-frame-scroll {
		overflow: visible;
	}
}

/* The next preview loads here, out of sight, until it is drawn. */
.awwo-cms-forms-frame iframe[hidden] {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	visibility: hidden;
}

/* Modals: settings in the field look; the form's own settings wider, four a row. */
.awwo-cms-forms-modal {
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
}

.awwo-cms-forms-modal-wide {
	width: min(760px, calc(100vw - 32px));
}

.awwo-cms-forms-modal .awwo-cms-box-head {
	margin-bottom: 16px;
}

.awwo-cms-forms-modal .awwo-cms-box-head h2 {
	/* A long title (a content's label) shortens with "…"; the buttons always fit. */
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.awwo-cms-forms-settings {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* A label on two lines never pushes its control below its neighbour's. */
.awwo-cms-forms-settings .awwo-cms-fields {
	align-items: end;
}

.awwo-cms-forms-fields-4 .awwo-cms-field {
	grid-column: span 1;
}

.awwo-cms-forms-fields-4 .awwo-cms-field-wide {
	grid-column: 1 / -1;
}

.awwo-cms-forms-section-title {
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Add Content: the types, three a row. */
.awwo-cms-forms-picker {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.awwo-cms-forms-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: transparent;
	color: var(--awwo-cms-text);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

/* Wide enough for three a row with every name on one line. */
.awwo-cms-forms-modal-picker {
	width: min(600px, calc(100vw - 32px));
}

.awwo-cms-forms-chip {
	white-space: nowrap;
}

@media (max-width: 640px) {
	.awwo-cms-forms-picker {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 440px) {
	.awwo-cms-forms-picker {
		grid-template-columns: minmax(0, 1fr);
	}
}

.awwo-cms-forms-chip:hover:not(:disabled),
.awwo-cms-forms-chip:focus-visible {
	border-color: var(--awwo-cms-green);
}

.awwo-cms-forms-chip:disabled {
	cursor: default;
	opacity: 0.4;
}

/* Wrap Layout: the layouts (a page's six-column ones too), drawn as columns. */
.awwo-cms-forms-layouts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.awwo-cms-forms-layout {
	display: flex;
	gap: 4px;
	/* The plugin's shape: three wide to two tall. */
	aspect-ratio: 3 / 2;
	padding: 6px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: transparent;
	cursor: pointer;
	transition: border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-forms-layout:hover,
.awwo-cms-forms-layout:focus-visible {
	border-color: var(--awwo-cms-green);
}

.awwo-cms-forms-layout-cell {
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 4 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 4 / 12) calc(var(--awwo-cms-radius-br, 12px) * 4 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 4 / 12);
	background: var(--awwo-cms-control);
}

.awwo-cms-forms-layout .awwo-cms-forms-w16 { flex: 16.67 1 0; }
.awwo-cms-forms-layout .awwo-cms-forms-w25 { flex: 25 1 0; }
.awwo-cms-forms-layout .awwo-cms-forms-w33 { flex: 33.33 1 0; }
.awwo-cms-forms-layout .awwo-cms-forms-w50 { flex: 50 1 0; }
.awwo-cms-forms-layout .awwo-cms-forms-w66 { flex: 66.67 1 0; }
.awwo-cms-forms-layout .awwo-cms-forms-w75 { flex: 75 1 0; }
.awwo-cms-forms-layout .awwo-cms-forms-w100 { flex: 100 1 0; }

/* Manage and Entries: every column after the first centred, as the other lists. */
.awwo-cms-forms-table th:nth-child(n + 2),
.awwo-cms-forms-table td:nth-child(n + 2),
.awwo-cms-entries-table th:nth-child(n + 2),
.awwo-cms-entries-table td:nth-child(n + 2) {
	text-align: center;
	white-space: nowrap;
}

.awwo-cms-forms-table td:nth-child(n + 2),
.awwo-cms-entries-table td:nth-child(n + 2) {
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-forms-count {
	font-weight: 700;
	color: var(--awwo-cms-ok);
}

.awwo-cms-entries-signature {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.awwo-cms-entries-modal {
	width: min(560px, calc(100vw - 32px));
}

/* New Form: Blank Form and the templates, tiles as Wrap Layout's (three
   wide to two tall); a template drawn as its form, each content a bar in
   its column (a message box taller, the button filled). */
.awwo-cms-forms-new-choices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.awwo-cms-forms-new-choice {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	aspect-ratio: 3 / 2;
	padding: 6px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	transition: border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-forms-new-choice:hover,
.awwo-cms-forms-new-choice:focus-visible {
	border-color: var(--awwo-cms-green);
}

.awwo-cms-forms-new-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

.awwo-cms-forms-new-column {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.awwo-cms-forms-new-wrap > .awwo-cms-forms-w25 { flex: 0 0 calc(25% - 2.25px); }
.awwo-cms-forms-new-wrap > .awwo-cms-forms-w33 { flex: 0 0 calc(33.33% - 2px); }
.awwo-cms-forms-new-wrap > .awwo-cms-forms-w50 { flex: 0 0 calc(50% - 1.5px); }
.awwo-cms-forms-new-wrap > .awwo-cms-forms-w66 { flex: 0 0 calc(66.67% - 1px); }
.awwo-cms-forms-new-wrap > .awwo-cms-forms-w75 { flex: 0 0 calc(75% - 0.75px); }
.awwo-cms-forms-new-wrap > .awwo-cms-forms-w100 { flex: 0 0 100%; }

.awwo-cms-forms-new-field {
	height: 7px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 2 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 2 / 12) calc(var(--awwo-cms-radius-br, 12px) * 2 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 2 / 12);
	background: var(--awwo-cms-control);
}

.awwo-cms-forms-new-field.is-textarea {
	height: 14px;
}

.awwo-cms-forms-new-field.is-submit {
	background: var(--awwo-cms-green);
}

/* Manage: a form's status. */
.awwo-cms-forms-status {
	font-weight: 700;
}

.awwo-cms-forms-status-on {
	color: var(--awwo-cms-ok);
}

.awwo-cms-forms-status-off {
	color: var(--awwo-cms-fail);
}

/* An order's status: Completed green, Cancelled red, the others (still to
   do) amber. */
.awwo-cms-order-status {
	color: var(--awwo-cms-warn);
}

.awwo-cms-order-status-completed {
	color: var(--awwo-cms-ok);
}

.awwo-cms-order-status-cancelled {
	color: var(--awwo-cms-fail);
}

.awwo-cms-order-items {
	color: var(--awwo-cms-muted);
	font-size: 12px;
}

/* An order's page: its details as label and value, its lines (each name,
   how many at what price, choices and files; its total at the end) and
   totals, its addresses as written. */
.awwo-cms-order-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	font-size: 14px;
}

.awwo-cms-order-meta > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.awwo-cms-order-meta dt {
	color: var(--awwo-cms-muted);
}

.awwo-cms-order-meta dd {
	margin: 0;
	text-align: right;
	overflow-wrap: anywhere;
}

.awwo-cms-order-lines {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-order-lines > li {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}

.awwo-cms-order-line-name {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	font-size: 14px;
}

.awwo-cms-order-line-sub {
	color: var(--awwo-cms-muted);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.awwo-cms-order-line-key {
	color: var(--awwo-cms-text);
	font-weight: 700;
}

.awwo-cms-order-file {
	font-size: 13px;
}

.awwo-cms-order-line-total {
	flex: none;
	font-size: 14px;
}

.awwo-cms-order-totals {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-order-totals > p {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	font-size: 14px;
}

.awwo-cms-order-totals > .awwo-cms-order-total {
	font-size: 18px;
}

.awwo-cms-order-totals > .awwo-cms-order-refunded {
	color: var(--awwo-cms-fail);
}

.awwo-cms-order-totals > .awwo-cms-order-tax {
	justify-content: flex-end;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-order-address {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

/* Up to 1280px: builder and preview full width, one under the other
   (side by side, the cards get too narrow to edit). */
@media (max-width: 1280px) {
	.awwo-cms-boxes.awwo-cms-forms-builder {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Wider: builder and preview reach the bottom of the canvas, each
   scrolling inside itself (at least 420px tall; below that the canvas
   scrolls). The canvas stacks the page as a column for that, so the
   tabs drop their top margin (the lead's 24px stays the gap). */
@media (min-width: 1281px) {
	.awwo-cms-backend-main:has(> .awwo-cms-forms-builder) {
		display: flex;
		flex-direction: column;
	}

	.awwo-cms-backend-main:has(> .awwo-cms-forms-builder) > .awwo-cms-tabs {
		margin-top: 0;
	}

	/* Heading, tabs and top bar keep their height; only the builder row
	   takes (or gives up) the room that is left. */
	.awwo-cms-backend-main:has(> .awwo-cms-forms-builder) > * {
		flex-shrink: 0;
	}

	.awwo-cms-boxes.awwo-cms-forms-builder {
		flex: 1 1 auto;
		grid-template-rows: minmax(0, 1fr);
		align-items: stretch;
		min-height: 420px;
	}

	.awwo-cms-forms-canvas,
	.awwo-cms-forms-frame-scroll {
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* The preview box itself never clips (its buttons' tooltips show above
	   it); only the frame inside scrolls. */
	.awwo-cms-forms-preview {
		min-height: 0;
		overflow: visible;
	}

	.awwo-cms-forms-frame-scroll {
		flex: 1 1 auto;
	}

	.awwo-cms-forms-frame {
		flex: none;
	}
}

/* Notifications: the emails as an accordion on the left (one open), the
   open one's preview on the right. */
.awwo-cms-notifications-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* A box's title opens it: the whole title row, a + / − at its end. */
.awwo-cms-notification .awwo-cms-box-head h2 {
	flex: 1 1 auto;
	min-width: 0;
}

.awwo-cms-notification-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: inherit;
	cursor: pointer;
}

.awwo-cms-notification-toggle .awwo-cms-icon {
	flex: none;
	width: 14px;
	height: 14px;
	color: var(--awwo-cms-ok);
}

.awwo-cms-notification[data-open] .awwo-cms-notification-toggle {
	cursor: default;
}

/* Closed: only its title row, half an open box's head (the row is the button). */
.awwo-cms-notification:not([data-open]) {
	padding-top: 0;
	padding-bottom: 0;
}

.awwo-cms-notification:not([data-open]) .awwo-cms-box-head {
	min-height: 0;
}

.awwo-cms-notification:not([data-open]) .awwo-cms-notification-toggle {
	min-height: 41px;
}

.awwo-cms-notification-body {
	margin-top: 16px;
}

/* The placeholders under the message: centred, as the alignment buttons above them. */
.awwo-cms-notifications-vars {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.awwo-cms-notifications-var {
	padding: 4px 10px;
	border: 1px dashed var(--awwo-cms-ok);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	background: transparent;
	color: var(--awwo-cms-ok);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-notifications-var:hover,
.awwo-cms-notifications-var:focus-visible {
	background: color-mix(in oklab, var(--awwo-cms-green) 10%, transparent);
}

/* The preview: a box with only its border, the email inside it. */
.awwo-cms-notifications-preview {
	min-width: 0;
	background: transparent;
}

.awwo-cms-notifications-frame {
	position: relative;
	overflow: hidden;
	margin-top: 16px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
}

/* The email previews (Notifications, the Email Builder): the frame keeps the default scheme from its first paint, as
   the email inside does (the layout's html[data-awwo-cms-email-scheme]); a frame and email that differ get an opaque backdrop
   the browser never repaints (a darker band round the card). Never give either another scheme. */
.awwo-cms-notifications-frame iframe {
	display: block;
	width: 100%;
	height: 480px;
	border: 0;
	background: transparent;
	color-scheme: normal;
}

/* The next preview loads here, out of sight, until it is drawn. */
.awwo-cms-notifications-frame iframe[hidden] {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	visibility: hidden;
}

/* Pages, Search Engine Optimization: a modal, its fields first, then the
   Social and Google previews, one under the other. */
.awwo-cms-page-seo-body,
.awwo-cms-page-seo-preview {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Its Redirects: the lists' table in its own frame (the panel's border and
   corners), its cells padded as there (Old Address, then each one's Delete,
   at the end); a long old address wraps. */
.awwo-cms-seo-redirects-wrap {
	overflow-x: auto;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, var(--awwo-cms-radius)) var(--awwo-cms-radius-tr, var(--awwo-cms-radius)) var(--awwo-cms-radius-br, var(--awwo-cms-radius)) var(--awwo-cms-radius-bl, var(--awwo-cms-radius));
	background: var(--awwo-cms-surface);
}

.awwo-cms-seo-redirects :is(th, td):last-child {
	width: 1%;
}

.awwo-cms-seo-redirects .awwo-cms-media-title {
	overflow-wrap: anywhere;
}

/* Generate Open Graph with QR: the whole width, above the Social Preview (16px, as every field). */
.awwo-cms-seo-qr-og {
	width: 100%;
	margin-bottom: 16px;
}

/* Its window: the image as it will be (1200 x 630, the code centred at about
   470 / 630 of its height), 16px above the colours. */
.awwo-cms-seo-qr-og-modal {
	width: min(480px, calc(100vw - 32px));
}

.awwo-cms-seo-qr-og-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1200 / 630;
	margin-bottom: 16px;
	overflow: hidden;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, var(--awwo-cms-radius)) var(--awwo-cms-radius-tr, var(--awwo-cms-radius)) var(--awwo-cms-radius-br, var(--awwo-cms-radius)) var(--awwo-cms-radius-bl, var(--awwo-cms-radius));
}

.awwo-cms-seo-qr-og-preview > svg {
	display: block;
	width: auto;
	height: 74.6%;
}

/* The built-in AWWO® Brand's: not there (its share image is its own). */
[data-awwo-cms-seo-readonly] .awwo-cms-seo-qr-og {
	display: none;
}

/* The Social Preview's image is the Open Graph Image's picker. */
.awwo-cms-social-preview-choose {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.awwo-cms-social-preview-choose .awwo-cms-image-pick-overlay {
	border-radius: 0;
}

.awwo-cms-social-preview-choose:hover .awwo-cms-image-pick-overlay,
.awwo-cms-social-preview-choose:focus-visible .awwo-cms-image-pick-overlay {
	opacity: 1;
}

/* ✕ inside the image's corner (the card clips anything outside it). */
.awwo-cms-social-preview-image .awwo-cms-image-pick-clear {
	top: 8px;
	right: 8px;
	z-index: 1;
}

.awwo-cms-page-seo-label {
	margin: 0 0 -8px;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

/* A share as it shows: the image (1.91 : 1, square when it is), then the
   site, title and description. */
.awwo-cms-social-preview {
	overflow: hidden;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, 12px) var(--awwo-cms-radius-tr, 12px) var(--awwo-cms-radius-br, 12px) var(--awwo-cms-radius-bl, 12px);
	background: var(--awwo-cms-surface);
}

.awwo-cms-social-preview-image {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1.91 / 1;
	max-height: 400px;
	background: var(--awwo-cms-control);
}

/* A square one: the card's whole width, as tall (no 400px cap, which left
   it narrower than the card). */
.awwo-cms-social-preview-image.is-square {
	width: 100%;
	max-height: none;
	aspect-ratio: 1 / 1;
}

/* Only viewed (the built-in AWWO® Brand's): no ✕, no picker's overlay or pointer. */
[data-awwo-cms-seo-readonly] .awwo-cms-social-preview-image .awwo-cms-image-pick-clear,
[data-awwo-cms-seo-readonly] .awwo-cms-social-preview-choose .awwo-cms-image-pick-overlay {
	display: none;
}

[data-awwo-cms-seo-readonly] .awwo-cms-social-preview-choose {
	cursor: default;
}

.awwo-cms-social-preview-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.awwo-cms-social-preview-body {
	padding: 12px 16px;
	border-top: 1px solid var(--awwo-cms-border);
	background: var(--awwo-cms-control);
}

.awwo-cms-social-preview-domain {
	margin-top: 4px;
	color: var(--awwo-cms-muted);
	font-size: 12px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.awwo-cms-social-preview-desc {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 1.35;
}

/* The titles keep to one line: their size shrinks to fit up to 60
   characters, the Meta Title's longest (awwo-cms-page-seo.js); past that
   (a longer page title) the end is cut. */
.awwo-cms-social-preview-title,
.awwo-cms-search-preview-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.awwo-cms-social-preview-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.awwo-cms-social-preview-desc {
	margin-top: 2px;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-social-preview-desc[hidden] {
	display: none;
}

/* The Manage table's SEO lights: green within, red to look at. */
.awwo-cms-seo-lights {
	display: inline-flex;
	gap: 6px;
}

.awwo-cms-seo-light {
	width: 12px;
	height: 12px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 3 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 3 / 12) calc(var(--awwo-cms-radius-br, 12px) * 3 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 3 / 12);
	background: var(--awwo-cms-red);
}

.awwo-cms-seo-light.is-ok {
	background: var(--awwo-cms-green);
}

/* Not passed: its tooltip in the same red as the light. */
.awwo-cms-seo-light:not(.is-ok)[data-awwo-cms-tooltip] {
	--awwo-cms-tooltip-bg: var(--awwo-cms-red);
	--awwo-cms-tooltip-text: var(--awwo-cms-white);
}

/* A search result as it shows: site, address, the title in the search
   engine's blue, the description. */
.awwo-cms-search-preview {
	padding: 12px 16px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, 12px) var(--awwo-cms-radius-tr, 12px) var(--awwo-cms-radius-br, 12px) var(--awwo-cms-radius-bl, 12px);
	background: var(--awwo-cms-surface);
	font-family: Arial, Helvetica, sans-serif;
	--awwo-cms-search-link: #1a0dab;
}

:root[data-theme="dark"] .awwo-cms-search-preview {
	--awwo-cms-search-link: #8ab4f8;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .awwo-cms-search-preview {
		--awwo-cms-search-link: #8ab4f8;
	}
}

.awwo-cms-search-preview-site {
	font-size: 14px;
}

.awwo-cms-search-preview-url {
	overflow: hidden;
	color: var(--awwo-cms-muted);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.awwo-cms-search-preview-title {
	margin-top: 4px;
	color: var(--awwo-cms-search-link);
	font-size: 18px;
	line-height: 1.3;
}

.awwo-cms-search-preview-desc {
	margin-top: 4px;
	color: var(--awwo-cms-muted);
	font-size: 13px;
	line-height: 1.5;
}

.awwo-cms-search-preview-desc[hidden] {
	display: none;
}

/* Appearance (full screen) ------------------------------------------------ */

/* No frame: the settings panel on the left, the preview filling the rest. */
body.awwo-cms-backend-full {
	display: block;
	background: var(--awwo-cms-bg);
}

.awwo-cms-appearance {
	display: grid;
	grid-template-columns: 420px minmax(0, 1fr);
	gap: 24px;
	box-sizing: border-box;
	height: 100vh;
	padding: 24px;
}

.awwo-cms-appearance-panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 0;
	overflow: hidden;
}

.awwo-cms-appearance-panel > .awwo-cms-box-head {
	margin: 0;
	padding: 16px 20px;
	border-bottom: 1px solid var(--awwo-cms-border);
}

/* Customizer and Fonts: their tabs right under the title, as Menus' (no panel gap between). */
.awwo-cms-appearance-panel > .awwo-cms-box-head + .awwo-cms-appearance-tabs {
	margin-top: -16px;
}

.awwo-cms-appearance-panel h1 {
	margin: 0;
	font-size: 18px;
}

/* The sections scroll; their heads are rows like Notifications' accordion. */
.awwo-cms-appearance-sections {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The Customizer's sections: the accordion's cards (as a menu's), 16px
   apart and 16px from the panel's edges; the open one's border green. */
.awwo-cms-appearance-accordion {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
}

.awwo-cms-appearance-section {
	flex: none;
	padding: 0 16px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--awwo-cms-surface);
}

.awwo-cms-appearance-section[data-open] {
	border-color: var(--awwo-cms-ok);
}

.awwo-cms-appearance-section h2 {
	margin: 0;
	font-size: 14px;
}

/* A card's title 16px from its top, as its fields are from its sides and bottom. */
.awwo-cms-appearance-section .awwo-cms-notification-toggle,
.awwo-cms-appearance-row .awwo-cms-notification-toggle {
	padding: 16px 0;
	line-height: 22px;
}

.awwo-cms-appearance-section[data-open] .awwo-cms-notification-toggle {
	cursor: default;
}

.awwo-cms-appearance-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 16px;
}

/* The preview: the size buttons above the site, a computer filling the
   space, a tablet or phone at its own width, centred. */
.awwo-cms-appearance-preview {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 0;
}

.awwo-cms-appearance-devices {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 8px;
}

/* Appearance's light / dark switch (full screen: no top bar): the page's top right. */
.awwo-cms-appearance-theme {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

.awwo-cms-appearance-devices [aria-pressed="true"] {
	color: var(--awwo-cms-white);
	background: var(--awwo-cms-ok);
	border-color: var(--awwo-cms-ok);
}

.awwo-cms-appearance-frame {
	flex: 1;
	display: flex;
	justify-content: center;
	min-height: 0;
}

.awwo-cms-appearance-frame iframe {
	width: 100%;
	height: 100%;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, 12px) var(--awwo-cms-radius-tr, 12px) var(--awwo-cms-radius-br, 12px) var(--awwo-cms-radius-bl, 12px);
	background: var(--awwo-cms-white);
	transition: width 0.6s ease;
}

.awwo-cms-appearance-frame[data-device="tablet"] iframe {
	width: 768px;
	max-width: 100%;
}

.awwo-cms-appearance-frame[data-device="mobile"] iframe {
	width: 375px;
	max-width: 100%;
}

/* Narrow windows: the panel above the preview. */
@media (max-width: 900px) {
	.awwo-cms-appearance {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
		padding: 16px;
		gap: 16px;
	}
}

/* Appearance tabs: under the panel's head, centred, each a round icon button as the
   header's (the open one in the hover colour), a thin divider between them; the
   bar never scrolls, so the names' tooltips open above it. */
.awwo-cms-appearance-tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 16px 20px;
	border-bottom: 1px solid var(--awwo-cms-border);
}

.awwo-cms-appearance-tab {
	flex: none;
}

/* The open one in the hover colour; hovered, it lifts and fills as every round button (awwo-cms-system.css). */
.awwo-cms-appearance-tab[aria-current="page"]:not(:hover, :focus-visible) {
	color: var(--awwo-cms-ok);
	border-color: currentColor;
}

.awwo-cms-appearance-tab-divider {
	flex: none;
	width: 1px;
	height: 20px;
	background: var(--awwo-cms-border);
}

/* Menus: the menu's items, indented by their depth, each with its buttons
   and its settings (Label, Link, New Tab, Menu Access) under Edit. */
.awwo-cms-appearance-menus {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
}

.awwo-cms-menu-entries {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-menu-entry {
	padding: 8px 8px 8px 12px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--awwo-cms-surface);
}

.awwo-cms-menu-entry-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.awwo-cms-menu-entry-label {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.awwo-cms-menu-entry-label strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.awwo-cms-menu-entry-label small {
	color: var(--awwo-cms-muted);
	font-size: 11px;
}

.awwo-cms-menu-entry-buttons {
	display: flex;
	flex: none;
}

.awwo-cms-menu-entry-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	background: transparent;
	color: var(--awwo-cms-muted);
	cursor: pointer;
}

.awwo-cms-menu-entry-button .awwo-cms-icon {
	width: 12px;
	height: 12px;
}

.awwo-cms-menu-entry-button:hover:not(:disabled),
.awwo-cms-menu-entry-button:focus-visible {
	color: var(--awwo-cms-ok);
}

.awwo-cms-menu-entry-button:disabled {
	opacity: 0.3;
	cursor: default;
}

.awwo-cms-menu-entry-editor {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--awwo-cms-border);
}

/* Checkboxes three in a row, in even columns: each one right under the one above. */
.awwo-cms-menu-access {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px 16px;
}

/* Customizer, Articles: a row per Articles page (its page and its Page
   Status, Remove beside the status when there are several), 16px apart,
   then Add New Articles Page as wide as the rows. */
.awwo-cms-article-pages {
	display: grid;
	grid-column: 1 / -1;
	gap: 16px;
}

/* Between two Articles pages' rows (One, Two...): a thin line, as the Customizer's dividers, 16px either side. */
.awwo-cms-article-pages-row + .awwo-cms-article-pages-row {
	padding-top: 16px;
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-article-pages-status {
	display: flex;
	gap: 8px;
}

.awwo-cms-article-pages-status select {
	flex: 1;
	min-width: 0;
}

.awwo-cms-article-pages-add {
	width: 100%;
	/* Its words as a small button's (12px). */
	font-size: 12px;
}

/* In a builder's settings (an article's Categories): as many columns as
   fit, so a longer name keeps its line. */
.awwo-cms-forms-settings .awwo-cms-menu-access {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.awwo-cms-menu-access label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
}

.awwo-cms-menu-empty {
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-menu-add {
	align-items: end;
}

.awwo-cms-menu-delete {
	align-self: flex-start;
}

/* Fonts: the site's fonts (each in its own face) and Google's, with their weights. */
.awwo-cms-font-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-font {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px 12px;
	padding: 10px 12px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--awwo-cms-surface);
}

/* A font's name as the Menus tab's item names are (the panel's size, bold), in its own face. */
.awwo-cms-font-name {
	overflow: hidden;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.awwo-cms-font small {
	grid-column: 1;
	color: var(--awwo-cms-muted);
	font-size: 11px;
}

.awwo-cms-font > .awwo-cms-menu-entry-button {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.awwo-cms-font-result .awwo-cms-menu-access {
	grid-column: 1 / -1;
}

.awwo-cms-font-result > .awwo-cms-button {
	grid-column: 2;
	grid-row: 1 / span 2;
}

/* Box heads: when a head's buttons do not fit beside its title, they turn
   into square icon buttons (awwo-cms-box-heads.js), each with its name in a
   tooltip above it; with room again, they are text buttons once more. The
   button keeps its own text (and states such as Updated), only hidden. */
.awwo-cms-box-head.is-compact .awwo-cms-button[data-awwo-cms-icon] {
	position: relative;
	width: var(--awwo-cms-compact-size, 46px);
	min-width: 0 !important;
	height: var(--awwo-cms-compact-size, 46px);
	padding: 0;
	font-size: 0;
	letter-spacing: 0;
}

.awwo-cms-box-head.is-compact .awwo-cms-button[data-awwo-cms-icon]::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--awwo-cms-icon) center / contain no-repeat;
	mask: var(--awwo-cms-icon) center / contain no-repeat;
}

/* Measuring: the head as it would be with text buttons on one line. */
.awwo-cms-box-head.is-measuring,
.awwo-cms-box-head.is-measuring .awwo-cms-box-buttons {
	flex-wrap: nowrap;
	white-space: nowrap;
}

.awwo-cms-button[data-awwo-cms-icon="check"] {
	--awwo-cms-icon: url("../icons/awwo-cms-check.svg?v=0.9.0");
}

.awwo-cms-button[data-awwo-cms-icon="xmark"] {
	--awwo-cms-icon: url("../icons/awwo-cms-xmark.svg?v=0.9.0");
}

.awwo-cms-button[data-awwo-cms-icon="trash-can"] {
	--awwo-cms-icon: url("../icons/awwo-cms-trash-can.svg?v=0.11.0");
}

.awwo-cms-button[data-awwo-cms-icon="eraser"] {
	--awwo-cms-icon: url("../icons/awwo-cms-eraser.svg?v=0.9.0");
}

/* Every add or new button wears the same round plus, AWWO®'s own file. */
.awwo-cms-button[data-awwo-cms-icon="circle-plus"] {
	--awwo-cms-icon: url("../icons/awwo-cms-circle-plus.svg?v=0.9.0");
}


.awwo-cms-button[data-awwo-cms-icon="table-cells-large"] {
	--awwo-cms-icon: url("../icons/awwo-cms-table-cells-large.svg?v=0.9.0");
}

.awwo-cms-button[data-awwo-cms-icon="pen-to-square"] {
	--awwo-cms-icon: url("../icons/awwo-cms-pen-to-square.svg?v=0.9.0");
}

.awwo-cms-button[data-awwo-cms-icon="list"] {
	--awwo-cms-icon: url("../icons/awwo-cms-list.svg?v=0.9.0");
}

.awwo-cms-button[data-awwo-cms-icon="copy"] {
	--awwo-cms-icon: url("../icons/awwo-cms-copy.svg?v=0.9.0");
}

.awwo-cms-button[data-awwo-cms-icon="download"] {
	--awwo-cms-icon: url("../icons/awwo-cms-download.svg?v=0.9.0");
}

.awwo-cms-button[data-awwo-cms-icon="rotate"] {
	--awwo-cms-icon: url("../icons/awwo-cms-rotate.svg?v=0.9.0");
}

.awwo-cms-button[data-awwo-cms-icon="paper-plane"] {
	--awwo-cms-icon: url("../icons/awwo-cms-paper-plane.svg?v=0.9.0");
}

/* A brand's own button (Captcha Protection's Cloudflare): its own logo. */
.awwo-cms-button[data-awwo-cms-icon="cloudflare"] {
	--awwo-cms-icon: url("../icons/awwo-cms-cloudflare.svg?v=0.9.0");
}

/* Its mark is wide and low: drawn wider, so it weighs as much as the square icons beside it. */
.awwo-cms-box-head.is-compact .awwo-cms-button[data-awwo-cms-icon="cloudflare"]::before {
	width: 24px;
	height: 24px;
}


/* Checkboxes (Bulk Select, Menu Access, font weights): the CMS's own, the
   fields' look at rest (their background, border and rounding), filled
   green with a white tick when checked; green outline on hover and focus. */
.awwo-cms-backend input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-grid;
	place-content: center;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 5 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 5 / 12) calc(var(--awwo-cms-radius-br, 12px) * 5 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 5 / 12);
	background: var(--awwo-cms-control);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

.awwo-cms-backend input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--awwo-cms-white);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18'%3E%3Cpath d='M4.6 12.6l4.8 4.8 10-10.4' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18'%3E%3Cpath d='M4.6 12.6l4.8 4.8 10-10.4' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: scale(0);
	transition: transform 0.15s;
}

.awwo-cms-backend input[type="checkbox"]:checked {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
}

.awwo-cms-backend input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.awwo-cms-backend input[type="checkbox"]:hover:not(:disabled),
.awwo-cms-backend input[type="checkbox"]:focus-visible {
	border-color: var(--awwo-cms-ok);
}

.awwo-cms-backend input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--awwo-cms-ok);
	outline-offset: 2px;
}

.awwo-cms-backend input[type="checkbox"]:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Its label beside it: clicking the text ticks it too. */
.awwo-cms-menu-access label {
	cursor: pointer;
}

/* Menus: the list of menus, then one menu's editor. */
.awwo-cms-appearance-top > .awwo-cms-box-head {
	margin: 0;
	padding: 16px 20px;
	border-bottom: 1px solid var(--awwo-cms-border);
}

.awwo-cms-menu-create {
	align-self: flex-start;
}

.awwo-cms-menu-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A menu: its name, how many items and where it shows; the whole card opens it. */
.awwo-cms-menu-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--awwo-cms-surface);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s;
}

.awwo-cms-menu-card:hover,
.awwo-cms-menu-card:focus-visible {
	border-color: var(--awwo-cms-ok);
}

.awwo-cms-menu-card > .awwo-cms-icon {
	flex: none;
	width: 12px;
	height: 12px;
	color: var(--awwo-cms-ok);
}

/* The editor's head: back to the list on the left, Delete and Update on the right. */
.awwo-cms-menu-editor-head {
	margin: 0;
	padding: 12px 20px;
	border-bottom: 1px solid var(--awwo-cms-border);
}

.awwo-cms-menu-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--awwo-cms-text);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.awwo-cms-menu-back .awwo-cms-icon {
	width: 12px;
	height: 12px;
	color: var(--awwo-cms-ok);
	transform: rotate(90deg);
}

.awwo-cms-menu-back:hover,
.awwo-cms-menu-back:focus-visible {
	color: var(--awwo-cms-ok);
}

/* Add Item: Page or Link, one at a time. */
.awwo-cms-menu-kinds {
	display: flex;
	gap: 8px;
}

.awwo-cms-menu-kinds [aria-pressed="true"] {
	color: var(--awwo-cms-white);
	background: var(--awwo-cms-ok);
	border-color: var(--awwo-cms-ok);
}

/* An item: its drag handle, name and buttons; indented by its level. */
.awwo-cms-menu-entry {
	transition: margin-left 0.15s;
}

.awwo-cms-menu-entry-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 20px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--awwo-cms-muted);
	cursor: grab;
	touch-action: none;
}

.awwo-cms-menu-entry-handle .awwo-cms-icon {
	width: 12px;
	height: 12px;
}

.awwo-cms-menu-entry-row > .awwo-cms-menu-entry-label {
	flex: 1;
}

.awwo-cms-menu-entry.is-dragging {
	position: relative;
	z-index: 2;
	border-color: var(--awwo-cms-ok);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
	transition: none;
}

.awwo-cms-menu-entry.is-dragging .awwo-cms-menu-entry-handle {
	cursor: grabbing;
}

.awwo-cms-menu-moves {
	display: flex;
	gap: 4px;
}

/* While an item is dragged: no text selected, the grabbing hand everywhere. */
body.awwo-cms-dragging {
	cursor: grabbing;
	user-select: none;
}

/* Footer Widgets' toolbar: only Close and Update, at its end. */
.awwo-cms-footer-widgets-toolbar {
	justify-content: flex-end;
}

/* Header and Footer: each row (Header Canvas, Top Bar, Navigation, ...) is
   its own accordion inside the section, a box like a menu's card. */
.awwo-cms-appearance-row {
	padding: 0 16px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--awwo-cms-surface);
}

.awwo-cms-appearance-row > h3 {
	margin: 0;
	font-size: 14px;
}

.awwo-cms-appearance-row[data-open] {
	border-color: var(--awwo-cms-ok);
}

/* Every section, closed or open: the page's darker background. */
.awwo-cms-appearance-section {
	background: var(--awwo-cms-bg);
}

/* A row inside a section (an accordion in the accordion), closed or open:
   lighter than its section (white in light mode, the palette's blue in
   dark), its fields darker (the page's background). */
.awwo-cms-appearance-row {
	--awwo-cms-row-bg: var(--awwo-cms-surface);
	--awwo-cms-control: var(--awwo-cms-bg);
	background: var(--awwo-cms-row-bg);
}

:root[data-theme="dark"] .awwo-cms-appearance-row {
	--awwo-cms-row-bg: var(--awwo-cms-navy);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .awwo-cms-appearance-row {
		--awwo-cms-row-bg: var(--awwo-cms-navy);
	}
}

/* Light mode: an open section's fields white on its darker background (the surface, as the preview's page). */
:root[data-theme="light"] .awwo-cms-appearance-section[data-open] {
	--awwo-cms-control: var(--awwo-cms-surface);
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme]) .awwo-cms-appearance-section[data-open] {
		--awwo-cms-control: var(--awwo-cms-surface);
	}
}

.awwo-cms-appearance-row-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 16px;
}

.awwo-cms-appearance-row-body > h4 {
	margin: 0;
}

/* Bulk Select in a table: a checkbox column first, shown only while bulk
   selecting; every checkbox in one line, centred in its cell. */
.awwo-cms-pick-cell {
	width: 18px;
	padding-right: 0;
	text-align: center;
	vertical-align: middle;
}

.awwo-cms-pick-cell input {
	display: block;
}

.awwo-cms-media-table:not([data-awwo-cms-bulk]) .awwo-cms-pick-cell {
	display: none;
}

/* Pages: Date & Time and Updated as the other tables' dates (centred, smaller, muted, one line). */
.awwo-cms-pages-table th:nth-child(n + 4 of :not(.awwo-cms-pick-cell)),
.awwo-cms-pages-table td:nth-child(n + 4 of :not(.awwo-cms-pick-cell)) {
	text-align: center;
}

.awwo-cms-pages-table td:nth-child(n + 4 of :not(.awwo-cms-pick-cell)) {
	color: var(--awwo-cms-muted);
	font-size: 13px;
	white-space: nowrap;
}

/* Articles: its Categories and Tags (names, comma separated) as the
   other columns' text, wrapping when long. */
.awwo-cms-articles-table td:is([data-awwo-cms-col="categories"], [data-awwo-cms-col="tags"]) {
	min-width: 120px;
	color: var(--awwo-cms-muted);
	font-size: 13px;
	text-align: center;
	white-space: normal;
}

.awwo-cms-articles-table th[data-awwo-cms-col="categories"] {
	text-align: center;
}

/* Reactions in a table: likes (the heart, green) and dislikes (the poo, red),
   each its icon and count. */
.awwo-cms-reaction-counts {
	display: inline-flex;
	gap: 12px;
	white-space: nowrap;
}

.awwo-cms-reaction-counts > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--awwo-cms-ok);
	font-weight: 700;
}

.awwo-cms-reaction-counts > .is-dislike {
	color: var(--awwo-cms-fail);
}

/* Crappy Power's tooltip is red, as on the site. */
.awwo-cms-reaction-counts > .is-dislike[data-awwo-cms-tooltip] {
	--awwo-cms-tooltip-bg: var(--awwo-cms-red);
	--awwo-cms-tooltip-text: var(--awwo-cms-white);
}

.awwo-cms-reaction-counts .awwo-cms-icon {
	width: 14px;
	height: 14px;
}

/* Comments: the comment's text wraps (up to 160 characters shown); it
   opens its modal, as a title link. */
.awwo-cms-comment-excerpt {
	min-width: 240px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
	cursor: pointer;
}

/* Its modal: who wrote it, when, on which article; the comment it answers,
   quoted; then its text and status. */
.awwo-cms-comment-modal-meta {
	margin: 0 0 16px;
}

.awwo-cms-comment-modal-parent {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

.awwo-cms-comment-modal-parent blockquote {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 12px 16px;
	border-left: 3px solid var(--awwo-cms-green);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--awwo-cms-bg);
	color: var(--awwo-cms-muted);
	font-size: 13px;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.awwo-cms-comment-modal-parent strong {
	color: var(--awwo-cms-text);
}

/* Categories and Tags: every column after the name as Date & Time. */
.awwo-cms-terms-table th:nth-child(n + 3 of :not(.awwo-cms-pick-cell)),
.awwo-cms-terms-table td:nth-child(n + 3 of :not(.awwo-cms-pick-cell)) {
	text-align: center;
}

.awwo-cms-terms-table td:nth-child(n + 3 of :not(.awwo-cms-pick-cell)) {
	color: var(--awwo-cms-muted);
	font-size: 13px;
	white-space: nowrap;
}

/* Media list: Updated as Date & Time. */
.awwo-cms-media-table:not(.awwo-cms-pages-table, .awwo-cms-users-table, .awwo-cms-locations-table) th:nth-child(4 of :not(.awwo-cms-pick-cell)),
.awwo-cms-media-table:not(.awwo-cms-pages-table, .awwo-cms-users-table, .awwo-cms-locations-table) td:nth-child(4 of :not(.awwo-cms-pick-cell)) {
	text-align: center;
}

.awwo-cms-media-table:not(.awwo-cms-pages-table, .awwo-cms-users-table, .awwo-cms-locations-table) td:nth-child(4 of :not(.awwo-cms-pick-cell)) {
	color: var(--awwo-cms-muted);
	font-size: 13px;
	white-space: nowrap;
}

/* Pages: each page's complete address, under its title. */
.awwo-cms-page-link {
	color: var(--awwo-cms-muted);
	text-decoration: none;
}

.awwo-cms-page-link:hover,
.awwo-cms-page-link:focus-visible {
	color: var(--awwo-cms-ok);
}

/* Upload / Change Avatar's tooltip rises with the avatar (the same 6px, timing and easing). */
.awwo-cms-avatar-pick[data-awwo-cms-tooltip]::after {
	transition:
		opacity 0.15s,
		transform var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-avatar-pick[data-awwo-cms-tooltip]:has(.awwo-cms-image-pick-preview:hover, .awwo-cms-image-pick-preview:focus-visible)::after {
	transform: translate(-50%, -6px);
}

/* Upload / Change Avatar is the picture's: pointing at Remove shows only Remove's. */
.awwo-cms-avatar-pick[data-awwo-cms-tooltip]:has(.awwo-cms-image-pick-clear:hover, .awwo-cms-image-pick-clear:focus-visible)::after {
	opacity: 0;
}

/* Pages, QR Code modal: Generate while there is none; then the code (in its
   Color), its address, Color and Size, and Preview, Download, Delete. */
.awwo-cms-page-qr {
	width: min(420px, calc(100vw - 32px));
}

.awwo-cms-page-qr-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.awwo-cms-page-qr-body .awwo-cms-modal-text {
	margin: 0;
}

.awwo-cms-page-qr-body > .awwo-cms-fields {
	align-self: stretch;
}

.awwo-cms-page-qr-view {
	width: 200px;
	padding: 8px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	/* As every QR Code box of the CMS, in both themes: the card colour, a thin outline. */
	outline: 1px solid var(--awwo-cms-border);
	background: var(--awwo-cms-surface);
}

.awwo-cms-page-qr-view svg {
	display: block;
	width: 100%;
	height: auto;
}

.awwo-cms-page-qr-url {
	font-size: 13px;
	overflow-wrap: anywhere;
	text-align: center;
}

.awwo-cms-page-qr-actions {
	display: flex;
	gap: 8px;
}

/* Date & Time: what happened and when, one per line (Created / Uploaded /
   Submitted, then Updated where the last change is kept). */
.awwo-cms-dates {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
	white-space: nowrap;
}

/* Its labels as the dates (muted, regular), as Member Since: in a profile. */
.awwo-cms-dates strong {
	font-weight: inherit;
	color: inherit;
}

/* Screen Options: a column chosen hidden stays in the table (so the
   columns keep their count and look), just not shown. */
.awwo-cms-media-table [data-awwo-cms-col][hidden] {
	display: none;
}

/* Screen Options (as WordPress's): a tab at the page's top right, beside the
   title; its panel opens above the page. */
.awwo-cms-screen-meta-links {
	float: right;
	margin-left: 16px;
}

.awwo-cms-screen-meta-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, var(--awwo-cms-radius)) var(--awwo-cms-radius-tr, var(--awwo-cms-radius)) var(--awwo-cms-radius-br, var(--awwo-cms-radius)) var(--awwo-cms-radius-bl, var(--awwo-cms-radius));
	background: transparent;
	color: var(--awwo-cms-muted);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.awwo-cms-screen-meta-toggle:hover,
.awwo-cms-screen-meta-toggle[aria-expanded="true"] {
	border-color: var(--awwo-cms-brand);
	color: var(--awwo-cms-text);
}

.awwo-cms-screen-meta-toggle .awwo-cms-icon {
	width: 10px;
	height: 10px;
	transition: transform 0.2s;
}

.awwo-cms-screen-meta-toggle[aria-expanded="true"] .awwo-cms-icon {
	transform: rotate(180deg);
}

.awwo-cms-screen-options {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 16px;
	padding: 16px 20px;
}

.awwo-cms-screen-options[hidden] {
	display: none;
}

.awwo-cms-screen-options-group {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.awwo-cms-screen-options-group legend {
	margin-bottom: 8px;
	padding: 0;
	font-weight: 700;
}

/* Items Per Page | Order Type, each named in its tooltip. */
.awwo-cms-screen-options-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.awwo-cms-screen-options-tip {
	display: inline-flex;
}

.awwo-cms-screen-options-tip:focus-within::after {
	opacity: 1;
	transform: translate(-50%, 0);
}

.awwo-cms-backend .awwo-cms-screen-options-per-page {
	width: 80px;
	text-align: center;
}

.awwo-cms-screen-options-divider {
	color: var(--awwo-cms-muted);
}

.awwo-cms-screen-options-row select.awwo-cms-input {
	width: auto;
	min-width: 170px;
}

.awwo-cms-screen-options-apply {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* QR Codes (Pages and Users QR columns, a profile's header): small, on white (as it prints) in its Color. */
.awwo-cms-qr-thumb {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 36px;
	padding: 2px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 4 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 4 / 12) calc(var(--awwo-cms-radius-br, 12px) * 4 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 4 / 12);
	/* As every QR Code box of the CMS, in both themes: the card colour, a thin outline. */
	outline: 1px solid var(--awwo-cms-border);
	background: var(--awwo-cms-surface);
	vertical-align: middle;
}

/* On hover: the same code large enough to scan with a phone, in the same box. */
.awwo-cms-qr-tip {
	position: fixed;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 110px;
	padding: 6px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	outline: 1px solid var(--awwo-cms-border);
	background: var(--awwo-cms-surface);
	box-shadow: 0 12px 32px rgb(0 0 0 / 35%);
	pointer-events: none;
}

.awwo-cms-qr-tip[hidden] {
	display: none;
}

.awwo-cms-qr-tip svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
}


.awwo-cms-qr-thumb svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* A profile's header: its QR Code at the end (right), as tall as the header's row (the avatar's 72px). */
.awwo-cms-qr-thumb-header {
	flex: none;
	width: 72px;
	height: 72px;
	margin-left: auto;
	padding: 4px;
	box-sizing: border-box;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
}

/* Profile: three columns of boxes on the whole canvas width; two, then one,
   as the viewport narrows. */
.awwo-cms-boxes.awwo-cms-boxes-three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Each box one column only: 2FA's setup stacks, its QR code above its fields. */
.awwo-cms-boxes-three .awwo-cms-2fa-setup {
	grid-template-columns: minmax(0, 1fr);
}

.awwo-cms-boxes-three .awwo-cms-2fa-qr {
	width: 184px;
}

/* A column two wide (Updates' Changelog): the second and third, a row of its own under two columns, one under one. */
.awwo-cms-boxes-three > .awwo-cms-box-stack-wide {
	grid-column: span 2;
}

@media (max-width: 1280px) {
	.awwo-cms-boxes.awwo-cms-boxes-three {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.awwo-cms-boxes-three > .awwo-cms-box-stack-wide {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	.awwo-cms-boxes.awwo-cms-boxes-three {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Updates' Changelog, as the Master's Releases shows one: lines follow each
   other with no space; a new kind (NEW:, FIXED:, TWEAK:) starts after a thin
   line, 16px either side; each line's kind in the CMS's own bold. */
.awwo-cms-changelog {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: justify;
}

.awwo-cms-changelog > .awwo-cms-changelog-next {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-changelog-kind {
	font-weight: 700;
}

/* Its counts after the title, muted (Releases' own), in their own case and spacing, not the title's. */
.awwo-cms-changelog-counts {
	margin-left: 8px;
	color: var(--awwo-cms-muted);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

/* A title's count, e.g. Users (2): raised like a mathematical power, quiet
   (muted, regular, small); it never moves the title's line. */
.awwo-cms-title-count {
	margin-left: 0.15em;
	color: var(--awwo-cms-muted);
	font-size: 0.55em;
	font-weight: 400;
	line-height: 0;
	vertical-align: super;
}

/* Email Settings: a label on two lines never pushes its field below its neighbour's. */
.awwo-cms-email-settings .awwo-cms-fields {
	align-items: end;
}

/* An email's Text Alignment: Left, Center, Right, Justify, centred in their row; the chosen one filled. */
.awwo-cms-notifications-align {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.awwo-cms-notifications-align .awwo-cms-button {
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	padding: 0;
}

.awwo-cms-notifications-align [aria-pressed="true"] {
	border-color: var(--awwo-cms-ok);
	background: var(--awwo-cms-ok);
	color: var(--awwo-cms-white);
}

/* Screen Options (a whole-width panel): its column checkboxes side by side, each only as wide as its label, close together. */
.awwo-cms-screen-options .awwo-cms-menu-access {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

/* A list's toolbar (Pages, Users, Media Library): add and Bulk Select at the start; the filters, then
   search, at the end, always the same width: 280px each on desktops (240px for three); below, sharing
   the rest of the row equally (narrower while the bulk controls show), until each gets its own row. */
.awwo-cms-split-toolbar-end {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 280px;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.awwo-cms-split-toolbar-end select.awwo-cms-input,
.awwo-cms-split-toolbar-end .awwo-cms-media-search {
	width: 100%;
	min-width: 0;
	max-width: none;
}

.awwo-cms-split-toolbar-end-3 {
	grid-auto-columns: 240px;
}

@media (max-width: 1280px) {
	.awwo-cms-split-toolbar-end {
		flex: 1 1 0;
		grid-auto-columns: minmax(0, 1fr);
		min-width: 0;
	}
}

/* Tablets and phones: the add button with Bulk Select filling its row, then the filter and search, each a whole row. */
@media (max-width: 1024px) {
	.awwo-cms-split-toolbar,
	.awwo-cms-split-toolbar .awwo-cms-media-toolbar-start,
	.awwo-cms-split-toolbar-end {
		flex-direction: column;
		align-items: stretch;
	}

	.awwo-cms-split-toolbar .awwo-cms-media-toolbar-start {
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.awwo-cms-split-toolbar [data-awwo-cms-media-bulk],
	.awwo-cms-split-toolbar .awwo-cms-media-bulkbar {
		flex: 1 1 auto;
	}

	/* The bulk controls (the count, its actions, Cancel) centred in their row. */
	.awwo-cms-split-toolbar .awwo-cms-media-bulkbar {
		justify-content: center;
	}

	/* The filters, then search, each a whole row. */
	.awwo-cms-split-toolbar-end {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
		margin-left: 0;
	}
}

/* Phones: the bulk controls fit beside the add button (a little smaller, closer together). */
@media (max-width: 480px) {
	.awwo-cms-split-toolbar .awwo-cms-media-bulkbar {
		gap: 6px;
	}

	.awwo-cms-split-toolbar .awwo-cms-media-bulkbar .awwo-cms-media-square,
	.awwo-cms-split-toolbar .awwo-cms-media-bulkbar .awwo-cms-media-count {
		width: 38px;
		min-width: 38px;
		height: 38px;
		padding: 0;
	}
}


/* A shipping address's icon (Billing & Shipping): a square at the end of
   its Label; clicked, a window of icons opens under it, 4 a row, the chosen
   one filled green, the others outlined, each its name in a tooltip. Red
   when none is chosen. */
.awwo-cms-input-wrap .awwo-cms-icon-pick {
	position: relative;
	display: flex;
	flex: 0 0 44px;
}

.awwo-cms-icon-pick > summary {
	list-style: none;
	height: 100%;
}

.awwo-cms-icon-pick > summary::-webkit-details-marker {
	display: none;
}

.awwo-cms-icon-pick[open] > summary {
	color: var(--awwo-cms-ok);
}

.awwo-cms-icon-choice {
	position: absolute;
	z-index: 30;
	top: calc(100% + 9px);
	right: -1px;
	display: grid;
	grid-template-columns: repeat(4, 42px);
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--awwo-cms-surface);
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.25);
}

.awwo-cms-icon-choice-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--awwo-cms-ok);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	color: var(--awwo-cms-ok);
	cursor: pointer;
	transition:
		background-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		transform var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-field .awwo-cms-icon-choice-item {
	padding-left: 0;
}

.awwo-cms-icon-choice-item input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.awwo-cms-icon-choice-item .awwo-cms-icon {
	width: 18px;
	height: 18px;
}

.awwo-cms-icon-choice-item:hover {
	transform: translateY(-6px);
}

.awwo-cms-icon-choice-item:hover,
.awwo-cms-icon-choice-item:has(input:checked) {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

.awwo-cms-icon-choice-item:has(input:focus-visible) {
	outline: 2px solid var(--awwo-cms-ok);
	outline-offset: 2px;
}

/* Activity History: an article's, page's or comment's title links to it,
   bold (700), green, never underlined; brighter when hovered. */
.awwo-cms-activity-link,
.awwo-cms-activity-link strong {
	font-weight: 700;
}

.awwo-cms-activity-link {
	color: var(--awwo-cms-ok);
	text-decoration: none;
	transition: color 0.2s;
}

.awwo-cms-activity-link:hover,
.awwo-cms-activity-link:focus-visible {
	color: var(--awwo-cms-green);
}

/* Activity History: a changed field's name (bold), its old | new in a
   tooltip above it when hovered or focused. */
.awwo-cms-activity-change {
	font-weight: 700;
	cursor: help;
}

.awwo-cms-activity-change:focus-visible {
	outline: 2px solid var(--awwo-cms-ok);
	outline-offset: 2px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 2 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 2 / 12) calc(var(--awwo-cms-radius-br, 12px) * 2 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 2 / 12);
}

/* A comment's text in its tooltip: wrapped on several lines, at most 320px
   wide (a long comment, or old | new). */
.awwo-cms-activity-said[data-awwo-cms-tooltip]::after {
	width: max-content;
	max-width: 320px;
	white-space: normal;
	text-align: left;
}

/* Their tooltips open from the word's start towards the right (a centred
   one would run off the table's left edge, where its frame cuts it). */
.awwo-cms-activity-change[data-awwo-cms-tooltip-above]::after {
	left: 0;
	transform: translate(0, 4px);
}

.awwo-cms-activity-change[data-awwo-cms-tooltip-above]:hover::after,
.awwo-cms-activity-change[data-awwo-cms-tooltip-above]:focus-visible::after {
	transform: translate(0, 0);
}

/* Shop Categories and Brands: a term without its image shows the upload
   icon in its thumbnail's place (as the image boxes). */
/* A product without an image, its QR Code on: the code in its thumbnail, on
   the Shop cards' green shade, in its own colour, 6px from the edges. */
.awwo-cms-media-thumb.awwo-cms-media-thumb-qr {
	padding: 6px;
	background: color-mix(in srgb, var(--awwo-cms-green) 12%, var(--awwo-cms-surface));
}

.awwo-cms-media-thumb-qr > svg {
	display: block;
	width: 100%;
	height: 100%;
}

.awwo-cms-term-thumb-empty {
	width: 100%;
	height: 100%;
	border: 1px dashed var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--awwo-cms-control);
	color: var(--awwo-cms-muted);
}

.awwo-cms-term-thumb-empty .awwo-cms-icon {
	width: 22px;
	height: 22px;
}

/* Shop Attributes: an attribute's values, each a field with × at its end
   (as Show/Hide), 16px apart as every field; Add Value 16px under them
   (also a product's add-on's Add Option). The table lists them muted, as text. */
.awwo-cms-attribute-values {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-attribute-add {
	align-self: flex-start;
	margin-top: 16px;
}

/* The table's values: their column takes the width the table has left (it
   follows the window), wrapped there in at most three lines, cut with …
   (Edit shows them all); never narrower than 240px. */
.awwo-cms-media-table td:has(> .awwo-cms-attribute-list) {
	width: 100%;
	white-space: normal;
}

.awwo-cms-attribute-list {
	display: -webkit-box;
	min-width: 240px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	color: var(--awwo-cms-muted);
	font-size: 13px;
	white-space: normal;
}

/* Shop Products: the editor's two columns (as WooCommerce's product
   page), the builder and the boxes' accordion 3 : 2; each scrolls on
   its own (up to 1280px they stack, as the Forms builder's). A box or field
   not for the product's type (or for Manage Stock as set) is not drawn at all. */
.awwo-cms-product-data [hidden] {
	display: none !important;
}

/* Categories and attribute values: as many a row as fit the box. */
.awwo-cms-product-ticks {
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

@media (min-width: 1281px) {
	.awwo-cms-boxes.awwo-cms-product-layout {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.awwo-cms-product-data {
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* The gallery: its image boxes three a row, 16px apart (as the fields). */
.awwo-cms-product-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

/* Variations, downloads, a bundle's items, add-ons: one under another,
   16px apart (as every field). */
.awwo-cms-product-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-product-list:empty {
	display: none;
}

/* A list's item (a variation, an add-on, a bundle's item, a download, an
   add-on's option): a framed row, its fields inside (16px apart, two a
   row) or, for those opened in the item modal, its name and a muted
   summary; Remove at its top right corner, as the image boxes'. Red while
   something in it is wrong. */
.awwo-cms-product-row {
	position: relative;
	padding: 16px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, var(--awwo-cms-radius)) var(--awwo-cms-radius-tr, var(--awwo-cms-radius)) var(--awwo-cms-radius-br, var(--awwo-cms-radius)) var(--awwo-cms-radius-bl, var(--awwo-cms-radius));
	transition: border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-product-row[data-invalid] {
	border-color: var(--awwo-cms-fail);
}

.awwo-cms-product-row-main {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.awwo-cms-product-row:has(.awwo-cms-product-row-main:hover, .awwo-cms-product-row-main:focus-visible) {
	border-color: var(--awwo-cms-green);
}

.awwo-cms-product-row-main:focus-visible {
	outline: 0;
}

.awwo-cms-product-row-summary {
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-product-row-summary:empty {
	display: none;
}

/* A product box's head: its title keeps its width, so buttons that do not
   fit beside it turn into icon squares (awwo-cms-box-heads.js) instead of
   covering it. */
.awwo-cms-product-box .awwo-cms-box-head h2 {
	min-width: max-content;
}

/* The item modal: room for two fields a row; taller than the window (an
   add-on with many options), it scrolls inside. */
.awwo-cms-product-modal {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
}


/* The table's Price (a sale's old price struck through before it) and Stock. */
.awwo-cms-product-price {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0 6px;
}

.awwo-cms-product-price del {
	color: var(--awwo-cms-muted);
}

.awwo-cms-product-stock {
	font-weight: 700;
}

.awwo-cms-product-stock-on {
	color: var(--awwo-cms-ok);
}

.awwo-cms-product-stock-low {
	color: var(--awwo-cms-warn);
}

.awwo-cms-product-stock-off {
	color: var(--awwo-cms-fail);
}

/* Shop Reviews: a review's stars, its rating's filled in amber. */
.awwo-cms-review-stars {
	display: inline-flex;
	gap: 2px;
}

.awwo-cms-review-star {
	display: inline-flex;
	color: var(--awwo-cms-border);
}

.awwo-cms-review-star .awwo-cms-icon {
	width: 14px;
	height: 14px;
}

.awwo-cms-review-star.is-on {
	color: var(--awwo-cms-warn);
}

/* Order IDs: Prefix's and Suffix's date tags at the label row's end, a
   click each; each box's ID Preview, first in it and centred, the number
   as it will read. */
.awwo-cms-id-tags {
	display: inline-flex;
	margin-left: auto;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.awwo-cms-id-preview-field {
	text-align: center;
}

.awwo-cms-id-preview-field .awwo-cms-field-label {
	padding: 0;
}

.awwo-cms-id-preview {
	display: block;
	font-size: 18px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* Tax: Import EU Rates' notice, as far from the toolbar under it as the
   toolbar is from the table. */
.awwo-cms-notice + .awwo-cms-media-toolbar {
	margin-top: 24px;
}

/* Stripe Payment Methods: one row each (its checkbox and name; Not
   Available at the end when Stripe does not offer it here), 8px apart. */
.awwo-cms-stripe-methods {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-stripe-methods > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	font-size: 14px;
}

.awwo-cms-stripe-method {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

/* Stripe Setup: its steps named across the top (the open one green), each
   step's buttons at its end; the Stripe box's actions in a row. */
.awwo-cms-stripe-setup {
	width: min(560px, calc(100vw - 32px));
}

.awwo-cms-stripe-setup > form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.awwo-cms-stripe-steps {
	display: flex;
	gap: 8px;
	margin: 16px 0;
	padding: 0;
	list-style: none;
	counter-reset: awwo-cms-step;
}

.awwo-cms-stripe-steps > li {
	flex: 1;
	padding: 8px;
	border-bottom: 2px solid var(--awwo-cms-border);
	color: var(--awwo-cms-muted);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	counter-increment: awwo-cms-step;
}

.awwo-cms-stripe-steps > li::before {
	content: counter(awwo-cms-step) ". ";
}

.awwo-cms-stripe-steps > li[aria-current="step"] {
	border-color: var(--awwo-cms-green);
	color: var(--awwo-cms-ok);
}

.awwo-cms-stripe-nav,
.awwo-cms-stripe-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.awwo-cms-stripe-setup [data-awwo-cms-stripe-error] {
	align-self: flex-start;
	margin: 0;
}

/* Marketing, Coupons: a coupon's modal, wider for its two columns of
   fields; its tabs (General, Usage Restriction, Usage Limits) under its
   header, one part shown at a time. */
.awwo-cms-coupon-modal {
	width: min(720px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
}

.awwo-cms-coupon-tabs {
	margin: 0 0 24px;
}

.awwo-cms-coupon-tabs .awwo-cms-tab {
	border-top: 0;
	border-right: 0;
	border-left: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.awwo-cms-coupon-tabs .awwo-cms-tab[aria-selected="true"] {
	border-bottom-color: var(--awwo-cms-green);
	color: var(--awwo-cms-ok);
}

.awwo-cms-coupon-code {
	text-transform: uppercase;
}

/* Marketing, Action Based Rewards: Renumerate, the right half of Rewards
   Conversion's first row, level with the Action Based Rewards dropdown. */
.awwo-cms-rewards-renumerate {
	justify-content: flex-end;
}

.awwo-cms-rewards-renumerate .awwo-cms-button {
	width: 100%;
}

/* Marketing, Action Based Rewards: an actions box's actions, 16px apart,
   each as a field (its name above, one line) over its Points and Given,
   two equal halves. */
.awwo-cms-reward-rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.awwo-cms-reward-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.awwo-cms-reward-row > label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.awwo-cms-reward-fixed {
	display: flex;
	align-items: center;
	color: var(--awwo-cms-muted);
}

/* A removal's signed Points: taken back in red, given more in green. */
.awwo-cms-reward-change {
	font-weight: 700;
}

.awwo-cms-reward-change.is-minus {
	color: var(--awwo-cms-red);
}

.awwo-cms-reward-change.is-plus {
	color: var(--awwo-cms-ok);
}

/* Points (Rewards, Activity History's Rewards column, the Dashboard's
   Rewards): green when given (+), red when taken (-); several side by side. */
.awwo-cms-reward-points {
	font-weight: 700;
	white-space: nowrap;
}

.awwo-cms-reward-points + .awwo-cms-reward-points {
	margin-left: 8px;
}

.awwo-cms-reward-points.is-plus {
	color: var(--awwo-cms-ok);
}

.awwo-cms-reward-points.is-minus {
	color: var(--awwo-cms-red);
}


/* Insights: figures side by side (each its value over its name), as the Rewards box's. */
.awwo-cms-insights-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

.awwo-cms-insights-figures:has(> :nth-child(4):last-child) {
	/* Four (Search Performance): two by two; six (Visitors): three by two, even rows. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.awwo-cms-insights-figures:has(> :nth-child(6):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.awwo-cms-insights-figures > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.awwo-cms-insights-figures strong {
	font-size: 22px;
	line-height: 1.2;
	color: var(--awwo-cms-text);
}

.awwo-cms-insights-figures span {
	color: var(--awwo-cms-muted);
	font-size: 12px;
}

/* Its chart: each day's two measures as lines (the first the brand's colour), the first and last day under them. */
.awwo-cms-insights-chart {
	margin: 0;
}

.awwo-cms-insights-chart svg {
	display: block;
	width: 100%;
	height: 160px;
	border-bottom: 1px solid var(--awwo-cms-border);
}

.awwo-cms-insights-chart polyline {
	fill: none;
	stroke-width: 2;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.awwo-cms-insights-chart .is-a {
	stroke: var(--awwo-cms-brand);
}

.awwo-cms-insights-chart .is-b {
	stroke: var(--awwo-cms-muted);
	opacity: 0.55;
}

.awwo-cms-insights-chart figcaption {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-top: 8px;
	color: var(--awwo-cms-muted);
	font-size: 12px;
}

.awwo-cms-insights-legend {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.awwo-cms-insights-legend i {
	display: inline-block;
	width: 12px;
	height: 2px;
	margin-left: 6px;
	background: var(--awwo-cms-brand);
}

.awwo-cms-insights-legend i.is-b {
	background: var(--awwo-cms-muted);
	opacity: 0.55;
}

/* Its tables, edge to edge in their box; a long name wraps. */
.awwo-cms-insights-table :is(th, td):first-child {
	padding-left: 0;
}

.awwo-cms-insights-table :is(th, td):last-child {
	padding-right: 0;
}

.awwo-cms-insights-table th {
	padding-top: 0;
}

.awwo-cms-insights-name {
	overflow-wrap: anywhere;
}

/* PageSpeed's four scores: each in a ring of its rating's colour (90+ good, 50+ needs work, under 50 poor). */
.awwo-cms-insights-scores {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	text-align: center;
}

.awwo-cms-insights-scores > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--awwo-cms-muted);
}

.awwo-cms-insights-scores strong {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 3px solid var(--awwo-cms-border);
	border-radius: 50%;
	font-size: 18px;
	color: var(--awwo-cms-text);
}

.awwo-cms-insights-scores .is-fast strong {
	border-color: var(--awwo-cms-ok);
}

.awwo-cms-insights-scores .is-average strong {
	border-color: var(--awwo-cms-warn);
}

.awwo-cms-insights-scores .is-slow strong {
	border-color: var(--awwo-cms-fail);
}

/* Google Setup's first step: Google Cloud's pages in order, each its button and what to do there. */
.awwo-cms-insights-guide {
	display: grid;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.awwo-cms-insights-guide li {
	display: grid;
	grid-template-columns: 150px 1fr;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--awwo-cms-muted);
}

/* The Dashboard's Insights rows (Search Console, Analytics, PageSpeed): 16px apart, as the boxes within them. */
.awwo-cms-insights-row {
	margin-top: 16px;
}

/* Customizer, Footer Bar and Top Bar Mode: each mode drawn as a small bar (its menu
   three outlined links, its text a line), chosen as from a drop-down that
   opens under the field, the same tiles' look as Wrap Layout's. */
.awwo-cms-zone-mode-field {
	display: flex;
	align-items: center;
}

/* The field itself: only the chosen mode's drawing, its whole width (no words). */
.awwo-cms-zone-mode-drawing {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-height: 24px;
}

.awwo-cms-zone-mode-choices {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s var(--awwo-cms-ease-out);
}

.awwo-cms-zone-mode-choices[data-open] {
	grid-template-rows: 1fr;
}

.awwo-cms-zone-mode-choices > div {
	overflow: hidden;
}

/* Once open, nothing clipped: the first row's tooltips show above it. */
.awwo-cms-zone-mode-choices[data-shown] > div {
	overflow: visible;
}

.awwo-cms-zone-mode-grid {
	display: grid;
	/* Each mode on its own row. */
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	padding-top: 8px;
}

.awwo-cms-zone-mode-choice {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	box-sizing: border-box;
	/* As tall as the field above them. */
	min-height: 46px;
	padding: 4px 8px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	/* The fields' own background (white in light mode in an open row). */
	background: var(--awwo-cms-control);
	cursor: pointer;
	transition: border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-zone-mode-choice:hover,
.awwo-cms-zone-mode-choice:focus-visible,
.awwo-cms-zone-mode-choice[aria-pressed="true"] {
	border-color: var(--awwo-cms-green);
}

/* Hovered (the field also while open): filled green, its drawing white, as the CMS's buttons. */
.awwo-cms-zone-mode-choice,
.awwo-cms-zone-mode-field {
	transition: border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out), background-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-zone-mode-choice:is(:hover, :focus-visible),
.awwo-cms-zone-mode-field:is(:hover, :focus-visible, [aria-expanded="true"]) {
	--zone-mode-ink: var(--awwo-cms-white);
	border-color: var(--awwo-cms-green);
	background-color: var(--awwo-cms-green);
}


.awwo-cms-zone-mode-choice[aria-pressed="true"] {
	box-shadow: inset 0 0 0 1px var(--awwo-cms-green);
}

/* A row of the bar: alone or stacked centred; side by side three columns,
   each at its own end, Cookies and Back to Top on the centre. */
.awwo-cms-zone-mode-row {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.awwo-cms-zone-mode-row.is-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.awwo-cms-zone-mode-row.is-side > :first-child {
	justify-self: start;
}

.awwo-cms-zone-mode-row.is-side > :last-child {
	justify-self: end;
}

.awwo-cms-zone-mode-row.is-side > .awwo-cms-zone-mode-text {
	width: 80%;
}

.awwo-cms-zone-mode-buttons {
	display: flex;
	gap: 3px;
}

/* Centred: Cookies at the left end, Back to Top at the right, the rows between. */
.awwo-cms-zone-mode-ends {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
}

.awwo-cms-zone-mode-rows {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
}

.awwo-cms-zone-mode-button {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 2 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 2 / 12) calc(var(--awwo-cms-radius-br, 12px) * 2 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 2 / 12);
	background: var(--zone-mode-ink, var(--awwo-cms-grey-dark));
}

/* The Navigation: logo and the rest at the two ends; stacked, the menu
   centred under the logo, its buttons hung after it. */
.awwo-cms-zone-mode-row.is-apart {
	justify-content: space-between;
}

.awwo-cms-zone-mode-end {
	display: flex;
	align-items: center;
	gap: 6px;
}

.awwo-cms-zone-mode-logo {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--zone-mode-ink, var(--awwo-cms-grey-dark));
}

/* Overlapping logo: the header's bottom line through it at 60%, the menu and buttons centred above that line. */
.awwo-cms-zone-mode-row.is-overlap {
	position: relative;
	align-items: flex-start;
}

.awwo-cms-zone-mode-row.is-overlap::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 0;
	left: 0;
	height: 1px;
	background: var(--zone-mode-ink, var(--awwo-cms-grey-dark));
	opacity: 0.5;
}

.awwo-cms-zone-mode-row.is-overlap > :is(.awwo-cms-zone-mode-end, .awwo-cms-zone-mode-buttons) {
	margin-top: 1px;
}

.awwo-cms-zone-mode-logo.is-big {
	position: relative;
	z-index: 1;
	width: 14px;
	height: 14px;
}

.awwo-cms-zone-mode-row.is-hung {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.awwo-cms-zone-mode-row.is-hung > :last-child {
	justify-self: start;
	margin-left: 6px;
}

/* Reversed: hung before it. */
.awwo-cms-zone-mode-row.is-hung-before {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.awwo-cms-zone-mode-row.is-hung-before > :first-child {
	justify-self: end;
	margin-right: 6px;
}

/* Stacked at one side: its rows against that side. */
.awwo-cms-zone-mode-rows.is-start > .awwo-cms-zone-mode-row {
	justify-content: flex-start;
}

.awwo-cms-zone-mode-rows.is-end > .awwo-cms-zone-mode-row {
	justify-content: flex-end;
}

/* Hidden in the Customizer: gone from the drawings too (their place kept at the ends, so the rows stay centred). */
[data-awwo-cms-zone-mode][data-cookies="no"] .awwo-cms-zone-mode-ends > .is-cookies,
[data-awwo-cms-zone-mode][data-top="no"] .awwo-cms-zone-mode-ends > .is-top {
	visibility: hidden;
}

[data-awwo-cms-zone-mode][data-cookies="no"] .awwo-cms-zone-mode-buttons > .is-cookies,
[data-awwo-cms-zone-mode][data-top="no"] .awwo-cms-zone-mode-buttons > .is-top {
	display: none;
}

.awwo-cms-zone-mode-menu {
	display: flex;
	gap: 3px;
}

.awwo-cms-zone-mode-menu i {
	box-sizing: border-box;
	width: 11px;
	height: 6px;
	border: 1px solid var(--zone-mode-ink, var(--awwo-cms-grey-dark));
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 2 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 2 / 12) calc(var(--awwo-cms-radius-br, 12px) * 2 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 2 / 12);
}

.awwo-cms-zone-mode-text {
	width: 40%;
	height: 3px;
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 2 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 2 / 12) calc(var(--awwo-cms-radius-br, 12px) * 2 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 2 / 12);
	background: var(--zone-mode-ink, var(--awwo-cms-grey-dark));
}

.awwo-cms-zone-mode-off {
	/* Disabled: only its word, small and uppercase, in the drawings' colour (no border). */
	width: 100%;
	color: var(--zone-mode-ink, var(--awwo-cms-grey-dark));
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

/* Theme's Color Palette, its drop-down: each choice its five colours (small
   squares, a soft line around each so a white surface or a near-black
   secondary shows in either mode) then its name, in Disabled's word look
   (white on the green when hovered). */
.awwo-cms-palette-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.awwo-cms-palette-swatches {
	display: flex;
	flex: none;
	gap: 4px;
}

.awwo-cms-palette-swatches > i {
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border: 1px solid color-mix(in oklab, var(--awwo-cms-muted) 45%, transparent);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 4 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 4 / 12) calc(var(--awwo-cms-radius-br, 12px) * 4 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 4 / 12);
}

/* On the green of a hovered choice (or the open field), AWWO® white as the rest of the name. */
.awwo-cms-zone-mode-choice:is(:hover, :focus-visible) .awwo-cms-palette-name .awwo-cms-name,
.awwo-cms-zone-mode-field:is(:hover, :focus-visible, [aria-expanded="true"]) .awwo-cms-palette-name .awwo-cms-name {
	color: inherit;
}

.awwo-cms-palette-name {
	color: var(--zone-mode-ink, var(--awwo-cms-grey-dark));
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
}

/* Theme's Color Palette: under its drop-down, the chosen palette's card
   (its name and what it is, its five colours, then a Light View and a Dark
   View beside each other, mixed from its colours as the CMS's own
   stylesheet mixes its scheme; awwo-cms-appearance.js gives it its
   --awwo-cms-palette-p, -s, -n, -a, -f). */
.awwo-cms-palette-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, 12px) var(--awwo-cms-radius-tr, 12px) var(--awwo-cms-radius-br, 12px) var(--awwo-cms-radius-bl, 12px);
	background: var(--awwo-cms-control);
}

.awwo-cms-palette-card-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 12px;
}

.awwo-cms-palette-card-name {
	font-size: 13px;
	font-weight: 700;
}

.awwo-cms-palette-card-what {
	color: var(--awwo-cms-muted);
	font-size: 12px;
}

.awwo-cms-palette-card-strip {
	display: flex;
	height: 16px;
}

.awwo-cms-palette-card-strip > i {
	flex: 1;
}

.awwo-cms-palette-card-views {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.awwo-cms-palette-view {
	padding: 10px;
}

.awwo-cms-palette-view.is-light {
	--view-bg: color-mix(in oklab, var(--awwo-cms-palette-n) 45%, var(--awwo-cms-palette-f));
	--view-surface: var(--awwo-cms-palette-f);
	--view-text: var(--awwo-cms-palette-s);
	--view-muted: color-mix(in oklab, var(--awwo-cms-palette-s) 70%, color-mix(in oklab, var(--awwo-cms-palette-s) 44%, var(--awwo-cms-palette-n)));
	--view-border: var(--awwo-cms-palette-n);
	--view-primary: var(--awwo-cms-palette-p);
}

.awwo-cms-palette-view.is-dark {
	--view-bg: color-mix(in oklab, var(--awwo-cms-palette-s) 55%, black);
	--view-surface: color-mix(in oklab, var(--awwo-cms-palette-s) 80%, black);
	--view-text: var(--awwo-cms-palette-n);
	--view-muted: color-mix(in oklab, var(--awwo-cms-palette-s) 13%, var(--awwo-cms-palette-n));
	--view-border: color-mix(in oklab, var(--awwo-cms-palette-s) 75%, color-mix(in oklab, var(--awwo-cms-palette-s) 44%, var(--awwo-cms-palette-n)));
	--view-primary: color-mix(in oklab, var(--awwo-cms-palette-p) 75%, #fff);
}

.awwo-cms-palette-view {
	background: var(--view-bg);
	color: var(--view-text);
}

.awwo-cms-palette-sample {
	display: flex;
	flex-direction: column;
	padding: 10px;
	border: 1px solid var(--view-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 10 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 10 / 12) calc(var(--awwo-cms-radius-br, 12px) * 10 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 10 / 12);
	background: var(--view-surface);
}

.awwo-cms-palette-sample-title {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.awwo-cms-palette-sample-text {
	margin: 2px 0 8px;
	color: var(--view-muted);
	font-size: 11px;
}

.awwo-cms-palette-sample-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.awwo-cms-palette-sample-buttons > span {
	padding: 4px 8px;
	border: 1px solid var(--view-primary);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 7 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 7 / 12) calc(var(--awwo-cms-radius-br, 12px) * 7 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 7 / 12);
	color: var(--view-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.awwo-cms-palette-sample-buttons > .is-filled {
	background: var(--view-primary);
	color: #fff;
}

/* A drop-down whose choices read as Disabled's word (Articles' Image Box Type: 1 x 1, 16 x 9, 4 x 3): small,
   bold, spaced and centred (the "x" kept small). */
.awwo-cms-field-words select.awwo-cms-input {
	font-size: 11px;
	/* The field's own line (24px), so it stays as tall as the fields beside it (46px). */
	line-height: 24px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-align-last: center;
	/* As much room on the left as the arrow takes on the right: the words on the field's true middle. */
	padding-left: 36px;
}

/* In the field, a word (BOXED, FRAMED, DISABLED) centred on the whole field,
   not only beside the arrow: moved right by the arrow's extra padding
   (36px on the right less the 12px on the left). */
.awwo-cms-zone-mode-field .awwo-cms-zone-mode-off {
	box-sizing: border-box;
	padding-left: 24px;
}

/* Customizer: a thin line between a row's groups (the Footer Bar's), instead of their titles. */
.awwo-cms-appearance-divider {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--awwo-cms-border);
}

/* Customizer: a closed section or row filled green on hover (its title and + white), as the CMS's buttons. */
.awwo-cms-appearance-section,
.awwo-cms-appearance-row {
	transition: border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out), background-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out), color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-appearance-section:not([data-open]):is(:hover, :focus-within),
.awwo-cms-appearance-row:not([data-open]):is(:hover, :focus-within) {
	border-color: var(--awwo-cms-green);
	background-color: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

.awwo-cms-appearance-section:not([data-open]):is(:hover, :focus-within) > h2,
.awwo-cms-appearance-row:not([data-open]):is(:hover, :focus-within) > h3,
.awwo-cms-appearance-section:not([data-open]):is(:hover, :focus-within) .awwo-cms-notification-toggle .awwo-cms-icon,
.awwo-cms-appearance-row:not([data-open]):is(:hover, :focus-within) .awwo-cms-notification-toggle .awwo-cms-icon {
	color: var(--awwo-cms-white);
}

/* Opening: straight to its open look (no fade from the hover's green). */
.awwo-cms-appearance-section[data-open],
.awwo-cms-appearance-row[data-open] {
	transition: none;
}

/* Customizer, Border Radius: the top corners a row, the bottom ones a row
   under them (each its corner drawn before its value), the link between
   them in the middle; all one field's height. */
.awwo-cms-corners {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 8px;
	align-items: center;
}

.awwo-cms-corner {
	min-width: 0;
}

.awwo-cms-corner.is-tl { grid-area: 1 / 1; }
.awwo-cms-corner.is-tr { grid-area: 1 / 3; }
.awwo-cms-corner.is-bl { grid-area: 2 / 1; }
.awwo-cms-corner.is-br { grid-area: 2 / 3; }

/* Two equal halves: the drawn corner, a thin line, then its value (centred). */
.awwo-cms-corner-side {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-width: 0;
	border-right: 1px solid var(--awwo-cms-border);
}

.awwo-cms-corner .awwo-cms-input {
	flex: 1 1 0;
	padding-right: 0;
	padding-left: 0;
	text-align: center;
}

.awwo-cms-corner-icon {
	flex: none;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border: 0 solid var(--awwo-cms-muted);
}

.awwo-cms-corner:focus-within .awwo-cms-corner-icon {
	border-color: var(--awwo-cms-ok);
}

.awwo-cms-corner-icon.is-tl { border-top-width: 2px; border-left-width: 2px; border-top-left-radius: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12); }
.awwo-cms-corner-icon.is-tr { border-top-width: 2px; border-right-width: 2px; border-top-right-radius: calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12); }
.awwo-cms-corner-icon.is-br { border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: calc(var(--awwo-cms-radius-br, 12px) * 6 / 12); }
.awwo-cms-corner-icon.is-bl { border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12); }

/* A corner at 0: its icon drawn square. */
.awwo-cms-corner-icon.is-square {
	border-radius: 0;
}

.awwo-cms-corners-link {
	grid-row: 1 / 3;
	grid-column: 2;
}

/* Linked: filled, the link drawn; unlinked: the link broken. */
.awwo-cms-corners-link[aria-pressed="true"] {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

.awwo-cms-corners-link[aria-pressed="true"] .awwo-cms-icon:last-child,
.awwo-cms-corners-link[aria-pressed="false"] .awwo-cms-icon:first-child {
	display: none;
}

/* Media Library, Used In: one use a line (its item opening its editor, what the file is there muted), then "+ N more". */
.awwo-cms-media-used {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	white-space: normal;
}

.awwo-cms-media-used a {
	color: var(--awwo-cms-ok);
	font-weight: 600;
	text-decoration: none;
}

.awwo-cms-media-used-role,
.awwo-cms-media-used-more {
	color: var(--awwo-cms-muted);
	font-weight: 400;
}

/* The SEO window's Meta Title: what the site adds to it (" · AWWO®"), in grey, right after the text being typed
   (its own text there unseen, only holding the place); gone once the title has the site's name. */
.awwo-cms-seo-title-control {
	position: relative;
}

.awwo-cms-seo-title-ghost {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 0 12px;
	border: 1px solid transparent;
	font: inherit;
	white-space: pre;
	pointer-events: none;
}

.awwo-cms-seo-title-ghost[hidden] {
	display: none;
}

.awwo-cms-seo-title-ghost-typed {
	visibility: hidden;
}

.awwo-cms-seo-title-ghost-added {
	color: var(--awwo-cms-muted);
}

/* The SEO window's Meta Description, empty: the description used instead (as last saved), in grey, where the text goes. */
.awwo-cms-seo-desc-ghost {
	position: absolute;
	inset: 0;
	overflow: hidden;
	padding: 10px 12px;
	border: 1px solid transparent;
	color: var(--awwo-cms-muted);
	font: inherit;
	white-space: pre-wrap;
	pointer-events: none;
}

.awwo-cms-seo-desc-ghost[hidden] {
	display: none;
}

/* The Customizer: a half-width field left alone on its row (the one beside it hidden) takes the whole row. */
.awwo-cms-fields .awwo-cms-field.awwo-cms-field-alone {
	grid-column: span 4;
}

/* Settings, Business, Locations: Address, Contact and Opening Hours as the
   other tables' smaller, muted text, wrapping when long and starting at the
   left (not as other tables' second and third columns, centred on one
   line); Pickup, Author and Date & Time centred, on one line, as Pages'. */
.awwo-cms-locations-table th:nth-child(n + 2 of :not(.awwo-cms-pick-cell)):nth-child(-n + 4 of :not(.awwo-cms-pick-cell)),
.awwo-cms-locations-table td:nth-child(n + 2 of :not(.awwo-cms-pick-cell)):nth-child(-n + 4 of :not(.awwo-cms-pick-cell)) {
	text-align: left;
	white-space: normal;
}

.awwo-cms-locations-table td:nth-child(n + 2 of :not(.awwo-cms-pick-cell)) {
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-locations-table td:nth-child(2 of :not(.awwo-cms-pick-cell)) {
	min-width: 160px;
}

.awwo-cms-locations-table th:nth-child(n + 6 of :not(.awwo-cms-pick-cell)),
.awwo-cms-locations-table td:nth-child(n + 6 of :not(.awwo-cms-pick-cell)) {
	text-align: center;
	white-space: nowrap;
}

/* Newsletter Reports: names and counts with their share as a bar; clicks
   by hour as 24 columns. */
.awwo-cms-report-figures {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 0;
}

.awwo-cms-report-bars {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-report-bars li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 12px;
	font-size: 13px;
}

.awwo-cms-report-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
}

.awwo-cms-report-count {
	color: var(--awwo-cms-muted);
}

.awwo-cms-report-bar {
	grid-column: 1 / -1;
	display: block;
	width: 100%;
	height: 6px;
}

.awwo-cms-report-bar .is-track,
.awwo-cms-report-hours .is-track {
	fill: var(--awwo-cms-control);
}

.awwo-cms-report-bar .is-fill,
.awwo-cms-report-hours .is-fill {
	fill: var(--awwo-cms-green);
}

.awwo-cms-report-hours {
	display: block;
	width: 100%;
	height: 120px;
}

.awwo-cms-report-hours-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 12px;
	color: var(--awwo-cms-muted);
}

/* A card's own small switch in its corner (Newsletter Reports' period). */
.awwo-cms-subtabs.awwo-cms-subtabs-small {
	margin: 0;
	padding: 3px;
}

.awwo-cms-subtabs-small .awwo-cms-subtab {
	padding: 4px 10px;
	font-size: 12px;
}

/* Unsubscribe Reasons: the words people added, each a quiet quote. */
.awwo-cms-report-words {
	margin: 12px 0 0;
	padding: 8px 12px;
	border-left: 3px solid var(--awwo-cms-border);
	color: var(--awwo-cms-muted);
	font-size: 13px;
	font-style: italic;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* Settings, Languages: the Frontend's languages, an accordion each (as the SEO window's rows), 16px apart; the title its
   flag, then its name. */
.awwo-cms-languages-rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.awwo-cms-languages-rows > [hidden] {
	display: none;
}

.awwo-cms-languages-row-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.awwo-cms-languages-row-flag {
	display: block;
	flex: none;
	border-radius: 2px;
}