/**
 * Front-end dashboard adjustments.
 *
 * app.css assumes the wp-admin canvas. On a theme page the app has to sit inside
 * whatever the theme provides, so this resets the parts that assumed admin chrome.
 */

.qdss-app--frontend {
	min-height: 0;
	margin: 0 auto;
	max-width: 1400px;
	border: 1px solid var(--qdss-line);
	border-radius: 12px;
	overflow: hidden;
}

.qdss-app--frontend .qdss-topbar {
	position: static;
	top: auto;
}

/* The nav is the whole desk on the front end, so let it wrap rather than
   scroll off the edge of a narrow theme container. */
.qdss-app--frontend .qdss-nav {
	flex-wrap: wrap;
	overflow: visible;
}

.qdss-app--frontend .qdss-nav__link {
	text-decoration: none;
}

.qdss-app--frontend .qdss-main {
	padding: 24px 26px 32px;
}

/* Themes love to restyle tables and links. Take them back inside the app. */
.qdss-app--frontend table {
	border-collapse: separate;
	margin: 0;
}

.qdss-app--frontend .qdss-table th,
.qdss-app--frontend .qdss-table td {
	background: transparent;
}

.qdss-app--frontend a {
	box-shadow: none;
}

.qdss-app--frontend .qdss-btn--primary,
.qdss-app--frontend .qdss-btn--primary:hover,
.qdss-app--frontend .qdss-btn--primary:focus {
	color: var(--qdss-on-solid);
	text-decoration: none;
}

.qdss-app--frontend .qdss-btn:hover,
.qdss-app--frontend .qdss-btn:focus {
	text-decoration: none;
}

/*
 * The drawer and modals are fixed-position, so they escape the wrapper cleanly
 * — and with it the app's font, which the site theme would otherwise supply.
 *
 * This block used to re-declare the whole palette here, because the tokens
 * lived on `.qdss-app` and a fixed-position child of <body> is outside it.
 * They live on `:root` now, so the redeclaration is gone: left in place it
 * would have pinned every modal on the public dashboard to the light palette
 * for good, whatever the person had chosen.
 */
body.qdss-lp-frontend .qdss-modal,
body.qdss-lp-frontend .qdss-drawer {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: var(--qdss-ink);
}

@media (max-width: 782px) {
	.qdss-app--frontend {
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}

	.qdss-app--frontend .qdss-main {
		padding: 16px;
	}
}