/* /example/the-segments: the grouped market. Layers on top of base.css.

   Section order matches src/views/example-the-segments.ejs.

   THE SHAPE, AND WHY IT IS THIS ONE. Four groups, each carrying a
   forty-word published rule, a plain-English reading, a topic list and
   seven figures. A four-up card grid cannot hold that: something gets
   truncated, and the thing that would get truncated is the rule, which
   is the only reason to believe the grouping.

   So each group is a full-width band with the words on the left and the
   figures on the right, stacking to one column on a phone. The reader
   goes down the page group by group, and the fit figure sits in the same
   place in every band, which is what makes the column readable straight
   down. That column is the page's quiet argument and the layout exists
   to serve it.

   Same system as the rest of the site: paper ground, hairlines, no
   shadows, teal only as a score fill. The published rule takes the
   blockquote treatment the account page uses for recorded quotes,
   because it is the same kind of thing: words we did not write. */

/* ── Hero ───────────────────────────────────────────────────────── */

.xs-hero { padding: 66px 0 54px; }

.xs-hero h1 .line { display: block; }
.xs-hero h1 .line + .line { margin-top: 0.1em; }

.xs-hero h1 {
  font-size: clamp(33px, 4.5vw, 57px);
  max-width: 21em;
}

.xs-hero-lede { font-size: 19.5px; max-width: 40em; }

/* Run metadata. Instrument type: chrome reporting what the run was,
   not copy. Same component as .rk-run on the ranking page. */
.xs-run {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.xs-run span { margin: 0 6px; color: var(--rule); }

/* Shared measure for a paragraph under a section headline. */
.xs-measure { max-width: 40em; }

/* ── How the groups were made ───────────────────────────────────── */

.xs-how h2 { max-width: 16em; }
.xs-how-grid { margin-top: 42px; }

@media (min-width: 901px) {
  .xs-how-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── The four groups ────────────────────────────────────────────── */

.xs-groups h2 { max-width: 15em; }

.xs-group {
  margin-top: 24px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 26px 28px 28px;
}

.xs-group:first-of-type { margin-top: 34px; }

.xs-group-head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

.xs-group-stage {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.xs-group-head h3 { text-wrap: balance; }

.xs-group-body {
  margin-top: 22px;
  display: grid;
  gap: 26px;
}

/* Words left, figures right. The figure column is fixed so the fit bar
   starts at the same x in all four bands and the column can be read
   straight down, which is the whole point of the layout. */
@media (min-width: 881px) {
  .xs-group-body {
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 40px;
  }
}

.xs-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.xs-plain p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  max-width: 40em;
}

.xs-rule { margin-top: 22px; }

/* The research's own wording, set as a quotation because that is what it
   is. The teal left rule is the site's repeating device, not a flourish:
   `.finding-src` on the homepage sets it at 3px and switches the color
   by what the finding is (teal confirmed, slate nothing found, blue
   new), and `.so-rel-rule` on /example/the-sources uses the same 2px
   teal for a quoted rule. Teal here means the same thing it means
   everywhere else on the site: this was recorded, not written by us. */
.xs-rule blockquote {
  margin: 0;
  padding: 14px 0 14px 18px;
  border-left: 2px solid var(--teal);
  background: var(--tint);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  max-width: 44em;
}

.xs-topics { margin-top: 22px; }

.xs-topics ul { list-style: none; margin: 0; padding: 0; max-width: 40em; }

.xs-topics li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
}

.xs-topics li + li { margin-top: 9px; }

/* A hairline dash, never a check or a teal mark: these are subjects we
   inferred, and teal on this site means something was confirmed. */
.xs-topics li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--slate);
}

/* The figure panel. */
.xs-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 18px;
  align-content: start;
  padding-top: 4px;
}

/* Reserved at two lines. "Scoring high on fit" and "Median employees"
   wrap where "Companies" does not, and without a floor the numerals in
   one row sit lower than the numerals beside them. The panel only works
   if the figures line up across it. */
.xs-stat dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.3;
  min-height: 2.6em;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

/* The two score rows are single-line labels on a full-width row, so the
   floor above would only add a gap under them. */
.xs-stat-score dt { min-height: 0; }

.xs-stat dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 19px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Fit and timing span the panel so both bars share a left edge and the
   same scale. Always displayed separately, never averaged: site rule,
   SITE-ARCHITECTURE section 4. */
.xs-stat-score {
  grid-column: 1 / -1;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.xs-stat-score:nth-of-type(6) { margin-top: 2px; }

.xs-stat-score dd {
  display: flex;
  align-items: center;
  gap: 10px;
}

.xs-bar {
  display: block;
  flex: 1 1 auto;
  height: 5px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}

.xs-bar-fill { display: block; height: 100%; background: var(--teal); }

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

.xs-topics-note,
.xs-provisional {
  margin-top: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 44em;
}

.xs-provisional { margin-top: 8px; }

/* ── The eight we could not place ───────────────────────────────── */

/* Slate, never teal and never amber. This is an absence rather than a
   finding or a problem, and the site's slate means exactly that: ruled
   out or unknown.

   Deliberately the same component as `.xp-pending` on /example/explore,
   down to the 3px slate rule against hairlines on the other three
   sides. That panel says "we looked, and there is nothing here yet" and
   so does this one, so they should not be two different shapes. */
.xs-unplaced-panel {
  display: grid;
  gap: 20px;
  max-width: 58em;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--slate);
  border-radius: 0 12px 12px 0;
  padding: 28px 30px;
}

