/* nova-domain search screen.
 *
 * ONE FILE, NO PREPROCESSOR, NO BUILD STEP. What is written here is what the
 * browser gets, so a reviewer reading this file is reading the shipped CSS.
 *
 * IT IS IN A FILE RATHER THAN IN A <style> BLOCK because the page ships a
 * Content-Security-Policy with no 'unsafe-inline'. An external stylesheet needs
 * no hash and no nonce, so the policy can stay literal and a copy editor can
 * change a colour without invalidating a hash somebody would then have to
 * regenerate by hand.
 *
 * BOTH THEMES ARE HERE, AND THE LIGHT ONE IS THE BASE. Colour lives in custom
 * properties on :root and prefers-color-scheme redefines only those properties.
 * Nothing below the palette block knows which theme it is in, so a new
 * component cannot be legible in one theme and invisible in the other.
 *
 * SPACE AND TYPE ARE TOKENS TOO, AND THEY DID NOT USED TO BE. Colour was
 * tokenised from the start and everything else was a literal, so this file
 * carried twenty-two distinct rem values with no scale behind them: 0.85 and
 * 0.9 as the padding of two neighbouring cards, 2.25 and 2.5 as the gap above
 * two peer sections. Nobody chose those differences and nobody could remember
 * which was which. The scales below are the whole vocabulary now.
 */

:root {
	color-scheme: light dark;

	--bg: #f6f7f9;
	--surface: #ffffff;
	--surface-2: #f0f2f5;
	--ink: #12161c;
	--ink-soft: #5a6472;
	/* Darker than the #d9dee6 it replaces. A border at 1.26:1 against the page
	 * does not read as a border, which is why the panels on the management
	 * screens did not read as panels. */
	--line: #c9d1dc;
	--accent: #0b5c3f;
	--accent-hover: #0d6a4a;
	--accent-ink: #ffffff;
	--link: #0b5c3f;
	/* --focus stays blue and is now used ONLY where a focus ring sits on an
	 * accent-coloured surface, because green on green would vanish. Everything
	 * else focuses in the accent: see :focus-visible below. */
	--focus: #1263c4;

	/* The four answer states. They are named for what they MEAN and never for
	 * their colour, because the one rule this palette has to hold is that
	 * "we could not check" never borrows the colour of "yes".
	 *
	 * COLOUR IS THE THIRD CHANNEL HERE, NOT THE FIRST. Measured under a Vienot
	 * 1999 deuteranope simulation, --yes, --no and --unsure all collapse to the
	 * same dark olive (contrast 1.06 to 1.15 between any pair, 1.03 between the
	 * tints), and no readable red/green/amber trio survives both deuteranopia
	 * and protanopia on luminance alone. So each state also carries a GLYPH
	 * (a filled disc with a shape in it) and a CARD TEXTURE (tinted or not,
	 * solid rule or dashed). Remove all colour from this page and the four
	 * states are still four states. */
	--yes: #0b5c3f;
	--yes-bg: #e6f4ee;
	--no: #7a2530;
	--no-bg: #fbecee;
	--unsure: #6b4a06;
	--unsure-bg: #fdf3dd;
	/* "We do not sell this ending" used to be painted in --no alongside "taken"
	 * and "reserved". It is not a refusal of the customer's name at all; it is
	 * a fact about our shelf, and an alarm colour tells somebody they made a
	 * mistake when they did not. */
	--other: #434c59;
	--other-bg: #eef0f3;

	--shadow-1: 0 1px 2px rgba(16, 22, 32, .06), 0 4px 12px rgba(16, 22, 32, .05);

	/* Type scale. The front door's headline was 30.4px against a field of
	 * 40 to 60px on every registrar it was compared with: the smallest of six
	 * by thirty percent, at a weight (600) that reads as a table header. */
	--text-xs: 0.8125rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.375rem;
	--text-xl: 1.75rem;
	--text-2xl: 2.25rem;
	--text-3xl: 3.25rem;

	--leading-tight: 1.1;
	--leading-snug: 1.3;
	--leading-body: 1.55;
	--track-tight: -0.025em;

	/* Spacing scale, 4px based. Eight steps, not twenty-two literals. */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;

	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-pill: 999px;

	--header-h: 4rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0e1116;
		--surface: #161a21;
		--surface-2: #1d232c;
		--ink: #e8ecf1;
		--ink-soft: #9aa5b4;
		--line: #333b47;
		/* #24a577 and not the #35c48c this used to be. The old dark accent was
		 * a bright mint and the light one is a deep forest green: not one colour
		 * at two lightnesses but two different colours, which read as two
		 * brands, and the mint call-to-action sitting inside an amber panel on
		 * the domain screen was the visible symptom. */
		--accent: #24a577;
		--accent-hover: #2bbb88;
		/* DELIBERATE DEVIATION from docs/UI-CRITIQUE.md section 3, which asks
		 * for #ffffff here. White on #24a577 measures 3.12:1, which fails AA
		 * for body text and every level for small text. The same document's
		 * "what must not change" section requires AAA on all text, and the two
		 * instructions conflict; this one wins. The near-black ink measures
		 * 6.10:1, which is AAA for the 18px semibold it is actually used at. */
		--accent-ink: #06130d;
		--link: #7fd8b3;
		--focus: #6fb0ff;

		--yes: #4fd39c;
		--yes-bg: #10291f;
		--no: #ff9aa6;
		--no-bg: #2a1417;
		--unsure: #ffcf6b;
		--unsure-bg: #2a2110;
		--other: #a8b3c2;
		--other-bg: #1b2029;

		--shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .28);
	}
}

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

