/*
  SkySearch — the resolved-row figure, /private-equity-corp-dev only.

  One drawing this buyer needs and the other two do not. A PE origination or
  corp dev reader does not work one company; they work a list, and the honest
  thing to show them is the difference between a row that resolved and a row
  that did not. Every other buyer page tells a single story well. This one has
  to admit that some rows come back empty, because the audience it is written
  for has been sold "95% accurate" by four vendors already and stopped hearing
  it.

  Loaded as its own file, linked by scripts/icp/clone.mjs, because the site
  ships `style-src 'self'` and an inline <style> block would be dropped by the
  browser in production. Nothing here touches landing.css, which the home page
  shares.

  THE STATE CHIPS. Three states, and colour carries none of the meaning. Each
  chip is a WORD plus a SHAPE: a filled disc for found, an outlined triangle for
  needs review, a flat bar for not found. Read in greyscale, printed, or by
  somebody who cannot separate gold from grey, all three still say which is
  which. Gold appears on exactly one of them, because on this site gold means
  one thing — something that was found.
*/

.rowfig {
  max-width: 46rem;      /* the product-definition paragraph it sits under */
  margin: 1.75rem auto 0;
}

/* The PE route begins from an investment thesis, so its acquisition form has
   one wide field rather than the Resolve form's person/company pair. */
