/* Domain search. Mobile-first, tokens only — no raw values.
   Every domain, price and TLD chip carries dir="ltr" in the markup; the layout
   itself mirrors through logical properties, so nothing here is side-specific. */

/* -------------------------------------------------------------------- hero */
.domains__hero {
  position: relative;
  isolation: isolate;
  background: #FFFFFF;
  border-block-end: 0;
  padding-block: 0 var(--s-5);
  overflow: hidden;
}
.domains__hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: none;
  opacity: 0;
}
.domains__hero > .wrap { position: relative; z-index: 1; }

/* An intentionally quiet, edge-to-edge infrastructure field. It is only a
   background layer: the page's existing console remains the interaction. */
.domain-network-bg {
  --domain-bg-x: 0px;
  --domain-bg-y: 0px;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.domain-network-bg svg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.domain-network-bg__layer {
  fill: none;
  stroke: rgba(22, 51, 0, 0.09);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
.domain-network-bg__layer--far {
  opacity: .58;
  transform: translate3d(calc(var(--domain-bg-x) * .35), calc(var(--domain-bg-y) * .35), 0);
}
.domain-network-bg__layer--mid {
  opacity: .76;
  transform: translate3d(calc(var(--domain-bg-x) * .68), calc(var(--domain-bg-y) * .68), 0);
}
.domain-network-bg__layer--near {
  opacity: .9;
  transform: translate3d(var(--domain-bg-x), var(--domain-bg-y), 0);
}
.domain-network-bg__layer circle { fill: rgba(22, 51, 0, 0.09); stroke: none; }
.domain-network-bg__accent {
  stroke: #9FE870;
  stroke-width: 1.35;
  stroke-linecap: round;
}

.domains__title {
  font-size: clamp(1.75rem, 4.4vw, 2.375rem);
  line-height: 1.18; letter-spacing: -0.032em;
  color: var(--ink); margin-block-end: var(--s-3); text-wrap: balance;
}
.domains__lede {
  color: var(--text-muted); max-width: 62ch;
  margin-block-end: var(--s-5);
}

/* Resting state: nothing to read yet, so the console owns the viewport and sits
   on the vertical centre line. Once a search exists the hero shrinks back to a
   header and the results take the page. */
.domains__hero--stage {
  display: grid; align-items: center;
  min-block-size: 70vh;
  padding-block: var(--s-8);
}
.domains__hero--stage .domains__title,
.domains__hero--stage .domains__lede,
.domains__hero--stage .domain-search__note { text-align: center; }
.domains__hero--stage .domains__lede { margin-inline: auto; }
.domains__hero--stage .domains__examples { justify-content: center; }

@media (max-width: 767px) {
  .domains__hero--stage { min-block-size: min(70svh, 42rem); }
}

@media (prefers-reduced-motion: reduce) {
  .domain-network-bg__layer { transform: none; will-change: auto; }
}

/* ---------------------------------------------------------- search console */
.domain-search {
  max-width: 720px; margin-inline: auto;
  padding: var(--s-2);
  background: var(--surface); border: var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-fast) var(--ease);
}
.domain-search:focus-within { border-color: var(--accent-line); }

.domain-search__field {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-5);
}
.domain-search__input {
  flex: 1; min-width: 0; padding: 0;
  border: 0; background: none;
  font-size: var(--fs-h3); color: var(--text);
}
.domain-search__input::placeholder { color: var(--text-soft); }
.domain-search__input:focus { outline: none; }
.domain-search__clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%; background: var(--tint); color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease);
}
.domain-search__clear:hover { background: var(--line); color: var(--ink); }

.domain-search__bar { display: flex; align-items: center; gap: var(--s-3); }

/* The modes rail. It scrolls sideways on a phone rather than wrapping, so the
   console keeps its shape at every width. */
.domain-search__modes {
  display: flex; flex: 1; min-width: 0; gap: var(--s-1);
  padding: var(--s-1);
  background: var(--tint); border-radius: var(--r-full);
  overflow-x: auto; scrollbar-width: none;
}
.domain-search__modes::-webkit-scrollbar { display: none; }

.dmode {
  display: inline-flex; align-items: center; gap: var(--s-2);
  flex-shrink: 0; min-height: 34px; padding-inline: var(--s-3);
  border: 0; border-radius: var(--r-full); background: none;
  font: inherit; font-size: var(--fs-meta); font-weight: var(--fw-medium);
  color: var(--text-muted); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.dmode svg { flex-shrink: 0; }
.dmode--on { background: var(--accent-tint); color: var(--color-brand-forest); font-weight: var(--fw-bold); }
.dmode[disabled] { color: var(--text-soft); cursor: not-allowed; }

.domain-search__go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border: 0; border-radius: var(--r-md);
  background: var(--ink); color: var(--on-ink);
  transition: background var(--dur-fast) var(--ease);
}
.domain-search__go:hover { background: var(--ink-hover); }

