:root {
	--left-nav-bg-color: #0a1a29;

	/* =====================================================================
	   Admin design tokens
	   These are consumed by .admin* primitives and (as of the global tokens
	   migration) by all legacy admin selectors below. New admin CSS should
	   reference var(--admin-*) rather than re-declare hex literals.
	   ===================================================================== */

	/* Admin spacing — linear scale (matches existing admin pad/margin literals).
	   Use these for layouts that need predictable sizes. */
	--admin-space-1: 0.25rem;
	--admin-space-2: 0.5rem;
	--admin-space-3: 0.75rem;
	--admin-space-4: 1rem;
	--admin-space-5: 1.25rem;
	--admin-space-6: 1.5rem;
	--admin-space-7: 1.75rem;
	--admin-space-8: 2rem;

	/* =====================================================================
	   Admin typography scale — modular, 1.15 ratio anchored at 1rem.

	   Provides coherent hierarchy across primitives and a single retune
	   point: change --admin-font-ratio to rescale the whole system. The
	   1.15 (minor second) ratio is calibrated for admin density — tight
	   enough that adjacent steps don't dwarf each other, wide enough to
	   keep visual hierarchy readable. Anchored at 1rem (16px), with body
	   intentionally one step below at 0.875rem.
	   ===================================================================== */
	--admin-font-ratio: 1.2;
	--admin-font-s-2:   calc(1rem / var(--admin-font-ratio) / var(--admin-font-ratio));   /* ~12.1px */
	--admin-font-s-1:   calc(1rem / var(--admin-font-ratio));                              /* ~13.9px */
	--admin-font-s0:    1rem;                                                              /* 16px */
	--admin-font-s1:    calc(1rem * var(--admin-font-ratio));                              /* ~18.4px */
	--admin-font-s2:    calc(var(--admin-font-s1) * var(--admin-font-ratio));              /* ~21.2px */
	--admin-font-s3:    calc(var(--admin-font-s2) * var(--admin-font-ratio));              /* ~24.3px */
	--admin-font-s4:    calc(var(--admin-font-s3) * var(--admin-font-ratio));              /* ~28.0px */

	/* Semantic aliases — what primitives consume. Mapping primitives to
	   scale steps lets a ratio change rescale everything coherently. */
	--admin-font-meta:           var(--admin-font-s-2);  /* .adminMetaLabel */
	--admin-font-small:          var(--admin-font-s-1);  /* small inline text — badges, code, callout, delta */
	--admin-font-card-subtitle:  var(--admin-font-s-1);  /* .adminCardSubtitle (same step, distinct semantic) */
	--admin-font-body:           0.875rem;               /* body — one step below scale anchor for admin density */
	--admin-font-card-title:     var(--admin-font-s1);   /* .adminCardTitle, .adminPageLead, h2 */
	--admin-font-section-title:  var(--admin-font-s2);   /* .adminSectionTitle */
	--admin-font-h1:             var(--admin-font-s3);   /* h1 (toolbar page title) */
	--admin-font-display:        var(--admin-font-s4);   /* .adminStatValue */

	/* Admin spacing — modular scale (1.5 ratio, mirrors body line-height for
	   visual harmony per Every Layout). Use these for new layouts where you
	   want proportional rhythm. Change --admin-ratio to scale the system.
	   --admin-s0 is the base; positive steps grow, negative steps shrink. */
	--admin-ratio: 1.5;
	--admin-s0:    1rem;
	--admin-s1:    calc(var(--admin-s0)  * var(--admin-ratio));   /* ~1.5rem  */
	--admin-s2:    calc(var(--admin-s1)  * var(--admin-ratio));   /* ~2.25rem */
	--admin-s3:    calc(var(--admin-s2)  * var(--admin-ratio));   /* ~3.375rem */
	--admin-s4:    calc(var(--admin-s3)  * var(--admin-ratio));   /* ~5.06rem */
	--admin-s5:    calc(var(--admin-s4)  * var(--admin-ratio));   /* ~7.59rem */
	--admin-s-1:   calc(var(--admin-s0)  / var(--admin-ratio));   /* ~0.667rem */
	--admin-s-2:   calc(var(--admin-s-1) / var(--admin-ratio));   /* ~0.444rem */
	--admin-s-3:   calc(var(--admin-s-2) / var(--admin-ratio));   /* ~0.296rem */

	/* Admin radii */
	--admin-radius-sm:   2px;
	--admin-radius-md:   4px;
	--admin-radius-lg:   8px;
	--admin-radius-full: 999px;

	/* Admin shadows */
	--admin-shadow-panel: 0 3px 15px rgba(0,0,0,.2);
	--admin-shadow-pop:   0 6px 24px rgba(0,0,0,.18);

	/* Admin breakpoints — primitives stack below this width.
	   Single default; per-primitive overrides land in their own rules
	   since @container / @media query expressions can't read var() values. */
	--admin-breakpoint-narrow: 640px;

	/* Admin colors — interactive */
	--admin-color-interactive:        #428bca;
	--admin-color-interactive-hover:  #3379b1;
	--admin-color-link:               #1075a2;

	/* Admin colors — text */
	--admin-color-text:               #333;
	--admin-color-text-muted:         #555;
	--admin-color-text-inverse:       #fff;

	/* Admin colors — surface */
	--admin-color-surface:            #fff;
	--admin-color-surface-alt:        #f4f4f5;
	--admin-color-surface-selected:   #e4f5fc;

	/* Admin colors — border */
	--admin-color-border:             #cccccc;
	--admin-color-border-subtle:      #e5e7eb;
	--admin-color-border-strong:      #dadada;

	/* Admin colors — status (text-on-light usage) */
	--admin-color-status-good:        #15803d;
	--admin-color-status-bad:         #b91c1c;
	--admin-color-status-warning:     #b45309;
	--admin-color-status-info:        #0a6692;
	--admin-color-status-neutral:     #cbd5e1;

	/* Admin colors — status soft backgrounds (for chips/banners/pills). */
	--admin-color-status-good-bg:     #d1fae5;
	--admin-color-status-bad-bg:      #fee2e2;
	--admin-color-status-warning-bg:  #fef3c7;
	--admin-color-status-info-bg:     #e4f5fc;
	--admin-color-status-neutral-bg:  #f1f5f9;

	/* Admin colors — extended greys (form chrome, switch states, hover surfaces). */
	--admin-color-surface-muted:      #eee;
	--admin-color-surface-hover:      #f3fbfd;
	--admin-color-border-faint:       #bbb;
	--admin-color-border-divider:     rgba(240, 240, 240, 1);
	--admin-color-overlay-faint:      rgba(0, 0, 0, 0.1);

	/* Admin colors — code display (consumed by .adminCodeBlock). */
	--admin-color-code-bg:            #1f2937;
	--admin-color-code-text:          #e5e7eb;

	/* Admin colors — soft accent variants (decorative, lower-contrast surfaces). */
	--admin-color-feature-website-soft:  #60a5fa;

	/* Left navigation accents (background uses --left-nav-bg-color above). */
	--admin-color-nav-text:           #bbb;
	--admin-color-nav-text-active:    #fff;
	--admin-color-nav-active-from:    #22303e;
	--admin-color-nav-active-to:      #2f3c49;

	/* Admin colors — Oncord feature accents (brand color per product area).
	   Use these directly via var(...), or apply a .featureWebsite / .featureCustomers /
	   .featureMarketing / .featureCommerce / .featureSettings wrapper class to set
	   --feature-color for descendants that follow the established convention.
	   Settings is a soft blue-grey — distinct from the four product-area accents. */
	--admin-color-feature-website:    #169fda;
	--admin-color-feature-customers:  #bc469a;
	--admin-color-feature-marketing:  #f1a421;
	--admin-color-feature-commerce:   #50c0af;
	--admin-color-feature-settings:   #8386a5;
}


/* =========================================================================
   Base / resets
   Document-level defaults: html, body, headings, links, paragraphs.
   ========================================================================= */

/* Stop chrome from lagging on click of links */
html {
	touch-action: manipulation;
}

body {
	font-family: "Roboto", Arial, Verdana, sans-serif;
	font-size: var(--admin-font-body);
	line-height: 1.45;
	cursor: default;
	margin: 0;
	padding-left: 9rem;
	color: var(--admin-color-text);
}

a {
	color: var(--admin-color-link);
	text-decoration: none;
}

h1 {
	color: var(--admin-color-text-muted);
	font-family: "Roboto", Arial, Verdana, sans-serif;
	font-weight: normal;
	margin-top: .5rem;
	margin-bottom: .5rem;
	line-height: 1.2;
	font-size: var(--admin-font-h1);
	letter-spacing: -0.5px;
}

h1#designPageTitle {
	line-height: 4rem;
	margin: 0;
	padding: 0 2rem;
}

/* Agency partner logo shown in place of the greeting on the Dashboard */
#designHeaderPartnerLogo {
	height: 4rem;
	display: flex;
	align-items: center;
	padding: 0 2rem;
	box-sizing: border-box;
	margin: 0;
}

#designHeaderPartnerLogo a {
	display: inline-flex;
}

#designHeaderPartnerLogo img {
	display: block;
	max-height: 40px;
	max-width: 320px;
	width: auto;
}

h2,
h3 {
	margin-top: 14px;
	margin-bottom: 10px;
}

h2 {
	font-size: var(--admin-font-card-title);
	font-weight: normal;
	line-height: 1.3;
}

h3 {
	/* h3 is intentionally OFF-SCALE — used widely as a small bold form-row
	   group header / table sub-head, where 12px density matters. For prose
	   or documentation headings inside cards, use .adminCardTitle (which
	   IS on the typography scale). */
	font-size: 12px;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: .3em;
}

.panel h2,
.panel h3 {
	margin-top: 0px;
}

h2 a,
h3 a {
	color: var(--admin-color-text);
}

p {
	margin-top: 0px;
	margin-bottom: 12px;
}


/* =========================================================================
   Data tables
   Table chrome, headers, rows, selection state, small utility icons.
   ========================================================================= */

/* Enable horizontal scroll overflow on tables */
.oncord-dataTable, .oncord-dataTree
{
	display: block;
	overflow-x: auto;
	clear: both;
}

th
{
	box-sizing: border-box;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
	text-transform: uppercase;
	background-color: var(--admin-color-surface-alt);
	white-space: nowrap;
	font-size: 12px;
	color: currentColor;
	letter-spacing: 0.2px;
	padding-top: 11px;
	padding-bottom: 8px;
	vertical-align: middle !important;
}

th.sortable
{
	padding: 0px;
	vertical-align: top;
}

th.sortable a {
	padding: 13px 6px 10px 6px;
}

th a {
	padding-left: 2px;
	padding-right: 2px;
	color: currentColor;
	display: block;
}

th a:hover {
	text-decoration: none;
}

tr.selected,
.tableRow-active
{
	background-color: var(--admin-color-surface-selected) !important;
	color: #000;
}

th:first-child input[type=checkbox] {
	margin-left: 0px;
}

tr.selected {
	background-color: var(--admin-color-surface-selected) !important;
	color: #000;
}

td {
	box-sizing: border-box;
}

td input[type=checkbox] {
	margin: 0px 2px 0px 2px;
}

img.iconSmall {
	width: 18px;
	height: 14px;
	vertical-align: text-top;
}

h2 img.iconSmall {
	margin-top: 4px;
}

img.iconCountry {
	width: 18px;
	height: 14px;
	vertical-align: -2px;
	shape-rendering: crispEdges;
	border-radius: 2px;
	opacity: 0.8;
}

/* =========================================================================
   Status text & pills
   Inline status colour spans and uppercase pill tags.
   ========================================================================= */

