/* Command card geometry and the copied Marketplace shimmer, never spinners. */
/* Keep the existing loading sizes, gradient and animation, using the Ordinal
   silhouette. Failed-media icons and suppressed skeleton icons retain priority. */
:where(.dashboard-app) :is(.project-image, .project-collection-image,
	.last-sale-image, .offer-display-image, .create-offer-item-image,
	.create-offer-user-image, .create-offer-selectable-image,
	.create-offer-search-result-image):where(:not(.load-failed))::after {
	content: "";
	width: 1em;
	height: 1em;
	-webkit-mask: url("./ordinal.svg") center / contain no-repeat;
	mask: url("./ordinal.svg") center / contain no-repeat;
	-webkit-background-clip: border-box;
	background-clip: border-box;
}

/* Portrait artwork places the Planet just above the card midpoint. */
.dashboard-app .dashboard-portrait-card > .project-image:not(.load-failed)::after { top: 43%; }

/* Planet embeds keep their Ordinal shimmer until the artwork is ready. The
   card's outer pseudo-element is a side gradient on desktop, so the loader
   lives inside the artwork layer. */
.dashboard-app .dashboard-planet-detail > .project-image.planet-iframe-media > .dashboard-planet-artwork {
	background-color: #000;
}
.dashboard-app .dashboard-planet-detail > .project-image.planet-iframe-media > .dashboard-planet-artwork::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4rem;
	height: 4rem;
	transform: translate(-50%, -50%);
	-webkit-mask: url("./ordinal.svg") center / contain no-repeat;
	mask: url("./ordinal.svg") center / contain no-repeat;
	background: linear-gradient(120deg, #101010 30%, #202020 38%, #303030 40%, #202020 42%, #101010 70%);
	background-size: 200% 100%;
	animation: shimmer 1.8s ease-in-out infinite;
	transition: opacity .1s ease-out;
	pointer-events: none;
	z-index: 3;
}
.dashboard-app .dashboard-planet-detail > .project-image.planet-iframe-media:is(.loaded, .load-failed) > .dashboard-planet-artwork::before {
	opacity: 0;
}
.dashboard-app .dashboard-planet-detail > .project-image.planet-iframe-media iframe[data-planet-media="1"] {
	transition: none;
}
.dashboard-app .dashboard-planet-detail > .project-image.planet-iframe-media.loaded iframe[data-planet-media="1"] {
	transition: opacity .18s ease-out .1s;
}
.dashboard-app .single-card.dashboard-planet-detail > .project-image.planet-iframe-media::after { content: none; }
@media (max-width: 800px) {
	.dashboard-app .card-view.dashboard-planet-detail > .project-image.planet-iframe-media::after { content: none; }
}
@media (min-width: 801px) {
	.dashboard-app .card-view.dashboard-detail-landscape > .project-image.planet-iframe-media::after { content: none; }
}

