/* The How it works page: a readable text column, numbered steps and the live values.
   Tokens and shared components come from sim.css; every rule is scoped under .sim. */

.sim .sim-how__section { min-width: 0; }

/* About 70 characters to a line; tables use the card's width but scroll inside it. */
.sim .sim-how__prose { max-width: 70ch; }
.sim .sim-how__prose p { margin: 0 0 12px; line-height: 1.55; }
.sim .sim-how__prose p:last-child { margin-bottom: 0; }
.sim .sim-how__section > .sim-card__title { margin-bottom: 10px; }
.sim .sim-how__list { margin: 0 0 12px; padding-left: 20px; line-height: 1.55; }
.sim .sim-how__list li { margin-bottom: 8px; }

/* The ten steps: each its own block with a rail, its number and name on a line of their own. */
.sim .sim-how__steps { display: flex; flex-direction: column; gap: 14px; }
.sim .sim-how__step { padding: 4px 0 4px 14px; border-left: 3px solid var(--sim-accent); }
.sim .sim-how__step p { margin: 0; }
.sim .sim-how__step-title {
  display: block;
  margin-bottom: 2px;
  font-family: var(--sim-font-head);
  font-size: 16px;
  color: var(--sim-accent-hover);
}

/* A live value, filled in by the controller. */
.sim .sim-how__value { font-weight: 600; color: var(--sim-accent-hover); }
.sim .sim-how__value .sim-code { margin-left: 2px; }

.sim .sim-how__table-wrap { max-width: 100ch; margin-top: 8px; }
.sim .sim-how__table td { vertical-align: top; }
.sim .sim-how__figure { font-weight: 600; }
.sim .sim-how__heritage-note { margin-top: 10px; max-width: 70ch; }
.sim .sim-how__heritage-note[hidden] { display: none; }

.sim .sim-how__verdict {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--sim-raised);
  font-size: 14px;
}
.sim .sim-how__verdict:empty { display: none; }