span.good {
	color: var(--admin-color-status-good);
}

span.neutral {
	color: var(--admin-color-status-warning);
}

span.bad {
	color: var(--admin-color-status-bad);
}

span.unknown {
	color: #000;
}

span.tagGood,
span.tagBad,
span.tagInfo,
span.tagWarning,
span.tagGrey {
	text-transform: uppercase;
	text-align: center;
	font-size: 10px;
	padding: 5px 7px 5px 7px;
	margin: -1px 1em 1px 1em;
	color: var(--admin-color-text-inverse);
	font-weight: bold;
	letter-spacing: 1.1px;
	border-radius: 3px;
	display: inline-block;
}

span.tagGood {
	background-color: var(--admin-color-status-good);
}

span.tagBad {
	background-color: var(--admin-color-status-bad);
}

span.tagInfo {
	background-color: var(--admin-color-status-info);
}

span.tagWarning {
	background-color: var(--admin-color-status-warning);
}

span.tagGrey {
	/* Medium grey kept for white-text contrast; --admin-color-status-neutral is too pale here. */
	background-color: #b0b0b3;
}

/* =========================================================================
   Toolbar
   Top toolbar chrome, toolbar groups, labels, search-box wrappers.
   ========================================================================= */

div.toolbar {
	box-sizing: border-box;
	border-bottom: 1px solid var(--admin-color-border);
	background-color: var(--admin-color-surface-alt);
	white-space: nowrap;
	/* Vertical align middle */
	line-height: 38px;
	height: 40px;
}


@media screen and (max-width: 1024px)
{
	div.toolbar:not(:has(input))
	{
		overflow-x: auto;
		overflow-y: hidden;
	}
}

div.toolbar .SearchBoxEditContainer, div.toolbar .SearchBoxSelected
{
	margin-top: 1px;
}

div.toolbarLabel {
	padding-left: 6px;
	padding-top: 2px;
}

div.toolbar a.toolbarButton {
	vertical-align: middle;
	background: none !important;
	border: none !important;
	line-height: 0px;
}

div.toolbar:after {
	content: "";
	display: table;
	clear: both;
}

div.toolbarGroup a:last-of-type:not([class=unimportant]),
#designContentHeaderPageFunctions a:last-of-type:not([class=unimportant]) {
	border-right: 1px solid var(--admin-color-border-strong);
}

/* Toolbar drop-down menu (<standard:toolbarmenu>) — a toolbar button that opens its
   context menu anchored beneath it. Non-item children form the label; authoring it as
   an a.toolbarButton inherits the exact button chrome (metrics, icons, group dividers).
   The label ignores pointer events so every click lands on the .contextMenuContainer,
   which contextmenu.js treats as the open trigger. */
.contextMenuContainer.toolbarMenu {
	width: auto;
	/* contextmenu.js injects a max-width for overflowing table "..." menus with
	   !important — opt toolbar menus out at equal importance */
	max-width: none !important;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	cursor: pointer;
}

.contextMenuContainer.toolbarMenu > .contextMenuInner {
	float: none;
	display: inline-block;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: visible;
	pointer-events: none;
}

/* Room for the chevron inside the button chrome */
.contextMenuContainer.toolbarMenu .toolbarButton {
	padding-right: 30px;
}

/* Replace the "..." glyph of the base context menu with a drop-down chevron */
.contextMenuContainer.toolbarMenu::before {
	content: none;
}

.contextMenuContainer.toolbarMenu::after {
	content: "";
	position: absolute;
	right: 13px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -5px;
	border: solid var(--admin-color-text-muted);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
	pointer-events: none;
	transition: border-color 0.1s ease-out;
}

.contextMenuContainer.toolbarMenu:hover::after,
.contextMenuContainer.toolbarMenu.contextMenuContainerOpen::after {
	border-color: var(--admin-color-text);
}

div.toolbar .toolbarMenu.contextMenuContainerOpen a.toolbarButton {
	background: var(--admin-color-surface) !important;
}

/* =========================================================================
   Form controls
   Text inputs, selects, checkbox / radio / switch styling.
   ========================================================================= */

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=number],
textarea {
	font-family: "Roboto", Arial, Verdana, sans-serif !important;
	font-size: 15px !important;
	line-height: 19px !important;
	padding: 8px 8px 7px 8px;
	border: 1px solid var(--admin-color-border);
	border-radius: 1px;
	box-sizing: border-box;
	transition: box-shadow 0.1s linear, border 0.1s linear;
	box-shadow: 0 0, 0 0 var(--admin-color-interactive) inset, 0 0, 0 0;
	background: var(--admin-color-surface);
	min-height: 37px; /* Fix because on 4k, the height is 36.3px */
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
	box-shadow: 0 0, 0 1px var(--admin-color-interactive), 0 0, 0 0;
	border-bottom: 1px solid var(--admin-color-interactive);
	outline: none;
}

select {
	font-family: "Roboto", Arial, Verdana, sans-serif;
	font-size: 15px;
	padding: 8px 3px 7px 5px;
	border: 1px solid var(--admin-color-border);
	background: var(--admin-color-surface);
	box-sizing: border-box;
	min-height: 37px; /* Fix because on 4k, the height is 36.3px */
}

label.s8-checkbox-container,
label.s8-radiobutton-container
{
	box-sizing: border-box;
	min-width: 1.1em;
	min-height: 1.1em;
	margin-right: 0.2em;
	margin-top: 1px;
	vertical-align: text-top;
	display: inline-block;
	position: relative;
	user-select: none;
	cursor: pointer;
}

label.s8-checkbox-container input,
label.s8-radiobutton-container input
{
	display: none;
}

label.s8-checkbox-container input ~ .s8-checkbox,
label.s8-radiobutton-container input ~ .s8-radiobutton
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--admin-color-surface);
	border: 1px solid rgba(175,175,175,0.8);
	border-radius: 2px;
}

label.s8-checkbox-label
{
	cursor: pointer;
}

label.s8-radiobutton-container input ~ .s8-radiobutton
{
	border-radius: 1em;
}

label.s8-checkbox-container input:active ~ .s8-checkbox,
label.s8-radiobutton-container input:active ~ .s8-radiobutton
{
	background: var(--admin-color-surface-muted);
}

label.s8-checkbox-container input:checked ~ .s8-checkbox:before
{
	content: '';
	position: absolute;
	left: .32em;
	top: 0.05em;
	width: .2em;
	height: .55em;
	border: solid var(--admin-color-interactive);
	border-width: 0 .2em .2em 0;
	transform: rotate(38deg);
}

/**
 * Grouped image select checkbox
 */
.checkboxImageGroup
{
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap
}

.checkboxImageGroup>input[type=checkbox],
.checkboxImageGroup>input[type=radio]
{
	display: none !important;
}

.checkboxImageGroup>label
{
	padding: 6px 8px;
	border: 1px solid var(--admin-color-border) !important;
	opacity: 0.9;
	cursor: pointer;
}

.checkboxImageGroup>label svg,
.checkboxImageGroup>label img,
.checkboxImageGroup>label object
{
	filter: grayscale(90%);
	pointer-events: none;
}

.checkboxImageGroup input[type=checkbox]:checked + label,
.checkboxImageGroup input[type=radio]:checked + label
{
	border: 1px solid #4095f0 !important;
	background: var(--admin-color-surface);
	border-radius: 2px;
	opacity: 1;
}

.checkboxImageGroup input[type=checkbox]:checked + label svg,
.checkboxImageGroup input[type=radio]:checked + label svg,
.checkboxImageGroup input[type=checkbox]:checked + label img,
.checkboxImageGroup input[type=radio]:checked + label img,
.checkboxImageGroup input[type=checkbox]:checked + label object,
.checkboxImageGroup input[type=radio]:checked + label object
{
	filter: grayscale(0%);
}

/**
 * Checkbox Switch Styling
 * Enable by placing the class "switch" on any forms:checkbox.
 * Overwrite these root values in a more specifically scoped context to create custom variants.
 */
label.s8-checkbox-container {
	/* Switch Body */
	--switch-body-width: 52px;
	--switch-body-height: 22px;
	--switch-body-padding: 0px; /* how far away the button will stay from the ends of the body */
	/* Switch Body when unchecked */
	--switch-0-body-border-width: 1px;
	--switch-0-body-border-color: var(--admin-color-border-faint);
	--switch-0-body-background-color: #ccc;
	--switch-0-body-boxshadow-x: 0;
	--switch-0-body-boxshadow-y: 0;
	--switch-0-body-boxshadow-blur: 0;
	--switch-0-body-boxshadow-spread: 0;
	--switch-0-body-boxshadow-color: transparent;
	/* Switch Body when checked */
	--switch-1-body-border-width: 1px;
	--switch-1-body-border-color: hsl(120, 100%, 23%);
	--switch-1-body-background-color: hsl(120, 100%, 30%);
	--switch-1-body-boxshadow-x: 0;
	--switch-1-body-boxshadow-y: 0;
	--switch-1-body-boxshadow-blur: 0;
	--switch-1-body-boxshadow-spread: 0;
	--switch-1-body-boxshadow-color: transparent;

	/* Label when unchecked */
	--switch-0-label: "OFF";
	--switch-0-label-indent: 3px; /* Use to manually center align the off label */
	--switch-0-label-color: var(--admin-color-text-inverse);
	--switch-0-label-fsize: 13px;
	--switch-0-label-fweight: 600;
	/* Label when checked */
	--switch-1-label: "ON";
	--switch-1-label-color: var(--admin-color-text-inverse);
	--switch-1-label-fsize: 13px;
	--switch-1-label-fweight: 600;

	/* Switch */
	--switch-button-width: 22px;
	--switch-button-height: 22px;
	/* Switch when unchecked */
	--switch-0-button-border-width: 1px;
	--switch-0-button-border-color: var(--admin-color-border-faint);
	--switch-0-button-background-color: var(--admin-color-surface-muted);
	--switch-0-button-boxshadow-x: 1px;
	--switch-0-button-boxshadow-y: 1px;
	--switch-0-button-boxshadow-blur: 1px;
	--switch-0-button-boxshadow-spread: 0px;
	--switch-0-button-boxshadow-color: #00000017;
	/* Switch when checked */
	--switch-1-button-border-width: 1px;
	--switch-1-button-border-color: var(--admin-color-border-faint);
	--switch-1-button-background-color: var(--admin-color-surface-muted);
	--switch-1-button-boxshadow-x: -1px;
	--switch-1-button-boxshadow-y: 1px;
	--switch-1-button-boxshadow-blur: 2px;
	--switch-1-button-boxshadow-spread: 0px;
	--switch-1-button-boxshadow-color: #00000044;
}

/* Switch Body (OFF) */
.s8-checkbox-container input[type="checkbox"].switch + .s8-checkbox {
	position: relative;
	border-radius: calc(var(--switch-body-height) / 2);
	transition: all 100ms ease-out;
	display: flex;
	box-sizing: border-box;
	align-items: center;

	width: var(--switch-body-width);
	height: var(--switch-body-height);

	background-color: var(--switch-0-body-background-color);
	border: var(--switch-0-body-border-width) solid var(--switch-0-body-border-color);
	box-shadow: var(--switch-0-body-boxshadow-x) var(--switch-0-body-boxshadow-y) var(--switch-0-body-boxshadow-blur) var(--switch-0-body-boxshadow-spread) var(--switch-0-body-boxshadow-color);
}
/* Switch Body (ON) */
.s8-checkbox-container input[type="checkbox"].switch:checked + .s8-checkbox {
	background-color: var(--switch-1-body-background-color);
	border: var(--switch-1-body-border-width) solid var(--switch-1-body-border-color);
	box-shadow: var(--switch-1-body-boxshadow-x) var(--switch-1-body-boxshadow-y) var(--switch-1-body-boxshadow-blur) var(--switch-1-body-boxshadow-spread) var(--switch-1-body-boxshadow-color);
}

