/*
 * Database Export Genie — Database Backups page.
 * One accent (the admin colour scheme's theme colour), WP admin neutrals, system sans, tabular numerals.
 * Logical properties throughout so RTL needs no separate sheet.
 */

.dbmg {
	--dbmg-accent: var(--wp-admin-theme-color, #2271b1);
	--dbmg-accent-hover: var(--wp-admin-theme-color-darker-10, #135e96);
	--dbmg-accent-strong: var(--wp-admin-theme-color-darker-20, #0a4b78);
	--dbmg-accent-wash: #eef3fa;
	--dbmg-accent-tint: #dbe7f5;
	--dbmg-ink: #1d2327;
	--dbmg-ink-2: #50575e;
	--dbmg-ink-3: #646970;
	--dbmg-line: #dcdcde;
	--dbmg-line-soft: #ededee;
	--dbmg-surface: #fff;
	--dbmg-surface-2: #f6f7f7;
	--dbmg-track: #e4e5e7;
	--dbmg-danger: #b32d2e;
	--dbmg-danger-hover: #8a2424;
	--dbmg-danger-bg: #fcf0f1;
	--dbmg-danger-line: #f1c1c2;
	--dbmg-ok: #007017;
	--dbmg-ok-bg: #edfaef;
	--dbmg-ok-line: #b6dfbd;
	--dbmg-warn: #7a5200;
	--dbmg-warn-bg: #fcf9e8;
	--dbmg-warn-line: #ecd48a;
	--dbmg-radius: 12px;
	--dbmg-radius-sm: 8px;
	--dbmg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--dbmg-ease: cubic-bezier(0.22, 1, 0.36, 1);
	color: var(--dbmg-ink);
	max-width: 1320px;
}

/* Fresh (default) scheme: match the admin menu's blue; the other 8 schemes define --wp-admin-theme-color. */
body.admin-color-fresh .dbmg,
body:not([class*="admin-color-"]) .dbmg {
	--dbmg-accent: #2271b1;
	--dbmg-accent-hover: #135e96;
	--dbmg-accent-strong: #0a4b78;
}

@supports (color: color-mix(in srgb, red 50%, white)) {
	.dbmg {
		--dbmg-accent-wash: color-mix(in srgb, var(--dbmg-accent) 6%, #fff);
		--dbmg-accent-tint: color-mix(in srgb, var(--dbmg-accent) 14%, #fff);
	}
}

/* ---------- Watermark ---------- */

/* A large grey genie behind the page (D30). Decorative only: grayscale + low opacity on the admin ground,
   behind everything (isolated stacking context), never takes clicks. The white card stays opaque, so the
   genie shows in the margins and below the ledger and never sits under table text. */
.dbmg {
	position: relative;
	isolation: isolate;
	min-height: min(720px, calc(100vh - 120px));
}

.dbmg::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: 8px;
	inset-inline-end: 0;
	width: min(78%, 680px);
	aspect-ratio: 1;
	background: url("genie.svg") no-repeat center / contain;
	filter: grayscale(1);
	opacity: 0.08;
	pointer-events: none;
}

.dbmg [hidden],
.dbmg-dialog [hidden] {
	display: none !important;
}

.dbmg ::selection {
	background: var(--dbmg-accent-tint);
	color: var(--dbmg-ink);
}

.dbmg :focus-visible {
	outline: 2px solid var(--dbmg-accent);
	outline-offset: 2px;
	box-shadow: none;
}

.dbmg input[type="checkbox"]:focus-visible,
.dbmg input[type="radio"]:focus-visible {
	outline: none;
}

/* WP's custom checkbox hides the native indeterminate dash. */
.dbmg input[type="checkbox"]:indeterminate {
	border-color: var(--dbmg-accent);
}

.dbmg input[type="checkbox"]:indeterminate::before {
	content: "";
	display: block;
	float: none;
	width: 8px;
	height: 2px;
	margin: 6px auto 0;
	background: var(--dbmg-accent);
}

.dbmg .dbmg-icon {
	display: inline-block;
	flex: none;
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

.dbmg .dbmg-num,
.dbmg-cell--size,
.dbmg-cell--date,
.dbmg-progress__pct,
.dbmg-step__num {
	font-variant-numeric: tabular-nums;
}

/* ---------- Header ---------- */

.dbmg-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin: 18px 0 28px;
}

.dbmg-brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dbmg-brand__mark {
	flex: none;
	width: 48px;
	height: 48px;
	margin-block: -6px;
}

/* ---------- Tabs (only when Database Import Genie adds Import; 1.2.0) ---------- */

.dbmg-tabs {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	align-self: stretch;
	border-block-end: 1px solid var(--dbmg-line);
}

.dbmg-tabs__tab {
	position: relative;
	padding: 10px 14px;
	color: var(--dbmg-ink-2);
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--dbmg-radius-sm) var(--dbmg-radius-sm) 0 0;
}

.dbmg-tabs__tab:hover {
	color: var(--dbmg-accent-hover);
	background: var(--dbmg-accent-wash);
}

.dbmg-tabs__tab:focus-visible {
	outline: 2px solid var(--dbmg-accent);
	outline-offset: -2px;
	box-shadow: none;
}

.dbmg-tabs__tab.is-current {
	color: var(--dbmg-ink);
	font-weight: 600;
}

.dbmg-tabs__tab.is-current::after {
	content: "";
	position: absolute;
	inset-inline: 8px;
	inset-block-end: -1px;
	height: 3px;
	border-radius: var(--dbmg-radius-sm) var(--dbmg-radius-sm) 0 0;
	background: var(--dbmg-accent);
}

.dbmg .dbmg-title {
	margin: 0;
	padding: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.012em;
	color: var(--dbmg-ink);
}

/* ---------- Buttons ---------- */

.dbmg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.dbmg-btn--pill {
	height: 48px;
	padding: 0 28px;
	font-size: 16px;
}

.dbmg-btn--primary {
	background: var(--dbmg-accent);
	color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 8px -2px rgba(0, 0, 0, 0.12);
}

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

.dbmg-btn--primary:active {
	background: var(--dbmg-accent-strong);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
}

.dbmg-btn--sm {
	height: 32px;
	padding: 0 14px;
	font-size: 13px;
}

.dbmg-btn--secondary {
	background: var(--dbmg-surface);
	border-color: var(--dbmg-accent);
	color: var(--dbmg-accent-strong);
}

.dbmg-btn--secondary:hover {
	background: var(--dbmg-accent-wash);
}

.dbmg-btn--ghost {
	background: transparent;
	color: var(--dbmg-ink-2);
}

.dbmg-btn--ghost:hover {
	background: var(--dbmg-surface-2);
	color: var(--dbmg-ink);
}

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

/* Destructive, but sits in every row: outlined so it never outshouts Download. */
.dbmg-btn--quiet-danger {
	background: var(--dbmg-surface);
	border-color: var(--dbmg-danger-line);
	color: var(--dbmg-danger);
}

.dbmg-btn--quiet-danger:hover {
	background: var(--dbmg-danger-bg);
	border-color: var(--dbmg-danger);
	color: var(--dbmg-danger-hover);
}

.dbmg-btn--danger:hover {
	background: var(--dbmg-danger-hover);
}

.dbmg-btn[disabled],
.dbmg-btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	box-shadow: none;
}

.dbmg-btn[disabled]:hover {
	background: var(--dbmg-accent);
}

.dbmg-btn--danger[disabled]:hover {
	background: var(--dbmg-danger);
}

.dbmg-btn.is-busy {
	cursor: progress;
}

.dbmg-btn.is-busy::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: dbmg-spin 700ms linear infinite;
}

.dbmg-link-btn {
	padding: 0;
	border: 0;
	background: none;
	color: var(--dbmg-accent-strong);
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
}

.dbmg-link-btn:hover {
	color: var(--dbmg-ink);
}

.dbmg-link-btn.is-danger {
	color: var(--dbmg-danger);
}

.dbmg-link-btn.is-danger:hover {
	color: var(--dbmg-danger-hover);
}

.dbmg-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--dbmg-radius-sm);
	background: transparent;
	color: var(--dbmg-ink-2);
	cursor: pointer;
}

