/**
 * 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: 8px;
	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);
	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);
	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);
}

/* 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: 8px;
	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: 6px;
	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: 8px 8px 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: 8px 8px 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);
	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: 8px;
	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);
	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);
	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);
}

/* 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: 8px;
	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: 6px;
	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: 8px;
}

.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: 8px;
	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: 8px;
	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: 7px;
}

.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: 7px;
	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: 6px;
	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: 4px;
	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: 8px;
	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: 7px 0 0 7px;
	background: none;
	cursor: pointer;
}

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

/* 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: 4px;
}

.awwo-cms-color-swatch::-moz-color-swatch {
	border: 0;
	border-radius: 4px;
}

/* 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). */
.awwo-cms-auth-switch-toggles {
	align-items: center;
	margin: 0;
}

.awwo-cms-auth-switch-toggles .awwo-cms-auth-switch-item {
	flex: 1 1 0;
	width: auto;
}

/* 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);
	/* 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 {
	/* The shield fills 3/4 of its 640 box: 24px draws it 18px tall. */
	width: 24px;
	height: 24px;
}

.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;
}


/* 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;
}

/* 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") center / contain no-repeat;
		mask: url("../icons/awwo-cms-check.svg") 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: 8px;
	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: 6px;
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
	font-size: 11px;
	font-weight: 800;
}

.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: 6px;
	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);
}

.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: 8px;
	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);
}

/* 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: 8px;
	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: 6px;
	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: 6px;
	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: 8px;
	/* 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 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: 8px;
	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: 8px;
	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: 4px;
	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));
}

/* 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;
}

.awwo-cms-notifications-vars {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.awwo-cms-notifications-var {
	padding: 4px 10px;
	border: 1px dashed var(--awwo-cms-ok);
	border-radius: 6px;
	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: 8px;
}

.awwo-cms-notifications-frame iframe {
	display: block;
	width: 100%;
	height: 480px;
	border: 0;
	background: transparent;
}

/* 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: a table in the accordion, edge to edge with the fields (Old Address, then each one's
   Delete, at the end); a long old address wraps. */
.awwo-cms-seo-redirects :is(th, td):first-child {
	padding-left: 0;
}

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

.awwo-cms-seo-redirects th {
	padding-top: 0;
}

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

/* 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: 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);
}

.awwo-cms-social-preview-image.is-square {
	aspect-ratio: 1 / 1;
}

.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: 3px;
	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: 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);
}

.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: 8px;
	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: 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: Customize and Menus, under the panel's head. */
.awwo-cms-appearance-tabs {
	margin: 0;
	padding: 0 20px;
}

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

/* 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: 8px;
	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: 6px;
	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;
}

.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%;
}

/* Settings, Search Engine Optimization (Sitemap Lists): a table in the box, names then their
   checkbox (centred, as the tables' second column), edge to edge with the fields. */
.awwo-cms-seo-ticks :is(th, td):first-child {
	padding-left: 0;
}

.awwo-cms-seo-ticks :is(th, td):last-child {
	width: 1%;
	padding-right: 0;
	white-space: nowrap;
}

.awwo-cms-seo-ticks th {
	padding-top: 0;
}

.awwo-cms-seo-ticks td {
	padding-top: 10px;
	padding-bottom: 10px;
}

.awwo-cms-seo-ticks label {
	font-weight: 400;
	cursor: pointer;
}

.awwo-cms-seo-ticks input[type="checkbox"] {
	display: block;
	margin: 0 auto;
}

