/*
 * Ear Trainer (/tools/ear-training/). Loaded after site.css; uses its tokens.
 * Mobile first: one column; from 1100 px the round settings and counts move beside the drill.
 * Right and wrong answers are shown with words and marks (✓ / ✗) and a solid or dashed border,
 * never by colour alone.
 */

/* ------------------------------------------------------------------ layout */
/* Phones: settings, then the question, then round and counts. Wide screens: the question on the left
   (Play and the answers in the first screenful), settings, round and counts on the right. */
.et { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); grid-template-areas: "setup" "stage" "side"; align-items: start; }
.et-setup { grid-area: setup; }
.et-stage { grid-area: stage; text-align: left; padding: var(--s-4); }
.et-side { grid-area: side; }
@media (min-width: 640px) { .et-stage { padding: var(--s-5) var(--s-6) var(--s-6); } }
@media (min-width: 1100px) {
  .et { grid-template-columns: minmax(0, 1.6fr) minmax(22rem, 1fr); grid-template-areas: "stage setup" "stage side"; grid-template-rows: auto 1fr; gap: var(--s-5) var(--s-6); }
}
.et-side { display: grid; gap: var(--s-4); }
.et-panel h2 { margin: 0 0 var(--s-2); font-size: var(--step-1); }
.et-panel > p { margin: var(--s-2) 0 0; }
.et-h3 { font-size: 1.125rem; margin: var(--s-5) 0 var(--s-2); }

/* ------------------------------------------------------------------ pickers */
.et-pickers { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
.et-modes, .et-levels { gap: 6px; }
.et-modes legend, .et-levels legend { margin-bottom: 4px; }
.et-modes .chip span { padding: 8px 16px; }
.et-levels .chip span { min-width: 48px; }
.et-level-hint { margin: -4px 0 0; }
.et-options { display: grid; gap: var(--s-3); }
.et-options > div[data-for] { display: grid; gap: var(--s-3); }
.et-seg { margin: 0; justify-self: start; flex-wrap: wrap; border-radius: var(--r-md); }
.et-seg .seg span { border-radius: calc(var(--r-md) - 4px); }
.et-seg-legend { float: left; width: 100%; font-size: var(--step--1); padding: 2px 6px 4px; margin: 0; }
.et-swara-opts { grid-template-columns: minmax(0, 1fr); }
.et-sa select { max-width: 16rem; }
.et-note { margin: 0; max-width: 46em; }

/* ------------------------------------------------------------------ play */
.et-play { margin: 0; }
.et-play-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.et-play-btn { min-width: min(11rem, 100%); } /* 100% cap: with large text a fixed 11rem pushed Play past a 320 px viewport (independent re-check) */
.et-progress { margin: var(--s-3) 0 0; font-weight: 600; }
.et-play .status { margin: var(--s-2) 0 0; }
.et-play .status:empty { display: none; }

/* ------------------------------------------------------------------ answers */
.et-answer-area { margin-top: var(--s-4); }
.et-answers-h { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: .02em; margin: 0 0 var(--s-2); }
.et-answers { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.et-answers[data-count="2"], .et-answers[data-count="3"], .et-answers[data-mode="scales"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
@media (max-width: 520px) {
  .et-answers, .et-answers[data-mode="scales"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .et-answers[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.et-answer {
  position: relative; display: block; min-height: 72px; padding: 10px 12px 10px 14px; border-radius: var(--r-md);
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--text); text-align: left; line-height: 1.2;
  transition: background-color var(--t-fast), border-color var(--t-fast);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; min-width: 0;
}
.et-answer > span { display: block; }
.et-answer:hover:not(:disabled) { background: var(--surface-2); }
.et-answer:active:not(:disabled) { background: var(--indigo-soft); }
/* The key badge floats top right: the name flows beside it, and a long word simply moves below it. */
.et-answer > .et-key {
  display: inline-block; float: right; margin: -3px -4px 4px 6px; font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: .75rem; font-weight: 700; color: var(--muted); border: 1.5px solid var(--line-strong); border-radius: 5px; padding: 0 5px; line-height: 1.4;
}
.et-main { font-weight: 750; font-size: 1.125rem; overflow-wrap: break-word; }
.et-sub { font-size: .8125rem; color: var(--muted); overflow-wrap: break-word; margin-top: 1px; }
.et-extra { font-size: .875rem; font-weight: 650; color: var(--indigo); }
.et-deva { font-size: 1rem; line-height: 1.3; }
.et-mark { font-size: .8125rem; font-weight: 750; margin-top: 4px; }
.et-answer.is-right { border: 3px solid var(--teal); background: var(--surface-2); padding: 9px 11px 9px 13px; }
.et-answer.is-right .et-mark { color: var(--text); }
.et-answer.is-wrong { border: 3px dashed var(--rose); padding: 9px 11px 9px 13px; }
.et-answer.is-wrong .et-mark { color: var(--text); }
/* Long names (chords, scales) on phones: a little smaller, so whole words fit ("Half-diminished" breaks at its hyphen). */
@media (max-width: 520px) {
  .et-answer { padding: 10px 8px 10px 10px; }
  .et-answer.is-right, .et-answer.is-wrong { padding: 9px 7px 9px 9px; }
  .et-answers[data-mode="scales"] .et-main, .et-answers[data-mode="chords"] .et-main { font-size: 1rem; }
}
.et-terms { margin: var(--s-2) 0 0; }

/* ------------------------------------------------------------------ feedback */
.et-feedback { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--surface-2); border-left: 5px solid var(--line-strong); }
.et-feedback.is-right { border-left: 5px solid var(--teal); }
.et-feedback.is-wrong { border-left: 5px dashed var(--rose); }
.et-verdict { margin: 0; font-weight: 700; font-size: var(--step-0); }
.et-detail { margin: var(--s-1) 0 0; }
.et-compare { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); }
.et-compare button { min-height: 44px; padding: 6px 16px; font-size: var(--step--1); box-shadow: 0 3px 0 var(--line-strong); }

.et-next-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

/* ------------------------------------------------------------------ summary */
.et-summary { outline: none; }
.et-summary h3 { margin: 0 0 var(--s-2); }
.et-summary-total { font-size: var(--step-1); font-weight: 700; margin: 0 0 var(--s-3); }
.et-summary-list { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: 4px; max-width: 32rem; }
.et-summary-list li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.et-sum-count { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.et-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--r-sm); }

/* ------------------------------------------------------------------ counts */
.et-table-wrap { overflow-x: auto; margin-top: var(--s-2); }
.et-table { border-collapse: collapse; width: 100%; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.et-table th, .et-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.et-table th:first-child { text-align: left; }
.et-table thead th { font-weight: 700; color: var(--muted); }
.et-reset { margin-top: var(--s-3); }
.et-reset-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.et-reset-confirm p { flex-basis: 100%; margin: 0; font-weight: 600; }
.et-reset button { min-height: 44px; padding: 6px 16px; font-size: var(--step--1); box-shadow: 0 3px 0 var(--line-strong); }

@media (forced-colors: active) {
  .et-answer.is-right { border-color: Highlight; }
  .et-answer.is-wrong { border-color: CanvasText; }
}