/* The admin's design system: tokens, the application shell and the shared components used by
   every screen. The screen templates carry no styles of their own. */

/* ---------------------------------------------------------------- tokens */

:root {
	--canvas: #f2f4f8;
	--surface: #ffffff;
	--surface-2: #f7f8fb;
	--surface-3: #eef1f6;
	--line: #e2e6ee;
	--line-strong: #c9d0dc;
	--text: #1b2230;
	--text-2: #4d586b;
	--muted: #7a8597;
	--accent: #2a66d9;
	--accent-hover: #1f55bb;
	--accent-soft: #e8effc;
	--accent-text: #1d4fb3;
	--ring: rgba(42, 102, 217, 0.3);
	--success: #1f7a45;
	--success-soft: #e3f3e9;
	--warning: #8a5a00;
	--warning-soft: #fff4d6;
	--warning-line: #e6c979;
	--danger: #b4302e;
	--danger-soft: #fbe9e8;
	--danger-line: #e8b1af;
	--info-soft: #e9f0fb;
	--info-line: #b9cdf0;

	--font: -apple-system, "Segoe UI", "Helvetica Neue", Roboto, Ubuntu, Cantarell, Arial, sans-serif;
	--mono: Consolas, "Liberation Mono", Menlo, monospace;
	--fs-xs: 11px;
	--fs-sm: 12px;
	--fs-table: 13px;
	--fs: 14px;
	--fs-h2: 16px;
	--fs-h1: 20px;
	--fs-stat: 26px;

	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;

	--radius-sm: 4px;
	--radius: 6px;
	--radius-lg: 8px;
	--shadow-sm: 0 1px 2px rgba(27, 34, 48, 0.06);
	--shadow: 0 4px 16px rgba(27, 34, 48, 0.1);

	--header-h: 56px;
	--side-w: 224px;
	--side-rail: 64px;
	--content-max: 1280px;
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	height: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100%;
	background: var(--canvas);
	color: var(--text);
	font-family: var(--font);
	font-size: var(--fs);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

a:hover {
	text-decoration: underline;
}

h1, h2, h3 {
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text);
}

h1 {
	font-size: var(--fs-h1);
}

h2 {
	font-size: var(--fs-h2);
}

h3 {
	font-size: var(--fs);
}

p {
	margin: 0 0 var(--sp-3) 0;
}

p:last-child {
	margin-bottom: 0;
}

code, pre {
	font-family: var(--mono);
	font-size: 12.5px;
}

code {
	padding: 1px 5px;
	border-radius: var(--radius-sm);
	background: var(--surface-3);
}

pre {
	margin: 0;
	padding: var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow: auto;
}

small, .small {
	font-size: var(--fs-sm);
}

.muted {
	color: var(--muted);
}

.nowrap {
	white-space: nowrap;
}

.break {
	word-break: break-word;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- icons */

.i {
	width: 18px;
	height: 18px;
	flex: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	vertical-align: -4px;
}

.i-sm {
	width: 14px;
	height: 14px;
	vertical-align: -2px;
}

.i-lg {
	width: 24px;
	height: 24px;
}

/* ---------------------------------------------------------------- shell */

.app {
	min-height: 100vh;
	padding-top: var(--header-h);
}

.app-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	height: var(--header-h);
	padding: 0 var(--sp-5) 0 var(--sp-4);
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	width: calc(var(--side-w) - var(--sp-4));
	flex: none;
	color: var(--text);
}

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

/* The Volo wordmark (the traced letterforms of the login logo) in the admin's deep blue. */
.logo {
	display: block;
	height: 26px;
	width: auto;
	overflow: visible;
	color: #1e3f75;
}

.logo-lg {
	height: 56px;
}

.brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.02em;
}

.brand-name {
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.01em;
}

.brand-env {
	margin-left: 2px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--warning-soft);
	border: 1px solid var(--warning-line);
	color: var(--warning);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.site-switch {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	min-width: 0;
}

.site-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: none;
}

.site-switch-logo {
	height: 24px;
	max-width: 110px;
	object-fit: contain;
}

.site-switch select,
.site-switch .site-name {
	appearance: none;
	-webkit-appearance: none;
	height: 34px;
	padding: 0 30px 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234d586b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
	color: var(--text);
	font: inherit;
	font-weight: 600;
	max-width: 280px;
	cursor: pointer;
}

.site-switch .site-name {
	background-image: none;
	padding-right: 12px;
	cursor: default;
	display: inline-flex;
	align-items: center;
}

.site-switch select:hover {
	border-color: var(--line-strong);
}

.header-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--text-2);
	font-size: var(--fs-sm);
	font-weight: 500;
	white-space: nowrap;
}

.header-link:hover {
	color: var(--accent-text);
	text-decoration: none;
}

.header-right {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin-left: auto;
}

.header-account {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text-2);
	font-size: var(--fs-sm);
	white-space: nowrap;
}

.header-account strong {
	color: var(--text);
	font-weight: 600;
}

