/*
Theme Name: Shared WP Parent
Theme URI: https://example.com/
Author: Apache Web Services
Description: Parent-site theme for a shared WordPress publishing platform.
Requires at least: 6.7
Requires PHP: 8.3
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shared-wp-parent
Tags: full-site-editing, landing-page
*/

:root {
	--parent-bg: #f7f7f4;
	--parent-border: #dcdcda;
	--parent-ink: #101517;
	--parent-muted: #586164;
	--parent-primary: #3858e9;
	--parent-primary-dark: #2942bb;
	--parent-surface: #fff;
	--parent-cta-bg: #c9d0ff;
	--parent-hero-size: 98px;
	--parent-heading-size: 62px;
	--parent-lead-size: 24px;
	--parent-card-size: 28px;
	--parent-body-size: 17px;
	--parent-button-size: 15px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background: var(--parent-bg);
	color: var(--parent-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin: 0;
}

a { color: inherit; }

/*
 * The page fills the window and the last block part — the footer — takes the
 * slack, so a short page ends with the footer on the bottom edge instead of
 * leaving it stranded halfway up with blank space beneath it.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	padding: 0;
}

.wp-site-blocks > .wp-block-template-part:last-child { margin-top: auto; }

.parent-shell {
	margin: 0 auto;
	max-width: 1240px;
	padding-left: 28px;
	padding-right: 28px;
}

.parent-header {
	background: rgba(247, 247, 244, .94);
	border-bottom: 1px solid var(--parent-border);
	position: sticky;
	top: 0;
	z-index: 20;
}

.parent-header__inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
	min-height: 72px;
}

/* The site title arrives in two shapes: the site-title block wraps the link in
   an element carrying the class, while the account and signup pages put the
   class straight on the link. Styling only the descendant left those pages with
   a plain underlined link. */
.parent-brand,
.parent-brand a {
	color: inherit;
	font-size: 21px;
	font-weight: 750;
	letter-spacing: -.04em;
	text-decoration: none;
}

.parent-header__actions {
	align-items: center;
	display: flex;
	gap: 12px;
}

.parent-menu {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	gap: 4px;
	margin-left: 28px;
}

.parent-menu__link {
	border-radius: 6px;
	color: var(--parent-muted);
	font-size: 15px;
	font-weight: 600;
	padding: 8px 12px;
	text-decoration: none;
	white-space: nowrap;
}

.parent-menu__link:hover { background: rgba(16, 21, 23, .05); color: var(--parent-ink); }

/* Taken out of the page but left in the accessibility tree. The signup form's
   questions are answered by controls that describe themselves, so their legends
   are read but not shown — removing them outright would leave a screen reader
   with three unlabelled groups. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* An element carrying [hidden] must stay hidden even when a later rule sets
   display: the attribute is a user-agent style and loses to author CSS,
   which left buttons clickable while they were meant to be hidden. */
[hidden] { display: none !important; }

.parent-button {
	border-radius: 6px;
	display: inline-flex;
	font-size: var(--parent-button-size);
	font-weight: 650;
	justify-content: center;
	line-height: 1;
	padding: 14px 20px;
	text-decoration: none;
}

.parent-link {
	align-items: center;
	display: inline-flex;
	font-size: var(--parent-button-size);
	font-weight: 650;
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: none;
}

.parent-button {
	background: var(--parent-primary);
	color: #fff;
}

.parent-button:hover { background: var(--parent-primary-dark); color: #fff; }

.parent-button--outline {
	background: transparent;
	border: 1px solid var(--parent-ink);
	color: var(--parent-ink);
}

.parent-hero {
	padding-bottom: 40px;
	padding-top: 40px;
	text-align: center;
}

.parent-eyebrow {
	color: var(--parent-primary);
	font-size: 14px;
	font-weight: 750;
	letter-spacing: .08em;
	/* It is a paragraph, so its default top margin stacked on the section's
	   own padding and pushed the hero down twice. */
	margin-top: 0;
	text-transform: uppercase;
}

.parent-hero h1 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(52px, 8vw, var(--parent-hero-size));
	font-weight: 400;
	letter-spacing: -.06em;
	line-height: .96;
	margin: 22px auto 28px;
	max-width: 1050px;
}

.parent-hero__lead {
	color: var(--parent-muted);
	font-size: clamp(19px, 2.2vw, var(--parent-lead-size));
	line-height: 1.5;
	margin: 0 auto;
	max-width: 720px;
}

.parent-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 38px;
}

.parent-hero__note {
	color: var(--parent-muted);
	font-size: 14px;
	/* Last thing in the section, so its default bottom margin sat on top of the
	   section's padding the way the eyebrow's did at the other end. */
	margin-bottom: 0;
	margin-top: 18px;
}

.parent-options {
	background: var(--parent-ink);
	color: #fff;
	padding-bottom: 96px;
	padding-top: 96px;
}

.parent-section-heading { margin-bottom: 40px; max-width: 700px; }

.parent-section-heading h2 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(38px, 5vw, var(--parent-heading-size));
	font-weight: 400;
	letter-spacing: -.04em;
	line-height: 1.05;
	margin: 0 0 18px;
}

