/* asr — чтение вслух (read-aloud) и стенд распознавания. Ведёт исполнитель «Чтение вслух» (CONTRACT.md).
   Кнопка микрофона ≥ 88 px, кнопки взрослого ≥ 72 px в высоту, между зонами касания ≥ 16 px. */

.ra { width: min(880px, 100%); display: grid; justify-items: center; align-content: center; gap: 20px; }

/* слово крупно, слоги с дугами снизу — как в букваре */
.ra-card { position: relative; z-index: 1; background: var(--c-card); border: 3px solid var(--c-ink); box-shadow: 0 6px 0 var(--c-ink); padding: 14px clamp(24px, 5vw, 56px) 22px; min-width: min(400px, 100%); max-width: 100%; display: grid; place-items: center; transition: border-color .2s, box-shadow .2s; }
.ra-word { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .45em; font-weight: 700; font-size: clamp(64px, 11vw, 140px); line-height: 1.08; letter-spacing: .03em; }
.ra-w { display: inline-flex; gap: .1em; }
.ra-syl { position: relative; padding: 0 .03em .24em; transition: color .15s; }
.ra-syl::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: .02em; height: .17em; border: .05em solid var(--c-sova); border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; opacity: .75; transition: border-color .15s; }
.ra-syl.is-lit { color: var(--c-pyh); }
.ra-syl.is-lit::after { border-color: var(--c-pyh); opacity: 1; }
.ra.is-right .ra-card { border-color: var(--c-ok); box-shadow: 0 6px 0 #2b7347; }
.ra.is-right .ra-syl { color: var(--c-ok); }
.ra.is-right .ra-syl::after { border-color: var(--c-ok); }
.ra.is-wrong .ra-card { animation: nope .5s; border-color: var(--c-oops); }

/* ряд с микрофоном: слева пусто (там стоят герои), по центру микрофон, справа — «Проверит взрослый» */
.ra-foot { position: relative; z-index: 0; margin-top: 6px; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.ra-act { grid-column: 2; display: grid; justify-items: center; gap: 10px; }
.ra-mic { --p: 0; --lvl: 0; position: relative; width: 128px; height: 128px; border-radius: 50%; border: 0; background: var(--c-pyh); color: #fff; box-shadow: 0 6px 0 #c4621d; display: grid; place-items: center; touch-action: manipulation; }
.ra-mic:active { transform: translateY(4px); box-shadow: 0 2px 0 #c4621d; }
.ra-mic-icon { width: 58px; height: 58px; position: relative; z-index: 2; pointer-events: none; }
.ra-mic:disabled { opacity: .5; cursor: default; transform: none; }
.ra-mic.is-invite { animation: ra-pulse 1.3s ease-in-out infinite; }
/* кольцо загрузки модели */
.ra-ring { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); transform: rotate(-90deg); opacity: 0; pointer-events: none; transition: opacity .2s; }
.ra-ring circle { fill: none; stroke-width: 6; }
.ra-ring-bg { stroke: var(--c-line); }
.ra-ring-fg { stroke: var(--c-ok); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); transition: stroke-dashoffset .25s; }
.ra-mic.is-loading .ra-ring { opacity: 1; }
.ra-mic.is-loading { background: #f2a36a; box-shadow: 0 6px 0 #d07a3c; }
.ra-mic.is-preparing .ra-ring { animation: ra-spin 1.1s linear infinite; }
.ra-mic.is-preparing .ra-ring-fg { stroke-dasharray: 28 72; stroke-dashoffset: 0; }
/* слушаю: волны растут от громкости голоса */
.ra-waves { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; transition: box-shadow .08s linear, opacity .2s; }
.ra-mic[data-state="listening"] { background: #e2622b; box-shadow: 0 6px 0 #b14817; }
.ra-mic[data-state="listening"] .ra-waves { opacity: 1; box-shadow: 0 0 0 calc(6px + var(--lvl) * 16px) rgba(239, 132, 51, .3), 0 0 0 calc(14px + var(--lvl) * 30px) rgba(239, 132, 51, .14); animation: ra-breathe 1.6s ease-in-out infinite; }
.ra-mic[data-state="starting"] { opacity: .8; }
.ra-status { margin: 0; min-height: 1.35em; font-size: 16px; color: var(--c-muted); text-align: center; }

/* «Проверит взрослый» — тихая кнопка для родителя, не отвлекает ребёнка */
.ra-switch { grid-column: 3; justify-self: end; min-height: 72px; min-width: 72px; max-width: 200px; padding: 8px 16px; display: flex; align-items: center; gap: 8px; background: transparent; border: 1.5px dashed rgba(31, 43, 61, .35); color: var(--c-muted); font-size: 15px; line-height: 1.2; text-align: left; }
.ra-switch svg { width: 28px; height: 28px; flex: none; }

/* запасной путь: проверяет взрослый */
.ra-adult { width: min(600px, 100%); background: #fffdf5; border: 2px solid var(--c-ink); box-shadow: 4px 4px 0 var(--c-ink); padding: 18px 22px 20px; display: grid; gap: 10px; }
.ra-adult-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; }
.ra-adult-why { margin: 0; font-size: 16px; line-height: 1.4; color: var(--c-muted); }
.ra-adult-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.ra-btn { min-height: 76px; padding: 10px 14px; border: 2px solid var(--c-ink); background: var(--c-card); box-shadow: 0 4px 0 var(--c-ink); font-size: 20px; font-weight: 700; }
.ra-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-ink); }
.ra-btn-ok { background: var(--c-ok); border-color: #2b7347; color: #fff; box-shadow: 0 4px 0 #2b7347; }
.ra-btn-ok:active { box-shadow: 0 1px 0 #2b7347; }
.ra[data-mode="adult"] .ra-foot { display: none; }
/* задание закрыто (верно, герой прочитал сам или ответил взрослый) — нажимать больше нечего */
.ra.is-done .ra-foot { visibility: hidden; }
.ra.is-done .ra-adult-btns { visibility: hidden; }

@keyframes ra-pulse { 50% { transform: scale(1.07); } }
@keyframes ra-spin { to { transform: rotate(270deg); } }
@keyframes ra-breathe { 50% { transform: scale(1.04); } }

@media (max-width: 700px) {
  .ra { gap: 16px; }
  .ra-card { min-width: 0; width: 100%; padding: 10px 16px 18px; }
  .ra-word { font-size: clamp(56px, 17vw, 96px); }
  .ra-foot { grid-template-columns: 1fr auto 1fr; gap: 12px; }
  .ra-mic { width: 104px; height: 104px; }
  .ra-mic-icon { width: 48px; height: 48px; }
  .ra-switch { max-width: 124px; padding: 8px 10px; font-size: 14px; flex-direction: column; justify-content: center; text-align: center; gap: 4px; }
  .ra-adult { padding: 14px 16px 16px; }
  .ra-adult-title { font-size: 21px; }
  .ra-btn { font-size: 18px; }
}
@media (max-height: 700px) and (min-width: 701px) {
  .ra-word { font-size: clamp(56px, 9vw, 110px); }
  .ra-mic { width: 108px; height: 108px; }
}

/* ---------- стенд app/dev/asr.html ---------- */
.asr-dev { max-width: 1080px; margin: 0 auto; padding: 20px 20px 40px; display: grid; gap: 18px; user-select: text; -webkit-user-select: text; }
.asr-dev h1 { font-family: var(--f-title); font-weight: 400; font-size: 30px; margin: 0; }
.asr-dev h2 { font-size: 18px; margin: 0 0 10px; }
.asr-dev section { background: var(--c-card); border: 1.5px solid var(--c-line); padding: 16px 18px; }
.asr-dev .note { color: var(--c-muted); font-size: 15px; margin: 4px 0 0; }
.asr-dev .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.asr-dev button { min-height: 48px; padding: 0 16px; border: 1.5px solid var(--c-ink); background: var(--c-card); }
.asr-dev button.primary { background: var(--c-pyh); color: #fff; border-color: #c4621d; }
.asr-dev button:disabled { opacity: .5; }
.asr-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.asr-words button { min-height: 56px; font-size: 22px; font-weight: 700; }
.asr-words button[aria-pressed="true"] { background: var(--c-ink); color: #fff; }
.asr-bar { height: 10px; background: var(--c-line); flex: 1 1 200px; }
.asr-bar > i { display: block; height: 100%; width: 0; background: var(--c-ok); transition: width .2s; }
.asr-out { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 12px 0 0; font-size: 17px; }
.asr-out dt { color: var(--c-muted); }
.asr-out dd { margin: 0; font-weight: 700; word-break: break-word; }
.asr-out .yes { color: var(--c-ok); } .asr-out .no { color: var(--c-oops); }
.asr-dev pre { background: #f6f7f9; padding: 10px; font-size: 13px; overflow: auto; max-height: 220px; margin: 10px 0 0; }
.asr-dev label { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 44px; max-width: 100%; }
.asr-dev select { font: inherit; min-height: 40px; width: min(100%, 380px); }
.asr-dev input[type=file] { max-width: 100%; }
.asr-task { height: 100vh; height: 100dvh; }
.asr-task-result { position: fixed; right: 8px; top: 8px; z-index: 5; font-size: 12px; background: rgba(255, 255, 255, .9); padding: 4px 8px; max-width: 46vw; }