.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--surface-3);
	color: var(--text-2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.header-sep {
	width: 1px;
	height: 22px;
	background: var(--line);
}

.app-body {
	display: flex;
	min-height: calc(100vh - var(--header-h));
}

.app-side {
	position: sticky;
	top: var(--header-h);
	align-self: flex-start;
	flex: none;
	width: var(--side-w);
	height: calc(100vh - var(--header-h));
	overflow-y: auto;
	padding: var(--sp-4) var(--sp-3);
	background: var(--surface);
	border-right: 1px solid var(--line);
}

.side-group {
	margin: 0 0 var(--sp-5) 0;
	padding: 0;
	list-style: none;
}

.side-label {
	margin: 0 0 var(--sp-2) 12px;
	color: var(--muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.side-link {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 36px;
	padding: 0 12px;
	border-radius: var(--radius);
	color: var(--text-2);
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
}

.side-link:hover {
	background: var(--surface-2);
	color: var(--text);
	text-decoration: none;
}

.side-link.active {
	background: var(--accent-soft);
	color: var(--accent-text);
	font-weight: 600;
}

.side-link .i {
	color: var(--muted);
}

.side-link.active .i {
	color: var(--accent);
}

.side-link.unavailable {
	opacity: 0.5;
}

.side-link .count {
	margin-left: auto;
	font-size: var(--fs-xs);
	color: var(--muted);
}

.app-main {
	flex: 1;
	min-width: 0;
	padding: var(--sp-6) var(--sp-8) var(--sp-8);
}

/* The content column is centered in the main area on wide screens. Components such as .tabs and
   .notice set their own margins with the shorthand, which would pull them back to the left edge,
   so the centering margins use the doubled class to win over a single-class rule. */
.app-main > * {
	max-width: var(--content-max);
}

.app-main.app-main > * {
	margin-left: auto;
	margin-right: auto;
}

/* Narrow laptops: the sidebar becomes an icon rail with the label as a tooltip. */
@media (max-width: 1100px) {
	.app-side {
		width: var(--side-rail);
		padding: var(--sp-4) var(--sp-2);
	}
	.brand {
		width: auto;
	}
	.side-label,
	.side-link span,
	.side-link .count {
		display: none;
	}
	.side-link {
		justify-content: center;
		padding: 0;
	}
	.app-main {
		padding: var(--sp-5) var(--sp-5) var(--sp-6);
	}
	.header-account span.role,
	.brand-name {
		display: none;
	}
}

/* ---------------------------------------------------------------- page header */

.page-head {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
}

.page-head-text {
	min-width: 0;
	flex: 1;
}

.page-head h1 {
	margin: 0;
}

.page-head .crumbs {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 2px;
	color: var(--muted);
	font-size: var(--fs-sm);
}

.page-head .crumbs a {
	color: var(--muted);
}

.page-head .crumbs a:hover {
	color: var(--accent-text);
}

.page-head .lead {
	margin: 4px 0 0 0;
	color: var(--text-2);
	font-size: 13.5px;
}

.page-head-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex: none;
	padding-top: 2px;
}

/* ---------------------------------------------------------------- panels */

.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	margin-bottom: var(--sp-5);
}

.panel-head {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex-wrap: wrap;
	padding: var(--sp-3) var(--sp-5);
	border-bottom: 1px solid var(--line);
}

.panel-head h2 {
	margin-right: auto;
}

.panel-body {
	padding: var(--sp-5);
}

.panel-body + .panel-body {
	border-top: 1px solid var(--line);
}

.panel-foot {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-5);
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--fs-sm);
}

.panel-foot p {
	margin: 0;
}

.panel-foot .actions {
	margin-left: auto;
	display: flex;
	gap: var(--sp-2);
}

.panel.narrow {
	max-width: 640px;
}

.panel.medium {
	max-width: 860px;
}

.panel h2 + p,
.panel h3 + p {
	margin-top: var(--sp-2);
}

.section + .section {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--line);
}

.section > h2 {
	margin-bottom: var(--sp-3);
}

.grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-5);
	align-items: start;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-4);
}

.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-4);
}

@media (max-width: 1100px) {
	.grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-2 {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------- tabs and filters */

.tabs {
	display: flex;
	gap: var(--sp-1);
	margin: 0;
	padding: 0 var(--sp-5);
	list-style: none;
	border-bottom: 1px solid var(--line);
}

.tabs a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 10px 10px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--text-2);
	font-size: 13.5px;
	font-weight: 500;
}

.tabs a:hover {
	color: var(--text);
	text-decoration: none;
}

.tabs a.active {
	color: var(--accent-text);
	border-bottom-color: var(--accent);
	font-weight: 600;
}

.tabs a .count {
	padding: 0 6px;
	border-radius: 999px;
	background: var(--surface-3);
	color: var(--text-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 18px;
}

.tabs a.active .count {
	background: var(--accent-soft);
	color: var(--accent-text);
}

.filter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
}

.filter .grow {
	flex: 1;
	min-width: 180px;
}

.filter label {
	color: var(--muted);
	font-size: var(--fs-sm);
	font-weight: 500;
}

/* ---------------------------------------------------------------- tables */

.table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-table);
}