@media (min-width: 40rem) {
  .search-card--thesis .search-card__fields {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Two concrete PE motions, drawn as compact rails rather than generic feature
   icons. The legacy four-stage rail remains in the template for the other ICP
   variant but is not repeated below these two self-contained journeys. */
.pefit--modes .pefit__rail,
.pefit--modes .pefit__flow { display: none; }
.pefit__modes {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
.pefit__modecard {
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}
.pefit__number {
  margin: 0;
  color: var(--cobalt-ink);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.pefit__mode-title {
  max-width: 22ch;
  margin: 0.6rem 0 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.8rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
@media (min-width: 40rem) {
  .hero .search-card--thesis { max-width: 42rem; }
}
.pefit__modeflow {
  display: block;
  width: 100%;
  height: 2.25rem;
  margin-top: 1.25rem;
  color: var(--sky-cobalt);
}
.pefit__modeflow circle:nth-child(4),
.pefit__modeflow circle:nth-child(5) { fill: var(--gold); }
.pefit__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 0.72rem;
  line-height: 1.25;
}
.pefit__insight {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
}
@media (min-width: 62rem) {
  .pefit__modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (max-width: 39.99rem) {
  .pefit__modeflow { display: none; }
  .pefit__steps { grid-template-columns: 1fr; gap: 0; margin-top: 1rem; }
  .pefit__steps li { display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0; border-top: 1px solid var(--line); }
  .pefit__steps li::before { content: ''; width: 0.46rem; height: 0.46rem; border-radius: 50%; background: var(--sky-cobalt); flex: none; }
  .pefit__steps li:nth-child(n + 4)::before { background: var(--gold); }
}

/*
  The last resort, and only that.

  Three things in this table have a hard minimum width: the address will not
  wrap, the state chip will not wrap, and a company name breaks only between
  words. Everything is sized in rem, so a reader who sets a 24px root — a common
  150% text setting — scales all three by half again while the phone stays 390px
  wide. Measured: a 497px table in a 390px viewport, and the widest thing on the
  page. Every other band reflowed fine.

  Capping the figure in px would "fix" it by ignoring the reader's font size,
  which is the opposite of the point. So the table keeps scaling and gets a
  scroll container instead. WCAG 1.4.10 exempts data tables from the no
  two-dimensional-scrolling rule for exactly this case, and 1.4.4 is satisfied
  because nothing is lost. The container is focusable and labelled by the
  caption, so it can be reached and read by keyboard rather than being a region
  only a mouse can move. At any normal font size it never scrolls and costs one
  tab stop.
*/
.rowfig__scroll { overflow-x: auto; }
.rowfig__scroll:focus-visible {
  outline: 2px solid var(--sky-cobalt);
  outline-offset: 3px;
  border-radius: var(--radius-m);
}

.rowfig__table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  font-size: 0.85rem;
  text-align: left;
}

.rowfig__cap {
  caption-side: top;
  padding: 0 0 0.55rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
  text-align: left;
}

.rowfig__table th,
.rowfig__table td {
  padding: 0.6rem 0.7rem;
  vertical-align: middle;
  border-top: 1px solid var(--line);
  /* A company name and an address are both long strings with few break points.
     On a 390px phone they either wrap mid-word or push the table off the side
     of the screen, and the second one is not a choice worth offering. */
  overflow-wrap: anywhere;
}

.rowfig__table thead th {
  border-top: 0;
  background: var(--cloud);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-2);
  /* The data cells below break anywhere so a long address cannot push the
     table off a phone. Headers must not: uppercase and letter-spaced, a
     mid-word break renders as "COMPAN / Y", which is why these three labels
     are short enough to never need one. */
  overflow-wrap: normal;
}

.rowfig__table tbody th {
  font-weight: 600;
  color: var(--ink);
}

/* The middle column is the only one allowed to be long, so it is the only one
   that wraps. The company and the state stay on one line at every width. */
.rowfig__got {
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/*
  An address is one long token with no break points a reader would accept.
  Left to wrap it split as "yuting@example.co / m", which looks like a bug in
  the product rather than a line break. Held on one line, auto table layout
  gives this column the width it needs and takes it from the company name,
  which has real spaces to break on.
*/
.rowfig__addr {
  font-family: var(--font-ui);
  font-size: 0.82em;
  color: var(--ink);
  white-space: nowrap;
}

.rowfig__state { white-space: nowrap; }

.rowfig__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding: 0.18rem 0.5rem 0.18rem 0.42rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.rowfig__mark { width: 11px; height: 11px; flex: none; }

/* Found. The one gold thing in the figure. */
.rowfig__chip--found {
  background: var(--gold-soft);
  border-color: var(--gold-line);
  color: var(--gold-ink);
}

/* Needs review. Deliberately not amber: an amber chip beside a gold one is two
   shades of the same idea, and this state is the opposite of found. */
.rowfig__chip--review {
  background: var(--cloud);
  border-color: var(--line-strong);
  color: var(--ink-2);
}

.rowfig__chip--none {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--muted);
}

/* Left, like the caption. Both are notes about the table, and one centred and
   one flush looks like two people wrote them. */
.rowfig__note {
  margin: 0.7rem 0 0;
  text-align: left;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--muted);
}

/* Under about 30rem the three columns stop fitting side by side, so the type
   steps down rather than the table scrolling sideways. A horizontal scrollbar
   inside a figure is a thing readers do not find. */
@media (max-width: 30rem) {
  .rowfig__table { font-size: 0.78rem; }
  .rowfig__table th,
  .rowfig__table td { padding: 0.5rem 0.45rem; }
  .rowfig__chip { padding: 0.15rem 0.4rem 0.15rem 0.34rem; font-size: 0.7rem; gap: 0.28rem; }
}

/*
  320px, which is where this table stops fitting on its own terms. Three things
  each want a minimum: the address will not wrap, the state chip will not wrap,
  and the company name breaks only between words. Together they came to 326px
  inside a 280px column. Rather than let one of them wrap badly — "example.co /
  m" reads as a bug in the product — everything steps down one more notch here.
  Caught at 320 by `node .context/icp-shots.mjs full`; the 390 fold shots are
  clean and would never have shown it.
*/
@media (max-width: 22rem) {
  .rowfig__table { font-size: 0.72rem; }
  .rowfig__table th,
  .rowfig__table td { padding: 0.45rem 0.22rem; }
  .rowfig__addr { font-size: 0.74em; }
  .rowfig__chip {
    padding: 0.12rem 0.34rem 0.12rem 0.28rem;
    font-size: 0.64rem;
    gap: 0.22rem;
  }
  .rowfig__mark { width: 9px; height: 9px; }
}

@media (min-width: 40rem) {
  .rowfig__table { font-size: 0.92rem; }
  .rowfig__table th,
  .rowfig__table td { padding: 0.7rem 0.9rem; }
}

/* ===================================================== where SkySearch fits ==
   The early block: the argument, four stages, and where we stop.

   The four stage columns and the drawn rail above them are one component in
   two halves. The rail is SVG because it is a drawn line, not a border — a
   gentle wave through the four column centres, in the same ink as the rest of
   the page's annotations. The stage text is HTML because text in an SVG does
   not reflow, cannot be translated and cannot be read out, and every diagram
   on this site carries its meaning in real text beside the drawing.

   Below 62rem the rail is replaced by the vertical gold rail the source trail
   already uses on a phone. That breakpoint is the site-wide diagram switch,
   and the reason is written on the home page: a shrunken diagram is a worse
   diagram.
   ========================================================================== */

.pefit__lede {
  max-width: 40rem;
  margin: 0.75rem auto 0;
  font-size: var(--fs-lede);
  line-height: 1.65;
  color: var(--ink-2);
}

/* ----- the drawn rail, 62rem and up ----- */

.pefit__rail { display: none; }

@media (min-width: 62rem) {
  .pefit__rail {
    display: block;
    width: 100%;
    height: 40px;          /* pinned, so the vertical scale stays 1 and the nodes stay round */
    margin: 1.1rem 0 -0.35rem;
    color: var(--line-strong);
  }
  .pefit__line { stroke-width: 1.75; }
  .pefit__node--yours { fill: var(--line-strong); }
  .pefit__node--ours { fill: var(--sky-cobalt); }
  /* gold-line, not gold-soft: #fbf3e2 on the cloud band is invisible, so the
     ring that makes the found node read as found did not exist on desktop
     while the phone rail (a box-shadow) showed it fine. */
  .pefit__node--halo { fill: var(--gold-line); }
  .pefit__node--found { fill: var(--gold); }

  @media (prefers-reduced-motion: no-preference) {
    /* Measured with .context/pe-raillen.mjs, rounded up. pathLength="1" is not
       honoured by Chrome for a dasharray set from CSS — the trail curves were
       lost to that once already. */
    .pefit__line { stroke-dasharray: 760; stroke-dashoffset: 760; }
    [data-reveal].is-revealed ~ .pefit__rail .pefit__line,
    .pefit__rail .pefit__line { animation: draw-path 1000ms var(--ease-out) 200ms forwards; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .pefit__line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}

/* ----- the four stages ----- */

.pefit__flow {
  display: grid;
  gap: 1.1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pefit;
}

@media (min-width: 40rem) and (max-width: 61.99rem) {
  .pefit__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .pefit__flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin-top: 0.9rem; }
}

.pefit__stage { margin: 0; }

.pefit__who {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 0.3rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.pefit__stage--ours .pefit__who { color: var(--cobalt-ink); }

/* The product's own name for the mode, so the credit tariff further down the
   page stops being the only place it is mentioned. */
.pefit__mode {
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--cobalt-line);
  border-radius: var(--radius-pill);
  background: var(--cobalt-soft);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: none;
}

.pefit__title { margin: 0; font-size: var(--fs-h3); color: var(--ink); }
.pefit__body { margin: 0.3rem 0 0; font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }

.pefit__stop {
  max-width: 44rem;
  margin: 1.1rem auto 0;
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--muted);
}

/* ----- below 62rem: the rail becomes vertical, as it does in the source trail ----- */

@media (max-width: 61.99rem) {
  .pefit__flow { position: relative; padding-left: 1.6rem; }
  .pefit__flow::before {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 0.9rem;
    bottom: 0.9rem;
    width: 2px;
    background: var(--line-strong);
    border-radius: 2px;
  }
  .pefit__stage { position: relative; }
  .pefit__stage::before {
    content: '';
    position: absolute;
    left: -1.22rem;
    top: 0.35rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line-strong);
  }
  .pefit__stage--ours::before { background: var(--sky-cobalt); }
  /* The stage where an address exists is the only gold one, phone or desktop. */
  .pefit__stage--ours + .pefit__stage--ours::before {
    background: var(--gold);
    box-shadow: 0 0 0 4px var(--gold-soft);
  }
}

/* ============================================================ the second list ==
   The portfolio add-on band. Quiet on purpose: the reader is still the fund,
   and the portfolio company's own corp dev lead is who they forward it to.
   A second band with a hero's weight would split the page between two people.
   ============================================================================ */

.pfolio__grid { display: grid; gap: 1.5rem; align-items: start; }

@media (min-width: 62rem) {
  .pfolio__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3rem;
    /* Three icon rows against five lines of copy left a hole in the bottom
       right. Centred, the two columns balance. */
    align-items: center;
  }
}