.dbmg-icon-btn:hover {
	background: var(--dbmg-surface-2);
	color: var(--dbmg-ink);
}

/* ---------- Notices ---------- */

.dbmg-notices:empty {
	display: none;
}

.dbmg .dbmg-notice {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	padding-inline-end: 38px;
	position: relative;
}

.dbmg .dbmg-notice p {
	font-size: 14px;
}

.dbmg .dbmg-notice a {
	font-weight: 600;
}

/* ---------- Card + table ---------- */

.dbmg-card {
	position: relative;
	container: dbmg-card / inline-size;
	background: var(--dbmg-surface);
	border: 1px solid var(--dbmg-line);
	border-radius: var(--dbmg-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dbmg-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}

.dbmg-table thead th {
	padding: 16px 24px;
	background: var(--dbmg-surface-2);
	border-bottom: 1px solid var(--dbmg-line);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: start;
	color: var(--dbmg-ink);
}

.dbmg-table thead th:first-child {
	border-start-start-radius: calc(var(--dbmg-radius) - 1px);
}

.dbmg-table thead th:last-child {
	border-start-end-radius: calc(var(--dbmg-radius) - 1px);
}

.dbmg-card.is-empty .dbmg-table {
	display: none;
}

/* Fixed-layout widths are content-box: each fixed column also carries its 48px of inline padding. */
.dbmg-table .dbmg-cell--date {
	width: 22%;
}

.dbmg-table .dbmg-cell--size {
	width: 88px;
}

.dbmg-table .dbmg-cell--actions {
	width: 180px;
}

.dbmg-cell {
	padding: 12px 24px;
	border-bottom: 1px solid var(--dbmg-line-soft);
	font-size: 16px;
	line-height: 1.5;
	vertical-align: top;
	color: var(--dbmg-ink);
	overflow-wrap: break-word;
}

.dbmg-cell--actions {
	padding-block: 8px;
}

.dbmg-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.dbmg-table tbody tr:last-child .dbmg-cell,
.dbmg-table tbody tr.dbmg-row:has(+ .dbmg-progress-row) .dbmg-cell,
.dbmg-table tbody tr.dbmg-row:has(+ .dbmg-details-row:not([hidden])) .dbmg-cell {
	border-bottom-color: transparent;
}

.dbmg-table tbody tr:last-child .dbmg-cell:first-child {
	border-end-start-radius: calc(var(--dbmg-radius) - 1px);
}

.dbmg-table tbody tr:last-child .dbmg-cell:last-child {
	border-end-end-radius: calc(var(--dbmg-radius) - 1px);
}

.dbmg-row.is-ready:hover .dbmg-cell {
	background: #fafafb;
}

.dbmg-row.is-new .dbmg-cell,
.dbmg-row.is-new + .dbmg-details-row .dbmg-cell {
	animation: dbmg-arrive 2400ms var(--dbmg-ease);
}

.dbmg-name {
	display: block;
	color: var(--dbmg-ink);
	font-weight: 500;
}

a.dbmg-dl {
	color: inherit;
	text-decoration: none;
}

a.dbmg-dl:hover {
	color: var(--dbmg-accent-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dbmg-meta {
	display: block;
	margin-top: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--dbmg-ink-3);
}

.dbmg-status {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.45;
}

.dbmg-status .dbmg-icon {
	width: 18px;
	height: 18px;
	margin-top: 1px;
}

.dbmg-status--error {
	color: var(--dbmg-danger);
}

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

.dbmg-row.is-cancelled .dbmg-name,
.dbmg-row.is-missing .dbmg-name {
	color: var(--dbmg-ink-2);
}

.dbmg-row-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-top: 6px;
}

.dbmg-details-row[hidden],
.dbmg-row[hidden],
.dbmg .dbmg-table tbody tr.is-paged-out {
	display: none;
}

.dbmg-details-row .dbmg-cell,
.dbmg-progress-row .dbmg-cell {
	padding-top: 0;
}

.dbmg-details {
	padding: 14px 16px;
	background: var(--dbmg-surface-2);
	border-radius: var(--dbmg-radius-sm);
	font-size: 14px;
	line-height: 1.5;
}

.dbmg-details p {
	margin: 0 0 10px;
	font-size: 14px;
}

.dbmg-details__tech {
	display: grid;
	gap: 6px;
	margin: 0;
}

.dbmg-details__tech div {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 12px;
}

.dbmg-details__tech dt {
	color: var(--dbmg-ink-3);
}

.dbmg-details__tech dd {
	margin: 0;
}

.dbmg code,
.dbmg-details code,
.dbmg-code {
	font-family: var(--dbmg-mono);
	font-variant-ligatures: none;
	font-size: 13px;
	background: none;
	padding: 0;
	overflow-wrap: anywhere;
}

.dbmg-card {
	scroll-margin-top: 48px;
}

/* ---------- Pager ---------- */

/* Pulled up 1px over the last row's rule so the card never shows a double line. */
.dbmg-pager {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: -1px;
	padding-inline: 24px 16px;
	padding-block: 10px;
	background: var(--dbmg-surface);
	border-top: 1px solid var(--dbmg-line-soft);
	border-end-start-radius: calc(var(--dbmg-radius) - 1px);
	border-end-end-radius: calc(var(--dbmg-radius) - 1px);
}

.dbmg-pager[hidden],
.dbmg-card.is-empty .dbmg-pager {
	display: none;
}

.dbmg .dbmg-pager__range {
	margin: 0;
	font-size: 14px;
	color: var(--dbmg-ink-3);
	font-variant-numeric: tabular-nums;
}

.dbmg-pager__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dbmg-pager__list li {
	margin: 0;
}

.dbmg-pager__btn {
	display: inline-grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--dbmg-ink-2);
	font: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.dbmg-pager__btn:hover {
	background: var(--dbmg-surface-2);
	color: var(--dbmg-ink);
}

.dbmg-pager__btn[aria-current="page"] {
	background: var(--dbmg-accent-tint);
	color: var(--dbmg-accent-strong);
	font-weight: 600;
}

.dbmg-pager__btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	background: transparent;
}