html {
	/* 100% rather than a pixel size: a customer who has enlarged their browser
	 * text is telling us something, and a fixed root size overrules them. */
	font-size: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: var(--leading-body);
	/* No font is fetched. A webfont would be a third-party request, and the
	 * footer's promise that this page "loads nothing from anywhere else" is
	 * worth more than a typeface. A same-origin woff2 would keep that promise
	 * and is the obvious next step; it is not taken here because it is a new
	 * binary asset and a CSP change, and the two fixes that recover most of the
	 * difference cost nothing: weight 700 on the display type, and a real size
	 * for it. Both are applied below. */
}

/* LINKS HAVE A COLOUR NOW. There was no `a { color }` rule anywhere in this
 * file, so every breadcrumb, every domain name in a table and every Edit and
 * Delete on the management screens rendered in the browser's default blue,
 * underlined, in both themes. That colour is in no palette here. */
a {
	color: var(--link);
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* The focus ring is the accent and not an off-palette blue. --focus is kept for
 * the one case this cannot serve: a control sitting ON an accent-coloured
 * surface, where green on green would disappear. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.buy:focus-visible,
button[type="submit"]:focus-visible,
a.action:focus-visible {
	outline-color: var(--focus);
}

.wrap {
	width: 100%;
	/* 36rem and not 44. At 44rem the lede ran to 95 to 105 characters a line,
	 * about forty percent past a comfortable measure; at 36rem it is around 72
	 * and the search field reads as deliberate rather than stranded. */
	max-width: 36rem;
	margin: 0 auto;
	padding: var(--space-6) var(--space-5) var(--space-9);
}

/* ------------------------------------------------------------- site header
 *
 * Every registrar this product was compared against has a persistent bar with a
 * logo and a way to sign in. Ours had a paragraph of text where a header should
 * be, and the brand was not even a link, which is the loudest "internal tool"
 * signal a stranger reads in the first second. There was also no route from the
 * front door to /sign-in at all.
 */

.topbar {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.topbar-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	min-height: var(--header-h);
	max-width: 72rem;
	margin: 0 auto;
	padding: var(--space-2) var(--space-5);
}

/* The wordmark. .brand is the same thing on the management screens, which have
 * their own nav; one rule rather than two so the two chromes cannot drift into
 * two different brands. */
.mark,
.topnav .brand {
	color: var(--ink-soft);
	font-size: var(--text-base);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
}

.mark strong,
.topnav .brand strong {
	color: var(--ink);
	font-weight: 700;
}

.mark:hover,
.topnav .brand:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.topbar nav {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	font-size: var(--text-sm);
}

.topbar nav a {
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
}

.topbar nav a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.topbar .currency {
	color: var(--ink-soft);
	font-weight: 400;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
	margin: 0 0 var(--space-6);
}

h1 {
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: var(--leading-tight);
	letter-spacing: var(--track-tight);
	margin: 0 0 var(--space-3);
}

/* DISPLAY SIZE ON THE FRONT DOOR ONLY. It was 30.4px at weight 600 there, the
 * smallest headline of six registrars by thirty percent and, in a system UI
 * font, the weight of a table header. A form's page title is a different job
 * and stays at --text-xl. */
body.is-search h1 {
	font-size: clamp(2rem, 1.1rem + 2.8vw, var(--text-3xl));
}

.lede {
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-md);
	line-height: var(--leading-body);
	max-width: 34rem;
}

