/* =========================================================================
   WordPress Manager — feuille de style
   =========================================================================

   Parti pris : une console d'exploitation, pas un site vitrine.

   - Aucune carte flottante, aucune ombre portée : l'interface est faite de
     bandes réglées au filet, comme une fiche d'atelier ou une façade
     d'instrument. Les données denses se comparent mieux alignées sur une
     grille qu'isolées dans des rectangles arrondis.
   - Tout ce qui est une valeur machine — version, compte, date, slug — est
     composé en chasse fixe tabulaire. Tout ce qui est une phrase adressée à
     l'humain est en linéale. La séparation est stricte et c'est elle qui donne
     son caractère à la page.
   - Le violet ne signale qu'une chose : « vous pouvez agir ici ». Les quatre
     couleurs de diagnostic (jade, ambre, vermillon, acier) ne servent jamais à
     un bouton, et l'accent ne sert jamais à un état.
   ========================================================================= */

:root {
	color-scheme: light dark;

	/* — Surfaces et encres — */
	--ground: #edeef2;
	--surface: #ffffff;
	--surface-sunken: #f6f7f9;
	--ink: #171826;
	--ink-muted: #575a70;
	--ink-faint: #8b8fa6;
	--rule: #dcdee7;
	--rule-strong: #c3c6d4;

	/* — Action — */
	--accent: #5b4bd6;
	--accent-hover: #4a3bc4;
	--accent-wash: #ecebfb;
	--accent-ink: #ffffff;

	/* — Diagnostic — */
	--ok: #0d8f80;
	--ok-wash: #dff3f0;
	--warn: #b06c05;
	--warn-wash: #fbeed6;
	--danger: #c5322d;
	--danger-wash: #fbe4e3;
	--info: #35699f;
	--info-wash: #e3edf8;
	--neutral: #6b7085;
	--neutral-wash: #e9eaf0;

	/* — Typographie — */
	--font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

	/* — Métriques — */
	--rail-width: 232px;
	--radius: 6px;
	--radius-sm: 3px;
	--tap: 34px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--ground: #0f1120;
		--surface: #171a2b;
		--surface-sunken: #12142270;
		--ink: #e8e9f2;
		--ink-muted: #a0a4bd;
		--ink-faint: #6f7490;
		--rule: #272b42;
		--rule-strong: #363b57;

		--accent: #8b7bff;
		--accent-hover: #9c8fff;
		--accent-wash: #241f4d;
		--accent-ink: #0f1120;

		--ok: #2bd4bd;
		--ok-wash: #10322f;
		--warn: #f5a524;
		--warn-wash: #3a2a0c;
		--danger: #ff6b62;
		--danger-wash: #3d1a19;
		--info: #6ba5e8;
		--info-wash: #16283f;
		--neutral: #8a90ab;
		--neutral-wash: #21243a;
	}
}

:root[data-theme='dark'] {
	--ground: #0f1120;
	--surface: #171a2b;
	--surface-sunken: #12142270;
	--ink: #e8e9f2;
	--ink-muted: #a0a4bd;
	--ink-faint: #6f7490;
	--rule: #272b42;
	--rule-strong: #363b57;

	--accent: #8b7bff;
	--accent-hover: #9c8fff;
	--accent-wash: #241f4d;
	--accent-ink: #0f1120;

	--ok: #2bd4bd;
	--ok-wash: #10322f;
	--warn: #f5a524;
	--warn-wash: #3a2a0c;
	--danger: #ff6b62;
	--danger-wash: #3d1a19;
	--info: #6ba5e8;
	--info-wash: #16283f;
	--neutral: #8a90ab;
	--neutral-wash: #21243a;
}

