/* /example/the-standard: the standard, published in full.

   Named for the route's page key (example.standard). Layers on base.css.

   Same discipline as the account page: this is a specification, so it is
   built like one. Hairline rules, tabular numbers, no shadows, nothing
   that looks like it is trying to win the argument. The one piece of
   ornament is the prevalence bar, and it earns its place by making six
   percentages comparable at a glance.

   Colour follows the house meanings exactly. Teal is confirmed. Slate is
   ruled out or unknown, which is why the exclusions and the thrown-out
   traits carry slate marks and never teal ones. */

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

.st-hero { padding: 62px 0 70px; }
/* Stepped down from the site h1 because the panel takes half the width:
   at the base size the first line no longer fits its column, and the
   headline wraps somewhere the copy did not choose. The two hero title
   keys are written as two deliberate lines, so each gets its own. */
.st-hero h1 {
  max-width: 13em;
  font-size: clamp(34px, 4.4vw, 58px);
}
.st-hero h1 .line { display: block; }
.st-hero-lede { max-width: 36em; }

/* The copy keeps the left. The panel takes the right, which this hero
   previously left empty on every screen wider than a laptop. */
.st-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1040px) {
  .st-hero-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ── The hero panel ─────────────────────────────────────────────── */

/* A reading, not a card of copy: it carries only figures, and every one
   of them comes from the evidence file. Built like the panels on the
   account page so the two read as the same instrument. */
.st-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.st-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.st-panel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
}
.st-panel-version { color: var(--ink); }
.st-panel-date { margin-left: auto; color: var(--muted); }

.st-panel-body { padding: 18px 18px 20px; }

.st-panel-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.st-panel-total b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.st-panel-total span {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
}

.st-panel-rows {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.st-panel-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 32px;
  gap: 12px;
  align-items: center;
}
.st-panel-label {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--body);
}
.st-panel-track {
  display: flex;
  height: 8px;
  border-radius: 4px;
  background: var(--track);
  overflow: hidden;
}
/* flex: none so the inline width is honoured exactly. Without it the
   segments shrink and a 45% bar stops meaning 45%. */
.st-panel-fill,
.st-panel-unknown { flex: none; height: 100%; }
.st-panel-fill { background: var(--teal); }
.st-panel-unknown { background: var(--slate); }
.st-panel-pct {
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* The second paragraph carries the what-is-invented framing, so it is set
   quieter than the lead without dropping out of the hero. */
.st-hero-lede-2 {
  margin-top: 16px;
  font-size: 17px;
  color: var(--muted);
}

/* ── The one rule ───────────────────────────────────────────────── */

/* Set as a two-column statement so it reads as a standing principle
   rather than as another section of body copy. */
.st-rule-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) {
  .st-rule-inner { grid-template-columns: 1fr; gap: 28px; }
}
.st-rule h2 { max-width: 11em; }
.st-rule-body p {
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--body);
  max-width: 34em;
}
.st-rule-body p + p { margin-top: 18px; }

/* ── Shared: the source line under a trait ──────────────────────── */

.st-src {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.st-src-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: 6px;
}
.st-src p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── The gates ──────────────────────────────────────────────────── */

.st-gate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 46px;
}
@media (max-width: 900px) {
  .st-gate-grid { grid-template-columns: 1fr; gap: 16px; }
}

.st-gate {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 26px 28px 24px;
}
@media (max-width: 700px) {
  .st-gate { padding: 22px 20px 20px; }
}
.st-gate-num {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--teal-deep);
  margin-bottom: 12px;
}
.st-gate h3 { color: var(--ink); }
.st-gate > p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
}

/* ── The six traits ─────────────────────────────────────────────── */

.st-trait-list {
  margin-top: 46px;
  border-top: 1px solid var(--rule);
}

/* The legend. The slate segment is the only mark on this page whose
   meaning a reader cannot infer, and inferring it as "no" is the exact
   misreading the page exists to prevent, so both colours are named. */
.st-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 24px 0 0;
  padding: 0;
}
.st-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--body);
}
.st-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}
.st-swatch-yes { background: var(--teal); }
.st-swatch-unknown { background: var(--slate); }

/* Three columns: what it is, how often, and the figure. The bars share a
   baseline and a scale, so the six read as one chart. */
.st-trait {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 32%) 152px;
  gap: 40px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 900px) {
  .st-trait {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
    padding: 24px 0 26px;
  }
}