@media (min-width: 681px) {
  .xs-unplaced-panel { grid-template-columns: 96px minmax(0, 1fr); gap: 28px; }
}

.xs-unplaced-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.xs-unplaced-text h2 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 12px; }

.xs-unplaced-text p {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--body);
}

.xs-unplaced-why {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 14.5px !important;
  color: var(--muted) !important;
}

/* ── What the fit column shows ──────────────────────────────────── */

.xs-read { padding: 78px 0 84px; }
.xs-read h2 { max-width: 14em; }
.xs-read .lede + .lede { margin-top: 18px; }

/* The caution that has to travel with the pattern. Inside the dark band
   rather than after it, so it cannot be read without the claim it
   qualifies. */
.xs-caveat {
  margin-top: 40px;
  max-width: 48em;
  padding: 20px 24px;
  border: 1px solid var(--rule-dark);
  border-radius: 12px;
}

.xs-caveat-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}

.xs-caveat p {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--dark-body);
}

/* ── Inside the live-event set ──────────────────────────────────── */

.xs-within h2 { max-width: 16em; }

.xs-table-wrap {
  margin-top: 30px;
  max-width: 58em;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  overflow-x: auto;
}

.xs-table { width: 100%; min-width: 620px; border-collapse: collapse; }

/* Visually hidden: the sighted reader has the headline and lede above
   saying the same thing. */
.xs-table-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.xs-table thead th {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 14px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}

.xs-table tbody tr + tr td { border-top: 1px solid var(--rule); }
.xs-table td { padding: 15px 18px; vertical-align: top; }

.xs-row-stage {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

.xs-row-name {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.xs-col-num {
  width: 104px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.xs-col-score { width: 148px; white-space: nowrap; }

.xs-col-score .xs-bar { display: inline-block; width: 72px; flex: none; vertical-align: middle; }
.xs-col-score .xs-num { display: inline-block; margin-left: 9px; vertical-align: middle; }

.xs-within-note {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 44em;
}

/* ── What we grouped on, and what we didn't ─────────────────────── */

.xs-rejected h2 { max-width: 16em; }

.xs-rejected-list {
  margin: 34px 0 0;
  max-width: 54em;
  display: grid;
  gap: 0;
}

.xs-rejected-item {
  display: grid;
  gap: 6px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}

.xs-rejected-item:last-child { border-bottom: 1px solid var(--rule); }

@media (min-width: 761px) {
  .xs-rejected-item { grid-template-columns: 240px minmax(0, 1fr); gap: 30px; align-items: baseline; }
}

.xs-rejected-item dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}

.xs-rejected-item dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.58;
  color: var(--body);
}

/* ── Closing ────────────────────────────────────────────────────── */

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

.xs-cta-quiet {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  /* Set as text, so --teal-deep. */
  color: var(--teal-deep);
  text-decoration: none;
}
.xs-cta-quiet span {
  display: inline-block;
  margin-left: 5px;
  transition: transform 160ms ease;
}
.xs-cta-quiet:hover span { transform: translateX(3px); }

/* ── The live-event table, narrow ───────────────────────────────── */

/* Same reasoning as the ranked table on /what-we-build/ranking: below
   this width the two score columns end up off the right edge behind a
   gesture nobody was told about, and the scores are the argument. So the
   row becomes a stacked block with both bars sharing a left edge. */
@media (max-width: 700px) {
  .xs-table-wrap { overflow-x: visible; }
  .xs-table { min-width: 0; }

  .xs-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .xs-table tbody tr { display: block; padding: 18px; }
  .xs-table tbody tr + tr { border-top: 1px solid var(--rule); }
  .xs-table tbody tr + tr td { border-top: none; }

  .xs-table td { display: flex; align-items: center; gap: 10px; padding: 0; }
  .xs-table td:first-child { display: block; margin-bottom: 12px; }
  .xs-table td + td { margin-top: 10px; }

  .xs-table td.xs-col-num,
  .xs-table td.xs-col-score { width: auto; }

  /* Fixed width so both bars start at the same x and stay comparable. */
  .xs-score-label {
    flex: 0 0 auto;
    width: 74px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .xs-col-score .xs-bar { flex: 1 1 auto; width: auto; margin: 0; }
  .xs-col-score .xs-num { margin-left: 0; }
}

/* Above that width the header carries the labels, so the per-row copies
   would read as noise in every cell. */
@media (min-width: 701px) {
  .xs-score-label { display: none; }
}

/* ── Motion ─────────────────────────────────────────────────────── */

/* Nothing on this page animates. The note is here so a later edit does
   not assume motion was forgotten rather than declined: the page is a
   table of findings, and movement on it would read as decoration. */