.table th,
.table td {
	padding: 10px var(--sp-4);
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.table th {
	padding-top: 10px;
	padding-bottom: 8px;
	background: var(--surface-2);
	color: var(--muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

/* Sortable column headers: the arrow shows on the active column (down for descending) and on
   hover elsewhere. */
.table th a.sort,
.panel-head a.sort {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: inherit;
	text-decoration: none;
}

.table th a.sort .i,
.panel-head a.sort .i {
	width: 12px;
	height: 12px;
	opacity: 0;
	transition: transform 0.12s, opacity 0.12s;
}

.table th a.sort:hover,
.panel-head a.sort:hover {
	color: var(--text);
}

.table th a.sort:hover .i {
	opacity: 0.5;
}

.table th a.sort.active,
.panel-head a.sort.active {
	color: var(--accent-text);
}

.table th a.sort.active .i,
.panel-head a.sort.active .i {
	opacity: 1;
}

.table th a.sort.asc .i,
.panel-head a.sort.asc .i {
	transform: rotate(180deg);
}

.panel-head a.sort {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--text-2);
}

.panel-head .sort-group {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	margin-left: auto;
	color: var(--muted);
	font-size: var(--fs-sm);
}

.table th:first-child,
.table td:first-child {
	padding-left: var(--sp-5);
}

.table th:last-child,
.table td:last-child {
	padding-right: var(--sp-5);
}

.table tbody tr:hover {
	background: #f8fafd;
}

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

.table td.primary,
.table td.primary a {
	color: var(--text);
	font-weight: 600;
}

.table td.num,
.table th.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.table td.time {
	white-space: nowrap;
	color: var(--text-2);
	font-variant-numeric: tabular-nums;
}

.table td.actions {
	text-align: right;
	white-space: nowrap;
}

.table td.actions form {
	display: inline;
}

.table td .sub {
	display: block;
	color: var(--muted);
	font-size: var(--fs-sm);
}

.table td.wrap {
	word-break: break-word;
}

.table td.empty {
	padding: var(--sp-8) var(--sp-5);
	color: var(--muted);
	text-align: center;
}

.table.compact th,
.table.compact td {
	padding-top: 6px;
	padding-bottom: 6px;
}

.table tr.live td {
	font-weight: 600;
}

/* Definition tables (file details, account facts). */
.facts {
	border-collapse: collapse;
	font-size: var(--fs-table);
}

.facts th,
.facts td {
	padding: 5px 16px 5px 0;
	text-align: left;
	vertical-align: top;
}

.facts th {
	color: var(--muted);
	font-weight: 500;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- forms */

label {
	cursor: pointer;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	height: 36px;
	padding: 0 11px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: var(--fs);
	transition: border-color 0.12s, box-shadow 0.12s;
}

select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 30px;
	background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234d586b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
	cursor: pointer;
}

textarea {
	height: auto;
	min-height: 96px;
	padding: 8px 11px;
	line-height: 1.5;
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--ring);
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
	border-color: var(--danger);
}

input::placeholder,
textarea::placeholder {
	color: var(--muted);
}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
}

/* Checkboxes and radios are drawn here, not by the browser: a box or a ring, the accent when
   checked, a check mark or a dot drawn with the pseudo-element. */
input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 18px;
	height: 18px;
	margin: 0 7px 0 0;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--surface);
	vertical-align: -4px;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
	flex: none;
}

input[type="radio"] {
	border-radius: 50%;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
	border-color: var(--accent);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	border-color: var(--accent);
	background: var(--accent);
}

input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

input[type="radio"]:checked {
	background: var(--surface);
}

input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--ring);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
	opacity: 0.5;
	cursor: default;
}

/* The file field: our own button in front of the chosen name. */
input[type="file"] {
	display: block;
	width: 100%;
	padding: 4px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text-2);
	font: inherit;
	font-size: var(--fs-sm);
	cursor: pointer;
}

input[type="file"]::file-selector-button {
	margin-right: 10px;
	padding: 0 12px;
	height: 28px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--text);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
}

input[type="file"]:hover::file-selector-button {
	background: var(--surface-3);
}

input[type="file"]:focus-visible {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--ring);
}

/* Date fields: the browser's picker icon is replaced by our calendar icon; the field itself is
   the text field above. */
input[type="date"] {
	width: auto;
	min-width: 11em;
	padding-right: 32px;
	background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234d586b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 10px center;
}

input[type="date"]::-webkit-calendar-picker-indicator {
	position: absolute;
	right: 0;
	width: 34px;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

input[type="date"] {
	position: relative;
}

input[type="date"]::-webkit-inner-spin-button {
	display: none;
}

/* Search fields: no browser clear button, no browser decoration, our own magnifier. */
input[type="search"] {
	appearance: none;
	-webkit-appearance: none;
	padding-left: 34px;
	background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a8597' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 11px center;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none;
	display: none;
}

/* Number fields: no browser spinners. */
input[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* The browser's own autofill tint gives way to the field's white. */
input:-webkit-autofill,
input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--text);
	transition: background-color 5000s;
}

input.w-xs {
	width: 6em;
}

input.w-sm {
	width: 12em;
}

input.w-md,
select.w-md {
	width: 20em;
}

input.w-auto,
select.w-auto {
	width: auto;
}

.field {
	margin-bottom: var(--sp-4);
}

.field > label,
.field > .label {
	display: block;
	margin-bottom: 5px;
	color: var(--text-2);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.field .help {
	margin: 5px 0 0 0;
	color: var(--muted);
	font-size: var(--fs-sm);
}

.field .check {
	display: flex;
	align-items: flex-start;
	gap: 2px;
	font-size: var(--fs);
	color: var(--text);
	font-weight: 400;
}

.field .check input {
	margin-top: 3px;
}

.field-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
}

.field-row > .field {
	flex: 1;
	min-width: 160px;
}

.field-inline {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.field-inline input,
.field-inline select {
	width: auto;
}

.form-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-5);
}

.form-actions .right {
	margin-left: auto;
}

.pathPrefix {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 13px;
}

/* ---------------------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn:hover {
	background: var(--surface-2);
	border-color: var(--line-strong);
	text-decoration: none;
	color: var(--text);
}

.btn:active {
	background: var(--surface-3);
}

.btn .i {
	width: 16px;
	height: 16px;
}

.btn-primary {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.btn-primary:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: #fff;
}

.btn-danger {
	color: var(--danger);
	border-color: var(--danger-line);
}

.btn-danger:hover {
	background: var(--danger);
	border-color: var(--danger);
	color: #fff;
}

.btn-ghost {
	border-color: transparent;
	background: transparent;
	color: var(--text-2);
}

.btn-ghost:hover {
	background: var(--surface-3);
	border-color: transparent;
}

.btn-sm {
	height: 28px;
	padding: 0 10px;
	font-size: var(--fs-sm);
}

.btn-link {
	display: inline;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent-text);
	font: inherit;
	cursor: pointer;
}

.btn-link:hover {
	text-decoration: underline;
	background: none;
}

.btn[disabled],
.btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: default;
}

form.inline {
	display: inline;
	margin: 0;
}

/* ---------------------------------------------------------------- badges */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 9px;
	border-radius: 999px;
	background: var(--surface-3);
	color: var(--text-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.7;
}

