/*
Theme Name: PrettyCoolApp
Theme URI: https://pretty.cool/
Author: Pretty Cool
Author URI: https://getprettycool.com/
Description: The Pretty Cool app for pretty.cool. The Create My Site form on the front page, and a mobile-first dashboard where creators manage their designs, domains, catalog and newsletter. Built on WooCommerce My Account and the Static Site Gen plugin, in the same pink, sky blue and ink as the PrettyCool marketing theme.
Version: 1.0.13
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prettycoolapp
Tags: e-commerce, one-column, custom-logo, accessibility-ready, translation-ready
*/

/* --------------------------------------------------------------
 * Contents
 * 1.  Tokens
 * 2.  Base
 * 3.  Shell: header, account menu
 * 4.  Shell: tab bar and menu sheet
 * 5.  Screens and headings
 * 6.  Buttons, chips and badges
 * 7.  Auth screen, front page and Create My Site
 * 8.  Designs dashboard
 * 9.  Empty states and plain pages
 * 10. Desktop
 * 11. Motion
 *
 * Mobile first: everything outside §10 is the phone layout.
 * ------------------------------------------------------------ */

/* 1. Tokens
 * The PrettyCool palette and faces, with the marketing theme's 3px outlines
 * and big offset shadows turned down for a screen people work in all day.
 * ------------------------------------------------------------ */

:root {
	--pc-pink: #ff4d9d;
	--pc-pink-dark: #e62e82;
	--pc-pink-darker: #b91f65;
	--pc-pink-200: #ffc7e0;
	--pc-pink-100: #ffe0ee;
	--pc-pink-50: #fff2f8;
	--pc-sky: #6cd0ff;
	--pc-sky-dark: #39c0ff;
	--pc-sky-darker: #0088c8;
	--pc-sky-200: #a9e4ff;
	--pc-sky-100: #c8edff;
	--pc-sky-50: #e6f7ff;
	--pc-ink: #101014;
	--pc-ink-70: #4a4a52;
	--pc-ink-40: #8b8b94;
	--pc-ink-10: #e7e7ea;
	--pc-white: #ffffff;
	--pc-bg: #fffdfe;
	--pc-night: #05060f;

	--pc-line: 2px solid var(--pc-ink);
	--pc-line-thin: 2px solid var(--pc-ink);
	--pc-line-soft: 1px solid var(--pc-ink-10);
	--pc-shadow: 3px 3px 0 var(--pc-ink);
	--pc-shadow-sm: 2px 2px 0 var(--pc-ink);
	--pc-shadow-lg: 5px 5px 0 var(--pc-ink);
	--pc-shadow-sky: 3px 3px 0 var(--pc-sky);
	--pc-shadow-pink: 3px 3px 0 var(--pc-pink);

	/* Type steps, used by the site generator's styles (assets/css/ssg.css). */
	--pc-step--1: 0.875rem;
	--pc-step-0: 1rem;
	--pc-step-1: 1.25rem;
	--pc-step-2: 1.5rem;
	--pc-space-sm: 1rem;
	--pc-space-md: 1.5rem;

	--pc-radius-sm: 10px;
	--pc-radius: 16px;
	--pc-radius-lg: 22px;
	--pc-radius-pill: 999px;

	--pc-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--pc-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--pc-font-hero: "Plus Jakarta Sans", var(--pc-font-body);

	--app-header-h: 56px;
	--app-tabbar-h: 64px;
	--app-gutter: 16px;
	--app-width: 66rem;

	--pc-ease-bounce: cubic-bezier(0.2, 1.6, 0.4, 1);
	--pc-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Base
 * ------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background-color: var(--pc-bg);
	color: var(--pc-ink);
	font-family: var(--pc-font-body);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--pc-pink-dark);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--pc-ink);
}

:focus-visible {
	outline: 3px solid var(--pc-pink);
	outline-offset: 2px;
	border-radius: 4px;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	font-family: var(--pc-font-display);
	font-weight: 800;
	font-variation-settings: "SOFT" 60, "WONK" 0;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

p {
	margin: 0 0 1em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

.screen-reader-text {
	position: absolute !important;
	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;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 0.6rem 1rem;
	clip: auto;
	clip-path: none;
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius-sm);
	color: var(--pc-ink);
	font-weight: 700;
}

.app-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

/* 3. Shell: header, account menu
 * ------------------------------------------------------------ */

.app-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	border-bottom: var(--pc-line);
	padding-top: env(safe-area-inset-top);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
}

/* Below WordPress's toolbar for logged in staff. The toolbar scrolls away
 * under 600px, so the header sticks to the top there. */
@media (min-width: 601px) {
	.admin-bar .app-header { top: 46px; }
}

@media (min-width: 783px) {
	.admin-bar .app-header { top: 32px; }
}

.app-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: var(--app-header-h);
	max-width: var(--app-width);
	margin: 0 auto;
	padding: 0 var(--app-gutter);
}

.app-brand {
	flex: 0 0 auto;
	margin-right: auto;
}

.app-brand .site-title {
	margin: 0;
	font-family: var(--pc-font-display);
	font-size: 1.3125rem;
	font-weight: 900;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	line-height: 1;
	letter-spacing: -0.03em;
}

.app-brand .site-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	color: var(--pc-ink);
	text-decoration: none;
}

.app-brand .custom-logo {
	max-height: 32px;
	width: auto;
}

.pc-brand-mark {
	display: inline-block;
	line-height: 0;
}

.pc-sparkle path {
	fill: var(--pc-sky);
	stroke: var(--pc-ink);
}

