/* /example/explore: the interactive view of the real example.
   Layers on top of base.css.

   THE LAYOUT, AND WHY IT IS THIS ONE. Rex chose it on 2026-09-19 from
   four options, after the first build put a filter toolbar, a scatter
   plot and an evidence panel on screen at once and read as a dashboard.
   DESIGN.md rules a dashboard skin out even on pages that present
   scores, and three things competing for one viewport is what made it
   clunky.

   So: one column, nothing beside it. The filters are a line of text
   rather than a toolbar. Each company's evidence opens directly beneath
   its own row, so the reader never looks across the page to find it.
   There is no chart. The one thing the chart was teaching, that fit and
   timing are separate measurements, is now said in a sentence under the
   list instead of drawn.

   What this bought beyond the quiet: the desktop and mobile layouts are
   now the same layout. The earlier build had a two-column grid that
   restacked into a different order below 1000px, which was a second
   layout to maintain and to check.

   The column is capped at 62em, the measure DESIGN.md sets for evidence
   pages, and left aligned like every other page rather than centered. */

/* -- The column ------------------------------------------------- */

.xp-col { max-width: 62em; }

/* -- Header ------------------------------------------------------ */

.xp-head { padding: 44px 0 30px; }

/* A step down from the site's display size. This page's headline is an
   invitation to start looking, not the page's main event: the list is. */
.xp-head h1 {
  font-size: clamp(34px, 4.2vw, 52px);
  max-width: 14em;
}

.xp-head-lede {
  font-size: 18px;
  max-width: 44em;
  margin-top: 16px;
}

/* Run metadata. Instrument type: chrome reporting what the run was,
   matching the same line on /what-we-build/ranking. */
.xp-run {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.xp-run span { margin: 0 6px; color: var(--rule); }

.xp-provisional {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 44em;
}

/* -- The list section -------------------------------------------- */

.xp-tool {
  padding: 26px 0 72px;
  border-top: 1px solid var(--rule);
}

/* -- Filters ------------------------------------------------------ */

/* Set as a line of text, not as a control bar. Each option is a word or
   a number that changes weight when it is the one in force; there is no
   ground, no border and no pill, because the filters are not the point
   of the page and should not be the loudest thing on it.

   Buttons rather than links or inputs: they are real controls and have
   to be reachable from the keyboard, but this design system has no input
   styling and deliberately does not invent any (DESIGN.md, Components,
   Inputs). */

.xp-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 26px;
}