/* Switch ON label (unchecked) */
.s8-checkbox-container input[type="checkbox"].switch + .s8-checkbox::before {
	content: var(--switch-1-label);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	box-sizing: border-box;
	width: calc(var(--switch-body-width) - var(--switch-button-width) + var(--switch-0-body-border-width));
	height: var(--switch-button-height);
	top: unset;
	left: calc(-1 * (var(--switch-body-width) - var(--switch-button-width)));
	padding: var(--switch-0-body-border-width) 0;
	overflow: hidden;
	border: none;
	transform: none;
	color: var(--switch-1-label-color);
	font-size: var(--switch-1-label-fsize);
	font-weight: var(--switch-1-label-fweight);
	transition: all 100ms ease-out;

	--switch-0-clip-label-t: 0px;
	--switch-0-clip-label-r: calc(var(--switch-body-width) - var(--switch-button-width));
	--switch-0-clip-label-b: var(--switch-button-height);
	--switch-0-clip-label-l: calc(var(--switch-body-width) - var(--switch-button-width));
	clip: rect(var(--switch-0-clip-label-t), var(--switch-0-clip-label-r), var(--switch-0-clip-label-b), var(--switch-0-clip-label-l));
}
/* Switch ON label (checked) */
.s8-checkbox-container input[type="checkbox"].switch:checked + .s8-checkbox::before {
	width: calc(var(--switch-body-width) - var(--switch-button-width) + var(--switch-1-body-border-width));
	left: 0;
	padding: var(--switch-1-body-border-width) 0;

	--switch-1-clip-label-t: 0px;
	--switch-1-clip-label-r: calc(var(--switch-body-width) - var(--switch-button-width));
	--switch-1-clip-label-b: var(--switch-button-height);
	--switch-1-clip-label-l: 0px;
	clip: rect(var(--switch-1-clip-label-t), var(--switch-1-clip-label-r), var(--switch-1-clip-label-b), var(--switch-1-clip-label-l));
}

/* Switch Button and OFF label (unchecked) */
.s8-checkbox-container input[type="checkbox"].switch + .s8-checkbox::after {
	content: var(--switch-0-label);
	display: flex;
	align-items: center;
	position: absolute;
	box-sizing: border-box;
	width: var(--switch-button-width);
	height: var(--switch-button-height);
	left: calc(var(--switch-body-padding) - var(--switch-0-body-border-width));
	padding: 0 0 0 calc(var(--switch-button-width) - var(--switch-0-button-border-width) * 2);
	background-color: var(--switch-0-button-background-color);
	border: var(--switch-0-button-border-width) solid var(--switch-0-button-border-color);
	border-radius: 100%;
	box-shadow: var(--switch-0-button-boxshadow-x) var(--switch-0-button-boxshadow-y) var(--switch-0-button-boxshadow-blur) var(--switch-0-button-boxshadow-spread) var(--switch-0-button-boxshadow-color);
	text-indent: var(--switch-0-label-indent);
	color: var(--switch-0-label-color);
	font-size: var(--switch-0-label-fsize);
	font-weight: var(--switch-0-label-fweight);

	transition: all 100ms ease-out;

	--switch-0-clip-button-t: min(0px, calc(0px + var(--switch-0-button-boxshadow-y) - var(--switch-0-button-boxshadow-blur) - var(--switch-0-button-boxshadow-spread)));
	--switch-0-clip-button-r: var(--switch-body-width);
	--switch-0-clip-button-b: max(var(--switch-button-height), calc(var(--switch-button-height) + var(--switch-0-button-boxshadow-y) + var(--switch-0-button-boxshadow-blur) + var(--switch-0-button-boxshadow-spread)));
	--switch-0-clip-button-l: min(0px, calc(0px + var(--switch-0-button-boxshadow-x) - var(--switch-0-button-boxshadow-blur) - var(--switch-0-button-boxshadow-spread)));
	clip: rect(var(--switch-0-clip-button-t), var(--switch-0-clip-button-r), var(--switch-0-clip-button-b), var(--switch-0-clip-button-l));
}
/* Switch Button and OFF label (checked) */
.s8-checkbox-container input[type="checkbox"].switch:checked + .s8-checkbox::after {
	left: calc(100% - var(--switch-body-padding) - var(--switch-button-width) + var(--switch-1-body-border-width));
	background-color: var(--switch-1-button-background-color);
	border: var(--switch-1-button-border-width) solid var(--switch-1-button-border-color);
	box-shadow: var(--switch-1-button-boxshadow-x) var(--switch-1-button-boxshadow-y) var(--switch-1-button-boxshadow-blur) var(--switch-1-button-boxshadow-spread) var(--switch-1-button-boxshadow-color);

	--switch-1-clip-button-t: min(0px, calc(0px + var(--switch-1-button-boxshadow-y) - var(--switch-1-button-boxshadow-blur) - var(--switch-1-button-boxshadow-spread)));
	--switch-1-clip-button-r: max(var(--switch-button-width), calc(var(--switch-button-width) + var(--switch-1-button-boxshadow-x) + var(--switch-1-button-boxshadow-blur) + var(--switch-1-button-boxshadow-spread)));
	--switch-1-clip-button-b: max(var(--switch-button-height), calc(var(--switch-button-height) + var(--switch-1-button-boxshadow-y) + var(--switch-1-button-boxshadow-blur) + var(--switch-1-button-boxshadow-spread)));
	--switch-1-clip-button-l: min(0px, calc(0px + var(--switch-1-button-boxshadow-x) - var(--switch-1-button-boxshadow-blur) - var(--switch-1-button-boxshadow-spread)));
	clip: rect(var(--switch-1-clip-button-t), var(--switch-1-clip-button-r), var(--switch-1-clip-button-b), var(--switch-1-clip-button-l));
}

label.s8-radiobutton-container input:checked ~ .s8-radiobutton:before
{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	margin-left: -3.5px;
	background: var(--admin-color-interactive);
	border-radius: 1em;
}

/* =========================================================================
   Buttons
   Submit button, .submitLink, danger (.bad) variants, loading state.
   ========================================================================= */

button[type=submit], .submitLink
{
	display: inline-block;
	vertical-align: top;
	outline: none;
	background-color: var(--admin-color-interactive);
	background-image: linear-gradient(to bottom, #4b92cb, #3b89c7);

	border: 1px solid var(--admin-color-interactive);
	color: var(--admin-color-text-inverse);
	padding: 10px 25px 10px 25px;
	border-radius: 3px;
	margin-top: 2px;
	margin-bottom: 2px;
	cursor: pointer;
	font-weight: bold;
	font-size: 14px;
}

button[type=submit]:focus
{
	box-shadow: 0 0 3px rgba(200, 200, 200, 0.3);
}

button[type=submit]:active
{
	background: var(--admin-color-interactive-hover);
	background-image: none;
	color: rgba(255, 255, 255, 0.95);
	padding: 11px 25px 9px 25px;
	transition: background linear 0.05s;
}

button[type=submit]:active svg
{
	color: rgba(255, 255, 255, 0.95);
}

button[type=submit].submitLink-gray,
a.submitLink.submitLink-gray {
	background-color: #f5f5f5;
	background-image: linear-gradient(to bottom, #fafafa, #eee);
	border: 1px solid #dadada;
	color: #333;
}

button[type=submit].submitLink-gray:hover,
a.submitLink.submitLink-gray:hover {
	background-color: #eee;
	background-image: none;
}

button[type=submit].submitLink-gray:active,
a.submitLink.submitLink-gray:active {
	background: #ddd;
	background-image: none;
	color: #222;
}

.submitLink-sm
{
	padding: 6px 14px;
	font-size: 12px;
}

button[type=submit].submitButtonSubmitted
{
	color: rgba(0,0,0,0) !important;
	position: relative;
	user-select: none;
}

button[type=submit].submitButtonSubmitted *
{
	visibility: hidden !important;
}

button[type=submit].submitButtonSubmitted:before
{
	position: absolute;
	top: 4px;
	left: 4px;
	bottom: 4px;
	right: 4px;
	content: '';
	display: block;
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEyNSAyMCAxNTAgNDAiPgoJPGNpcmNsZSBmaWxsPSIjZmZmZmZmIiBzdHJva2U9Im5vbmUiIGN4PSIxNzAiIGN5PSI0MCIgcj0iNCI+CgkJPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIKCQkJCWR1cj0iMS40cyIKCQkJCXZhbHVlcz0iNDsgNzsgNC40OyA0OyA0OyA0OyA0OyA0OyA0OyA0OyIKCQkJCXJlcGVhdENvdW50PSJpbmRlZmluaXRlIgoJCQkJcmVzdGFydD0iYWx3YXlzIgoJCQkJYmVnaW49IjBzIi8+Cgk8L2NpcmNsZT4KCTxjaXJjbGUgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSJub25lIiBjeD0iMTkwIiBjeT0iNDAiIHI9IjQiPgoJCTxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiCgkJCQlkdXI9IjEuNHMiCgkJCQl2YWx1ZXM9IjQ7IDcuNTsgNC41OyA0OyA0OyA0OyA0OyA0OyA0OyA0OyIKCQkJCXJlcGVhdENvdW50PSJpbmRlZmluaXRlIgoJCQkJYmVnaW49IjAuMyIvPgoJPC9jaXJjbGU+Cgk8Y2lyY2xlIGZpbGw9IiNmZmZmZmYiIHN0cm9rZT0ibm9uZSIgY3g9IjIxMCIgY3k9IjQwIiByPSI0Ij4KCQk8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIgoJCQkJZHVyPSIxLjRzIgoJCQkJdmFsdWVzPSI0OyA3LjU7IDQuNTsgNDsgNDsgNDsgNDsgNDsgNDsgNDsiCgkJCQlyZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIKCQkJCWJlZ2luPSIwLjYiLz4KCTwvY2lyY2xlPgoJPGNpcmNsZSBmaWxsPSIjZmZmZmZmIiBzdHJva2U9Im5vbmUiIGN4PSIyMzAiIGN5PSI0MCIgcj0iNCI+CgkJPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIKCQkJCWR1cj0iMS40cyIKCQkJCXZhbHVlcz0iNDsgNzsgNC40OyA0OyA0OyA0OyA0OyA0OyA0OyA0OyIKCQkJCXJlcGVhdENvdW50PSJpbmRlZmluaXRlIgoJCQkJYmVnaW49IjAuOSIvPgoJPC9jaXJjbGU+Cjwvc3ZnPg==") no-repeat center center;
}

button[type=submit]:disabled {
	cursor: default;
	background: #e0e0e0;
	color: #b0b0b0;
	border: none;
}

button[type=submit].bad,
a.toolbarButton.bad,
a.submitLink.bad {
	background-color: var(--admin-color-status-bad);
	background-image: none;
	border: 1px solid var(--admin-color-status-bad);
	color: var(--admin-color-text-inverse);
}

button[type=submit].bad:hover,
a.toolbarButton.bad:hover,
a.submitLink.bad:hover {
	background-color: var(--admin-color-status-bad);
}

button[type=submit].bad:focus,
a.toolbarButton.bad:focus,
a.submitLink.bad:focus {
	outline: none;
	box-shadow: 0 0 4px 1px rgba(200, 0, 0, 0.4);
}

button[type=submit].bad:focus,
a.toolbarButton.bad:focus,
a.submitLink.bad:focus {
	background-color: var(--admin-color-status-bad);
	background-image: none;
}

button[type=submit] svg,
.submitLink svg {
	width: 16px;
	height: 16px;
	margin-top: -2px;
	fill: none;
	color: var(--admin-color-text-inverse);
	vertical-align: text-bottom;
	margin-left: -6px;
	margin-right: 8px;
}

button[type=submit] svg.submitSVGRight {
	margin-left: 8px;
	margin-right: -6px;
}

label {
	margin-right: 6px;
}

/* =========================================================================
   Toolbar buttons & page header
   .toolbarButton, .toolbarGroup, page-function buttons in #designPageHeader.
   ========================================================================= */

.uiActionColumn {
	font-size: 1rem;
}

th.uiActionColumn {
	padding-left: 4px;
}

a.toolbarButton,
div.toolbarGroup a,
#designContentHeaderPageFunctions a {
	line-height: 18px;
	box-sizing: border-box;
	padding: 6px 14px 6px 14px;
	display: inline-block;
	color: currentColor;
	border: 1px solid var(--admin-color-border-strong);
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.1s ease-out;
	user-select: none;
	-webkit-user-select: none;
}

#designContentHeaderPageFunctions a {
	border-top: 0;
}