.site-title__mark { color: var(--pc-pink); }
.site-title__mark--sky { color: var(--pc-sky-darker); }

.app-brand a:hover .site-title__mark { color: var(--pc-pink-dark); }
.app-brand a:hover .site-title__mark--sky { color: var(--pc-ink); }

/* Header links and the account menu are desktop only; see §10. */
.app-nav--header,
.app-account {
	display: none;
}

.app-avatar {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: var(--pc-line);
	border-radius: 50%;
	background: var(--pc-pink-100);
	color: var(--pc-ink);
	font-family: var(--pc-font-display);
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1;
}

.app-avatar--lg {
	width: 44px;
	height: 44px;
	font-size: 1.25rem;
}

.app-whoami {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.25rem 0.25rem 0.875rem;
	margin-bottom: 0.5rem;
	border-bottom: var(--pc-line-soft);
}

.app-whoami__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	line-height: 1.3;
}

.app-whoami__text strong,
.app-whoami__text span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-whoami__text span {
	color: var(--pc-ink-70);
	font-size: 0.875rem;
}

/* The AI Studio balance, under the email. */
.app-whoami__text .app-whoami__tokens {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.3rem;
	max-width: 100%;
	margin-top: 0.375rem;
	padding: 0.125rem 0.5rem;
	border-radius: var(--pc-radius-pill);
	background: var(--pc-pink-50);
	color: var(--pc-pink-darker);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
}

.app-whoami__text a.app-whoami__tokens:hover {
	background: var(--pc-pink-100);
}

.app-whoami__tokens .app-icon {
	flex: 0 0 auto;
}

.app-whoami__text .app-whoami__tokens span {
	color: inherit;
	font-size: inherit;
}

/* A vertical list of menu links: the sheet and the account dropdown. */
.app-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.app-menu a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border-radius: var(--pc-radius-sm);
	color: var(--pc-ink);
	font-weight: 600;
	text-decoration: none;
}

.app-menu a:hover {
	background: var(--pc-sky-50);
}

.app-menu a[aria-current="page"] {
	background: var(--pc-pink-50);
	color: var(--pc-pink-darker);
}

.app-menu .app-icon {
	flex: 0 0 auto;
	color: var(--pc-ink-70);
}

.app-menu a[aria-current="page"] .app-icon {
	color: var(--pc-pink-dark);
}

.app-menu .app-nav__item--customer-logout {
	margin-top: 0.25rem;
	padding-top: 0.25rem;
	border-top: var(--pc-line-soft);
}

/* A <details> dropdown: Support and More in the header bar, and the bell. */
.app-drop {
	position: relative;
	flex: 0 0 auto;
}

.app-drop > summary {
	list-style: none;
	cursor: pointer;
}

.app-drop > summary::-webkit-details-marker {
	display: none;
}

.app-drop__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 15rem;
	padding: 0.5rem;
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-lg);
}

/* The notifications bell, on every screen size. */
.app-notify__toggle {
	position: relative;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--pc-ink-70);
}

.app-notify__toggle:hover,
.app-notify[open] .app-notify__toggle {
	background: var(--pc-sky-50);
	color: var(--pc-ink);
}

.app-notify__badge {
	position: absolute;
	top: 1px;
	right: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border: 2px solid var(--pc-white);
	border-radius: var(--pc-radius-pill);
	background: var(--pc-pink);
	color: var(--pc-white);
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 14px;
	text-align: center;
}

.app-notify__panel {
	width: min(20rem, calc(100vw - 2 * var(--app-gutter)));
	padding: 0.75rem;
}

.app-notify__title {
	margin: 0 0.25rem 0.5rem;
	font-weight: 800;
}

.app-notify__list {
	max-height: 60vh;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
}

.app-notify__link {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: var(--pc-radius-sm);
	color: var(--pc-ink);
	font-size: 0.9375rem;
	text-decoration: none;
}

a.app-notify__link:hover {
	background: var(--pc-sky-50);
}

.app-notify__item--unread .app-notify__link {
	background: var(--pc-pink-50);
	font-weight: 600;
}

.app-notify__link .app-icon {
	flex: 0 0 auto;
	color: var(--pc-ink-70);
}

.app-notify__text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.app-notify__text time {
	color: var(--pc-ink-70);
	font-size: 0.8125rem;
	font-weight: 400;
}

.app-notify__empty {
	margin: 0;
	padding: 1rem 0.25rem 0.75rem;
	color: var(--pc-ink-70);
	font-size: 0.9375rem;
	text-align: center;
}

/* 4. Shell: tab bar and menu sheet
 * ------------------------------------------------------------ */

.app-tabbar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 50;
	display: flex;
	background: var(--pc-white);
	border-top: var(--pc-line);
	padding-bottom: env(safe-area-inset-bottom);
}

.app-tabbar__list {
	display: flex;
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.app-tabbar__list li {
	flex: 1 1 0;
	min-width: 0;
}

.app-tabbar a,
.app-tabbar__menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 100%;
	height: var(--app-tabbar-h);
	padding: 0 2px;
	background: none;
	border: 0;
	color: var(--pc-ink-70);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
}

.app-tabbar a span,
.app-tabbar__menu span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-tabbar__menu {
	flex: 1 1 0;
	min-width: 0;
}

/* The icon sits in a pill that fills pink on the current tab. */
.app-tabbar .app-icon {
	box-sizing: content-box;
	padding: 3px 14px;
	border: 2px solid transparent;
	border-radius: var(--pc-radius-pill);
	transition: background-color 0.15s var(--pc-ease);
}