.badge-ok {
	background: var(--success-soft);
	color: var(--success);
}

.badge-draft {
	background: var(--warning-soft);
	color: var(--warning);
}

.badge-off {
	background: var(--surface-3);
	color: var(--muted);
}

.badge-danger {
	background: var(--danger-soft);
	color: var(--danger);
}

.badge-info {
	background: var(--accent-soft);
	color: var(--accent-text);
}

.badge.plain::before {
	display: none;
}

/* ---------------------------------------------------------------- notices */

.notice,
.voloWarning {
	display: flex;
	gap: 10px;
	margin: 0 0 var(--sp-4) 0;
	padding: 10px 14px;
	border: 1px solid var(--info-line);
	border-left-width: 3px;
	border-radius: var(--radius);
	background: var(--info-soft);
	color: var(--text);
	font-size: 13.5px;
}

.notice .i {
	margin-top: 1px;
	color: var(--accent);
}

.notice p {
	margin: 0;
}

.notice ul {
	margin: 0;
	padding-left: 18px;
}

.notice-ok {
	border-color: #a9dbbb;
	background: var(--success-soft);
}

.notice-ok .i {
	color: var(--success);
}

.notice-warning,
.voloWarning {
	border-color: var(--warning-line);
	background: var(--warning-soft);
}

.notice-warning .i {
	color: var(--warning);
}

.notice-danger {
	border-color: var(--danger-line);
	background: var(--danger-soft);
}

.notice-danger .i {
	color: var(--danger);
}

ul.voloWarning {
	flex-direction: column;
	gap: 2px;
	padding-left: 30px;
}

.notice .notice-link {
	margin-left: auto;
	white-space: nowrap;
}

/* The one-time notice after a redirect ("Your changes were saved."), above the page. */
.flash {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--sp-5) 0;
	padding: 10px 14px;
	border: 1px solid #a9dbbb;
	border-radius: var(--radius);
	background: var(--success-soft);
	color: var(--success);
	font-size: 13.5px;
	font-weight: 500;
}

.flash .i {
	color: var(--success);
}

/* ---------------------------------------------------------------- empty states */

.empty {
	padding: var(--sp-8) var(--sp-5);
	text-align: center;
	color: var(--muted);
}

.empty .i {
	width: 32px;
	height: 32px;
	margin-bottom: var(--sp-2);
	color: var(--line-strong);
	stroke-width: 1.25;
}

.empty h3 {
	margin-bottom: 4px;
	color: var(--text-2);
}

.empty .btn {
	margin-top: var(--sp-4);
}

/* ---------------------------------------------------------------- confirmation pages */

.confirm {
	max-width: 560px;
	margin: 48px auto 0;
}

.confirm .panel-body {
	padding: var(--sp-6);
}

.confirm h1 {
	margin-bottom: var(--sp-3);
}

.confirm p {
	color: var(--text-2);
}

.confirm .form-actions {
	justify-content: flex-end;
}

/* ---------------------------------------------------------------- dashboard */

.stat {
	display: block;
	padding: var(--sp-4) var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	color: var(--text);
}

a.stat:hover {
	border-color: var(--line-strong);
	text-decoration: none;
}

.stat .label {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.stat .value {
	display: block;
	margin-top: 6px;
	font-size: var(--fs-stat);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.stat .detail {
	display: block;
	margin-top: 4px;
	color: var(--text-2);
	font-size: var(--fs-sm);
}

.quick {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-2);
}

.quick a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
	font-size: 13.5px;
	font-weight: 500;
}

.quick a:hover {
	background: var(--surface-2);
	border-color: var(--line-strong);
	text-decoration: none;
}

.quick a .i {
	color: var(--accent);
}

.modules {
	margin: 0;
	padding: 0;
	list-style: none;
}

.modules li + li {
	border-top: 1px solid var(--line);
}

.modules a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	color: var(--text);
}

.modules a:hover {
	text-decoration: none;
}

.modules a:hover .name {
	color: var(--accent-text);
}

.modules .i {
	color: var(--muted);
}

.modules .name {
	font-weight: 600;
}

.modules .desc {
	display: block;
	color: var(--muted);
	font-size: var(--fs-sm);
	font-weight: 400;
}

.modules .unavailable {
	opacity: 0.55;
}

.recent {
	margin: 0;
	padding: 0;
	list-style: none;
}

.recent li {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-table);
}

.recent li:last-child {
	border-bottom: 0;
}

.recent .title {
	min-width: 0;
	flex: 1;
}

