/* ==========================================================================
   SkySearch — the one bespoke block on /enterprise-sales.

   Loaded only by that route, after landing.css, through the `visual` hook in
   scripts/icp/clone.mjs. Nothing here may leak onto another page, so every
   selector sits under .room.

   WHAT IT IS. One account and the people inside it you need to reach. The row
   that resolved is gold. The three that did not say what the public record
   actually holds instead, which is the honest picture of this job and the
   thing a vendor screenshot never shows.

   WHY IT FORKS. Some readers arrive with the account list and some arrive with
   a territory and no list, and the product has a different half for each. Two
   radios and the general sibling combinator, no JavaScript: nothing to break
   under `script-src 'self'`, no flash of the wrong example, and both examples
   sit in the HTML in every state so a crawler and a screen reader see the lot
   while only one is painted.

   WHY IT IS NOT THE SAME SHAPE AS ITS SIBLINGS. The M&A block is a narrow
   "what you type" column against a wide sheet of rows. The PE block is a
   four-stage horizontal rail. This one is one heavy account card with a
   VERTICAL thread running out of it into a stack of people, because the idea
   being drawn is "inside this one company", and a thread going down says that
   where a table does not. Two sibling pages with the same geometry read as
   copied, and the owner rejects a section shaped like the one above it.

   COLOUR. Gold appears on exactly one row, and only in the "we have the
   account list" pane. That is not a styling choice. Lead Discovery names the
   person and returns no address — api/_lib/discovery/contracts.ts declares
   `leadCandidate` with no email field and marks the schema `.strict()` — so the
   colour law of this site draws the product boundary for free. Gold as a
   surface is --gold; gold as text on white is --gold-ink, which is the same
   meaning at 4.5:1.

   The chips are underlined text, not pills. A row of identical rounded
   rectangles is the thing that reads as machine-made.
   ========================================================================== */

.room .wrap { max-width: 64rem; }

/* ------------------------------------------------------------- the chips -- */

.room__pick { margin-top: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); }

/*
  The radios are visually hidden but focusable, and they must stay SIBLINGS of
  both the chip row and the pane: the whole fork is `#id:checked ~ …`, so moving
  either inside a wrapper silently breaks it. A fieldset would be more idiomatic
  and would break exactly that, which is why the group is a div with role.
*/
.room__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.15rem;
}
.room__chip {
  display: block;
  padding: 0.4rem 0 0.6rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  color: var(--ink-2);
}
.room__chip b { display: block; font-size: var(--fs-small); font-weight: 700; }
.room__chip span { display: block; font-size: 0.76rem; color: var(--muted); }
.room__chip:hover { color: var(--ink); }

/* Cobalt, never gold: gold means a thing that was found, and a tab the reader
   clicked is not one. */
#room-have:checked ~ .room__chips [for='room-have'],
#room-need:checked ~ .room__chips [for='room-need'] {
  color: var(--ink);
  border-bottom-color: var(--sky-cobalt);
}
/* The radio carries the focus, so the ring is drawn on its label. */
#room-have:focus-visible ~ .room__chips [for='room-have'],
#room-need:focus-visible ~ .room__chips [for='room-need'] {
  outline: 2px solid var(--sky-cobalt);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- the pane -- */

.room__pane { display: grid; gap: 1.25rem; margin-top: 1.5rem; }

/*
  `min-width: 0`, and it is not boilerplate. A grid item defaults to
  `min-width: auto`, which is "never narrower than my content", so at 320px with
  150% text the account card and the row stack both measured 364px inside a
  320px viewport and scrolled the whole document sideways by 74px. Neither
  sibling buyer page does that. The long strings here are a company name set at
  1.3rem and a mono address that has no break opportunity in it, so they are
  told to break as well: a reader at 150% text should get a wrapped address, not
  a page that slides.
*/
.room__pane > * { min-width: 0; }
.room__co,
.room__has,
.room__who { overflow-wrap: anywhere; }

/*
  The account is the heavy thing and the people hang off it, so the left column
  has a floor rather than a share: below about 20rem the company name wraps to
  three lines and stops looking like an anchor. The thread only appears at this
  width, because stacked on a phone it would run through nothing.
*/
@media (min-width: 54rem) {
  .room__pane { grid-template-columns: minmax(20rem, 24rem) 1fr; gap: 0 2.25rem; align-items: start; }
}