.app-tabbar a[aria-current="page"] {
	color: var(--pc-ink);
}

.app-tabbar a[aria-current="page"] .app-icon {
	background: var(--pc-pink-100);
	border-color: var(--pc-ink);
	color: var(--pc-pink-darker);
}

.app-tabbar a:active .app-icon,
.app-tabbar__menu:active .app-icon {
	background: var(--pc-sky-100);
}

/* Lift the Live Chat plugin's floating launcher above the tab bar, where it
 * would otherwise sit on the Menu tab. Open on a small phone the widget goes
 * full screen (inset: 0), so only the closed state moves. §10 undoes this on
 * desktop, where there is no tab bar. */
.app--signed-in #live-chat:not(.lc--open) {
	bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom) + 12px);
}

.app--signed-in #live-chat:not(.lc--open) .lc-panel {
	height: min(600px, calc(100vh - 200px));
}

.app-sheet {
	width: 100%;
	max-width: 32rem;
	max-height: min(85vh, 40rem);
	margin: auto auto 0;
	padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
	overflow-y: auto;
	background: var(--pc-white);
	border: var(--pc-line);
	border-bottom: 0;
	border-radius: var(--pc-radius-lg) var(--pc-radius-lg) 0 0;
	color: var(--pc-ink);
}

.app-sheet::backdrop {
	background: rgba(16, 16, 20, 0.45);
}

.app-sheet[open] {
	animation: app-sheet-in 0.22s var(--pc-ease);
}

@keyframes app-sheet-in {
	from { transform: translateY(24px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.app-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.app-sheet__title {
	margin: 0;
	font-size: 1.25rem;
}

.app-sheet__heading {
	margin: 0.75rem 0.75rem 0.25rem;
	color: var(--pc-ink-40);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.app-icon-button {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: 50%;
	color: var(--pc-ink);
	cursor: pointer;
}

.app-icon-button:hover {
	background: var(--pc-sky-100);
}

/* 5. Screens and headings
 * ------------------------------------------------------------ */

.app-main {
	flex: 1 0 auto;
	width: 100%;
	max-width: var(--app-width);
	margin: 0 auto;
	padding: 1.25rem var(--app-gutter) 2rem;
}

/* Room for the tab bar, so the last card is never stuck under it. */
.app--signed-in .app-shell {
	padding-bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom));
}

.app-page-head {
	margin-bottom: 1.25rem;
}

.app-page-head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem 1rem;
}

.app-page-title {
	margin: 0;
	font-size: 1.75rem;
}

.app-eyebrow {
	margin: 0 0 0.25rem;
	color: var(--pc-pink-dark);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.app-summary {
	margin: -0.5rem 0 1rem;
	color: var(--pc-ink-70);
	font-size: 0.9375rem;
}

.app-section-title {
	margin: 2rem 0 0.75rem;
	font-size: 1.25rem;
}

.app-footer {
	width: 100%;
	max-width: var(--app-width);
	margin: 0 auto;
	padding: 0 var(--app-gutter) 1.25rem;
	color: var(--pc-ink-40);
	font-size: 0.8125rem;
	text-align: center;
}

.app-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem 1.5rem;
	padding-top: 1rem;
	border-top: var(--pc-line-soft);
}

.app-footer__credit {
	margin: 0;
}

.app-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.app-footer__menu a {
	color: var(--pc-ink-70);
	font-weight: 600;
	text-decoration: none;
}

.app-footer__menu a:hover,
.app-footer__menu .current-menu-item > a {
	color: var(--pc-pink-dark);
}

.app-footer .pc-recaptcha-note {
	margin-top: 0.75rem;
}

/* The badge is hidden because this line is shown instead; Google's terms
 * allow it. See inc/recaptcha.php. */
.grecaptcha-badge {
	visibility: hidden;
}

.pc-recaptcha-note {
	max-width: 26rem;
	margin: 0 auto;
	color: var(--pc-ink-40);
	font-size: 0.75rem;
	line-height: 1.5;
}

.pc-recaptcha-note a {
	color: var(--pc-ink-70);
}

/* 6. Buttons, chips and badges
 * ------------------------------------------------------------ */

.app-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.6rem 1.15rem;
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius-pill);
	box-shadow: var(--pc-shadow);
	color: var(--pc-ink);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s var(--pc-ease-bounce), box-shadow 0.15s var(--pc-ease-bounce), background-color 0.15s var(--pc-ease);
}

.app-button:hover {
	background: var(--pc-sky-100);
	color: var(--pc-ink);
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--pc-ink);
}

.app-button:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--pc-ink);
}

.app-button--primary {
	background: var(--pc-pink);
	color: var(--pc-white);
}

.app-button--primary:hover {
	background: var(--pc-pink-dark);
	color: var(--pc-white);
}

.app-button--block {
	width: 100%;
}

.app-button--sm {
	min-height: 36px;
	padding: 0.35rem 0.9rem;
	font-size: 0.875rem;
	box-shadow: 2px 2px 0 var(--pc-ink);
}

.app-header__login {
	flex: 0 0 auto;
}

.app-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 36px;
	padding: 0.35rem 0.8rem;
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius-pill);
	color: var(--pc-ink);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.app-chip:hover {
	background: var(--pc-sky-100);
	color: var(--pc-ink);
}

.app-chip .app-icon {
	color: var(--pc-ink-70);
}

.app-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.6rem;
	border: var(--pc-line);
	border-radius: var(--pc-radius-pill);
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.3;
	white-space: nowrap;
}