.recent .title a {
	display: block;
	color: var(--text);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.recent .title .sub {
	display: block;
	color: var(--muted);
	font-size: var(--fs-sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.recent .when {
	color: var(--muted);
	font-size: var(--fs-sm);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- site list (chooser, My Account) */

.site-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-list li + li {
	border-top: 1px solid var(--line);
}

.site-list a {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 12px 0;
	color: var(--text);
	font-weight: 600;
}

.site-list a:hover {
	text-decoration: none;
	color: var(--accent-text);
}

.site-list .meta {
	margin-left: auto;
	color: var(--muted);
	font-size: var(--fs-sm);
	font-weight: 400;
}

/* ---------------------------------------------------------------- files */

.files-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--sp-3);
	padding: var(--sp-5);
}

.files-grid a {
	display: block;
	padding: var(--sp-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text-2);
	font-size: var(--fs-sm);
	text-align: center;
	word-break: break-word;
}

.files-grid a:hover {
	border-color: var(--accent);
	text-decoration: none;
	color: var(--text);
}

.files-grid img {
	display: block;
	width: 100%;
	height: 96px;
	margin-bottom: 6px;
	object-fit: contain;
	background: var(--surface-2);
	border-radius: var(--radius-sm);
}

.files-preview {
	float: right;
	max-width: 320px;
	margin: 0 0 var(--sp-4) var(--sp-5);
}

.files-preview img {
	max-width: 100%;
	max-height: 260px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
}

.drop {
	padding: var(--sp-8) var(--sp-4);
	border: 2px dashed var(--line-strong);
	border-radius: var(--radius-lg);
	background: var(--surface-2);
	text-align: center;
	color: var(--text-2);
}

.drop.over {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.drop input[type="file"] {
	margin-top: var(--sp-2);
}

.queue {
	margin: var(--sp-3) 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-table);
}

.queue li {
	padding: 4px 0;
	border-bottom: 1px solid var(--line);
}

.queue li.ok {
	color: var(--success);
}

.queue li.failed {
	color: var(--danger);
}

/* The upload progress bar, drawn in our colors. */
progress {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	height: 8px;
	border: 0;
	border-radius: 999px;
	background: var(--surface-3);
	overflow: hidden;
}

progress::-webkit-progress-bar {
	background: var(--surface-3);
	border-radius: 999px;
}

progress::-webkit-progress-value {
	background: var(--accent);
	border-radius: 999px;
	transition: width 0.2s;
}

progress::-moz-progress-bar {
	background: var(--accent);
	border-radius: 999px;
}

/* ---------------------------------------------------------------- page editor */

.pagesEditor .app-main > * {
	max-width: none;
}

.editor-bar {
	position: sticky;
	top: var(--header-h);
	z-index: 90;
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-8)) var(--sp-5);
	padding: 10px var(--sp-8);
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	max-width: none;
}

.editor-bar .field {
	margin: 0;
}

.editor-bar .title-field {
	flex: 1 1 200px;
	max-width: 420px;
}

.editor-bar .path-field {
	flex: 1 1 200px;
	max-width: 420px;
}

.editor-bar .path-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
}

.editor-bar .status-field {
	flex: none;
	width: 150px;
}

.editor-bar .actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-left: auto;
}

.editor-bar input,
.editor-bar select {
	height: 34px;
}

.block {
	margin-bottom: var(--sp-5);
}

.block > label {
	display: block;
	margin-bottom: 6px;
	color: var(--text-2);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.block.extra > label {
	color: var(--warning);
}

.block textarea.textarea {
	display: none;
}

.block textarea.codeView,
textarea.codeView {
	display: block;
	width: 100%;
	min-height: 520px;
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.5;
	white-space: pre-wrap;
}

@media (max-width: 1100px) {
	.editor-bar {
		margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-5);
		padding: 10px var(--sp-5);
	}
}

/* TinyMCE 6 inside the new frame: the oxide skin with the admin's lines, radius and accent.
   Its toolbar sticks under the editor bar while a long block scrolls (toolbar_sticky). */
.pagesEditor .tox-tinymce {
	border: 1px solid var(--line-strong) !important;
	border-radius: var(--radius) !important;
	font-family: var(--font) !important;
}

.pagesEditor .tox .tox-toolbar,
.pagesEditor .tox .tox-toolbar__primary,
.pagesEditor .tox .tox-toolbar__overflow {
	background: var(--surface-2) !important;
	border-bottom: 1px solid var(--line) !important;
}

.pagesEditor .tox .tox-tbtn {
	border-radius: var(--radius-sm) !important;
	color: var(--text-2) !important;
}

.pagesEditor .tox .tox-tbtn svg {
	fill: var(--text-2) !important;
}

.pagesEditor .tox .tox-tbtn:hover {
	background: var(--surface-3) !important;
}

.pagesEditor .tox .tox-tbtn--enabled,
.pagesEditor .tox .tox-tbtn--enabled:hover {
	background: var(--accent-soft) !important;
	color: var(--accent-text) !important;
}

.pagesEditor .tox .tox-tbtn--enabled svg {
	fill: var(--accent) !important;
}

.pagesEditor .tox .tox-tbtn:focus-visible {
	box-shadow: 0 0 0 3px var(--ring) !important;
}

.pagesEditor .tox .tox-statusbar {
	border-top: 1px solid var(--line) !important;
	color: var(--muted) !important;
	font-size: var(--fs-xs) !important;
}

.pagesEditor .tox .tox-toolbar__group:not(:last-of-type) {
	border-right: 1px solid var(--line) !important;
}

.pagesEditor .tox-tinymce--toolbar-sticky-on .tox-editor-header {
	box-shadow: var(--shadow-sm) !important;
}

/* Dialogs (link, image, media, code, table) in the admin's type and radius. */
.tox .tox-dialog {
	border-radius: var(--radius-lg) !important;
	font-family: var(--font) !important;
}

.tox .tox-button {
	border-radius: var(--radius) !important;
	font-family: var(--font) !important;
	font-weight: 600 !important;
}

.tox .tox-button:not(.tox-button--secondary):not(.tox-button--naked) {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
}

.tox .tox-textfield,
.tox .tox-listbox,
.tox .tox-textarea,
.tox .tox-selectfield select {
	border-radius: var(--radius) !important;
	font-family: var(--font) !important;
}