#designPageHeader {
	background: var(--admin-color-surface-alt);
	margin: 0 -2rem 2rem -2rem;
	box-sizing: border-box;
	display: flex;
	position: relative;
}


#designLeftNavMobileClose
{
	display: none;
}

#designMobileNavButton
{
	display: none;
}

#designContentHeaderPageFunctionsContainer {
	position: absolute;
	top: 0px;
	left: 0%;
	right: 0%;
	height: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#designContentHeaderPageFunctions {
	width: auto;
	position: relative;
}

#designContentHeaderPageFunctionsShown {
	display: flex;
	height: 39px;
	overflow: hidden;
}

#designContentHeaderPageFunctions a {
	box-sizing: border-box;
	padding: 8px 16px 8px 16px;
	min-height: 38px;
	background: var(--admin-color-surface);
}

#designContentHeaderPageFunctions a.expand {
	display: none;
}

#designContentHeaderPageFunctionsExpandContainer {
	margin-top: 6px;
	position: absolute;
	z-index: 1;
	right: 0px;
	top: 100%;
	display: none;
}

#designContentHeaderPageFunctionsExpandContainer::before {
	position: absolute;
	right: 20px;
	top: -5px;
	content: "";
	width: 6px;
	height: 6px;
	border-top: 1px solid var(--admin-color-border-strong);
	border-right: 1px solid var(--admin-color-border-strong);
	background-color: #f8f8f8;
	transform: rotate(-45deg);
}

#designContentHeaderPageFunctionsExpandContainer {
	display: none;
	border: 1px solid var(--admin-color-border-strong);
}

#designContentHeaderPageFunctionsExpandContainer.expanded {
	display: block;
}

#designContentHeaderPageFunctionsExpandContainer a {
	padding: 8px !important;
	display: block !important;
	float: none !important;
	border: none !important;
	margin-left: 0px !important;
}

/* The last expand child can be targeted to create a placeholder while the "..." button renders */
#designContentHeaderPageFunctionsShown>a.expand:last-child {
	display: block !important;
	width: 46px;
	overflow: hidden;
	color: rgba(0,0,0,0);
}

#designContentHeaderPageFunctionsShown>a.expand:last-child * {
	display: none;
}

.activityAction {
	opacity: 0;
	transition: opacity 0.2s;
}


/* .tableRow might be a <tr> or a <div> */

.tableRow:hover .activityAction {
	opacity: 1 !important;
}

td a.toolbarButton,
div.toolbarGroup a {
	background: var(--admin-color-surface-alt);
	vertical-align: top;
}

a.toolbarButton:hover,
div.toolbarGroup a:hover,
#designContentHeaderPageFunctions a:hover {
	text-decoration: none;
	background: var(--admin-color-surface);
}

a.toolbarButton.selected,
div.toolbarGroup a.selected {
	background: #428bca;
	color: #fff;
	border-color: #428bca;
}

div.toolbar a.toolbarButton {
	padding: 10px;
	height: 40px;
	box-sizing: border-box;
	overflow: hidden;
}

div.toolbar a.toolbarButtonSubmit {
	background: var(--admin-color-interactive) !important;
	color: var(--admin-color-text-inverse) !important;
	text-shadow: none;
	width: 9rem;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
	box-sizing: border-box;
	border-radius: 0px;
}

div.toolbar a.toolbarButtonSubmit svg {
	color: var(--admin-color-text-inverse) !important;
	background: none !important;
}

.fullWidth {
	box-sizing: border-box;
	width: 100%;
}


/* =========================================================================
   Left navigation
   #designLeftNav* — fixed left rail with logo, links, footer icons.
   ========================================================================= */

#designLeftNav {
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: 9rem;
	position: fixed;
	transition: transform 0.14s ease-out;
}


/* Separate position fixed background, so we can position absolute #designLeftNav on short screens */
#designLeftNavBG {
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: 9rem;
	position: fixed;
	background-color: var(--left-nav-bg-color);
	background-repeat: no-repeat;
	transition: transform 0.14s ease-out;
}

#designLeftNavOffset {
	padding-bottom: 30px;
}

#designLeftNavLogo {
	outline: none;
	height: 4rem;
	display: flex;
	align-items: center;
}

#designLeftNavLogo svg {
	width: 120px;
	height: 34px;
	display: block;
	color: var(--admin-color-nav-text-active);
	transition: color 250ms ease-in 0s;
	margin: 0px auto;
}

#designLeftNavLogo:hover svg {
	color: transparent;
	transition: color 1s ease-in 0.75s;
}


#designLeftNavLinks a {
	outline: none;
	display: block;
	text-decoration: none;
	color: var(--admin-color-nav-text);
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-drag: none;
}

#designLeftNavLinks:hover a {
	transition: color 0.1s ease-out;
}

#designLeftNavLinks a.category {
	color: var(--admin-color-nav-text-active);
	padding: 0.5rem 0 0.5rem 1rem;
	font-size: 16px;
	letter-spacing: .5px;
	margin-left: -1px;
	line-height: 1.285;
}

#designLeftNavLinks a.category span {
	display: inline-block;
	padding-left: 1px;
	padding-right: 1px;
	padding-bottom: 4px;
	border-bottom: 2px solid #c0c0c0;
}

#designLeftNavLinks a.link {
	font-size: 14px;
	line-height: 16px;
	padding: 0.4rem 0 0.4rem 1rem;
}

#designLeftNavLinks a.link.active,
#designLeftNavLinks a.category.active {
	color: var(--admin-color-nav-text-active);
	background-color: rgba(255, 255, 255, 0.15);
	background-image: linear-gradient(to right, var(--admin-color-nav-active-from) 0%, var(--admin-color-nav-active-to) 100%);
}

#designLeftNavLinks a.link:hover {
	color: var(--admin-color-nav-text-active);
}

#designLeftNavLinks a.link:last-child {
	margin-bottom: 1rem;
}

#designLeftNavFooter {
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	padding-top: 6px;
	padding-bottom: 6px;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

#designLeftNavFooter svg {
	color: var(--admin-color-nav-text);
	transition: color 0.1s ease-out;
	fill: none;
	width: 16px;
	height: 16px;
	margin: 0px;
}

#designLeftNavFooter a:hover svg {
	color: var(--admin-color-nav-text-active);
}

#designLeftNavFooterTooltips {
	width: 100%;
	height: 0;
	position: relative;
}

.nudge_tooltip_-16 tooltipchevronwrapper {
	transform: translateX(calc(-50% - 16px));
}


/* Short height screens */

body.shortScreen #designLeftNav {
	position: absolute;
}

body.shortScreen #designLeftNavFooter {
	position: static;
}


/* =========================================================================
   Design content surface
   ========================================================================= */

#designContent {
	background: var(--admin-color-surface);
	padding: 0px 2rem 1rem 2rem;
	container: design-content / inline-size;
}


/* =========================================================================
   Table rows & row-add animations
   .tableRow chrome plus the staggered animTableRowAdded entrance.
   ========================================================================= */

.tableRow>td {
	border-bottom: 1px solid var(--admin-color-border-divider);
}

.tableRow.dataControlRowAdded>td {
	border-color: rgba(0, 0, 0, 0) !important;
}

.tableRow:hover:not(.selected)
{
	background: var(--admin-color-surface-hover);
	color: #111;
}

.tableRow.dataControlRowAdded-1>td  { animation: animTableRowAdded 0.35s 0.00s forwards ease-out; }
.tableRow.dataControlRowAdded-2>td  { animation: animTableRowAdded 0.35s 0.04s forwards ease-out; }
.tableRow.dataControlRowAdded-3>td  { animation: animTableRowAdded 0.35s 0.08s forwards ease-out; }
.tableRow.dataControlRowAdded-4>td  { animation: animTableRowAdded 0.35s 0.12s forwards ease-out; }
.tableRow.dataControlRowAdded-5>td  { animation: animTableRowAdded 0.35s 0.16s forwards ease-out; }
.tableRow.dataControlRowAdded-6>td  { animation: animTableRowAdded 0.35s 0.20s forwards ease-out; }
.tableRow.dataControlRowAdded-7>td  { animation: animTableRowAdded 0.35s 0.24s forwards ease-out; }
.tableRow.dataControlRowAdded-8>td  { animation: animTableRowAdded 0.35s 0.28s forwards ease-out; }
.tableRow.dataControlRowAdded-9>td  { animation: animTableRowAdded 0.35s 0.32s forwards ease-out; }
.tableRow.dataControlRowAdded-10>td { animation: animTableRowAdded 0.35s 0.36s forwards ease-out; }
.tableRow.dataControlRowAdded-11>td { animation: animTableRowAdded 0.35s 0.40s forwards ease-out; }
.tableRow.dataControlRowAdded-12>td { animation: animTableRowAdded 0.35s 0.44s forwards ease-out; }
.tableRow.dataControlRowAdded-13>td { animation: animTableRowAdded 0.35s 0.48s forwards ease-out; }
.tableRow.dataControlRowAdded-14>td { animation: animTableRowAdded 0.35s 0.52s forwards ease-out; }
.tableRow.dataControlRowAdded-15>td { animation: animTableRowAdded 0.35s 0.56s forwards ease-out; }
.tableRow.dataControlRowAdded-16>td { animation: animTableRowAdded 0.35s 0.60s forwards ease-out; }
.tableRow.dataControlRowAdded-17>td { animation: animTableRowAdded 0.35s 0.64s forwards ease-out; }
.tableRow.dataControlRowAdded-18>td { animation: animTableRowAdded 0.35s 0.68s forwards ease-out; }
.tableRow.dataControlRowAdded-19>td { animation: animTableRowAdded 0.35s 0.72s forwards ease-out; }
.tableRow.dataControlRowAdded-20>td { animation: animTableRowAdded 0.35s 0.76s forwards ease-out; }
.tableRow.dataControlRowAdded-21>td { animation: animTableRowAdded 0.35s 0.80s forwards ease-out; }
.tableRow.dataControlRowAdded-22>td { animation: animTableRowAdded 0.35s 0.84s forwards ease-out; }
.tableRow.dataControlRowAdded-23>td { animation: animTableRowAdded 0.35s 0.88s forwards ease-out; }
.tableRow.dataControlRowAdded-24>td { animation: animTableRowAdded 0.35s 0.92s forwards ease-out; }
.tableRow.dataControlRowAdded-25>td { animation: animTableRowAdded 0.35s 0.96s forwards ease-out; }
.tableRow.dataControlRowAdded-26>td { animation: animTableRowAdded 0.35s 1.00s forwards ease-out; }
.tableRow.dataControlRowAdded-27>td { animation: animTableRowAdded 0.35s 1.04s forwards ease-out; }
.tableRow.dataControlRowAdded-28>td { animation: animTableRowAdded 0.35s 1.08s forwards ease-out; }
.tableRow.dataControlRowAdded-29>td { animation: animTableRowAdded 0.35s 1.12s forwards ease-out; }
.tableRow.dataControlRowAdded-30>td { animation: animTableRowAdded 0.35s 1.16s forwards ease-out; }
.tableRow.dataControlRowAdded-31>td { animation: animTableRowAdded 0.35s 1.20s forwards ease-out; }
.tableRow.dataControlRowAdded-32>td { animation: animTableRowAdded 0.35s 1.24s forwards ease-out; }
.tableRow.dataControlRowAdded-33>td { animation: animTableRowAdded 0.35s 1.28s forwards ease-out; }
.tableRow.dataControlRowAdded-34>td { animation: animTableRowAdded 0.35s 1.32s forwards ease-out; }
.tableRow.dataControlRowAdded-35>td { animation: animTableRowAdded 0.35s 1.36s forwards ease-out; }

