/* "Nghe phân biệt" (nghe-phan-biet.html, js/listen.js). The pieces are
   css/components.css; this lays out the sets, the round and the result. */
.wrap { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter) 80px; }
.ls-head { padding-top: var(--space-5); margin-bottom: var(--space-4); }
.ls-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); }
.ls-head h1 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.15; margin: var(--space-2) 0;
  text-wrap: balance; }
.ls-sub { color: var(--ink-soft); margin: 0; max-width: 40em; }
.ls-langs { margin-bottom: var(--space-3); }
.ls-voice { font-size: var(--text-sm); color: var(--ink-soft); margin: 0 0 var(--space-4); }
.ls-voice.is-bad { color: var(--flag); }
.ls-sets { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ls-set { font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.ls-example { display: block; margin-top: var(--space-2); font-family: var(--font-jp); font-size: var(--text-lg); color: var(--accent); }
.ls-mix { border-style: dashed; }

.ls-run { display: grid; gap: var(--space-4); max-width: 560px; margin: 0 auto; }
.ls-run-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ls-count { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-soft); }
.ls-play { font: inherit; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); cursor: pointer;
  justify-self: center; width: 148px; height: 148px; justify-content: center; border-radius: 50%;
  border: 2px solid var(--accent); background: var(--accent-soft); color: var(--ink); }
.ls-play > span:first-child { font-size: 44px; line-height: 1; }
.ls-play-label { font-size: var(--text-sm); color: var(--ink-soft); }
.ls-play:hover, .ls-play:focus-visible { border-color: var(--ink); outline: none; }
.ls-ask { text-align: center; margin: 0; font-weight: 700; }
.ls-opts { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ls-opt { font: inherit; display: grid; justify-items: center; gap: 2px; padding: var(--space-4) var(--space-3); min-height: 96px;
  border-radius: var(--radius); border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.ls-opt:not(:disabled):hover, .ls-opt:focus-visible { border-color: var(--accent); outline: none; }
.ls-opt.is-right { border-color: var(--ok); background: var(--ok-soft); }
.ls-opt.is-wrong { border-color: var(--flag); background: var(--flag-soft); }
.ls-w { font-family: var(--font-jp); font-size: 26px; font-weight: 700; }
.ls-k { font-family: var(--font-jp); font-size: var(--text-sm); color: var(--ink-soft); }
.ls-m { font-size: var(--text-sm); color: var(--ink-soft); }
.ls-key { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--line-strong); border-radius: 4px;
  padding: 0 5px; color: var(--ink-soft); }
.ls-opt .ls-key { justify-self: start; }
.ls-feedback { display: grid; gap: var(--space-3); }
.ls-verdict { margin: 0; font-weight: 700; }
.ls-verdict.ok { color: var(--ok); }
.ls-verdict.bad { color: var(--flag); }
.ls-tip { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.ls-compare, .ls-missed-row, .ls-done-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ls-missed-row { background: var(--surface-2); border-radius: var(--radius); padding: var(--space-2); }
.ls-feedback > .bh-btn { justify-self: start; }

.ls-done { display: grid; gap: var(--space-4); max-width: 560px; }
.ls-done .bh-stat { justify-self: start; min-width: 200px; }
.ls-done-note { margin: 0; color: var(--ink-soft); }
.ls-h { font-family: var(--font-display); font-size: var(--text-xl); margin: 0; }
.ls-missed { display: grid; gap: var(--space-2); }

@media (pointer: coarse), (max-width: 720px) {
  .ls-opt { min-height: 104px; }
}
/* In a round the page's own heading steps aside: the button and the two
   words have to fit one phone screen. */
body.in-session .ls-head { display: none; }
body.in-session .ls-run { padding-top: var(--space-4); }