.app-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.app-badge--live { background: var(--pc-sky-100); color: var(--pc-ink); }
.app-badge--live::before { background: #16a34a; }
.app-badge--working { background: var(--pc-white); color: var(--pc-ink-70); }
.app-badge--working::before { background: var(--pc-sky-dark); animation: app-pulse 1.2s ease-in-out infinite; }
.app-badge--failed { background: var(--pc-pink-50); color: var(--pc-pink-darker); }

@keyframes app-pulse {
	50% { opacity: 0.3; }
}

/* 7. Auth screen
 * ------------------------------------------------------------ */

.app--auth,
.app--home,
.app--create {
	background-image:
		radial-gradient(var(--pc-pink-100) 1.5px, transparent 1.6px),
		radial-gradient(var(--pc-sky-100) 1.5px, transparent 1.6px);
	background-size: 26px 26px, 26px 26px;
	background-position: 0 0, 13px 13px;
	background-attachment: fixed;
}

.app-main--auth {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: clamp(1.5rem, 6vh, 4rem);
}

.app-main--auth > .woocommerce {
	width: 100%;
	max-width: 26rem;
}

.auth {
	width: 100%;
	max-width: 26rem;
	margin: 0 auto;
}

.auth__intro {
	margin-bottom: 1.5rem;
	text-align: center;
}

.auth__mark {
	display: inline-block;
	margin-bottom: 0.75rem;
	animation: pc-float 4s ease-in-out infinite;
}

@keyframes pc-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-6px) rotate(8deg); }
}

.auth__title {
	margin: 0 0 0.5rem;
	font-size: 1.875rem;
	font-weight: 900;
	font-variation-settings: "SOFT" 80, "WONK" 1;
}

.auth__lede {
	margin: 0 auto;
	max-width: 22rem;
	color: var(--pc-ink-70);
}

.auth-card {
	padding: 1.25rem;
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius-lg);
	box-shadow: var(--pc-shadow-lg);
}

/* Segmented switch between the two forms. */
.auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin-bottom: 1.25rem;
	padding: 4px;
	background: var(--pc-pink-50);
	border: var(--pc-line);
	border-radius: var(--pc-radius-pill);
}

.auth-tabs[hidden] {
	display: none;
}

.auth-tabs button {
	min-height: 40px;
	padding: 0.4rem 0.75rem;
	background: none;
	border: 2px solid transparent;
	border-radius: var(--pc-radius-pill);
	color: var(--pc-ink-70);
	font-weight: 700;
	cursor: pointer;
}

.auth-tabs button[aria-selected="true"] {
	background: var(--pc-white);
	border-color: var(--pc-ink);
	color: var(--pc-ink);
	box-shadow: 2px 2px 0 var(--pc-ink);
}

/* With tabs the tab names the form; without script each form has its title. */
.has-tabs .auth-panel__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.auth-panel__title {
	font-size: 1.25rem;
}

.auth-panel + .auth-panel {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: var(--pc-line-soft);
}

.has-tabs .auth-panel + .auth-panel {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.auth-panel[hidden] {
	display: none;
}

.auth-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.auth-row__link {
	font-size: 0.875rem;
	font-weight: 600;
}

.auth-hint {
	color: var(--pc-ink-70);
	font-size: 0.875rem;
}

.auth__outro {
	margin: 1.5rem 0 0;
	text-align: center;
	font-size: 0.9375rem;
}

.auth__outro a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--pc-ink-70);
	font-weight: 600;
}

.auth__outro a:hover {
	color: var(--pc-pink-dark);
}

/* Front page hero: a full-screen night sky, drawn with three.js by
 * assets/js/hero-space.js over a CSS painting of the same sky (shown until
 * the canvas is ready, and instead of it without WebGL), under the
 * headline, the site search and a line to Create My Site. The header floats
 * over it in white. */

.app--home .app-shell {
	position: relative;
}

.app--home .app-header,
.admin-bar.app--home .app-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background: transparent;
	border-bottom: 0;
	color: var(--pc-white);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.app--home .app-header__inner {
	height: calc(var(--app-header-h) + 1rem);
	max-width: none;
	padding: 0 clamp(var(--app-gutter), 4.5vw, 4.5rem);
}

/* Doubled up to outrank the desktop size in §10. */
.app-brand .site-title.site-title--hero {
	font-family: var(--pc-font-hero);
	font-size: clamp(1.625rem, 1.25rem + 1vw, 2.125rem);
	font-weight: 800;
	font-variation-settings: normal;
	letter-spacing: -0.04em;
}

.app-brand .site-title--hero a {
	gap: 0;
	color: var(--pc-white);
}

.app-brand .site-title--hero a:hover {
	color: var(--pc-white);
}

.site-title--hero a:hover .site-title__dot {
	color: var(--pc-pink);
}

/* The guest menu (template-parts/home-menu.php). */
.home-menu__toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-right: -8px;
	border-radius: 50%;
	color: var(--pc-white);
}

.home-menu__toggle:hover,
.home-menu[open] .home-menu__toggle {
	background: rgba(255, 255, 255, 0.12);
}

.home-menu .app-drop__panel {
	top: calc(100% + 6px);
}

/* A signed-in creator's bell and menus, in white over the sky. */
.app--home .app-notify__toggle,
.app--home .app-account__toggle {
	color: rgba(255, 255, 255, 0.85);
}

.app--home .app-notify__toggle:hover,
.app--home .app-notify[open] .app-notify__toggle {
	background: rgba(255, 255, 255, 0.12);
	color: var(--pc-white);
}

.app--home .app-notify__badge {
	border-color: var(--pc-night);
}