@keyframes animTableRowAdded {
	0% {
		opacity: 0;
		border-bottom: 1px solid rgba(240, 240, 240, 0);
	}
	100% {
		opacity: 1;
		border-bottom: 1px solid var(--admin-color-border-divider);
	}
}

/* =========================================================================
   Table filter statistics
   ========================================================================= */

.tableFilterStatistics {
	padding: 10px 8px 0px 8px;
	float: right;
}

span:focus-visible, label:focus-visible {
	outline: 1px solid rgba(0, 0, 50, 0.2);
	outline-offset: 2px;
}

a.toolbarButton img,
div.toolbarGroup a img,
#designContentHeaderPageFunctions a img {
	width: 18px;
	height: 14px;
	vertical-align: text-top;
}

div.toolbarGroup {
	vertical-align: middle;
	display: inline-block;
}

div.toolbarGroup a,
#designContentHeaderPageFunctions a {
	border-radius: 0px;
	border-right: 0px;
	white-space: nowrap;
}

/* =========================================================================
   Statistic panels
   .statisticPanel — kpi tiles with optional header-cell selection state.
   ========================================================================= */

.statisticPanel {
	box-sizing: border-box;
	padding: 10px !important;
	border-radius: 2px;
	border: 1px solid transparent;
	background-color: var(--admin-color-surface-alt);
}

.statisticPanel:hover {
	text-decoration: none;
}

.statisticPanel.headerCell,
.statisticPanel.headerCellNoHover {
	display: block;
	float: left;
	margin-top: 8px;
	margin-right: 10px;
	margin-bottom: 8px;
	text-align: center;
	min-width: 100px;
	font-size: 11pt;
}

.statisticPanel.headerCell.selected {
	padding-bottom: 7px !important;
	border-bottom: 4px solid #c0c0c0;
}

.statisticPanel .cellCount {
	font-size: var(--admin-font-display);
}

.statisticPanel .cellTitle {
	text-transform: uppercase;
	color: #000;
	font-size: 8.5pt;
}

@container design-content (max-width: 690px) {
	.statisticPanel.headerCell,
	.statisticPanel.headerCellNoHover {
		min-width: 72px;
		margin-top: 6px;
		margin-right: 6px;
		margin-bottom: 6px;
		padding: 6px !important;
	}

	.statisticPanel.headerCell.selected {
		padding-bottom: 3px !important;
	}

	.statisticPanel .cellCount {
		font-size: var(--admin-font-display);
	}
}

/* =========================================================================
   Misc admin chrome
   Message containers, drag affordances, panel base + modifiers.
   ========================================================================= */

div.messagesContainer {
	background: #fffcd7;
	padding: 10px;
	margin: 1px;
}

img.draggable,
span.draggable,
div.draggable {
	-khtml-user-drag: element;
	-webkit-user-drag: element;
	-webkit-user-select: none;
	user-drag: element;
}

.dragHideShim {
	width: 1px !important;
	height: 1px !important;
	border: 0px !important;
}

/* =========================================================================
   Panels
   .panel base + modifiers (.rounded/.elevated/.bordered/.flush/.clipped),
   feature-theme wrappers, .warningPanel/.panelInfo/.panelCentered.
   ========================================================================= */

.panel {
	padding: 1rem;
	background-color: var(--admin-color-surface-alt);
}

/* Panel modifiers — opt-in chrome variants. Compose with .panel like .panel.rounded */
.panel.rounded   { border-radius: var(--admin-radius-md); }
.panel.elevated  { box-shadow: var(--admin-shadow-panel); }
.panel.bordered  {
	border: 1px solid var(--admin-color-border-subtle);
	/* Preserves panel shape in Windows High Contrast Mode (which strips
	   backgrounds but keeps outlines). Invisible in normal viewing. */
	outline: 1px solid transparent;
	outline-offset: -1px;
}
.panel.flush     { padding: 0; }
.panel.clipped   { overflow: hidden; }

/* .panel.sectioned — multi-region card (header / body / footer) where each
   direct child is its own section with consistent padding and a divider
   from the previous section. Replaces the inline-styled "flush + clipped +
   display: flex + per-section padding" recipe.
   Override --admin-panel-section-padding for tighter / looser sections. */
.panel.sectioned
{
	--admin-panel-section-padding: var(--admin-space-4);
	padding: 0;
	overflow: hidden;
}
.panel.sectioned > *
{
	margin: 0;
	padding: var(--admin-panel-section-padding);
}
.panel.sectioned > * + *
{
	border-top: 1px solid var(--admin-color-border-subtle);
}

/* Feature theme scoping — set --feature-color on a wrapper element so any descendant
   that uses var(--feature-color) (border, icon color, accent, etc.) picks up the right hue. */
.featureWebsite   { --feature-color: var(--admin-color-feature-website); }
.featureCustomers { --feature-color: var(--admin-color-feature-customers); }
.featureMarketing { --feature-color: var(--admin-color-feature-marketing); }
.featureCommerce  { --feature-color: var(--admin-color-feature-commerce); }
.featureSettings  { --feature-color: var(--admin-color-feature-settings); }

/* Link-as-card reset — undo default <a> styling so any clickable element can wear .panel.*/
:where(a.panel) {
	display: block;
}
a.panel {
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease-out;
}
/* Clickable cards lift on hover. A <templates:card href="…"> renders a div with
   an onclick handler (not an <a>), so cover both forms — the affordance stays
   consistent however the card is built. */
.panel[onclick] {
	transition: transform 0.2s ease-out;
}
a.panel:hover,
.panel[onclick]:hover {
	color: inherit;
	transform: translateY(-5px);
}

.warningPanel {
	margin-right: -1rem;
	margin-left: -1rem;
	margin-top: -1rem;
}

.warningPanel .panel
{
	padding: 1rem;
	margin-bottom: 1rem;
	border-left: 2px solid var(--admin-color-status-bad);
}

.panel h1,
.panel h3,
.panel h4,
.panel h5 {
	padding-top: 0px;
	margin-top: 0px;
}

.panel .formRow {
	background: transparent;
}

.panel h1:last-child,
.panel h2:last-child,
.panel p:last-child,
.panel ul:last-child,
.panel ol:last-child {
	margin-bottom: 0;
}

.panelWarning {
	border-left: 2px solid var(--admin-color-feature-marketing);
}

.panelInfo {
	border-left: 2px solid var(--admin-color-feature-website-soft);
}

.panelCentered {
	margin: 0px auto;
	width: 60%;
	padding: 2rem;
}

dialogbox .panelCentered {
	width: 100%;
	box-sizing: border-box;
	padding: 1rem;
}

div.formRow {
	background: var(--admin-color-surface-alt);
}

div.label {
	float: left;
	width: 200px;
}

div.gettingStarted {
	margin-left: 56px;
	margin-top: 70px;
}

a.contentSectionLink {
	margin-left: 25px;
	display: inline-block;
}

/* Thread listener */
.threadListenerContainer {
	max-width: 700px;
	margin: 100px auto 0px auto;
	text-align: center;
}

dialogbox oncord-threadlistener {
	min-height: 300px;
}

dialogbox .threadListenerContainer {
	margin: 0px;
	max-width: 100%;
}

.threadListenerBody {
	margin-top: 2em;
	padding: 2em;
	background: var(--admin-color-surface-alt);
}

.threadListenerFooter {
	max-width: 700px;
	margin: 40px auto 0px auto;
	text-align: center;
}


/* Hack to get firefox to render sub-pixel positioned svgs crisp */
svg {
	-moz-transform: translate3d(0, 0, 0);
}


/* Make whole SVG respond to pointer events for tooltips */
svg path {
	pointer-events: none;
}


/* Fullscreen styles */

body.bodyFullScreen {
	padding: 0;
}

body.bodyFullScreen #designContent {
	padding: 0;
}

/* Full-screen pages (page/design/email editors) hide the header chrome but keep
   the AI assistant button, positioned to sit in line with the editor's
   toolbar row (the email editor pushes it below its subject bar in page CSS).
   Anchored to #designContent (container-type makes it the containing block).
   z-index sits above the editor UI yet below dialog boxes (which start at 100). */
body.bodyFullScreen #designPageHeader {
	position: absolute;
	top: 3px;
	right: 1rem;
	left: auto;
	z-index: 20;
	margin: 0;
	padding: 0;
	background: transparent;
	pointer-events: none;

	@media only screen and (max-width: 750px) {
		top: 0;
	}
}

body.bodyFullScreen #designPageHeader > :not(#aiAgentButton) {
	display: none;
}

body.bodyFullScreen #designPageHeader #aiAgentButton {
	margin: 0;
	pointer-events: auto;
}

body.bodyFullScreen #designLeftNav,
body.bodyFullScreen #designLeftNavBG {
	transform: translateX(-9rem);
	-webkit-transform: translateX(-9rem);
	max-height: 100%;
	overflow: hidden;
}

h2.bad {
	color: var(--admin-color-status-bad);
}


/* =========================================================================
   Onboarding
   .panel.onboardingPanel — three-column intro panel for new users.
   ========================================================================= */

.panel.onboardingPanel {
	font-size: 1.1em;
	margin-bottom: 1rem;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0 1rem;
}

.panel.onboardingPanel .onboardingIcon {
	width: 32px;
	height: 32px;
}

.panel.onboardingPanel .submitLink {
	white-space: nowrap;
}

/* =========================================================================
   Admin entity tiles
   Compact renderAdmin-style labels with optional overlaid icon actions.
   ========================================================================= */

.adminEntityTile {
	align-items: center;
	display: inline-flex;
	gap: var(--admin-space-2);
	max-width: 100%;
	min-width: 0;
	vertical-align: middle;
}

.adminEntityTileIcon {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
	position: relative;
}

.adminEntityTileIconLink {
	display: inline-flex;
	line-height: 0;
}

.adminEntityTileIconLink > svg.iconTile {
	margin-right: 0 !important;
}

.adminEntityTileTitle {
	min-width: 0;
	/* break-word, not anywhere: still wraps overlong titles, but keeps the
	   column's min-content at the longest word so a wide sibling column
	   can't crush the title to one character per line */
	overflow-wrap: break-word;
}

.iconOverlay,
.adminEntityTileBadge {
	align-items: center;
	bottom: -5px;
	display: inline-flex;
	justify-content: center;
	line-height: 0;
	position: absolute;
	right: -5px;
	text-decoration: none;
	z-index: 1;
}