[dir="rtl"] .dbmg-pager__btn--step .dbmg-icon {
	transform: scaleX(-1);
}

.dbmg-pager__gap {
	min-width: 20px;
	color: var(--dbmg-ink-3);
	text-align: center;
}

/* ---------- Progress ---------- */

.dbmg-progress {
	max-width: 760px;
}

.dbmg-progress__top {
	display: flex;
	align-items: center;
	gap: 14px;
}

.dbmg-bar {
	position: relative;
	flex: 1;
	height: 8px;
	border-radius: 999px;
	background: var(--dbmg-track);
	overflow: hidden;
}

/* Fills are full-width and revealed with clip-path (paint-only, keeps the rounded leading edge). */
.dbmg-bar__fill,
.dbmg-minibar > span {
	--p: 0%;
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--dbmg-accent);
	clip-path: inset(0 calc(100% - var(--p)) 0 0 round 999px);
	transition: clip-path 600ms var(--dbmg-ease);
	overflow: hidden;
}

[dir="rtl"] .dbmg-bar__fill,
[dir="rtl"] .dbmg-minibar > span {
	clip-path: inset(0 0 0 calc(100% - var(--p)) round 999px);
}

/* The one authored motion: a slow sheen travels the filled bar while the server is working. */
.dbmg-progress:not([data-stage="stalled"]) .dbmg-bar__fill::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
	transform: translateX(-100%);
	animation: dbmg-sheen 2200ms var(--dbmg-ease) infinite;
}