/* Doubled up to outrank the desktop padding in §10. */
.app-main.app-main--home {
	max-width: none;
	padding: 0;
}

.home__body {
	max-width: var(--app-width);
	margin: 0 auto;
	padding: 2.5rem var(--app-gutter) 2rem;
}

.home-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: max(34rem, 100vh);
	min-height: max(34rem, 100svh);
	padding: calc(var(--app-header-h) + 2.5rem) var(--app-gutter) 0;
	overflow: hidden;
	background: var(--pc-night);
	color: var(--pc-white);
	font-family: var(--pc-font-hero);
}

/* Clear of the tab bar on a signed-in phone, so the bottom line shows. */
.app--signed-in .home-hero {
	min-height: max(30rem, calc(100vh - var(--app-tabbar-h)));
	min-height: max(30rem, calc(100svh - var(--app-tabbar-h) - env(safe-area-inset-bottom)));
}

.home-hero :focus-visible {
	outline-color: var(--pc-sky);
}

.home-hero__sky {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle 140vh at 122% 178%, #070a14 99.3%, rgba(150, 205, 255, 0.95) 99.6%, rgba(70, 130, 255, 0.35) 100.6%, transparent 104%),
		radial-gradient(ellipse 9% 8% at 76% 73%, rgba(255, 200, 140, 0.8), transparent 70%),
		radial-gradient(ellipse 22% 18% at 13% 50%, rgba(255, 150, 70, 0.75), transparent 70%),
		radial-gradient(ellipse 38% 55% at 8% 52%, rgba(214, 32, 140, 0.62), transparent 72%),
		radial-gradient(ellipse 55% 40% at 32% 98%, rgba(150, 40, 190, 0.55), transparent 72%),
		radial-gradient(ellipse 14% 16% at 88% 22%, rgba(255, 130, 210, 0.55), transparent 72%),
		radial-gradient(ellipse 42% 55% at 84% 24%, rgba(40, 110, 255, 0.6), transparent 72%),
		radial-gradient(ellipse 40% 30% at 58% 8%, rgba(60, 170, 255, 0.32), transparent 72%),
		linear-gradient(180deg, #070818, #0a0d2a 55%, var(--pc-night));
}

/* The planet shrinks into the corner on a tall screen, as the canvas's does. */
@media (max-aspect-ratio: 1/1) {
	.home-hero__sky {
		background-size: auto;
		background-image:
			radial-gradient(circle 77vh at 139% 143%, #070a14 99.3%, rgba(150, 205, 255, 0.95) 99.6%, rgba(70, 130, 255, 0.35) 100.6%, transparent 104%),
			radial-gradient(ellipse 30% 22% at 55% 82%, rgba(255, 200, 140, 0.55), transparent 70%),
			radial-gradient(ellipse 30% 18% at 6% 50%, rgba(255, 150, 70, 0.6), transparent 70%),
			radial-gradient(ellipse 60% 50% at 0% 50%, rgba(214, 32, 140, 0.6), transparent 72%),
			radial-gradient(ellipse 60% 30% at 92% 20%, rgba(40, 110, 255, 0.6), transparent 72%),
			linear-gradient(180deg, #070818, #0a0d2a 55%, var(--pc-night));
	}
}

.home-hero__sky canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.2s var(--pc-ease);
}

.home-hero__sky.is-ready canvas {
	opacity: 1;
}

.home-hero__content {
	display: grid;
	justify-items: center;
	align-self: center;
	gap: clamp(1.75rem, 4.5vh, 3rem);
	width: 100%;
	max-width: 64rem;
	margin: 0 auto;
	text-align: center;
}

.home-hero__title {
	margin: 0;
	color: var(--pc-white);
	font-family: var(--pc-font-hero);
	font-size: clamp(3rem, 1rem + 8.4vw, 7.5rem);
	font-weight: 800;
	font-variation-settings: normal;
	line-height: 0.98;
	letter-spacing: -0.045em;
	text-shadow: 0 2px 32px rgba(5, 6, 15, 0.45);
	text-wrap: balance;
}

/* The search box, and its suggestions (assets/js/hero-search.js). */
.hero-search {
	position: relative;
	width: 100%;
	max-width: 39.5rem;
	text-align: left;
}

.hero-search__icon {
	position: absolute;
	z-index: 1;
	top: 1.75rem;
	left: 1.25rem;
	color: var(--pc-white);
	line-height: 0;
	transform: translateY(-50%);
	pointer-events: none;
}

.hero-search__input {
	width: 100%;
	height: 3.5rem;
	padding: 0 1.25rem 0 3.4rem;
	background: rgba(10, 14, 40, 0.38);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--pc-radius-pill);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 40px rgba(0, 0, 0, 0.35);
	color: var(--pc-white);
	font-family: var(--pc-font-hero);
	font-size: 1rem;
	font-weight: 500;
	-webkit-appearance: none;
	appearance: none;
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	transition: border-color 0.2s var(--pc-ease), background-color 0.2s var(--pc-ease), box-shadow 0.2s var(--pc-ease);
}

.hero-search__input::placeholder {
	color: rgba(255, 255, 255, 0.78);
	opacity: 1;
}

.hero-search__input:hover {
	border-color: rgba(255, 255, 255, 0.8);
}

.hero-search__input:focus {
	outline: none;
	background: rgba(10, 14, 40, 0.58);
	border-color: var(--pc-white);
	box-shadow: 0 0 0 4px rgba(108, 208, 255, 0.35), 0 12px 40px rgba(0, 0, 0, 0.35);
}

.hero-search__input::-webkit-search-cancel-button {
	filter: brightness(0) invert(1);
	cursor: pointer;
}

.hero-search__list {
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	left: 0;
	z-index: 5;
	max-height: min(24rem, 50vh);
	margin: 0;
	padding: 0.4rem;
	overflow-y: auto;
	list-style: none;
	background: rgba(12, 16, 42, 0.86);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 1.25rem;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
}

.hero-search__list[hidden] {
	display: none;
}

.hero-search__option {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-height: 44px;
	padding: 0.5rem 0.7rem;
	border-radius: 0.9rem;
	color: var(--pc-white);
	cursor: pointer;
}

.hero-search__option[aria-selected="true"],
.hero-search__option:hover {
	background: rgba(255, 255, 255, 0.13);
}

.hero-search__option[aria-disabled="true"] {
	color: rgba(255, 255, 255, 0.75);
	background: none;
	cursor: default;
}

.hero-search__thumb {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pc-pink), #7b5cff);
	font-weight: 800;
	object-fit: cover;
}