/* ---------------------------------------------------------------- form */

.search {
	margin: var(--space-6) 0 0;
}

.field {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.field label {
	/* The label is real and readable by a screen reader; it is not shown
	 * because the placeholder and the heading already say what to type. It is
	 * NOT display:none, which would take it out of the accessibility tree. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* THE SEARCH FIELD ITSELF IS NOT REDESIGNED, ONLY RESTED ON A SHADOW. Judged
 * blind against five registrars it was the best of the six: the tallest, the
 * largest text, and the only one with an unambiguous labelled button. The one
 * measured defect was that a 1px border on white against a near-white page is
 * 1.26:1, so the box did not announce itself as the thing to use. */
input[type="search"] {
	flex: 1 1 16rem;
	min-width: 0;
	font: inherit;
	font-size: var(--text-md);
	padding: var(--space-3) var(--space-4);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-1);
	-webkit-appearance: none;
	appearance: none;
}

input[type="search"]::placeholder {
	color: var(--ink-soft);
	opacity: 1;
}

button[type="submit"] {
	flex: 0 0 auto;
	font: inherit;
	font-size: var(--text-md);
	font-weight: 600;
	padding: var(--space-3) var(--space-6);
	color: var(--accent-ink);
	background: var(--accent);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
}

button[type="submit"]:hover {
	background: var(--accent-hover);
}

.promise {
	margin: var(--space-3) 0 0;
	font-size: var(--text-sm);
	color: var(--ink);
}

/* The ending choices. THEY ARE STILL REAL CHECKBOXES: the input keeps its type,
 * its name, its id and its label, so keyboard and screen-reader behaviour is
 * exactly what it was. Only the painting changed. Native checkboxes with
 * accent-color are the visual signature of a page nobody styled, and at 16.8px
 * they were also under the WCAG 2.2 target-size minimum of 24 by 24. */
.extensions {
	border: 0;
	/* A fieldset takes its min-inline-size from its contents rather than from
	 * its parent, which is how a group of pills can end up setting a floor
	 * wider than the phone it is on. Zero it explicitly. */
	min-inline-size: 0;
	margin: var(--space-4) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
}

.extensions legend {
	padding: 0;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--ink-soft);
	margin: 0 0 var(--space-2);
}

.ext input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ext label {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: var(--space-1) var(--space-4);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--ink);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.ext label:hover {
	border-color: var(--accent);
}

.ext input:checked + label {
	color: var(--accent-ink);
	background: var(--accent);
	border-color: var(--accent);
}

/* The pill is the checkbox's only visible surface, so the focus ring has to
 * follow the focus onto it. */