.pfolio__body {
  margin: 0.9rem 0 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-2);
}

.pfolio__note {
  margin: 1rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--muted);
}

.pfolio__side {
  display: grid;
  gap: 1.5rem;
}

.pfolio__what {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pfolio__what li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--muted);
}

.pfolio__what b { color: var(--ink); font-weight: 700; }

/* ================================================= the wall, on this route ==
   Twelve cards instead of thirty-five, so the band no longer has to be as tall
   as it was to justify itself.

   These are the only rules in this file that override landing.css, which the
   section audit says is a signal rather than a licence. The signal here is
   real and narrow: the wall's size is tuned for a page that shows every card,
   and this route shows a third of them. Everything is scoped under the body's
   own `data-icp-id`, so it cannot reach the other two buyer pages even if
   their stylesheet ever loaded alongside this one.
   ========================================================================== */

[data-icp-id="pe_corp_dev"] .wall {
  padding-block: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
}

[data-icp-id="pe_corp_dev"] .story {
  width: 17.5rem;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem;
}

[data-icp-id="pe_corp_dev"] .story__q { font-size: 0.83rem; line-height: 1.5; }
[data-icp-id="pe_corp_dev"] .story__who b { font-size: 0.88rem; }
[data-icp-id="pe_corp_dev"] .story__who span { font-size: 0.74rem; }

