/* Morse Code Trainer. Functional layout before the design pass; existing tokens only.
   The aligned results (spec D9): each step is a column, what was sent above what was typed; errors are
   underlined and in --state-wrong (never color alone), a character left out shows as _. The light is small,
   in --ink, off by default under prefers-reduced-motion (main.js; spec §7). The copy field is 18px, so iOS
   doesn't zoom on focus. */

.m-trainer { padding-block: var(--s3) var(--s7); }
.m-trainer__intro { margin-bottom: var(--s3); display: grid; gap: var(--s1); }
.m-trainer__intro h1 { font-size: 24px; }
.m-trainer__intro p { max-width: 60ch; }

.m-trainer__card, .m-trainer__progress { max-width: 760px; margin-inline: 0; display: grid; gap: var(--s4); padding: var(--s3); }
@media (min-width: 400px) { .m-trainer__card, .m-trainer__progress { padding: var(--s4); } }
.m-trainer__card:focus { outline: none; }
.m-trainer__progress { margin-top: var(--s5); }

/* ---------- the lesson ---------- */
.m-trainer__lesson { display: grid; gap: var(--s2); }
.m-trainer__chars { display: flex; flex-wrap: wrap; gap: var(--s1); list-style: none; margin: 0; padding: 0; }
.m-trainer__char {
  display: grid; place-items: center; min-width: 36px; height: 36px; padding-inline: var(--s2);
  border-radius: 8px; background: var(--surface-2); font-weight: 700; font-size: 18px;
}
.m-trainer__char.is-new { background: var(--ink); color: var(--on-ink); }
.m-trainer__hear { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.m-trainer__light { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--line-strong); }
.m-trainer__light[data-on] { background: var(--ink); border-color: var(--ink); }
.m-trainer__light[data-off] { visibility: hidden; }

/* ---------- settings ---------- */
.m-trainer__settings {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s2) var(--s4); align-items: end;
  border: 0; margin: 0; padding: 0; min-width: 0;
}
.m-trainer__settings:disabled { opacity: .6; }
.m-trainer__field, .m-trainer__range { display: grid; gap: 2px; font-size: 14px; }
.m-trainer__select {
  min-height: 44px; padding: 0 var(--s3); font-size: 16px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px;
}
.m-trainer__range output { font-weight: 700; font-variant-numeric: tabular-nums; }
.m-trainer__range input { width: 100%; min-height: 32px; margin: 0; accent-color: var(--ink); }
.m-trainer__range[hidden] { display: none; }
.m-trainer__toggle { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: 15px; }
.m-trainer__toggle input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.m-trainer__minutes { display: grid; gap: 2px; font-size: 14px; justify-items: start; }
.m-trainer__settings .seg span { min-width: 48px; }

.m-trainer__go { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.m-trainer__go [hidden] { display: none; }
.m-trainer__hint { flex: 1 1 180px; font-size: 13px; }
.m-trainer.is-running .m-trainer__hint { display: none; }

/* ---------- the session ---------- */
.m-trainer__session { display: grid; gap: var(--s2); }
.m-trainer__session[hidden] { display: none; }
.m-trainer__session-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.m-trainer__copy-label { font-weight: 700; font-size: 15px; }
.m-trainer__copy {
  width: 100%; min-height: 52px; padding: 0 var(--s4); font-size: 20px; font-weight: 700; letter-spacing: .1em;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px;
}
.m-trainer__copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.m-trainer__copy-help { font-size: 13px; }

/* ---------- results ---------- */
.m-trainer__result { display: grid; gap: var(--s3); }
.m-trainer__result:focus, .m-trainer__result h2:focus { outline: none; }
.m-trainer__result .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .m-trainer__result .figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.m-trainer__result .fig dd { font-size: 20px; }
.m-trainer__key { font-size: 13px; }
.m-trainer__align { display: flex; flex-wrap: wrap; gap: var(--s2) 2px; list-style: none; margin: 0; padding: 0; }
.m-trainer__step { display: grid; justify-items: center; min-width: 20px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.m-trainer__step:nth-child(5n) { margin-right: var(--s2); }
.m-trainer__sent { color: var(--ink-2); white-space: pre; }
.m-trainer__typed { color: var(--ink); white-space: pre; }
.m-trainer__step:not(.is-ok) .m-trainer__typed,
.m-trainer__step.is-missing .m-trainer__sent,
.m-trainer__step.is-wrong .m-trainer__sent { color: var(--state-wrong); text-decoration: underline 2px; text-underline-offset: 3px; }

/* ---------- progress ---------- */
.m-trainer__progress .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-trainer__progress .fig dd { font-size: 20px; }
.m-trainer__recent { overflow-x: auto; }
.m-trainer__recent caption { text-align: left; padding-bottom: var(--s2); }
.m-trainer__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.m-trainer__table thead th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: var(--s1) var(--s2); }
.m-trainer__table td { padding: 6px var(--s2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.m-trainer__code { display: grid; gap: var(--s2); }
.m-trainer__code p { max-width: 65ch; }
.m-trainer__code-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.m-trainer__code-out, .m-trainer__code-in {
  flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 0 var(--s3); font-size: 16px; font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px;
}
.m-trainer__code-out[hidden] { display: none; }
.m-trainer__code-note { font-size: 14px; }

/* ---------- about ---------- */
.m-trainer__about { max-width: 760px; margin-top: var(--s6); }
.m-trainer__about > h2 { margin-top: var(--s6); }
.m-trainer__about > h3 { margin-top: var(--s4); }
.m-trainer__about p, .m-trainer__about ol { margin-top: var(--s2); }
.m-trainer__about ol { padding-left: 1.4em; }
.m-trainer__about li + li { margin-top: var(--s1); }
.m-trainer__keys { margin-top: var(--s2); border-collapse: collapse; }
.m-trainer__keys th, .m-trainer__keys td { text-align: left; padding: var(--s1) var(--s3) var(--s1) 0; }