.dashboard-app .dashboard-portrait-identity { height: auto; min-height: 0; gap: 0; }
.dashboard-app .dashboard-grid-bottom {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	pointer-events: none;
	z-index: 2;
}
.dashboard-app .dashboard-grid-bottom > .dashboard-owner-badge {
	position: static;
	flex: none;
	max-width: 100%;
	margin: 0;
	pointer-events: auto;
}
.dashboard-app .dashboard-grid-bottom > .planet-status-bars {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 5px;
}
.dashboard-app .dashboard-grid-bottom > .planet-status-bars .planet-status-cell {
	display: flex;
	align-items: center;
	gap: 5px;
}
.dashboard-app .dashboard-grid-bottom > .planet-status-bars .planet-status-icon {
	flex: 0 0 12px;
	width: 12px;
	min-width: 0;
	max-width: 12px;
	height: 12px;
	margin: 0;
	font-size: 12px;
	line-height: 12px;
}
.dashboard-app .dashboard-grid-bottom > .planet-status-bars .planet-status-bar {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 4px;
}
.dashboard-app .dashboard-portrait-identity > .project-name {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: auto;
	text-align: left;
}
.dashboard-app .dashboard-portrait-identity .dashboard-grid-name-primary,
.dashboard-app .dashboard-portrait-identity .dashboard-grid-name-secondary {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dashboard-app .dashboard-portrait-identity .dashboard-grid-name-primary { font-size: var(--font-bs); font-weight: 500; line-height: 18px; }
.dashboard-app .dashboard-portrait-identity .dashboard-grid-name-secondary { color: var(--command-grey, #727578); font-size: var(--font-sm); line-height: 14px; }
.dashboard-app .dashboard-portrait-identity.has-unread-transmissions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content;
	column-gap: 20px;
	align-items: start;
}
.dashboard-app .dashboard-portrait-identity.has-unread-transmissions > .project-name { min-width: 0; }
.dashboard-app .dashboard-portrait-identity.has-unread-transmissions > .dashboard-card-message-badge { position: static; }
.dashboard-app .dashboard-card-message-badge {
	position: absolute;
	top: 0;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: #5acc77;
	font-size: var(--font-sm);
	line-height: 16px;
	white-space: nowrap;
	pointer-events: none;
}
.dashboard-app .dashboard-card-message-badge .fa-message { display: inline-flex; align-items: center; width: 15px; height: 15px; }
.dashboard-app .dashboard-card-message-badge .fa-message::before { display: none; }
.dashboard-app .dashboard-card-message-badge .fa-message svg { display: block; width: 15px; height: 15px; }
.dashboard-app .grid-1 .collection-card.owner-card { display: flex; align-self: stretch; min-width: 0; }
.dashboard-app .grid-1 .owner-card-details { box-sizing: border-box; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dashboard-app .grid-1 .owner-card-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dashboard-app .grid-1 .owner-card-stats { margin-top: auto; }
.dashboard-app .grid-1 .owner-card-icons { margin-top: auto; }
.dashboard-app .grid-1 .owner-card-icons + .owner-card-stats { margin-top: 0; }
.dashboard-app .grid-1 .owner-card-single { height: 100%; }
body.dashboard-app .owner-card .owner-card-icons { justify-content: center; }
body.dashboard-app .owner-card .owner-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

/* Commanders are one large owner-filter target; only the X link has its own
   action. Center the identity above the count and X anchored at the bottom. */
.dashboard-app .grid-1 .owner-card-commander { min-height: 200px; }
.dashboard-app .grid-1 .owner-card-commander .owner-card-details {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 0 10px 10px;
}
.dashboard-app .grid-1 .owner-card-commander .owner-card-main {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 0;
	padding: 40px 0;
}
.dashboard-app .grid-1 .owner-card-commander .owner-card-name {
	min-width: 0;
	padding: 0;
	font-size: var(--font-bs);
	font-weight: 500;
	line-height: 18px;
}
.dashboard-app .grid-1 .owner-card-commander .owner-card-footer {
	display: flex;
	flex: 0 0 auto;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	min-height: 32px;
}
.dashboard-app .grid-1 .owner-card-commander .owner-card-planet-count {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	min-width: 0;
	white-space: nowrap;
}
.dashboard-app .grid-1 .owner-card-commander .owner-card-planet-label {
	color: var(--command-grey, #727578);
	font-size: var(--font-sm);
	line-height: 1;
}
.dashboard-app .grid-1 .owner-card-commander .owner-card-count {
	color: #ededed;
	font-size: var(--font-xl);
	font-weight: 500;
	line-height: 1.25;
}
.dashboard-app .grid-1 .owner-card-commander .owner-card-icons {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: 0;
}
.dashboard-app .grid-1 .owner-card-commander.skeleton-card .owner-card-name-text {
	width: min(125px, 75%);
	height: 18px;
	margin: 0 auto;
}
.dashboard-app .grid-1 .owner-card-commander.skeleton-card .owner-card-planet-label { width: 50px; height: 11px; }
.dashboard-app .grid-1 .owner-card-commander.skeleton-card .owner-card-count { width: 28px; height: 20px; }
.dashboard-app .grid-1 .owner-card-commander.skeleton-card .owner-card-icon { width: 32px; height: 32px; }
@media (max-width: 800px) {
	.dashboard-app .grid-1 .owner-card-commander .owner-card-count { font-size: var(--font-lg); }
}

.dashboard-app .dashboard-portrait-card.skeleton-card .project-image { aspect-ratio: 3 / 4; }
.dashboard-app .dashboard-portrait-card.skeleton-card .project-name { width: min(150px, 75%); height: 14px; }
.dashboard-app .skeleton-card .dashboard-owner-badge { box-sizing: border-box; width: min(120px, 65%); height: 25px; border-radius: 9999px; }
.dashboard-app .skeleton-card .planet-status-icon { display: block; width: 14px; height: 14px; margin: 0 auto 5px; }
.dashboard-app .skeleton-card .planet-status-bar { min-height: 0; height: 4px; }
.dashboard-app .skeleton-card .planet-status-bar.skeleton-bone {
	background: linear-gradient(120deg, #131313 30%, #1e1e1e 38%, #252525 40%, #1e1e1e 42%, #131313 70%);
	background-size: 200% 100%;
}
/* Command keeps its loading shimmer on Safari even when device-wide Reduce
   Motion is enabled. The copied Marketplace stylesheet disables it globally. */
body.dashboard-app .skeleton-bone {
	background: linear-gradient(120deg, #131313 30%, #1e1e1e 38%, #252525 40%, #1e1e1e 42%, #131313 70%);
	background-size: 200% 100%;
	animation: shimmer 1.8s ease-in-out infinite;
}
.dashboard-app .skeleton-card .planet-status-detail-cell .planet-status-label { width: min(100%, 48px); height: 10px; }
.dashboard-app .skeleton-card .planet-status-detail-cell .planet-status-icon { width: 12px; height: 12px; margin: 0; }
.dashboard-app .skeleton-card .planet-status-detail-cell .planet-status-value { width: 100%; height: 12px; justify-self: end; }
.dashboard-app .skeleton-card .trait-box { min-height: 62px; }
.dashboard-app .command-tab-skeleton { width: 35px; height: 30px; }
.dashboard-app .skeleton-card .card-box-title { width: 90px; }
.dashboard-app .dashboard-single-header .card-view-name.skeleton-bone { width: 150px; height: 15px; }
.dashboard-app .command-structure-skeleton { position: absolute; inset: 0; width: 100%; height: 100%; }
.dashboard-app .command-preview-skeleton { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.dashboard-app .command-preview-skeleton > .planet-game-slot { min-height: 0; }
.dashboard-app .command-skeleton-group-count {
	flex: 0 0 32px;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	margin: 0 10px;
	border-radius: 50%;
}
.dashboard-app .command-civilization-skeleton-card .planet-civilization-info { box-sizing: border-box; width: 100%; }
.dashboard-app .command-civilization-skeleton-card .planet-civilization-name { width: 75%; height: 1rem; }
.dashboard-app .command-civilization-skeleton-card .planet-civilization-caption { width: 55%; height: 12px; margin-block: calc(0.5rem - 6px); }
.dashboard-app .command-relics-loading .planet-resource-name { width: min(130px, 70%); height: 16px; }
.dashboard-app .command-skeleton-resource-count {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	margin-left: auto;
	border-radius: 50%;
}
.dashboard-app .planet-picker-popup .command-picker-skeleton { display: block; box-sizing: border-box; width: 100%; padding: 0; }
.dashboard-app .planet-picker-popup .command-picker-skeleton-row { display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 61px; border-top: 1px solid var(--command-border, #252729); }
.dashboard-app .planet-picker-popup .command-picker-skeleton-row:first-child { border-top: 0; }
.dashboard-app .planet-picker-popup .command-picker-skeleton-check { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 3px; }
.dashboard-app .planet-picker-popup .command-picker-skeleton-thumb { flex: 0 0 40px; width: 40px; height: 40px; }
.dashboard-app .planet-picker-popup .command-picker-skeleton-name { flex: 0 1 160px; width: min(40%, 160px); height: 14px; border-radius: 3px; }

/* Legacy asynchronous actions still emit .loader; make these native shimmer
   slots too, without changing their processing/disabled behavior. */
.dashboard-app .loader { display: inline-block; width: 48px; height: 12px; border: 0; border-radius: 3px; transform: none; background: linear-gradient(120deg, #131313 30%, #1e1e1e 38%, #252525 40%, #1e1e1e 42%, #131313 70%); background-size: 200% 100%; animation: shimmer 1.8s ease-in-out infinite; }
.dashboard-app .action .loader { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: inherit; opacity: .55; pointer-events: none; }
.dashboard-app .action:has(> .loader) { position: relative; }
.dashboard-app .loader::before, .dashboard-app .loader::after { display: none; }
/* Keep desktop frame borders outside the scrolling layer. Safari's expanding
   overlay scrollbar must never cover a border painted by the scrolling card. */
@media (min-width: 801px) {
	.dashboard-app .dashboard-card-overlay .card-view-content {
		/* Fit short cards to their contents, while tall cards scroll inside the frame. */
		height: auto;
		max-height: 100%;
		border: 1px solid var(--command-border, #252729);
		background: #000;
		box-shadow: 0 10px 30px rgba(0, 0, 0, .75);
	}
	.dashboard-app .dashboard-card-overlay .card-view-header {
		flex-basis: calc(var(--detail-header-content-height) + 1px);
		height: calc(var(--detail-header-content-height) + 1px);
	}
	.dashboard-app .dashboard-card-overlay .card-view-top {
		height: calc(var(--detail-header-content-height) + 1px);
		border: 0;
		border-bottom: 1px solid var(--command-border, #252729);
	}
	.dashboard-app .dashboard-card-overlay .card-view {
		border: 0;
		box-shadow: none;
	}
}

/* BEGIN card-corners experiment (9147): remove this block to restore square corners. */
.dashboard-app :is(.grid-1, .grid-2) :is(.collection-card, .collections-card) {
	border-radius: 12px;
}

/* The desktop border belongs to the fixed shell; children use its inner curve. */
.dashboard-app .dashboard-card-overlay .card-view-content {
	border-radius: 12px;
	overflow: hidden;
}
.dashboard-app .dashboard-card-overlay :is(.card-view-header, .card-view-top) {
	border-radius: 11px 11px 0 0;
}
.dashboard-app .dashboard-card-overlay :is(.dashboard-card-scroll-body, .card-view) {
	border-radius: 0 0 11px 11px;
}
.dashboard-app .dashboard-card-overlay .card-view { overflow: hidden; }

@media (max-width: 800px) {
	/* The mobile shell owns the border; its fixed bars follow the inner curve. */
	.dashboard-app .card-view-scroll:has(.dashboard-planet-detail) { border-radius: 12px; }
	.dashboard-app .dashboard-card-overlay :is(.card-view-content, .dashboard-card-scroll-body, .card-view) {
		border-radius: 0;
	}
	.dashboard-app .dashboard-card-overlay :is(.card-view-header, .card-view-top) {
		border-radius: 11px 11px 0 0;
	}
	.dashboard-app .dashboard-card-overlay .dashboard-tabs-footer {
		border-radius: 0 0 11px 11px;
		overflow: hidden;
	}
}
/* END card-corners experiment. */

/* Only the Locate popup uses this compact selected-Planet preview. The Planet
   remains visible on the map, so its card needs only identity, owner and bars. */
body.dashboard-app .command-locate-overlay .orbit-map-tooltip-stack.orbit-map-selected-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	box-sizing: border-box;
	width: min(170px, calc(100% - 20px));
	max-width: calc(100% - 20px);
	padding: 10px;
	border: 1px solid var(--command-border, #252729);
	border-radius: 0;
	background: #000;
	overflow: hidden;
	z-index: 4;
}
body.dashboard-app .command-locate-overlay .orbit-map-tooltip-stack.orbit-map-selected-card[hidden] { display: none; }
body.dashboard-app .command-locate-overlay .orbit-map-selected-card .orbit-map-tooltip {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	box-sizing: border-box;
	padding: 0;
	border: 0;
	background: transparent;
	white-space: normal;
	z-index: 0;
}
body.dashboard-app .command-locate-overlay .orbit-map-selected-card .orbit-map-expand {
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0;
	font-size: 12px;
	line-height: 12px;
	pointer-events: none;
}
body.dashboard-app .command-locate-overlay .orbit-map-selected-card .orbit-map-tooltip-name {
	position: relative;
	width: calc(100% - 32px);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	white-space: nowrap;
	pointer-events: none;
}
body.dashboard-app .command-locate-overlay .orbit-map-card-code {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--command-grey, #727578);
	font-size: var(--font-sm);
	line-height: 14px;
	letter-spacing: .05em;
}
body.dashboard-app .command-locate-overlay .orbit-map-card-code[hidden] { display: none; }
body.dashboard-app .command-locate-overlay .orbit-map-card-custom {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
	font-size: var(--font-bs);
	font-weight: 500;
	line-height: 18px;
}
body.dashboard-app .command-locate-overlay .orbit-map-card-custom[hidden] { display: none; }
body.dashboard-app .command-locate-overlay .orbit-map-card-bars {
	position: relative;
	width: 100%;
	margin-top: 10px;
	z-index: 1;
	pointer-events: none;
}
body.dashboard-app .command-locate-overlay .orbit-map-tooltip-owner[hidden] + .orbit-map-card-bars { margin-top: 10px; }
body.dashboard-app .command-locate-overlay .orbit-map-card-bars:empty { display: none; }
body.dashboard-app .command-locate-overlay .orbit-map-card-bars > .planet-status-bars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 5px;
}
body.dashboard-app .command-locate-overlay .orbit-map-card-bars .planet-status-cell {
	display: flex;
	align-items: center;
	gap: 5px;
}
body.dashboard-app .command-locate-overlay .orbit-map-card-bars .planet-status-icon {
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	margin: 0;
	font-size: 12px;
	line-height: 12px;
}
body.dashboard-app .command-locate-overlay .orbit-map-card-bars .planet-status-bar {
	flex: 1 1 auto;
	min-width: 0;
	height: 4px;
}
body.dashboard-app .command-locate-overlay .orbit-map-selected-card .orbit-map-tooltip-owner.dashboard-owner-badge {
	position: relative;
	top: auto;
	left: auto;
	max-width: 100%;
	margin-top: 10px;
	z-index: 2;
}