/* QuestDreams — wrapper styles for the Oneiros dream atlas ([qdream_atlas]).
   The design brings its own styles (its <helmet>, injected at runtime); these
   only fit it into a WordPress page: above the theme's header, without the
   admin bar, plus the loading/error states and the visitor demo banner.
   This file only loads on pages that render the atlas.
   Colors and fonts come from the --qdream-* tokens in qdream-frontend.css
   (loaded first), so re-skinning the site re-skins these too.
   File version: 01.04.00 */

/* No admin bar on the atlas: Qdream_Journal usually stops WordPress printing
   it, and this catches pages that check misses. Zeroing the height token also
   drops the offsets below (and Divi's) that make room for the bar. */
:root {
	--wp-admin--admin-bar--height: 0px !important;
}

html:root {
	margin-top: 0 !important;
}

#wpadminbar {
	display: none !important;
}

.qdream-atlas {
	position: fixed;
	inset: 0;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 99990;
	background: var(--qdream-surface);
	font-family: var(--qdream-font-body);
	/* The theme sets body line-height in em, which inherits as a fixed ~24px
	   and stretched every line of the design (the level badge grew into the
	   search bar on phones). Restore the browser defaults the design is built on. */
	font-size: 16px;
	line-height: normal;
}

/* The design's root is position:fixed; inset:0 — keep it clear of the admin bar. */
.qdream-atlas > div:first-child {
	top: var(--wp-admin--admin-bar--height, 0px) !important;
}

/* The theme (Divi) colours headings and form fields globally — dark grey text
   on white fields — which out-ranks the design's inherited light ink and left
   the draft title/text and the selected star's title unreadable on the dark
   panels. The #id keeps these ahead of theme selectors; they are not
   !important, so any colour or background the design sets inline still wins. */
#qdream-atlas h1,
#qdream-atlas h2,
#qdream-atlas h3,
#qdream-atlas h4,
#qdream-atlas h5,
#qdream-atlas h6 {
	color: inherit;
	font-family: inherit;
	padding: 0;
}

#qdream-atlas input,
#qdream-atlas textarea,
#qdream-atlas select {
	color: inherit;
	caret-color: currentColor;
	font-family: inherit;
	background-color: transparent;
	box-shadow: none;
}

#qdream-atlas input:focus,
#qdream-atlas textarea:focus,
#qdream-atlas select:focus {
	color: inherit;
	background-color: transparent;
}

#qdream-atlas select option {
	background: #100d1c;
}

.qdream-atlas-loading,
.qdream-atlas-error {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	color: var(--qdream-ink-muted);
	font: 13px/1.5 var(--qdream-font-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.qdream-atlas-loading {
	animation: qdream-atlas-pulse 1.6s ease-in-out infinite;
}

@keyframes qdream-atlas-pulse {
	0%, 100% { opacity: .45; }
	50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.qdream-atlas-loading { animation: none; }
}

.qdream-atlas-demo {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 99995;
	max-width: calc(100% - 32px);
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--qdream-border);
	background: color-mix(in srgb, var(--qdream-footer-bg) 85%, transparent);
	color: var(--qdream-ink-soft);
	font: 13px/1.4 var(--qdream-font-body);
	text-align: center;
	text-decoration: none;
	backdrop-filter: blur(8px);
}

.qdream-atlas-demo strong {
	color: var(--qdream-accent);
	font-weight: 600;
}

.qdream-atlas-demo:hover,
.qdream-atlas-demo:focus-visible {
	border-color: color-mix(in srgb, var(--qdream-accent) 60%, transparent);
	color: var(--qdream-ink);
}

.qdream-atlas-signin {
	max-width: 480px;
	margin: 48px auto;
	padding: 32px;
	text-align: center;
	border: 1px solid var(--qdream-border);
	border-radius: 10px;
}

.qdream-atlas-signin p {
	margin: 0 0 20px;
	color: var(--qdream-ink-soft);
}