body .iconBig .iconOverlay svg.iconTile,
body .iconBig .adminEntityTileBadge svg.iconTile,
.iconOverlay svg.iconTile,
.adminEntityTileBadge svg.iconTile {
	border: 2px solid var(--admin-color-surface);
	border-radius: var(--admin-radius-sm);
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
	height: 18px !important;
	margin: 0 !important;
	padding: 2px;
	vertical-align: 0 !important;
	width: 18px !important;
}

body .iconBig .adminEntityTileIconLink > svg.iconTile {
	margin-right: 0 !important;
}

@media screen and (max-width: 1024px) {
	.iconOverlay,
	.adminEntityTileBadge {
		bottom: -3px;
		right: -3px;
	}

	body .iconBig .iconOverlay svg.iconTile,
	body .iconBig .adminEntityTileBadge svg.iconTile,
	.iconOverlay svg.iconTile,
	.adminEntityTileBadge svg.iconTile {
		border-width: 1px;
		height: 14px !important;
		width: 14px !important;
	}
}

/* =========================================================================
   Responsive overrides
   Breakpoint-scoped rules: small PC, tablet, mobile, screen vs print.
   ========================================================================= */

@media screen and (max-width: 1400px) {
	.hideOnMediumPC {
		display: none !important;
	}
}

@media screen and (max-width: 1200px) {
	.hideOnSmallPC {
		display: none !important;
	}
}

/* Mirror visibility helpers against the content area width, so fixed side
   panels such as the AI Agent can trigger the same hide rules without
   pretending the browser viewport is smaller. */
@container design-content (max-width: 1200px) {
	.hideOnSmallPC {
		display: none !important;
	}
}


/* For devices under an iPad */
@media screen and (max-width: 1024px)
{
	.hideOnMobile, .hideOnTablet
	{
		display: none !important;
	}

	body .iconBig svg.iconTile,
	body .iconBig img.iconTile
	{
		border-radius: 2px;
		height: 20px !important;
		margin-right: 8px !important;
		padding: 2px;
		vertical-align: -5px !important;
		width: 20px !important;
	}

	.wideOnTablet
	{
	   width: 100% !important;
	}

	body
	{
		padding: 0px;
	}

	#designLeftNav,#designLeftNavBG
	{
		display: none;
	}

	#designContent
	{
		padding: 1rem;
	}

	#designPageHeader
	{
		margin: -1rem -1rem 1rem -1rem;
	}

	#designMobileNavButton
	{
		display: flex;
		align-items: center;
		padding-left: 1rem;
		padding-right: 1rem;
		-webkit-tap-highlight-color: transparent;
		border-radius: 200px;
		transition: box-shadow 0.2s ease-out;
	}

	#designMobileNavButton:active
	{
		box-shadow: 0 0 0 1px #e0e0e0;
		background: #e0e0e0;
	}

	#designMobileNavButton svg
	{
		width: 32px;
		height: 32px;
	}

	h1#designPageTitle
	{
		text-align: right;
		padding: 0;
	}

	#designContentHeaderPageFunctionsContainer
	{
		position: relative;
		flex-grow: 1;
		align-items: flex-end;
	}

	#designContentHeaderPageFunctions
	{
		margin-top: -1px;
	}

	#designContentHeaderPageFunctionsShown
	{
		height: auto;
	}

	#designContentHeaderPageFunctionsShown>a
	{
		line-height: 4rem;
		padding: 0 1rem;
	}

	#designLeftNavMobileClose
	{
		display: block;
		width: 18px;
		height: 18px;
		padding: 5px;
		position: absolute;
		top: 18px;
		right: 20px;
		color: var(--admin-color-nav-text);
		border: 2px solid var(--admin-color-text-muted);
		border-radius: 100px;
	}

	#designLeftNavMobileClose:hover
	{
		color: var(--admin-color-nav-text-active);
		border: 2px solid #666;
	}

	#designLeftNavMobileClose:active
	{
		background: rgba(240, 240, 240, 0.1);
	}

	#designContentHeaderPageFunctionsShown a:last-child
	{
		border-right: none !important;
	}

	#designLeftNav, body.mobileNavOpen #designLeftNavBG
	{
		display: none;
	}

	#designLeftNavLogo svg
	{
		margin: 0px 16px;
	}

	#designLeftNavLinks a.link
	{
		font-size: 15px;
		line-height: 18px;
	}

	body.mobileNavOpen #designLeftNav
	{
		box-sizing: border-box;
		position: fixed;
		overflow-y: auto;
		background: var(--left-nav-bg-color);
		display: block;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		width: 100%;
		margin: 0;
		z-index: 99999;
		animation: animMobileNavOpen 0.2s ease-out forwards;
		padding: 2px 8px;
	}

	@keyframes animMobileNavOpen {
		0% { transform: translateX(-90%); }
		100% { transform: translateX(0); }
	}

	body.mobileNavOpen
	{
		overflow: hidden;
	}

	#designLeftNavFooter
	{
		position: relative;
		max-width: 240px;
		margin-left: auto;
		margin-right: auto;
	}

	#designLeftNavLinks a
	{
		text-align: left;
		padding-left: 40px;
	}

	.tableFilterStatistics
	{
		display: none;
	}

	.uiActionColumn
	{
		display: none;
	}

	/* Mobile devices need larger input or they zoom in */
	input[type=text],input[type=email],input[type=url],input[type=password],input[type=number],input[type=tel],input[type=search],input[type=date],textarea,select
	{
		font-size: 16px !important;
	}

	/* We can't position setup tooltips accurately on mobile - they get in the way */
	.tooltipTheme-setup
	{
		display: none !important;
	}

	.panel.onboardingPanel
	{
		padding: 0.5em;
	}
}

@container design-content (max-width: 1024px)
{
	.hideOnMobile, .hideOnTablet
	{
		display: none !important;
	}
}

@media screen and (max-width: 690px)
{
	.hideOnMobile
	{
		display: none !important;
	}

	.wideOnMobile
	{
		width: 100% !important;
	}

	.fullScreenOnMobile
	{
		top: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		right: 0 !important;
	}

	.exportLink
	{
		display: none;
	}

	#designPageHeader
	{
		flex-wrap: wrap;
		align-items: center;
	}

	#designMobileNavButton
	{
		order: 1;
	}

	h1#designPageTitle
	{
		order: 2;
		flex-grow: 1;
		min-width: 0;
		padding: 0;
		text-align: center;
	}

	/* Keep the AI assistant button on the header row, right of the centered
	   title; the page-functions row still wraps below it via width: 100%. */
	#aiAgentButton
	{
		order: 3;
		margin: 0 8px 0 0;
	}

	#designContentHeaderPageFunctionsContainer
	{
		order: 4;
		height: auto;
		display: flex;
		width: 100%;
	}

	#designContentHeaderPageFunctions
	{
		width: 100%;
		flex-grow: 1;
	}

	#designContentHeaderPageFunctionsShown
	{
		display: flex;
		flex-wrap: wrap;
	}

	#designContentHeaderPageFunctionsShown a:first-child
	{
		border-left: none;
	}

	#designContentHeaderPageFunctionsShown>a
	{
		flex-grow: 1;
		line-height: 2.5rem;
		padding: 0 1rem;
		text-align: center;
	}
}

@container design-content (max-width: 690px)
{
	.hideOnMobile
	{
		display: none !important;
	}
}

@media screen {
	.hideOnScreen {
		display: none !important;
	}
}

/* =========================================================================
   Analytics dashboard
   .analytics-* — shared styles for the analytics dashboard
   (date picker, metric cards, chart cards, percentage bars).
   ========================================================================= */

/* Date range picker area */
.analytics-date-range
{
	margin-bottom: 24px;
}

/* Main stats panel */
.analytics-stats-panel
{
	margin-bottom: 24px;
}

.analytics-stats-grid
{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 24px;
	align-items: stretch;
}

@media screen and (max-width: 1024px)
{
	.analytics-stats-grid
	{
		grid-template-columns: minmax(0, 1fr);
	}
}

@container design-content (max-width: 1024px)
{
	.analytics-stats-grid
	{
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Metric cards in the sidebar */
.analytics-metrics-list
{
	display: grid;
	grid-template-columns: auto auto auto;
	gap: 8px;
	max-height: 328px;
	overflow-y: auto;
	scrollbar-width: thin;

	& input[type="radio"]
	{
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	& input[type="radio"]:checked + .analytics-metric-card,
	& .analytics-metric-card:has(input[type="radio"]:checked)
	{
		border-color: var(--admin-color-feature-website);
		background: #f8fbfd;
	}
}

.analytics-metric-card
{
	background: var(--admin-color-surface);
	border-radius: var(--admin-radius-lg);
	padding: 10px 14px;
	border: 1px solid var(--admin-color-border-subtle);
	transition: all 0.2s ease;
	cursor: pointer;
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
	align-items: center;

	&:hover
	{
		border-color: var(--admin-color-feature-website);
		box-shadow: 0 2px 8px rgba(22, 159, 218, 0.15);
	}

	&.selected
	{
		border-color: var(--admin-color-feature-website);
		background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
		box-shadow: 0 2px 8px rgba(22, 159, 218, 0.2);
	}
}

.analytics-metric-label
{
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.analytics-metric-value
{
	font-size: 20px;
	font-weight: 700;
	color: var(--admin-color-text);
	margin-left: auto;
	text-align: right;
}

.analytics-metric-change
{
	font-size: 12px;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 6px;
	white-space: nowrap;

	&.good
	{
		color: var(--admin-color-status-good);
		background: var(--admin-color-status-good-bg);
	}

	&.bad
	{
		color: var(--admin-color-status-bad);
		background: var(--admin-color-status-bad-bg);
	}

	&.neutral
	{
		color: var(--admin-color-text-muted);
		background: var(--admin-color-status-neutral-bg);
	}
}

/* Chart container */
.analytics-chart-container
{
	background: var(--admin-color-surface);
	border-radius: var(--admin-radius-lg);
	border: 1px solid var(--admin-color-border-subtle);
	min-width: 0;
}

/* Chart wrapper for annotation link overlay */
.analytics-chart-wrapper
{
	position: relative;
}

/* New Annotation link overlay */
.analytics-new-annotation-link
{
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	background: var(--admin-color-surface);
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--admin-color-feature-website);
	box-shadow: 0 1px 3px var(--admin-color-overlay-faint);
	transition: all 0.2s ease;

	& .icon
	{
		width: 12px;
		height: 12px;
		vertical-align: middle;
		margin-right: 4px;
		margin-top: -2px;
	}

	&:hover
	{
		background: #f8fbfd;
		box-shadow: 0 2px 6px rgba(22, 159, 218, 0.2);
	}
}

/* Category sections */
.analytics-category
{
	margin-top: 32px;

	& h2
	{
		font-size: 18px;
		font-weight: 600;
		color: var(--admin-color-text);
		margin-bottom: 16px;
		padding-bottom: 8px;
		border-bottom: 2px solid var(--admin-color-border-subtle);
	}
}

.analytics-charts-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}

@media (max-width: 1470px)
{
	.analytics-charts-grid
	{
		gap: 12px;
	}
}

/* Individual chart cards */
.analytics-chart-card
{
	background: var(--admin-color-surface);
	border-radius: 10px;
	padding: 20px;
	border: 1px solid var(--admin-color-border-subtle);
}

.analytics-chart-header
{
	display: flex;
	align-items: center;
	margin-bottom: 16px;
	gap: 8px;
}

.analytics-chart-header .analytics-chart-title
{
	flex: 1;
}

.analytics-chart-title
{
	font-size: 14px;
	font-weight: 600;
	color: var(--admin-color-text);
}

.analytics-chart-container .analytics-chart-title
{
	display: block;
	padding: 16px 16px 0;
}

.analytics-chart-link
{
	z-index: 1;
	color: var(--admin-color-feature-website);
	transition: color 0.2s ease;

	&:hover
	{
		color: #0e7490;
	}

	& .icon
	{
		width: 14px;
		height: 14px;
		vertical-align: middle;
	}
}

/* Full width chart card */
.analytics-chart-card.full-width
{
	grid-column: 1 / -1;
}

/* Double width chart card */
.analytics-chart-card.double-width
{
	grid-column: span 2;
}

@container design-content (max-width: 690px)
{
	.analytics-chart-card.double-width
	{
		grid-column: 1 / -1;
	}
}

/* Small table styling for analytics */
table.small
{
	font-size: 12px;
	text-align: left;
	width: 100%;

	& td
	{
		padding: 6px 8px;
	}

	& tr:hover
	{
		background: #f8fafc;
	}
}

/* Percentage bar for table rows */
.analyticsPercentageBar
{
	position: relative;

	&::after
	{
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: var(--percentage);
		height: 2px;
		background: rgba(22, 159, 218, 0.25);
		pointer-events: none;
	}
}

/* =========================================================================
   Print styles
   Suppresses chrome (nav, header buttons, search, action columns) for print.
   ========================================================================= */

@media print {
	body {
		margin: 0px;
		padding: 0px;
	}
	#designLeftNavLogo {
		display: none;
	}
	#designLeftNav,
	#designLeftNavBG {
		display: none;
	}
	#designPageHeader {
		background: none;
		margin: 0px 0px 0px -2rem;
	}
	#designContent {
		padding: 0px;
	}
	#designContentHeaderPageFunctions {
		display: none;
	}
	.SearchBoxEditContainer {
		display: none;
	}
	.uiActionColumn {
		display: none;
	}
	.exportLink {
		display: none;
	}
	.dataShowMore {
		display: none;
	}
	.hideOnPrint {
		display: none !important;
	}
	/* Left nav links */
	#designLeftNav a[href="/admin/website/designs/"] {
		display: none;
	}
	#designLeftNav a[href="/admin/marketing/socialnetworking/"] {
		display: none;
	}
	@page {
		size: auto;
		margin: 15mm 15mm 5mm 15mm;
	}
	#BrowserPrintDefaults {
		display: none
	}
}