/* ---------------------------------------------------------- the account -- */

/*
  Stretched, with the link pinned to the bottom. Left to size itself the card
  came out 200px against a 280px stack of people beside it and read as a label
  that had floated away from its list rather than as the thing they are inside.
*/
.room__card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
}
.room__cardlabel {
  margin: 0 0 0.5rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.room__co {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
}
/* The brief is a sentence the reader typed, not a name, so it is set as one. */
.room__co--typed {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink-2);
}
.room__where { margin: 0.5rem 0 0; font-size: var(--fs-small); color: var(--muted); }
.room__go { margin: 1rem 0 0; }

/*
  `.link-arrow` is `white-space: nowrap` site-wide, and the comment on that rule
  says why: the arrow belongs to the words, not to the line after them. At 320px
  with 150% text this link measures 302px inside a 198px column and slid the
  whole document sideways, and no wording short enough to fit was worth having.

  So the rule is honoured rather than overridden. The link may wrap, and the
  LAST word carries the arrow in a nowrap span of its own, which is the thing
  the original rule was protecting.
*/
.room .link-arrow { white-space: normal; }
.room__last { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
@media (min-width: 54rem) { .room__go { margin-top: auto; padding-top: 1rem; } }

/* ------------------------------------------------------------ the people -- */

.room__out { margin-top: 1.25rem; }
@media (min-width: 54rem) { .room__out { margin-top: 0; } }

.room__flag { margin: 0 0 0.5rem; }
.room__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  margin: 0 0 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

/*
  A floor, so switching chips does not move the page under the reader's cursor.
  The "have" pane runs four rows and the "need" pane three, and without this the
  section shortens by one row on click and everything below it jumps. Same
  reasoning as the FAQ pane on the home page, which reserves its tallest answer.
*/
.room__rows { list-style: none; margin: 0; padding: 0; }
@media (min-width: 54rem) { .room__rows { min-height: 13.5rem; } }

/*
  The thread. One hairline down the left of the stack with a node on every row,
  drawn in CSS rather than as an SVG because it has to stretch to whatever
  height the rows take and an SVG would need a fixed viewBox per pane.
*/
.room__row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.15rem 1rem;
  padding: 0.7rem 0 0.7rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}
.room__row::before {
  content: '';
  position: absolute;
  left: 0.32rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}
.room__row:last-child::before { bottom: 50%; }
.room__row::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.65rem;
  height: 0.65rem;
  margin-top: -0.325rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
.room__who { font-weight: 600; color: var(--ink); }
.room__has { color: var(--muted); }

/*
  The one found row. Gold on the node and on the address, nowhere else.

  The ring is `--gold-ink`, not `--gold`. Gold on cloud-white is 1.77:1, so a
  solid gold dot on this band is very nearly invisible to a low-vision reader
  and the node stops marking anything. `--gold-ink` is the brand book's answer
  to exactly this: the same meaning, drawn at a contrast that holds. The fill
  stays gold, so the colour law is unchanged; the dot just gains an edge.
*/
.room__row--found::after {
  background: var(--gold);
  box-shadow: inset 0 0 0 2px var(--gold-ink), 0 0 0 4px var(--gold-soft);
}
.room__has--hit {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-ink);
}

.room__stop {
  margin: 0.85rem 0 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- the fork -- */
/*
  Everything is `display: none` by default and the checked radio paints one
  side. Declared as one block so the two panes cannot drift apart, and the row
  rule is separate because a row is a flex container and a paragraph is not.
*/
.room__pane [data-mode] { display: none; }
#room-have:checked ~ .room__pane [data-mode='have'],
#room-need:checked ~ .room__pane [data-mode='need'] { display: block; }
#room-have:checked ~ .room__pane .room__row[data-mode='have'],
#room-need:checked ~ .room__pane .room__row[data-mode='need'] { display: flex; }
#room-have:checked ~ .room__pane .room__head span[data-mode='have'],
#room-need:checked ~ .room__pane .room__head span[data-mode='need'] { display: inline; }