.hero-search__body {
	min-width: 0;
}

.hero-search__title,
.hero-search__meta {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hero-search__title {
	font-weight: 700;
}

.hero-search__meta {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.8125rem;
}

.hero-search__option--all {
	margin-top: 0.25rem;
	color: var(--pc-sky-200);
	font-weight: 600;
}

.hero-search__option--all .app-icon {
	margin-left: auto;
}

.home-hero__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 0.9rem;
	margin: 0;
	padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom));
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.9375rem;
	text-align: center;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.home-hero__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--pc-white);
	font-weight: 700;
	text-decoration: none;
}

.home-hero__link:hover {
	color: var(--pc-sky-200);
}

.home-hero__link .app-icon {
	transition: transform 0.2s var(--pc-ease);
}

.home-hero__link:hover .app-icon {
	transform: translateX(3px);
}

/* Clear of the Live Chat launcher in the corner of a phone. */
@media (max-width: 39.99rem) {
	.app--home:has(#live-chat) .home-hero__note {
		padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
	}
}

@media (min-width: 40rem) {
	.hero-search__input {
		height: 4rem;
		padding-left: 3.6rem;
		font-size: 1.125rem;
	}

	.hero-search__icon {
		top: 2rem;
		left: 1.4rem;
	}
}

@media (min-width: 60rem) {
	.app--signed-in .home-hero {
		min-height: max(34rem, 100vh);
		min-height: max(34rem, 100svh);
	}

	.app--home .app-nav--header .app-nav__list > li > a,
	.app--home .app-nav--header .app-drop__toggle {
		color: rgba(255, 255, 255, 0.82);
	}

	.app--home .app-nav--header .app-nav__list > li > a:hover,
	.app--home .app-nav--header .app-drop__toggle:hover,
	.app--home .app-nav--header .app-drop[open] > .app-drop__toggle,
	.app--home .app-account__toggle:hover {
		background: rgba(255, 255, 255, 0.12);
		color: var(--pc-white);
	}
}

/* Sites matching a search sent without script (`?find=`), under the hero. */
.site-results {
	max-width: 46rem;
	margin: 0 auto 3rem;
	scroll-margin-top: 1rem;
}

.site-results:focus {
	outline: none;
}

.site-results__title {
	margin-bottom: 1rem;
	font-size: 1.5rem;
	text-align: center;
}

.site-results__list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-result {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 0.9rem;
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow);
	color: var(--pc-ink);
	text-decoration: none;
	transition: transform 0.15s var(--pc-ease-bounce), box-shadow 0.15s var(--pc-ease-bounce);
}

.site-result:hover {
	background: var(--pc-sky-50);
	color: var(--pc-ink);
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--pc-ink);
}

.site-result__image {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border: var(--pc-line);
	border-radius: 50%;
	object-fit: cover;
}

.site-result__image--empty {
	background: var(--pc-pink-100);
	font-family: var(--pc-font-display);
	font-weight: 800;
}

.site-result__body {
	min-width: 0;
}

.site-result__title,
.site-result__meta {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.site-result__title {
	font-weight: 800;
}

.site-result__meta {
	color: var(--pc-ink-70);
	font-size: 0.8125rem;
}

.site-results__empty {
	color: var(--pc-ink-70);
	text-align: center;
}

@media (min-width: 40rem) {
	.site-results__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Front page: the creator directory ([creator_showcase], with the plugin's
 * theme-neutral showcase.css) and the call to action under it. */

.home__intro {
	max-width: 40rem;
	margin: 0 auto 1.75rem;
	text-align: center;
}

.home__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.875rem, 1.3rem + 2.6vw, 2.75rem);
	font-weight: 900;
	font-variation-settings: "SOFT" 80, "WONK" 1;
	line-height: 1.05;
}

.home__lede {
	margin: 0;
	color: var(--pc-ink-70);
	font-size: 1.0625rem;
}

/* One card per row on a phone, so each creator gets the full width; a
 * gallery from a wider screen up. */
.app-main--home .ssg-showcase__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

.app-main--home .ssg-showcase__body {
	padding: 0.9rem 1rem 1.1rem;
}

@media (min-width: 40rem) {
	.app-main--home .ssg-showcase__grid {
		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	}
}

.app-main--home .ssg-showcase__card {
	position: relative;
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow);
	transition: transform 0.15s var(--pc-ease-bounce), box-shadow 0.15s var(--pc-ease-bounce);
}

.app-main--home .ssg-showcase__card:hover {
	border-color: var(--pc-ink);
	transform: translate(-2px, -2px);
	box-shadow: var(--pc-shadow-lg);
}

