/* Fretnetic — Ear Training (.et-). Class names here must not double as state names: a stage class `et-listen` once
   collided with the round button of the same name and drew the whole screen as a circle. One thing on screen: the sound, the choices, then what it was. */
.et-next { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 16px; }
.et-next > div:first-child { flex: 1; min-width: 220px; }
.et-next-title { font-size: 24px; margin: 2px 0 4px; }
.et-next p { margin: 0; }
.et-total { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.et-total b { font: 600 22px var(--font-display); font-variation-settings: var(--fn-font-display-axes); }
.et-meter { height: 8px; margin-top: 6px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.et-meter i { display: block; height: 100%; background: var(--good); transform-origin: left; transform: scaleX(var(--p, 0)); }

.et-chapter-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.et-chapter-head .card-title { margin-bottom: 2px; }
.et-chapter-head p { margin: 0; }
.et-lessons { list-style: none; margin: 0; padding: 0; }
.et-lesson { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.et-lesson.next { background: color-mix(in srgb, var(--text) 4%, transparent); margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
.et-mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border-strong); color: var(--select-ink); }
.et-lesson.passed .et-mark { background: var(--good); border-color: var(--good); color: var(--fn-note-ink); }
.et-lesson.started .et-mark { border-style: dashed; }
.et-mark .icon { width: 15px; height: 15px; }
.et-lesson-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.et-lesson-text small { font-size: 13.5px; }
.et-best { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.et-go { display: flex; gap: 6px; flex: none; }
.et-go .btn { text-decoration: none; }

.et-crumbs { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; font-size: 14px; }
.et-crumbs a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.et-crumbs a .faint { font-weight: 400; margin-left: -2px; }
.et-head { align-items: center; }
.et-stage { max-width: 860px; }
.et-quiz { display: flex; flex-direction: column; gap: 18px; min-height: 300px; }
.et-begin { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; flex: 1; padding: 40px 0; text-align: center; }
.et-begin p { margin: 0; max-width: 52ch; }
.et-hear { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.et-hear-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; }

.et-sound { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.et-replay { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 104px; height: 104px; border-radius: 50%; cursor: pointer;
  font-weight: 700; font-size: 13px; background: var(--action); border: 0; color: var(--action-ink); transition: background .15s; }
.et-replay:hover { background: var(--action-hover); }
.et-replay .icon { width: 32px; height: 32px; }
.et-replay.ping { animation: etPing .6s ease; }
@keyframes etPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--action) 55%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
.et-sound-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.et-prompt { margin: 0; font: 600 22px/1.25 var(--font-display); font-variation-settings: var(--fn-font-display-axes); letter-spacing: var(--fn-tracking-heading); }
.et-warn { margin: 0; color: var(--warn-text); font-weight: 600; }

.et-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.et-choices.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.et-choices.many { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.et-choice { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 14px; text-align: left; font-weight: 700; font-size: 16px; color: var(--text); cursor: pointer;
  background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); transition: border-color .12s, background .12s; }
.et-choice:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-3); }
.et-choice:disabled { cursor: default; opacity: .75; }
.et-choice.good { opacity: 1; background: color-mix(in srgb, var(--good) 22%, var(--surface)); border-color: var(--good); }
.et-choice.bad { opacity: 1; background: color-mix(in srgb, var(--bad) 20%, var(--surface)); border-color: var(--bad); }
.et-choice .kbd { flex: none; }

.et-verdict { margin: 0; font-weight: 700; font-size: 17px; }
.et-verdict.good { color: var(--good-text); }
.et-verdict.bad { color: var(--bad-text); }
.et-reveal { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.et-answer { margin: 0; font-weight: 600; font-size: 17px; }
.et-compare { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.et-neck { padding: 8px 10px 4px; background: var(--surface); }
.et-reveal .et-neck .fretboard { max-width: 520px; }
.et-diagrams { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.et-diagrams .chord-diagram { width: 124px; height: auto; }
.et-diagrams .chord-diagram.sm { width: 104px; }
.et-neck .fb-marker.et-start circle, .et-neck .fb-marker.et-start rect { stroke: var(--text); stroke-width: 3; }
.et-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.et-actions .btn { text-decoration: none; }
.et-tip { margin: 0; font-size: 13.5px; }

.et-slots { display: flex; gap: 8px; }
.et-slot { display: grid; place-items: center; width: 46px; height: 46px; font-weight: 700; font-size: 17px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); }
.et-slot.now { border-color: var(--action); border-width: 2px; }
.et-slot.good { background: color-mix(in srgb, var(--good) 22%, var(--surface)); border-color: var(--good); }
.et-slot.bad { background: color-mix(in srgb, var(--bad) 20%, var(--surface)); border-color: var(--bad); }

.et-foot { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13.5px; }
.et-foot:empty { display: none; }
.et-clock { display: inline-block; min-width: 3.2em; font-weight: 600; color: var(--text-2); }

.et-result { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.et-result h2 { font-size: 26px; }
.et-result p { margin: 2px 0 0; }
.et-score { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 132px; height: 132px; border-radius: 50%; border: 3px solid var(--border-strong); }
.et-score.passed { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.et-score b { font: 600 30px var(--font-display); font-variation-settings: var(--fn-font-display-axes); }
.et-work { margin: 0; }

@media (max-width: 760px) {
  .et-lesson { flex-wrap: wrap; }
  .et-lesson-text { flex-basis: calc(100% - 40px); }
  .et-go { margin-left: 38px; }
  .et-best { margin-left: 38px; flex-basis: 100%; }
  .et-lesson.next { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 600px) {
  .et-choices, .et-choices.three { grid-template-columns: 1fr; }
  .et-replay { width: 84px; height: 84px; }
  .et-prompt { font-size: 19px; }
  .et-quiz { min-height: 0; }
}
@media (pointer: coarse) { .et-go .btn { height: 44px; } }
@media (hover: none) { .et-keys, .et-choice .kbd { display: none; } } /* no keyboard, so no key hints */
@media (prefers-reduced-motion: reduce) { .et-replay.ping { animation: none; } }