[dir="rtl"] .dbmg-progress:not([data-stage="stalled"]) .dbmg-bar__fill::after {
	animation-name: dbmg-sheen-rtl;
}

.dbmg-progress[data-stage="stalled"] .dbmg-bar__fill {
	background: #8c8f94;
}

.dbmg-progress__pct {
	min-width: 4ch;
	font-size: 16px;
	font-weight: 600;
	text-align: end;
}

.dbmg-progress__label {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--dbmg-ink-2);
}

.dbmg-progress__label.is-offline {
	color: var(--dbmg-warn);
}

.dbmg-progress__note {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--dbmg-ink-3);
}

.dbmg-paused {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	padding: 12px 14px;
	background: var(--dbmg-warn-bg);
	border: 1px solid var(--dbmg-warn-line);
	border-radius: var(--dbmg-radius-sm);
	color: var(--dbmg-warn);
}

.dbmg-paused[hidden] {
	display: none;
}

.dbmg-paused p {
	flex: 1;
	margin: 0;
	font-size: 14px;
	color: var(--dbmg-ink);
}

.dbmg-steps {
	margin-top: 14px;
}

.dbmg-steps__summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--dbmg-ink);
	cursor: pointer;
	list-style: none;
	border-radius: 4px;
}

.dbmg-steps__summary::-webkit-details-marker {
	display: none;
}

.dbmg-steps__count {
	color: var(--dbmg-ink-3);
	font-weight: 400;
}

.dbmg-steps__count::before {
	content: "·";
	margin-inline-end: 6px;
}

.dbmg-steps__chev {
	width: 18px;
	height: 18px;
	color: var(--dbmg-ink-3);
	transition: transform 200ms var(--dbmg-ease);
}

.dbmg-steps[open] .dbmg-steps__chev {
	transform: rotate(180deg);
}

.dbmg-steps__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(48px, 120px) max-content;
	column-gap: 16px;
	margin: 10px 0 0;
	padding: 6px 0 0;
	list-style: none;
	border-top: 1px solid var(--dbmg-line-soft);
	max-height: 288px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #c3c4c7 transparent;
}

.dbmg-steps__list:empty {
	display: none;
}

/* Fades mark the scroll edges of the table list; snapping keeps whole rows at the top. */
.dbmg-steps__list[data-tables] {
	scroll-snap-type: y proximity;
	--dbmg-fade-top: #000;
	--dbmg-fade-bottom: #000;
}

.dbmg-steps__list[data-tables] > .dbmg-step {
	scroll-snap-align: start;
}

.dbmg-steps__list[data-tables].is-scrollable:not(.is-at-start) {
	--dbmg-fade-top: transparent;
}

