/* Step 0 speech test page */
.st { max-width: 1100px; margin: 0 auto; padding: 1rem 16px 3rem; display: flex; flex-direction: column; gap: 1rem; }
.pad { padding: 1rem 1.15rem; }
.small { font-size: .85rem; }
.hint { font-size: .8rem; color: var(--muted); margin-top: .3rem; }
.hint.bad { color: var(--critical); }
.hint.good { color: var(--ok); }
.mt { margin-top: .7rem; }
.inline { display: flex; gap: .5rem; align-items: center; }
code { font-family: var(--mono); font-size: .88em; background: #eef1f5; padding: .05em .35em; border-radius: 4px; }
kbd { font-family: var(--mono); font-size: .85em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 .35em; background: #fff; }

#api-pill.ok { background: #1f7a44; }
#api-pill.warn { background: #9a6700; }
#api-pill.bad { background: #a2261e; }

.methods-legend { margin: 0 0 .7rem; padding-left: 1.2rem; }
.methods-legend li { margin-bottom: .2rem; }
.setup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: .8rem; }
.setup select { width: 100%; }
.vocab { margin-top: .9rem; }
.vocab summary { cursor: pointer; font-weight: 600; }
.vocab textarea { margin-top: .5rem; font-family: var(--mono); font-size: .85rem; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.section-head h2 { margin: 0; }

.phrases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.phrase { border: 1px solid var(--line); border-radius: 9px; padding: .6rem .7rem; background: #fff; }
.phrase.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31, 95, 214, .15); }
.phrase.done { background: #fbfcfd; }
.ph-top { display: flex; align-items: center; gap: .7rem; }
.ph-num { flex: 0 0 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: #eef1f5; font-weight: 700; font-size: .85rem; color: var(--muted); }
.phrase.done .ph-num { background: var(--ok-bg); color: var(--ok); }
.ph-text { flex: 1; font-size: 1rem; }
.ph-text input { font-size: .95rem; }
.rec {
  flex: 0 0 auto; border: 0; border-radius: 999px; padding: .55em 1em; font-weight: 700; color: #fff; background: var(--navy);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; min-width: 9.5em;
}
.rec:hover { background: var(--navy-2); }
.rec.on { background: var(--tx); }
.rec:disabled { opacity: .5; }
.ph-results { display: none; margin-top: .6rem; }
.phrase.has-results .ph-results { display: block; }
.ph-audio { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--muted); margin-bottom: .45rem; flex-wrap: wrap; }
.ph-audio audio { height: 30px; max-width: 260px; }
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.res { border: 1px solid var(--line); border-radius: 8px; padding: .45rem .55rem; font-size: .88rem; min-height: 4.2em; }
.res-head { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.res-score { font-size: .85rem; letter-spacing: 0; text-transform: none; }
.res-score.good { color: var(--ok); }
.res-score.mid { color: var(--minor); }
.res-score.low { color: var(--critical); }
.res-text { font-family: var(--mono); font-size: .8rem; line-height: 1.5; word-break: break-word; }
.res-raw { color: var(--muted); font-size: .78rem; margin-top: .3rem; }
.res-meta { font-size: .74rem; color: var(--muted); margin-top: .3rem; }
.res.err .res-text { color: var(--critical); font-family: var(--sans); }
.res.wait .res-text { color: var(--muted); font-family: var(--sans); }
mark { border-radius: 3px; padding: 0 .15em; }
mark.sub { background: var(--minor-bg); color: var(--minor); }
mark.ins { background: var(--critical-bg); color: var(--critical); }
mark.del { background: #eef1f5; color: var(--muted); text-decoration: line-through; }
.icao { display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 0 .45em; margin-right: .25em; }
.icao.kept { background: var(--ok-bg); color: var(--ok); }
.icao.lost { background: var(--major-bg); color: var(--major); }

.summary { width: 100%; border-collapse: collapse; font-size: .92rem; }
.summary th, .summary td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.summary th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.summary td { font-variant-numeric: tabular-nums; }

.tts-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; }
.check { display: flex; gap: .5rem; align-items: center; font-size: .92rem; }
input[type=range] { width: 100%; }
.tts-log { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.tts-log li { display: flex; gap: .6rem; align-items: center; font-size: .86rem; border: 1px solid var(--line); border-radius: 8px; padding: .35rem .55rem; flex-wrap: wrap; }
.tts-log .voice { font-weight: 700; }
.tts-log .mode { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: var(--me-bg); border-radius: 999px; padding: 0 .5em; }
.inline.wrap { flex-wrap: wrap; }
.tts-log .t { color: var(--muted); }
.tts-log .err { color: var(--critical); }

.live-grid { display: grid; grid-template-columns: 1fr 220px; gap: 1.2rem; align-items: start; margin: .4rem 0 1rem; }
.live-expected { font-size: 1.05rem; margin: .6rem 0; min-height: 1.4em; }
.live-box { border: 1px solid var(--line-strong); border-radius: 9px; padding: .55rem .7rem; background: #0d1d31; color: #e6edf5; min-height: 5.2em; }
.live-label { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8fa6c0; }
.live-text { font-family: var(--mono); font-size: 1rem; margin-top: .25rem; color: #7cf0a4; }
.live-ptt-col { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
.live-ptt { min-height: 6.5em; font-size: 1.05rem; border-radius: 14px; }
.table-wrap { overflow-x: auto; }
.live-table td { vertical-align: top; }
.live-table .mono-cell { font-family: var(--mono); font-size: .8rem; min-width: 14em; }
.live-table .bad { color: var(--critical); }

@media (max-width: 820px) {
  .live-grid { grid-template-columns: 1fr; }
  .setup { grid-template-columns: 1fr; }
  .res-grid { grid-template-columns: 1fr; }
  .tts-grid { grid-template-columns: 1fr; }
  .ph-top { flex-wrap: wrap; }
  .rec { width: 100%; padding: .8em 1em; }
  .summary { font-size: .82rem; }
}