.domain-search__note {
  max-width: 720px; margin: var(--s-3) auto 0;
  font-size: var(--fs-label); color: var(--text-soft);
}

.domains__examples { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-4); }
.domains__example {
  display: inline-flex; align-items: center; min-height: 34px; padding-inline: var(--s-4);
  border: var(--border); border-radius: var(--r-full); background: var(--surface);
  color: var(--text-muted); font-size: var(--fs-meta);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.domains__example:hover { border-color: var(--ink); color: var(--text); }

/* -------------------------------------------------------------------- body */
.domains__body {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
  align-items: start;
  padding-block: var(--s-5) var(--s-10);
}
.domains__aside { display: flex; flex-direction: column; gap: var(--s-4); }
.domains__panel-title { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--ink); margin-block-end: var(--s-2); }
.domains__panel-lede { color: var(--text-muted); font-size: var(--fs-meta); margin-block-end: var(--s-4); }

/* ------------------------------------------------- resting extension table */
.domains__section-title { font-size: var(--fs-h3); color: var(--ink); margin-block-end: var(--s-2); }
.domains__section-lede { color: var(--text-muted); font-size: var(--fs-meta); margin-block-end: var(--s-5); }

.tld-group + .tld-group { margin-block-start: var(--s-5); }
.tld-group__label {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-size: var(--fs-meta); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
  margin-block-end: var(--s-3);
}
.tld-group__note { font-size: var(--fs-label); font-weight: var(--fw-regular); letter-spacing: 0; text-transform: none; color: var(--text-soft); }

.tld-table { list-style: none; margin: 0; padding: 0; border: var(--border); border-radius: 14px; overflow: hidden; }
.tld-table__row {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 52px; padding-inline: var(--s-4);
}
.tld-table__row + .tld-table__row { border-block-start: 1px solid var(--tint); }
.tld-table__use { flex: 1; min-width: 0; font-size: var(--fs-meta); }

.tld-rate { flex-shrink: 0; white-space: nowrap; font-size: var(--fs-meta); letter-spacing: 1px; }
.tld-rate__on { color: var(--warning); }
.tld-rate__off { color: color-mix(in srgb, var(--warning) 28%, var(--surface)); }

/* TLD chips. Core extensions read louder — they are the ones worth wanting. */
.tld-chip {
  display: inline-flex; align-items: center; flex-shrink: 0;
  height: 28px; padding-inline: var(--s-3);
  border-radius: var(--r-sm); background: var(--tint);
  font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--text-muted);
}
.tld-chip--core { background: var(--accent-tint); color: var(--ink); font-weight: var(--fw-bold); }
.tld-cloud { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ------------------------------------------------------- the exact match */
.domain-exact {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-4); row-gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface); border: var(--border); border-radius: var(--r-lg);
}
.domain-exact--available { background: var(--success-tint); border-color: color-mix(in srgb, var(--success) 32%, var(--surface)); }

.domain-exact__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: var(--r-md); background: var(--tint); color: var(--text-soft);
}
.domain-exact--available .domain-exact__icon { background: var(--surface); color: var(--success); }
.domain-exact--listed .domain-exact__icon { background: var(--accent-tint); color: var(--color-brand-forest); }

.domain-exact__main { flex: 1 1 100%; min-width: 0; }
.domain-exact__domain { font-size: var(--fs-h2); letter-spacing: -0.02em; margin: 0; }
.domain-exact__status { font-size: var(--fs-meta); font-weight: var(--fw-bold); color: var(--text-soft); margin: 0; }
.domain-exact--available .domain-exact__status { color: var(--success); }
.domain-exact--listed .domain-exact__status { color: var(--color-brand-forest); }
.domain-exact__end { display: flex; align-items: center; gap: var(--s-4); flex: 1 1 100%; }
.domain-exact__end .domain-price { margin-inline-end: auto; }

/* Price and its note. Never shown for a taken domain or a listed brand's
   registration — a complete brand is not $12 a year. */
.domain-price { margin: 0; text-align: end; }
.domain-price__value { display: block; font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.domain-price__note { display: block; font-size: var(--fs-label); color: var(--text-soft); }
.domain-exact .domain-price__value { font-size: var(--fs-h3); }

/* --------------------------------------------------------------- results */
.domains__filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-block: var(--s-5) var(--s-3);
}
.domains__pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.domains__pills .chip { min-height: 34px; font-size: var(--fs-meta); }
.domains__count { margin: 0; margin-inline-start: auto; font-size: var(--fs-meta); color: var(--text-muted); }

