/*
 * Front-end shell.
 *
 * The admin stylesheet assumes it is sitting inside wp-admin: a negative left
 * margin to escape the menu, and a sticky offset for the admin bar. On a
 * public page neither is true, so this undoes both and gives the editor the
 * full width of whatever template it lands in.
 */

.cs-front { width: 100%; }

.cs-front .cs-wrap {
	margin: 0;
	min-height: 100vh;
	border-radius: 0;
}

.cs-front .cs-top { top: 0; }
.cs-front .cs-panel { top: 66px; height: calc(100vh - 66px); }

/* Themes love a global box-sizing or a max-width on descendants; the editor
   needs neither applied to it. */
.cs-front img,
.cs-front video { max-width: none; }
.cs-front .cs-frame video { max-width: 100%; }
.cs-front p { margin: 0 0 12px; }
.cs-front button { text-transform: none; letter-spacing: normal; }

.cs-front--gate .cs-wrap { min-height: 60vh; display: grid; place-items: center; }
.cs-gateform {
	display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
	max-width: 460px; margin: 0 auto;
}
.cs-gateform .cs-lab { width: 100%; text-align: center; }
.cs-gateform .cs-titlefield { flex: 1; min-width: 220px; }

.cs-passtag {
	font-size: 11.5px; color: var(--cs-dim);
	border: 1px solid var(--cs-line); border-radius: 99px; padding: 4px 11px;
	white-space: nowrap;
}

@media (max-width: 960px) {
	.cs-front .cs-wrap { margin-left: 0; }
	.cs-front .cs-top { top: 0; }
	.cs-front .cs-panel { top: auto; height: auto; }
	/* Many mobile themes pin a bottom bar; keep the export button clear of it. */
	.cs-front .cs-editor__main { padding-bottom: 60px; }
}