/* fastnamechecker: one dark theme. Sections: tokens, base, header and search, toolbar, name cards, tiles, tooltip, shortlist, motion, small screens. */
/* The site's font, served by the site itself. One file covers every weight. */
@font-face { font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/manrope-latin.woff2) format("woff2"); }
:root {
  color-scheme: dark;
  --ink: #d0d4c6; --muted: #838a7b;                 /* text is never white: a soft grey with a cream tint */
  --head: linear-gradient(180deg, #e6ecd4 8%, #84dcc6 96%);  /* large type (names, page titles): cream fading down into mint */
  --quiet: linear-gradient(180deg, #c3c8b8 10%, #7a8073 95%); /* the plain words of a section title: cream-tinted grey */
  --bg: #000;                                       /* the page: as dark as it goes */
  --accent: var(--head);                            /* the words in a heading that carry colour, and "fastname" in the logo: the same cream into mint */
  --ok: 52, 227, 176; --ok-soft: #8df3d3;       /* available: the only colour meant to stand out */
  --brand: 132, 220, 198; --brand-soft: #b4e6d3; /* the site's own colour: the mint end of the cream-to-mint gradient (search box, main buttons, links). Status colours are separate. */
  --hot: 226, 232, 208;                         /* the cream end of the gradient, used for the second background glow */
  --sale: 61, 109, 255; --sale-soft: #93b0ff;   /* taken, for sale */
  --bad: 255, 68, 88; --bad-soft: #b8666f;      /* not available: deliberately quiet */
  --pink: #f58fb4;
  /* The heart: one shape, as an outline and filled in. A saved heart fades from cream into pink, the way the logo fades into mint. */
  --heart-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.9' stroke-linejoin='round' fill='none'%3E%3Cpath d='M12 20.4C9 18.3 3.2 14.1 3.2 9.1 3.2 6.3 5.4 4.2 8 4.2c1.6 0 3.1.8 4 2.2.9-1.4 2.4-2.2 4-2.2 2.6 0 4.8 2.1 4.8 4.9 0 5-5.8 9.2-8.8 11.3z'/%3E%3C/svg%3E");
  --heart-full: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.9' stroke-linejoin='round' fill='%23000'%3E%3Cpath d='M12 20.4C9 18.3 3.2 14.1 3.2 9.1 3.2 6.3 5.4 4.2 8 4.2c1.6 0 3.1.8 4 2.2.9-1.4 2.4-2.2 4-2.2 2.6 0 4.8 2.1 4.8 4.9 0 5-5.8 9.2-8.8 11.3z'/%3E%3C/svg%3E");
  --heart: linear-gradient(180deg, #f9dccf 6%, #f58fb4 58%, #ec6f9c 100%);
  --r-lg: 24px; --r-md: 14px; --r-sm: 10px; --r-xs: 7px;
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.075), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  --raised: linear-gradient(180deg, #1a1b1d, #121314);
  /* Card shading has a fixed size, so a taller card is never a lighter card */
  --card: radial-gradient(460px 280px at 0 0, rgba(var(--brand), 0.14), transparent 70%) no-repeat, linear-gradient(150deg, #17181a 0, #0f1011 260px, #0b0b0c 620px) 0 0 / 100% 760px no-repeat, #0b0b0c;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sans: Manrope, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; transition: padding-right 0.22s ease; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
/* People who move around with the Tab key see a clear ring on whatever they are on. Mouse and touch never show it.
   The search box is the exception: it has its own glow (see .searchbox input). */
:focus-visible { outline: 2px solid rgba(var(--brand), 0.9); outline-offset: 3px; }
::placeholder { color: #7b8173; }
::selection { background: #2c4a40; }
.ic { display: block; flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.heart { display: block; flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--heart-line) center / contain no-repeat; mask: var(--heart-line) center / contain no-repeat; }
/* Scrollbar: a thin dark thumb, no arrow buttons */
@supports (-moz-appearance: none) { html, .drawer { scrollbar-width: thin; scrollbar-color: #1c1e21 #000; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: #1c1e21; border: 2px solid var(--bg); border-radius: 8px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.025); border-radius: var(--r-sm); background: var(--raised); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), var(--edge); color: #a2a797; font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: transform 0.14s ease, background 0.14s ease, color 0.14s ease, border-color 0.14s ease; }
.btn:hover { transform: translateY(-1px); background: linear-gradient(180deg, #212325, #17181a); color: var(--ink); }
.btn:active { transform: scale(0.97); }
.btn.go { justify-content: center; border-color: rgba(var(--brand), 0.3); background: linear-gradient(180deg, rgba(var(--brand), 0.17), rgba(var(--brand), 0.09)); color: var(--brand-soft); font-weight: 700; }
.btn.go:hover { border-color: rgba(var(--brand), 0.55); background: linear-gradient(180deg, rgba(var(--brand), 0.24), rgba(var(--brand), 0.13)); }
.btn.wide { width: 100%; margin-bottom: 10px; }
.flat { padding: 0; border: 0; background: none; color: var(--muted); font-size: 13.5px; font-weight: 600; transition: color 0.14s ease; }
.flat:hover { color: var(--ink); }
.hint { color: var(--muted); font-size: 13.5px; }

/* ---------- Header and search ---------- */
/* One element in two layouts: centred on the empty page, a sticky row (logo, search, shortlist) once there are results. */
.top { position: relative; padding: 16px 40px; container: top / inline-size; }
.bar { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, 720px) minmax(max-content, 1fr); align-items: center; gap: 24px; }
.brand { justify-self: start; font-size: 21px; line-height: 1; transition: filter 0.14s ease; }
.brand:hover { filter: brightness(1.3); }
#openShortlist { justify-self: end; transition: opacity 0.24s ease, transform 0.24s var(--ease), visibility 0s, background 0.14s ease, color 0.14s ease; }
#openShortlist.empty { opacity: 0; transform: scale(0.8); visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; }
#openShortlist .heart { font-size: 16px; transition: transform 0.18s ease; }
#openShortlist:hover .heart { transform: scale(1.22); }
.count { display: inline-block; padding: 0 7px; border-radius: var(--r-xs); background: rgba(255, 255, 255, 0.07); color: var(--ink); font-size: 12px; }
body.drawer-open #openShortlist, body.drawer-closing #openShortlist { visibility: hidden; }
body:not(.home) .top { position: sticky; top: 0; z-index: 10; background: linear-gradient(rgba(0, 0, 0, 0.96) 86%, rgba(0, 0, 0, 0)); } /* fades out at the bottom, so it does not cut a hard band across the background texture */
body:not(.home) .top h1 { display: none; }
body.home .top { flex: 1; display: grid; align-content: center; padding-bottom: 16vh; }
body.home .bar { display: block; }
body.home .brand { display: none; }
body.home .search { max-width: 720px; margin: 0 auto; text-align: center; }
body.home #openShortlist { position: absolute; top: 16px; right: 40px; }
/* The logo: "fastname" carries the site's colours, only "fast" is bold, "checker" is quiet. */
.wordmark { font-weight: 500; letter-spacing: -0.05em; white-space: nowrap; color: transparent; background: linear-gradient(180deg, #8f9585 10%, #666c5f 95%); -webkit-background-clip: text; background-clip: text; }
.wordmark span { color: transparent; background-image: var(--accent); -webkit-background-clip: text; background-clip: text; }
.wordmark::before { content: ""; display: inline-block; width: 0.76em; height: 0.62em; margin-right: 0.34em; vertical-align: 0.01em; background: url(mark.svg?v=4) center / contain no-repeat; } /* the tick symbol, the same one as the tab icon */
.wordmark b { font-weight: 800; }
h1.wordmark { margin-bottom: 30px; font-size: clamp(30px, 10vw, 64px); line-height: 1; } /* sized so the whole logo fits on one line on a phone */
.searchbox { position: relative; }
.searchbox input, .searchbox .q { width: 100%; padding: 15px 52px; border: 1px solid transparent; border-radius: 16px; background: linear-gradient(#050506, #050506) padding-box, linear-gradient(90deg, rgba(var(--brand), 0.55), rgba(var(--hot), 0.45)) border-box; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 44px rgba(var(--brand), 0.05); font-size: 19px; font-weight: 600; text-align: center; outline: none; transition: box-shadow 0.2s ease; }
.searchbox input:hover { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 50px rgba(var(--brand), 0.09); }
.searchbox input:focus { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 0 4px rgba(var(--brand), 0.07), 0 0 56px rgba(var(--brand), 0.11); }
.clear { position: absolute; top: 50%; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; border: 0; background: none; color: var(--muted); font-size: 16px; transition: color 0.14s ease; }
.clear:hover { color: var(--ink); }
/* A search icon at the start of the box, only on the first page and only while the box is empty. */
.seek { position: absolute; left: 20px; top: 50%; display: none; transform: translateY(-50%); color: #7b8173; font-size: 18px; pointer-events: none; }
body.home .searchbox input:placeholder-shown ~ .seek { display: block; }
/* The shortcut reminder at the start of the search box: only on the results page and never on touch screens (no keyboard).
   The box keeps room for the keys at both ends, so a long list of names never covers them; the words after the keys
   are dropped by the script when the typed text needs that space. */
.keyhint { position: absolute; left: 18px; top: 50%; display: none; align-items: center; gap: 7px; transform: translateY(-50%); color: #757b6d; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.keyhint kbd { padding: 2px 6px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: #8b9183; font: inherit; }
body:not(.home) .keyhint { display: flex; }
.keyhint.brief span { display: none; }
@media (hover: none) { .keyhint { display: none !important; } }
/* On the results page the box is wider than on the empty page, and (with a keyboard) padded at both ends for the reminder. */
body:not(.home) .bar { grid-template-columns: minmax(max-content, 1fr) minmax(0, 920px) minmax(max-content, 1fr); }
@media (hover: hover) { body:not(.home) .searchbox input { padding-left: 104px; padding-right: 104px; } }
@container top (max-width: 780px) {
  .bar { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .brand, #openShortlist .lbl { display: none; }
  .searchbox .keyhint { display: none !important; }
  body:not(.home) .bar { grid-template-columns: minmax(0, 1fr) auto; }
  body:not(.home) .searchbox input { padding-left: 52px; padding-right: 52px; }
  #openShortlist.empty { display: none; }
}

/* ---------- Toolbar: legend (also the filter) and export ---------- */
main { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 40px 72px; container: page / inline-size; }
.toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 10px; }
.legend { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
#csvBtn { grid-column: 3; justify-self: end; }
.lg { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 600; transition: color 0.14s ease, opacity 0.14s ease, transform 0.14s ease; }
.lg i { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid; border-radius: var(--r-xs); font-size: 12px; transition: transform 0.14s ease; }
.lg:hover { color: var(--ink); }
.lg:hover i { transform: scale(1.15); }
.lg:active { transform: scale(0.95); }
.lg.off { opacity: 0.4; }
.lg:focus { outline: none; }
.lg:focus-visible { outline: 2px solid rgba(var(--brand), 0.9); outline-offset: 4px; border-radius: var(--r-xs); }

/* ---------- Name cards ---------- */
/* --side is the room the longest name on the page needs (set by the script), so long names stay on one line; never more than about a third of the page. */
.name-block { display: grid; grid-template-columns: clamp(220px, var(--side, 220px), 36cqw) minmax(0, 1fr); gap: 48px; margin-top: 28px; padding: 40px; border: 1px solid rgba(255, 255, 255, 0.025); border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), inset 1px 0 0 rgba(255, 255, 255, 0.03); }
.nb-side { position: sticky; top: 108px; align-self: start; }
.nb-head { display: flex; align-items: center; gap: 10px; }
.nb-name { padding-bottom: 0.08em; font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; overflow-wrap: anywhere; color: transparent; background: var(--head); -webkit-background-clip: text; background-clip: text; }
.star { display: inline-grid; place-items: center; padding: 4px; border: 0; background: none; color: var(--muted); font-size: 21px; transition: transform 0.14s ease, color 0.14s ease; }
.star:hover { transform: scale(1.18); color: var(--pink); }
.star:active { transform: scale(0.88); }
.star.on { color: var(--pink); }
.star.on .heart, .hrt .heart, #openShortlist .heart { background: var(--heart); -webkit-mask-image: var(--heart-full); mask-image: var(--heart-full); }
.nb-head .star { position: relative; top: 1.5px; font-size: 24px; } /* centres the heart on the small letters of the name */
.expand { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 13.5px; font-weight: 600; transition: color 0.14s ease; }
.expand:hover { color: var(--ink); }
.expand .ic { font-size: 14px; transition: transform 0.2s ease; }
.expand[aria-expanded="true"] .ic { transform: rotate(180deg); }
.grp { margin: 34px 0 14px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.nb-main > .cat:first-child .grp { margin-top: 0; } /* only the very first heading in a card sits flush */
.cat.empty { display: none; }
.more { animation: reveal 0.24s ease both; }
/* Categories far below the fold are not laid out or painted until they are scrolled near */
.cat.lazy { content-visibility: auto; contain-intrinsic-size: auto 420px; }
@container page (max-width: 860px) {
  .name-block { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 26px; }
  .nb-side { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
  .expand { margin-top: 0; }
  .toolbar { grid-template-columns: 1fr; justify-items: center; }
  .legend, #csvBtn { grid-column: 1; justify-self: center; }
}

/* ---------- Tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.tile { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 30px; border: 1px solid; border-radius: var(--r-md); font-size: 14px; font-weight: 600; white-space: nowrap; transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.tile .gl { position: absolute; left: 11px; top: 0; bottom: 0; display: grid; place-items: center; font-size: 13px; }
.tile.pending { border-color: rgba(255, 255, 255, 0.045); background: rgba(255, 255, 255, 0.02); color: #6f7568; }
.tile.available { border-color: rgba(var(--ok), 0.45); background: rgba(var(--ok), 0.24); color: var(--ok-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
/* Likely available (DNS only, not yet confirmed by the registry): a dashed green outline with no fill. Dashed always means "not confirmed". */
.tile.likely { border: 1px dashed rgba(var(--ok), 0.4); background: none; color: #5fbfa3; }
.tile.forsale { border-color: rgba(var(--sale), 0.24); background: rgba(var(--sale), 0.13); color: var(--sale-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.tile.taken { border-color: rgba(var(--bad), 0.11); background: rgba(var(--bad), 0.055); color: var(--bad-soft); }
.tile.unknown { border: 1px dashed rgba(255, 255, 255, 0.14); background: none; color: #7c8275; }
/* Hover: the tile lifts and its fill lightens. Outline and text stay put. */
.tile:hover, .tile:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.tile:focus-visible { outline: 2px solid rgba(var(--brand), 0.95); outline-offset: 2px; }
.tile:active { transform: scale(0.97); }
.tile.available:hover, .tile.available:focus-visible { background: rgba(var(--ok), 0.32); }
.tile.likely:hover, .tile.likely:focus-visible { background: rgba(var(--ok), 0.08); }
.tile.forsale:hover, .tile.forsale:focus-visible { background: rgba(var(--sale), 0.2); }
.tile.taken:hover, .tile.taken:focus-visible { background: rgba(var(--bad), 0.1); }
.tile.unknown:hover, .tile.pending:hover { background: rgba(255, 255, 255, 0.04); }
.soc { flex: none; width: 15px; height: 15px; margin-right: 9px; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.hide-available .tile.available, .hide-likely .tile.likely, .hide-forsale .tile.forsale, .hide-taken .tile.taken, .hide-unknown .tile.unknown { display: none; }
/* Status tints shared by legend swatches and tooltip chips */
.lg.available i, .chip.available { border-color: rgba(var(--ok), 0.45); background: rgba(var(--ok), 0.24); color: var(--ok-soft); }
.lg.likely i, .chip.likely { border: 1px dashed rgba(var(--ok), 0.45); background: none; color: #5fbfa3; }
.lg.forsale i, .chip.forsale { border-color: rgba(var(--sale), 0.4); background: rgba(var(--sale), 0.16); color: var(--sale-soft); }
.lg.taken i, .chip.taken { border-color: rgba(var(--bad), 0.22); background: rgba(var(--bad), 0.07); color: var(--bad-soft); }
.lg.unknown i, .chip.unknown, .chip.pending { border: 1px dashed rgba(255, 255, 255, 0.2); background: none; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border: 1px solid transparent; border-radius: var(--r-xs); font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* ---------- Tooltip: one bar at the bottom centre ---------- */
.tt { position: fixed; left: 50%; bottom: 28px; z-index: 60; width: max-content; max-width: min(860px, calc(100% - 32px)); padding: 16px 22px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r-md); background: #1b1d20; box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.55), 0 0 60px 40px rgba(0, 0, 0, 0.8); text-align: center; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s; }
.tt.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.tt-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; }
.tt b { color: var(--ink); font-size: 15px; }
.tt p { color: #93998b; font-size: 13.5px; line-height: 1.45; white-space: nowrap; }

/* A short message at the top of the page (for example when searches come too fast). It goes away by itself. */
.notice { position: fixed; left: 50%; top: 104px; z-index: 55; max-width: calc(100% - 32px); margin: 0; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-sm); background: #1b1d20; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.8); color: var(--ink); font-size: 13.5px; font-weight: 600; text-align: center; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; }
.notice.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---------- Shortlist panel ---------- */
.scrim { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.5); }
.drawer { position: fixed; top: 16px; right: 16px; bottom: 16px; z-index: 30; width: 360px; padding: 26px; border: 1px solid rgba(255, 255, 255, 0.025); border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075); overflow-y: auto; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.drawer-head h2, .drawer-head .dh { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.hrt { display: grid; color: var(--pink); font-size: 19px; }
#closeShortlist { padding: 4px 6px; font-size: 16px; }
.drawer li { display: flex; align-items: center; gap: 16px; margin: 6px -12px 0; padding: 10px 12px; border-radius: var(--r-sm); transition: background 0.14s ease; }
.drawer li:hover { background: rgba(255, 255, 255, 0.045); }
.drawer li .iname { flex: 1; color: var(--ink); font-size: 16px; font-weight: 700; text-align: left; overflow-wrap: anywhere; transition: transform 0.14s ease; }
.drawer li:hover .iname { transform: translateX(3px); }
.drawer li:hover .flat:not(.iname) { color: var(--brand-soft); }
@media (min-width: 900px) {
  body.drawer-open { padding-right: 392px; }
  body.drawer-open .tt { left: calc(50% - 196px); }
  .scrim { display: none !important; }
}
@media (max-width: 899px) {
  .drawer { top: 0; right: 0; bottom: 0; width: min(380px, 100%); border: 0; border-radius: 0; background: var(--bg); }
}

/* ---------- Motion ---------- */
.star.pop .heart { animation: heartPop 0.38s ease; }
.count.bump { animation: bump 0.32s ease; }
@keyframes heartPop { 35% { transform: scale(1.45); } 65% { transform: scale(0.88); } }
@keyframes bump { 40% { transform: scale(1.35); } }
@keyframes reveal { from { opacity: 0.2; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .top { padding: 12px 16px; }
  body.home #openShortlist { top: 12px; right: 16px; }
  main { padding: 0 16px 48px; }
  h1.wordmark { margin-bottom: 22px; }
  .searchbox input { padding: 13px 44px; font-size: 16px; }
  .toolbar { margin-top: 4px; }
  .legend { gap: 8px 16px; }
  .name-block { margin-top: 18px; padding: 20px; border-radius: 20px; }
  .nb-name { font-size: 24px; }
  .grp { margin-top: 26px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .tile { padding: 0 8px 0 26px; font-size: 13.5px; }
  .tile .gl { left: 9px; }
  .soc { margin-right: 6px; }
  .tt { bottom: 12px; padding: 14px 16px; }
  .tt p { white-space: normal; }
}

/* Hints for controls (legend, show/hide) appear just below the control instead of in the bottom bar */
.tt.near { left: 0; bottom: auto; max-width: min(480px, calc(100% - 24px)); padding: 9px 13px; border-radius: var(--r-sm); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.8); transform: translate(calc(var(--x, 50vw) - 50%), -6px); }
.tt.near.on { transform: translate(calc(var(--x, 50vw) - 50%), 0); }
body.drawer-open .tt.near { left: 0; }
.tt.near p { font-size: 13px; white-space: normal; }
/* Legend hints: what the status means, then how to filter. A fixed width keeps all five the same size. */
.tt.near.wide { width: 400px; }
.tt.near b { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 700; }

/* ---------- Below the fold on the empty homepage ---------- */
/* The first screen stays logo and search only. This starts one full screen down, and is hidden once there are results. */
body.home .top { flex: none; min-height: 100vh; min-height: 100dvh; }
.cue { position: absolute; left: 50%; bottom: 24px; display: none; flex-direction: column; align-items: center; gap: 2px; transform: translateX(-50%); color: #767c6e; font-size: 12.5px; font-weight: 600; transition: color 0.14s ease; }
body.home .cue { display: flex; }
.cue:hover { color: var(--ink); }
.cue .ic { font-size: 15px; animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.about { display: none; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 40px 150px; }
body.home .about { display: block; }
.about h2 { width: fit-content; margin: 190px 0 64px; padding-bottom: 0.08em; font-size: clamp(32px, 5vw, 54px); font-weight: 500; line-height: 1.04; letter-spacing: -0.04em; color: transparent; background: var(--quiet); -webkit-background-clip: text; background-clip: text; }
.about h2 em { font-style: normal; font-weight: 800; color: transparent; background: var(--accent); -webkit-background-clip: text; background-clip: text; }
.about h2:first-child { margin-top: 60px; }
/* Bento grid: three columns. Cells can be tall (two rows) or wide (two columns). */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cell { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 36px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 30px; background: var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075); overflow: hidden; transition: transform 0.2s var(--ease); }
.cell:hover { transform: translateY(-3px); }
.tall { grid-row: span 2; }
.wide { grid-column: span 2; }
.cell h3 { margin-bottom: 12px; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.cell p, .cell li { color: var(--muted); font-size: 14.5px; }
.cell b { color: var(--ink); }
/* Each sample dissolves into its cell towards the right and bottom, so the cell's own edge stays the clearest line
   and neighbouring cells are easy to tell apart. */
.shot { position: relative; flex: none; height: 240px; margin: 34px -36px -36px 0; overflow: hidden; }
.shot.fill { flex: 1; height: auto; min-height: 300px; }
/* The samples are not pictures. The script builds them from the same pieces and styles as the real results,
   so they always match the real thing. Fixed size, for show only: no links, no hover. */
.sample { position: absolute; left: 0; top: 0; width: var(--w, 400px); transform-origin: 0 0; transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--s, 1)); pointer-events: none; user-select: none; }
.sample .q { overflow: hidden; white-space: nowrap; }
.sample .name-block { display: block; margin-top: 18px; padding: 26px; }
.sample .nb-head + .grp { margin-top: 20px; }
.sample .drawer { position: static; width: 360px; border: 1px solid rgba(255, 255, 255, 0.025); border-radius: var(--r-lg); background: var(--card); overflow: visible; min-height: 420px; }
.sample .drawer li { color: inherit; }
.shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(11, 11, 12, 0) 62%, #0b0b0c 98%), linear-gradient(to bottom, rgba(11, 11, 12, 0) 62%, #0b0b0c 98%); pointer-events: none; }
.cell.row { flex-direction: row; gap: 36px; }
.row .txt { flex: 0 0 34%; }
.row .shot { margin-top: 0; min-height: 330px; }
.colours ul { display: grid; gap: 20px; margin-top: 24px; }
.colours li { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; }
.colours .tile { height: 38px; padding: 0 8px 0 26px; font-size: 13px; cursor: default; }
/* Naming tips: icons and text straight on the page, no boxes */
.tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 84px 64px; }
.tips .ic { margin-bottom: 24px; color: var(--brand-soft); font-size: 26px; stroke-width: 1.7; }
.tips b { display: block; margin-bottom: 10px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.tips p { color: var(--muted); font-size: 14.5px; }
/* Questions: a plain list, always open. Every row is the same height, so the questions are evenly spaced. */
.faq { display: grid; grid-auto-rows: 1fr; gap: 44px; margin: 0; }
.faq > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; }
.faq dt { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.faq dd { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 960px) {
  .bento, .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tall { grid-row: auto; }
  .wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .about { padding: 0 16px 80px; }
  .about h2 { margin: 110px 0 36px; }
  .bento, .tips { grid-template-columns: minmax(0, 1fr); }
  .tips { gap: 48px; }
  .cell { padding: 22px; border-radius: 22px; }
  .cell.row { flex-direction: column; gap: 0; }
  .shot { margin: 22px -22px -22px 0; }
  .row .shot { margin-top: 22px; }
  .shot.fill { min-height: 280px; }
  .faq { grid-auto-rows: auto; gap: 36px; }
  .faq > div { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Footer: logo, the commission note and the year. No divider line, just space. ---------- */
/* The top margin takes up any spare height, so on a short page the footer sits at the bottom of the window, not halfway up. */
.foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 48px; width: 100%; max-width: 1180px; margin: auto auto 0; padding: 40px 40px 56px; color: #787e70; font-size: 13px; }
.foot .wordmark { font-size: 19px; line-height: 1; transition: filter 0.14s ease; }
.foot .wordmark:hover { filter: brightness(1.3); }
.foot p { max-width: 560px; text-wrap: balance; } /* both lines come out about the same width */
.foot small { font-size: 12.5px; white-space: nowrap; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr; padding: 32px 16px 44px; } }
.foot nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.foot nav a { color: var(--muted); font-weight: 600; transition: color 0.14s ease; }
.foot nav a:hover { color: var(--ink); }

/* ---------- Text pages: privacy, terms, contact ---------- */
.doc-top { padding: 24px 40px; }
.doc-top .wordmark { font-size: 21px; line-height: 1; transition: filter 0.14s ease; }
.doc-top .wordmark:hover { filter: brightness(1.3); }
.doc { flex: 1; max-width: 800px; padding: 70px 40px 140px; }
.doc h1 { width: fit-content; margin-bottom: 14px; padding-bottom: 0.08em; font-size: clamp(36px, 6vw, 58px); font-weight: 800; line-height: 1.04; letter-spacing: -0.04em; color: transparent; background: var(--head); -webkit-background-clip: text; background-clip: text; }
.doc .updated { margin-bottom: 44px; color: #787e70; font-size: 13.5px; }
.doc .lead { color: var(--ink); font-size: 19px; line-height: 1.55; }
.doc h2 { margin: 68px 0 18px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.doc p, .doc li { color: #90968a; font-size: 16px; line-height: 1.7; }
.doc p + p { margin-top: 16px; }
.doc ul { display: grid; gap: 16px; }
.doc li { position: relative; padding-left: 22px; }
.doc li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; border-radius: 2px; background: rgba(var(--brand), 0.7); }
.doc b { color: var(--ink); font-weight: 700; }
.doc a { color: var(--brand-soft); text-decoration: underline; text-decoration-color: rgba(var(--brand), 0.35); text-underline-offset: 3px; }
.doc a:hover { text-decoration-color: currentColor; }
.doc .big { margin: 36px 0; font-size: clamp(22px, 4vw, 32px); font-weight: 700; letter-spacing: -0.02em; }
@media (max-width: 640px) { .doc-top { padding: 16px; } .doc { padding: 40px 16px 90px; } .doc h2 { margin-top: 52px; } }

/* ---------- Background texture: two soft glows, and a barely-there dot grid on the homepage only ---------- */
/* Two fixed layers behind everything. The first is the glow (mint top-left, cream bottom-right:
   the logo's colours). The second is a grid of dots that takes its colour from the glows, so dots exist only inside a glow.
   Results and text pages get the glows at half strength and no dots, so nothing competes with the tiles. Both layers are static. */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before { background:
  radial-gradient(54% 50% at 14% 20%, rgba(var(--brand), 0.11), transparent 72%),
  radial-gradient(44% 44% at 90% 86%, rgba(var(--hot), 0.055), transparent 72%); }
body::after { opacity: 0.2; background:
  radial-gradient(52% 48% at 14% 20%, rgba(var(--brand), 0.85), transparent 68%),
  radial-gradient(44% 44% at 90% 86%, rgba(var(--hot), 0.5), transparent 68%);
  -webkit-mask: radial-gradient(circle, #000 1px, transparent 1.6px) 0 0 / 14px 14px;
  mask: radial-gradient(circle, #000 1px, transparent 1.6px) 0 0 / 14px 14px; }
body:not(.home)::before { opacity: 0.5; }
body:not(.home)::after { display: none; }