/* =========================================================================
   Admin layout & UI primitives
   Composable building blocks for admin pages. Use these instead of
   redeclaring layout / panel / status styles in _admin/entity.css.
   See AGENTS.md "Admin Page Styling" for usage examples.
   ========================================================================= */

/* --- Layout primitives ------------------------------------------------- */

/* Vertical stack — the workhorse. Override --admin-stack-gap inline for
   custom rhythm, or use the .tight / .loose modifiers for the two
   most common cases (title+subtitle pair, breathing-room sections). */
.adminStack
{
	--admin-stack-gap: var(--admin-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--admin-stack-gap);
}
.adminStack.tight { --admin-stack-gap: var(--admin-space-1); }
.adminStack.loose { --admin-stack-gap: var(--admin-space-6); }

/* Horizontal cluster with wrapping — label+input rows, icon+text, button groups */
.adminCluster
{
	--admin-cluster-gap: var(--admin-space-2);
	--admin-cluster-align: center;
	display: flex;
	flex-flow: row wrap;
	gap: var(--admin-cluster-gap);
	align-items: var(--admin-cluster-align);
}

/* Responsive auto-fill grid (the typical "card grid").
   Plain .adminGrid reflows organically via auto-fill minmax().
   The .cols-N modifiers cap column count at N and reflow earlier when
   each cell would be narrower than --admin-grid-min — set --admin-grid-min
   higher on pages with dense card content to trigger an earlier reflow.
   Container-aware via container-type: inline-size, so nested grids respond
   to their own width, not just the viewport. */
.adminGrid
{
	--admin-grid-min: 240px;
	--admin-grid-gap: var(--admin-space-4);
	container-type: inline-size;
	display: grid;
	gap: var(--admin-grid-gap);
	grid-template-columns: repeat(auto-fill, minmax(var(--admin-grid-min), 1fr));
}
/* auto-fit + min(100%, max(floor, even-share)) trick:
   - even-share is each cell's portion if N columns are shown.
   - max(floor, even-share) enforces --admin-grid-min as a content-driven
     reflow threshold: when the even share would dip below the floor,
     cells widen to the floor and auto-fit reflows to fewer columns.
   - min(100%, ...) caps the floor at container width so a single column
     never overflows when the container is narrower than --admin-grid-min. */
.adminGrid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--admin-grid-min), (100% - var(--admin-grid-gap)) / 2)), 1fr)); }
.adminGrid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--admin-grid-min), (100% - var(--admin-grid-gap) * 2) / 3)), 1fr)); }
.adminGrid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--admin-grid-min), (100% - var(--admin-grid-gap) * 3) / 4)), 1fr)); }

/* Two-column split — children sit side-by-side and wrap to stack
   when the row no longer fits. Intrinsically self-aware (flexbox wrap
   uses the split's own width, not an ancestor container's), so nested
   splits behave correctly without @container queries.
   For asymmetric balance, set `flex-grow` on individual children:
       <div class="adminSplit">
           <main style="flex-grow: 2">…</main>
           <aside>…</aside>
       </div> */
.adminSplit
{
	--admin-split-gap: var(--admin-space-4);
	--admin-split-min: 250px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--admin-split-gap);
}
.adminSplit > *
{
	flex: 1 1 var(--admin-split-min);
	min-width: 0;
}

/* Sidebar + content layout (first child = sidebar, second = content).
   Stacks when the row no longer fits. Intrinsically self-aware
   (flexbox wrap uses the layout's own width, not an ancestor's). */
.adminSidebar
{
	--admin-sidebar-width: 240px;
	--admin-sidebar-content-min: 50%;
	--admin-sidebar-gap: var(--admin-space-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--admin-sidebar-gap);
}
.adminSidebar > *:first-child
{
	flex: 0 0 var(--admin-sidebar-width);
	max-width: 100%;
}
.adminSidebar > *:last-child
{
	/* flex-grow: 999 dominates remaining space when on the same row;
	   flex-basis: 50% triggers a clean wrap when sidebar + 50% no longer fit. */
	flex: 999 1 var(--admin-sidebar-content-min);
	min-width: 0;
}
.adminSidebar.right > *:first-child { order: 2; }

/* Scroll region — keeps long content boxed */
.adminScrollable
{
	--admin-scrollable-max-height: 400px;
	max-height: var(--admin-scrollable-max-height);
	overflow-y: auto;
}

/* Centred column — caps content at a readable max-width with auto margins.
   Use for long-form admin content (descriptions, help text, prose pages).
   Add .intrinsic to centre children based on their own widths too. */
.adminCenter
{
	--admin-center-max: 60ch;
	--admin-center-gutter: var(--admin-space-4);
	box-sizing: content-box;
	max-inline-size: var(--admin-center-max);
	margin-inline: auto;
	padding-inline: var(--admin-center-gutter);
}
.adminCenter.intrinsic
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Aspect-ratio frame — crops media (img/video/svg) to a chosen ratio.
   Useful for design previews, integration logos, gallery thumbnails. */
.adminFrame
{
	--admin-frame-ratio: 16 / 9;
	aspect-ratio: var(--admin-frame-ratio);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.adminFrame > img,
.adminFrame > video,
.adminFrame > svg
{
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Centrally-positioned overlay — for modals, popovers, "click to enable"
   superimpositions. Requires a positioned ancestor (position: relative on
   parent for in-document, or use .fixed for viewport-anchored). */
.adminImposter
{
	--admin-imposter-margin: 0px;
	position: var(--admin-imposter-positioning, absolute);
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	max-inline-size: calc(100% - (var(--admin-imposter-margin) * 2));
	max-block-size:  calc(100% - (var(--admin-imposter-margin) * 2));
	overflow: auto;
}
.adminImposter.fixed { --admin-imposter-positioning: fixed; }

/* Toolbar action cluster — distinct from existing div.toolbarGroup (inline-block).
   Wraps to next line when horizontal space runs out. */
.adminActionGroup
{
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--admin-space-2);
	align-items: center;
}
.adminActionGroup.right { margin-left: auto; }


/* --- UI primitives ----------------------------------------------------- */

/* Panel header / actions slots — composable with existing .panel */
.adminPanelHeader
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--admin-space-3);
	margin-bottom: var(--admin-space-3);
}
.adminPanelHeader > :first-child
{
	min-width: 0;
	overflow-wrap: break-word;
}
.adminPanelHeader > h1,
.adminPanelHeader > h2,
.adminPanelHeader > h3 { margin: 0; }

.adminPanelActions
{
	display: flex;
	gap: var(--admin-space-2);
	margin-top: var(--admin-space-3);
}

/* Empty state — replaces per-page "nothing to show" one-offs */
.adminEmptyState
{
	padding: var(--admin-space-6) var(--admin-space-5);
	text-align: center;
	color: var(--admin-color-text-muted);
	background: var(--admin-color-surface-alt);
	border-radius: var(--admin-radius-md);
}
.adminEmptyState > h3 { margin-bottom: var(--admin-space-2); }

/* Status dot — mini indicator, complements span.good/.bad text styling */
.adminStatusDot
{
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--admin-color-status-info);
	vertical-align: middle;
	margin-right: 6px;
}
.adminStatusDot.good    { background: var(--admin-color-status-good); }
.adminStatusDot.bad     { background: var(--admin-color-status-bad); }
.adminStatusDot.warning { background: var(--admin-color-status-warning); }
.adminStatusDot.info    { background: var(--admin-color-status-info); }
.adminStatusDot.neutral { background: var(--admin-color-status-neutral); }

/* Filter chip */
.adminFilterChip
{
	display: inline-flex;
	align-items: center;
	gap: var(--admin-space-1);
	padding: 4px 10px;
	border: 1px solid var(--admin-color-border-subtle);
	border-radius: var(--admin-radius-full);
	background: var(--admin-color-surface);
	font-size: var(--admin-font-small);
	cursor: pointer;
	user-select: none;
}
.adminFilterChip.active
{
	background: var(--admin-color-interactive);
	color: var(--admin-color-text-inverse);
	border-color: var(--admin-color-interactive);
}

/* Generic non-status badge — counts, labels, light tags.
   Parallel to existing span.tagGood/.tagBad/.tagGrey (which are bound to status hues). */
.adminBadge
{
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--admin-radius-full);
	background: var(--admin-color-surface-alt);
	color: var(--admin-color-text-muted);
	font-size: var(--admin-font-small);
	font-weight: 500;
	line-height: 1.4;
}
.adminBadge.solid
{
	background: var(--admin-color-interactive);
	color: var(--admin-color-text-inverse);
}

.adminBadge.info
{
	background: var(--admin-color-status-info-bg);
	color: var(--admin-color-status-info);
}

/* Section / card title — replaces non-semantic <big><strong> in navigable
   card grids and standalone section titles. Slightly larger and bolder than
   body text, but without an h2/h3's default block margin. Apply to <a>,
   <span>, or <h3> as appropriate. */
.adminCardTitle
{
	font-size: var(--admin-font-card-title);
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
}

/* Card subtitle — muted under-title text (e.g. "Sessions and contacts,
   last 30 days" beneath an .adminCardTitle). Composes with .adminStack.tight
   for a clean title+subtitle pair without inline-styling muted text. */
.adminCardSubtitle
{
	font-size: var(--admin-font-card-subtitle);
	font-weight: normal;
	line-height: 1.4;
	color: var(--admin-color-text-muted);
}