.app-main--home .ssg-showcase__card:focus-visible {
	outline: 3px solid var(--pc-pink);
	outline-offset: 3px;
	box-shadow: var(--pc-shadow);
}

.app-main--home .ssg-showcase__image {
	border-bottom: var(--pc-line);
}

.app-main--home .ssg-showcase__image--empty {
	background: var(--pc-sky-100);
	color: var(--pc-ink);
	font-family: var(--pc-font-display);
}

.app-main--home .ssg-showcase__title {
	font-family: var(--pc-font-display);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
}

.app-main--home .ssg-showcase__meta,
.app-main--home .ssg-showcase__blurb {
	color: var(--pc-ink-70);
	overflow-wrap: anywhere;
}

.app-main--home .ssg-showcase__meta {
	font-size: 0.8125rem;
}

.app-main--home .ssg-showcase__number {
	border: var(--pc-line);
	font-weight: 800;
}

.app-main--home .ssg-showcase__more {
	margin-top: 1.5rem;
	text-align: center;
	font-weight: 700;
}

.home-cta {
	max-width: 40rem;
	margin: 3rem auto 0;
	padding: 2rem 1.25rem;
	text-align: center;
	background: var(--pc-pink-50);
	border: var(--pc-line);
	border-radius: var(--pc-radius-lg);
	box-shadow: var(--pc-shadow-lg);
}

.home-cta__mark {
	display: inline-block;
	margin-bottom: 0.5rem;
	animation: pc-float 4s ease-in-out infinite;
}

.home-cta__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	font-weight: 900;
	font-variation-settings: "SOFT" 80, "WONK" 1;
}

.home-cta__text {
	max-width: 28rem;
	margin: 0 auto 1.25rem;
	color: var(--pc-ink-70);
}

.home-cta__button {
	min-height: 52px;
	padding: 0.75rem 1.6rem;
	font-size: 1.0625rem;
}

@media (min-width: 40rem) {
	.home-cta {
		padding: 2.5rem 2rem;
	}
}

/* Create My Site: the generator page. The form is Static Site Gen's
 * [static_site_generator], dressed by assets/css/ssg.css; this frames it. */

.app-main--create {
	padding-top: clamp(1.5rem, 5vh, 3.5rem);
}

.create {
	max-width: 40rem;
	margin: 0 auto;
}

.create__intro {
	margin-bottom: 1.5rem;
	text-align: center;
}

.create__mark {
	display: inline-block;
	margin-bottom: 0.5rem;
	animation: pc-float 4s ease-in-out infinite;
}

.create__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.875rem, 1.3rem + 2.6vw, 2.75rem);
	font-weight: 900;
	font-variation-settings: "SOFT" 80, "WONK" 1;
	line-height: 1.05;
}

.create__lede {
	max-width: 30rem;
	margin: 0 auto;
	color: var(--pc-ink-70);
	font-size: 1.0625rem;
}

.create__form {
	padding: 1.25rem;
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius-lg);
	box-shadow: var(--pc-shadow-lg);
}

@media (min-width: 40rem) {
	.create__form {
		padding: 1.75rem 2rem;
	}
}

/* The theme's headline replaces the form's own. */
.create__intro ~ .create__form .ssg-heading {
	display: none;
}

/* 8. Designs dashboard
 * ------------------------------------------------------------ */

.design-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.design-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow);
}

.design-card--failed {
	box-shadow: 3px 3px 0 var(--pc-pink);
}

.design-card__top {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.design-card__avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	overflow: hidden;
	background: var(--pc-sky-100);
	border: var(--pc-line);
	border-radius: 50%;
	font-family: var(--pc-font-display);
	font-size: 1.25rem;
	font-weight: 800;
}

.design-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.design-card__id {
	flex: 1 1 auto;
	min-width: 0;
}

