/* Help
 * /help — the practice, and what the numbers mean.
 *
 * Built to be added to. Each section is a heading, a hint and some content,
 * using the same .sectiontitle / .sectionhint the rest of the app uses, so a
 * new section needs no new CSS. That is the point: background selection and
 * the other preferences are coming, and each should be a template edit.
 */

.helpwrap { padding-top: 8px; }

.helpsection { margin-bottom: 34px; }

/* Numbered, because the practice genuinely is a sequence — and spaced wider
   than a default list, since each line is an instruction rather than an item
   in an inventory. */
.helpsteps {
  margin: 4px 0 0;
  padding-left: 22px;
  list-style: decimal;
}
.helpsteps li {
  margin-bottom: 9px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* A two-column reference: the value on the left, what it means on the right.
   Rows rather than cards — this is a lookup, and a lookup wants to be scanned
   down one column. */
.helptable {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
}
.helptable th,
.helptable td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
}
.helptable tr:last-child th,
.helptable tr:last-child td { border-bottom: none; }

/* The score itself, which is what the eye is looking for. Tabular figures so
   the column of numbers lines up instead of wandering. */
.helptable th {
  width: 7.5rem;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.helpnote {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-faint);
  font-style: italic;
}

@media (max-width: 480px) {
  /* The label column shrinks to its content: "+8 to +14" needs the room,
     "+2" does not, and a fixed width wastes half the screen on a phone. */
  .helptable th { width: auto; padding-right: 10px; }
  .helptable th, .helptable td { padding-left: 0; font-size: 14.5px; }
  .helpsteps { padding-left: 20px; }
}