.tox .tox-textfield:focus,
.tox .tox-listbox:focus,
.tox .tox-textarea:focus {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px var(--ring) !important;
}

.tox .tox-collection__item--active {
	background: var(--surface-2) !important;
}

.tox .tox-collection__item--enabled {
	background: var(--accent-soft) !important;
	color: var(--accent-text) !important;
}

/* Field differences and word diffs (compare, conflict). */
.diff-fields {
	border-collapse: collapse;
	margin-bottom: var(--sp-4);
	font-size: var(--fs-table);
}

.diff-fields th,
.diff-fields td {
	padding: 6px 12px;
	border: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.diff-fields th {
	background: var(--surface-2);
	color: var(--muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.diff-block {
	margin-bottom: var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.diff-block h3 {
	margin: 0;
	padding: 8px 12px;
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-table);
}

.diff-block h3 .muted {
	font-weight: 400;
}

.diff-block pre {
	max-height: 600px;
	border: 0;
	border-radius: 0;
	background: #fff;
}

ins.diffIns {
	background: #d4f3dc;
	text-decoration: none;
}

del.diffDel {
	background: #f9d8d6;
}

/* The sandboxed preview frame. */
.preview-frame {
	width: 100%;
	height: calc(100vh - var(--header-h) - 120px);
	min-height: 400px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
}

/* The editor's preview modal: the same frame, most of the window. */
.preview-dialog {
	width: min(1180px, 96vw);
	height: min(92vh, 1400px);
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg, 12px);
	background: var(--surface, #fff);
	box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
	display: none;
	flex-direction: column;
	overflow: hidden;
}
.preview-dialog[open] {
	display: flex;
}
.preview-dialog::backdrop {
	background: rgba(15, 23, 42, 0.45);
}
.preview-dialog-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px 10px 18px;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}
.preview-dialog-head .btn-icon {
	margin-left: auto;
}
.preview-dialog .preview-frame {
	flex: 1;
	height: auto;
	min-height: 0;
	border: 0;
	border-radius: 0;
}

/* ---------------------------------------------------------------- sign-in and other pages outside the shell */

.solo {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--sp-6);
}

.solo .panel {
	width: 100%;
	max-width: 420px;
	margin: 0;
}

.solo .panel-body {
	padding: var(--sp-8);
}

.solo .brand {
	width: auto;
	justify-content: center;
	margin-bottom: var(--sp-6);
}

.solo .brand-mark {
	width: 40px;
	height: 40px;
	font-size: 20px;
	border-radius: 10px;
}

.solo .brand-name {
	font-size: 20px;
}

.solo h1 {
	margin-bottom: var(--sp-5);
	text-align: center;
}

.solo .btn-primary.wide {
	width: 100%;
	height: 38px;
}

/* The sign-in heading in the deep blue of the page's background. */
.login-page h1 {
	color: #1e3f75;
}

.solo .foot {
	margin-top: var(--sp-5);
	color: var(--muted);
	font-size: var(--fs-sm);
	text-align: center;
}

.solo.wide .panel {
	max-width: 640px;
}

/* The sign-in page: the blues of the old login background (light at the top, deep below), the
   thread animation on a canvas behind the card, the original Volo logo above it. */
body.login-page {
	background:
		radial-gradient(ellipse 60% 45% at 50% -5%, rgba(214, 231, 255, 0.95), rgba(120, 170, 240, 0.5) 45%, rgba(60, 110, 200, 0) 75%),
		linear-gradient(180deg, #4a7fd0 0%, #3566b4 45%, #2b5494 100%);
	background-attachment: fixed;
}

.login-glow {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* One layer per thread bundle, drawn at half resolution and scaled up; the blur (set per layer
   by the script) and the screen blending run on the GPU. */
.login-glow canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: screen;
}

.solo.login {
	position: relative;
	z-index: 1;
}

.login-logo {
	display: block;
	width: 240px;
	height: auto;
	margin: 0 auto 80px;
	filter: drop-shadow(0 2px 6px rgba(20, 50, 110, 0.35));
}

/* Messages on the sign-in page carry no colored strip or tint; the icon alone says what it is. */
.login-page .notice {
	border: 1px solid var(--line);
	background: var(--surface-2);
	color: var(--text);
}

.solo.login .panel {
	box-shadow: 0 12px 40px rgba(20, 45, 100, 0.35);
	border-color: rgba(255, 255, 255, 0.6);
}

/* ---------------------------------------------------------------- the editor's popup browsers */

.browser {
	min-height: 100vh;
	background: var(--surface);
}

.browser-bar {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 10px var(--sp-4);
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.browser-bar form {
	display: flex;
	gap: var(--sp-2);
	margin: 0;
	flex: 1;
}

.browser-bar label {
	color: var(--muted);
	font-size: var(--fs-sm);
	white-space: nowrap;
}

.browser-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--sp-2);
	padding: var(--sp-4);
}

.browser-images button {
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	cursor: pointer;
}

.browser-images button:hover,
.browser-images button:focus-visible {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.browser-images img {
	display: block;
	width: 100%;
	height: 90px;
	object-fit: contain;
}

.browser-list {
	padding: var(--sp-2) var(--sp-4) var(--sp-4);
}

.browser-list button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: none;
	color: var(--text);
	font: inherit;
	font-size: var(--fs-table);
	text-align: left;
	cursor: pointer;
}

.browser-list button:hover,
.browser-list button:focus-visible {
	background: var(--accent-soft);
}

.browser-list button span {
	margin-left: auto;
	color: var(--muted);
	font-size: var(--fs-sm);
	white-space: nowrap;
}

.browser .filesCount {
	padding: 0 var(--sp-4) var(--sp-4);
	color: var(--muted);
	font-size: var(--fs-sm);
}

/* The full-size image preview of the files module (a document of its own). */
body.image-preview {
	background: transparent;
}

.image-preview-layer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 30px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

/* ---------------------------------------------------------------- helpers */

.row {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-wrap: wrap;
}

.right {
	margin-left: auto;
}

.mt-0 {
	margin-top: 0;
}

.mb-0 {
	margin-bottom: 0;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* Picked files of a form (news: headline image, attachments; volo.js data-pick). */
.picked { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.picked-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line, #d9dee5); }
.actions-inline { display: flex; gap: 8px; margin: 8px 0 0; }
.attachments { margin: 0; padding-left: 20px; }
.attachments li { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.attachments .attachment-name { flex: 0 1 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachments input[type="text"] { flex: 1 1 auto; }
.grid-2 .span-2 { grid-column: 1 / -1; }

/* Check lists of a form (events: the linked galleries). */
.check-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; padding: 4px 0; }

/* Editors with a sidebar (the blog): the content block on the left, up to 960px (the editor's own
   width), and a sticky sidebar with the title, address, buttons and options on the right. Below
   1360px of viewport the sidebar comes first, above the content, at full width. */
.editor-columns { display: grid; grid-template-columns: minmax(0, 960px) minmax(300px, 440px); gap: var(--sp-5); align-items: start; justify-content: center; max-width: 1424px; margin: 0 auto; }
.editor-columns > .block { grid-column: 1; grid-row: 1; min-width: 0; margin-bottom: 0; }
.editor-columns > .editor-side { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.pagesEditor .pageMessages { max-width: 1424px; margin-left: auto; margin-right: auto; }
.editor-columns > .editor-side .panel { margin-bottom: var(--sp-4); }
.editor-columns > .editor-side .field:last-child { margin-bottom: 0; }
.editor-side .side-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.editor-side .path-wrap { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.editor-side .path-wrap .pathInput { flex: 1 1 120px; min-width: 0; }
@media (max-width: 1360px) {
	.editor-columns { grid-template-columns: minmax(0, 1fr); }
	.editor-columns > .editor-side { grid-column: 1; grid-row: 1; position: static; }
	.editor-columns > .block { grid-row: 2; }
}

/* Drag-and-drop ordering of picked rows (volo.js, [data-sortable]). */
.drag-handle { cursor: grab; color: var(--muted); user-select: none; padding: 0 2px; font-size: 16px; line-height: 1; }
.drag-handle:active { cursor: grabbing; }
[data-sortable] > li.dragging { opacity: 0.5; }

/* ---------------------------------------------------------------- analytics */

/* The analytics screens (/<site>/analytics/, /admin/traffic/). Magnitude is one blue ramp, light to
   dark, with a pale gray for "none"; the devices use the first three slots of a fixed categorical
   order plus a gray "Other"; a change is an arrow, a sign and a word, never color alone. */
.a-ranges { margin-bottom: var(--sp-4); }
.a-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
@media (max-width: 1400px) { .a-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.a-card { position: relative; padding-bottom: 40px; }
.a-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-sm); }
.a-card .value { font-size: 24px; }
.a-change { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; color: var(--text-2); font-size: var(--fs-sm); }
.a-change b { font-weight: 600; }
.a-change.up b, .a-change.up .i { color: var(--success); }
.a-change.down b, .a-change.down .i { color: var(--danger); }
.a-spark { position: absolute; left: var(--sp-5); bottom: 12px; width: calc(100% - 2 * var(--sp-5)); height: 22px; }
.a-spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

.a-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 1100px) { .a-main { grid-template-columns: 1fr; } }
.a-key { display: flex; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-sm); }
.a-key li { display: flex; align-items: center; gap: 6px; }
.a-key i { display: inline-block; width: 18px; border-top: 2px solid var(--accent); }
.a-key i.before { border-top: 2px dashed var(--muted); }

.a-trend-wrap { position: relative; }
.a-trend { display: block; width: 100%; height: auto; overflow: visible; }
.a-trend .grid { stroke: var(--line); stroke-width: 1; }
.a-trend .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.a-trend .area { fill: var(--accent); opacity: 0.08; }
.a-trend .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.a-trend .prev { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.a-trend .hits rect { fill: transparent; }
.a-trend .cross { stroke: var(--line-strong); stroke-width: 1; visibility: hidden; }
.a-trend .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; visibility: hidden; }
.a-trend.hover .cross, .a-trend.hover .dot { visibility: visible; }
.a-tip { position: fixed; z-index: 110; max-width: 280px; padding: 6px 10px; border-radius: var(--radius); background: var(--text); color: #fff; font-size: var(--fs-sm); line-height: 1.4; pointer-events: none; box-shadow: var(--shadow); }
.a-tip[hidden] { display: none; }

.a-now .panel-head { gap: var(--sp-2); }
.a-now .panel-head h2 { margin-right: 0; }
.a-now.stale .a-pulse { animation: none; background: var(--muted); }
.a-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: a-pulse 2s infinite; }
@keyframes a-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 122, 69, 0.45); } 70% { box-shadow: 0 0 0 8px rgba(31, 122, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 122, 69, 0); } }
.a-now-value { margin: 0; font-size: 40px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.a-now h3 { margin: var(--sp-4) 0 var(--sp-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.a-now-list { margin: 0; padding: 0; list-style: none; font-size: var(--fs-table); }
.a-now-list li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 4px 0; border-bottom: 1px solid var(--line); }
.a-now-list li:last-child { border-bottom: 0; }
.a-now-list li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-now-list li span:last-child { font-variant-numeric: tabular-nums; color: var(--text-2); }
.a-now .help { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-sm); }

.a-geo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 1100px) { .a-geo { grid-template-columns: 1fr; } }
.a-geo-map { position: relative; }
.a-map { display: block; width: 100%; height: auto; }
.a-map path { stroke: var(--surface); stroke-width: 0.6; stroke-linejoin: round; }
.a-map path:hover { stroke: var(--text); stroke-width: 1; }
.a-map .m0, .a-legend .m0 { fill: #e6eaf0; background: #e6eaf0; }
.a-map .m1, .a-legend .m1 { fill: #cde2fb; background: #cde2fb; }
.a-map .m2, .a-legend .m2 { fill: #9ec5f4; background: #9ec5f4; }
.a-map .m3, .a-legend .m3 { fill: #5598e7; background: #5598e7; }
.a-map .m4, .a-legend .m4 { fill: #256abf; background: #256abf; }
.a-map .m5, .a-legend .m5 { fill: #104281; background: #104281; }
.a-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: var(--sp-3); color: var(--text-2); font-size: var(--fs-sm); }
.a-legend span { margin: 0 4px; }
.a-legend i { display: inline-block; width: 28px; height: 10px; border-radius: 2px; }
.a-legend i.gap { margin-left: var(--sp-4); width: 14px; }

/* Positioned, so what sits inside (the visually hidden labels) stays inside the scroll box. */
.a-scroll { position: relative; max-height: 380px; overflow: auto; }
.a-scroll.tall { max-height: 560px; }
.a-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.a-geo .a-scroll .table td:first-child { position: relative; isolation: isolate; }
.a-cell-bar { position: absolute; left: 0; top: 3px; bottom: 3px; z-index: -1; border-radius: 0 3px 3px 0; background: var(--accent-soft); }

.a-bars { margin: 0; padding: 0; list-style: none; }
.a-bars li { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) 64px; align-items: center; gap: var(--sp-3); padding: 5px 0; font-size: var(--fs-table); }
.a-bars .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-bars .bar { height: 12px; }
.a-bars .bar span { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--accent); }
.a-bars li:hover .bar span { background: var(--accent-hover); }
.a-bars .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }

.a-split { display: flex; gap: 2px; height: 16px; margin-bottom: var(--sp-4); }
.a-split span { min-width: 3px; }
.a-split span:first-child { border-radius: 4px 0 0 4px; }
.a-split span:last-child { border-radius: 0 4px 4px 0; }
.a-split span:only-child { border-radius: 4px; }
.a-split .c1, .a-split-legend .c1 { background: #2a78d6; }
.a-split .c2, .a-split-legend .c2 { background: #eb6834; }
.a-split .c3, .a-split-legend .c3 { background: #1baf7a; }
.a-split .c0, .a-split-legend .c0 { background: #a3acba; }
.a-split-legend { margin: 0; padding: 0; list-style: none; font-size: var(--fs-table); }
.a-split-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) 56px 72px; align-items: center; gap: var(--sp-3); padding: 5px 0; border-bottom: 1px solid var(--line); }
.a-split-legend li:last-child { border-bottom: 0; }
.a-split-legend i { width: 12px; height: 12px; border-radius: 3px; }
.a-split-legend .num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.a-split-legend .sub { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.a-foot { margin: 0 0 var(--sp-6); color: var(--muted); font-size: var(--fs-sm); }
.a-hscroll { overflow-x: auto; }
.a-overview .a-spark { position: static; display: block; width: 88px; height: 24px; }
.a-overview td.spark { width: 104px; }
.a-overview td.primary { min-width: 160px; }
.a-overview .a-change { margin-top: 2px; white-space: nowrap; }
.a-days { margin-top: var(--sp-3); font-size: var(--fs-sm); }
.a-days summary { cursor: pointer; color: var(--accent-text); }
.a-days .a-scroll { max-height: 280px; margin-top: var(--sp-2); }

/* System health (/admin/health/). The charts are the analytics trend (.a-trend) with up to three
   series in the categorical slots of the device split (c1 to c3), each named at its line end. */
.h-refresh { margin: 4px 0 0; font-size: var(--fs-sm); }
.h-attention { margin-bottom: var(--sp-4); }
.h-attention .notice { margin-bottom: var(--sp-2); }
.h-cards .a-card { padding-bottom: 40px; }
@media (max-width: 700px) { .h-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.h-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-5); }
@media (max-width: 1100px) { .h-charts { grid-template-columns: 1fr; } }
.h-charts .panel { margin-bottom: 0; }
.h-charts .panel-head { flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.h-note { margin: 0 0 var(--sp-2); color: var(--muted); font-size: var(--fs-sm); }
.h-none { margin: var(--sp-6) 0; text-align: center; }
.a-trend .s1, .a-trend .s2, .a-trend .s3 { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.a-trend .s1 { stroke: #2a78d6; }
.a-trend .s2 { stroke: #eb6834; }
.a-trend .s3 { stroke: #1baf7a; }
.a-key i.s1 { border-top-color: #2a78d6; }
.a-key i.s2 { border-top-color: #eb6834; }
.a-key i.s3 { border-top-color: #1baf7a; }
.a-trend .ref { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.a-trend .ref-label, .a-trend .end { fill: var(--text-2); font-size: 11px; }
.h-grid { margin-bottom: var(--sp-5); }
.h-grid .panel { margin-bottom: 0; }
@media (max-width: 1100px) { .h-grid { grid-template-columns: 1fr; } }
.h-programs td:first-child { position: relative; isolation: isolate; }
.h-alerts td:last-child { overflow-wrap: anywhere; }
.h-alerts td.time { width: 1%; white-space: nowrap; }