/* ==========================================================================
   SkySearch — the one bespoke block on /ma-deal-sourcing.

   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 .brief.

   WHAT IT IS. An advisory firm has three jobs, and this page used to address
   one. It also sold one of the two shipped products: everything under the hero
   described Resolve, while Lead Discovery appeared in visible copy exactly
   once, as a priced line in the tariff. So this block puts the reader's own
   artefact on both sides of one line — the brief they would type, and what
   comes back — and forks the worked example three ways.

   WHY IT FORKS BY JOB AND NOT BY SIDE. Most advisory firms run both sides, and
   for many the sell-side is the larger half. A sell-side/buy-side switch asks
   them to disown half their own business. The job is what they came to do, so
   the chips name the job and carry the side underneath.

   WHY THERE IS NO JAVASCRIPT. Three radios and the general sibling combinator.
   No flash of the wrong example, nothing to break under `script-src 'self'`,
   and all three 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 A RAIL. The PE page's block is a four-stage rail through the
   same product. Two sibling pages with the same geometry read as copied, and
   the owner rejects a section that has the same shape as the one above it. This
   one is deliberately asymmetric: a narrow column of what you write against a
   wide sheet of what comes back.

   COLOUR. Gold appears once, on the single row that resolved, which is the
   colour law of this site. Not on a chip, not on a control, not on the
   selected state. The chips are underlined text, not pills, because a row of
   identical rounded rectangles is the thing that reads as machine-made.
   ========================================================================== */

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

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

.brief__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 one 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="group" instead.
*/
.brief__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.15rem;
}

.brief__chip {
  display: block;
  padding: 0.4rem 0 0.6rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  color: var(--ink-2);
}
.brief__chip b {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
}
.brief__chip span {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
}
.brief__chip:hover { color: var(--ink); }

/* Cobalt, never gold: gold on this site means a thing that was found, and a
   tab the reader clicked is not one. */
#brief-target:checked ~ .brief__chips [for='brief-target'],
#brief-buyer:checked ~ .brief__chips [for='brief-buyer'],
#brief-mandate:checked ~ .brief__chips [for='brief-mandate'] {
  color: var(--ink);
  border-bottom-color: var(--sky-cobalt);
}

/* The radio carries the focus, so the ring has to be drawn on its label. */
#brief-target:focus-visible ~ .brief__chips [for='brief-target'],
#brief-buyer:focus-visible ~ .brief__chips [for='brief-buyer'],
#brief-mandate:focus-visible ~ .brief__chips [for='brief-mandate'] {
  outline: 2px solid var(--sky-cobalt);
  outline-offset: 3px;
  border-radius: 2px;
}

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

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

/* Asymmetric on purpose. What you write is narrow, what comes back is wide. */
@media (min-width: 54rem) {
  .brief__pane { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2.5rem; align-items: start; }
}

.brief__label,
.brief__head {
  margin: 0 0 0.5rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* What you type. Mono, because it is a thing the reader writes rather than a
   thing we say, and the difference should be visible before it is read. */
.brief__type {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--sky-cobalt);
  border-radius: var(--radius-s);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink);
}

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

/* -------------------------------------------------------------- the sheet -- */

.brief__out {
  padding: 0.9rem 1.1rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.brief__flag { margin: 0 0 0.6rem; }

.brief__head { display: flex; justify-content: space-between; gap: 1.25rem; border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; }

.brief__rows { margin: 0.15rem 0 0; padding: 0; list-style: none; }

/*
  A worked-down list, not a card grid and not a table. Spacing separates the
  rows; the only bordered thing on the sheet is the one row that came back.
*/
.brief__row {
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.15rem 1.25rem;
  padding: 0.55rem 0;
  font-size: var(--fs-small);
}

.brief__co { color: var(--ink); font-weight: 600; }
.brief__who { color: var(--muted); }

.brief__row--found {
  margin-inline: -0.5rem;
  padding-inline: 0.5rem;
  border-radius: var(--radius-s);
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.brief__who--hit {
  color: var(--gold-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/*
  The line that has to stay. Lead Discovery returns no address and that is the
  schema rather than modesty: api/_lib/discovery/contracts.ts declares
  leadCandidate with no email field and marks it .strict(). Resolve is the only
  thing permitted to produce one.
*/
.brief__stop {
  margin: 0.9rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- the fork -- */

/*
  Everything that forks is hidden by default and one set is revealed by the
  checked radio. Written out rather than generated, because three jobs times
  two element types is six rules and a reader can see all of them at once.
*/
.brief__type,
.brief__note,
.brief__row { display: none; }

#brief-target:checked ~ .brief__pane .brief__type[data-job='target'],
#brief-target:checked ~ .brief__pane .brief__note[data-job='target'],
#brief-buyer:checked ~ .brief__pane .brief__type[data-job='buyer'],
#brief-buyer:checked ~ .brief__pane .brief__note[data-job='buyer'],
#brief-mandate:checked ~ .brief__pane .brief__type[data-job='mandate'],
#brief-mandate:checked ~ .brief__pane .brief__note[data-job='mandate'] { display: block; }

#brief-target:checked ~ .brief__pane .brief__row[data-job='target'],
#brief-buyer:checked ~ .brief__pane .brief__row[data-job='buyer'],
#brief-mandate:checked ~ .brief__pane .brief__row[data-job='mandate'] { display: flex; }

/* The left column used to end in white space against a taller sheet. One text
   link, not a second form: a sell-side reader whose next job is a buyer list
   gets a door that matches it, and the tested hero handoff keeps its monopoly
   on being the page's only form. */
.brief__go { margin: 1.1rem 0 0; }

/* ==========================================================================
   The atlas greets the reader's own market.

   The one exception to "every selector under .brief", and it is deliberate:
   `.market--home` is a NEW modifier rather than a restyle of landing.css's
   `.market`, and this sheet only loads on this route, so it cannot reach the
   two sibling pages. assets/js/icp.js adds the class and moves the tile to the
   front of the list after /api/geo answers.

   NOTHING HERE CHANGES A BOX. The flag is scaled with a transform and the tile
   is tinted, so the promoted tile occupies exactly the space it occupied
   before. A greeting that reflowed the atlas under a reader's cursor would be
   a worse page than one that never greeted them at all.
   ========================================================================== */

.market--home {
  background: var(--cobalt-soft);
  box-shadow: inset 0 0 0 1px var(--cobalt-line);
}
.market--home img { transform: scale(1.22); }
.market--home .market__name { font-weight: 700; color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .market--home { transition: background var(--dur-fast) var(--ease-out); }
}