/* Risk / Reward. Tokens, header and footer come from the site stylesheet. */
.narrow.wide { max-width: 920px; }
.intro h1 { font-size: 22px; margin: 0 0 12px; }
.risk { color: var(--err); }
.reward { color: var(--ok); }

.legend { font-size: 13px; font-weight: 600; margin: 20px 0 8px; }

/* Ten per row on wide screens, so each row is one band of ten: 1–10, 11–20, … */
.rr {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px;
}
.rr li {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 2px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap;
}
.rr .risk { font-size: 13px; }
.rr .reward { font-size: 15px; }

@media (max-width: 760px) {
  .rr { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .rr { gap: 4px; }
  .rr li { padding: 8px 0; }
  .rr .risk { font-size: 12px; }
  .rr .reward { font-size: 14px; }
}
@media (max-width: 420px) {
  .rr .reward.long { font-size: 12.5px; letter-spacing: -0.02em; }
}
@media (max-width: 380px) {
  .rr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media print {
  .rr { gap: 3px; }
  .rr li { padding: 4px 2px; break-inside: avoid; }
}