.xp-fg {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.xp-fg-label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.xp-fg-opts {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}

.xp-f {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 2px 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.xp-f:hover { color: var(--ink); }

/* The option in force. Ink and a rule under it, never teal: teal on this
   site means something was verified, and a filter setting is not a
   finding. */
.xp-f[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.xp-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.xp-count {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.xp-reset {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--teal-deep);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.xp-reset:hover { border-bottom-color: var(--teal-deep); }

.xp-hint {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--muted);
}

/* -- The list ----------------------------------------------------- */

/* Hairlines between rows rather than a bordered card. The list is the
   body of the page, not an object sitting on it, so it takes the rules
   a long table takes in print and no container at all. */

.xp-list {
  margin-top: 10px;
  border-top: 1px solid var(--rule);
}

.xp-item { border-bottom: 1px solid var(--rule); }

/* The open company gets a ground, which is the only thing marking it:
   no bar, no border, no accent. */
.xp-item[open] { background: var(--surface-2); }

.xp-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 118px 118px 16px;
  align-items: center;
  gap: 14px;
  padding: 13px 14px 13px 2px;
  cursor: pointer;
  list-style: none;
  transition: background 140ms ease;
}
.xp-row::-webkit-details-marker { display: none; }
.xp-row::marker { content: ""; }
.xp-row:hover { background: var(--surface-2); }

.xp-rank {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.xp-name {
  font-size: 16.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.xp-item[open] .xp-name { font-weight: 600; }

.xp-score {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Slimmer than the bar on /what-we-build/ranking. With no chart on the
   page these are the only comparison a reader gets at a glance, so they
   stay, but they are chrome beside the company name rather than the
   row's main event. */
.xp-bar {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}
/* Both scores take the same fill on purpose: a second color would imply
   the two measure things of different kinds. */
.xp-bar-fill { display: block; height: 100%; background: var(--teal); }

.xp-num {
  flex: 0 0 auto;
  min-width: 22px;
  text-align: right;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* The column header went with the toolbar, so every row carries its own
   labels. Visually hidden on a wide screen, where the repetition would
   be noise, but never `display: none`: that drops them from the row's
   accessible name and a screen reader would hear "100 85" with nothing
   saying which number is which. */
.xp-score-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Disclosure marker. Drawn from two borders rather than set as a
   character, so it cannot inherit a font that does not carry it. */
.xp-chev {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--slate);
  border-bottom: 1.5px solid var(--slate);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}
.xp-item[open] .xp-chev {
  transform: rotate(225deg) translate(-2px, -2px);
  border-color: var(--muted);
}

/* -- The evidence, opened in place -------------------------------- */

/* Indented to the company name's left edge, so the opened block reads as
   belonging to the row above it rather than as a new section. */
.xp-body {
  padding: 4px 14px 26px 44px;
  max-width: 58em;
}

.xp-why-label,
.xp-pending-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.xp-why p {
  font-size: 16px;
  line-height: 1.58;
  color: var(--body);
}

.xp-rows { margin-top: 20px; }

/* The evidence row, carried over from /example/an-account unchanged in
   everything that matters. It is the site's signature component and the
   reason a row is worth opening. */
.xp-ev { padding: 16px 0; border-top: 1px solid var(--rule); }

.xp-ev-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 9px;
}
.xp-ev-top h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.016em;
  line-height: 1.25;
  color: var(--ink);
}

.xp-pill {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
  white-space: nowrap;
}
.xp-pill-yes { background: var(--pill-yes-bg); color: var(--teal-deep); }
.xp-pill-none { background: var(--pill-none-bg); color: var(--muted); }

/* A dated correction under a record that has not been altered. Matches
   .ac-note on the account page. */
.xp-note {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 3px solid var(--blue);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body);
}

.xp-meaning {
  font-size: 15.5px;
  line-height: 1.56;
  color: var(--body);
}

.xp-record {
  margin-top: 11px;
  padding: 11px 14px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.xp-record-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.xp-quote {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.xp-src {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
.xp-src a {
  font-weight: 600;
  color: var(--teal-deep);
  border-bottom: 1px solid transparent;
}
.xp-src a:hover { border-bottom-color: var(--teal-deep); }

.xp-full-link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--teal-deep);
}
.xp-full-link span {
  display: inline-block;
  margin-left: 5px;
  transition: transform 160ms ease;
}
.xp-full-link:hover span { transform: translateX(3px); }

/* -- The slot waiting on the build -------------------------------- */

/* A record that has not been published yet. It is styled as carefully as
   a filled one and says what it is in plain words, so an illustration
   can never be mistaken for a finding. The slate left rule is the same
   mark /example/an-account and the homepage give a finding where nothing
   could be found, which is the nearest thing the system has to "we
   looked, and there is nothing here yet". */

.xp-pending {
  margin-top: 20px;
  padding: 16px 18px 18px;
  border-left: 3px solid var(--slate);
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.xp-pending-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.014em;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 8px;
}

.xp-pending-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body);
}

.xp-pending-label {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.xp-pending-list { list-style: none; margin-top: 2px; }
.xp-pending-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.xp-pending-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.xp-pending-name {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--muted);
}

/* -- Nothing matched ---------------------------------------------- */

.xp-empty {
  margin-top: 10px;
  padding: 26px 0 28px;
  border-top: 1px solid var(--rule);
}
.xp-empty h2 {
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 9px;
}
.xp-empty p {
  font-size: 15.5px;
  line-height: 1.58;
  color: var(--body);
  max-width: 38em;
}

/* -- Why two numbers ---------------------------------------------- */

/* The argument the scatter plot used to make by being a scatter plot. */
.xp-scores-note {
  margin-top: 26px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 42em;
}

/* -- Closing ------------------------------------------------------ */

.xp-cta-inner { text-align: center; }
.xp-cta h2 { max-width: 16em; margin: 0 auto; }
.xp-cta .lede { max-width: 40em; margin: 18px auto 0; }
.xp-cta .actions { justify-content: center; }

/* -- Narrow ------------------------------------------------------- */

/* There is no second layout to switch to: the column is already the
   layout. Below this width the row stops trying to hold two score
   columns on one line and stacks them under the company name, and the
   per-row score labels come back into view because there is room for
   them and nothing else is naming the numbers. */

@media (max-width: 720px) {
  .xp-head { padding: 26px 0 22px; }
  .xp-head .eyebrow { margin-bottom: 12px; }
  .xp-head-lede { font-size: 16.5px; line-height: 1.5; margin-top: 12px; }
  .xp-run { margin-top: 14px; }

  .xp-filters { gap: 10px 20px; }
  .xp-fg { flex: 0 0 100%; }

  .xp-row {
    grid-template-columns: 24px minmax(0, 1fr) 14px;
    align-items: start;
    gap: 6px 10px;
    padding: 14px 4px 15px 2px;
  }
  .xp-rank { grid-column: 1; grid-row: 1; padding-top: 3px; }
  .xp-name { grid-column: 2; grid-row: 1; }
  .xp-chev { grid-column: 3; grid-row: 1; margin-top: 7px; }
  .xp-score { grid-column: 2; margin-top: 3px; }

  /* Every property the hidden state set has to be undone. */
  .xp-score-label {
    position: static;
    width: 44px;
    height: auto;
    overflow: visible;
    clip: auto;
    flex: 0 0 auto;
    font-family: var(--display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .xp-body { padding: 4px 4px 24px 36px; }
}

@media (max-width: 500px) {
  .xp-body { padding-left: 4px; }
}

/* -- Motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .xp-chev,
  .xp-f,
  .xp-full-link span { transition: none; }
}

/* -- Where the record qualifies a finding ------------------------- */

/* Ours, not the research's, and only present where the record itself
   limits what the finding supports. Set apart from the plain-English
   meaning above it so nobody reads a limit as part of the claim. */
.xp-caveat {
  margin-top: 9px;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* A source that exists but cannot be linked, because it is a job posting
   and will stop resolving. Named in words rather than linked, and styled
   as muted text rather than as a broken-looking link. */
.xp-nolink {
  font-style: normal;
  color: var(--muted);
}