/* Small uppercase metadata label — replaces ad-hoc uppercase + small +
   tracked patterns (statistic labels, progress labels, category markers).
   Use to name/categorize an adjacent value (e.g. "STORAGE" above "12 GB").
   Distinct from .adminBadge (pill) and .tagGood (status pill).
   Override --admin-meta-label-color (or `color` inline) for coloured eyebrows. */
.adminMetaLabel
{
	--admin-meta-label-color: var(--admin-color-text-muted);
	display: inline-block;
	font-size: var(--admin-font-meta);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--admin-meta-label-color);
	line-height: 1.4;
}

/* Display-size number — for stat values, KPI cards, hero counts.
   Tabular numerics so 1234 and 5678 align column-wise without jitter.
   Tight letter-spacing matches the visual weight of large display copy.
   Pair above an .adminMetaLabel for the standard "label + value" stack. */
.adminStatValue
{
	font-size: var(--admin-font-display);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: inherit;
	font-variant-numeric: tabular-nums;
}

/* Delta indicator — the "+18%" / "−4%" pill that sits next to a stat.
   Triangle glyph is rendered via ::before so the markup stays semantic
   ("+18% vs prev. period"). Use .up / .down / .flat to set direction;
   colour is driven by --admin-delta-color so themes can override. */
.adminDelta
{
	--admin-delta-color: var(--admin-color-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	color: var(--admin-delta-color);
	font-size: var(--admin-font-small);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}
.adminDelta::before { content: "—"; font-size: 0.75em; }
.adminDelta.up      { --admin-delta-color: var(--admin-color-status-good); }
.adminDelta.up::before   { content: "▲"; }
.adminDelta.down    { --admin-delta-color: var(--admin-color-status-bad); }
.adminDelta.down::before { content: "▼"; }
.adminDelta.flat::before { content: "—"; }

/* Avatar — round initials chip for activity feeds, contact rows, member lists.
   Default is muted grey on white; override --admin-avatar-bg / -color to
   theme per-feature (e.g. var(--admin-color-feature-customers)). Sized via
   --admin-avatar-size — the font scales proportionally so .sm / .lg work
   without overrides. */
.adminAvatar
{
	--admin-avatar-size:  36px;
	--admin-avatar-bg:    var(--admin-color-surface-alt);
	--admin-avatar-color: var(--admin-color-text-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	inline-size: var(--admin-avatar-size);
	block-size:  var(--admin-avatar-size);
	border-radius: var(--admin-radius-full);
	background: var(--admin-avatar-bg);
	color: var(--admin-avatar-color);
	font-size: calc(var(--admin-avatar-size) / 2.6);
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	user-select: none;
	overflow: hidden;
}
.adminAvatar.sm { --admin-avatar-size: 24px; }
.adminAvatar.lg { --admin-avatar-size: 48px; }
.adminAvatar > img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Media object — [leading] [content] [optional trailing] horizontal layout.
   Common shape for activity rows, list items, contact rows, mailing-list
   recipients. The middle child grows; first and last children hold their
   intrinsic size. Three children gives you avatar | body | meta-on-the-right
   for free without wiring up margin-left: auto. */
.adminMedia
{
	--admin-media-gap: var(--admin-space-3);
	display: flex;
	align-items: flex-start;
	gap: var(--admin-media-gap);
}
.adminMedia > * { flex-shrink: 0; min-width: 0; }
.adminMedia > :nth-child(2) { flex: 1 1 0; }
.adminMedia.center { align-items: center; }

/* .adminTimeline — vertical timeline with a rail and a dot per entry.
   Each direct child becomes one entry: a dot is rendered at the entry's top
   edge on the rail, and a line segment connects it to the next entry. The
   last entry's segment auto-hides so the rail terminates cleanly. Status
   classes on the entry (.good / .bad / .warning / .info) repaint the dot.
   Tokens drive geometry — override `--admin-timeline-padding` to align the
   rail with adjacent UI (e.g. an avatar column in a media object).

   IMPORTANT: token overrides MUST carry a unit. The dot is positioned via
   `calc(var(--admin-timeline-rail-x) - var(--admin-timeline-dot-size) / 2)`,
   and `calc()` rejects unitless non-zero values mixed with lengths — so
   `--admin-timeline-rail-x: 0` silently falls back to `auto`. Use `0px`. */
.adminTimeline
{
	--admin-timeline-line-color: var(--admin-color-border-subtle);
	--admin-timeline-line-width: 1px;
	--admin-timeline-dot-color:  var(--admin-color-border);
	--admin-timeline-dot-size:   8px;
	--admin-timeline-rail-x:     8px;                       /* rail's horizontal position */
	--admin-timeline-padding:    var(--admin-space-6);      /* content's left padding (clears the rail) */
	--admin-timeline-gap:        var(--admin-space-4);      /* vertical space between entries */
	--admin-timeline-dot-y:      0.45em;                    /* vertical alignment of dot to first text line */

	display: flex;
	flex-direction: column;
	gap: var(--admin-timeline-gap);
}
.adminTimeline > *
{
	position: relative;
	padding-left: var(--admin-timeline-padding);
}
/* Dot — anchored to the entry's first line of text. */
.adminTimeline > *::before
{
	content: "";
	position: absolute;
	top: var(--admin-timeline-dot-y);
	left: calc(var(--admin-timeline-rail-x) - var(--admin-timeline-dot-size) / 2);
	width: var(--admin-timeline-dot-size);
	height: var(--admin-timeline-dot-size);
	border-radius: 50%;
	background: var(--admin-timeline-dot-color);
	box-shadow: 0 0 0 3px var(--admin-color-surface);       /* halo separates dot from rail */
	z-index: 1;
}
/* Rail segment — extends from this entry's dot down past the gap to the next. */
.adminTimeline > *::after
{
	content: "";
	position: absolute;
	top: var(--admin-timeline-dot-y);
	bottom: calc(var(--admin-timeline-gap) * -1);
	left: calc(var(--admin-timeline-rail-x) - var(--admin-timeline-line-width) / 2);
	width: var(--admin-timeline-line-width);
	background: var(--admin-timeline-line-color);
}
.adminTimeline > *:last-child::after { display: none; }

/* Status dot variants — class on the entry itself. */
.adminTimeline > .good::before    { background: var(--admin-color-status-good); }
.adminTimeline > .bad::before     { background: var(--admin-color-status-bad); }
.adminTimeline > .warning::before { background: var(--admin-color-status-warning); }
.adminTimeline > .info::before    { background: var(--admin-color-status-info); }

/* Progress bar — single-line "[label] [value] /// fill ///" pattern for
   quotas, usage meters, completion indicators. Track is rendered as a
   pseudo-element gradient driven by --admin-progress-value (a percentage),
   so the markup is just two spans. Override --admin-progress-fill to colour
   per-feature, --admin-progress-track for the empty rail. */
.adminProgress
{
	/* Track defaults to --admin-color-border-subtle (#e5e7eb) so the empty
	   portion of the rail stays visible on both white surfaces and on
	   .panel backgrounds (--admin-color-surface-alt). */
	--admin-progress-track:  var(--admin-color-border-subtle);
	--admin-progress-fill:   var(--admin-color-interactive);
	--admin-progress-height: 6px;
	--admin-progress-value:  0%;
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: var(--admin-space-3);
	row-gap: var(--admin-space-1);
	align-items: baseline;
}
.adminProgress > :nth-child(2)
{
	color: var(--admin-color-text-muted);
	font-variant-numeric: tabular-nums;
	text-align: end;
}
.adminProgress::after
{
	content: "";
	grid-column: 1 / -1;
	block-size: var(--admin-progress-height);
	border-radius: var(--admin-radius-full);
	background: linear-gradient(
		to right,
		var(--admin-progress-fill) 0,
		var(--admin-progress-fill) var(--admin-progress-value),
		var(--admin-progress-track) var(--admin-progress-value),
		var(--admin-progress-track) 100%
	);
}

/* Page hero — the page-level title block (eyebrow / heading / subtitle on
   the left, action controls on the right). Distinct from .adminPanelHeader
   which sits *inside* a panel. Wraps to stack the action group below the
   title group when the row no longer fits.

   Typical structure:
     <div class="adminPageHero">
       <div class="adminStack tight">
         <span class="adminCluster"><span class="adminStatusDot good"></span> Eyebrow</span>
         <h1>Heading</h1>
         <p class="adminCardSubtitle">Subtitle</p>
       </div>
       <div class="adminActionGroup">…</div>
     </div> */
.adminPageHero
{
	--admin-page-hero-gap: var(--admin-space-4);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--admin-page-hero-gap);
	margin-bottom: var(--admin-space-6);
}
.adminPageHero > :first-child
{
	flex: 1 1 auto;
	min-width: 0;
}

/* Page-section heading — for top-level sections on documentation-style or
   prose-heavy admin pages where the global h2 is too quiet to act as a
   section boundary. Sized at scale step s2 — clearly subordinate to h1
   (s3) but distinctly larger than card/h2 (s1). Built-in top divider +
   padding so every section reads as a navigable checkpoint. Use `.flush`
   on the first section to skip the leading divider. */
.adminSectionTitle
{
	--admin-section-title-divider: var(--admin-color-border-subtle);
	font-size: var(--admin-font-section-title);
	line-height: 1.3;
	color: var(--admin-color-text);
	margin: 0;
	padding-top: var(--admin-space-6);
	border-top: 1px solid var(--admin-section-title-divider);
}
.adminSectionTitle.flush
{
	padding-top: 0;
	border-top: none;
}

/* Page lead — first-paragraph muted intro under the page-header toolbar
   (or under .adminPageHero / .adminSectionTitle). Sized at scale step s1
   — same size as .adminCardTitle, distinguished by normal weight + muted
   colour. Capped at 70ch so prose stays readable on wide admin pages
   without resorting to .adminCenter's auto-margin centring. */
.adminPageLead
{
	font-size: var(--admin-font-card-title);
	font-weight: normal;
	line-height: 1.5;
	color: var(--admin-color-text-muted);
	max-inline-size: 70ch;
	margin: 0;
}

/* Drill-in / callout link — "View Details", "View All", "Read more". The
   chevron is rendered via ::after so the markup stays semantic ("View
   Details", not "View Details >"). Slides slightly on hover for affordance.
   Use `.adminCalloutLink` on any anchor (or applicable element). */
.adminCalloutLink
{
	display: inline-flex;
	align-items: baseline;
	gap: var(--admin-space-1);
	color: var(--admin-color-link);
	font-size: var(--admin-font-small);
	text-decoration: none;
	width: fit-content;
}
.adminCalloutLink::after
{
	content: "›";
	font-size: 1.25em;
	line-height: 1;
	transition: transform 120ms ease-out;
}
.adminCalloutLink:hover
{
	color: var(--admin-color-interactive-hover);
}
.adminCalloutLink:hover::after
{
	transform: translateX(2px);
}

/* Code block — dark monospace surface for showing literal markup, embed
   codes, API examples. Plays cleanly inside .panel.sectioned (the wrapper's
   overflow: hidden trims the inner radius). */
.adminCodeBlock
{
	margin: 0;
	padding: var(--admin-space-3) var(--admin-space-4);
	background: var(--admin-color-code-bg);
	color: var(--admin-color-code-text);
	border-radius: var(--admin-radius-sm);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--admin-font-small);
	line-height: 1.55;
	overflow-x: auto;
	white-space: pre;
}

/* =========================================================================
   Custom field formatted text
   Wrapper emitted by the Formatted Text types' default field_display
   (CustomFields/_resources/field_types.php); keeps embedded images in bounds
   inside list cells and profile panels.
   ========================================================================= */
.customFieldHTML img
{
	max-width: 100%;
	height: auto;
}