/*
 * The 2026 redesign ("row D") on top of cosmiteBase.css. Everything not named
 * here is the earlier site: header and footer layout, the em-sized Sun and
 * Moon, the phone breakpoints, and the star canvas. The feature stages, page
 * pieces and the Flare link have their own files: cosmiteStages.css,
 * cosmitePages.css and cosmiteFlare.css.
 */

/* A's night colour behind the star canvas (the canvas clears to the same colour). */
:root { background-color: #0b0822; }

/* Header: today's grid with the comet mark, a Sign In pill and a labelled language button. */
.D-Brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	justify-self: start;
	text-decoration: none;
}
.D-Brand img { display: block; width: 20px; height: auto; }
.SiteHeader-Nav a.D-Current {
	text-decoration: underline;
	text-decoration-color: #c8711c;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
.SiteHeader-Nav a.D-SignIn {
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	background: #16003e;
	color: #ffffff;
	opacity: 1;
}
/* A dark pill, like Sign In: the Sun's white face reaches the window's right
   edge below about 1300px, where a pale button and white globe disappear. */
.SiteHeader-Lang.D-Lang {
	width: auto;
	gap: 0.45rem;
	padding: 0 0.85rem;
	border-radius: 999px;
	background: #16003e;
	border-color: rgba(255, 255, 255, 0.28);
	color: #ffffff;
	opacity: 1;
}
.SiteHeader-Lang.D-Lang:hover { background: #2a0f63; opacity: 1; }
/* The corona pill keeps today's link type; the nav's own rule sets size and colour. */
.SiteHeader-Nav a.FX-D { opacity: 1; }
.D-Lang .Lang-Text { display: inline; font-size: 0.85rem; }
.D-Lang svg { flex: none; }

/* Short pages: keep the Moon on the bottom edge of the window, as on long pages. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
main { flex: 1 0 auto; }
footer { flex: none; }

/* Very wide screens: keep header and footer content beside the Sun and Moon
   (where they sit at 1440 px today) instead of out at the window edges. */
.SiteHeader > .SiteHeader-Buttons-Container { max-width: 1600px; margin: 0 auto; }
.Footer-Bottom { max-width: 1440px; margin: 0 auto; }

/* A wider Sun where the window has room. Below 1700 px it is today's Sun
   (400em, lifted 61%). Wider windows step it up to about a third wider, each
   step lifted a little more so roughly 230-245 px of it still shows. The lift
   stays a percentage of the canvas, as on today's site. Phones keep today's
   own rule. */
@media (min-width: 1700px) {
	.rotating-sun { width: 480em; transform: translate(-50%, -61.45%); }
}
@media (min-width: 2000px) {
	.rotating-sun { width: 540em; transform: translate(-50%, -61.66%); }
}
@media (min-width: 2300px) {
	.rotating-sun { width: 580em; transform: translate(-50%, -61.8%); }
}

/* The comet and nebulae live in the sky with the stars: a fixed layer behind
   the page and the Moon, moved by cosmiteSky.js from the star field's own
   pointer and scroll values. Nothing clips them except the window. */
#D-Sky {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
#D-Sky img {
	position: absolute;
	top: 0;
	display: block;
	height: auto;
	max-width: none;
	will-change: transform;
}

/* Hero: today's stage and animation, with A's type size and pill buttons. */
.D-Hero { padding-bottom: 4rem; }
.D-Eyebrow {
	margin: 0 0 0.5rem;
	color: #ffb15c;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-align: center;
}
.D-Hero .Hero-Stage { width: min(980px, 92%); justify-content: center; }
.D-Hero .Hero-Center { height: clamp(16rem, 30vw, 26rem); }
.D-Hero .Title-Background { width: min(58em, 96vw); }
.D-Hero .Hero-Title {
	font-size: clamp(2.75rem, 6.4vw, 5.75rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: 0.14em;
	text-shadow: 0 0 7px #1d4cda, 0 0 14px #4426b1, 0 0 32px rgba(68, 38, 177, 0.6);
}
.D-Hero-Lead {
	max-width: 36em;
	margin: 1.25rem auto 0;
	padding: 0 1rem;
	color: #cdc8e8;
	font-size: 1.15rem;
	line-height: 1.6;
	text-align: center;
}
.D-Hero .Hero-Buttons { margin-top: 2.25rem; }
.D-Hero .Btn-Download,
.D-Hero .Btn-Browser {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 52px;
	padding: 0 1.6rem;
	border-radius: 999px;
	font-size: 1rem;
	letter-spacing: 0;
}
.D-Hero .Btn-Download { background: #ffffff; color: #140b36; }
.D-Hero .Btn-Download img { display: block; width: auto; height: 18px; }
.D-Hero .Btn-Browser {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: #cdc8e8;
	font-weight: 600;
}
.D-Chip {
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(255, 177, 92, 0.16);
	color: #ffc98a;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.D-Hero-Note {
	margin: 1.1rem 0 0;
	color: #a7a1c8;
	font-size: 0.9rem;
	text-align: center;
}

@media (max-width: 700px) {
	#D-Sky img { opacity: 0.35 !important; }
}
@media (max-width: 480px) {
	.D-Hero .Hero-Title { letter-spacing: 0.1em; }
}

/* The header keeps one row at every width; nothing pushes the nav down.
   - from 900px: brand | nav | English pill (today's grid);
   - 600-899px: the language pill shrinks to its globe;
   - under 600px: brand | Flare | Sign In | menu, with Download, Blog and the
     language in the menu. Download suits a phone least; Flare and Sign In stay. */
.SiteHeader-Nav a { white-space: nowrap; }
.D-MenuButton,
.D-Menu,
.D-Mark { display: none; }
@media (max-width: 899px) {
	.SiteHeader-Nav { gap: 1.25rem; }
	.SiteHeader-Lang.D-Lang { width: 36px; height: 36px; padding: 0; justify-content: center; }
	.D-Lang .Lang-Text,
	.D-Lang .D-Chevron { display: none; }
}
@media (max-width: 599px) {
	.SiteHeader > .SiteHeader-Buttons-Container {
		position: relative;
		display: flex;
		align-items: center;
		gap: 10px;
		height: 64px;
		padding: 0 14px;
	}
	.D-Brand { margin-right: auto; }
	/* The mark replaces the wordmark on phones. */
	.D-Mark { display: block; width: 27px; height: 36px; }
	.D-Brand .SiteHeader-Logo { display: none; }
	.SiteHeader-Nav { gap: 10px; padding: 0; flex-wrap: nowrap; }
	.SiteHeader-Nav a.D-NavDownload,
	.SiteHeader-Nav a.D-NavBlog,
	.SiteHeader-Lang.D-Lang { display: none; }
	.D-MenuButton {
		display: grid;
		place-items: center;
		flex: none;
		width: 36px;
		height: 36px;
		padding: 0;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 0.28);
		background: #16003e;
		color: #ffffff;
		cursor: pointer;
	}
	.D-MenuButton[aria-expanded="true"] { background: #2a0f63; }
	.D-Menu {
		position: absolute;
		top: 60px;
		right: 14px;
		z-index: 40;
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 200px;
		padding: 8px;
		border-radius: 16px;
		background: rgba(22, 12, 52, 0.97);
		border: 1px solid rgba(255, 255, 255, 0.14);
		box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
	}
	.D-Menu[hidden] { display: none; }
	.D-Menu a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 12px;
		border-radius: 10px;
		color: #ffffff;
		font-size: 0.95rem;
		font-weight: 700;
		text-decoration: none;
	}
	.D-Menu a:hover { background: rgba(255, 255, 255, 0.08); }
	.D-MenuLang { border-top: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0 0 10px 10px !important; margin-top: 4px; }
}
@media (max-width: 380px) {
	.SiteHeader-Logo { letter-spacing: 0.04em; }
	.SiteHeader-Nav a.D-SignIn { padding: 0.45rem 0.85rem; }
}

/* The Sun's white face ends about 209px down at every width above phones, but
   the header under it stayed 26em (416px), leaving a tall empty band before the
   page on narrower windows. Shorten it in steps; phones keep today's 16em. */
@media (max-width: 1199px) { .SiteHeader { height: 22em; } }
@media (max-width: 899px) { .SiteHeader { height: 19em; } }
@media (max-width: 480px) { .SiteHeader { height: 16em; } }

/* Narrow footers stack the socials and links, so the Cosmite name joins the
   flow above them instead of floating at a fixed height over the links. */
@media (max-width: 1240px) {
	.Footer-Logo { position: static; }
	.Footer-Brand { padding: 0.5rem 0 0.25rem; }
}

/* Phones: a wider Sun, so its face runs past both edges like the Moon below.
   Today's phone Sun is 130em, lifted 52%; at 200em the lift grows to keep its
   lower edge about where it was. */
@media (max-width: 480px) {
	.rotating-sun { width: 200em; transform: translate(-50%, -56%); }
}
@media (prefers-reduced-motion: reduce) {
	.Title-Background { content: url("../images/Redesign/hero-windows.png"); }
}

/* The Sun's canvas is far taller than what shows of it, and it used to stretch
   the page past the footer on short pages. Clip it just below the end of its
   glow, which fades out about 0.82 of the canvas height down from the canvas
   top (measured: 660px for today's 400em Sun). Each step keeps a margin of
   60px or more below that, so the glow never meets the edge. */
#SunDecor {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 46em;
	overflow: clip;
	pointer-events: none;
}
@media (min-width: 1700px) { #SunDecor { height: 53em; } }
@media (min-width: 2000px) { #SunDecor { height: 58em; } }
@media (min-width: 2300px) { #SunDecor { height: 62em; } }
@media (max-width: 480px) { #SunDecor { height: 28em; } }

/* ==========================================================================
   Live site: the parts the static preview didn't need.
   ========================================================================== */

/* Links in page text: light blue instead of the browser's default blue, which is
   hard to read on the night sky. :where() keeps this weaker than any other rule,
   so buttons, cards and the legal pages keep their own colours. */
.D-Page :where(a:not([class])) { color: #9cc0ff; }
.D-Page :where(a:not([class])):hover { color: #ffffff; }

/* Signed in: Account takes Sign In's pill and Log Out sits beside it. On
   narrower windows the display name and Log Out move into the menu. */
.SiteHeader-Nav a.D-NavLogout { opacity: 0.85; }
.D-MenuName {
	display: block;
	max-width: 240px;
	margin-bottom: 4px;
	padding: 8px 12px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: #a7a1c8;
	font-size: 0.8rem;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* A long display name stops short instead of pushing into the nav. */
.SiteHeader-Right .SiteHeader-DisplayName {
	display: inline-block;
	max-width: 12em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}
/* From 900px the menu is gone, and the name only fits beside Log Out from 1140px. */
@media (max-width: 1139px) {
	.SiteHeader-Right .SiteHeader-DisplayName { display: none; }
}
/* Signed in, the row also holds Account and Log Out, which stop fitting beside
   Download, Flare and Blog below 900px. There the menu takes over sooner:
   Cosmite | Flare | Account | menu (Download, Blog, the name, Log Out, language). */
@media (max-width: 899px) {
	.D-SignedIn .SiteHeader-Nav a.D-NavDownload,
	.D-SignedIn .SiteHeader-Nav a.D-NavBlog,
	.D-SignedIn .SiteHeader-Nav a.D-NavLogout,
	.D-SignedIn .SiteHeader-Right { display: none; }
	.D-SignedIn .D-MenuButton {
		display: grid;
		place-items: center;
		justify-self: end;
		flex: none;
		width: 36px;
		height: 36px;
		padding: 0;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 0.28);
		background: #16003e;
		color: #ffffff;
		cursor: pointer;
	}
	.D-SignedIn .D-MenuButton[aria-expanded="true"] { background: #2a0f63; }
	.D-SignedIn .D-Menu {
		position: absolute;
		top: 60px;
		right: 14px;
		z-index: 40;
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 200px;
		padding: 8px;
		border-radius: 16px;
		background: rgba(22, 12, 52, 0.97);
		border: 1px solid rgba(255, 255, 255, 0.14);
		box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
	}
	.D-SignedIn .D-Menu[hidden] { display: none; }
	.D-SignedIn .D-Menu a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 12px;
		border-radius: 10px;
		color: #ffffff;
		font-size: 0.95rem;
		font-weight: 700;
		text-decoration: none;
	}
	.D-SignedIn .D-Menu a:hover { background: rgba(255, 255, 255, 0.08); }
	.D-SignedIn .D-MenuLang { border-top: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0 0 10px 10px !important; margin-top: 4px; }
}
/* The open menu hangs below the header, over the top of the page. The header's
   z-index (10, under main's 11) makes it a stacking context, so the menu's own
   z-index 40 only counted inside the header, and the page was drawn over the
   menu's lower rows: signed in, the menu is tall enough to reach the page.
   While the menu is open (cosmiteSky.js adds D-MenuOpen), the header drops its
   z-index. The Sun (z-index auto) still paints under main, the buttons row still
   paints over the Sun (source order), and the menu's z-index lifts it over the
   page. Only while open: without the header's stacking context, the wordmark's
   difference blend also sees the stars behind the header, which shifts its
   colour slightly. */
.SiteHeader.D-MenuOpen { z-index: auto; }

/* Log in, Sign up and Contact: the forms the site's scripts build, laid out as
   the redesign's panels. The scripts write a flat list (title, then a header,
   help text, input and error line per field), so the containers step aside
   (display: contents) and the order rules put each help text under its input. */
.AU-Panel { display: flex; flex-direction: column; }
.AU-Panel .account-login-container,
.AU-Panel .account-signup-container,
.CT-Panel .contactUsForm-container { display: contents; }

.AU-Panel .login-title,
.AU-Panel .signup-title {
	order: 0;
	margin: 0 0 28px;
	color: #ffffff;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	-webkit-text-stroke: 0;
}
.AU-Panel .signup-title { margin: 0; font-size: 30px; text-align: left; }
.AU-Switch { order: 1; margin: 8px 0 10px; color: #a7a1c8; font-size: 15px; }
.AU-Switch a { font-weight: 700; }

.AU-Panel .login-field-header,
.AU-Panel .signup-field-header,
.CT-Panel .contactUsForm-FORM-FIELD-HEADER,
.AU-Panel .signup-password.signup-field-errors::after {
	width: auto;
	margin: 18px 0 8px;
	color: #f5f3ff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	-webkit-text-stroke: 0;
}
.AU-Panel .login-username.login-field-header,
.CT-Panel .FullName.contactUsForm-FORM-FIELD-HEADER { margin-top: 0; }
/* The scripts give the repeated password no heading; the panel shows one. */
.AU-Panel .signup-password.signup-field-errors::after {
	content: "Confirm password";
	display: block;
	color: #f5f3ff;
}
.AU-Panel .signup-password.signup-field-errors { display: block; }

.AU-Panel .login-field,
.AU-Panel .signup-field,
.CT-Panel .contactUsForm-FORM-FIELD-INPUT {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	background: rgba(7, 5, 22, 0.72);
	color: #f5f3ff;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
}
.CT-Panel textarea.contactUsForm-FORM-FIELD-INPUT {
	height: auto;
	min-height: 160px;
	padding: 12px 14px;
	line-height: 1.5;
	resize: vertical;
}
.AU-Panel .login-field:focus,
.AU-Panel .signup-field:focus,
.CT-Panel .contactUsForm-FORM-FIELD-INPUT:focus {
	outline: 2px solid rgba(255, 177, 92, 0.7);
	outline-offset: 1px;
}

.AU-Panel .login-field-info,
.AU-Panel .signup-field-info,
.CT-Panel .contactUsForm-FORM-FIELD-INFO {
	width: auto;
	margin: 8px 0 0;
	color: #a7a1c8;
	font-size: 13px;
	line-height: 1.5;
	opacity: 1;
}
.AU-Panel .login-field-errors,
.AU-Panel .signup-field-errors,
.CT-Panel .contactUsForm-FORM-FIELD-ERRORS {
	width: auto;
	margin: 6px 0 0;
	color: #ff8a8a;
	font-size: 13px;
	line-height: 1.5;
}
.AU-Panel .login-field-info:empty,
.AU-Panel .signup-field-info:empty,
.CT-Panel .contactUsForm-FORM-FIELD-INFO:empty,
.AU-Panel .login-field-errors:empty,
.AU-Panel .signup-field-errors:empty:not(.signup-password),
.CT-Panel .contactUsForm-FORM-FIELD-ERRORS:empty { display: none; }

/* Field order: header, input, help text, errors. */
.AU-Panel .login-username.login-field-header { order: 10; }
.AU-Panel .login-username.login-field { order: 11; }
.AU-Panel .login-username.login-field-info { order: 12; }
.AU-Panel .login-username.login-field-errors { order: 13; }
.AU-Panel .login-password.login-field-header { order: 20; }
.AU-Panel .login-password.login-field { order: 21; }
.AU-Panel .login-password.login-field-info { order: 22; }
.AU-Panel .login-password.login-field-errors { order: 23; }
.AU-Panel .login-button-login { order: 30; }
.AU-Panel .account-login-container > div { order: 31; }
.AU-Panel #dont-have-account { order: 40; }

.AU-Panel .signup-username.signup-field-header { order: 10; }
.AU-Panel .signup-username.signup-field { order: 11; }
.AU-Panel .signup-username.signup-field-info { order: 12; }
.AU-Panel .signup-username.signup-field-errors { order: 13; }
.AU-Panel .signup-password.signup-field-header { order: 20; }
.AU-Panel .signup-password.signup-field { order: 21; }
.AU-Panel .signup-password.signup-field-info { order: 22; }
.AU-Panel .signup-password.signup-field-errors { order: 23; }
.AU-Panel .signup-password-repeat.signup-field { order: 31; }
.AU-Panel .signup-password-repeat.signup-field-info { order: 32; }
.AU-Panel .signup-password-repeat.signup-field-errors { order: 33; }
.AU-Panel .signup-email.signup-field-header { order: 40; }
.AU-Panel .signup-email.signup-field { order: 41; }
.AU-Panel .signup-email.signup-field-info { order: 42; }
.AU-Panel .signup-email.signup-field-errors { order: 43; }
.AU-Panel .signup-display-name.signup-field-header { order: 50; }
.AU-Panel .signup-display-name.signup-field { order: 51; }
.AU-Panel .signup-display-name.signup-field-info { order: 52; }
.AU-Panel .signup-display-name.signup-field-errors { order: 53; }
.AU-Panel .account-signup-container > div { order: 62; }
.AU-Panel .signup-button-wrapper { order: 60; }
.AU-Panel .signup-button-create-account { order: 61; }
.AU-Panel .signup-legal-notice { order: 70; }

.AU-Panel .login-button-login,
.AU-Panel .signup-button-create-account,
.CT-Panel .contactUsForm-SUBMITBUTTON {
	align-self: stretch;
	width: 100%;
	min-height: 52px;
	margin-top: 26px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: #ffffff;
	color: #140b36;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.AU-Panel .login-widget-status-message,
.AU-Panel .signup-widget-status-message,
.CT-Panel .contactUsForm-FORM-STATUS {
	display: block;
	margin-top: 14px;
	color: #f5f3ff;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}
.CT-Panel .contactUsForm-FORM-STATUS:empty { display: none; }
.AU-Panel #dont-have-account p {
	margin: 20px 0 0;
	color: #cdc8e8;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	-webkit-text-stroke: 0;
}
.AU-Panel #dont-have-account a { font-weight: 700; }
.AU-Panel .signup-legal-notice {
	margin: 18px 0 0;
	color: #a7a1c8;
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
}
/* The redesign's notice box replaces today's centred note. */
.D-Page .login-reset-notice {
	max-width: none;
	margin-right: 0;
	margin-left: 0;
	opacity: 1;
	text-align: left;
	line-height: 1.6;
}

/* Contact: the page title sits in the left column instead of over the form. */
.CT-Panel .contactUsForm-PageHeader { display: none; }
.CT-Panel .contactUsForm-FORMCONTAINER { gap: 0; max-width: none; }

/* Blog: the page title shares the top row with the list's Filter and Search,
   and the empty list shows the drifting comet. */
.BL-Page {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	column-gap: 24px;
	max-width: 1100px;
	margin: 0 auto;
}
.BL-Page .blog-editor-container,
.BL-Page .Blog-Wrap { display: contents; }
.BL-Page > *,
.BL-Page .Blog-Wrap > * { grid-column: 1 / -1; }
.BL-Page > .BL-Title {
	grid-row: 1;
	grid-column: 1;
	margin: 0;
	color: #ffffff;
	font-size: clamp(34px, 4.4vw, 58px);
	line-height: 1.08;
	font-weight: 800;
}
.BL-Page .Blog-Wrap > .Blog-Controls {
	grid-row: 1;
	grid-column: 2;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	margin: 0;
	font-size: 15px;
}
.BL-Page .Blog-Featured,
.BL-Page .Blog-Empty { margin-top: 40px; }
.BL-Page .Blog-Editor-Bar { max-width: none; padding: 24px 0 0; }
.BL-Page .Blog-Filter,
.BL-Page .Blog-Search {
	box-sizing: border-box;
	gap: 10px;
	height: 48px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	background: rgba(11, 8, 34, 0.72);
	color: #f5f3ff;
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 600;
}
.BL-Page .Search-Input {
	width: 200px;
	max-width: 100%;
	color: #f5f3ff;
	font-size: 15px;
}
.BL-Page .Search-Input::placeholder { color: #a7a1c8; }
.BL-Page .Search-Icon,
.BL-Page .Filter-Arrow { color: #cdc8e8; }
.BL-Page .Blog-Empty {
	padding: 72px 24px !important;
	border-radius: 24px;
	border: 1px dashed rgba(255, 255, 255, 0.2);
	background: rgba(11, 8, 34, 0.55);
	color: #ffffff;
	font-size: 20px !important;
	font-weight: 700;
	opacity: 1 !important;
	text-align: center;
}
.BL-Page .Blog-Empty::before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto 18px;
	background: url("../images/Redesign/comet.png") center / contain no-repeat;
	filter: drop-shadow(0 0 14px rgba(120, 165, 232, 0.6));
	animation: bl-drift 6s ease-in-out infinite;
}
.BL-Page .Blog-Pagination { margin-top: 8px; font-size: 15px; }
.BL-Page .Page-Btn,
.BL-Page .Page-Num { font-size: 15px; border-radius: 999px; border-width: 1px; }
@media (max-width: 700px) {
	.BL-Page { grid-template-columns: minmax(0, 1fr); }
	.BL-Page .Blog-Wrap > .Blog-Controls { grid-row: auto; grid-column: 1; justify-content: flex-start; margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.BL-Page .Blog-Empty::before { animation: none; }
}

/* Server Status, live: the banner and the states it can show. */
.ST-Banner.ST-Trouble {
	background: rgba(255, 195, 92, 0.1);
	border-color: rgba(255, 195, 92, 0.45);
}
.ST-Banner.ST-Trouble .ST-Pulse { background: #ffc35c; }
.ST-Banner.ST-Trouble .ST-Pulse::after { animation: none; }
.ST-Banner.ST-Trouble span { color: #f1dcc3; }
.ST-State.ST-Down { color: #ff6b6b; }
.ST-Note { margin: 20px 0 0; color: #a7a1c8; font-size: 14px; line-height: 1.6; }

/* Open in Browser (round 16): the homepage's button goes to the browser version at app.cosmite.chat.
   cosmiteBase.css still draws .Btn-Browser as a disabled button, so the hero's says otherwise. */
.D-Hero .Btn-Browser { cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.D-Hero .Btn-Browser:hover, .D-Hero .Btn-Browser:focus-visible { border-color: rgba(255, 255, 255, 0.6); color: #ffffff; }

/* Support (round 19): a reply from Cosmite Support that the account hasn't opened puts a dot on
   Account in the header (main/templatetags/support_tags.py). The words beside it are for screen
   readers only. */
.SiteHeader-Nav a.D-SignIn.D-HasReply { position: relative; }
.D-ReplyDot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: #ffb15c; box-shadow: 0 0 0 3px #16003e; pointer-events: none; }
.D-ScreenReader { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The account page's Support card (round 19), under the profile and subscriptions. */
.AC-SupportCard { margin-top: 28px; }
.AC-SupportNews { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; color: #ffc98a; font-size: 14px; font-weight: 700; }
.AC-SupportDot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ffb15c; box-shadow: 0 0 0 4px rgba(255, 177, 92, 0.18); }