.domain-rows {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: var(--border); border-radius: var(--r-lg);
  overflow: hidden;
}
.domain-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3); row-gap: var(--s-3);
  min-height: 72px; padding: var(--s-3) var(--s-4);
}
.domain-row + .domain-row { border-block-start: 1px solid var(--tint); }
.domain-row--taken { opacity: .62; }

/* Status is never colour alone: the dot is backed by the price, the badge and
   the action label. */
.domain-row__dot {
  width: 8px; height: 8px; flex-shrink: 0;
  border-radius: 50%; background: var(--line);
}
.domain-row--available .domain-row__dot { background: var(--success); }
.domain-row--listed .domain-row__dot { background: var(--accent); }

.domain-row__main { flex: 1 1 100%; min-width: 0; }
.domain-row__name {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--fs-body-lg); font-weight: var(--fw-bold); letter-spacing: -0.012em;
  margin: 0;
}
.domain-row__use { font-size: var(--fs-meta); color: var(--text-muted); margin: 0; }
.domain-row__end { display: flex; align-items: center; gap: var(--s-4); flex: 1 1 100%; }
.domain-row__end .domain-price { margin-inline-end: auto; min-width: 74px; }
.domain-row__end .btn { min-height: 40px; padding-inline: var(--s-4); }

.domain-rows__empty { padding: var(--s-6) var(--s-4); text-align: center; color: var(--text-muted); }
.domains__note { margin-block-start: var(--s-3); font-size: var(--fs-label); color: var(--text-soft); }

/* -------------------------------------------------------------- end cta */
.domains-cta {
  margin-block: var(--s-5) var(--s-8);
}

.domains-cta__shell {
  position: relative;
  display: grid;
  gap: var(--s-5);
  padding: clamp(var(--s-5), 4vw, var(--s-8));
  color: var(--on-ink);
  background: var(--ink);
  border: 1px solid var(--on-ink-line);
  border-radius: calc(var(--r-xl) + 6px);
  box-shadow: 0 12px 28px -24px color-mix(in srgb, var(--color-text-primary) 32.0%, transparent);
  overflow: hidden;
}


.domains-cta__copy,
.domains-cta__actions,
.domains-cta__facts {
  position: relative;
  z-index: 1;
}

.domains-cta__copy {
  max-inline-size: 68ch;
}

.domains-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--s-3);
  border: 1px solid var(--on-ink-line);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--color-white) 5.0%, transparent);
  color: var(--on-ink-muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  margin-block-end: var(--s-3);
}

.domains-cta__title {
  margin: 0;
  color: var(--on-ink);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.domains-cta__lede {
  margin: var(--s-3) 0 0;
  max-inline-size: 62ch;
  color: var(--on-ink-muted);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
}

.domains-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.domains-cta__action.btn--primary {
  background: var(--surface);
  color: var(--ink);
}

.domains-cta__action.btn--primary:hover {
  background: var(--bg);
}

.domains-cta__action.btn--secondary {
  border-color: var(--on-ink-line);
  background: color-mix(in srgb, var(--color-white) 5.0%, transparent);
  color: var(--on-ink);
}

.domains-cta__action.btn--secondary:hover {
  background: color-mix(in srgb, var(--color-white) 10.0%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 18.0%, transparent);
}

.domains-cta__facts {
  display: grid;
  gap: var(--s-3);
}

.domains-cta__fact {
  display: grid;
  gap: 6px;
  padding: var(--s-4) 0;
  border-block-start: 1px solid var(--on-ink-line);
}

.domains-cta__value {
  font-size: clamp(1.125rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.domains-cta__label {
  color: var(--on-ink-muted);
  font-size: var(--fs-meta);
  line-height: 1.7;
}

/* ------------------------------------------------------- research preview */
.research {
  display: grid; gap: var(--s-5);
  align-items: center;
  padding-block: var(--s-9);
  border-block-end: var(--border);
}
.research__eyebrow { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-3); }
.research__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm); background: var(--accent-tint); color: var(--color-brand-forest);
}
.research__soon {
  display: inline-flex; align-items: center; min-height: 24px; padding-inline: var(--s-3);
  border-radius: var(--r-full); background: var(--tint);
  font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--text-muted);
}
.research__title { font-size: var(--fs-h2); color: var(--ink); margin-block-end: var(--s-3); }
.research__lede { color: var(--text-muted); max-width: 54ch; margin: 0; }

.research__preview { margin: 0; }
.research__card {
  display: grid; gap: var(--s-5);
  padding: var(--s-5);
  background: var(--surface); border: var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.research__card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.research__card-title {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--ink);
}
.research__caption { margin-block-start: var(--s-3); font-size: var(--fs-label); color: var(--text-soft); }