.parent-section-heading p { color: #b8c0c2; font-size: 18px; line-height: 1.6; }

.parent-card-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.parent-card {
	background: #1b2225;
	border: 1px solid #343c3f;
	border-radius: 14px;
	padding: 34px;
}

.parent-card__number { color: #8da0ff; font-size: 14px; font-weight: 750; }
.parent-card h3 { font-size: var(--parent-card-size); margin: 32px 0 12px; }
.parent-card p { color: #bdc5c7; font-size: var(--parent-body-size); line-height: 1.6; margin: 0 0 28px; }
.parent-card .parent-button--outline { border-color: #fff; color: #fff; }

.parent-features { padding-bottom: 96px; padding-top: 96px; }

.parent-feature-grid {
	display: grid;
	gap: 36px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.parent-feature { border-top: 1px solid var(--parent-border); padding-top: 24px; }
.parent-feature h3 { font-size: 20px; margin: 0 0 10px; }
.parent-feature p { color: var(--parent-muted); line-height: 1.65; margin: 0; }

.parent-cta {
	background: var(--parent-cta-bg);
	border-radius: 18px;
	margin-bottom: 96px;
	padding: 64px;
	text-align: center;
}

.parent-cta h2 { font-family: Georgia, serif; font-size: clamp(38px, 5vw, 60px); font-weight: 400; margin: 0 0 16px; }
.parent-cta p { color: #343d48; font-size: 18px; margin: 0 auto 28px; max-width: 620px; }

.parent-footer { border-top: 1px solid var(--parent-border); color: var(--parent-muted); padding: 30px 0; }
.parent-footer__inner { align-items: center; display: flex; justify-content: space-between; }

.parent-signup { max-width: 820px; padding-bottom: 72px; padding-top: 24px; }
/* The paying screen carries a bill beside the card fields and needs the room. */
.parent-signup:has(.parent-pay) { max-width: 1060px; }
/*
 * Five plans side by side need more still; the other steps stay a column.
 *
 * The width matters as much as the max: this column is a flex item with auto
 * side margins, and auto margins stop an item stretching — so without it the
 * step is as wide as its content happens to be, which for a grid of cards is
 * about half the room.
 */
.parent-signup:has(.parent-plan-grid) { max-width: 1180px; width: 100%; }
/* The page label is the heading now, so it carries the h1 rather than sitting
   above one that repeated it. */
.parent-signup h1.parent-eyebrow { margin: 0 0 4px; }
.parent-signup__lead { color: var(--parent-muted); font-size: 18px; line-height: 1.6; margin-bottom: 0; max-width: 620px; }
.parent-signup-form { background: var(--parent-surface); border: 1px solid var(--parent-border); border-radius: 14px; margin-top: 16px; padding: 34px; }
/* Back at one end and Continue at the other, so going on and going back are
   not two things to tell apart in the middle of the card. */
.parent-signup-actions { display: flex; justify-content: space-between; }
/* A step with only one way on keeps it where Continue always is. */
/* Nothing to go back to — either because there is one button, or because the
   Back on this step was hidden for want of a step behind it. The way on sits
   in the middle rather than against a side of a space that is not shared. */
.parent-signup-actions > :only-child { margin-left: 0; }
.parent-signup-actions:has(> :only-child),
.parent-signup-actions:has(> [data-signup-back][hidden]) { justify-content: center; }
/* The direction each one goes, said on the button rather than only by where it
   sits. Written here so every step's pair carries them. */
.parent-signup-actions [data-signup-back]::before { content: "\2190"; margin-right: 10px; }
.parent-signup-actions [data-signup-next]::after { content: "\2192"; margin-left: 10px; }
/* Two fields and a button fit one line, so the button joins them rather than
   sitting alone under a half-empty row. It aligns to the bottom of the row
   because the fields carry a label above them. */
.parent-form-grid--with-action { align-items: end; grid-template-columns: 1fr 1fr auto; }
.parent-form-grid--with-action .parent-signup-actions { margin-bottom: 0; }
.parent-form-grid--with-action .parent-button { min-width: 0; white-space: nowrap; }
/* The button is the last thing on the form and the only one to press, so it is
   centred under the fields rather than tucked against the left edge. */
.parent-signup-actions .parent-button { min-width: 220px; }
/* A way on that is not ready yet, said by how it looks as well as by not working. */
.parent-signup-actions .parent-button[disabled] { cursor: not-allowed; opacity: .45; }

.parent-signup-form fieldset { border: 0; margin: 0 0 28px; padding: 0; }
/* The two dropdowns are one decision each and short enough to share a line;
   a lone one still fills the row, because the site question only appears for an
   account that already has a site. */
.parent-signup-row { display: flex; flex-wrap: wrap; gap: 0 22px; }
.parent-signup-row > fieldset { flex: 1 1 240px; }
/* The two address choices sit side by side for the same reason: one decision,
   two short options. The wrapper is a div rather than the fieldset itself,
   because a legend inside a flex container is not laid out reliably. */
.parent-choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.parent-choice-row > .parent-choice { flex: 1 1 240px; margin-top: 0; }
.parent-signup-form legend { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.parent-signup-form legend.screen-reader-text { margin-bottom: 0; }
.parent-signup-honeypot { left: -10000px; position: absolute; }
.parent-choice { align-items: flex-start; border: 1px solid var(--parent-border); border-radius: 8px; cursor: pointer; display: flex; gap: 12px; margin-top: 10px; padding: 16px; }
.parent-choice input { margin-top: 4px; }
.parent-choice span, .parent-choice small { display: block; }
.parent-choice small, .parent-signup-form label small { color: var(--parent-muted); margin-top: 3px; }
.parent-select { display: block; }
/* The native control is replaced rather than restyled: its own arrow cannot be
   moved, so appearance:none plus a background chevron is what keeps it matching
   the text inputs beside it. */
.parent-select select {
	appearance: none;
	background-color: var(--parent-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23586164' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	border: 1px solid #949a9c;
	border-radius: 6px;
	color: var(--parent-ink);
	cursor: pointer;
	display: block;
	font: inherit;
	margin-top: 4px;
	/* The same vertical padding as the text inputs beside it: a pixel more on
	   each side made this control two pixels taller than the box it sits next
	   to, which is exactly the sort of difference that is only visible once
	   somebody sees it. */
	padding: 12px 44px 12px 14px;
	width: 100%;
}
.parent-select select:hover { border-color: var(--parent-ink); }
.parent-select select:focus-visible { border-color: var(--parent-primary); box-shadow: 0 0 0 1px var(--parent-primary); outline: 2px solid transparent; }
/* Until a category is picked the value is empty, so the placeholder is greyed
   the way a text input's placeholder would be. */
.parent-select select:invalid { color: var(--parent-muted); }
.parent-select small { color: var(--parent-muted); display: block; margin-top: 8px; }
.parent-form-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 26px; }
.parent-form-grid label { font-size: 14px; font-weight: 650; }
.parent-form-grid input { border: 1px solid #949a9c; border-radius: 6px; display: block; font: inherit; margin-top: 7px; padding: 12px; width: 100%; }
.parent-form-wide { grid-column: 1 / -1; }
.parent-form-errors { background: #fff1f0; border: 1px solid #d63638; border-radius: 8px; color: #8a2424; margin-top: 24px; padding: 10px 18px; }
.parent-form-errors p { margin: 7px 0; }
.parent-site-status { align-items: center; background: var(--parent-surface); border: 1px solid var(--parent-border); border-radius: 10px; display: flex; gap: 14px; margin: 28px 0; padding: 20px 24px; }
.parent-site-status p { margin: 0; }
.parent-spinner { animation: parent-spin 0.9s linear infinite; border: 2px solid var(--parent-border); border-radius: 50%; border-top-color: currentColor; flex: 0 0 20px; height: 20px; width: 20px; }
@keyframes parent-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .parent-spinner { animation-duration: 3s; } }

.parent-dns-record { background: var(--parent-surface); border: 1px solid var(--parent-border); border-radius: 10px; display: grid; gap: 8px; margin: 28px 0; padding: 24px; }
.parent-dns-record span { color: var(--parent-muted); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.parent-dns-record code { overflow-wrap: anywhere; }

/* Account -------------------------------------------------------------- */

/* Sticky footer by layout rather than position: it rests at the bottom of a short
   page and is pushed down by a long one, so it never covers the content. Both
   pages the plugin prints itself are laid out this way. */
/* A handoff is a form so its token is posted rather than put in the address;
   it should still sit in a row of links as though it were one of them. */
.aws-handoff { display: contents; }

/*
 * Dynamic viewport height, the way .wp-site-blocks above already does it. On a
 * phone, 100vh is the window with the browser's address bar hidden — so while
 * the bar is showing, a page sized to it is taller than the screen by exactly
 * the height of that bar, and a strip of blank space sits under the footer.
 * Scroll, the bar retracts, the strip goes; scroll back and it returns. 100dvh
 * is the window as it currently is, so the footer stays on the bottom edge
 * whatever the browser is doing with its chrome.
 *
 * The 100vh line stays as the fallback for anything too old to know dvh.
 */
.parent-account-page,
.parent-signup-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.parent-account-page .parent-account,
.parent-signup-page .parent-signup { flex: 1 0 auto; }

.parent-account { padding-bottom: 64px; padding-top: 20px; }

.parent-page-footer { background: var(--parent-surface); border-top: 1px solid var(--parent-border); flex: 0 0 auto; padding: 20px 0; }
.parent-page-footer__inner { align-items: center; color: var(--parent-muted); display: flex; font-size: 14px; gap: 18px; justify-content: space-between; }
.parent-page-footer p { margin: 0; }
.parent-page-footer nav { display: flex; gap: 18px; }
.parent-page-footer a { color: inherit; text-decoration: none; }
.parent-page-footer a:hover { color: var(--parent-ink); text-decoration: underline; }

.parent-account__tools { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; }

.parent-account__search { align-items: center; display: flex; gap: 8px; }
.parent-account__search input[type=search] {
	background: var(--parent-surface);
	border: 1px solid var(--parent-border);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	padding: 8px 12px;
	width: 220px;
}
.parent-account__search input[type=search]:focus-visible { border-color: var(--parent-primary); outline: 2px solid transparent; box-shadow: 0 0 0 1px var(--parent-primary); }
.parent-account__search select {
	background: var(--parent-surface);
	border: 1px solid var(--parent-border);
	border-radius: 8px;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	padding: 8px 10px;
}

.parent-account__clear { color: var(--parent-muted); font-size: 13px; }
/* It is a button now rather than a link back to an unfiltered URL: there is no
   longer a URL to go back to, because filtering never left this one. */
.parent-account__clear { background: none; border: 0; cursor: pointer; font: inherit; }
.parent-account__clear[hidden] { display: none; }
.parent-pagination__page { background: none; border: 0; cursor: pointer; font: inherit; }

.parent-pagination { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 28px; }
.parent-pagination__pages { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.parent-pagination__page,
.parent-pagination__step {
	border: 1px solid var(--parent-border);
	border-radius: 8px;
	color: inherit;
	display: inline-block;
	font-size: 14px;
	min-width: 38px;
	padding: 8px 12px;
	text-align: center;
	text-decoration: none;
}
.parent-pagination__page:hover, .parent-pagination__step:hover { border-color: var(--parent-ink); }
.parent-pagination__page.is-current { background: var(--parent-primary); border-color: var(--parent-primary); color: #fff; }
/* Kept in place rather than removed, so the row does not shift as you page. */
.parent-pagination__step.is-disabled { color: var(--parent-muted); opacity: .5; }


/* The header carries the identity, so it holds three stacked lines rather than
   a single wordmark and needs room for them. */
.parent-account-page .parent-header__inner { align-items: center; min-height: 88px; }

.parent-account__id > p { margin: 0; }
.parent-account__id .parent-eyebrow { font-size: 12px; }
.parent-account__name { font-size: 19px; font-weight: 750; letter-spacing: -.03em; line-height: 1.2; }
.parent-account__email { color: var(--parent-muted); font-size: 13px; }

.parent-account__summary { color: var(--parent-muted); font-size: 14px; margin: 0; }

.parent-account__section-head { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 16px; }
.parent-account__section-head h2 { font-size: 20px; margin: 0; }

/* Four fixed columns rather than auto-fill: eight tiles to a page is two rows,
   and a column count that changed with the window would change how many rows a
   page has. */
.parent-account__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1180px) { .parent-account__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 880px) { .parent-account__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.parent-app {
	background: var(--parent-surface);
	border: 1px solid var(--parent-border);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	padding: 20px;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.parent-app:hover { border-color: #b9bec0; box-shadow: 0 6px 20px rgb(16 21 23 / 7%); transform: translateY(-1px); }

.parent-app__top { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; }

.parent-app__mark {
	align-items: center;
	background: hsl(var(--app-hue) 62% 94%);
	border-radius: 12px;
	color: hsl(var(--app-hue) 58% 32%);
	display: flex;
	flex: 0 0 auto;
	font-size: 20px;
	font-weight: 750;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.parent-app__state { align-items: center; color: var(--parent-muted); display: flex; font-size: 12px; gap: 6px; }
.parent-app__dot { background: #1a9c4b; border-radius: 50%; height: 7px; width: 7px; }
.parent-app.is-pending .parent-app__dot { background: #d29b00; }

.parent-app__host { font-size: 17px; letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; }
.parent-app__host a { text-decoration: none; }
.parent-app__host a:hover { text-decoration: underline; }

.parent-app__meta { color: var(--parent-muted); font-size: 13px; margin: 6px 0 0; }

.parent-app__dns { margin-top: 14px; }
.parent-app__dns > summary { color: var(--parent-muted); cursor: pointer; font-size: 13px; }
.parent-app__dns[open] > summary { margin-bottom: 8px; }

.parent-dns-row { align-items: center; display: flex; gap: 8px; padding: 3px 0; }
.parent-dns-row > span { color: var(--parent-muted); flex: 0 0 40px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.parent-dns-row code { flex: 1 1 auto; font-size: 12px; overflow-wrap: anywhere; }

.parent-copy {
	background: var(--parent-bg);
	border: 1px solid var(--parent-border);
	border-radius: 6px;
	color: inherit;
	cursor: pointer;
	flex: 0 0 auto;
	font: inherit;
	font-size: 12px;
	padding: 3px 9px;
}

.parent-copy:hover { border-color: var(--parent-ink); }
.parent-copy.is-copied { background: #e7f7eb; border-color: #116329; color: #116329; }

/* Pinned to the bottom so a tile with a DNS panel keeps its buttons level with
   the tiles beside it. */
.parent-app__actions { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-top: auto; padding-top: 18px; }
.parent-app__actions .parent-link { padding-left: 0; }
.parent-app__actions .parent-button { padding: 9px 15px; }

.parent-app--add {
	align-items: center;
	border-style: dashed;
	color: var(--parent-muted);
	font-weight: 650;
	gap: 10px;
	justify-content: center;
	min-height: 180px;
	text-decoration: none;
}

.parent-app--add:hover { border-color: var(--parent-primary); color: var(--parent-primary); }
.parent-app__plus { font-size: 26px; line-height: 1; }

/* Adding another name for this platform, beside the websites it sells. */
.parent-app--platform { display: flex; flex-direction: column; padding: 18px; }
.parent-app--platform input {
	border: 1px solid var(--parent-line, #d8dbe0);
	border-radius: 8px;
	font: inherit;
	padding: 8px 10px;
	width: 100%;
}
.parent-app--platform input + input { margin-top: 8px; }
.parent-app--platform .parent-button { margin-top: 10px; }

/* Signing in as the owner of a website, from that website's own card. */
.parent-app__as { font-size: 13px; }

/* What came of the last thing asked for on this page. */
.parent-note {
	border-left: 3px solid var(--parent-line, #d8dbe0);
	border-radius: 6px;
	margin: 0 0 18px;
	padding: 10px 14px;
}
.parent-note--good { background: #edf7f0; border-left-color: #2f8f4e; }

/* A repair, while it runs. Every step of it changes a web server, so it holds
   the page: there is no useful thing to do on the rest of it meanwhile, and a
   reload halfway through leaves a site in the state this exists to get it out
   of. Each step is asked for on its own so the list fills in as it goes —
   reporting only at the end looks the same as having hung. */
/* Everything that changes a server lives behind the dots in the card's corner,
   away from Open and Dashboard, which change nothing. */
.parent-app__top { position: relative; }
.parent-app__menu { margin-left: auto; position: relative; }
/* Bigger than the other icons on purpose: this one is carrying a colour, and a
   colour needs enough of itself to be read at a glance. */
.parent-app__more { align-items: center; background: none; border: 0; border-radius: 9px; color: #6b7280;
    cursor: pointer; display: flex; height: 34px; justify-content: center; padding: 0; width: 34px; }
.parent-app__more .parent-app__icon { height: 24px; width: 24px; }
.parent-app__more:hover, .parent-app__more:focus-visible { background: rgba(0, 0, 0, .06); }

/* The dots are the state as well: serving, or not. Hovering names which, so the
   colour is never the only thing saying it. */
.parent-app__more.is-live { color: #2f8f4e; }
.parent-app__more.is-down { color: #b32d2e; }
.parent-app__more.is-live:hover, .parent-app__more.is-live:focus-visible { background: #e9f5ed; }
.parent-app__more.is-down:hover, .parent-app__more.is-down:focus-visible { background: #fdeceb; }
/* No fill here. A stylesheet rule beats the fill="none" on the svg itself, so
   setting one filled every stroked icon into a solid blob — the arrow became a
   disc and the bin would have too. Each icon says what it is on the element. */
.parent-app__icon { display: block; }

.parent-app__sheet { background: #fff; border: 1px solid #e3e6ea; border-radius: 10px;
    box-shadow: 0 12px 30px rgba(10, 14, 22, .16); display: flex; gap: 2px; padding: 5px;
    position: absolute; right: 0; top: 32px; z-index: 5; }
.parent-app__sheet[hidden] { display: none; }
.parent-app__do { align-items: center; background: none; border: 0; border-radius: 8px; color: #4b5563;
    cursor: pointer; display: flex; height: 32px; justify-content: center; padding: 0; width: 32px; }
.parent-app__do:hover, .parent-app__do:focus-visible { background: #f2f4f7; color: #1f2430; }
.parent-app__do--bad { color: #b32d2e; }
.parent-app__do--bad:hover, .parent-app__do--bad:focus-visible { background: #fdeceb; color: #8f1f20; }

.parent-repair__type { display: grid; gap: 6px; margin: 16px 0 0; }
.parent-repair__address { align-items: center; display: flex; gap: 8px; margin: 0; }
.parent-repair__address code { background: #f2f4f7; border-radius: 6px; padding: 4px 8px; }
.parent-repair__copy { align-items: center; background: none; border: 0; border-radius: 7px; color: #5b6472;
    cursor: pointer; display: flex; height: 28px; justify-content: center; padding: 0; width: 28px; }
.parent-repair__copy:hover, .parent-repair__copy:focus-visible { background: #f2f4f7; color: #1f2430; }
.parent-repair__copy.is-done { background: #e9f5ed; color: #2f8f4e; }
.parent-repair__type input { border: 1px solid #c9ced6; border-radius: 8px; font: inherit; padding: 9px 11px; width: 100%; }
.parent-repair__actions button[disabled] { cursor: not-allowed; opacity: .5; }
.parent-repair[data-job="delete"] .parent-repair__actions .parent-button:not([hidden]) { background: #b32d2e; border-color: #b32d2e; }
.parent-repair__start { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }
body.parent-repair-open { overflow: hidden; }

.parent-repair { align-items: center; background: rgba(16, 20, 28, .55); bottom: 0; display: flex;
    justify-content: center; left: 0; padding: 20px; position: fixed; right: 0; top: 0; z-index: 999; }
.parent-repair[hidden] { display: none; }

.parent-repair__sheet { background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(10, 14, 22, .28);
    max-height: calc(100dvh - 40px); max-width: 520px; overflow-y: auto; padding: 26px 28px 22px; width: 100%; }
.parent-repair__title { font-size: 1.25rem; margin: 0 0 4px; }
.parent-repair__intro { color: #5b6472; margin: 6px 0 0; }
.parent-repair__intro[hidden] { display: none; }

.parent-repair__steps { list-style: none; margin: 16px 0 0; padding: 0; }
.parent-repair__step { display: grid; gap: 2px; grid-template-columns: 22px 1fr; padding: 9px 0; }
.parent-repair__step + .parent-repair__step { border-top: 1px solid rgba(0, 0, 0, .06); }
.parent-repair__what { grid-column: 2; }
.parent-repair__detail { color: #5b6472; grid-column: 2; }
.parent-repair__detail:empty { display: none; }

.parent-repair__mark { grid-row: 1 / span 2; height: 16px; margin-top: 3px; position: relative; width: 16px; }

/* Waiting: nothing yet, so nothing is claimed. */
.parent-repair__step[data-state="waiting"] { opacity: .45; }
.parent-repair__step[data-state="waiting"] .parent-repair__mark::before { border: 2px solid #c9ced6;
    border-radius: 50%; content: ""; inset: 1px; position: absolute; }

.parent-repair__step[data-state="running"] .parent-repair__mark::before { animation: parent-repair-spin .7s linear infinite;
    border: 2px solid #c9ced6; border-radius: 50%; border-top-color: #2a5bd7; content: ""; inset: 1px; position: absolute; }

.parent-repair__step[data-state="done"] .parent-repair__mark::before { color: #2f8f4e; content: "\2713"; font-weight: 700; }
.parent-repair__step[data-state="ok"] .parent-repair__mark::before { color: #7a8290; content: "\2013"; }
.parent-repair__step[data-state="skipped"] { opacity: .45; }
.parent-repair__step[data-state="skipped"] .parent-repair__mark::before { color: #7a8290; content: "\2013"; }
.parent-repair__step[data-state="failed"] .parent-repair__mark::before { color: #b32d2e; content: "\2717"; font-weight: 700; }
.parent-repair__step[data-state="failed"] .parent-repair__detail { color: #b32d2e; }

@keyframes parent-repair-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .parent-repair__step[data-state="running"] .parent-repair__mark::before { animation-duration: 2.4s; }
}

.parent-repair__warn { background: #fdf6e3; border-radius: 10px; color: #7a5b00; font-size: .92rem;
    margin: 16px 0 0; padding: 10px 12px; }
.parent-repair__outcome { font-weight: 600; margin: 16px 0 0; }
.parent-repair__outcome[data-bad="1"] { color: #b32d2e; }
.parent-repair__actions { align-items: center; display: flex; gap: 14px; justify-content: flex-end; margin-top: 18px; }
.parent-repair__actions button[hidden] { display: none; }
.parent-repair__actions .parent-link { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }
.parent-note--bad { background: #fdf0f0; border-left-color: #c1443a; }

.parent-account__empty {
	background: var(--parent-surface);
	border: 1px dashed var(--parent-border);
	border-radius: 14px;
	padding: 44px 32px;
	text-align: center;
}

.parent-account__empty h3 { font-size: 20px; margin: 0 0 8px; }
.parent-account__empty p { color: var(--parent-muted); margin: 0 auto 22px; max-width: 460px; }
.parent-account__empty-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

@media (max-width: 760px) {
	.parent-shell { padding-left: 20px; padding-right: 20px; }
	.parent-header__inner { flex-wrap: wrap; min-height: 64px; row-gap: 4px; }
	/* The menu drops to its own line rather than squeezing the account links,
	   which are how anyone signs in or signs up. */
	.parent-menu { margin-left: 0; order: 3; overflow-x: auto; width: 100%; }
	.parent-menu__link { padding-left: 8px; padding-right: 8px; }
	/* Signing in happens through this link now, so it has to stay reachable. */
	.parent-header__actions .parent-link { padding-left: 4px; padding-right: 10px; }
	.parent-header__actions .parent-button { padding-left: 14px; padding-right: 14px; }
	.parent-hero { padding-bottom: 32px; padding-top: 28px; }
	.parent-card-grid, .parent-feature-grid { grid-template-columns: 1fr; }
	.parent-form-grid, .parent-form-grid--with-action { grid-template-columns: 1fr; }
	.parent-form-wide { grid-column: auto; }
	.parent-signup-form { padding: 22px 18px; }
	/*
	 * Two buttons at 220px each is 452px of button before any padding, which is
	 * wider than the window they were being asked to sit in — the card was cut
	 * off at the right and the page scrolled sideways. They share what there is
	 * and wrap when there is not enough.
	 */
	.parent-signup-actions { flex-wrap: wrap; gap: 10px; }
	.parent-signup-actions .parent-button { flex: 1 1 auto; min-width: 0; }
	.parent-domain-search { padding: 14px; }
	.parent-domain-search__row { flex-wrap: wrap; }
	.parent-domain-search__row input { flex: 1 1 160px; }
	.parent-signup-row > fieldset { flex-basis: 100%; }
	.parent-choice-row > .parent-choice { flex-basis: 100%; }
	.parent-options, .parent-features { padding-bottom: 72px; padding-top: 72px; }
	.parent-cta { margin-bottom: 64px; padding: 44px 24px; }
	.parent-footer__inner { align-items: flex-start; flex-direction: column; gap: 8px; }
	.parent-account { padding-top: 16px; }
	.parent-account__section-head { align-items: stretch; flex-direction: column; gap: 12px; }
	.parent-account__search input[type=search] { width: 100%; }
	.parent-page-footer__inner { align-items: flex-start; flex-direction: column; gap: 10px; }
	.parent-account__grid { grid-template-columns: 1fr; }
	.parent-dns-row { align-items: flex-start; flex-wrap: wrap; }
}

/* The options popup ------------------------------------------------------
 *
 * A native dialog, so the browser handles the backdrop, Escape and keeping
 * focus inside. Only the panel is styled; the cards inside are the same ones
 * the page uses elsewhere.
 */
.parent-modal {
	background: transparent;
	border: 0;
	max-height: 100dvh;
	max-width: min(880px, 100vw);
	padding: 0;
	width: 100%;
}

.parent-modal::backdrop { background: rgb(12 18 32 / 62%); }

/* The panel carries what the options section used to: the cards inside are
   built for a dark ground and take their light text from it. */
.parent-modal__panel {
	background: var(--parent-ink);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgb(9 16 32 / 45%);
	color: #fff;
	margin: 24px;
	padding: 34px clamp(20px, 4vw, 44px) 40px;
	position: relative;
}

/* The dialog itself is only a frame, and a ring around the whole window reads
   as an error. The controls inside keep their own focus styles. */
.parent-modal:focus { outline: none; }

.parent-modal__close {
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: #b8c0c2;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	padding: 6px 12px;
	position: absolute;
	right: 12px;
	top: 12px;
}

.parent-modal__close:hover { color: #fff; }

.parent-modal .parent-section-heading { margin-bottom: 26px; }

@media (max-width: 600px) {
	.parent-modal__panel { margin: 12px; padding: 30px 18px 32px; }
}

/* Signup: the plan step ---------------------------------------------------
 *
 * Prices belong to the theme a category starts on, so a group is rendered for
 * each and the chosen one is shown.
 */
.parent-plan-grid {
	/*
	 * Side by side, because plans are read against each other: a column of
	 * cards is five separate offers, and the question is which of them. Narrow
	 * enough that five fit, and auto-fit wraps them when they cannot.
	 */
	align-items: start;
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
	margin-bottom: 26px;
}

.parent-plan {
	align-items: flex-start;
	border: 1px solid var(--parent-border);
	border-radius: 12px;
	cursor: pointer;
	display: flex;
	gap: 10px;
	padding: 16px;
}

/*
 * Monthly or yearly, one control above the lot of them and over on the right.
 * It answers a question about the prices below it, and the prices are read
 * left to right — so it sits at the end of that line rather than in front of
 * it, where it would be the first thing read and the last thing wanted.
 */
.parent-plan-when {
	background: #f2f4f7;
	border-radius: 999px;
	/*
	 * Block-level, not inline-flex: an auto margin on an inline box computes
	 * to nothing, so the switch stayed where it was put however it was told.
	 */
	display: flex;
	gap: 4px;
	margin: 0 0 20px auto;
	padding: 4px;
	width: fit-content;
}

.parent-plan-when__side {
	align-items: center;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	font-size: 15px;
	gap: 8px;
	padding: 8px 18px;
}

.parent-plan-when__side:has(input:checked) {
	background: #fff;
	box-shadow: 0 1px 3px rgb(16 24 40 / 12%);
	font-weight: 600;
}

.parent-plan-when__side input { height: 0; opacity: 0; pointer-events: none; position: absolute; width: 0; }

.parent-plan-when__saving,
.parent-plan__saving {
	background: #e7f5ec;
	border-radius: 999px;
	color: #1a7f45;
	font-size: 12px;
	padding: 2px 8px;
	white-space: nowrap;
}

.parent-plan__saving { border-radius: 6px; justify-self: start; }

.parent-plan__saving[hidden],
.parent-plan__yearly[hidden] { display: none; }

.parent-plan:has(input:checked) { border-color: var(--parent-ink); box-shadow: 0 0 0 1px var(--parent-ink); }

.parent-plan--featured { border-color: #8da0ff; }

.parent-plan input { margin-top: 4px; }

.parent-plan__body { display: grid; gap: 6px; }

.parent-plan__name { font-size: 16px; }

.parent-plan__price { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }

.parent-plan__price small { color: var(--parent-muted); font-size: 13px; font-weight: 400; }

.parent-plan__summary { color: var(--parent-muted); line-height: 1.55; }

.parent-signup-actions { gap: 12px; }

.parent-signup__alt { color: var(--parent-muted); margin-top: 18px; text-align: center; }

.parent-plan__yearly { color: var(--parent-muted); }
.parent-plan__features { display: grid; gap: 5px; margin-top: 4px; }
.parent-plan__features span { color: var(--parent-muted); font-size: 13px; line-height: 1.4; padding-left: 18px; position: relative; }
.parent-plan__features span::before { content: "✓"; left: 0; position: absolute; }

.parent-checkout { margin: 26px 0 8px; min-height: 340px; }

/* Paying for a signup ------------------------------------------------------
 *
 * Laid out like the for-sale checkout: what is being bought sits beside the
 * card fields, so the amount in the payment frame has a bill next to it rather
 * than being the first anybody hears of it.
 */
.parent-pay { align-items: start; display: grid; gap: 28px; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.parent-pay__main { min-width: 0; }
.parent-pay__main h1 { margin: 0 0 10px; }

.parent-basket {
	background: var(--parent-surface);
	border: 1px solid var(--parent-border);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	padding: 22px;
	position: sticky;
	top: 24px;
}

/*
 * The order and the search are one section, because on a phone they collapse
 * together. Where there is room they are simply the column, and the total reads
 * where a total belongs: under what it adds up.
 */
.parent-basket__sheet { display: contents; }
.parent-basket__lines { order: 1; }
.parent-basket__total { order: 2; }
.parent-basket__note { order: 3; }
.parent-basket__more { order: 4; }

.parent-basket__title {
	color: var(--parent-muted);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: .12em;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.parent-basket__lines { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.parent-basket__lines li { display: flex; gap: 12px; justify-content: space-between; }
.parent-basket__label { display: grid; gap: 3px; min-width: 0; }
.parent-basket__label strong { font-size: 15px; overflow-wrap: anywhere; }
.parent-basket__label small { color: var(--parent-muted); font-size: 12.5px; line-height: 1.4; }
.parent-basket__amount { font-weight: 700; white-space: nowrap; }
.parent-basket__drop { flex: 0 0 auto; }

/* A form before the page could redraw it, a button after. */
.parent-basket__drop, .parent-basket__drop button {
	background: none;
	border: 0;
	color: var(--parent-muted);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 0 0 0 8px;
}

.parent-basket__drop:hover, .parent-basket__drop button:hover { color: #b32d2e; }

.parent-basket__total {
	align-items: baseline;
	border-top: 1px solid var(--parent-border);
	display: flex;
	justify-content: space-between;
	margin: 18px 0 0;
	padding-top: 14px;
}

.parent-basket__total strong { font-size: 22px; }
.parent-basket__note { color: var(--parent-muted); font-size: 12.5px; line-height: 1.5; margin: 12px 0 0; }

/* A button that is busy, rather than one that has merely stopped working. */
.parent-button.is-working { cursor: progress; opacity: .85; }

.parent-button.is-working::before {
	animation: parent-spin 0.7s linear infinite;
	border: 2px solid rgb(255 255 255 / 45%);
	border-radius: 50%;
	border-top-color: #fff;
	content: "";
	display: inline-block;
	height: 15px;
	margin-right: 9px;
	vertical-align: -2px;
	width: 15px;
}

/* Waiting, in the middle of what is being waited on ---------------------- */
.parent-basket__working { align-items: center; display: flex; justify-content: center; margin: 0; padding: 26px 0; }
.parent-basket__working[hidden] { display: none; }

.parent-basket__working-spin {
	animation: parent-spin 0.7s linear infinite;
	border: 3px solid var(--parent-border);
	border-radius: 50%;
	border-top-color: var(--parent-primary);
	display: inline-block;
	height: 30px;
	width: 30px;
}

/* Adding another name to the order, from the column that shows the order. */
.parent-basket__more { border-top: 1px solid var(--parent-border); margin-top: 18px; padding-top: 16px; }
.parent-basket__more .parent-basket__title { margin-bottom: 10px; }
.parent-basket__search { display: flex; gap: 8px; }
.parent-basket__search label { flex: 1 1 auto; min-width: 0; }
.parent-basket__search input {
	border: 1px solid var(--parent-border);
	border-radius: 8px;
	font: inherit;
	padding: 8px 10px;
	width: 100%;
}
.parent-basket__search .parent-button { flex: 0 0 auto; min-width: 0; padding: 8px 14px; }
.parent-basket__search .parent-button[disabled] { cursor: progress; opacity: .5; }
.parent-basket__results { display: grid; gap: 6px; list-style: none; margin: 12px 0 0; padding: 0; }
.parent-basket__results li.is-taken { color: var(--parent-muted); font-size: 13px; padding: 6px 2px; text-decoration: line-through; }

.parent-basket__add {
	align-items: center;
	background: #fff;
	border: 1px solid var(--parent-border);
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 10px;
	justify-content: space-between;
	padding: 9px 12px;
	text-align: left;
	width: 100%;
}

.parent-basket__add:hover { border-color: var(--parent-primary); color: var(--parent-primary); }
.parent-basket__add span { flex: 1 1 auto; overflow-wrap: anywhere; }
.parent-basket__add input { accent-color: var(--parent-primary); flex: 0 0 auto; height: 16px; margin: 0; width: 16px; }
.parent-basket__add:has(input:checked) { border-color: var(--parent-primary); box-shadow: inset 0 0 0 1px var(--parent-primary); }
.parent-basket__more [data-domain-add] { margin-top: 12px; min-width: 0; width: 100%; }

/* The payment fields and the button under them. */
.parent-pay__form { margin-top: 18px; }
/*
 * The gap belongs to the row, not to the button: as a margin on one of two
 * stretched items it made that one shorter than the other by exactly the gap.
 */
.parent-pay__row { margin-top: 20px; }
.parent-pay__form .parent-button { margin-top: 0; width: 100%; }
.parent-pay__status { color: var(--parent-muted); font-size: 13px; margin: 10px 0 0; min-height: 18px; text-align: center; }

.parent-pay__row { align-items: stretch; display: flex; gap: 10px; }
.parent-pay__row .parent-button { flex: 1 1 auto; min-width: 0; }
.parent-basket__close, .parent-basket__sheet-head { display: none; }

/* Beside the pay button, and only where the list it opens is a sheet. */
.parent-pay__more {
	align-items: center;
	background: #fff;
	border: 1px solid var(--parent-border);
	border-radius: 10px;
	color: var(--parent-ink, #101828);
	cursor: pointer;
	display: none;
	flex: 0 0 auto;
	flex-direction: column;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	gap: 2px;
	justify-content: center;
	line-height: 1;
	padding: 8px 12px;
}

.parent-pay__more { position: relative; }
.parent-pay__more-label { font-size: 12px; font-weight: 700; line-height: 1.1; }
.parent-pay__more:hover { border-color: var(--parent-primary); color: var(--parent-primary); }

/* How many domains are in it, on the cart it opens. */
.parent-pay__count {
	background: var(--parent-primary);
	border-radius: 999px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	min-width: 18px;
	position: absolute;
	right: 2px;
	text-align: center;
	top: 2px;
}

@media (max-width: 860px) {
	/* The bill first: on a phone it is the part that has to be read. */
	.parent-pay { grid-template-columns: minmax(0, 1fr); }
	.parent-basket { position: static; }
	/*
	 * The same row the for-sale page has: a third of it for the cart, the rest
	 * for the button that pays, both the same height, and the pair kept on the
	 * screen while the page scrolls under them.
	 */
	.parent-pay__more { display: flex; flex: 0 0 33%; }

	.parent-pay__row {
		background: var(--parent-bg, #f6f6f4);
		bottom: 0;
		box-shadow: 0 -12px 20px -12px rgb(16 24 40 / 18%);
		margin: 0 -20px;
		padding: 12px 20px;
		position: sticky;
		z-index: 3;
	}

	/*
	 * The order reads as a receipt on a phone — a line, a price, a total — so
	 * the payment is on the screen with it rather than below the fold. What
	 * each line means is on the wide layout, where there is room to say it.
	 */
	/*
	 * The card that summarised the order is not shown here at all: the button
	 * says what is being paid, the cart beside it opens what it is for, and a
	 * third statement of the same thing was only pushing the payment down.
	 */
	.parent-basket { background: none; border: 0; padding: 0; }
	.parent-basket > :not(.parent-basket__sheet) { display: none; }
	.parent-basket__lines { gap: 8px; }
	.parent-basket__label small { display: none; }
	.parent-pay__main h1 { font-size: 27px; margin-bottom: 6px; }
	.parent-pay__main > p { font-size: 14.5px; }
	.parent-pay__form { margin-top: 12px; }

	/*
	 * What is in the order, and adding to it, are both things to look at rather
	 * than things in the way of paying: they wait under the page and arrive
	 * over it when asked for. What is owed stays on show.
	 */
	/*
	 * The whole screen once it is open: what is in the order and the search
	 * that adds to it are the only things being looked at while it is up, and
	 * a list cut off at three quarters of the screen is a list to scroll
	 * inside something that is itself scrolling.
	 */
	.parent-basket__sheet {
		background: #fff;
		display: block;
		bottom: 0;
		box-shadow: 0 -20px 60px rgb(16 24 40 / 25%);
		left: 0;
		margin: 0;
		overflow: auto;
		padding: 0 18px 18px;
		position: fixed;
		right: 0;
		top: 0;
		transform: translateY(101%);
		transition: transform .22s ease;
		visibility: hidden;
		/* Over the page header, which is sticky at 20: reaching the top of the
		   screen means nothing if the way out is behind something else. */
		z-index: 30;
	}

	/* The middle of the sheet, over what is already there. */
	.parent-picking .parent-basket__working {
		align-items: center;
		background: rgb(255 255 255 / 72%);
		display: flex;
		inset: 0;
		padding: 0;
		position: fixed;
		z-index: 31;
	}

	.parent-picking .parent-basket__working[hidden] { display: none; }

	/* Stays put while the order scrolls under it, so the way out is always there. */
	.parent-basket__sheet-head {
		background: #fff;
		margin: 0 -18px 12px;
		padding: 16px 18px 12px;
		position: sticky;
		top: 0;
		z-index: 1;
	}

	.parent-picking .parent-basket__sheet { transform: none; visibility: visible; }
	.parent-basket__sheet .parent-basket__more { border: 0; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--parent-border); }

	/*
	 * Hung off the page rather than the body: the sheet lives inside it, and a
	 * backdrop outside would cover the sheet instead of sitting under it.
	 */
	.parent-picking .parent-signup::after {
		background: rgb(16 24 40 / 55%);
		content: "";
		inset: 0;
		position: fixed;
		z-index: 25;
	}

	.parent-basket__sheet-total { margin-left: auto; }
	.parent-basket__sheet-head {
		align-items: center;
		color: var(--parent-muted);
		display: flex;
		font-size: 12px;
		font-weight: 750;
		gap: 10px;
		letter-spacing: .12em;
		text-transform: uppercase;
	}

	.parent-basket__close {
		background: none;
		border: 0;
		color: var(--parent-muted);
		cursor: pointer;
		display: block;
		font-size: 24px;
		line-height: 1;
		padding: 0 4px;
	}
}

/* The address question, and the one field its answer needs ---------------- */
/*
 * The space under this row is its own, not borrowed from what follows it.
 *
 * Every other step is spaced by `fieldset { margin-bottom: 28px }`, and the
 * only fieldset on this one is the domain search — which is hidden unless
 * somebody is buying a name. So the gap between the address row and the Back
 * and Continue buttons existed while that search was on screen and collapsed
 * to nothing the rest of the time: the same step, spaced two different ways
 * depending on an element nobody could see.
 */
.parent-address { align-items: start; display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
/* The gap under a select is there to separate it from the label above it. The
   labels in this row are read aloud rather than shown, so there is nothing to
   be separated from — and the gap put this control four pixels below the field
   it sits beside. */
.parent-address .parent-select select { margin-top: 0; }
.parent-address__what { flex: 1 1 240px; margin: 0; min-width: 0; }
.parent-address__field { display: block; flex: 1 1 240px; margin: 0; min-width: 0; }
.parent-address__field[hidden] { display: none; }
.parent-address__field input { border: 1px solid #949a9c; border-radius: 6px; font: inherit; padding: 12px; width: 100%; }
.parent-address__field--search { display: block; }
.parent-address__seek { display: block; position: relative; }
/* Nothing sits in the field any more: a button wide enough to say what it does
   covered what was being typed. The step's own button searches. */
.parent-address__seek input { padding-right: 12px; }

/* While it is a search rather than the way on, it wears a magnifier instead of
   the arrow — same button, saying which of the two it is at the time. */
.parent-signup-actions [data-signup-next].is-seeking::after { content: none; }
.parent-signup-actions [data-signup-next].is-seeking::before {
	-webkit-mask: var(--parent-seek-icon) center / contain no-repeat;
	background: currentColor;
	content: "";
	display: inline-block;
	height: 18px;
	margin-right: 10px;
	mask: var(--parent-seek-icon) center / contain no-repeat;
	vertical-align: -3px;
	width: 18px;
}

:root {
	--parent-seek-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}

/* Waiting on the registry, inside the dialog the answer will appear in. */
.parent-domain-waiting { align-items: center; color: var(--parent-muted); display: flex; gap: 10px; margin: 16px 0; }
.parent-domain-waiting[hidden] { display: none; }

.parent-domain-waiting__spin {
	animation: parent-spin 0.7s linear infinite;
	border: 2px solid var(--parent-border);
	border-radius: 50%;
	border-top-color: var(--parent-primary);
	display: inline-block;
	height: 18px;
	width: 18px;
}

@keyframes parent-spin { to { transform: rotate(360deg); } }
.parent-address__note { color: var(--parent-muted); font-size: 13px; margin: 8px 0 18px; min-height: 1.2em; }

/* One address box, with what it found under it --------------------------- */
.parent-address-find { position: relative; }
/* It is a search field only so the browser does not treat it as an address; it
   should not look like one. */
.parent-address-find input::-webkit-search-decoration,
.parent-address-find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.parent-address-find__said { color: var(--parent-muted); display: block; font-size: 12.5px; margin-top: 6px; }

.parent-address-find__list {
	background: #fff;
	border: 1px solid var(--parent-border);
	border-radius: 10px;
	box-shadow: 0 18px 40px rgb(16 24 40 / 12%);
	left: 0;
	list-style: none;
	margin: 4px 0 0;
	max-height: 260px;
	overflow: auto;
	padding: 4px;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 4;
}

.parent-address-find__list[hidden] { display: none; }

.parent-address-find__list button {
	background: none;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	display: block;
	font: inherit;
	font-size: 13.5px;
	padding: 8px 10px;
	text-align: left;
	width: 100%;
}

.parent-address-find__list button:hover { background: rgb(47 75 255 / 8%); color: var(--parent-primary); }

/* Signup: buying a domain ------------------------------------------------ */
/* Nothing but the answers now, so it has no frame of its own until it has some. */
.parent-domain-search { margin-top: 4px; }
.parent-domain-search:has(.parent-domain-cart:not([hidden])) { border: 1px solid var(--parent-border); border-radius: 10px; margin-top: 14px; padding: 16px 18px; }
.parent-domain-search legend { font-size: 13px; font-weight: 650; padding: 0 6px; }
.parent-domain-search__row { display: flex; gap: 10px; }
.parent-domain-search__row input { flex: 1 1 auto; min-width: 0; }
.parent-domain-search__status { color: var(--parent-muted); margin: 10px 0 0; min-height: 1.2em; }
.parent-domain-results { display: grid; gap: 8px; margin-top: 12px; }
.parent-domain-result { align-items: center; background: #fff; border: 1px solid var(--parent-border); border-radius: 8px; cursor: pointer; display: flex; font: inherit; justify-content: space-between; padding: 10px 14px; }
.parent-domain-result:disabled { color: var(--parent-muted); cursor: default; opacity: .6; }
.parent-domain-result.is-chosen { border-color: var(--parent-ink); box-shadow: 0 0 0 1px var(--parent-ink); }
.parent-domain-contact { margin-top: 18px; }
.parent-domain-contact__lead { color: var(--parent-muted); margin: 0 0 12px; }

.parent-domain-dialog .parent-modal__panel { background: var(--parent-bg); color: var(--parent-ink); }
.parent-domain-dialog h2 { margin: 0 0 6px; }
.parent-domain-dialog__lead { color: var(--parent-muted); margin: 0 0 18px; }
.parent-domain-dialog .parent-modal__close { color: var(--parent-muted); }
.parent-domain-dialog .parent-signup-actions { justify-content: flex-end; margin-top: 20px; }
.parent-domain-result { align-items: center; background: #fff; border: 1px solid var(--parent-border); border-radius: 8px; cursor: pointer; display: flex; gap: 12px; margin-bottom: 8px; padding: 12px 14px; }
.parent-domain-result.is-taken { color: var(--parent-muted); cursor: default; opacity: .65; }
.parent-domain-result__name { flex: 1 1 auto; font-weight: 600; }
.parent-domain-result__price small { color: var(--parent-muted); font-weight: 400; }
/* What has been picked, kept together and foldable. */
.parent-domain-cart { border: 1px solid var(--parent-border); border-radius: 10px; margin-top: 12px; padding: 10px 12px; }

.parent-domain-cart > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 650;
	gap: 10px;
	justify-content: space-between;
	list-style: none;
}

.parent-domain-cart > summary::-webkit-details-marker { display: none; }
.parent-domain-cart > summary::before { content: "\25B8"; margin-right: 2px; transition: transform .15s ease; }
.parent-domain-cart[open] > summary::before { transform: rotate(90deg); }
.parent-domain-cart__total { color: var(--parent-muted); font-weight: 700; margin-left: auto; }
.parent-domain-chosen { display: grid; gap: 8px; margin-top: 12px; }
.parent-domain-picked { align-items: center; background: #fff; border: 1px solid var(--parent-border); border-radius: 8px; display: flex; gap: 12px; padding: 10px 14px; }
.parent-domain-picked label { align-items: center; display: flex; flex: 1 1 auto; gap: 8px; }
.parent-domain-picked__price { color: var(--parent-ink); white-space: nowrap; }
.parent-domain-picked__price small { color: var(--parent-muted); }
.parent-domain-picked__remove { background: none; border: 0; color: var(--parent-muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 0 4px; }

.parent-plan__domains { color: var(--parent-ink); font-weight: 600; }

/* Said under the form that is protected, rather than only in a floating badge
   somebody may never look at. */
.aws-recaptcha-note {
	font-size: .74rem;
	line-height: 1.5;
	margin: 14px 0 0;
	opacity: .7;
	text-align: center;
}

.aws-recaptcha-note a { color: inherit; }

/* Leaving the payment is a form, because it cancels a held address rather than
   only moving the page — it should still read as the link it stands in for. */
.parent-pay__abandon { margin: 6px 0 0; }
.parent-pay__abandon .parent-link { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }
.parent-pay__abandon .parent-link::before { content: "\2190"; margin-right: 8px; }

/* What the sign-in inside the wizard has to say for itself. */
.parent-signup__said { color: var(--parent-muted); font-size: 13.5px; margin: 0; min-height: 18px; }

/* Said above a signup that was picked up rather than begun. */
.parent-signup__resumed { align-items: baseline; color: var(--parent-muted); display: flex; font-size: 14px; gap: 10px; margin: 0 0 18px; }
.parent-signup__resumed[hidden] { display: none; }
.parent-signup__resumed .parent-link { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* Whose signup this is: the name is the way to everything the account can
   do, rather than a label sitting beside two more links. */
.parent-who { position: relative; }
.parent-who[hidden] { display: none; }

.parent-who__name {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 15px;
	font-weight: 650;
	gap: 8px;
	list-style: none;
	padding: 6px 2px;
}

/* The disclosure triangle a browser draws is not the arrow this wants. */
.parent-who__name::-webkit-details-marker { display: none; }

.parent-who__name::after {
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	content: "";
	height: 6px;
	transform: rotate(45deg) translateY(-2px);
	width: 6px;
}

.parent-who[open] .parent-who__name::after { transform: rotate(-135deg) translateY(-1px); }

.parent-who__menu {
	background: var(--parent-surface, #fff);
	border: 1px solid var(--parent-border);
	border-radius: 10px;
	box-shadow: 0 18px 40px rgb(16 24 40 / 12%);
	display: grid;
	min-width: 190px;
	padding: 6px;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 20;
}

.parent-who__item {
	border-radius: 7px;
	color: inherit;
	display: block;
	font-size: 14.5px;
	padding: 9px 12px;
	text-decoration: none;
	white-space: nowrap;
}

.parent-who__item:hover,
.parent-who__item:focus-visible { background: rgb(16 24 40 / 6%); }