.ext input:focus-visible + label {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.ext input:checked:focus-visible + label {
	outline-color: var(--focus);
}

.ext-soon {
	font-size: var(--text-sm);
	color: var(--ink-soft);
	margin: var(--space-3) 0 0;
}

/* ---------------------------------------------------------------- results */

.results {
	margin: var(--space-7) 0 0;
}

.results h2,
.ideas h2 {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--ink-soft);
	margin: 0 0 var(--space-3);
	font-weight: 700;
}

.answers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* THE CARD IS A GRID AND NOT A WRAPPING FLEX ROW. With space-between and
 * flex-wrap the action column's position depended on how long the domain name
 * was, so two stacked cards did not line their prices up. */
.answer {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"glyph name action"
		"glyph meta action";
	column-gap: var(--space-4);
	row-gap: var(--space-1);
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 6px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-1);
	padding: var(--space-4) var(--space-5);
}

/* The glyph disc: the state's second channel. It works at a glance, it works in
 * greyscale, and it works in a screenshot pasted into a chat window. */
.glyph {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--radius-pill);
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1;
	color: var(--surface);
	background: var(--ink-soft);
}

.answer .glyph {
	grid-area: glyph;
}

.answer .name {
	grid-area: name;
	font-size: var(--text-md);
	font-weight: 600;
	word-break: break-all;
}

.answer .meta {
	grid-area: meta;
	min-width: 0;
}

.answer .verdict {
	display: block;
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.answer .detail {
	display: block;
	font-size: var(--text-sm);
	color: var(--ink-soft);
	max-width: 34rem;
}

.answer .action {
	grid-area: action;
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-1);
}

.answer .price {
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--ink);
	/* Tabular figures so a column of prices lines up. The number itself is
	 * never touched: it is printed exactly as the API sent it. */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.answer .renewal {
	font-size: var(--text-xs);
	font-weight: 400;
	color: var(--ink-soft);
	white-space: nowrap;
}

/* The four states, in three channels: colour, tint and rule texture.
 *
 * is-yes    tinted, solid rule
 * is-no     UNTINTED, solid rule
 * is-unsure tinted, DASHED rule
 * is-other  tinted grey, solid rule
 *
 * Two of those are distinguishable with every colour stripped out, which is the
 * point: the three shipped colours simulate to one under deuteranopia. */
.answer.is-yes {
	border-left-color: var(--yes);
	background: var(--yes-bg);
}

.answer.is-yes .verdict {
	color: var(--yes);
}

.answer.is-yes .glyph {
	background: var(--yes);
}

.answer.is-no {
	border-left-color: var(--no);
}

.answer.is-no .verdict {
	color: var(--no);
}

.answer.is-no .glyph {
	background: var(--no);
}

/* The "we could not check" state. It is deliberately NOT a quieter version of
 * the taken state and NOT a dimmer version of the available one: it is its own
 * colour AND its own texture, because a customer must never read it as either
 * answer. */
.answer.is-unsure {
	border-left-color: var(--unsure);
	border-left-style: dashed;
	background: var(--unsure-bg);
}

.answer.is-unsure .verdict {
	color: var(--unsure);
}

.answer.is-unsure .glyph {
	background: var(--unsure);
}

.answer.is-other {
	border-left-color: var(--other);
	background: var(--other-bg);
}

.answer.is-other .verdict {
	color: var(--other);
}

.answer.is-other .glyph {
	background: var(--other);
}

.buy {
	display: inline-block;
	font-size: var(--text-base);
	font-weight: 600;
	text-decoration: none;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	color: var(--accent-ink);
	background: var(--accent);
	white-space: nowrap;
}

.buy:hover {
	background: var(--accent-hover);
}

/* "Ordering opens shortly" used to be a sentence in 13.6px grey, which is a
 * card whose only call to action is a footnote. It is a bordered block now. */
.pending {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	color: var(--ink);
	background: var(--surface-2);
	border: 1px dashed var(--accent);
	border-radius: var(--radius-sm);
	max-width: 16rem;
	text-align: right;
}

/* ------------------------------------------------------------ suggestions */

.ideas {
	margin: var(--space-7) 0 0;
}