.st-trait-main h3 { color: var(--ink); }
.st-trait-main > p {
  margin-top: 10px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--body);
  max-width: 44em;
}
/* Compacted inside a chart row: the bordered block that suits a card
   makes every row tall enough to break the run of bars. */
.st-trait-main .st-src {
  max-width: 44em;
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}
.st-trait-main .st-src-label {
  display: inline;
  margin-right: 6px;
  margin-bottom: 0;
}
.st-trait-main .st-src p { display: inline; }

/* The figure block. Right-aligned on desktop so the six percentages
   line up as a column the eye can run down. */
.st-trait-figure { padding-top: 2px; }

.st-fig-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;
}
.st-fig-num {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.st-fig-pct {
  font-size: 22px;
  font-weight: 600;
  margin-left: 2px;
  color: var(--muted);
}
.st-fig-count {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Scaled against 100, not against the largest value in the set. A 45%
   trait must not render as a full bar, which is what the visible track
   behind it is for: it draws the whole hundred the fill is a share of.
   --track rather than --rule because at this height a hairline colour
   reads as a second bar competing with the teal. */
.st-track {
  display: flex;
  height: 22px;
  border-radius: 5px;
  background: var(--track);
  overflow: hidden;
}
/* flex: none so the inline width is honoured exactly. */
.st-fill,
.st-unknown { flex: none; height: 100%; }
.st-fill { background: var(--teal); }
/* Slate, because unknown is not a negative and must not be dressed as
   one. It sits beside the confirmed share rather than inside it. */
.st-unknown { background: var(--slate); }

/* The one trait with a real blind spot. Slate, because unknown is not a
   negative and must not be dressed as one. */
.st-fig-unknown {
  display: block;
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--slate);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* The version stamp. Deliberately plain: it is a provenance line, and
   dressing it up would undercut what it says. */
.st-stamp {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.st-stamp-line {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .st-stamp-line { white-space: normal; }
}

/* ── The exclusions ─────────────────────────────────────────────── */

.st-excl-inner {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) {
  .st-excl-inner { grid-template-columns: 1fr; gap: 30px; }
}
.st-excl h2 { max-width: 12em; }

.st-excl-list {
  list-style: none;
  border-top: 1px solid var(--rule);
}
.st-excl-list li {
  position: relative;
  padding: 14px 0 14px 26px;
  border-bottom: 1px solid var(--rule);
  font-size: 16.5px;
  color: var(--body);
}
/* Slate, not teal: these are the ways out, not a positive signal. */
.st-excl-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 10px;
  height: 2px;
  background: var(--slate);
}

/* ── What was thrown out ────────────────────────────────────────── */

.st-reason {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
}
.st-reason:first-of-type { margin-top: 46px; }

.st-reason-head { max-width: 40em; }
.st-reason-head h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--ink);
}
.st-reason-head p {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.58;
  color: var(--body);
}

.st-cut-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
@media (max-width: 1040px) {
  .st-cut-rows { grid-template-columns: 1fr; gap: 16px; }
}

/* A cut trait reads as struck from the record: tinted ground, quiet
   card, no lift. It should look decisively unlike the six that survived,
   which sit on white.

   The accent is a short slate rule above the name, NOT a coloured border
   down the left edge. Same decision and same reasoning as .sp-quote on
   /example/the-plan: the homepage earns a side border on .finding-src
   because the colour changes with the verdict, teal confirmed, slate
   nothing found, blue new. A border that is identical on all nine of
   these carries no information, which makes it decoration in the costume
   of meaning. Slate is already this page's mark for "ruled out", set by
   the exclusion list above, so the rule stays inside the vocabulary the
   page has established. */
.st-cut {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 22px 24px 20px;
}
.st-cut::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--slate);
  margin-bottom: 16px;
}
.st-cut h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.016em;
  line-height: 1.25;
  color: var(--ink);
}
.st-cut-why {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body);
}

.st-cut-meta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 12px;
}
.st-cut-meta dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.st-cut-meta dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
}

/* ── What it cannot do ──────────────────────────────────────────── */

.st-limits-inner { max-width: 44em; }
.st-limits-inner .lede + .lede { margin-top: 18px; }

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

/* Centered, matching /example and /example/an-account. The closing block
   is the one place the page stops being a record and addresses you. */
.st-cta-inner { text-align: center; }
.st-cta h2 { max-width: 14em; margin: 0 auto; }
.st-cta .lede { margin-left: auto; margin-right: auto; }
.st-cta .actions { justify-content: center; }