.dbmg-steps__list[data-tables].is-scrollable:not(.is-at-end) {
	--dbmg-fade-bottom: transparent;
}

.dbmg-steps__list[data-tables].is-scrollable {
	-webkit-mask-image: linear-gradient(var(--dbmg-fade-top), #000 20px, #000 calc(100% - 28px), var(--dbmg-fade-bottom));
	mask-image: linear-gradient(var(--dbmg-fade-top), #000 20px, #000 calc(100% - 28px), var(--dbmg-fade-bottom));
}

.dbmg-steps__list--stages {
	max-height: none;
	margin-top: 4px;
}

.dbmg-step {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(48px, 120px) minmax(9ch, max-content);
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--dbmg-ink-3);
}

.dbmg-step__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--dbmg-mono);
	font-size: 12.5px;
}

.dbmg-steps__list--stages .dbmg-step__name {
	font-family: inherit;
	font-size: 13px;
}

.dbmg-step__num {
	text-align: end;
	white-space: nowrap;
}

.dbmg-minibar {
	position: relative;
	height: 4px;
	border-radius: 999px;
	background: var(--dbmg-track);
	overflow: hidden;
}



.dbmg-step.is-done {
	color: var(--dbmg-ink-2);
}

.dbmg-step.is-active {
	background: var(--dbmg-accent-wash);
	color: var(--dbmg-ink);
}

.dbmg-step.is-active .dbmg-step__name {
	font-weight: 600;
}

.dbmg-step.is-error {
	color: var(--dbmg-danger);
}

/* ---------- Empty state ---------- */

.dbmg-empty {
	padding: 64px 24px 72px;
	text-align: center;
}

.dbmg-empty[hidden] {
	display: none;
}

.dbmg-empty__icon {
	width: 40px !important;
	height: 40px !important;
	color: var(--dbmg-accent);
	stroke-width: 1.3;
}

.dbmg .dbmg-empty__title {
	margin: 16px 0 6px;
	font-size: 20px;
	font-weight: 600;
	color: var(--dbmg-ink);
}

.dbmg-empty p {
	max-width: 50ch;
	margin: 0 auto 24px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--dbmg-ink-2);
}

/* ---------- Storage ---------- */

.dbmg-storage {
	margin-top: 18px;
	padding-inline: 4px;
	font-size: 14px;
	color: var(--dbmg-ink-2);
}

.dbmg-storage__line {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	line-height: 1.6;
}

.dbmg-storage__line .dbmg-icon {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--dbmg-ink-3);
}

.dbmg-storage__label {
	font-weight: 600;
	color: var(--dbmg-ink);
}

.dbmg-storage__line code {
	padding: 1px 6px;
	border-radius: 4px;
	background: #e7e8e9;
	color: var(--dbmg-ink);
	font-size: 12.5px;
}

.dbmg-storage .dbmg-num {
	white-space: nowrap;
}

.dbmg-sep {
	color: #a7aaad;
	margin-inline: 2px;
}

.dbmg-storage__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	margin-top: 12px;
	padding-inline-start: 26px;
}

.dbmg-check,
.dbmg-radio {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--dbmg-ink);
	cursor: pointer;
}

.dbmg .dbmg-check input,
.dbmg .dbmg-radio input {
	margin: 1px 0 0;
	flex: none;
}

.dbmg-storage .dbmg-check {
	color: var(--dbmg-ink-2);
}

/* ---------- Callouts ---------- */

.dbmg-callout {
	display: flex;
	gap: 10px;
	margin: 14px 0 0;
	padding: 12px 14px;
	border: 1px solid;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--dbmg-ink);
}

.dbmg-callout[hidden] {
	display: none;
}

.dbmg-callout p {
	margin: 0 0 6px;
	font-size: 14px;
}

.dbmg-callout p:last-child {
	margin-bottom: 0;
}

.dbmg-callout > .dbmg-icon {
	margin-top: 1px;
}

.dbmg-callout > div,
.dbmg-callout > p {
	flex: 1;
	min-width: 0;
}

/* Red lead sentences in the exposed-folder callout: danger on warn-bg is 5.96:1 (D39). */
.dbmg-callout__lead {
	color: var(--dbmg-danger);
}

.dbmg .dbmg-callout__important {
	margin: 10px 0 6px;
	padding-top: 10px;
	border-top: 1px solid var(--dbmg-warn-line);
}

.dbmg .dbmg-callout__actions {
	margin: 12px 0 0;
}

/* Red fill + white label (6.3:1), 32px tall, 16px close icon (D37). */
.dbmg-callout__actions .dbmg-btn {
	gap: 6px;
}