/* A shorter track passes the same distance sooner, so the drift is slowed to
   keep the apparent speed close to the home page's. Twelve cards against
   thirty-five, at 96s and 92s, comes out near enough at these numbers. */
@media (prefers-reduced-motion: no-preference) {
  [data-icp-id="pe_corp_dev"] .wall__row--a .wall__track { animation-duration: 42s; }
  [data-icp-id="pe_corp_dev"] .wall__row--b .wall__track { animation-duration: 40s; }
}

/* ============================================ the reader's own market ==
   assets/js/icp.js moves the visitor's market to the front of the atlas and
   marks it `.market--home`. The behaviour is shared by all three buyer pages;
   the styling is not, because each page has its own stylesheet and there is no
   shared one they may all write to. So this is the PE page's treatment of a
   class the engine sets everywhere — see the note sent to the M&A session
   about where this really belongs.

   Cobalt, not gold. Gold means something was found, and a market is not a
   find. Cobalt is what this page already uses for "this part is about you".

   Nothing here claims the market is a key market, a main market, or where our
   clients are. It is one of the twenty we read in the local language, which is
   what the atlas already says and all this does is put the reader's own at the
   front of it.
   ==================================================================== */

[data-icp-id="pe_corp_dev"] .market--home {
  border-color: var(--cobalt-line);
  background: var(--cobalt-soft);
  box-shadow: inset 3px 0 0 0 var(--sky-cobalt);
}

[data-icp-id="pe_corp_dev"] .market--home .market__name { color: var(--cobalt-ink); }

/* Codex, shown the built page: the band does its job "but at excessive
   height", and the 514K proof should reach the viewport sooner. The spacing
   above is tightened and this takes the band's own padding below the site's
   section rhythm, which is tuned for bands carrying more than four short
   columns. */
[data-icp-id="pe_corp_dev"] .pefit {
  padding-block: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
}

/* ============================================== premium elevation, this page ==
   A quiet cartographic texture behind the two sourcing tracks, and a lift on
   hover/focus for the mode cards and the resolved-row table. Reuses the
   file's own tokens only — no new colour, no new shadow scale — and stays
   under this page's own selectors, per the rule at the top of this file.

   Cobalt carries the hover, not gold: gold on this site means "something was
   found" (the state chips above, the rail's one gold node), and a card that
   is merely under a pointer has not found anything.
   ========================================================================== */

[data-icp-id="pe_corp_dev"] .pefit--modes {
  background-image: url('/assets/img/scenes/texture-cartographic-field.webp?v=c0f3ef53');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

[data-icp-id="pe_corp_dev"] .pefit__modecard {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

[data-icp-id="pe_corp_dev"] .pefit__modecard:hover,
[data-icp-id="pe_corp_dev"] .pefit__modecard:focus-within {
  transform: translateY(-2px);
  border-color: var(--cobalt-line);
  box-shadow: var(--shadow-l);
}

[data-icp-id="pe_corp_dev"] .rowfig__table {
  box-shadow: var(--shadow-m);
}

[data-icp-id="pe_corp_dev"] .rowfig__table tbody tr {
  transition: background-color 160ms ease;
}

[data-icp-id="pe_corp_dev"] .rowfig__table tbody tr:hover {
  background-color: var(--cloud);
}

/* The portfolio band's scene image, added alongside the existing icon list
   rather than replacing it. Purely atmospheric — see the comment on
   .pfolio__grid above for why this band deliberately carries no chart: a
   drawn "records get thinner" curve would imply a measurement nobody has
   taken. A mood image implies nothing quantitative, so it does not run into
   that constraint. */
.pfolio__art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
}