.ideas p.caveat {
	margin: 0 0 var(--space-3);
	font-size: var(--text-sm);
	color: var(--ink-soft);
}

.idea-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* A chip carries its state now. view.go worked out "looks free" against "taken"
 * for every suggestion and the template threw it away, so two semantically
 * opposite chips were pixel-identical grey pills. */
.idea {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-sm);
}

.idea .glyph {
	width: 1.125rem;
	height: 1.125rem;
	font-size: var(--text-xs);
}

.idea.is-unsure .glyph {
	background: var(--unsure);
}

.idea.is-no {
	opacity: 0.72;
}

.idea.is-no .glyph {
	background: var(--no);
}

.idea a {
	color: var(--ink);
	text-decoration: none;
	word-break: break-all;
}

.idea a:hover {
	text-decoration: underline;
}

.idea .state {
	color: var(--ink-soft);
	font-size: var(--text-xs);
}

/* ---------------------------------------------------------------- notices */

.notice {
	margin: var(--space-5) 0 0;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--line);
	border-left: 6px solid var(--unsure);
	background: var(--unsure-bg);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
}

.notice p {
	margin: 0;
}

/* A shared note: one explanation lifted off the two or more cards that were
 * each printing it in full. Four identical thirty-one word paragraphs stacked
 * down a screen is 124 words of repetition, and repetition is what turned a
 * well-written reassurance into something that reads as a catastrophe. */
.notes {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
}

/* The catalogue statement is the first thing in the results block and has no
 * heading above it to space it off the form, so it takes the same gap the
 * results heading would have had. */
#results > .notes {
	margin-top: var(--space-7);
}

.note {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--line);
	border-left: 6px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	font-size: var(--text-sm);
}

.note p {
	margin: 0;
	max-width: 40rem;
}

.note b {
	font-weight: 700;
}

.note .retry {
	display: inline-block;
	margin-top: var(--space-2);
	font-weight: 600;
}

.note.is-unsure {
	border-left-color: var(--unsure);
	border-left-style: dashed;
	background: var(--unsure-bg);
}

.note.is-unsure .glyph {
	background: var(--unsure);
}

.note.is-unsure b {
	color: var(--unsure);
}

.note.is-no {
	border-left-color: var(--no);
}

.note.is-no .glyph {
	background: var(--no);
}

.note.is-no b {
	color: var(--no);
}

.note.is-yes {
	border-left-color: var(--yes);
	background: var(--yes-bg);
}

.note.is-yes .glyph {
	background: var(--yes);
}

.note.is-yes b {
	color: var(--yes);
}

.note.is-other {
	border-left-color: var(--other);
	background: var(--other-bg);
}

.note.is-other .glyph {
	background: var(--other);
}

.note.is-other b {
	color: var(--other);
}

.hint {
	margin: var(--space-6) 0 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

/* ------------------------------------------------------------- site footer
 *
 * The old footer was two sentences of 13.6px grey. It carried the strongest
 * thing this product has to say ("prices are what you pay") in the least
 * visible place on the page, and it named no company, no registry and no terms.
 */

.sitefoot {
	border-top: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.sitefoot-in {
	max-width: 72rem;
	margin: 0 auto;
	padding: var(--space-6) var(--space-5);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-5) var(--space-6);
}

.sitefoot h2 {
	margin: 0 0 var(--space-2);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 700;
	color: var(--ink);
}

.sitefoot p {
	margin: 0 0 var(--space-2);
}

.sitefoot ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sitefoot li {
	margin: 0 0 var(--space-1);
}

.sitefoot .fine {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--line);
	font-size: var(--text-xs);
}

/* ------------------------------------------------------- the front door only
 *
 * The measured complaint: a 672px document pinned to the top left of a 1440px
 * field, with 610px of empty grey below it. Vercel's front door is just as
 * empty and reads as confidence, because the emptiness is distributed around
 * the content rather than dumped underneath it.
 *
 * So the search page is a column: header, hero, footer, filling the viewport,
 * with the hero optically centred in whatever is left. Once results exist the
 * centring is released to the top, because a list that grows past the fold must
 * not start half way down the screen.
 *
 * TEXT STAYS LEFT ALIGNED INSIDE THE COLUMN. Centred body text is a marketing
 * reflex and it would wreck the result list.
 */