/* =========================================================================
   Réinitialisation
   ========================================================================= */

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

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

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol,
dl {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

img,
svg {
	max-width: 100%;
	display: block;
}

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

/* =========================================================================
   Primitives typographiques
   ========================================================================= */

/* Toute valeur produite par une machine. `tabular-nums` fait que les colonnes
   de versions et de compteurs s'alignent verticalement au pixel près. */
.mono {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.92em;
	letter-spacing: -0.01em;
}

/* Étiquette de plan technique : petite, capitale, très espacée. */
.legend {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.title {
	font-size: 21px;
	font-weight: 640;
	letter-spacing: -0.022em;
	line-height: 1.2;
}

.subtitle {
	font-size: 15px;
	font-weight: 620;
	letter-spacing: -0.014em;
}

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

.faint {
	color: var(--ink-faint);
}

.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* =========================================================================
   Charpente
   ========================================================================= */

.shell {
	display: grid;
	grid-template-columns: var(--rail-width) minmax(0, 1fr);
	min-height: 100vh;
}

.rail {
	background: var(--surface);
	border-right: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}

.rail__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 18px 16px;
	border-bottom: 1px solid var(--rule);
}

.rail__mark {
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: var(--accent-ink);
	display: grid;
	place-items: center;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
}

.rail__name {
	font-weight: 640;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.rail__nav {
	padding: 12px 10px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1;
}

.rail__section {
	padding: 16px 8px 6px;
}

.rail__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: var(--radius-sm);
	color: var(--ink-muted);
	font-weight: 520;
}

.rail__link:hover {
	background: var(--surface-sunken);
	color: var(--ink);
}

.rail__link[aria-current='page'] {
	background: var(--accent-wash);
	color: var(--accent);
	font-weight: 600;
}

.rail__link svg {
	width: 16px;
	height: 16px;
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
}

.rail__count {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--ink-faint);
}

.rail__foot {
	border-top: 1px solid var(--rule);
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.rail__user {
	min-width: 0;
	flex: 1;
	font-size: 12px;
}

.canvas {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--ground);
	border-bottom: 1px solid var(--rule);
	padding: 14px 28px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.topbar__heading {
	min-width: 0;
	flex: 1;
}

.topbar__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.content {
	padding: 24px 28px 64px;
	max-width: 1440px;
	width: 100%;
}

/* =========================================================================
   Bandes réglées — l'unité de composition de toute l'interface
   ========================================================================= */

.band {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	overflow: hidden;
}

.band + .band {
	margin-top: 18px;
}

.band__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--rule);
	flex-wrap: wrap;
}

.band__head .legend {
	margin-right: auto;
}

.band__body {
	padding: 16px;
}

.band__body--flush {
	padding: 0;
}

.band__foot {
	padding: 10px 16px;
	border-top: 1px solid var(--rule);
	background: var(--surface-sunken);
	font-size: 12px;
}

.split {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.stack {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* =========================================================================
   Jauge d'état du parc — la barre segmentée en tête de tableau de bord
   ========================================================================= */

.gauge {
	display: flex;
	flex-wrap: wrap;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	overflow: hidden;
}

.gauge__cell {
	flex: 1 1 150px;
	padding: 14px 18px;
	border-right: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.gauge__cell:last-child {
	border-right: 0;
}

.gauge__value {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
}

.gauge__value--ok {
	color: var(--ok);
}

.gauge__value--warn {
	color: var(--warn);
}

.gauge__value--danger {
	color: var(--danger);
}

.gauge__note {
	font-size: 12px;
	color: var(--ink-muted);
}

/* =========================================================================
   Registre de mises à jour — l'élément signature
   -------------------------------------------------------------------------
   Une case par mise à jour en attente, colorée par gravité. Lire « combien de
   travail m'attend sur ce site » devient une comparaison de longueurs, pas une
   lecture de nombres.
   ========================================================================= */

.ledger {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: wrap;
}

.ledger__tick {
	width: 7px;
	height: 15px;
	border-radius: 1px;
	background: var(--neutral);
	flex: none;
}

.ledger__tick--major {
	background: var(--danger);
}

.ledger__tick--minor {
	background: var(--warn);
}

.ledger__tick--patch {
	background: var(--info);
}

.ledger__tick--core {
	width: 11px;
	background: var(--danger);
	box-shadow: inset 0 0 0 2px var(--surface);
	outline: 1px solid var(--danger);
}

.ledger__more {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ink-faint);
	margin-left: 4px;
}

.ledger--empty {
	color: var(--ok);
	font-size: 12px;
	gap: 5px;
}

/* Barre de santé : une règle pleine largeur, pas un anneau de progression. */
.health {
	display: flex;
	align-items: center;
	gap: 8px;
}

.health__bar {
	position: relative;
	width: 54px;
	height: 4px;
	border-radius: 2px;
	background: var(--rule);
	overflow: hidden;
	flex: none;
}

.health__fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 2px;
}

.health__fill--success {
	background: var(--ok);
}

.health__fill--info {
	background: var(--info);
}

.health__fill--warning {
	background: var(--warn);
}

.health__fill--danger {
	background: var(--danger);
}

.health__score {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	color: var(--ink-muted);
}

/* =========================================================================
   Pastilles et lampes
   ========================================================================= */

.pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 7px;
	border-radius: var(--radius-sm);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.pill--neutral {
	background: var(--neutral-wash);
	color: var(--neutral);
}

.pill--success {
	background: var(--ok-wash);
	color: var(--ok);
}

.pill--warning {
	background: var(--warn-wash);
	color: var(--warn);
}

.pill--danger {
	background: var(--danger-wash);
	color: var(--danger);
}

.pill--info {
	background: var(--info-wash);
	color: var(--info);
}

.lamp {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: none;
	background: var(--neutral);
}

.lamp--success {
	background: var(--ok);
}

.lamp--warning {
	background: var(--warn);
}

.lamp--danger {
	background: var(--danger);
}

.lamp--info {
	background: var(--info);
}

.lamp--pulse {
	animation: lamp-pulse 1.6s ease-in-out infinite;
}

@keyframes lamp-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.25;
	}
}

