/* BEGIN dimension-backgrounds experiment (9158).
   Revert baseline: Backups/command-dimension-backgrounds-9157/REVERT.md.
   Color values supplied in Dimension backgrounds/dimension-colors.txt.
   Dimension colors apply only to card-view overlays; detail surfaces also match single cards. */
body.dashboard-app .dashboard-card-overlay {
	--card-dimension-color: #000;
	--card-dimension-rgb: 0, 0, 0;
	--command-hide-planet-menu: 1;
}
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="1"] { --card-dimension-color: #0c0308; --card-dimension-rgb: 12, 3, 8; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="2"] { --card-dimension-color: #090b08; --card-dimension-rgb: 9, 11, 8; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="3"] { --card-dimension-color: #0a0a0a; --card-dimension-rgb: 10, 10, 10; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="4"] { --card-dimension-color: #08060d; --card-dimension-rgb: 8, 6, 13; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="5"] { --card-dimension-color: #000904; --card-dimension-rgb: 0, 9, 4; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="6"] { --card-dimension-color: #0b0000; --card-dimension-rgb: 11, 0, 0; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="7"] { --card-dimension-color: #020505; --card-dimension-rgb: 2, 5, 5; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="8"] { --card-dimension-color: #000708; --card-dimension-rgb: 0, 7, 8; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="9"] { --card-dimension-color: #070108; --card-dimension-rgb: 7, 1, 8; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="10"] { --card-dimension-color: #05040b; --card-dimension-rgb: 5, 4, 11; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="11"] { --card-dimension-color: #080705; --card-dimension-rgb: 8, 7, 5; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="12"] { --card-dimension-color: #0a0004; --card-dimension-rgb: 10, 0, 4; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="13"] { --card-dimension-color: #080207; --card-dimension-rgb: 8, 2, 7; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="14"] { --card-dimension-color: #060805; --card-dimension-rgb: 6, 8, 5; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="15"] { --card-dimension-color: #080300; --card-dimension-rgb: 8, 3, 0; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="16"] { --card-dimension-color: #080401; --card-dimension-rgb: 8, 4, 1; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="17"] { --card-dimension-color: #050705; --card-dimension-rgb: 5, 7, 5; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="18"] { --card-dimension-color: #02060b; --card-dimension-rgb: 2, 6, 11; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="19"] { --card-dimension-color: #040802; --card-dimension-rgb: 4, 8, 2; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="20"] { --card-dimension-color: #03060a; --card-dimension-rgb: 3, 6, 10; }
body.dashboard-app .dashboard-card-overlay[data-planet-dimension="21"] { --card-dimension-color: #0b0600; --card-dimension-rgb: 11, 6, 0; }

/* The stationary frame and the scrolling body share the Planet's background. */
body.dashboard-app .dashboard-card-overlay :is(.card-view-content, .dashboard-card-scroll-body, .card-view.dashboard-planet-detail) {
	background: var(--card-dimension-color);
}
body.dashboard-app .dashboard-card-overlay .dashboard-planet-detail > .project-image,
body.dashboard-app .dashboard-card-overlay .dashboard-planet-artwork,
body.dashboard-app .dashboard-card-overlay .dashboard-planet-artwork > :is(iframe, img) {
	background-color: var(--card-dimension-color);
}
/* Match the loader layer to its card while the embedded Planet starts. This
   selector also wins over the shared black single-card loader rule. */
body.dashboard-app .dashboard-card-overlay .dashboard-planet-detail > .project-image.planet-iframe-media > .dashboard-planet-artwork {
	background-color: var(--card-dimension-color);
}
body.dashboard-app .dashboard-card-overlay .dashboard-planet-detail > .project-image::before {
	background: linear-gradient(to bottom, transparent, var(--card-dimension-color));
}
/* The iframe is below this fade; the separate owner identity remains above it. */
body.dashboard-app .dashboard-card-overlay .dashboard-planet-artwork::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50px;
	background: linear-gradient(to bottom, var(--card-dimension-color), transparent);
	pointer-events: none;
	z-index: 2;
}

/* Fixed bars use the solid dimension color; content scrolls between them. */
body.dashboard-app .dashboard-card-overlay :is(.card-view-header, .dashboard-tabs-footer) {
	background: var(--card-dimension-color);
}
body.dashboard-app .dashboard-card-overlay .card-view-top,
body.dashboard-app .dashboard-card-overlay .card-view-header::before {
	background: transparent;
}

/* Each group paints one 80% black layer. Inner controls and tiles stay clear
   so they do not compound the group's opacity. Artwork pixels remain intact. */
body.dashboard-app :is(.dashboard-card-overlay .dashboard-planet-detail, .single-card.dashboard-planet-detail) :is(.card-box, .trait-box) {
	background: rgba(0, 0, 0, .8);
}
body.dashboard-app :is(.dashboard-card-overlay .dashboard-planet-detail, .single-card.dashboard-planet-detail) .card-box :is(
	.trait-box, .planet-resource-row, .planet-resource-structure,
	.planet-civilian-action, .planet-game-thumb, .planet-game-count-value),
body.dashboard-app :is(.dashboard-card-overlay .dashboard-planet-detail, .single-card.dashboard-planet-detail) .card-box :is(.planet-game-thumb, .planet-resource-structure) > img {
	background: transparent;
}
body.dashboard-app :is(.dashboard-card-overlay .dashboard-planet-detail, .single-card.dashboard-planet-detail) .card-box .planet-link-button.action {
	background-color: transparent !important;
}
body.dashboard-app :is(.dashboard-card-overlay .dashboard-planet-detail, .single-card.dashboard-planet-detail) [data-box="map"] {
	background: #000;
}
body.dashboard-app :is(.dashboard-card-overlay .dashboard-planet-detail, .single-card.dashboard-planet-detail) [data-box="messages"] .pm-draft {
	background: transparent;
}

@media (min-width: 801px) {
	body.dashboard-app .dashboard-card-overlay .dashboard-detail-tabbed:not(.dashboard-detail-landscape):not(.single-card) > .project-image::after {
		left: auto;
		transform: none;
		background: linear-gradient(to right, transparent, var(--card-dimension-color));
		-webkit-background-clip: border-box;
		background-clip: border-box;
		animation: none;
		opacity: 1;
	}
}
@media (max-width: 800px) {
	body.dashboard-app .dashboard-card-overlay .pm-transmission-overlay {
		--pm-transmission-background: var(--card-dimension-color);
	}
	body.dashboard-app .dashboard-card-overlay .dashboard-planet-detail [data-box="messages"] {
		background: transparent;
	}
	body.dashboard-app .dashboard-card-overlay .card-view-scroll {
		background: var(--card-dimension-color);
	}
	body.dashboard-app .dashboard-card-overlay .dashboard-detail-tabbed[data-detail-tab="messages"] .dashboard-tab-content[data-tab-section="messages"]:not(.hidden) {
		background: transparent;
	}
	body.dashboard-app .dashboard-card-overlay .dashboard-detail-tabbed [data-tab-section="messages"] .orbit-map-frame::before {
		background: linear-gradient(to bottom, var(--card-dimension-color), transparent);
	}
	body.dashboard-app .dashboard-card-overlay .dashboard-detail-tabbed [data-tab-section="messages"] .orbit-map-frame::after {
		background: linear-gradient(to bottom, transparent, var(--card-dimension-color));
	}
}
/* END dimension-backgrounds experiment. */