/* ============================================================
   The neighborhood picker — smallworld.family/neighborhood

   ⚠️ LOADS AFTER onboarding.css, WHICH HOLDS EVERYTHING SHARED with the join page —
   headings, buttons, numbered steps, focus rings. Only what is genuinely the picker's
   lives here. ⚠️ If you need to change a button, change it there, not by adding an
   override here.

   styles.css and index.html are NOT modified by this page.
   ============================================================ */

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

.cards {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* Each suggestion is one big target. ⚠️ The word-pair leads and the domain is quiet chrome
   behind it — that ordering is the point of the whole screen, so keep the size gap wide. */
.card {
  display: block;
  width: 100%;
  min-height: 4.5rem;           /* far above the 44px floor; these are the main choice */
  text-align: left;
  font: inherit;
  background: var(--surface);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 1rem 1.125rem;
  cursor: pointer;
}

.card-name {
  display: inline;
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -.015em;
  /* ⚠️ break-word, NOT anywhere. The <wbr> in neighborhood.js supplies real break points —
     the seam inside the name, and after every dot; `anywhere` would let the browser ignore
     them and split a word instead. */
  overflow-wrap: break-word;
}

.card-domain {
  display: inline;
  font-size: 1.0625rem;
  color: var(--text-3);
  overflow-wrap: break-word;
}

.card-state {
  display: block;
  font-size: .95rem;
  color: var(--text-3);
}
.card-state:empty { display: none; }

.card.is-checking { cursor: default; }
.card.is-checking .card-name,
.card.is-checking .card-domain { color: var(--text-3); }

.card.is-empty { cursor: default; }
.card.is-empty .card-domain { display: none; }

.card.is-free:hover { border-color: var(--separator); }
.card.is-free:active { background: var(--accent-weak); }

/* Adds the card to the shared focus rule in onboarding.css. */
.card:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* ---------- bring your own domain ---------- */
/* Collapsed by design — see the note in neighborhood.html.
   🔴 DO NOT SET `display` ON THIS SUMMARY. Overriding it breaks <details> in Blink and
   WebKit: the contents keep their layout box while closed and the control toggles nothing.
   Reach the 44px target with padding, as below. */
.byod {
  margin-top: 1.5rem;
  border-top: 1px solid var(--separator);
  padding-top: 1.25rem;
}
.byod summary {
  min-height: 44px;
  padding: .6rem 0;
  cursor: pointer;
  color: var(--accent-text);
  font-weight: 600;
}
.byod:focus-within summary:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}
.byod-note {
  color: var(--text-2);
  font-size: .95rem;
  margin: .25rem 0 1rem;
}
.byod-note b { font-weight: 650; }

/* The one DNS record a family would add. Laid out as label/value pairs rather than a table
   so it stacks cleanly on a phone instead of scrolling sideways. */
.dns {
  margin: 0 0 1rem;
  padding: .875rem 1rem;
  background: var(--surface);
  border-radius: 12px;
  font-size: .95rem;
}
.dns dt {
  color: var(--text-3);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dns dd {
  margin: 0 0 .625rem;
  color: var(--text);
  overflow-wrap: break-word;
}
.dns dd:last-child { margin-bottom: 0; }
.dns-alt { color: var(--text-3); }

/* ---------- the chosen address ---------- */

.chosen-panel { text-align: center; }
/* ⚠️ Overrides styles.css's `overflow-wrap: anywhere` for this one instance. On the front
   page that rule protects a fixed example address; here the address is up to 30 characters
   and WILL wrap on a phone, so it must break at a <wbr> — the seam in the name, or a dot —
   rather than mid-word. Longest name in the pool is "chestnutgrove" (13). */
.chosen-panel .address {
  font-size: 1.15em;
  overflow-wrap: break-word;
}