.dbmg-callout__actions .dbmg-icon {
	width: 16px;
	height: 16px;
}

/* Red 2px border (5.96:1 on the warn background) so the exposed-folder warning stands apart (D38).
   Sits at the top of the page, above the card, spaced like the JS notices (D42). */
.dbmg-callout--warn {
	margin: 0 0 16px;
	padding: 11px 13px;
	background: var(--dbmg-warn-bg);
	border: 2px solid var(--dbmg-danger);
}

.dbmg-callout--warn > .dbmg-icon {
	color: var(--dbmg-warn);
}

.dbmg-callout--info {
	background: var(--dbmg-accent-wash);
	border-color: var(--dbmg-accent-tint);
}

.dbmg-callout--info > .dbmg-icon {
	color: var(--dbmg-accent);
}

.dbmg-code {
	display: block;
	margin: 8px 0 0;
	padding: 10px 12px;
	background: var(--dbmg-surface);
	border: 1px solid var(--dbmg-line);
	border-radius: 6px;
	overflow-x: auto;
	white-space: pre;
}

/* ---------- Dialogs ---------- */

.dbmg-dialog {
	width: min(580px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var(--dbmg-surface);
	color: var(--dbmg-ink);
	box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.dbmg-dialog[open] {
	display: flex;
	flex-direction: column;
	animation: dbmg-rise 220ms var(--dbmg-ease);
}

.dbmg-dialog::backdrop {
	background: rgba(29, 35, 39, 0.5);
	animation: dbmg-fade 220ms ease;
}

.dbmg-dialog--confirm {
	width: min(460px, calc(100vw - 32px));
}

.dbmg-dialog__form {
	display: flex;
	flex-direction: column;
	min-height: 0;
	margin: 0;
}

.dbmg-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 20px 0;
	padding-inline: 28px 20px;
}

.dbmg .dbmg-dialog__title {
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 650;
	line-height: 1.3;
	color: var(--dbmg-ink);
}

.dbmg-dialog__body {
	padding: 10px 28px 8px;
	overflow-y: auto;
}

.dbmg-dialog--confirm .dbmg-dialog__body {
	padding-top: 24px;
}

.dbmg-dialog__lede {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--dbmg-ink-2);
}

.dbmg-dialog--confirm .dbmg-dialog__title + .dbmg-dialog__lede {
	margin-top: 8px;
}

.dbmg-dialog__foot {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 16px 28px 24px;
}

.dbmg-preflight {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--dbmg-line);
	border-radius: 10px;
	background: var(--dbmg-surface-2);
	font-size: 14px;
	line-height: 1.5;
}

.dbmg-preflight__text {
	flex: 1;
	min-width: 0;
}

.dbmg-preflight__text p {
	margin: 0;
	font-size: 14px;
}

.dbmg-preflight__text .dbmg-link-btn {
	margin-top: 4px;
}

.dbmg-preflight-note {
	margin: 6px 0 0;
	padding-inline-start: 15px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--dbmg-ink-3);
}

.dbmg-preflight__icon {
	display: none;
	flex: none;
}

.dbmg-preflight[data-tone="ok"] {
	background: var(--dbmg-ok-bg);
	border-color: var(--dbmg-ok-line);
}

.dbmg-preflight[data-tone="ok"] .dbmg-preflight__icon--ok {
	display: inline-flex;
	color: var(--dbmg-ok);
}

.dbmg-preflight[data-tone="bad"] {
	background: var(--dbmg-danger-bg);
	border-color: var(--dbmg-danger-line);
}

.dbmg-preflight[data-tone="bad"] .dbmg-preflight__icon--bad {
	display: inline-flex;
	color: var(--dbmg-danger);
}

.dbmg-preflight[data-tone="warn"] {
	background: var(--dbmg-warn-bg);
	border-color: var(--dbmg-warn-line);
}

.dbmg-preflight[data-tone="warn"] .dbmg-preflight__icon--warn {
	display: inline-flex;
	color: var(--dbmg-warn);
}

.dbmg-spinner {
	display: none;
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px;
	border: 2px solid var(--dbmg-track);
	border-top-color: var(--dbmg-accent);
	border-radius: 50%;
	animation: dbmg-spin 700ms linear infinite;
}

.dbmg-preflight[data-tone="checking"] .dbmg-spinner {
	display: inline-block;
}

.dbmg-preflight[data-tone="checking"] {
	color: var(--dbmg-ink-2);
}

.dbmg-advanced-toggle {
	margin-top: 18px;
	font-weight: 500;
}

