/**
 * Only what Tailwind utilities cannot express: the full-screen frame, the boot
 * state before React mounts, and a few element-level rules the theme would
 * otherwise win.
 */

html.cadm-fullscreen-html,
body.cadm-fullscreen {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #faf9f7;
	font-family: Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Betheme sizes and greys every bare button globally. The app styles its own,
   so opt out of the theme's opinion rather than out-specifying it everywhere. */
body.cadm-fullscreen button {
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	border-radius: 0;
	box-shadow: none;
}

body.cadm-fullscreen button:hover {
	background-image: none;
}

/* Belt and braces behind strip_site_chrome(): if another plugin prints the
   site chrome by some route we have not hooked, it still must not appear. */
body.cadm-fullscreen .cfc-site-header,
body.cadm-fullscreen .cfc-site-footer,
body.cadm-fullscreen #Wrapper,
body.cadm-fullscreen #Content,
body.cadm-fullscreen #Footer,
body.cadm-fullscreen #Header_wrapper,
body.cadm-fullscreen .mfn-main-slider {
	display: none !important;
}

.cadm-app {
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

/* ------------------------------------------------------------------ boot */

.cadm-boot {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #faf9f7;
}

.cadm-boot-mark {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 3px solid rgba(0, 0, 0, 0.08);
	border-top-color: var(--cadm-brand, #ff0006);
	animation: cadm-spin 0.7s linear infinite;
}

@keyframes cadm-spin {
	to { transform: rotate(360deg); }
}

.cadm-spin { animation: cadm-spin 0.7s linear infinite; }

/* --------------------------------------------------------------- surfaces */

.cadm-scroll {
	scrollbar-width: thin;
	scrollbar-color: #d5d5d5 transparent;
}

.cadm-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.cadm-scroll::-webkit-scrollbar-track { background: transparent; }

.cadm-scroll::-webkit-scrollbar-thumb {
	background: #ddd9d4;
	border: 3px solid transparent;
	border-radius: 10px;
	background-clip: content-box;
}

/* The email preview. An iframe so a template's own CSS cannot leak into the
   manager, and vice versa — the point of the preview is that it renders the way
   a mail client will, not the way this page would. */
.cadm-preview-frame {
	width: 100%;
	border: 0;
	background: #eae8e5;
	border-radius: 12px;
	display: block;
}

/* Tokens are dropped into the wording at the cursor, so they need to read as
   clickable chips rather than as code. */
.cadm-token {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
}

.cadm-body-input {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	line-height: 1.65;
	tab-size: 2;
}

/* Below this the two editor panes cannot both be usable, so they stack. */
@media (max-width: 1180px) {
	.cadm-editor-grid { grid-template-columns: 1fr !important; }
}

/* Toasts arrive rather than appear. */
.cadm-toast {
	animation: cadm-rise 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cadm-rise {
	from { opacity: 0; transform: translate(-50%, 10px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Tailwind's ring utilities need a real offset colour to sit on. */
body.cadm-fullscreen *:focus-visible {
	outline: none;
}