body.is-search {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

body.is-search .wrap {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

body.is-search.has-results .wrap {
	justify-content: flex-start;
	padding-top: var(--space-7);
}

/* ------------------------------------------------------------- small screens
 *
 * 40rem and not the 30rem this used to be. 30rem is 480px, so a 390px phone got
 * the stacked layout and a 481px phone did not, which left large phones in
 * landscape and small tablets on the desktop layout.
 *
 * THE MOBILE LAYOUT IS OTHERWISE LEFT ALONE ON PURPOSE. Judged blind at 390px
 * it beat two of the references outright: nothing overflows, the button drops
 * to full width at a 52px tap target, the cards stack and nothing truncates.
 */

@media (max-width: 40rem) {
	.wrap {
		padding: var(--space-5) var(--space-4) var(--space-7);
	}

	.topbar-in,
	.sitefoot-in {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}

	/* The currency belongs on the price, and on a phone the header has room for
	 * the brand and the one link somebody came for. It is still stated in the
	 * footer's terms, so nothing is lost. */
	.topbar .currency {
		display: none;
	}

	button[type="submit"] {
		flex: 1 1 100%;
	}

	.answer {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"glyph name"
			"glyph meta"
			"action action";
		align-items: start;
		row-gap: var(--space-2);
	}

	.answer .action {
		align-items: stretch;
		text-align: left;
	}

	.buy,
	.pending {
		max-width: none;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* The script sets aria-busy while a live search is in flight. Fading rather
 * than blanking keeps the previous answers readable, so nothing on screen is
 * ever empty for the length of a network round trip. */
[aria-busy="true"] {
	opacity: 0.55;
}

/* ================================================================= manage
 *
 * The management screens: the domain list, one domain, its DNS records and the
 * account. Same file, same custom properties, no second stylesheet, because a
 * second stylesheet is a second palette and the two drift.
 *
 * EVERYTHING BELOW IS SCOPED UNDER .is-manage OR A CLASS ONLY THESE PAGES USE.
 * The search screen's rules are above and untouched. In particular ".field
 * label" up there is visually hidden on purpose, and these forms need visible
 * labels, so the override is explicit and scoped rather than a change to the
 * rule the search box depends on.
 */

.wrap.is-manage {
	/* Wider than the search screen, because a DNS table has five columns and a
	 * 44rem column would wrap every one of them. It is still a measure and not
	 * a full-width sprawl: prose on these pages stays readable. */
	max-width: 62rem;
}

/* ------------------------------------------------------------------ nav */

.topnav {
	display: flex;
	align-items: center;
	gap: var(--space-3) var(--space-5);
	flex-wrap: wrap;
	margin: 0 0 var(--space-6);
	padding: 0 0 var(--space-4);
	border-bottom: 1px solid var(--line);
}

.topnav .brand {
	margin: 0;
	flex: 0 0 auto;
}

.topnav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
}

/* NAV ITEMS ARE NOT UNDERLINED. They were, which meant the current-page
 * indicator (a thicker underline) was invisible: every item already had one. */
.topnav a {
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
}

.topnav a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.topnav [aria-current="page"] {
	border-bottom: 2px solid var(--accent);
	padding-bottom: 2px;
}

.signout button {
	font: inherit;
	font-size: var(--text-sm);
	padding: var(--space-2) var(--space-4);
	color: var(--ink);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.crumb {
	margin: 0 0 var(--space-2);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

/* --------------------------------------------------------------- notices */

.is-manage .notice {
	margin: 0 0 var(--space-5);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--surface-2);
	border: 1px solid var(--line);
}

.is-manage .notice p {
	margin: 0;
}

/* A problem borrows the "no" colours and never the "yes" ones. Same rule as
 * the search screen's palette: a state is named for what it means. */
.is-manage .notice.is-bad {
	background: var(--no-bg);
	border-color: var(--no);
	color: var(--no);
}

/* ------------------------------------------------------------- attention
 *
 * A domain that is not finished. It is the loudest thing on the page on
 * purpose: docs/PROVISIONING.md section 3 says a half-provisioned domain must
 * never be silent, and a colour that blends in is a quieter kind of silent.
 */

.attention {
	margin: 0 0 var(--space-6);
	padding: var(--space-5) var(--space-5) var(--space-1);
	background: var(--unsure-bg);
	border: 1px solid var(--unsure);
	border-radius: var(--radius-lg);
}

.attention h2,
.trouble.is-lead h2 {
	margin: 0 0 var(--space-4);
	font-size: var(--text-lg);
	color: var(--unsure);
}

.trouble {
	margin: 0 0 var(--space-5);
}

.trouble.is-lead {
	margin: 0 0 var(--space-6);
	padding: var(--space-5);
	background: var(--unsure-bg);
	border: 1px solid var(--unsure);
	border-radius: var(--radius-lg);
}

.trouble .name {
	margin: 0 0 var(--space-1);
	font-weight: 600;
}

.trouble .headline {
	margin: 0 0 var(--space-2);
}

.trouble .bought,
.trouble .waiting,
.trouble .needs-us {
	margin: 0 0 var(--space-2);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.trouble form {
	margin: var(--space-3) 0 0;
}

/* ---------------------------------------------------------------- tables */

.tablewrap {
	/* The one place horizontal scrolling is allowed, and it is inside the
	 * element rather than on the page: a DNS value can be a 200 character TXT
	 * record, and a page body that scrolls sideways on a phone is broken. */
	overflow-x: auto;
	margin: 0 0 var(--space-6);
}

table.rows {
	width: 100%;
	/* A MINIMUM WIDTH, so the table SCROLLS inside .tablewrap on a narrow screen
	 * instead of squeezing five columns into 400 pixels. Without it, width:100%
	 * wins and a hostname breaks one character per line, which is a column
	 * nobody can read and a value nobody can copy. */
	min-width: 38rem;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

table.rows th,
table.rows td {
	text-align: left;
	vertical-align: top;
	padding: var(--space-3) var(--space-3);
	border-bottom: 1px solid var(--line);
}

table.rows thead th {
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
	border-bottom-width: 2px;
}

table.rows tbody tr:hover {
	background: var(--surface-2);
}

table.rows .value code {
	/* break-word and not "anywhere": a long TXT record still wraps, and a
	 * hostname breaks at its full stops rather than mid-label. */
	overflow-wrap: break-word;
}

table.rows .note {
	display: block;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

table.rows .money {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

table.rows .actions {
	white-space: nowrap;
}

.flag {
	display: inline-block;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	background: var(--unsure-bg);
	color: var(--unsure);
	font-size: var(--text-xs);
}

/* The accessible-only caption. Not display:none, which removes it from the
 * accessibility tree, which is the one place it is for. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ----------------------------------------------------------- facts, cards */

.facts {
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	gap: var(--space-2) var(--space-5);
	margin: 0 0 var(--space-6);
}

.facts dt {
	color: var(--ink-soft);
}

.facts dd {
	margin: 0;
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-4);
	margin: 0 0 var(--space-6);
}

.card {
	padding: var(--space-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-1);
}

.card h3 {
	margin: 0 0 var(--space-2);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
}

.card p {
	margin: 0 0 var(--space-1);
	font-size: var(--text-sm);
}

.card .who {
	font-weight: 600;
}

.is-manage section {
	margin: 0 0 var(--space-7);
}

/* ONE VERTICAL RHYTHM AND NOT THREE. Each section's first child carried its own
 * top margin on top of the section's, so heading-to-content gaps down one page
 * measured roughly 45px, 35px and 30px for no reason anybody chose. */
.is-manage section > :first-child {
	margin-top: 0;
}

.is-manage h2 {
	font-size: var(--text-lg);
	margin: 0 0 var(--space-3);
}

ul.plain {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
}

ul.plain li {
	padding: var(--space-1) 0;
}

/* A standing rule of the product, said on the page. It is styled to be read
 * rather than skipped, because a rule nobody can find is a rule the next
 * person quietly removes. */
.rule {
	/* Prose wraps; it never sets the page's width. */
	overflow-wrap: break-word;
	margin: 0 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	border-left: 3px solid var(--accent);
	background: var(--surface-2);
	font-size: var(--text-sm);
}

.hint {
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.raw summary {
	cursor: pointer;
	color: var(--ink-soft);
}

.notyet ul {
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

/* ------------------------------------------------------------ manage forms
 *
 * The search screen hides its one label because the heading and the
 * placeholder already say what to type. A form with eleven inputs cannot do
 * that, so these labels are visible, and the override is scoped to .stack so
 * the search box keeps its own rule.
 */

form.stack .field {
	display: block;
	margin: 0 0 var(--space-4);
}

form.stack .field label {
	position: static;
	display: block;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	margin: 0 0 var(--space-1);
	font-weight: 600;
	font-size: var(--text-sm);
}

form.stack .field .hint {
	display: block;
	margin: var(--space-1) 0 0;
	font-size: var(--text-sm);
}

form.stack input[type="text"],
form.stack input[type="email"],
form.stack input[type="password"],
form.stack input[type="number"],
form.stack select,
form.typepick select {
	font: inherit;
	width: 100%;
	max-width: 32rem;
	padding: var(--space-3);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

/* The field a refusal points at. The API sends a JSON Pointer with every
 * validation failure and the form carries it here, so the message and the box
 * it is about are not at opposite ends of the page. */
form.stack .field.is-wrong input,
form.stack .field.is-wrong select {
	border-color: var(--no);
	border-width: 2px;
}

form.typepick {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
}

form.typepick label {
	flex: 0 0 100%;
	font-weight: 600;
	font-size: var(--text-sm);
}

form.typepick select {
	/* A SMALL FLEX BASIS AND min-width:0. A basis of 22rem is 352 pixels, which
	 * with the editor's padding and the page's is wider than a 400 pixel phone,
	 * and a flex item's default min-width of auto means it refuses to shrink
	 * below its content. Between them that is a page that scrolls sideways,
	 * which the tables are allowed to do inside their own box and the document
	 * is not. */
	flex: 1 1 12rem;
	min-width: 0;
	max-width: 34rem;
}

form.typepick button {
	font: inherit;
	padding: var(--space-3) var(--space-4);
	color: var(--ink);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.whattype {
	margin: 0 0 var(--space-4);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.editor {
	padding: var(--space-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-1);
}

.confirm {
	padding: var(--space-5);
	background: var(--no-bg);
	border: 1px solid var(--no);
	border-radius: var(--radius-lg);
}

.confirm h2 {
	color: var(--no);
}

button.danger {
	background: var(--no);
	color: var(--surface);
}

a.action {
	display: inline-block;
	font-weight: 600;
	padding: var(--space-3) var(--space-5);
	color: var(--accent-ink);
	background: var(--accent);
	border-radius: var(--radius-md);
	text-decoration: none;
}

/* One media query, and it does one thing: take some padding off the panels so a
 * narrow screen spends its width on content rather than on frames.
 *
 * THE PAGE'S OWN MARGINS ARE NOT REPEATED HERE. The search screen's small-screen
 * block above already narrows .wrap, and these pages use the same .wrap. A
 * second rule setting the same property to a slightly different number is how
 * two screens end up with two different margins for no reason anybody can
 * remember. Everything else on these pages reflows on its own, so there is no
 * second layout to keep in agreement with the first. */
@media (max-width: 40rem) {
	.editor,
	.confirm,
	.trouble.is-lead,
	.attention {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}
}