.dbmg-advanced {
	display: grid;
	gap: 18px;
	margin-top: 14px;
	padding-top: 18px;
	border-top: 1px solid var(--dbmg-line-soft);
}

.dbmg-advanced[hidden] {
	display: none;
}

.dbmg-field {
	display: grid;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.dbmg-field__label {
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--dbmg-ink);
}

.dbmg-field__hint {
	font-weight: 400;
	color: var(--dbmg-ink-3);
}

.dbmg-scope {
	gap: 10px;
}

.dbmg-scope legend {
	margin-bottom: 10px;
}

.dbmg .dbmg-input {
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #8c8f94;
	border-radius: var(--dbmg-radius-sm);
	background: var(--dbmg-surface);
	color: var(--dbmg-ink);
	font-size: 15px;
	line-height: 38px;
	box-shadow: none;
}

.dbmg .dbmg-input::placeholder {
	color: var(--dbmg-ink-3);
}

.dbmg .dbmg-input:focus {
	border-color: var(--dbmg-accent);
	box-shadow: 0 0 0 1px var(--dbmg-accent);
	outline: none;
}

.dbmg-subsite {
	display: grid;
	gap: 10px;
	margin: 0 0 4px;
	padding-inline-start: 26px;
}

.dbmg-subsite[hidden],
.dbmg-picker[hidden] {
	display: none;
}

.dbmg-picker {
	display: grid;
	gap: 10px;
}

.dbmg-picker__bar {
	display: flex;
	align-items: center;
	gap: 16px;
}

.dbmg-search {
	position: relative;
	flex: 1;
}

.dbmg-search .dbmg-icon {
	position: absolute;
	inset-inline-start: 11px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	color: var(--dbmg-ink-3);
	pointer-events: none;
}

.dbmg .dbmg-search .dbmg-input {
	padding-inline-start: 36px;
}

.dbmg-picker__groups {
	max-height: 300px;
	overflow-y: auto;
	border: 1px solid var(--dbmg-line);
	border-radius: 10px;
	scrollbar-width: thin;
	scrollbar-color: #c3c4c7 transparent;
}

.dbmg-group + .dbmg-group {
	border-top: 1px solid var(--dbmg-line-soft);
}

.dbmg-group__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--dbmg-surface-2);
	font-size: 13px;
	font-weight: 600;
}

.dbmg-group__head .dbmg-check {
	flex: 1;
	min-width: 0;
	font-weight: 600;
}

.dbmg-group__toggle {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--dbmg-ink-3);
	cursor: pointer;
}

.dbmg-group__toggle:hover {
	background: #e7e8e9;
	color: var(--dbmg-ink);
}

.dbmg-group__toggle .dbmg-icon {
	width: 18px;
	height: 18px;
	transition: transform 200ms var(--dbmg-ease);
}

.dbmg-group.is-open .dbmg-group__toggle .dbmg-icon {
	transform: rotate(180deg);
}

.dbmg-group__count {
	font-weight: 400;
	color: var(--dbmg-ink-3);
	white-space: nowrap;
}

.dbmg-group__list {
	margin: 0;
	padding: 4px 0;
	list-style: none;
}

.dbmg-group__list[hidden] {
	display: none;
}

.dbmg-tbl {
	margin: 0;
}

.dbmg-tbl label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 6px 12px;
	cursor: pointer;
}

.dbmg-tbl label:hover {
	background: var(--dbmg-accent-wash);
}

.dbmg-tbl input {
	margin: 0;
}

.dbmg-tbl__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--dbmg-mono);
	font-size: 12.5px;
	color: var(--dbmg-ink);
}

.dbmg-tbl__meta {
	font-size: 12px;
	color: var(--dbmg-ink-3);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.dbmg-picker__empty {
	margin: 0;
	padding: 20px 12px;
	font-size: 14px;
	text-align: center;
	color: var(--dbmg-ink-3);
}

.dbmg-picker__count {
	margin: 0;
	font-size: 13px;
	color: var(--dbmg-ink-2);
}

.dbmg-form-error {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--dbmg-danger);
}

.dbmg-form-error[hidden] {
	display: none;
}

/* ---------- Motion ---------- */

@keyframes dbmg-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes dbmg-sheen {
	0% {
		transform: translateX(-100%);
	}
	70%,
	100% {
		transform: translateX(100%);
	}
}

@keyframes dbmg-sheen-rtl {
	0% {
		transform: translateX(100%);
	}
	70%,
	100% {
		transform: translateX(-100%);
	}
}

@keyframes dbmg-rise {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.985);
	}
}

@keyframes dbmg-fade {
	from {
		opacity: 0;
	}
}