.tag {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius-sm);
	font-size: 11px;
	color: var(--ink-muted);
}

/* =========================================================================
   Commandes
   ========================================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: var(--tap);
	padding: 0 13px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	font-size: 13px;
	font-weight: 560;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.btn:hover {
	background: var(--surface-sunken);
	border-color: var(--ink-faint);
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

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

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

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

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

.btn--quiet {
	border-color: transparent;
	background: transparent;
	color: var(--ink-muted);
}

.btn--quiet:hover {
	background: var(--surface-sunken);
	color: var(--ink);
}

.btn--small {
	min-height: 27px;
	padding: 0 9px;
	font-size: 12px;
}

.btn svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.7;
}

.btn-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* =========================================================================
   Formulaires
   ========================================================================= */

.field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 16px;
}

.field label {
	font-size: 12px;
	font-weight: 620;
	color: var(--ink);
}

.field input[type='text'],
.field input[type='url'],
.field input[type='email'],
.field input[type='password'],
.field input[type='search'],
.field select,
.field textarea,
.control {
	width: 100%;
	min-height: var(--tap);
	padding: 7px 10px;
	background: var(--surface);
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius-sm);
	color: var(--ink);
}

.field textarea {
	resize: vertical;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.55;
}

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

.field__help {
	font-size: 12px;
	color: var(--ink-muted);
}

.field__error {
	font-size: 12px;
	color: var(--danger);
	font-weight: 560;
}

/* Rendu par défaut des blocs d'aide et d'erreur de Symfony Form. */
.field .help-text {
	margin: 0;
	font-size: 12px;
	color: var(--ink-muted);
}

.field ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12px;
	font-weight: 560;
	color: var(--danger);
}

.field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: 9px;
}

.field--check input {
	margin-top: 3px;
	accent-color: var(--accent);
	width: 15px;
	height: 15px;
	flex: none;
}

.field--check label {
	font-weight: 560;
}

.field-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0 18px;
}

.filters {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.filters .control {
	width: auto;
	min-width: 150px;
}

.filters input[type='search'] {
	min-width: 220px;
}

/* =========================================================================
   Tableaux
   ========================================================================= */

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

.table th {
	text-align: left;
	padding: 9px 16px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	border-bottom: 1px solid var(--rule);
	background: var(--surface-sunken);
	white-space: nowrap;
}

.table td {
	padding: 11px 16px;
	border-bottom: 1px solid var(--rule);
	vertical-align: middle;
}

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

.table tbody tr:hover {
	background: var(--surface-sunken);
}

.table__num {
	text-align: right;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

.table__check {
	width: 34px;
	padding-right: 0;
}

.table__check input {
	accent-color: var(--accent);
	width: 15px;
	height: 15px;
}

.table-scroll {
	overflow-x: auto;
}

.site-cell {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.site-cell__name {
	font-weight: 600;
	letter-spacing: -0.01em;
}

.site-cell__name:hover {
	color: var(--accent);
}

.site-cell__host {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ink-faint);
}

/* =========================================================================
   Listes de diagnostic
   ========================================================================= */

.issues {
	display: flex;
	flex-direction: column;
}

.issue {
	display: flex;
	gap: 11px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--rule);
}

.issue:last-child {
	border-bottom: 0;
}

.issue__mark {
	width: 3px;
	border-radius: 2px;
	flex: none;
	background: var(--neutral);
}

.issue__mark--warning {
	background: var(--warn);
}

.issue__mark--danger {
	background: var(--danger);
}

.issue__mark--info {
	background: var(--info);
}

.issue__title {
	font-weight: 600;
	font-size: 13px;
}

.issue__detail {
	font-size: 12.5px;
	color: var(--ink-muted);
	margin-top: 1px;
}

/* Paires clé/valeur : la colonne de gauche fixe, la droite en chasse fixe. */
.facts {
	display: grid;
	grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
}

.facts dt {
	padding: 8px 14px 8px 0;
	border-bottom: 1px solid var(--rule);
	font-size: 12px;
	color: var(--ink-muted);
}

.facts dd {
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 12.5px;
	word-break: break-word;
}

.facts dt:last-of-type,
.facts dd:last-of-type {
	border-bottom: 0;
}

/* Répartition du parc : une barre horizontale par valeur. */
.spread {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.spread__row {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) 34px;
	align-items: center;
	gap: 9px;
	font-size: 12px;
}

.spread__label {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--ink-muted);
}