.design-card__title {
	display: -webkit-box;
	margin: 0 0 0.15rem;
	overflow: hidden;
	font-size: 1.125rem;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.design-card__address {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	max-width: 100%;
	color: var(--pc-sky-darker);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.design-card__address span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.design-card__address:hover {
	color: var(--pc-ink);
	text-decoration: underline;
}

.design-card__address .app-icon {
	flex: 0 0 auto;
}

.design-card__meta {
	margin: 0;
	color: var(--pc-ink-70);
	font-size: 0.8125rem;
}

.design-card__note {
	margin: 0;
	padding: 0.6rem 0.75rem;
	background: var(--pc-sky-50);
	border-radius: var(--pc-radius-sm);
	font-size: 0.875rem;
}

.design-card--failed .design-card__note {
	background: var(--pc-pink-50);
}

.design-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: auto 0 0;
	padding: 0.75rem 0 0;
	border-top: var(--pc-line-soft);
	list-style: none;
}

/* 9. Empty states and plain pages
 * ------------------------------------------------------------ */

.app-empty {
	max-width: 28rem;
	margin: 1.5rem auto;
	padding: 2rem 1.25rem;
	text-align: center;
	background: var(--pc-white);
	border: 2px dashed var(--pc-ink-40);
	border-radius: var(--pc-radius-lg);
}

.app-empty__mark {
	display: inline-block;
	margin-bottom: 0.75rem;
}

.app-empty__title {
	font-size: 1.5rem;
}

.app-empty__text {
	color: var(--pc-ink-70);
}

.app-main--doc {
	max-width: 46rem;
}

/* The Full Width template (templates/full-width.php): the header, the page
 * and the footer all run the width of the window. */
.app--full {
	--app-width: 100%;
}

.app-doc + .app-doc {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: var(--pc-line-soft);
}

.app-doc__title {
	font-size: 1.375rem;
}

.app-doc__title a {
	color: var(--pc-ink);
	text-decoration: none;
}

.app-doc__content {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.app-doc__content > * + * {
	margin-top: 1em;
}

.app-doc__content h2 {
	margin-top: 1.75em;
	font-size: 1.375rem;
}

.app-doc__content h3 {
	margin-top: 1.5em;
	font-size: 1.125rem;
}

/* 10. Desktop
 * A thin bar with the mark and the studio links; the tab bar goes.
 * ------------------------------------------------------------ */

@media (min-width: 40rem) {
	:root {
		--app-gutter: 24px;
	}

	.design-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.auth-card {
		padding: 1.75rem;
	}

	.app-page-title {
		font-size: 2rem;
	}

	.app-footer__inner {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.app-footer__menu {
		justify-content: flex-end;
	}
}

@media (min-width: 60rem) {
	:root {
		--app-header-h: 52px;
	}

	.app-brand .site-title {
		font-size: 1.125rem;
	}

	.app-brand .pc-sparkle {
		width: 18px;
		height: 18px;
	}

	.app-nav--header {
		display: flex;
		align-items: center;
		gap: 0.125rem;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The bar never runs under the account menu: app.js folds the links that
	 * don't fit into More. Without script the row scrolls instead. */
	.app-nav--header .app-nav__list {
		display: flex;
		flex: 0 1 auto;
		gap: 0.125rem;
		min-width: 0;
		margin: 0;
		padding: 0;
		list-style: none;
		overflow-x: auto;
		scrollbar-width: none;
	}

	/* With script the links fold instead, so the Support menu can hang
	 * below the bar without being clipped. */
	.app-nav--fitted .app-nav__list {
		overflow: visible;
	}

	.app-nav--header .app-nav__list::-webkit-scrollbar {
		display: none;
	}

	.app-nav--header li[hidden],
	.app-more[hidden] {
		display: none;
	}

	.app-nav--header .app-nav__list > li > a,
	.app-nav--header .app-drop__toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		height: 34px;
		padding: 0 0.75rem;
		border: 2px solid transparent;
		border-radius: var(--pc-radius-pill);
		color: var(--pc-ink-70);
		font-size: 0.875rem;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
	}

	.app-nav--header .app-drop__toggle {
		padding-right: 0.5rem;
	}

	.app-nav--header .app-nav__list > li > a .app-icon,
	.app-nav--header .app-drop__toggle .app-icon {
		width: 16px;
		height: 16px;
	}

	.app-nav--header .app-nav__list > li > a:hover,
	.app-nav--header .app-drop__toggle:hover,
	.app-nav--header .app-drop[open] > .app-drop__toggle {
		background: var(--pc-sky-50);
		color: var(--pc-ink);
	}

	.app-nav--header .app-nav__list > li > a[aria-current="page"],
	.app-nav--header .app-drop--current > .app-drop__toggle {
		background: var(--pc-pink-100);
		border-color: var(--pc-ink);
		color: var(--pc-ink);
	}

	/* Support hangs from its left edge; More, at the end, from its right. */
	.app-nav__list .app-drop__panel {
		right: auto;
		left: 0;
	}

	.app-more__folded:has(> li:not([hidden])) + .app-more__extra {
		margin-top: 0.25rem;
		padding-top: 0.25rem;
		border-top: var(--pc-line-soft);
	}

	.app-notify + .app-account {
		margin-left: -0.5rem;
	}

	.app-account {
		display: block;
		position: relative;
		flex: 0 0 auto;
	}

	.app-account__toggle {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		padding: 2px 4px 2px 2px;
		border-radius: var(--pc-radius-pill);
		list-style: none;
		cursor: pointer;
	}

	.app-account__toggle::-webkit-details-marker {
		display: none;
	}

	.app-account__toggle:hover {
		background: var(--pc-sky-50);
	}

	.app-account__toggle .app-avatar {
		width: 30px;
		height: 30px;
		font-size: 0.875rem;
	}

	.app-account__panel {
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		width: 18.5rem;
		padding: 0.75rem;
		background: var(--pc-white);
		border: var(--pc-line);
		border-radius: var(--pc-radius);
		box-shadow: var(--pc-shadow-lg);
	}

	.app-tabbar,
	.app-sheet {
		display: none;
	}

	.app--signed-in .app-shell {
		padding-bottom: 0;
	}

	.app--signed-in #live-chat:not(.lc--open) {
		bottom: 20px;
	}

	.app--signed-in #live-chat:not(.lc--open) .lc-panel {
		height: min(600px, calc(100vh - 120px));
	}

	.app-main {
		padding-top: 2rem;
		padding-bottom: 3rem;
	}

	.design-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

/* The studio links need a little more room at the narrow end of desktop. */
@media (min-width: 60rem) and (max-width: 72rem) {
	.app-nav--header .app-nav__list > li > a .app-icon,
	.app-nav--header .app-nav__list .app-drop__toggle .app-icon:first-child {
		display: none;
	}
}

/* 11. Motion
 * ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.auth__mark,
	.create__mark,
	.home-cta__mark,
	.app-badge--working::before,
	.app-sheet[open] {
		animation: none;
	}

	.app-button,
	.app-button:hover,
	.app-button:active {
		transition: none;
		transform: none;
	}

	.home-hero__sky canvas,
	.home-hero__link .app-icon,
	.site-result {
		transition: none;
	}

	.home-hero__link:hover .app-icon,
	.site-result:hover {
		transform: none;
	}
}