@keyframes dbmg-arrive {
	0%,
	30% {
		background-color: var(--dbmg-accent-tint);
	}
	100% {
		background-color: transparent;
	}
}

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

	.dbmg-progress .dbmg-bar__fill::after {
		display: none;
	}
}

/* ---------- Small screens (WP mobile breakpoint) ---------- */

@container dbmg-card (max-width: 760px) {
	.dbmg-table,
	.dbmg-table tbody {
		display: block;
	}

	.dbmg-table thead {
		display: block;
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.dbmg-table tr.dbmg-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"date date"
			"desc desc"
			"size actions";
		align-items: center;
		padding-block: 16px 14px;
		padding-inline: 16px 12px;
		border-bottom: 1px solid var(--dbmg-line-soft);
	}

	.dbmg-table tbody tr.dbmg-row:last-child,
	.dbmg-table tbody tr.dbmg-row:has(+ .dbmg-progress-row),
	.dbmg-table tbody tr.dbmg-row:has(+ .dbmg-details-row:not([hidden])) {
		border-bottom-color: transparent;
	}

	.dbmg-table tr.dbmg-row .dbmg-cell {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		background: none;
	}

	.dbmg-table .dbmg-cell--date {
		grid-area: date;
		font-size: 14px;
		color: var(--dbmg-ink-2);
	}

	.dbmg-table .dbmg-cell--desc {
		grid-area: desc;
		margin-top: 2px;
	}

	.dbmg-table .dbmg-cell--size {
		grid-area: size;
		margin-top: 6px;
		font-size: 14px;
		color: var(--dbmg-ink-2);
	}

	.dbmg-table tr.dbmg-row .dbmg-cell--size.is-blank {
		visibility: hidden;
	}

	.dbmg-table .dbmg-cell--actions {
		grid-area: actions;
		margin-top: 8px;
	}

	.dbmg-pager {
		padding-inline: 16px 12px;
	}

	.dbmg-table tr.dbmg-progress-row,
	.dbmg-table tr.dbmg-details-row {
		display: block;
		padding: 0 16px 16px;
		border-bottom: 1px solid var(--dbmg-line-soft);
	}

	.dbmg-table tr.dbmg-progress-row .dbmg-cell,
	.dbmg-table tr.dbmg-details-row .dbmg-cell {
		display: block;
		padding: 0;
		border: 0;
	}

	.dbmg-table .dbmg-cell--spacer {
		display: none !important;
	}

	.dbmg-step {
		grid-template-columns: minmax(0, 1fr) 48px minmax(9ch, max-content);
		gap: 10px;
		padding: 6px 8px;
	}

}

@media screen and (max-width: 782px) {
	.dbmg-head {
		margin: 12px 0 20px;
	}

	.dbmg .dbmg-title {
		font-size: 24px;
	}

	.dbmg-brand__mark {
		width: 40px;
		height: 40px;
	}

	.dbmg::before {
		width: 100%;
	}

	.dbmg-btn--pill {
		height: 44px;
		padding: 0 22px;
		font-size: 15px;
	}

	.dbmg-dialog__head {
		padding-block: 16px 0;
		padding-inline: 20px 12px;
	}

	.dbmg-dialog__body {
		padding: 8px 20px;
	}

	.dbmg-dialog__foot {
		padding: 14px 20px 20px;
	}

	.dbmg-storage__actions {
		padding-inline-start: 0;
	}

	.dbmg-picker__bar {
		flex-wrap: wrap;
		gap: 10px 16px;
	}

	.dbmg-search {
		flex-basis: 100%;
	}
}

@media screen and (max-width: 480px) {
	.dbmg-head {
		align-items: stretch;
	}

	.dbmg-head .dbmg-btn--pill {
		width: 100%;
	}

	.dbmg-dialog__foot .dbmg-btn {
		flex: 1;
	}
}

/* Every row of a progress list shares the list's columns, so bars line up whatever the count text. */
@supports (grid-template-columns: subgrid) {
	.dbmg-steps__list > .dbmg-step {
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
	}
}

.dbmg-code code {
	padding: 0;
	background: none;
	font-size: inherit;
}

@container dbmg-card (max-width: 700px) {
	.dbmg .dbmg-steps__list > .dbmg-step {
		grid-template-columns: minmax(0, 1fr) max-content;
		row-gap: 6px;
	}

	.dbmg .dbmg-step .dbmg-minibar {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.dbmg .dbmg-steps__list {
		display: block;
	}
}

@media screen and (max-width: 782px) {
	.dbmg-storage__where {
		display: block;
	}

	.dbmg-storage__where + .dbmg-num > .dbmg-sep {
		display: none;
	}

	.dbmg-code {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}
}