.spread__track {
	height: 6px;
	background: var(--rule);
	border-radius: 3px;
	overflow: hidden;
}

.spread__fill {
	height: 100%;
	background: var(--accent);
	border-radius: 3px;
}

.spread__count {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--ink-muted);
}

/* =========================================================================
   Journal d'opération
   ========================================================================= */

.progress {
	height: 3px;
	background: var(--rule);
	overflow: hidden;
}

.progress__fill {
	height: 100%;
	background: var(--accent);
	transition: width 400ms ease;
}

.logstream {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.65;
	max-height: 420px;
	overflow-y: auto;
	background: var(--surface-sunken);
}

.logline {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 12px;
	padding: 2px 16px;
	border-left: 2px solid transparent;
}

.logline:first-child {
	padding-top: 10px;
}

.logline:last-child {
	padding-bottom: 10px;
}

.logline__time {
	color: var(--ink-faint);
}

.logline__text {
	white-space: pre-wrap;
	word-break: break-word;
}

.logline--warning {
	border-left-color: var(--warn);
	color: var(--warn);
}

.logline--error {
	border-left-color: var(--danger);
	color: var(--danger);
}

/* =========================================================================
   Messages, états vides
   ========================================================================= */

.flashes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}

.flash {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid var(--rule);
	border-left-width: 3px;
	border-radius: var(--radius-sm);
	background: var(--surface);
	font-size: 13px;
}

.flash--success {
	border-left-color: var(--ok);
}

.flash--info {
	border-left-color: var(--info);
}

.flash--warning {
	border-left-color: var(--warn);
}

.flash--danger {
	border-left-color: var(--danger);
}

.flash__close {
	margin-left: auto;
	border: 0;
	background: none;
	color: var(--ink-faint);
	cursor: pointer;
	padding: 0 2px;
	font-size: 16px;
	line-height: 1;
}

.empty {
	padding: 44px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
}

.empty__title {
	font-size: 15px;
	font-weight: 620;
}

.empty__text {
	font-size: 13px;
	color: var(--ink-muted);
	max-width: 44ch;
}

.empty .btn {
	margin-top: 6px;
}

/* =========================================================================
   Page de connexion
   ========================================================================= */

.gate {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
	background: var(--ground);
}

.gate__panel {
	width: 100%;
	max-width: 380px;
}

.gate__brand {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 22px;
}

/* =========================================================================
   Onglets
   ========================================================================= */

.tabs {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 18px;
	overflow-x: auto;
}

.tabs a {
	padding: 9px 13px;
	font-size: 13px;
	font-weight: 560;
	color: var(--ink-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
}

.tabs a:hover {
	color: var(--ink);
}

.tabs a[aria-current='page'] {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* =========================================================================
   Barre d'action collée en bas — sélection multiple
   ========================================================================= */

.actionbar {
	position: sticky;
	bottom: 0;
	z-index: 15;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 12px 16px;
	background: var(--surface);
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	margin-top: 16px;
}

.actionbar[hidden] {
	display: none;
}

.actionbar__count {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* =========================================================================
   Adaptations
   ========================================================================= */

@media (max-width: 1080px) {
	.split {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 860px) {
	.shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.rail {
		position: static;
		height: auto;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid var(--rule);
		padding-right: 12px;
	}

	.rail__brand {
		border-bottom: 0;
		border-right: 1px solid var(--rule);
		padding: 12px 14px;
		flex: none;
	}

	.rail__name {
		display: none;
	}

	.rail__nav {
		flex-direction: row;
		padding: 8px 0;
		gap: 2px;
	}

	.rail__section,
	.rail__count {
		display: none;
	}

	.rail__foot {
		border-top: 0;
		margin-left: auto;
		flex: none;
	}

	.rail__user {
		display: none;
	}

	.content,
	.topbar {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.rail,
	.topbar__actions,
	.actionbar {
		display: none;
	}
}