/* Optional density is presentation, never a zoom or a content-size multiplier. */
@import url("./density-shell.css");
@import url("./density-overlays.css");
@import url("./density-dialogs.css");
@import url("./density-decks.css");
@import url("./density-profile.css");
@import url("./density-routes-content.css");
@import url("./density-routes-workspaces.css");
@import url("./density-routes-creative.css");
@import url("./density-routes-admin.css");

html[data-site-density="compact"] {
	--density-control-size: calc(44 * var(--rpx));
	--density-page-block: calc(4 * var(--rpx));
	--density-page-inline: calc(8 * var(--rpx));
	--density-panel-pad: calc(10 * var(--rpx));
	--density-section-gap: calc(8 * var(--rpx));
	--density-action-gap: calc(4 * var(--rpx));
	--density-grid-gap: calc(6 * var(--rpx));
	--density-row-height: calc(44 * var(--rpx));
	--tcg-page-pad-block: var(--density-page-block);
	--tcg-page-pad-inline: var(--density-page-inline);
	--tcg-intro-gap: var(--density-section-gap);
	--tcg-section-gap: var(--density-section-gap);
	--tcg-action-gap: var(--density-action-gap);
	--tcg-empty-margin-block: 0;
	--tcg-empty-justify-content: flex-start;
	--tcg-empty-block-size: auto;
	--r-control: calc(6 * var(--rpx));
	--r-field: calc(6 * var(--rpx));
	--r-tile: calc(6 * var(--rpx));
	--r-panel: calc(10 * var(--rpx));
	--r-dialog: calc(10 * var(--rpx));
}

/* Derived shadows must compute again within palette previews, not inherit
   the already-resolved colors of the account's outer palette. */
html[data-site-density="compact"],
html[data-site-density="compact"] [data-palette] {
	--depth-raised: inset 0 1px 0 var(--hi), 0 1px 0 var(--edge);
	--depth-tile: inset 0 1px 0 var(--hi), 0 1px 0 var(--edge);
	--depth-tile-hover: inset 0 1px 0 var(--hi), 0 1px 0 var(--edge);
	--depth-panel: inset 0 1px 0 var(--hi), 0 1px 0 var(--edge);
	--depth-float: inset 0 1px 0 var(--hi), 0 1px 0 var(--edge), 0 8px 16px -8px var(--shade);
	--depth-sunken: inset 0 1px 2px var(--shade-in), inset 0 0 0 1px var(--line);
	--depth-primary: inset 0 1px 0 var(--hi), 0 1px 0 var(--accent-edge);
}

/* The playmat preview uses panel framing but owns a zero-padding art surface. */
html[data-site-density="compact"] .tcg-panel:not(.pm-visual-canvas) {
	padding: var(--density-panel-pad);
}
html[data-site-density="compact"] .tcg-tray {
	padding: var(--density-grid-gap);
	gap: var(--density-action-gap);
	border-radius: var(--r-panel);
}
html[data-site-density="compact"] .tcg-tile {
	padding: var(--density-action-gap) var(--density-section-gap);
	gap: var(--density-grid-gap);
}
html[data-site-density="compact"] .tcg-callout {
	padding: var(--density-section-gap);
	gap: var(--density-grid-gap);
}
html[data-site-density="compact"] .tcg-empty {
	padding: calc(12 * var(--rpx));
	gap: var(--density-section-gap);
}

/* --bp-lg: a large screen alone is not permission to shrink touch targets. */
@media (min-width: 1024px) and (pointer: fine) and (not (any-pointer: coarse)) {
	html[data-site-density="compact"] {
		--density-control-size: calc(30 * var(--rpx));
		--density-row-height: calc(32 * var(--rpx));
	}
}