.research__scores { display: grid; gap: var(--s-4); }
.score__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-2); }
.score__label { font-size: var(--fs-meta); color: var(--text-muted); }
.score__value { font-size: var(--fs-meta); font-weight: var(--fw-bold); color: var(--ink); }
.score__max { color: var(--text-soft); font-weight: var(--fw-regular); }

/* The bar is never the only signal — the number beside it says the same thing. */
.meter { display: block; block-size: 6px; border-radius: var(--r-full); background: var(--tint); overflow: hidden; }
.meter__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--success); }
.meter--mid .meter__fill { background: var(--warning); }

.handles { display: grid; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.handle {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding-inline: var(--s-3);
  border: var(--border); border-radius: var(--r-md);
  font-size: var(--fs-meta);
}
.handle__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: var(--r-sm); background: var(--tint);
  font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--ink);
}
.handle__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.handle__state { display: inline-flex; flex-shrink: 0; }
.handle--free .handle__state { color: var(--success); }
.handle--taken .handle__state { color: var(--error); }

/* --------------------------------------------------------------- widening */
@media (min-width: 620px) {
  .domain-exact__main, .domain-row__main { flex: 1 1 auto; }
  .domain-exact__end, .domain-row__end { flex: 0 0 auto; }
  .domain-exact__end .domain-price, .domain-row__end .domain-price { margin-inline-end: 0; }
  .domain-row { flex-wrap: nowrap; }

  .domains__hero--stage { min-block-size: calc(100svh - var(--header-h)); }
  .domain-search__field { padding-inline: var(--s-5); }
  .handles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .domains-cta__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .domains-cta__fact { padding-inline-end: var(--s-4); }
}

@media (min-width: 1024px) {
  .domains__body { grid-template-columns: minmax(0, 1fr) var(--aside); gap: var(--s-5); }
  .domains__aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .research { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .domains-cta__shell {
    grid-template-columns: minmax(0, 1.25fr) auto;
    align-items: start;
  }
  .domains-cta__actions {
    align-self: start;
    justify-content: end;
  }
  .domains-cta__facts {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------- the live search app
   By Domain Generator renders its own console, chips and results. The page owns
   the measure and the rhythm around it; everything inside is the plugin's, and
   it reads the same tokens this file does. */
.domains__app {
  max-width: none;
  margin-inline: auto;
}
.domains__hero .domains__app { margin-block-start: 0; }

/* The plugin ships its own white surfaces for the console, the workspace header
   and the results panel. Each one is put back on the page background here, so
   the search reads as part of the page instead of a white sheet dropped on it.
   The cards inside the results keep their own white — only the shells change. */
/* The plugin ships its own white surfaces for the console and the results
   panel. Each one is put back on the page background here, so the search reads
   as part of the page instead of a white sheet dropped on it. The hero is the
   exception: its corner glow is part of the approved design, so it keeps the
   background it paints for itself. */
.domains__hero .wrap .bysd-ps,
.domains__app .bysd-ps .bysd-ps__workspace-header,
.domains #bysd-ps-results {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none;
  padding-bottom: 0 !important;
}

.domains__app .bysd-ps[data-search-state="results"] .bysd-ps__workspace-header {
  position: static !important;
  inset-block-start: auto !important;
  top: auto !important;
}

/* The .wrap around the app already provides the 1200px container and its
   gutters, so the app and its hero span it rather than centring a second,
   narrower column inside it. */
.domains__hero .wrap .bysd-ps,
.domains__app .bysd-ps,
.domains__app .bysd-ps .bysd-ps__workspace-header,
.domains__app .bysd-ps .bysd-ps__hero,
.domains__app .bysd-ps .bysd-ps__form {
  inline-size: 100% !important;
  max-inline-size: none !important;
  width: 100% !important;
}

.domains__app .bysd-ps .bysd-ps__form-shell {
  background: transparent !important;
  background-image: none !important;
}

/* The hero paints its own full-bleed ground (see public-search.css). The
   section only has to stop it spilling into a horizontal scrollbar. */
.domains__hero { overflow-x: clip; }

.domains__app .bysd-ps .bysd-ps__hero {
  padding-inline: 0 !important;
  padding-block: 34px 30px !important;
}

/* Start-aligned, never centred: the hero reads from the reading-direction
   edge, and the field fills the column beneath it. */
.domains__app .bysd-ps .bysd-ps__hero-support {
  display: block !important;
  text-align: start;
  margin: 0 0 22px !important;
  padding-top: 0;
}

.domains__app .bysd-ps .bysd-ps__intro {
  max-inline-size: 640px;
}

.domains__app .bysd-ps .bysd-ps__intro-copy {
  margin-inline: 0;
}