/* 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: 8px;
	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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z'/%3E%3C/svg%3E");
}

.awwo-cms-button[data-awwo-cms-icon="xmark"] {
	--awwo-cms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z'/%3E%3C/svg%3E");
}

.awwo-cms-button[data-awwo-cms-icon="trash-can"] {
	--awwo-cms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M136.7 5.9C141.1-7.2 153.3-16 167.1-16l113.9 0c13.8 0 26 8.8 30.4 21.9L320 32 416 32c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l96 0 8.7-26.1zM32 144l384 0 0 304c0 35.3-28.7 64-64 64L96 512c-35.3 0-64-28.7-64-64l0-304zm88 64c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24zm104 0c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24zm104 0c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24z'/%3E%3C/svg%3E");
}

.awwo-cms-button[data-awwo-cms-icon="eraser"] {
	--awwo-cms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M290.7 57.4L57.4 290.7c-25 25-25 65.5 0 90.5l80 80c12 12 28.3 18.7 45.3 18.7L288 480l9.4 0L512 480c17.7 0 32-14.3 32-32s-14.3-32-32-32l-124.1 0L518.6 285.3c25-25 25-65.5 0-90.5L381.3 57.4c-25-25-65.5-25-90.5 0zM297.4 416l-9.4 0-105.4 0-80-80L227.3 211.3 364.7 348.7 297.4 416z'/%3E%3C/svg%3E");
}

.awwo-cms-button[data-awwo-cms-icon="plus"] {
	--awwo-cms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 160-160 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l160 0 0 160c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160 160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-160 0 0-160z'/%3E%3C/svg%3E");
}

.awwo-cms-button[data-awwo-cms-icon="table-cells-large"] {
	--awwo-cms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M384 96l-128 0 0 128 128 0 0-128zm64 128l0 192c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 128zM64 288l0 128 128 0 0-128-128 0zm128-64l0-128-128 0 0 128 128 0zm64 64l0 128 128 0 0-128-128 0z'/%3E%3C/svg%3E");
}

.awwo-cms-button[data-awwo-cms-icon="pen-to-square"] {
	--awwo-cms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L368 46.1 465.9 144 490.3 119.6c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L432 177.9 334.1 80 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/svg%3E");
}

.awwo-cms-button[data-awwo-cms-icon="list"] {
	--awwo-cms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M40 48C26.7 48 16 58.7 16 72l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24L40 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM16 232l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0z'/%3E%3C/svg%3E");
}

.awwo-cms-button[data-awwo-cms-icon="copy"] {
	--awwo-cms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-200.6c0-17.4-7.1-34.1-19.7-46.2L370.6 17.8C358.7 6.4 342.8 0 326.3 0L192 0zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-16-64 0 0 16-192 0 0-256 16 0 0-64-16 0z'/%3E%3C/svg%3E");
}

.awwo-cms-button[data-awwo-cms-icon="download"] {
	--awwo-cms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 210.7-41.4-41.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 242.7 256 32zM64 320c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-46.9 0-56.6 56.6c-31.2 31.2-81.9 31.2-113.1 0L110.9 320 64 320zm304 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/svg%3E");
}

.awwo-cms-button[data-awwo-cms-icon="rotate"] {
	--awwo-cms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M480.1 192l7.9 0c13.3 0 24-10.7 24-24l0-144c0-9.7-5.8-18.5-14.8-22.2S477.9 .2 471 7L419.3 58.8C375 22.1 318 0 256 0 127 0 20.3 95.4 2.6 219.5 .1 237 12.2 253.2 29.7 255.7s33.7-9.7 36.2-27.1C79.2 135.5 159.3 64 256 64 300.4 64 341.2 79 373.7 104.3L327 151c-6.9 6.9-8.9 17.2-5.2 26.2S334.3 192 344 192l136.1 0zm29.4 100.5c2.5-17.5-9.7-33.7-27.1-36.2s-33.7 9.7-36.2 27.1c-13.3 93-93.4 164.5-190.1 164.5-44.4 0-85.2-15-117.7-40.3L185 361c6.9-6.9 8.9-17.2 5.2-26.2S177.7 320 168 320L24 320c-13.3 0-24 10.7-24 24L0 488c0 9.7 5.8 18.5 14.8 22.2S34.1 511.8 41 505l51.8-51.8C137 489.9 194 512 256 512 385 512 491.7 416.6 509.4 292.5z'/%3E%3C/svg%3E");
}

.awwo-cms-button[data-awwo-cms-icon="paper-plane"] {
	--awwo-cms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M536.4-26.3c9.8-3.5 20.6-1 28 6.3s9.8 18.2 6.3 28l-178 496.9c-5 13.9-18.1 23.1-32.8 23.1-14.2 0-27-8.6-32.3-21.7l-64.2-158c-4.5-11-2.5-23.6 5.2-32.6l94.5-112.4c5.1-6.1 4.7-15-.9-20.6s-14.6-6-20.6-.9L229.2 276.1c-9.1 7.6-21.6 9.6-32.6 5.2L38.1 216.8c-13.1-5.3-21.7-18.1-21.7-32.3 0-14.7 9.2-27.8 23.1-32.8l496.9-178z'/%3E%3C/svg%3E");
}

.awwo-cms-button[data-awwo-cms-icon="user-plus"] {
	--awwo-cms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M285.7 304c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7L77.7 512C61.3 512 48 498.7 48 482.3 48 383.8 127.8 304 226.3 304l59.4 0zM528 80c13.3 0 24 10.7 24 24l0 48 48 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-48 0 0 48c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-48-48 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0 0-48c0-13.3 10.7-24 24-24zM256 248a120 120 0 1 1 0-240 120 120 0 1 1 0 240z'/%3E%3C/svg%3E");
}

/* 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: 5px;
	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='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='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='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='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: 8px;
	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: 8px;
	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: 8px;
	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) th:nth-child(4 of :not(.awwo-cms-pick-cell)),
.awwo-cms-media-table:not(.awwo-cms-pages-table, .awwo-cms-users-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) 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: 8px;
	/* 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);
	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: 4px;
	/* 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: 8px;
	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: 8px;
}

/* 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;
}

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

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

/* 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: 8px;
	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: 8px;
	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: 2px;
}

/* 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). */
.awwo-cms-term-thumb-empty {
	width: 100%;
	height: 100%;
	border: 1px dashed var(--awwo-cms-border);
	border-radius: 8px;
	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);
	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: 8px;
	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 > 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: 8px;
	/* 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: 2px;
	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));
}

.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;
}

/* 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: 2px;
}

.awwo-cms-zone-mode-text {
	width: 40%;
	height: 3px;
	border-radius: 2px;
	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;
}



/* 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;
}