/* Styling for the evidence-ladder diagram in this post.
   Selectors are scoped under .prose so they out-specify the generic
   `.prose ul, .prose ol` list rules in site.css. */

.prose .ladder {
  list-style: none;
  padding: 0;          /* site.css puts 1.4rem of padding on .prose ol */
  margin: 0;
  display: grid;
  gap: 6px;
}

.prose .ladder li + li { margin-top: 0; }   /* grid gap already spaces these */

.prose .ladder-step {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem 0.85rem;
  min-width: 0;        /* let the row shrink inside its grid track */
  padding: 0.7rem 0.9rem;
  background: var(--bg-soft);
  border-left: 3px solid var(--rule-strong);
  border-radius: 0 8px 8px 0;
  transition: opacity 0.18s ease;
}

.ladder-n {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ladder-text {
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
  text-wrap: pretty;
}

.ladder-tier {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  opacity: 0.85;
}

/* Connector between steps, drawn with a pseudo-element so the markup stays
   a plain ordered list for screen readers. */
.prose .ladder-step + .ladder-step { position: relative; }
.prose .ladder-step + .ladder-step::before {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: -5px;
  width: 1px;
  height: 5px;
  background: var(--rule-strong);
}

@media (max-width: 44rem) {
  .prose .ladder-step { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .ladder-tier {
    grid-column: 2;
    justify-self: start;
    margin-top: 0.2rem;
    white-space: normal;   /* long tier names must be allowed to wrap */
  }
}